@dangerousthings/react-native 0.1.0

package/dist/components/DTCheckbox.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DT Checkbox Component
+ *
+ * Custom-built angular checkbox following the Dangerous Things design language.
+ * Uses SVG for beveled shape and checkmark — RNP Checkbox enforces
+ * rounded corners (borderRadius: 18) so we build from scratch.
+ *
+ * Uses diagonal-symmetry bevels (top-left + bottom-right) on the indicator.
+ */
+import { StyleSheet, Pressable } from 'react-native';
+import { Text } from 'react-native-paper';
+import Svg, { Path } from 'react-native-svg';
+import { DTColors } from '../theme/colors';
+import { getVariantColor } from '../utils/variantColors';
+import { buildBeveledRectPath } from '../utils/bevelPaths';
+/**
+ * DT-styled Checkbox with beveled opposing corners (top-left + bottom-right)
+ *
+ * @example
+ * <DTCheckbox checked={isChecked} onPress={() => setChecked(!isChecked)} label="Remember me" />
+ *
+ * @example
+ * <DTCheckbox checked={true} onPress={toggle} variant="success" label="Accepted" />
+ */
+export function DTCheckbox({ checked, onPress, variant = 'normal', label, disabled = false, size = 24, color, style, labelStyle, }) {
+    const accentColor = getVariantColor(variant, color);
+    const opacity = disabled ? 0.5 : 1;
+    const borderWidth = 2;
+    const bevelSize = Math.round(size * 0.3);
+    // Outer beveled path (border)
+    const outerPath = buildBeveledRectPath(size, size, {
+        corners: { topLeft: bevelSize, bottomRight: bevelSize },
+        strokeWidth: borderWidth,
+    });
+    return (_jsxs(Pressable, { onPress: onPress, disabled: disabled, style: ({ pressed }) => [
+            styles.container,
+            { opacity: pressed ? 0.7 : opacity },
+            style,
+        ], children: [_jsxs(Svg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx(Path, { d: outerPath, fill: checked ? accentColor : 'transparent', stroke: accentColor, strokeWidth: borderWidth }), checked && (_jsx(Path, { d: `M ${size * 0.2} ${size * 0.5} L ${size * 0.4} ${size * 0.7} L ${size * 0.8} ${size * 0.25}`, fill: "none", stroke: DTColors.dark, strokeWidth: borderWidth + 0.5, strokeLinecap: "round", strokeLinejoin: "round" }))] }), label && (_jsx(Text, { style: [styles.label, { color: DTColors.light }, labelStyle], children: label }))] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        minHeight: 44,
+        paddingVertical: 8,
+    },
+    label: {
+        fontSize: 14,
+        letterSpacing: 0.3,
+    },
+});
+//# sourceMappingURL=DTCheckbox.js.map

package/dist/components/DTCheckbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTCheckbox.js","sourceRoot":"","sources":["../../src/components/DTCheckbox.tsx"],"names":[],"mappings":"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"}

package/dist/components/DTChip.d.ts

@@ -0,0 +1,40 @@
+/**
+ * DT Chip Component
+ *
+ * A themed chip/tag following the Dangerous Things design language.
+ * Useful for displaying chip types, statuses, and labels.
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { ChipProps } from 'react-native-paper';
+type DTChipVariant = 'normal' | 'emphasis' | 'warning' | 'success' | 'other';
+interface DTChipProps extends Omit<ChipProps, 'mode'> {
+    /**
+     * Visual variant of the chip
+     * @default 'normal'
+     */
+    variant?: DTChipVariant;
+    /**
+     * 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 declare function DTChip({ variant, selected, style, children, ...props }: DTChipProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DTChip.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DTChip.d.ts","sourceRoot":"","sources":["../../src/components/DTChip.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAc,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAChE,OAAO,EAAQ,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAGrD,KAAK,aAAa,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE7E,UAAU,WAAY,SAAQ,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC;IACnD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAUD;;;;;;;;;;;GAWG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,QAAgB,EAChB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAyBb"}

package/dist/components/DTChip.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 } from 'react-native';
+import { Chip } from 'react-native-paper';
+import { DTColors } from '../theme/colors';
+const variantColors = {
+    normal: DTColors.modeNormal,
+    emphasis: DTColors.modeEmphasis,
+    warning: DTColors.modeWarning,
+    success: DTColors.modeSuccess,
+    other: DTColors.modeOther,
+};
+/**
+ * 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 }) {
+    const color = variantColors[variant];
+    const chipStyle = {
+        backgroundColor: selected ? color : 'transparent',
+        borderColor: color,
+        borderWidth: 1,
+        borderRadius: 0, // Angular DT style
+    };
+    return (_jsx(Chip, { ...props, mode: "outlined", textStyle: [
+            styles.text,
+            { color: selected ? DTColors.dark : color },
+        ], style: [styles.chip, chipStyle, style], selectedColor: color, selected: selected, children: children }));
+}
+const styles = StyleSheet.create({
+    chip: {
+        marginRight: 8,
+        marginBottom: 8,
+    },
+    text: {
+        fontWeight: '600',
+        letterSpacing: 0.5,
+        fontSize: 12,
+    },
+});
+//# sourceMappingURL=DTChip.js.map

package/dist/components/DTChip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTChip.js","sourceRoot":"","sources":["../../src/components/DTChip.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,iDAAiD;AACjD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,IAAI,EAAa,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAqB3C,MAAM,aAAa,GAAkC;IACnD,MAAM,EAAE,QAAQ,CAAC,UAAU;IAC3B,QAAQ,EAAE,QAAQ,CAAC,YAAY;IAC/B,OAAO,EAAE,QAAQ,CAAC,WAAW;IAC7B,OAAO,EAAE,QAAQ,CAAC,WAAW;IAC7B,KAAK,EAAE,QAAQ,CAAC,SAAS;CAC1B,CAAC;AAEF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,GAAG,QAAQ,EAClB,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACI;IACZ,MAAM,KAAK,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAErC,MAAM,SAAS,GAAc;QAC3B,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa;QACjD,WAAW,EAAE,KAAK;QAClB,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC,EAAE,mBAAmB;KACrC,CAAC;IAEF,OAAO,CACL,KAAC,IAAI,OACC,KAAK,EACT,IAAI,EAAC,UAAU,EACf,SAAS,EAAE;YACT,MAAM,CAAC,IAAI;YACX,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAAE;SAC5C,EACD,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,KAAK,CAAC,EACtC,aAAa,EAAE,KAAK,EACpB,QAAQ,EAAE,QAAQ,YAEjB,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;KAChB;IACD,IAAI,EAAE;QACJ,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,GAAG;QAClB,QAAQ,EAAE,EAAE;KACb;CACF,CAAC,CAAC"}

package/dist/components/DTDrawer.d.ts

@@ -0,0 +1,82 @@
+/**
+ * DT Drawer Component
+ *
+ * Hybrid component: RNP Portal for layering + custom Animated panel
+ * for the sliding behavior. RNP has no sliding panel component.
+ *
+ * Uses the dual-SVG-path technique (outer border fill + inner dark fill)
+ * consistent with DTCard/DTMediaFrame for proper visual clipping at
+ * beveled corners.
+ *
+ * Web CSS reference (Aside.tsx):
+ * - Fixed sidebar sliding from right
+ * - Beveled left edges (top-left + bottom-left for right drawer)
+ * - Colored header bar
+ * - Overlay backdrop
+ * - transition: transform 200ms ease-in-out
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { type DTVariant } from '../utils/variantColors';
+interface DTDrawerProps {
+    /**
+     * Whether the drawer is visible
+     */
+    visible: boolean;
+    /**
+     * Called when the drawer is dismissed
+     */
+    onDismiss: () => void;
+    /**
+     * Heading text in the drawer header bar
+     */
+    heading: string;
+    /**
+     * Visual variant for the header bar
+     * @default 'emphasis'
+     */
+    headingVariant?: DTVariant;
+    /**
+     * Which side the drawer slides from
+     * @default 'right'
+     */
+    position?: 'right' | 'left';
+    /**
+     * Drawer panel width in pixels
+     * @default 400
+     */
+    width?: number;
+    /**
+     * Bevel size in pixels
+     * @default 32
+     */
+    bevelSize?: number;
+    /**
+     * Border width in pixels
+     * @default 2
+     */
+    borderWidth?: number;
+    /**
+     * Drawer content
+     */
+    children: React.ReactNode;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * DT-styled Drawer/Aside with beveled edges and slide animation
+ *
+ * @example
+ * <DTDrawer visible={cartOpen} onDismiss={() => setCartOpen(false)} heading="Cart">
+ *   <CartItems />
+ * </DTDrawer>
+ *
+ * @example
+ * <DTDrawer visible={menuOpen} onDismiss={close} heading="Menu" position="left">
+ *   <MenuItems />
+ * </DTDrawer>
+ */
+export declare function DTDrawer({ visible, onDismiss, heading, headingVariant, position, width: drawerWidth, bevelSize, borderWidth, children, style, }: DTDrawerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DTDrawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DTDrawer.d.ts","sourceRoot":"","sources":["../../src/components/DTDrawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAMV,MAAM,cAAc,CAAC;AAKtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,UAAU,aAAa;IACrB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAA2B,EAC3B,QAAkB,EAClB,KAAK,EAAE,WAAiB,EACxB,SAAc,EACd,WAAe,EACf,QAAQ,EACR,KAAK,GACN,EAAE,aAAa,2CA6Hf"}

package/dist/components/DTDrawer.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DT Drawer Component
+ *
+ * Hybrid component: RNP Portal for layering + custom Animated panel
+ * for the sliding behavior. RNP has no sliding panel component.
+ *
+ * Uses the dual-SVG-path technique (outer border fill + inner dark fill)
+ * consistent with DTCard/DTMediaFrame for proper visual clipping at
+ * beveled corners.
+ *
+ * Web CSS reference (Aside.tsx):
+ * - Fixed sidebar sliding from right
+ * - Beveled left edges (top-left + bottom-left for right drawer)
+ * - Colored header bar
+ * - Overlay backdrop
+ * - transition: transform 200ms ease-in-out
+ */
+import { useRef, useEffect } from 'react';
+import { StyleSheet, View, Pressable, Animated, BackHandler, ScrollView, useWindowDimensions, } from 'react-native';
+import { Portal, Text } from 'react-native-paper';
+import Svg, { Path } from 'react-native-svg';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { DTColors } from '../theme/colors';
+import { getVariantColor } from '../utils/variantColors';
+import { buildDrawerBevelPath } from '../utils/bevelPaths';
+/**
+ * DT-styled Drawer/Aside with beveled edges and slide animation
+ *
+ * @example
+ * <DTDrawer visible={cartOpen} onDismiss={() => setCartOpen(false)} heading="Cart">
+ *   <CartItems />
+ * </DTDrawer>
+ *
+ * @example
+ * <DTDrawer visible={menuOpen} onDismiss={close} heading="Menu" position="left">
+ *   <MenuItems />
+ * </DTDrawer>
+ */
+export function DTDrawer({ visible, onDismiss, heading, headingVariant = 'emphasis', position = 'right', width: drawerWidth = 400, bevelSize = 32, borderWidth = 2, children, style, }) {
+    const slideAnim = useRef(new Animated.Value(0)).current;
+    const overlayAnim = useRef(new Animated.Value(0)).current;
+    const headerColor = getVariantColor(headingVariant);
+    const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+    const insets = useSafeAreaInsets();
+    const effectiveWidth = Math.min(drawerWidth, screenWidth);
+    useEffect(() => {
+        if (visible) {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: 1,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(overlayAnim, {
+                    toValue: 1,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+        else {
+            Animated.parallel([
+                Animated.timing(slideAnim, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+                Animated.timing(overlayAnim, {
+                    toValue: 0,
+                    duration: 200,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+        }
+    }, [visible, slideAnim, overlayAnim]);
+    // Android back button handling
+    useEffect(() => {
+        if (!visible)
+            return;
+        const handler = BackHandler.addEventListener('hardwareBackPress', () => {
+            onDismiss();
+            return true;
+        });
+        return () => handler.remove();
+    }, [visible, onDismiss]);
+    const translateX = slideAnim.interpolate({
+        inputRange: [0, 1],
+        outputRange: [
+            position === 'right' ? effectiveWidth : -effectiveWidth,
+            0,
+        ],
+    });
+    // Don't render when fully hidden
+    const pointerEvents = visible ? 'auto' : 'none';
+    return (_jsx(Portal, { children: _jsxs(View, { style: StyleSheet.absoluteFill, pointerEvents: pointerEvents, children: [_jsx(Animated.View, { style: [StyleSheet.absoluteFill, { opacity: overlayAnim }], children: _jsx(Pressable, { style: [StyleSheet.absoluteFill, styles.overlay], onPress: onDismiss }) }), _jsxs(Animated.View, { style: [
+                        styles.panel,
+                        position === 'right' ? styles.panelRight : styles.panelLeft,
+                        { width: effectiveWidth, transform: [{ translateX }] },
+                        style,
+                    ], children: [_jsx(View, { style: StyleSheet.absoluteFill, children: _jsxs(Svg, { width: effectiveWidth, height: screenHeight, children: [_jsx(Path, { d: buildDrawerBevelPath(effectiveWidth, screenHeight, bevelSize, position), fill: headerColor }), _jsx(Path, { d: buildDrawerBevelPath(effectiveWidth - borderWidth * 2, screenHeight - borderWidth * 2, bevelSize - borderWidth, position), fill: DTColors.dark, transform: `translate(${borderWidth}, ${borderWidth})` })] }) }), _jsxs(View, { style: [styles.header, { backgroundColor: headerColor, paddingTop: insets.top + 16 }], children: [_jsx(Text, { style: styles.headerText, children: heading }), _jsx(Pressable, { onPress: onDismiss, style: ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 }), children: _jsx(Text, { style: styles.closeButton, children: "\u2715" }) })] }), _jsx(ScrollView, { style: styles.content, contentContainerStyle: [styles.contentContainer, { paddingBottom: insets.bottom + 16 }], children: children })] })] }) }));
+}
+const styles = StyleSheet.create({
+    overlay: {
+        backgroundColor: DTColors.overlay,
+    },
+    panel: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+    },
+    panelRight: {
+        right: 0,
+    },
+    panelLeft: {
+        left: 0,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        zIndex: 1,
+    },
+    headerText: {
+        color: DTColors.dark,
+        fontWeight: '700',
+        fontSize: 18,
+        letterSpacing: 0.5,
+    },
+    closeButton: {
+        color: DTColors.dark,
+        fontSize: 20,
+        fontWeight: '700',
+        paddingHorizontal: 8,
+    },
+    content: {
+        flex: 1,
+        zIndex: 1,
+    },
+    contentContainer: {
+        padding: 16,
+    },
+});
+//# sourceMappingURL=DTDrawer.js.map

package/dist/components/DTDrawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTDrawer.js","sourceRoot":"","sources":["../../src/components/DTDrawer.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,MAAM,EAAE,SAAS,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,EACL,UAAU,EACV,IAAI,EAGJ,SAAS,EACT,QAAQ,EACR,WAAW,EACX,UAAU,EACV,mBAAmB,GACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAC,MAAM,EAAE,IAAI,EAAC,MAAM,oBAAoB,CAAC;AAChD,OAAO,GAAG,EAAE,EAAC,IAAI,EAAC,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAC,iBAAiB,EAAC,MAAM,gCAAgC,CAAC;AACjE,OAAO,EAAC,QAAQ,EAAC,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAiB,eAAe,EAAC,MAAM,wBAAwB,CAAC;AACvE,OAAO,EAAC,oBAAoB,EAAC,MAAM,qBAAqB,CAAC;AAkDzD;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,QAAQ,CAAC,EACvB,OAAO,EACP,SAAS,EACT,OAAO,EACP,cAAc,GAAG,UAAU,EAC3B,QAAQ,GAAG,OAAO,EAClB,KAAK,EAAE,WAAW,GAAG,GAAG,EACxB,SAAS,GAAG,EAAE,EACd,WAAW,GAAG,CAAC,EACf,QAAQ,EACR,KAAK,GACS;IACd,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IACxD,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAC1D,MAAM,WAAW,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IACpD,MAAM,EAAC,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,YAAY,EAAC,GAAG,mBAAmB,EAAE,CAAC;IACzE,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IACnC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IAE1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,QAAQ,CAAC,QAAQ,CAAC;gBAChB,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;oBACzB,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE,GAAG;oBACb,eAAe,EAAE,IAAI;iBACtB,CAAC;gBACF,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;oBAC3B,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE,GAAG;oBACb,eAAe,EAAE,IAAI;iBACtB,CAAC;aACH,CAAC,CAAC,KAAK,EAAE,CAAC;QACb,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,QAAQ,CAAC;gBAChB,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;oBACzB,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE,GAAG;oBACb,eAAe,EAAE,IAAI;iBACtB,CAAC;gBACF,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE;oBAC3B,OAAO,EAAE,CAAC;oBACV,QAAQ,EAAE,GAAG;oBACb,eAAe,EAAE,IAAI;iBACtB,CAAC;aACH,CAAC,CAAC,KAAK,EAAE,CAAC;QACb,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;IAEtC,+BAA+B;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,OAAO;YAAE,OAAO;QACrB,MAAM,OAAO,GAAG,WAAW,CAAC,gBAAgB,CAAC,mBAAmB,EAAE,GAAG,EAAE;YACrE,SAAS,EAAE,CAAC;YACZ,OAAO,IAAI,CAAC;QACd,CAAC,CAAC,CAAC;QACH,OAAO,GAAG,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;IAChC,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,MAAM,UAAU,GAAG,SAAS,CAAC,WAAW,CAAC;QACvC,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE;YACX,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc;YACvD,CAAC;SACF;KACF,CAAC,CAAC;IAEH,iCAAiC;IACjC,MAAM,aAAa,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;IAEhD,OAAO,CACL,KAAC,MAAM,cACL,MAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,YAAY,EAAE,aAAa,EAAE,aAAa,aAEhE,KAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,CAAC,UAAU,CAAC,YAAY,EAAE,EAAC,OAAO,EAAE,WAAW,EAAC,CAAC,YACrE,KAAC,SAAS,IACR,KAAK,EAAE,CAAC,UAAU,CAAC,YAAY,EAAE,MAAM,CAAC,OAAO,CAAC,EAChD,OAAO,EAAE,SAAS,GAClB,GACY,EAGhB,MAAC,QAAQ,CAAC,IAAI,IACZ,KAAK,EAAE;wBACL,MAAM,CAAC,KAAK;wBACZ,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS;wBAC3D,EAAC,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC,EAAC,UAAU,EAAC,CAAC,EAAC;wBAClD,KAAK;qBACN,aAED,KAAC,IAAI,IAAC,KAAK,EAAE,UAAU,CAAC,YAAY,YAClC,MAAC,GAAG,IAAC,KAAK,EAAE,cAAc,EAAE,MAAM,EAAE,YAAY,aAE9C,KAAC,IAAI,IACH,CAAC,EAAE,oBAAoB,CACrB,cAAc,EACd,YAAY,EACZ,SAAS,EACT,QAAQ,CACT,EACD,IAAI,EAAE,WAAW,GACjB,EAEF,KAAC,IAAI,IACH,CAAC,EAAE,oBAAoB,CACrB,cAAc,GAAG,WAAW,GAAG,CAAC,EAChC,YAAY,GAAG,WAAW,GAAG,CAAC,EAC9B,SAAS,GAAG,WAAW,EACvB,QAAQ,CACT,EACD,IAAI,EAAE,QAAQ,CAAC,IAAI,EACnB,SAAS,EAAE,aAAa,WAAW,KAAK,WAAW,GAAG,GACtD,IACE,GACD,EAGP,MAAC,IAAI,IAAC,KAAK,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,EAAC,eAAe,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,CAAC,GAAG,GAAG,EAAE,EAAC,CAAC,aACvF,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,UAAU,YAAG,OAAO,GAAQ,EAChD,KAAC,SAAS,IACR,OAAO,EAAE,SAAS,EAClB,KAAK,EAAE,CAAC,EAAC,OAAO,EAAC,EAAE,EAAE,CAAC,CAAC,EAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAC,CAAC,YACpD,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,WAAW,uBAAU,GAC/B,IACP,EAGP,KAAC,UAAU,IACT,KAAK,EAAE,MAAM,CAAC,OAAO,EACrB,qBAAqB,EAAE,CAAC,MAAM,CAAC,gBAAgB,EAAE,EAAC,aAAa,EAAE,MAAM,CAAC,MAAM,GAAG,EAAE,EAAC,CAAC,YACpF,QAAQ,GACE,IACC,IACX,GACA,CACV,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,OAAO,EAAE;QACP,eAAe,EAAE,QAAQ,CAAC,OAAO;KAClC;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,UAAU;QACpB,GAAG,EAAE,CAAC;QACN,MAAM,EAAE,CAAC;KACV;IACD,UAAU,EAAE;QACV,KAAK,EAAE,CAAC;KACT;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;KACR;IACD,MAAM,EAAE;QACN,aAAa,EAAE,KAAK;QACpB,cAAc,EAAE,eAAe;QAC/B,UAAU,EAAE,QAAQ;QACpB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,MAAM,EAAE,CAAC;KACV;IACD,UAAU,EAAE;QACV,KAAK,EAAE,QAAQ,CAAC,IAAI;QACpB,UAAU,EAAE,KAAK;QACjB,QAAQ,EAAE,EAAE;QACZ,aAAa,EAAE,GAAG;KACnB;IACD,WAAW,EAAE;QACX,KAAK,EAAE,QAAQ,CAAC,IAAI;QACpB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,iBAAiB,EAAE,CAAC;KACrB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,CAAC;KACV;IACD,gBAAgB,EAAE;QAChB,OAAO,EAAE,EAAE;KACZ;CACF,CAAC,CAAC"}

package/dist/components/DTGallery.d.ts

@@ -0,0 +1,83 @@
+/**
+ * DT Gallery Component
+ *
+ * Custom-built image gallery with thumbnail navigation following
+ * the Dangerous Things design language. No RNP equivalent.
+ *
+ * Uses the dual-SVG-path technique for the main image frame,
+ * consistent with DTCard/DTMediaFrame.
+ *
+ * Web CSS reference (CyberGallery):
+ * - Horizontal thumbnail strip with arrow navigation
+ * - Active thumbnail with glow effect (box-shadow: 0 0 8px)
+ * - Beveled arrow buttons
+ * - Main image in beveled media frame
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { type DTVariant } from '../utils/variantColors';
+export interface DTGalleryItem {
+    /**
+     * Unique identifier
+     */
+    id: string;
+    /**
+     * Image URI
+     */
+    uri: string;
+    /**
+     * Accessibility label
+     */
+    alt?: string;
+}
+interface DTGalleryProps {
+    /**
+     * Gallery items
+     */
+    items: DTGalleryItem[];
+    /**
+     * Currently active item index
+     */
+    activeIndex: number;
+    /**
+     * Called when an item is selected
+     */
+    onSelect: (index: number) => void;
+    /**
+     * Visual variant
+     * @default 'normal'
+     */
+    variant?: DTVariant;
+    /**
+     * Thumbnail size in pixels
+     * @default 64
+     */
+    thumbnailSize?: number;
+    /**
+     * Bevel size for the main image frame
+     * @default 24
+     */
+    bevelSize?: number;
+    /**
+     * Border width for the main image frame
+     * @default 3
+     */
+    borderWidth?: number;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * DT-styled Gallery with thumbnail strip and arrow navigation
+ *
+ * @example
+ * <DTGallery
+ *   items={images}
+ *   activeIndex={activeIdx}
+ *   onSelect={setActiveIdx}
+ *   variant="normal"
+ * />
+ */
+export declare function DTGallery({ items, activeIndex, onSelect, variant, thumbnailSize, bevelSize, borderWidth, style, }: DTGalleryProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=DTGallery.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DTGallery.d.ts","sourceRoot":"","sources":["../../src/components/DTGallery.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAGH,OAAO,EAGL,SAAS,EACT,SAAS,EAKV,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAIvE,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IACX;;OAEG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,OAAkB,EAClB,aAAkB,EAClB,SAAc,EACd,WAAe,EACf,KAAK,GACN,EAAE,cAAc,kDA6MhB"}

package/dist/components/DTGallery.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DT Gallery Component
+ *
+ * Custom-built image gallery with thumbnail navigation following
+ * the Dangerous Things design language. No RNP equivalent.
+ *
+ * Uses the dual-SVG-path technique for the main image frame,
+ * consistent with DTCard/DTMediaFrame.
+ *
+ * Web CSS reference (CyberGallery):
+ * - Horizontal thumbnail strip with arrow navigation
+ * - Active thumbnail with glow effect (box-shadow: 0 0 8px)
+ * - Beveled arrow buttons
+ * - Main image in beveled media frame
+ */
+import { useRef, useCallback } from 'react';
+import { StyleSheet, View, Pressable, Image, FlatList, Platform, } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { DTColors } from '../theme/colors';
+import { getVariantColor } from '../utils/variantColors';
+import { buildButtonBevelPath, buildMediaFrameBevelPath } from '../utils/bevelPaths';
+import { useComponentLayout } from '../utils/useComponentLayout';
+const ARROW_SIZE = 32;
+const ARROW_BEVEL = 4;
+const ARROW_BORDER = 2;
+/**
+ * DT-styled Gallery with thumbnail strip and arrow navigation
+ *
+ * @example
+ * <DTGallery
+ *   items={images}
+ *   activeIndex={activeIdx}
+ *   onSelect={setActiveIdx}
+ *   variant="normal"
+ * />
+ */
+export function DTGallery({ items, activeIndex, onSelect, variant = 'normal', thumbnailSize = 64, bevelSize = 24, borderWidth = 3, style, }) {
+    const flatListRef = useRef(null);
+    const { dimensions, onLayout, hasDimensions } = useComponentLayout();
+    const accentColor = getVariantColor(variant);
+    const atStart = activeIndex <= 0;
+    const atEnd = activeIndex >= items.length - 1;
+    const handlePrev = useCallback(() => {
+        if (activeIndex > 0) {
+            onSelect(activeIndex - 1);
+        }
+    }, [activeIndex, onSelect]);
+    const handleNext = useCallback(() => {
+        if (activeIndex < items.length - 1) {
+            onSelect(activeIndex + 1);
+        }
+    }, [activeIndex, items.length, onSelect]);
+    const scrollToActive = useCallback((index) => {
+        flatListRef.current?.scrollToIndex({
+            index,
+            animated: true,
+            viewPosition: 0.5,
+        });
+    }, []);
+    const handleSelect = useCallback((index) => {
+        onSelect(index);
+        scrollToActive(index);
+    }, [onSelect, scrollToActive]);
+    const getItemLayout = useCallback((_, index) => ({
+        length: thumbnailSize + 8,
+        offset: (thumbnailSize + 8) * index,
+        index,
+    }), [thumbnailSize]);
+    const renderArrow = (direction, onPress, isDisabled) => {
+        const center = ARROW_SIZE / 2;
+        const arrowSize = ARROW_SIZE * 0.2;
+        const iconPath = direction === 'left'
+            ? `M ${center + arrowSize} ${center - arrowSize} L ${center - arrowSize} ${center} L ${center + arrowSize} ${center + arrowSize}`
+            : `M ${center - arrowSize} ${center - arrowSize} L ${center + arrowSize} ${center} L ${center - arrowSize} ${center + arrowSize}`;
+        return (_jsx(Pressable, { onPress: onPress, disabled: isDisabled, style: ({ pressed }) => ({
+                opacity: isDisabled ? 0.3 : pressed ? 0.7 : 1,
+            }), children: _jsxs(Svg, { width: ARROW_SIZE, height: ARROW_SIZE, viewBox: `0 0 ${ARROW_SIZE} ${ARROW_SIZE}`, children: [_jsx(Path, { d: buildButtonBevelPath(ARROW_SIZE, ARROW_SIZE, ARROW_BEVEL, ARROW_BORDER), fill: "transparent", stroke: accentColor, strokeWidth: ARROW_BORDER }), _jsx(Path, { d: iconPath, fill: "none", stroke: accentColor, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })] }) }));
+    };
+    const renderThumbnail = ({ item, index }) => {
+        const isActive = index === activeIndex;
+        return (_jsx(Pressable, { onPress: () => handleSelect(index), style: ({ pressed }) => ({ opacity: pressed ? 0.7 : 1 }), children: _jsxs(View, { style: [
+                    styles.thumbnail,
+                    {
+                        width: thumbnailSize,
+                        height: thumbnailSize,
+                        borderColor: isActive ? accentColor : 'transparent',
+                    },
+                    isActive && styles.thumbnailActive,
+                ], children: [isActive && Platform.OS === 'android' && (_jsx(View, { style: [
+                            StyleSheet.absoluteFill,
+                            {
+                                borderWidth: 3,
+                                borderColor: accentColor,
+                                opacity: 0.5,
+                                margin: -3,
+                            },
+                        ] })), _jsx(Image, { source: { uri: item.uri }, style: styles.thumbnailImage, accessibilityLabel: item.alt, resizeMode: "cover" })] }) }));
+    };
+    if (items.length === 0)
+        return null;
+    const { width, height } = dimensions;
+    // Outer and inner bevel paths for frame overlay
+    const outerPath = hasDimensions
+        ? buildMediaFrameBevelPath(width, height, bevelSize)
+        : '';
+    const innerPath = hasDimensions
+        ? buildMediaFrameBevelPath(width, height, bevelSize - borderWidth, borderWidth)
+        : '';
+    return (_jsxs(View, { style: [styles.container, style], children: [_jsxs(View, { style: styles.mainImageContainer, onLayout: onLayout, children: [hasDimensions && (_jsx(Svg, { style: StyleSheet.absoluteFill, width: width, height: height, viewBox: `0 0 ${width} ${height}`, children: _jsx(Path, { d: innerPath, fill: DTColors.surfaceVariant }) })), _jsx(View, { style: [styles.mainImageContent, { padding: borderWidth }], children: _jsx(Image, { source: { uri: items[activeIndex]?.uri }, style: styles.mainImage, accessibilityLabel: items[activeIndex]?.alt, resizeMode: "contain" }) }), hasDimensions && (_jsxs(Svg, { style: [StyleSheet.absoluteFill, styles.frameOverlay], width: width, height: height, viewBox: `0 0 ${width} ${height}`, pointerEvents: "none", children: [_jsx(Path, { d: `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z ` + outerPath, fillRule: "evenodd", fill: DTColors.dark }), _jsx(Path, { d: outerPath + ' ' + innerPath, fillRule: "evenodd", fill: accentColor })] }))] }), items.length > 1 && (_jsxs(View, { style: styles.thumbnailStrip, children: [renderArrow('left', handlePrev, atStart), _jsx(FlatList, { ref: flatListRef, data: items, renderItem: renderThumbnail, keyExtractor: item => item.id, horizontal: true, showsHorizontalScrollIndicator: false, getItemLayout: getItemLayout, contentContainerStyle: styles.thumbnailList, style: styles.thumbnailFlatList, initialNumToRender: 8, maxToRenderPerBatch: 4, windowSize: 5, removeClippedSubviews: Platform.OS === 'android' }), renderArrow('right', handleNext, atEnd)] }))] }));
+}
+const styles = StyleSheet.create({
+    container: {
+        gap: 12,
+    },
+    mainImageContainer: {
+        aspectRatio: 1,
+        position: 'relative',
+    },
+    mainImageContent: {
+        position: 'relative',
+        zIndex: 1,
+        flex: 1,
+        overflow: 'hidden',
+    },
+    mainImage: {
+        flex: 1,
+    },
+    thumbnailStrip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    thumbnailFlatList: {
+        flex: 1,
+    },
+    thumbnailList: {
+        gap: 8,
+    },
+    thumbnail: {
+        borderWidth: 2,
+        overflow: 'hidden',
+    },
+    thumbnailActive: {
+        ...Platform.select({
+            ios: {
+                shadowOffset: { width: 0, height: 0 },
+                shadowOpacity: 0.8,
+                shadowRadius: 8,
+            },
+        }),
+    },
+    thumbnailImage: {
+        flex: 1,
+    },
+    frameOverlay: {
+        zIndex: 2,
+    },
+});
+//# sourceMappingURL=DTGallery.js.map