@campxdev/react-native-blueprint 0.1.0

package/lib/module/components/ui/Select.js

@@ -0,0 +1,269 @@
+"use strict";
+
+import { Icon } from "./Icon.js";
+import { NativeOnlyAnimatedView } from "./Native-Only-Animated-View.js";
+import { TextClassContext } from "./Text.js";
+import { cn } from "../../lib/utils.js";
+import * as SelectPrimitive from '@rn-primitives/select';
+import { Check, ChevronDown, ChevronDownIcon, ChevronUpIcon } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, ScrollView, StyleSheet, View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { FadeIn, FadeOut } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(ScrollView, {
+  className: 'style'
+});
+
+/**
+ * Option type for select items
+ */
+
+/**
+ * Root select component for dropdown selection
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Select value={value} onValueChange={setValue}>
+ *   <SelectTrigger>
+ *     <SelectValue placeholder="Select an option" />
+ *   </SelectTrigger>
+ *   <SelectContent>
+ *     <SelectItem value="option1">
+ *       <Text>Option 1</Text>
+ *     </SelectItem>
+ *   </SelectContent>
+ * </Select>
+ * ```
+ */
+const Select = SelectPrimitive.Root;
+
+/**
+ * Groups related select items together
+ * @component
+ */
+const SelectGroup = SelectPrimitive.Group;
+
+/**
+ * Displays the selected value or placeholder text
+ * @component
+ */
+function SelectValue({
+  ref,
+  className,
+  ...props
+}) {
+  const {
+    value
+  } = SelectPrimitive.useRootContext();
+  return /*#__PURE__*/_jsx(SelectPrimitive.Value, {
+    ref: ref,
+    className: cn('text-foreground line-clamp-1 flex flex-row items-center gap-2 text-sm', !value && 'text-muted-foreground', className),
+    ...props
+  });
+}
+
+/**
+ * Trigger button that opens the select dropdown
+ * @component
+ */
+function SelectTrigger({
+  ref,
+  className,
+  children,
+  size = 'default',
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(SelectPrimitive.Trigger, {
+    ref: ref,
+    className: cn('border-input dark:bg-input/30 dark:active:bg-input/50 bg-background flex h-10 flex-row items-center justify-between gap-2 rounded-md border px-3 py-2 shadow-sm shadow-black/5 sm:h-9', Platform.select({
+      web: 'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:hover:bg-input/50 w-fit whitespace-nowrap text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg]:shrink-0'
+    }), props.disabled && 'opacity-50', size === 'sm' && 'h-8 py-2 sm:py-1.5', className),
+    ...props,
+    children: [/*#__PURE__*/_jsx(_Fragment, {
+      children: children
+    }), /*#__PURE__*/_jsx(Icon, {
+      as: ChevronDown,
+      "aria-hidden": true,
+      className: "text-muted-foreground size-4"
+    })]
+  });
+}
+
+/**
+ * Full window overlay wrapper for iOS
+ */
+const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Content container for select items
+ * @component
+ */
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  portalHost,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(SelectPrimitive.Portal, {
+    hostName: portalHost,
+    children: /*#__PURE__*/_jsx(FullWindowOverlay, {
+      children: /*#__PURE__*/_jsx(SelectPrimitive.Overlay, {
+        style: Platform.select({
+          native: StyleSheet.absoluteFill
+        }),
+        children: /*#__PURE__*/_jsx(TextClassContext.Provider, {
+          value: "text-popover-foreground",
+          children: /*#__PURE__*/_jsx(NativeOnlyAnimatedView, {
+            className: "z-50",
+            entering: FadeIn,
+            exiting: FadeOut,
+            children: /*#__PURE__*/_jsxs(SelectPrimitive.Content, {
+              className: cn('bg-popover border-border relative z-50 min-w-[8rem] rounded-md border shadow-md shadow-black/5', Platform.select({
+                web: cn('animate-in fade-in-0 zoom-in-95 origin-(--radix-select-content-transform-origin) max-h-52 overflow-y-auto overflow-x-hidden', props.side === 'bottom' && 'slide-in-from-top-2', props.side === 'top' && 'slide-in-from-bottom-2'),
+                native: 'p-1'
+              }), position === 'popper' && Platform.select({
+                web: cn(props.side === 'bottom' && 'translate-y-1', props.side === 'top' && '-translate-y-1')
+              }), className),
+              position: position,
+              ...props,
+              children: [/*#__PURE__*/_jsx(SelectScrollUpButton, {}), /*#__PURE__*/_jsx(SelectPrimitive.Viewport, {
+                className: cn('p-1', position === 'popper' && cn('w-full', Platform.select({
+                  web: 'h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]'
+                }))),
+                children: children
+              }), /*#__PURE__*/_jsx(SelectScrollDownButton, {})]
+            })
+          })
+        })
+      })
+    })
+  });
+}
+
+/**
+ * Label for grouping select items
+ * @component
+ */
+function SelectLabel({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(SelectPrimitive.Label, {
+    className: cn('text-muted-foreground px-2 py-2 text-xs sm:py-1.5', className),
+    ...props
+  });
+}
+
+/**
+ * Individual selectable item
+ * @component
+ */
+function SelectItem({
+  className,
+  children: _children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(SelectPrimitive.Item, {
+    className: cn('active:bg-accent group relative flex w-full flex-row items-center gap-2 rounded-sm py-2 pl-2 pr-8 sm:py-1.5', Platform.select({
+      web: 'focus:bg-accent focus:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 cursor-default outline-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none'
+    }), props.disabled && 'opacity-50', className),
+    ...props,
+    children: [/*#__PURE__*/_jsx(View, {
+      className: "absolute right-2 flex size-3.5 items-center justify-center",
+      children: /*#__PURE__*/_jsx(SelectPrimitive.ItemIndicator, {
+        children: /*#__PURE__*/_jsx(Icon, {
+          as: Check,
+          className: "text-muted-foreground size-4 shrink-0"
+        })
+      })
+    }), /*#__PURE__*/_jsx(SelectPrimitive.ItemText, {
+      className: "text-foreground group-active:text-accent-foreground select-none text-sm"
+    })]
+  });
+}
+
+/**
+ * Visual separator between select items
+ * @component
+ */
+function SelectSeparator({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(SelectPrimitive.Separator, {
+    className: cn('bg-border -mx-1 my-1 h-px', Platform.select({
+      web: 'pointer-events-none'
+    }), className),
+    ...props
+  });
+}
+
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+function SelectScrollUpButton({
+  className,
+  ...props
+}) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(SelectPrimitive.ScrollUpButton, {
+    className: cn('flex cursor-default items-center justify-center py-1', className),
+    ...props,
+    children: /*#__PURE__*/_jsx(Icon, {
+      as: ChevronUpIcon,
+      className: "size-4"
+    })
+  });
+}
+
+/**
+ * @platform Web only
+ * Returns null on native platforms
+ */
+function SelectScrollDownButton({
+  className,
+  ...props
+}) {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(SelectPrimitive.ScrollDownButton, {
+    className: cn('flex cursor-default items-center justify-center py-1', className),
+    ...props,
+    children: /*#__PURE__*/_jsx(Icon, {
+      as: ChevronDownIcon,
+      className: "size-4"
+    })
+  });
+}
+
+/**
+ * @platform Native only
+ * Returns the children on the web
+ */
+function NativeSelectScrollView({
+  className,
+  ...props
+}) {
+  if (Platform.OS === 'web') {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: props.children
+    });
+  }
+  return /*#__PURE__*/_jsx(ScrollView, {
+    className: cn('max-h-52', className),
+    ...props
+  });
+}
+export { NativeSelectScrollView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue };
+//# sourceMappingURL=Select.js.map

package/lib/module/components/ui/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Icon","NativeOnlyAnimatedView","TextClassContext","cn","SelectPrimitive","Check","ChevronDown","ChevronDownIcon","ChevronUpIcon","React","Platform","ScrollView","StyleSheet","View","cssInterop","FadeIn","FadeOut","FullWindowOverlay","RNFullWindowOverlay","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","className","Select","Root","SelectGroup","Group","SelectValue","ref","props","value","useRootContext","Value","SelectTrigger","children","size","Trigger","select","web","disabled","as","OS","SelectContent","position","portalHost","Portal","hostName","Overlay","style","native","absoluteFill","Provider","entering","exiting","Content","side","SelectScrollUpButton","Viewport","SelectScrollDownButton","SelectLabel","Label","SelectItem","_children","Item","ItemIndicator","ItemText","SelectSeparator","Separator","ScrollUpButton","ScrollDownButton","NativeSelectScrollView"],"sourceRoot":"../../../../src","sources":["components/ui/Select.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/ui/Separator.js

@@ -0,0 +1,58 @@
+"use strict";
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { cn } from "../../lib/utils.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+
+/**
+ * Visual divider for separating content sections
+ *
+ * A thin line that creates visual separation between content areas. Can be oriented
+ * horizontally or vertically and supports decorative or semantic roles.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Horizontal separator (default)
+ * <View>
+ *   <Text>Section 1</Text>
+ *   <Separator className="my-4" />
+ *   <Text>Section 2</Text>
+ * </View>
+ *
+ * // Vertical separator
+ * <View className="flex-row items-center gap-4">
+ *   <Text>Left</Text>
+ *   <Separator orientation="vertical" className="h-4" />
+ *   <Text>Right</Text>
+ * </View>
+ *
+ * // Semantic separator for screen readers
+ * <Separator decorative={false} />
+ * ```
+ *
+ * @accessibility
+ * - Decorative separators (default) have role="none" for screen readers
+ * - Non-decorative separators have role="separator" for semantic meaning
+ */
+const Separator = /*#__PURE__*/React.forwardRef(({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}, ref) => {
+  return /*#__PURE__*/_jsx(View, {
+    role: decorative ? 'none' : 'separator',
+    className: cn('shrink-0 bg-border dark:bg-border', orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]', className),
+    ref: ref,
+    ...props
+  });
+});
+Separator.displayName = 'Separator';
+export { Separator };
+//# sourceMappingURL=Separator.js.map

package/lib/module/components/ui/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","cssInterop","cn","jsx","_jsx","className","Separator","forwardRef","orientation","decorative","props","ref","role","displayName"],"sourceRoot":"../../../../src","sources":["components/ui/Separator.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,EAAE,QAAQ,oBAAiB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAGrCH,UAAU,CAACD,IAAI,EAAE;EAAEK,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,gBAAGP,KAAK,CAACQ,UAAU,CAQhC,CACE;EAAEF,SAAS;EAAEG,WAAW,GAAG,YAAY;EAAEC,UAAU,GAAG,IAAI;EAAE,GAAGC;AAAM,CAAC,EACtEC,GAAG,KACA;EACH,oBACEP,IAAA,CAACJ,IAAI;IACHY,IAAI,EAAEH,UAAU,GAAG,MAAM,GAAG,WAAY;IACxCJ,SAAS,EAAEH,EAAE,CACX,mCAAmC,EACnCM,WAAW,KAAK,YAAY,GAAG,gBAAgB,GAAG,gBAAgB,EAClEH,SACF,CAAE;IACFM,GAAG,EAAEA,GAAI;IAAA,GACLD;EAAK,CACV,CAAC;AAEN,CACF,CAAC;AACDJ,SAAS,CAACO,WAAW,GAAG,WAAW;AAEnC,SAASP,SAAS","ignoreList":[]}

package/lib/module/components/ui/SizedBox.js

@@ -0,0 +1,101 @@
+"use strict";
+
+import * as React from 'react';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * A box with a specified size.
+ *
+ * If a child is provided, this widget forces its child to have a specific width and/or height.
+ * If either the width or height is not specified, this widget will size itself to match the child's size in that dimension.
+ *
+ * If no child is provided, this widget will size itself to the specified width and height,
+ * treating null values as zero.
+ *
+ * This is similar to Flutter's SizedBox widget and is useful for:
+ * - Adding fixed spacing between widgets
+ * - Constraining child widget dimensions
+ * - Creating empty space
+ *
+ * @example
+ * // Create spacing
+ * <SizedBox height={16} />
+ *
+ * @example
+ * // Constrain child size
+ * <SizedBox width={100} height={100}>
+ *   <Image source={...} />
+ * </SizedBox>
+ *
+ * @example
+ * // Create horizontal spacing
+ * <View style={{ flexDirection: 'row' }}>
+ *   <Button />
+ *   <SizedBox width={12} />
+ *   <Button />
+ * </View>
+ */
+export function SizedBox({
+  width,
+  height,
+  children,
+  style
+}) {
+  const boxStyle = {
+    ...(width !== undefined && {
+      width
+    }),
+    ...(height !== undefined && {
+      height
+    }),
+    ...style
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: boxStyle,
+    children: children
+  });
+}
+
+// Convenience components for common spacing values
+(function (_SizedBox) {
+  function Square({
+    size,
+    children,
+    style
+  }) {
+    return /*#__PURE__*/_jsx(SizedBox, {
+      width: size,
+      height: size,
+      style: style,
+      children: children
+    });
+  }
+  _SizedBox.Square = Square;
+  function Expand({
+    children,
+    style
+  }) {
+    const expandStyle = {
+      flex: 1
+    };
+    return /*#__PURE__*/_jsx(View, {
+      style: [expandStyle, style],
+      children: children
+    });
+  }
+  _SizedBox.Expand = Expand;
+  function Shrink({
+    children,
+    style
+  }) {
+    const shrinkStyle = {
+      flexShrink: 1
+    };
+    return /*#__PURE__*/_jsx(View, {
+      style: [shrinkStyle, style],
+      children: children
+    });
+  }
+  _SizedBox.Shrink = Shrink;
+})(SizedBox || (SizedBox = {}));
+//# sourceMappingURL=SizedBox.js.map

package/lib/module/components/ui/SizedBox.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","jsx","_jsx","SizedBox","width","height","children","style","boxStyle","undefined","_SizedBox","Square","size","Expand","expandStyle","flex","Shrink","shrinkStyle","flexShrink"],"sourceRoot":"../../../../src","sources":["components/ui/SizedBox.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAwB,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAwBpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAC;EAAEC,KAAK;EAAEC,MAAM;EAAEC,QAAQ;EAAEC;AAAqB,CAAC,EAAE;EAC1E,MAAMC,QAAmB,GAAG;IAC1B,IAAIJ,KAAK,KAAKK,SAAS,IAAI;MAAEL;IAAM,CAAC,CAAC;IACrC,IAAIC,MAAM,KAAKI,SAAS,IAAI;MAAEJ;IAAO,CAAC,CAAC;IACvC,GAAGE;EACL,CAAC;EAED,oBAAOL,IAAA,CAACF,IAAI;IAACO,KAAK,EAAEC,QAAS;IAAAF,QAAA,EAAEA;EAAQ,CAAO,CAAC;AACjD;;AAEA;AAAA,WAAAI,SAAA;EAKS,SAASC,MAAMA,CAAC;IACrBC,IAAI;IACJN,QAAQ;IACRC;EAKF,CAAC,EAAE;IACD,oBACEL,IAAA,CAACC,QAAQ;MAACC,KAAK,EAAEQ,IAAK;MAACP,MAAM,EAAEO,IAAK;MAACL,KAAK,EAAEA,KAAM;MAAAD,QAAA,EAC/CA;IAAQ,CACD,CAAC;EAEf;EAACI,SAAA,CAAAC,MAAA,GAAAA,MAAA;EAKM,SAASE,MAAMA,CAAC;IACrBP,QAAQ;IACRC;EAIF,CAAC,EAAE;IACD,MAAMO,WAAsB,GAAG;MAAEC,IAAI,EAAE;IAAE,CAAC;IAC1C,oBAAOb,IAAA,CAACF,IAAI;MAACO,KAAK,EAAE,CAACO,WAAW,EAAEP,KAAK,CAAE;MAAAD,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAC7D;EAACI,SAAA,CAAAG,MAAA,GAAAA,MAAA;EAKM,SAASG,MAAMA,CAAC;IACrBV,QAAQ;IACRC;EAIF,CAAC,EAAE;IACD,MAAMU,WAAsB,GAAG;MAAEC,UAAU,EAAE;IAAE,CAAC;IAChD,oBAAOhB,IAAA,CAACF,IAAI;MAACO,KAAK,EAAE,CAACU,WAAW,EAAEV,KAAK,CAAE;MAAAD,QAAA,EAAEA;IAAQ,CAAO,CAAC;EAC7D;EAACI,SAAA,CAAAM,MAAA,GAAAA,MAAA;AAAA,GA9Ccb,QAAQ,KAARA,QAAQ","ignoreList":[]}

package/lib/module/components/ui/Skeleton.js

@@ -0,0 +1,57 @@
+"use strict";
+
+import { cn } from "../../lib/utils.js";
+import { View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { jsx as _jsx } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+
+/**
+ * Skeleton loading placeholder component
+ *
+ * Displays an animated placeholder during content loading states. Provides visual feedback
+ * to users while data is being fetched, improving perceived performance.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Text skeleton
+ * <Skeleton className="h-4 w-[250px]" />
+ *
+ * // Avatar skeleton
+ * <Skeleton className="h-12 w-12 rounded-full" />
+ *
+ * // Card skeleton
+ * <View className="flex gap-3">
+ *   <Skeleton className="h-[125px] w-full rounded-xl" />
+ *   <View className="gap-2">
+ *     <Skeleton className="h-4 w-full" />
+ *     <Skeleton className="h-4 w-[80%]" />
+ *   </View>
+ * </View>
+ *
+ * // List skeleton
+ * {[1, 2, 3].map((i) => (
+ *   <View key={i} className="flex-row items-center gap-4">
+ *     <Skeleton className="h-12 w-12 rounded-full" />
+ *     <View className="flex-1 gap-2">
+ *       <Skeleton className="h-4 w-full" />
+ *       <Skeleton className="h-4 w-3/4" />
+ *     </View>
+ *   </View>
+ * ))}
+ * ```
+ */
+function Skeleton({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('bg-accent animate-pulse rounded-md', className),
+    ...props
+  });
+}
+export { Skeleton };
+//# sourceMappingURL=Skeleton.js.map

package/lib/module/components/ui/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cn","View","cssInterop","jsx","_jsx","className","Skeleton","props"],"sourceRoot":"../../../../src","sources":["components/ui/Skeleton.tsx"],"mappings":";;AAAA,SAASA,EAAE,QAAQ,oBAAiB;AACpC,SAASC,IAAI,QAAQ,cAAc;AACnC,SAASC,UAAU,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAExCF,UAAU,CAACD,IAAI,EAAE;EAAEI,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQA,CAAC;EAChBD,SAAS;EACT,GAAGE;AAC0D,CAAC,EAAE;EAChE,oBACEH,IAAA,CAACH,IAAI;IACHI,SAAS,EAAEL,EAAE,CAAC,oCAAoC,EAAEK,SAAS,CAAE;IAAA,GAC3DE;EAAK,CACV,CAAC;AAEN;AAEA,SAASD,QAAQ","ignoreList":[]}

package/lib/module/components/ui/Slider.js

@@ -0,0 +1,169 @@
+"use strict";
+
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { cn } from "../../lib/utils.js";
+
+/**
+ * Props for the Slider component
+ *
+ * @property {number} value - Current slider value
+ * @property {function} onValueChange - Callback when value changes
+ * @property {number} min - Minimum value (default: 0)
+ * @property {number} max - Maximum value (default: 100)
+ * @property {number} step - Step increment (default: 1)
+ * @property {boolean} disabled - Whether the slider is disabled
+ */
+
+/**
+ * Ref interface for Slider component
+ *
+ * @property {function} reset - Resets slider to minimum value
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Interactive slider component for selecting numeric values
+ *
+ * Provides smooth gesture-based interaction with spring animations.
+ * Supports min/max ranges, step increments, and tap-to-select.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <Slider
+ *   value={volume}
+ *   onValueChange={(values) => setVolume(values[0])}
+ *   min={0}
+ *   max={100}
+ *   step={5}
+ * />
+ * ```
+ *
+ * @accessibility
+ * - Disabled state prevents interaction
+ * - Focus visible states on web
+ * - Value changes are announced by screen readers
+ */
+const Slider = /*#__PURE__*/React.forwardRef(({
+  value,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  disabled = false,
+  className,
+  style,
+  ...props
+}, ref) => {
+  const sliderWidth = useSharedValue(0);
+  const translationX = useSharedValue(0);
+  const startPosition = useSharedValue(0);
+  const [sliderDimensions, setSliderDimensions] = React.useState({
+    width: 0,
+    x: 0
+  });
+
+  // Calculate thumb position from value
+  const getThumbPosition = React.useCallback(val => {
+    const range = max - min;
+    const percentage = (val - min) / range;
+    return percentage * sliderDimensions.width;
+  }, [max, min, sliderDimensions.width]);
+
+  // Calculate value from position
+  const getValueFromPosition = React.useCallback(position => {
+    if (sliderWidth.value === 0) return min;
+    const percentage = Math.max(0, Math.min(1, position / sliderWidth.value));
+    const range = max - min;
+    let newValue = min + percentage * range;
+
+    // Apply step
+    if (step > 0) {
+      newValue = Math.round(newValue / step) * step;
+    }
+    return Math.max(min, Math.min(max, newValue));
+  }, [max, min, step, sliderWidth]);
+
+  // Initialize thumb position based on value
+  React.useEffect(() => {
+    if (sliderDimensions.width > 0) {
+      const newPosition = getThumbPosition(value);
+      translationX.value = newPosition;
+    }
+  }, [value, sliderDimensions.width, getThumbPosition, translationX]);
+
+  // Expose reset method via ref
+  React.useImperativeHandle(ref, () => ({
+    reset: () => {
+      translationX.value = withSpring(getThumbPosition(min));
+      onValueChange?.([min]);
+    }
+  }));
+  const handleValueChange = React.useCallback(newValue => {
+    onValueChange?.([newValue]);
+  }, [onValueChange]);
+  const pan = Gesture.Pan().enabled(!disabled).onBegin(() => {
+    startPosition.value = translationX.value;
+  }).onUpdate(event => {
+    if (sliderWidth.value === 0) return;
+    const newPosition = Math.max(0, Math.min(sliderWidth.value, event.translationX + startPosition.value));
+    translationX.value = newPosition;
+  }).onEnd(() => {
+    if (sliderWidth.value === 0) return;
+    const newValue = getValueFromPosition(translationX.value);
+    translationX.value = withSpring(getThumbPosition(newValue));
+    runOnJS(handleValueChange)(newValue);
+  });
+  const tap = Gesture.Tap().enabled(!disabled).onEnd(event => {
+    if (sliderWidth.value === 0) return;
+    const newPosition = Math.max(0, Math.min(sliderWidth.value, event.x));
+    const newValue = getValueFromPosition(newPosition);
+    translationX.value = withSpring(getThumbPosition(newValue));
+    runOnJS(handleValueChange)(newValue);
+  });
+  const composed = Gesture.Race(tap, pan);
+  const thumbAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: translationX.value
+    }]
+  }));
+  const rangeAnimatedStyle = useAnimatedStyle(() => ({
+    width: translationX.value
+  }));
+  return /*#__PURE__*/_jsx(View, {
+    className: cn('relative flex h-10 w-full flex-row items-center justify-center', disabled && 'opacity-50', className),
+    style: style,
+    ...props,
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: composed,
+      children: /*#__PURE__*/_jsxs(View, {
+        className: "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        onLayout: event => {
+          const {
+            width,
+            x
+          } = event.nativeEvent.layout;
+          sliderWidth.value = width;
+          setSliderDimensions({
+            width,
+            x
+          });
+        },
+        children: [/*#__PURE__*/_jsx(Animated.View, {
+          className: "absolute left-0 h-full rounded-full bg-primary",
+          style: rangeAnimatedStyle
+        }), /*#__PURE__*/_jsx(Animated.View, {
+          className: cn('absolute -top-1.5 size-5 -ml-2.5 rounded-full border-2 border-primary bg-background shadow-sm shadow-black/5', Platform.select({
+            web: 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-none focus-visible:ring-[3px] disabled:pointer-events-none'
+          })),
+          style: thumbAnimatedStyle
+        })]
+      })
+    })
+  });
+});
+Slider.displayName = 'Slider';
+export { Slider };
+//# sourceMappingURL=Slider.js.map