@dangerousthings/react-native 0.2.1 → 0.3.0

package/README.md

@@ -1,6 +1,6 @@
 # @dangerousthings/react-native
 
-React Native components for the Dangerous Things design system — 18 themed components built on React Native Paper with cyberpunk beveled aesthetics.
+React Native components for the Dangerous Things design system — 22 themed components built on React Native Paper with cyberpunk beveled aesthetics.
 
 ## Install
 
@@ -74,6 +74,9 @@ Options:
 | `DTMediaFrame` | Diagonal beveled frame for images |
 | `DTAccordion` | Collapsible sections with accent border |
 | `DTHexagon` | Decorative hexagon SVG shape |
+| `DTBadgeOverlay` | Absolute-positioned badge wrapper (top-left, top-right, bottom-left, bottom-right) |
+| `DTStaggerContainer` | Staggered scale-in entrance animation for child elements |
+| `DTFeatureLegend` | Product feature grid with icons and rotated labels |
 
 ### Interactive
 
@@ -83,6 +86,14 @@ Options:
 | `DTDrawer` | Side drawer with edge bevels |
 | `DTGallery` | Image gallery |
 | `DTMenu` | Dropdown menu with item variants |
+| `DTMobileFilterOverlay` | Full-screen slide-up filter overlay with backdrop |
+
+### Animation Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useScaleIn` | Scale 0→1 entrance animation |
+| `usePulse` | Looping opacity pulse animation |
 
 ## Usage Examples
 
@@ -99,6 +110,11 @@ import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react-native";
   <Text>Chip detected</Text>
 </DTCard>
 
+// Card with selected state and progress bar
+<DTCard title="PRODUCT" mode="emphasis" selected progress={0.6}>
+  <Text>Selected with 60% progress</Text>
+</DTCard>
+
 // Text input with error state
 <DTTextInput
   variant="normal"

package/dist/components/DTAccordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DTAccordion.d.ts","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,gBAAgB;IACxB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAkB,EAClB,aAA0B,EAC1B,aAAqB,EACrB,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,gBAAgB,2CAuClB"}
+{"version":3,"file":"DTAccordion.d.ts","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAGV,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,UAAU,gBAAgB;IACxB;;OAEG;IACH,QAAQ,EAAE,kBAAkB,EAAE,CAAC;IAC/B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B;;OAEG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAkB,EAClB,aAA0B,EAC1B,aAAqB,EACrB,eAAe,EACf,eAAe,EACf,KAAK,GACN,EAAE,gBAAgB,2CAwClB"}

package/dist/components/DTAccordion.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useCallback, useRef, useEffect } from 'react';
 import { StyleSheet, View, Pressable, Animated, } from 'react-native';
 import { Text } from 'react-native-paper';
-import { DTColors } from '../theme/colors';
+import { useDTTheme } from '../theme/DTThemeProvider';
 import { getVariantColor } from '../utils/variantColors';
 /**
  * DT-styled Accordion with animated height expansion
@@ -28,6 +28,7 @@ import { getVariantColor } from '../utils/variantColors';
  * />
  */
 export function DTAccordion({ sections, variant = 'normal', activeVariant = 'emphasis', allowMultiple = false, initialOpenKeys, onSectionToggle, style, }) {
+    const theme = useDTTheme();
     const [openKeys, setOpenKeys] = useState(new Set(initialOpenKeys));
     const toggleSection = useCallback((key) => {
         setOpenKeys(prev => {
@@ -43,11 +44,12 @@ export function DTAccordion({ sections, variant = 'normal', activeVariant = 'emp
             return next;
         });
     }, [allowMultiple, onSectionToggle]);
-    const inactiveColor = getVariantColor(variant);
-    const activeColor = getVariantColor(activeVariant);
+    const inactiveColor = getVariantColor(theme, variant);
+    const activeColor = getVariantColor(theme, activeVariant);
     return (_jsx(View, { style: [styles.container, style], children: sections.map(section => (_jsx(AccordionSection, { section: section, isOpen: openKeys.has(section.key), onToggle: () => toggleSection(section.key), inactiveColor: inactiveColor, activeColor: activeColor }, section.key))) }));
 }
 function AccordionSection({ section, isOpen, onToggle, inactiveColor, activeColor, }) {
+    const theme = useDTTheme();
     const heightAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
     const chevronAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
     const [contentHeight, setContentHeight] = useState(0);
@@ -80,6 +82,7 @@ function AccordionSection({ section, isOpen, onToggle, inactiveColor, activeColo
                     {
                         borderColor: sectionColor,
                         borderTopColor: sectionColor,
+                        backgroundColor: theme.colors.background,
                         opacity: pressed ? 0.7 : 1,
                     },
                 ], children: [_jsx(Text, { style: [styles.title, { color: sectionColor }], children: section.title }), _jsx(Animated.View, { style: [
@@ -91,7 +94,7 @@ function AccordionSection({ section, isOpen, onToggle, inactiveColor, activeColo
                         height: measured ? animatedHeight : undefined,
                         overflow: 'hidden',
                     },
-                ], children: _jsx(View, { style: styles.content, onLayout: e => {
+                ], children: _jsx(View, { style: [styles.content, { backgroundColor: theme.colors.background }], onLayout: e => {
                         const h = e.nativeEvent.layout.height;
                         if (h > 0 && !measured) {
                             setContentHeight(h);
@@ -110,7 +113,6 @@ const styles = StyleSheet.create({
         flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'space-between',
-        backgroundColor: DTColors.dark,
         borderWidth: 1,
         borderTopWidth: 5,
         paddingVertical: 12,
@@ -126,7 +128,6 @@ const styles = StyleSheet.create({
     content: {
         paddingHorizontal: 16,
         paddingVertical: 12,
-        backgroundColor: DTColors.dark,
     },
     chevron: {
         justifyContent: 'center',

package/dist/components/DTAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"DTAccordion.js","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DTAccordion.js","sourceRoot":"","sources":["../../src/components/DTAccordion.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAC,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,SAAS,EACT,QAAQ,GACT,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAC,UAAU,EAAC,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAiB,eAAe,EAAC,MAAM,wBAAwB,CAAC;AAmDvE;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,aAAa,GAAG,UAAU,EAC1B,aAAa,GAAG,KAAK,EACrB,eAAe,EACf,eAAe,EACf,KAAK,GACY;IACjB,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,IAAI,GAAG,CAAC,eAAe,CAAC,CACzB,CAAC;IAEF,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,GAAW,EAAE,EAAE;QACd,WAAW,CAAC,IAAI,CAAC,EAAE;YACjB,MAAM,IAAI,GAAG,IAAI,GAAG,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YAChD,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YACjC,IAAI,SAAS,EAAE,CAAC;gBACd,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAChB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;YACnB,CAAC;YACD,eAAe,EAAE,CAAC,GAAG,EAAE,SAAS,CAAC,CAAC;YAClC,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC,EACD,CAAC,aAAa,EAAE,eAAe,CAAC,CACjC,CAAC;IAEF,MAAM,aAAa,GAAG,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACtD,MAAM,WAAW,GAAG,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAE1D,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,CAAC,YACnC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC,CACvB,KAAC,gBAAgB,IAEf,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,EACjC,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC,EAC1C,aAAa,EAAE,aAAa,EAC5B,WAAW,EAAE,WAAW,IALnB,OAAO,CAAC,GAAG,CAMhB,CACH,CAAC,GACG,CACR,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAW,GAOZ;IACC,MAAM,KAAK,GAAG,UAAU,EAAE,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACtE,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACvE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACtD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,YAAY,GAAG,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,QAAQ,CAAC;YAChB,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE;gBAC1B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvB,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,KAAK;aACvB,CAAC;YACF,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;gBAC3B,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACvB,QAAQ,EAAE,GAAG;gBACb,eAAe,EAAE,IAAI;aACtB,CAAC;SACH,CAAC,CAAC,KAAK,EAAE,CAAC;IACb,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,WAAW,CAAC,CAAC,CAAC;IAEtC,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC;KAChC,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,WAAW,CAAC,WAAW,CAAC;QAC5C,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,MAAC,IAAI,eAEH,MAAC,SAAS,IACR,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC;oBACpB,MAAM,CAAC,MAAM;oBACb;wBACE,WAAW,EAAE,YAAY;wBACzB,cAAc,EAAE,YAAY;wBAC5B,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU;wBACxC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;qBAC3B;iBACF,aACD,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAC,KAAK,EAAE,YAAY,EAAC,CAAC,YAC/C,OAAO,CAAC,KAAK,GACT,EACP,KAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE;4BACL,MAAM,CAAC,OAAO;4BACd,EAAC,SAAS,EAAE,CAAC,EAAC,MAAM,EAAE,aAAa,EAAC,CAAC,EAAC;yBACvC,YACD,KAAC,IAAI,IACH,KAAK,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,EAAC,cAAc,EAAE,YAAY,EAAC,CAAC,GAC5D,GACY,IACN,EAGZ,KAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE;oBACL,MAAM,CAAC,cAAc;oBACrB;wBACE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS;wBAC7C,QAAQ,EAAE,QAAQ;qBACnB;iBACF,YACD,KAAC,IAAI,IACH,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAC,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,EAAC,CAAC,EACnE,QAAQ,EAAE,CAAC,CAAC,EAAE;wBACZ,MAAM,CAAC,GAAG,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,MAAM,CAAC;wBACtC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;4BACvB,gBAAgB,CAAC,CAAC,CAAC,CAAC;4BACpB,WAAW,CAAC,IAAI,CAAC,CAAC;4BAClB,IAAI,CAAC,MAAM,EAAE,CAAC;gCACZ,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;4BACzB,CAAC;wBACH,CAAC;oBACH,CAAC,YACA,OAAO,CAAC,QAAQ,GACZ,GACO,IACX,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,GAAG,EAAE,CAAC;KACP;IACD,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,eAAe;QAC/B,WAAW,EAAE,CAAC;QACd,cAAc,EAAE,CAAC;QACjB,eAAe,EAAE,EAAE;QACnB,iBAAiB,EAAE,EAAE;KACtB;IACD,KAAK,EAAE;QACL,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,GAAG;QAClB,aAAa,EAAE,WAAW;QAC1B,QAAQ,EAAE,EAAE;KACb;IACD,cAAc,EAAE,EAAE;IAClB,OAAO,EAAE;QACP,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;KACpB;IACD,OAAO,EAAE;QACP,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;IACD,YAAY,EAAE;QACZ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,CAAC;QAClB,gBAAgB,EAAE,CAAC;QACnB,cAAc,EAAE,CAAC;QACjB,eAAe,EAAE,aAAa;QAC9B,gBAAgB,EAAE,aAAa;KAChC;CACF,CAAC,CAAC"}

package/dist/components/DTBadgeOverlay.d.ts

@@ -0,0 +1,29 @@
+/**
+ * DT Badge Overlay
+ *
+ * Positioning wrapper for badges on cards and media frames.
+ * Places children absolutely at a specified corner with configurable offset.
+ */
+import { ReactNode } from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+type BadgePosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface DTBadgeOverlayProps {
+    children: ReactNode;
+    /**
+     * Corner position for the badge
+     * @default 'bottom-right'
+     */
+    position?: BadgePosition;
+    /**
+     * Offset from the corner in pixels
+     * @default 8
+     */
+    offset?: number;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+}
+export declare function DTBadgeOverlay({ children, position, offset, style, }: DTBadgeOverlayProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DTBadgeOverlay.d.ts.map

package/dist/components/DTBadgeOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTBadgeOverlay.d.ts","sourceRoot":"","sources":["../../src/components/DTBadgeOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAO,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAExD,KAAK,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;AAE/E,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAyB,EACzB,MAAU,EACV,KAAK,GACN,EAAE,mBAAmB,2CASrB"}

package/dist/components/DTBadgeOverlay.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from 'react-native';
+export function DTBadgeOverlay({ children, position = 'bottom-right', offset = 8, style, }) {
+    const positionStyle = {
+        position: 'absolute',
+        zIndex: 4,
+        ...(position.includes('top') ? { top: offset } : { bottom: offset }),
+        ...(position.includes('right') ? { right: offset } : { left: offset }),
+    };
+    return _jsx(View, { style: [positionStyle, style], children: children });
+}
+//# sourceMappingURL=DTBadgeOverlay.js.map

package/dist/components/DTBadgeOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTBadgeOverlay.js","sourceRoot":"","sources":["../../src/components/DTBadgeOverlay.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAC,IAAI,EAAuB,MAAM,cAAc,CAAC;AAsBxD,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,QAAQ,GAAG,cAAc,EACzB,MAAM,GAAG,CAAC,EACV,KAAK,GACe;IACpB,MAAM,aAAa,GAAc;QAC/B,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAC,GAAG,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,EAAC,MAAM,EAAE,MAAM,EAAC,CAAC;QAChE,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,MAAM,EAAC,CAAC,CAAC,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;KACnE,CAAC;IAEF,OAAO,KAAC,IAAI,IAAC,KAAK,EAAE,CAAC,aAAa,EAAE,KAAK,CAAC,YAAG,QAAQ,GAAQ,CAAC;AAChE,CAAC"}

package/dist/components/DTButton.d.ts

@@ -1,8 +1,10 @@
 /**
  * DT Button Component
  *
- * A themed button following the Dangerous Things design language
- * with SVG-based beveled corners.
+ * Interactive bevel button matching the storefront .menu-item-clipped pattern:
+ * - Default: outlined rectangle, no bevel, colored border with thick top
+ * - Pressed/hover: bottom-right bevel appears, fills with mode color, text goes dark
+ * - Selected: bevel persists, fills with 70% opacity mode color
  */
 import { ViewStyle, StyleProp } from 'react-native';
 import { type DTVariant } from '../utils/variantColors';
@@ -18,11 +20,16 @@ interface DTButtonProps {
     variant?: DTVariant;
     /**
      * Button display mode
-     * - 'outlined': Border with transparent background (default)
-     * - 'contained': Filled background
+     * - 'outlined': Border with transparent background, bevel on press (default)
+     * - 'contained': Filled background with static bevel
      * @default 'outlined'
      */
     mode?: 'outlined' | 'contained';
+    /**
+     * Whether the button is in a persistent selected state
+     * (bevel visible, filled with 70% opacity mode color)
+     */
+    selected?: boolean;
     /**
      * Custom color (overrides variant)
      */
@@ -45,24 +52,11 @@ interface DTButtonProps {
      */
     borderWidth?: number;
     /**
-     * Bevel size in pixels
-     * @default 8
+     * Bevel size in pixels (bottom-right corner)
+     * @default 16
      */
     bevelSize?: number;
 }
-/**
- * DT-styled Button component with SVG beveled corners
- *
- * @example
- * <DTButton variant="normal" onPress={handleScan}>
- *   Scan NFC Tag
- * </DTButton>
- *
- * @example
- * <DTButton variant="emphasis" mode="contained" onPress={handleAction}>
- *   View Results
- * </DTButton>
- */
-export declare function DTButton({ children, variant, mode, color, onPress, disabled, style, borderWidth, bevelSize, }: DTButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function DTButton({ children, variant, mode, selected, color, onPress, disabled, style, borderWidth, bevelSize, }: DTButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=DTButton.d.ts.map

package/dist/components/DTButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DTButton.d.ts","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAKvE,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAChC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAkB,EAClB,IAAiB,EACjB,KAAK,EACL,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,WAAe,EACf,SAAa,GACd,EAAE,aAAa,2CA8Cf"}
+{"version":3,"file":"DTButton.d.ts","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAsB,MAAM,cAAc,CAAC;AAIzF,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,UAAU,aAAa;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,WAAW,CAAC;IAChC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAkB,EAClB,IAAiB,EACjB,QAAgB,EAChB,KAAK,EACL,OAAO,EACP,QAAgB,EAChB,KAAK,EACL,WAAe,EACf,SAAc,GACf,EAAE,aAAa,2CAoJf"}

package/dist/components/DTButton.js

@@ -2,40 +2,103 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * DT Button Component
  *
- * A themed button following the Dangerous Things design language
- * with SVG-based beveled corners.
+ * Interactive bevel button matching the storefront .menu-item-clipped pattern:
+ * - Default: outlined rectangle, no bevel, colored border with thick top
+ * - Pressed/hover: bottom-right bevel appears, fills with mode color, text goes dark
+ * - Selected: bevel persists, fills with 70% opacity mode color
  */
-import { StyleSheet, View, Pressable } from 'react-native';
+import { useRef, useEffect } from 'react';
+import { StyleSheet, View, Pressable, Animated } from 'react-native';
 import { Text } from 'react-native-paper';
-import Svg, { Path } from 'react-native-svg';
-import { DTColors } from '../theme/colors';
+import Svg, { Path, Rect } from 'react-native-svg';
+import { useDTTheme } from '../theme/DTThemeProvider';
 import { getVariantColor } from '../utils/variantColors';
-import { buildButtonBevelPath } from '../utils/bevelPaths';
+import { buildBeveledRectPath } from '../utils/bevelPaths';
 import { useComponentLayout } from '../utils/useComponentLayout';
-import { useState } from 'react';
-/**
- * DT-styled Button component with SVG beveled corners
- *
- * @example
- * <DTButton variant="normal" onPress={handleScan}>
- *   Scan NFC Tag
- * </DTButton>
- *
- * @example
- * <DTButton variant="emphasis" mode="contained" onPress={handleAction}>
- *   View Results
- * </DTButton>
- */
-export function DTButton({ children, variant = 'normal', mode = 'outlined', color, onPress, disabled = false, style, borderWidth = 2, bevelSize = 8, }) {
+export function DTButton({ children, variant = 'normal', mode = 'outlined', selected = false, color, onPress, disabled = false, style, borderWidth = 2, bevelSize = 16, }) {
+    const theme = useDTTheme();
     const { dimensions, onLayout, hasDimensions } = useComponentLayout();
-    const [pressed, setPressed] = useState(false);
-    const accentColor = getVariantColor(variant, color);
+    const pulseAnim = useRef(new Animated.Value(1)).current;
+    const pressed = useRef(false);
+    const accentColor = getVariantColor(theme, variant, color);
+    const selectedColor = accentColor + 'B3'; // ~70% opacity
     const isContained = mode === 'contained';
-    const bgColor = isContained ? accentColor : 'transparent';
-    const textColor = isContained ? DTColors.dark : accentColor;
+    const useBevels = theme.custom.bevelMd > 0;
     const { width, height } = dimensions;
-    const opacity = disabled ? 0.5 : pressed ? 0.7 : 1;
-    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, onPressIn: () => setPressed(true), onPressOut: () => setPressed(false), style: [{ opacity }, style], children: _jsxs(View, { style: styles.container, onLayout: onLayout, children: [hasDimensions && (_jsx(Svg, { style: StyleSheet.absoluteFill, width: width, height: height, viewBox: `0 0 ${width} ${height}`, children: _jsx(Path, { d: buildButtonBevelPath(width, height, bevelSize, borderWidth), fill: bgColor, stroke: accentColor, strokeWidth: borderWidth }) })), _jsx(View, { style: styles.content, children: typeof children === 'string' ? (_jsx(Text, { variant: "labelLarge", style: [styles.label, { color: textColor }], children: children })) : (children) })] }) }));
+    // Build SVG paths: rectangle (default) and beveled (active)
+    const rectPath = hasDimensions
+        ? buildBeveledRectPath(width, height, { corners: {}, strokeWidth: borderWidth })
+        : '';
+    const bevelPath = useBevels && hasDimensions
+        ? buildBeveledRectPath(width, height, {
+            corners: { bottomRight: bevelSize },
+            strokeWidth: borderWidth,
+        })
+        : '';
+    // Pulse animation for pressed/selected hover
+    useEffect(() => {
+        if (selected) {
+            // No pulse when just selected (matches storefront: animation: none on .selected)
+            pulseAnim.setValue(1);
+        }
+        return () => {
+            pulseAnim.stopAnimation();
+        };
+    }, [selected, pulseAnim]);
+    const startPulse = () => {
+        Animated.loop(Animated.sequence([
+            Animated.timing(pulseAnim, {
+                toValue: 0.5,
+                duration: 1000,
+                useNativeDriver: true,
+            }),
+            Animated.timing(pulseAnim, {
+                toValue: 1,
+                duration: 1000,
+                useNativeDriver: true,
+            }),
+        ])).start();
+    };
+    const stopPulse = () => {
+        pulseAnim.stopAnimation();
+        pulseAnim.setValue(1);
+    };
+    const handlePressIn = () => {
+        pressed.current = true;
+        startPulse();
+    };
+    const handlePressOut = () => {
+        pressed.current = false;
+        if (!selected) {
+            stopPulse();
+        }
+    };
+    // Determine visual state
+    const showBevel = isContained || selected;
+    const getBgColor = (isPressed) => {
+        if (isContained)
+            return accentColor;
+        if (selected)
+            return selectedColor;
+        if (isPressed)
+            return accentColor;
+        return 'transparent';
+    };
+    const getTextColor = (isPressed) => {
+        if (isContained || selected || isPressed)
+            return theme.colors.onPrimary;
+        return accentColor;
+    };
+    return (_jsx(Pressable, { onPress: onPress, disabled: disabled, onPressIn: handlePressIn, onPressOut: handlePressOut, style: [{ opacity: disabled ? 0.5 : 1 }, style], children: ({ pressed: isPressedState }) => (_jsxs(Animated.View, { style: [styles.container, { opacity: pulseAnim }], onLayout: onLayout, children: [!useBevels && (_jsx(View, { style: [
+                        StyleSheet.absoluteFill,
+                        {
+                            borderWidth,
+                            borderColor: accentColor,
+                            borderTopWidth: 5,
+                            borderRadius: theme.custom.radiusSm,
+                            backgroundColor: getBgColor(isPressedState),
+                        },
+                    ] })), useBevels && hasDimensions && (_jsxs(Svg, { style: StyleSheet.absoluteFill, width: width, height: height, viewBox: `0 0 ${width} ${height}`, children: [_jsx(Path, { d: (isPressedState || showBevel) ? bevelPath : rectPath, fill: getBgColor(isPressedState), stroke: accentColor, strokeWidth: borderWidth }), _jsx(Rect, { x: borderWidth / 2, y: 0, width: width - borderWidth, height: 5, fill: accentColor })] })), _jsx(View, { style: styles.content, children: typeof children === 'string' ? (_jsx(Text, { variant: "labelLarge", style: [styles.label, { color: getTextColor(isPressedState) }], children: children })) : (children) })] })) }));
 }
 const styles = StyleSheet.create({
     container: {

package/dist/components/DTButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DTButton.js","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAwB,SAAS,EAAC,MAAM,cAAc,CAAC;AAC/E,OAAO,EAAC,IAAI,EAAC,MAAM,oBAAoB,CAAC;AACxC,OAAO,GAAG,EAAE,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAiB,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAC,kBAAkB,EAAC,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AA+C/B;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,UAAU,EACjB,KAAK,EACL,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,WAAW,GAAG,CAAC,EACf,SAAS,GAAG,CAAC,GACC;IACd,MAAM,EAAC,UAAU,EAAE,QAAQ,EAAE,aAAa,EAAC,GAAG,kBAAkB,EAAE,CAAC;IACnE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAI,KAAK,WAAW,CAAC;IACzC,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC;IAC1D,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC;IAE5D,MAAM,EAAC,KAAK,EAAE,MAAM,EAAC,GAAG,UAAU,CAAC;IACnC,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnD,OAAO,CACL,KAAC,SAAS,IACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,CAAC,EACjC,UAAU,EAAE,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACnC,KAAK,EAAE,CAAC,EAAC,OAAO,EAAC,EAAE,KAAK,CAAC,YACzB,MAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,aAC9C,aAAa,IAAI,CAChB,KAAC,GAAG,IACF,KAAK,EAAE,UAAU,CAAC,YAAY,EAC9B,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,KAAK,IAAI,MAAM,EAAE,YACjC,KAAC,IAAI,IACH,CAAC,EAAE,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,CAAC,EAC9D,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,WAAW,EACnB,WAAW,EAAE,WAAW,GACxB,GACE,CACP,EACD,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,OAAO,YACxB,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC9B,KAAC,IAAI,IAAC,OAAO,EAAC,YAAY,EAAC,KAAK,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,EAAC,KAAK,EAAE,SAAS,EAAC,CAAC,YACjE,QAAQ,GACJ,CACR,CAAC,CAAC,CAAC,CACF,QAAQ,CACT,GACI,IACF,GACG,CACb,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,QAAQ,EAAE,UAAU;QACpB,SAAS,EAAE,EAAE;KACd;IACD,OAAO,EAAE;QACP,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,EAAE;QACnB,iBAAiB,EAAE,EAAE;QACrB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,KAAK,EAAE;QACL,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,CAAC;QAChB,aAAa,EAAE,WAAW;KAC3B;CACF,CAAC,CAAC"}
+{"version":3,"file":"DTButton.js","sourceRoot":"","sources":["../../src/components/DTButton.tsx"],"names":[],"mappings":"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"}

package/dist/components/DTCard.d.ts

@@ -8,6 +8,10 @@
  * - Bottom-right bevel: 2em (~32px)
  * - Bottom-left bevel: 1em (~16px)
  * - Border width: 0.2em (~3px)
+ *
+ * The progress bar is a structural element on the left edge (0 to bevelSizeSmall).
+ * It is always present. At 0 progress it shows surface color (empty bar).
+ * As progress increases, accent color fills from the bottom up.
  */
 import { ReactNode } from 'react';
 import { ViewStyle, StyleProp } from 'react-native';
@@ -32,6 +36,12 @@ interface DTCardProps {
      * @default true when title is provided
      */
     showHeader?: boolean;
+    /**
+     * Progress value (0–1) for left-edge vertical progress bar.
+     * Always present. At 0 the bar shows surface color (empty).
+     * @default 0
+     */
+    progress?: number;
     /**
      * Additional styles for the card container
      */
@@ -61,8 +71,7 @@ interface DTCardProps {
      */
     bevelSizeSmall?: number;
     /**
-     * Background color
-     * @default '#000000'
+     * Background color (defaults to theme background)
      */
     backgroundColor?: string;
     /**
@@ -83,7 +92,7 @@ interface DTCardProps {
  *   <Text>Tap to scan</Text>
  * </DTCard>
  */
-export declare function DTCard({ children, mode, borderColor, title, showHeader, style, contentStyle, padding, borderWidth, bevelSize, bevelSizeSmall, backgroundColor, onPress, }: DTCardProps): import("react/jsx-runtime").JSX.Element;
+export declare function DTCard({ children, mode, borderColor, title, showHeader, progress, style, contentStyle, padding, borderWidth, bevelSize, bevelSizeSmall, backgroundColor, onPress, }: DTCardProps): import("react/jsx-runtime").JSX.Element;
 /**
  * DT design system constants matching web CSS variables
  */

package/dist/components/DTCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DTCard.d.ts","sourceRoot":"","sources":["../../src/components/DTCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAe,EACf,WAAW,EACX,KAAK,EACL,UAAU,EACV,KAAK,EACL,YAAY,EACZ,OAAY,EACZ,WAAe,EACf,SAAc,EACd,cAAmB,EACnB,eAA2B,EAC3B,OAAO,GACR,EAAE,WAAW,2CAuEb;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;CAc1B,CAAC"}
+{"version":3,"file":"DTCard.d.ts","sourceRoot":"","sources":["../../src/components/DTCard.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,UAAU,WAAW;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA8GD;;;;;;;;;;;;GAYG;AACH,wBAAgB,MAAM,CAAC,EACrB,QAAQ,EACR,IAAe,EACf,WAAW,EACX,KAAK,EACL,UAAU,EACV,QAAY,EACZ,KAAK,EACL,YAAY,EACZ,OAAY,EACZ,WAAe,EACf,SAAc,EACd,cAAmB,EACnB,eAAe,EACf,OAAO,GACR,EAAE,WAAW,2CAoJb;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;CAc1B,CAAC"}