@dangerousthings/react-native 0.1.0

package/dist/components/DTProgressBar.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DT ProgressBar Component
+ *
+ * A themed progress bar wrapping React Native Paper's ProgressBar
+ * with the Dangerous Things angular aesthetic.
+ *
+ * Web CSS reference (.progress / .progress-indicator):
+ * - Vertical or horizontal bar showing progress 0-100%
+ * - Mode-colored fill
+ */
+import { StyleSheet, View } from 'react-native';
+import { ProgressBar, Text } from 'react-native-paper';
+import { DTColors } from '../theme/colors';
+import { getVariantColor } from '../utils/variantColors';
+import { useComponentLayout } from '../utils/useComponentLayout';
+/**
+ * DT-styled ProgressBar wrapping React Native Paper ProgressBar
+ *
+ * @example
+ * <DTProgressBar value={0.75} variant="normal" />
+ *
+ * @example
+ * <DTProgressBar value={0.5} variant="emphasis" showLabel />
+ *
+ * @example
+ * <DTProgressBar value={0.3} orientation="vertical" height={100} variant="success" />
+ */
+export function DTProgressBar({ value, variant = 'normal', orientation = 'horizontal', height = 4, animated: _animated = true, showLabel = false, color, style, }) {
+    const accentColor = getVariantColor(variant, color);
+    const clampedValue = Math.max(0, Math.min(1, value));
+    if (orientation === 'vertical') {
+        return (_jsx(VerticalProgressBar, { value: clampedValue, color: accentColor, width: height, showLabel: showLabel, style: style }));
+    }
+    return (_jsxs(View, { style: [styles.horizontalContainer, style], children: [_jsx(ProgressBar, { progress: clampedValue, color: accentColor, style: [styles.bar, { height }], theme: {
+                    colors: {
+                        surfaceVariant: DTColors.disabledBackground,
+                    },
+                } }), showLabel && (_jsxs(Text, { style: [styles.label, { color: accentColor }], children: [Math.round(clampedValue * 100), "%"] }))] }));
+}
+/**
+ * Vertical progress bar using measured pixel height instead of
+ * percentage strings (which don't animate smoothly in RN).
+ */
+function VerticalProgressBar({ value, color, width, showLabel, style, }) {
+    const { dimensions, onLayout, hasDimensions } = useComponentLayout();
+    const fillHeight = hasDimensions ? dimensions.height * value : 0;
+    return (_jsxs(View, { style: [styles.verticalContainer, { width }, style], children: [_jsx(View, { style: styles.verticalTrack, onLayout: onLayout, children: _jsx(View, { style: [
+                        styles.verticalFill,
+                        {
+                            backgroundColor: color,
+                            height: fillHeight,
+                        },
+                    ] }) }), showLabel && (_jsxs(Text, { style: [styles.label, { color }], children: [Math.round(value * 100), "%"] }))] }));
+}
+const styles = StyleSheet.create({
+    horizontalContainer: {
+        gap: 8,
+    },
+    bar: {
+        borderRadius: 0,
+    },
+    verticalContainer: {
+        alignItems: 'center',
+        gap: 8,
+    },
+    verticalTrack: {
+        flex: 1,
+        width: '100%',
+        backgroundColor: DTColors.disabledBackground,
+        justifyContent: 'flex-end',
+    },
+    verticalFill: {
+        width: '100%',
+    },
+    label: {
+        fontSize: 11,
+        fontWeight: '600',
+        letterSpacing: 0.5,
+    },
+});
+//# sourceMappingURL=DTProgressBar.js.map

package/dist/components/DTProgressBar.js.map

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

package/dist/components/DTQuantityStepper.d.ts

@@ -0,0 +1,76 @@
+/**
+ * DT QuantityStepper Component
+ *
+ * Custom-built quantity increment/decrement control following the
+ * Dangerous Things design language. No RNP equivalent exists.
+ *
+ * Web CSS reference (AddOnOptionItem quantity controls):
+ * - Plus/minus buttons with beveled corners
+ * - Quantity display between buttons
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { type DTVariant } from '../utils/variantColors';
+type DTStepperSize = 'small' | 'medium' | 'large';
+interface DTQuantityStepperProps {
+    /**
+     * Current quantity value
+     */
+    value: number;
+    /**
+     * Called when value changes
+     */
+    onValueChange: (value: number) => void;
+    /**
+     * Minimum value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum value
+     * @default 99
+     */
+    max?: number;
+    /**
+     * Step increment
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Visual variant
+     * @default 'normal'
+     */
+    variant?: DTVariant;
+    /**
+     * Whether the stepper is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Label text displayed above the stepper
+     */
+    label?: string;
+    /**
+     * Size preset
+     * @default 'medium'
+     */
+    size?: DTStepperSize;
+    /**
+     * Custom color (overrides variant)
+     */
+    color?: string;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * DT-styled QuantityStepper with beveled +/- buttons
+ *
+ * @example
+ * <DTQuantityStepper value={qty} onValueChange={setQty} label="Quantity" />
+ *
+ * @example
+ * <DTQuantityStepper value={qty} onValueChange={setQty} min={1} max={10} variant="emphasis" />
+ */
+export declare function DTQuantityStepper({ value, onValueChange, min, max, step, variant, disabled, label, size, color, style, }: DTQuantityStepperProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DTQuantityStepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DTQuantityStepper.d.ts","sourceRoot":"","sources":["../../src/components/DTQuantityStepper.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAGvE,KAAK,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAkClD,UAAU,sBAAsB;IAC9B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,KAAK,EACL,aAAa,EACb,GAAO,EACP,GAAQ,EACR,IAAQ,EACR,OAAkB,EAClB,QAAgB,EAChB,KAAK,EACL,IAAe,EACf,KAAK,EACL,KAAK,GACN,EAAE,sBAAsB,2CAoFxB"}

package/dist/components/DTQuantityStepper.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DT QuantityStepper Component
+ *
+ * Custom-built quantity increment/decrement control following the
+ * Dangerous Things design language. No RNP equivalent exists.
+ *
+ * Web CSS reference (AddOnOptionItem quantity controls):
+ * - Plus/minus buttons with beveled corners
+ * - Quantity display between buttons
+ */
+import { StyleSheet, View, 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 { buildButtonBevelPath } from '../utils/bevelPaths';
+const sizeConfigs = {
+    small: {
+        buttonSize: 28,
+        fontSize: 12,
+        bevelSize: 4,
+        iconStrokeWidth: 1.5,
+        minWidth: 28,
+    },
+    medium: {
+        buttonSize: 36,
+        fontSize: 16,
+        bevelSize: 6,
+        iconStrokeWidth: 2,
+        minWidth: 36,
+    },
+    large: {
+        buttonSize: 44,
+        fontSize: 20,
+        bevelSize: 8,
+        iconStrokeWidth: 2.5,
+        minWidth: 44,
+    },
+};
+/**
+ * DT-styled QuantityStepper with beveled +/- buttons
+ *
+ * @example
+ * <DTQuantityStepper value={qty} onValueChange={setQty} label="Quantity" />
+ *
+ * @example
+ * <DTQuantityStepper value={qty} onValueChange={setQty} min={1} max={10} variant="emphasis" />
+ */
+export function DTQuantityStepper({ value, onValueChange, min = 0, max = 99, step = 1, variant = 'normal', disabled = false, label, size = 'medium', color, style, }) {
+    const accentColor = getVariantColor(variant, color);
+    const config = sizeConfigs[size];
+    const atMin = value <= min;
+    const atMax = value >= max;
+    const borderWidth = 2;
+    const handleDecrement = () => {
+        const next = Math.max(min, value - step);
+        onValueChange(next);
+    };
+    const handleIncrement = () => {
+        const next = Math.min(max, value + step);
+        onValueChange(next);
+    };
+    const renderStepButton = (type, onPress, isDisabled) => {
+        const s = config.buttonSize;
+        const center = s / 2;
+        const iconSize = s * 0.35;
+        const sw = config.iconStrokeWidth;
+        // Minus: horizontal line; Plus: cross
+        const iconPath = type === 'minus'
+            ? `M ${center - iconSize} ${center} L ${center + iconSize} ${center}`
+            : `M ${center - iconSize} ${center} L ${center + iconSize} ${center} M ${center} ${center - iconSize} L ${center} ${center + iconSize}`;
+        // Expand touch target to at least 44px
+        const hitSlopSize = Math.max(0, (44 - s) / 2);
+        const hitSlop = hitSlopSize > 0 ? hitSlopSize : undefined;
+        return (_jsx(Pressable, { onPress: onPress, disabled: disabled || isDisabled, hitSlop: hitSlop, style: ({ pressed }) => ({
+                opacity: disabled || isDisabled ? 0.3 : pressed ? 0.7 : 1,
+            }), children: _jsxs(Svg, { width: s, height: s, viewBox: `0 0 ${s} ${s}`, children: [_jsx(Path, { d: buildButtonBevelPath(s, s, config.bevelSize, borderWidth), fill: "transparent", stroke: accentColor, strokeWidth: borderWidth }), _jsx(Path, { d: iconPath, fill: "none", stroke: accentColor, strokeWidth: sw, strokeLinecap: "round" })] }) }));
+    };
+    return (_jsxs(View, { style: [styles.wrapper, style], children: [label && (_jsx(Text, { style: [styles.label, { color: DTColors.light }], children: label })), _jsxs(View, { style: styles.container, children: [renderStepButton('minus', handleDecrement, atMin), _jsx(View, { style: [styles.valueContainer, { minWidth: config.minWidth }], children: _jsx(Text, { style: [
+                                styles.valueText,
+                                { fontSize: config.fontSize, color: accentColor },
+                            ], children: value }) }), renderStepButton('plus', handleIncrement, atMax)] })] }));
+}
+const styles = StyleSheet.create({
+    wrapper: {
+        gap: 8,
+    },
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+    },
+    label: {
+        fontSize: 14,
+        letterSpacing: 0.3,
+    },
+    valueContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+    },
+    valueText: {
+        fontWeight: '700',
+        letterSpacing: 0.5,
+    },
+});
+//# sourceMappingURL=DTQuantityStepper.js.map

package/dist/components/DTQuantityStepper.js.map

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

package/dist/components/DTRadioGroup.d.ts

@@ -0,0 +1,79 @@
+/**
+ * DT RadioGroup + RadioOption Components
+ *
+ * Custom-built angular radio selection following the Dangerous Things design language.
+ * RNP RadioButton uses circular geometry with animated SVG circles,
+ * so we build hexagonal indicators from scratch.
+ *
+ * Web CSS reference (AddOnSelector single-select):
+ * - Selected: border highlight + semi-transparent fill (var(--selected) at 70% opacity)
+ * - Hexagon indicator instead of circular radio button
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { type DTVariant } from '../utils/variantColors';
+interface DTRadioGroupProps {
+    /**
+     * Currently selected value
+     */
+    value: string | null;
+    /**
+     * Called when selection changes
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Visual variant
+     * @default 'normal'
+     */
+    variant?: DTVariant;
+    /**
+     * Radio option children
+     */
+    children: React.ReactNode;
+    /**
+     * Additional styles for the container
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * DT-styled RadioGroup container
+ *
+ * @example
+ * <DTRadioGroup value={selected} onValueChange={setSelected} variant="normal">
+ *   <DTRadioOption value="a" label="Option A" />
+ *   <DTRadioOption value="b" label="Option B" description="With description" />
+ * </DTRadioGroup>
+ */
+export declare function DTRadioGroup({ value, onValueChange, variant, children, style, }: DTRadioGroupProps): import("react/jsx-runtime").JSX.Element;
+interface DTRadioOptionProps {
+    /**
+     * Value identifier for this option
+     */
+    value: string;
+    /**
+     * Label text
+     */
+    label: string;
+    /**
+     * Optional description text
+     */
+    description?: string;
+    /**
+     * Whether this option is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional styles
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * DT-styled RadioOption with hexagonal indicator
+ *
+ * Must be used inside a DTRadioGroup.
+ *
+ * @example
+ * <DTRadioOption value="option1" label="First option" />
+ */
+export declare function DTRadioOption({ value, label, description, disabled, style, }: DTRadioOptionProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DTRadioGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DTRadioGroup.d.ts","sourceRoot":"","sources":["../../src/components/DTRadioGroup.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAY,MAAM,cAAc,CAAC;AAI/E,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAcvE,UAAU,iBAAiB;IACzB;;OAEG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,aAAa,EACb,OAAkB,EAClB,QAAQ,EACR,KAAK,GACN,EAAE,iBAAiB,2CAMnB;AAID,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAgBD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EACL,WAAW,EACX,QAAgB,EAChB,KAAK,GACN,EAAE,kBAAkB,2CAuEpB"}

package/dist/components/DTRadioGroup.js

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DT RadioGroup + RadioOption Components
+ *
+ * Custom-built angular radio selection following the Dangerous Things design language.
+ * RNP RadioButton uses circular geometry with animated SVG circles,
+ * so we build hexagonal indicators from scratch.
+ *
+ * Web CSS reference (AddOnSelector single-select):
+ * - Selected: border highlight + semi-transparent fill (var(--selected) at 70% opacity)
+ * - Hexagon indicator instead of circular radio button
+ */
+import { createContext, useContext } from 'react';
+import { StyleSheet, View, Pressable } from 'react-native';
+import { Text } from 'react-native-paper';
+import Svg, { Polygon } from 'react-native-svg';
+import { DTColors, getColor } from '../theme/colors';
+import { getVariantColor } from '../utils/variantColors';
+const RadioContext = createContext(null);
+/**
+ * DT-styled RadioGroup container
+ *
+ * @example
+ * <DTRadioGroup value={selected} onValueChange={setSelected} variant="normal">
+ *   <DTRadioOption value="a" label="Option A" />
+ *   <DTRadioOption value="b" label="Option B" description="With description" />
+ * </DTRadioGroup>
+ */
+export function DTRadioGroup({ value, onValueChange, variant = 'normal', children, style, }) {
+    return (_jsx(RadioContext.Provider, { value: { value, onValueChange, variant }, children: _jsx(View, { style: [styles.group, style], children: children }) }));
+}
+const INDICATOR_SIZE = 22;
+const INDICATOR_INNER = 12;
+const INDICATOR_BORDER = 2;
+/** Generate flat-top hexagon points string for SVG Polygon */
+function hexPoints(cx, cy, r) {
+    const pts = [];
+    for (let i = 0; i < 6; i++) {
+        const angle = (Math.PI / 3) * i - Math.PI / 6; // flat-top: start at -30°
+        pts.push(`${cx + r * Math.cos(angle)},${cy + r * Math.sin(angle)}`);
+    }
+    return pts.join(' ');
+}
+/**
+ * DT-styled RadioOption with hexagonal indicator
+ *
+ * Must be used inside a DTRadioGroup.
+ *
+ * @example
+ * <DTRadioOption value="option1" label="First option" />
+ */
+export function DTRadioOption({ value, label, description, disabled = false, style, }) {
+    const context = useContext(RadioContext);
+    if (!context) {
+        throw new Error('DTRadioOption must be used inside DTRadioGroup');
+    }
+    const { value: selectedValue, onValueChange, variant } = context;
+    const isSelected = selectedValue === value;
+    const accentColor = getVariantColor(variant);
+    const selectedBgColor = getColor(variant === 'normal'
+        ? 'modeNormalSelected'
+        : variant === 'emphasis'
+            ? 'modeEmphasisSelected'
+            : 'modeNormal');
+    const opacity = disabled ? 0.5 : 1;
+    return (_jsxs(Pressable, { onPress: () => !disabled && onValueChange(value), style: ({ pressed }) => [
+            styles.option,
+            {
+                borderColor: isSelected ? accentColor : getColor('modeNormal', 0.3),
+                backgroundColor: isSelected ? selectedBgColor : 'transparent',
+                opacity: pressed ? 0.7 : opacity,
+            },
+            style,
+        ], children: [_jsxs(Svg, { width: INDICATOR_SIZE, height: INDICATOR_SIZE, viewBox: `0 0 ${INDICATOR_SIZE} ${INDICATOR_SIZE}`, children: [_jsx(Polygon, { points: hexPoints(INDICATOR_SIZE / 2, INDICATOR_SIZE / 2, INDICATOR_SIZE / 2 - INDICATOR_BORDER / 2), fill: "transparent", stroke: accentColor, strokeWidth: INDICATOR_BORDER, strokeLinejoin: "miter" }), isSelected && (_jsx(Polygon, { points: hexPoints(INDICATOR_SIZE / 2, INDICATOR_SIZE / 2, INDICATOR_INNER / 2), fill: accentColor }))] }), _jsxs(View, { style: styles.optionText, children: [_jsx(Text, { style: [
+                            styles.optionLabel,
+                            { color: isSelected ? DTColors.dark : DTColors.light },
+                        ], children: label }), description && (_jsx(Text, { variant: "bodySmall", style: [
+                            styles.optionDescription,
+                            { color: isSelected ? DTColors.dark : DTColors.disabled },
+                        ], children: description }))] })] }));
+}
+const styles = StyleSheet.create({
+    group: {
+        gap: 8,
+    },
+    option: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        padding: 12,
+        borderWidth: 2,
+    },
+    optionText: {
+        flex: 1,
+        gap: 2,
+    },
+    optionLabel: {
+        fontSize: 14,
+        fontWeight: '500',
+        letterSpacing: 0.3,
+    },
+    optionDescription: {
+        fontSize: 12,
+        letterSpacing: 0.2,
+    },
+});
+//# sourceMappingURL=DTRadioGroup.js.map

package/dist/components/DTRadioGroup.js.map

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

package/dist/components/DTSearchInput.d.ts

@@ -0,0 +1,72 @@
+/**
+ * DT SearchInput Component
+ *
+ * A themed search input wrapping React Native Paper's Searchbar
+ * with the Dangerous Things angular aesthetic.
+ *
+ * Styled input only — predictive results logic is app-specific
+ * (composable principle from CLAUDE.md).
+ */
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
+import { type DTVariant } from '../utils/variantColors';
+interface DTSearchInputProps {
+    /**
+     * Current search text
+     */
+    value: string;
+    /**
+     * Called when text changes
+     */
+    onChangeText: (text: string) => void;
+    /**
+     * Called when search is submitted
+     */
+    onSubmit?: () => void;
+    /**
+     * Placeholder text
+     * @default 'Search...'
+     */
+    placeholder?: string;
+    /**
+     * Visual variant
+     * @default 'normal'
+     */
+    variant?: DTVariant;
+    /**
+     * Show loading indicator instead of search icon
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Auto-focus the input on mount
+     */
+    autoFocus?: boolean;
+    /**
+     * Custom color (overrides variant)
+     */
+    color?: string;
+    /**
+     * Additional styles for the container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styles for the input text
+     */
+    inputStyle?: StyleProp<TextStyle>;
+}
+/**
+ * DT-styled SearchInput wrapping React Native Paper Searchbar
+ *
+ * @example
+ * <DTSearchInput value={query} onChangeText={setQuery} onSubmit={handleSearch} />
+ *
+ * @example
+ * <DTSearchInput value={query} onChangeText={setQuery} loading={isSearching} variant="emphasis" />
+ */
+export declare function DTSearchInput({ value, onChangeText, onSubmit, placeholder, variant, loading, disabled, autoFocus, color, style, inputStyle, }: DTSearchInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DTSearchInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DTSearchInput.d.ts","sourceRoot":"","sources":["../../src/components/DTSearchInput.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,EAAmB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAW,MAAM,cAAc,CAAC;AAGzF,OAAO,EAAC,KAAK,SAAS,EAAkB,MAAM,wBAAwB,CAAC;AAEvE,UAAU,kBAAkB;IAC1B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACnC;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,WAAyB,EACzB,OAAkB,EAClB,OAAe,EACf,QAAgB,EAChB,SAAiB,EACjB,KAAK,EACL,KAAK,EACL,UAAU,GACX,EAAE,kBAAkB,2CA0DpB"}

package/dist/components/DTSearchInput.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * DT SearchInput Component
+ *
+ * A themed search input wrapping React Native Paper's Searchbar
+ * with the Dangerous Things angular aesthetic.
+ *
+ * Styled input only — predictive results logic is app-specific
+ * (composable principle from CLAUDE.md).
+ */
+import { useState, useRef, useEffect } from 'react';
+import { StyleSheet, View, Animated } from 'react-native';
+import { Searchbar, ActivityIndicator } from 'react-native-paper';
+import { DTColors } from '../theme/colors';
+import { getVariantColor } from '../utils/variantColors';
+/**
+ * DT-styled SearchInput wrapping React Native Paper Searchbar
+ *
+ * @example
+ * <DTSearchInput value={query} onChangeText={setQuery} onSubmit={handleSearch} />
+ *
+ * @example
+ * <DTSearchInput value={query} onChangeText={setQuery} loading={isSearching} variant="emphasis" />
+ */
+export function DTSearchInput({ value, onChangeText, onSubmit, placeholder = 'Search...', variant = 'normal', loading = false, disabled = false, autoFocus = false, color, style, inputStyle, }) {
+    const accentColor = getVariantColor(variant, color);
+    const [focused, setFocused] = useState(false);
+    const focusAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        const anim = Animated.timing(focusAnim, {
+            toValue: focused ? 1 : 0,
+            duration: 150,
+            useNativeDriver: false,
+        });
+        anim.start();
+        return () => anim.stop();
+    }, [focused, focusAnim]);
+    return (_jsxs(View, { style: [styles.container, style], children: [_jsx(Searchbar, { value: value, onChangeText: onChangeText, onSubmitEditing: onSubmit, onFocus: () => setFocused(true), onBlur: () => setFocused(false), returnKeyType: "search", placeholder: placeholder, placeholderTextColor: DTColors.disabled, editable: !disabled, autoFocus: autoFocus, icon: loading
+                    ? () => _jsx(ActivityIndicator, { size: 20, color: accentColor })
+                    : 'magnify', iconColor: accentColor, inputStyle: [styles.input, { color: DTColors.light }, inputStyle], style: [styles.searchbar, { borderColor: accentColor }], rippleColor: accentColor, theme: {
+                    colors: {
+                        elevation: { level3: DTColors.dark },
+                        onSurface: DTColors.light,
+                        onSurfaceVariant: accentColor,
+                    },
+                    roundness: 0,
+                } }), _jsx(Animated.View, { style: [
+                    styles.focusBar,
+                    {
+                        backgroundColor: accentColor,
+                        opacity: focusAnim,
+                    },
+                ] })] }));
+}
+const styles = StyleSheet.create({
+    container: {},
+    searchbar: {
+        borderWidth: 2,
+        backgroundColor: DTColors.dark,
+        elevation: 0,
+    },
+    input: {
+        fontSize: 14,
+        letterSpacing: 0.3,
+    },
+    focusBar: {
+        height: 4,
+        marginTop: 1,
+    },
+});
+//# sourceMappingURL=DTSearchInput.js.map

package/dist/components/DTSearchInput.js.map

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