e74c285b70
Major feature migration from dt-shopify-storefront into the design system: - Card system: per-card color modes (normal/emphasis/warning/success/other), progress bars, full-bleed card body (card-body-flush), image bevel clip-paths, and visible structural borders at bevel corners - Badge system: dt-card-badge with position-aware offsets for cards vs media frames - Media frames: dt-bevel-media with inner surface fill, image clipping, and "MISSING MEDIA" placeholder for empty containers - Interactive bevel buttons: dt-btn with hover/selected states and pulse animation - Menu items: dt-menu-item with active states and level indentation - Animations: scale-in, fade-in, slide-up, pulse, ping, spin keyframes - Feature legend: CSS grid for product feature icons with state colors - Scrollbar styling for DT brand - New @dangerousthings/react package wrapping web CSS components - New @dangerousthings/tailwind-preset package - New @dangerousthings/hex-background package - Desktop showcase rewritten in React with Tailwind CSS - Mobile showcase updated with new screens (animations, filters, advanced cards) - Tokens: added mode color tokens, RGB variants, and selected-state tokens Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
89 lines
1.9 KiB
TypeScript
89 lines
1.9 KiB
TypeScript
/**
|
|
* DT Chip Component
|
|
*
|
|
* A themed chip/tag following the Dangerous Things design language.
|
|
* Useful for displaying chip types, statuses, and labels.
|
|
*/
|
|
|
|
// React import not needed with new JSX transform
|
|
import { StyleSheet, ViewStyle, StyleProp } from 'react-native';
|
|
import { Chip, ChipProps } from 'react-native-paper';
|
|
import { useDTTheme } from '../theme/DTThemeProvider';
|
|
import { type DTVariant, getVariantColor } from '../utils/variantColors';
|
|
|
|
interface DTChipProps extends Omit<ChipProps, 'mode'> {
|
|
/**
|
|
* Visual variant of the chip
|
|
* @default 'normal'
|
|
*/
|
|
variant?: DTVariant;
|
|
/**
|
|
* Whether the chip is in selected state
|
|
* @default false
|
|
*/
|
|
selected?: boolean;
|
|
/**
|
|
* Additional styles
|
|
*/
|
|
style?: StyleProp<ViewStyle>;
|
|
}
|
|
|
|
/**
|
|
* DT-styled Chip component
|
|
*
|
|
* @example
|
|
* <DTChip variant="normal">NTAG215</DTChip>
|
|
*
|
|
* @example
|
|
* <DTChip variant="success" selected>Cloneable</DTChip>
|
|
*
|
|
* @example
|
|
* <DTChip variant="warning">Non-Cloneable</DTChip>
|
|
*/
|
|
export function DTChip({
|
|
variant = 'normal',
|
|
selected = false,
|
|
style,
|
|
children,
|
|
...props
|
|
}: DTChipProps) {
|
|
const theme = useDTTheme();
|
|
const color = getVariantColor(theme, variant);
|
|
|
|
const chipStyle: ViewStyle = {
|
|
backgroundColor: selected ? color : 'transparent',
|
|
borderColor: color,
|
|
borderWidth: 1,
|
|
borderRadius: 0, // Angular DT style
|
|
};
|
|
|
|
return (
|
|
<Chip
|
|
{...props}
|
|
mode="outlined"
|
|
showSelectedCheck={false}
|
|
textStyle={[
|
|
styles.text,
|
|
{ color: selected ? theme.colors.onPrimary : color },
|
|
]}
|
|
style={[styles.chip, chipStyle, style]}
|
|
selectedColor={color}
|
|
selected={selected}
|
|
>
|
|
{children}
|
|
</Chip>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
chip: {
|
|
marginRight: 8,
|
|
marginBottom: 8,
|
|
},
|
|
text: {
|
|
fontWeight: '600',
|
|
letterSpacing: 0.5,
|
|
fontSize: 12,
|
|
},
|
|
});
|