panelui-native 0.21.0 → 0.22.5

package/README.md

@@ -1,7 +1,7 @@
 # PanelUI — React Native UI components for Expo, styled with Tailwind CSS
 
 **PanelUI** (`panelui-native`) is an accessible, high-performance React Native component
-library for Expo apps. 29 typed components — buttons, bottom sheets, dialogs, selects,
+library for Expo apps. 53 typed components — buttons, bottom sheets, dialogs, selects,
 toasts, forms — styled with Tailwind CSS v4 and animated on the UI thread with Reanimated.
 Zero native code, so it runs in Expo Go.
 
@@ -24,15 +24,35 @@ Zero native code, so it runs in Expo Go.
   state and labels.
 - 📦 **TypeScript, tree-shakeable, zero native modules** — works in Expo Go, no prebuild needed.
 
-## Install
+## Quick start
+
+Needs an Expo SDK 57+ app and Node 20+. No Xcode, no Android Studio, no `prebuild` — PanelUI has
+no native modules, so it runs in Expo Go. No app yet? `npx create-expo-app@latest my-app`.
+
+Five steps. The full walkthrough, with a fix for every error people hit, is at
+**[panelui.dev/docs/installation](https://panelui.dev/docs/installation)**.
+
+### 1. Install the packages
 
 ```sh
-npx expo install panelui-native uniwind tailwindcss react-native-reanimated react-native-gesture-handler react-native-safe-area-context react-native-svg react-native-worklets
+npx expo install panelui-native uniwind tailwindcss @react-native-masked-view/masked-view expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg react-native-worklets
 ```
 
-## Quick start
+Install all of them, including the ones you think you don't need. Metro resolves every import in
+the library when it builds your bundle, so leaving one out fails the **first** bundle with
+`Unable to resolve module …` — for a component you may never use. `npx expo install` (rather than
+`npm install`) picks the versions that match your SDK.
+
+Optional, each behind a guarded import: `expo-haptics` (the `haptics` prop), `expo-blur` (blurred
+overlay backdrops), `expo-clipboard` (`useCopyToClipboard`), `react-native-keyboard-controller`
+(keyboard avoidance on Android), `expo-file-system` + `react-native-view-shot` (Signature export),
+`@expo/ui` (native platform controls).
 
-**1. Configure Metro**
+### 2. Add `metro.config.js`
+
+**In the root of your project, next to `package.json`** — not in `app/`, not in `src/`. A Metro
+config anywhere else is silently ignored and none of your classes will do anything. A fresh Expo
+app has no such file; `npx expo customize metro.config.js` writes one.
 
 ```js
 // metro.config.js
@@ -42,49 +62,100 @@ const { withUniwindConfig } = require('uniwind/metro');
 const config = getDefaultConfig(__dirname);
 
 module.exports = withUniwindConfig(config, {
+  // In an app made by create-expo-app this is './src/global.css' — see step 3.
   cssEntryFile: './global.css',
   dtsFile: './uniwind-types.d.ts',
-  // Only needed if you use the Moon or Grass themes.
+  // Only needed to switch to the Moon or Grass themes at runtime.
   extraThemes: ['moon', 'moon-dark', 'grass', 'grass-dark'],
 });
 ```
 
-**2. Create `global.css`**
+`cssEntryFile` and `dtsFile` are relative to this file.
+
+### 3. Add the imports to `global.css`
+
+**Look for this file before you create one** — an app made by `create-expo-app` already has
+`src/global.css`. Add these lines at the top of it and leave the rest below. A second CSS file at
+the project root gives you two entries, only one of which is compiled, and nothing gets styled.
 
 ```css
+/* src/global.css */
 @import 'tailwindcss';
 @import 'uniwind';
 @import 'panelui-native/theme.css';
 
-@source './node_modules/panelui-native/src';
+@source '../node_modules/panelui-native/src';
 ```
 
-**3. Wrap your app**
+`@source` is relative to **the CSS file**, and has to land on `node_modules/panelui-native/src` —
+hence the `../` above, from `src/`. From the project root it is `'./node_modules/…'`, from
+`src/styles/` it is `'../../node_modules/…'`. Get it wrong and your own classes work while
+PanelUI's components come out unstyled. Whichever file you used is what `cssEntryFile` must name.
+
+### 4. Import the CSS and add the provider
+
+At the top of your app's entry file. The default template uses Expo Router with routes under
+`src/`, so there is usually no `App.tsx` — the entry is `src/app/_layout.tsx`, and it already
+returns a navigation `ThemeProvider` to wrap rather than replace:
 
 ```tsx
-// App.tsx
-import './global.css';
-import { PanelUIProvider, Button, Card } from 'panelui-native';
+// src/app/_layout.tsx
+import '../global.css';
+
+import { DarkTheme, DefaultTheme, ThemeProvider } from 'expo-router';
+import { useColorScheme } from 'react-native';
+import { PanelUIProvider } from 'panelui-native';
+
+import AppTabs from '@/components/app-tabs';
+
+export default function RootLayout() {
+  const colorScheme = useColorScheme();
 
-export default function App() {
   return (
     <PanelUIProvider>
-      <Card>
-        <Card.Header>
-          <Card.Title>Create project</Card.Title>
-          <Card.Description>Deploy your new project in one click.</Card.Description>
-        </Card.Header>
-        <Card.Footer>
-          <Button>Deploy</Button>
-        </Card.Footer>
-      </Card>
+      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+        <AppTabs />
+      </ThemeProvider>
     </PanelUIProvider>
   );
 }
 ```
 
+That navigation theme paints over PanelUI's background once you switch themes — see
+[Using Expo Router?](#using-expo-router-read-this) below for the version fed from live tokens.
+
 `PanelUIProvider` sets up the gesture root, the themed page background, the portal host used by
-overlays, and the toast viewport.
+overlays, and the toast viewport. One at the root is enough — don't nest a second.
+
+You do **not** need a `babel.config.js`; Expo's default preset already wires the worklets plugin
+Reanimated needs.
+
+### 5. Restart
+
+```sh
+npx expo start --clear
+```
+
+Metro reads `metro.config.js`, `global.css` and `extraThemes` once, at startup. After changing any
+of them, stop the dev server and start it again — `--clear` on a running one is not enough.
+
+```tsx
+import { Button, Card } from 'panelui-native';
+
+<Card>
+  <Card.Header>
+    <Card.Title>It works</Card.Title>
+    <Card.Description>PanelUI is installed and themed.</Card.Description>
+  </Card.Header>
+  <Card.Footer>
+    <Button>Deploy</Button>
+  </Card.Footer>
+</Card>;
+```
+
+A themed background, a card with a border and radius, and a button that dips when pressed means
+you are done. Unstyled text on a white screen means the styles are not reaching the bundle — see
+[Troubleshooting](https://panelui.dev/docs/installation#troubleshooting).
 
 ## Components
 
@@ -246,6 +317,25 @@ the named themes, which the OS `Appearance` API knows nothing about. For the sam
 
 ## FAQ
 
+### The first bundle fails with `Unable to resolve module …`
+
+A required package is missing. Run the [install command](#1-install-the-packages) again — all of
+it, not just the package named in the error. Metro resolves every import in the library, so this
+happens even for components you never use.
+
+### `Cannot use @variant with unknown variant: moon` when building
+
+Fixed in 0.22.5 — upgrade with `npx expo install panelui-native`. Before that release the Moon and
+Grass token blocks leaned on variants that only existed in the artifact Uniwind generates from your
+Metro config, so the dev server worked while `npx expo export` and EAS builds failed.
+
+### None of my classes do anything
+
+In order of likelihood: `metro.config.js` is not in the project root; it does not wrap the config
+in `withUniwindConfig`; `cssEntryFile` does not point at your CSS file; `import './global.css'` is
+missing from the entry file; or the dev server was running when you changed one of those. Full
+list at [Troubleshooting](https://panelui.dev/docs/installation#troubleshooting).
+
 ### How is PanelUI different from NativeWind?
 
 NativeWind is a styling engine; PanelUI is a component library. PanelUI is built on **Uniwind**,

package/lib/module/components/input/index.js

@@ -52,21 +52,31 @@ const inputVariants = tv({
       }
     },
     size: {
+      /*
+       * The font size is given as a length rather than through a `text-*`
+       * step, because those set a size and a line height together — 16px text
+       * in a 24px line box. The extra leading lands above the glyphs, so in a
+       * field of fixed height the text and the placeholder end up sitting
+       * below the middle of the box, a few pixels off whatever is beside them.
+       * A length sets the size alone and leaves the line box the font's own.
+       */
       sm: {
-        field: 'h-10 px-3 text-sm'
+        field: 'h-10 px-3 text-[14px]'
       },
       md: {
-        field: 'h-12 px-3.5 text-base'
+        field: 'h-12 px-3.5 text-[16px]'
       },
       lg: {
-        field: 'h-14 px-4 text-base'
+        field: 'h-14 px-4 text-[16px]'
       }
     },
     multiline: {
       // A multiline field grows, so a fixed height would crop it. Text starts
-      // at the top rather than floating in the middle of an empty box.
+      // at the top rather than floating in the middle of an empty box — and
+      // once there are several lines the leading is wanted back, since here it
+      // separates the lines instead of pushing one off centre.
       true: {
-        field: 'h-auto min-h-24 py-3'
+        field: 'h-auto min-h-24 py-3 leading-normal'
       }
     },
     disabled: {

package/lib/module/components/input/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useCallback","useEffect","useState","TextInput","View","Animated","interpolateColor","useAnimatedStyle","useSharedValue","withTiming","tv","useCSSVariable","KeyboardAvoider","Text","Label","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FOCUS_DURATION","inputVariants","slots","container","field","description","error","variants","variant","outline","filled","size","sm","md","lg","multiline","true","disabled","defaultVariants","AnimatedTextInput","createAnimatedComponent","Input","className","containerClassName","label","errorMessage","isRequired","avoidKeyboard","keyboardMode","keyboardOffset","keyboardBottomInset","onFocus","onBlur","style","props","ref","focused","setFocused","invalid","placeholderColor","restColor","focusColor","errorColor","focus","value","duration","resting","active","idle","borderStyle","borderColor","handleFocus","event","handleBlur","body","children","isInvalid","isDisabled","editable","accessibilityLabel","accessibilityState","placeholderTextColor","undefined","containerClasses","mode","offset","bottomInset","displayName"],"sourceRoot":"../../../../src","sources":["components/input/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["forwardRef","useCallback","useEffect","useState","TextInput","View","Animated","interpolateColor","useAnimatedStyle","useSharedValue","withTiming","tv","useCSSVariable","KeyboardAvoider","Text","Label","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","FOCUS_DURATION","inputVariants","slots","container","field","description","error","variants","variant","outline","filled","size","sm","md","lg","multiline","true","disabled","defaultVariants","AnimatedTextInput","createAnimatedComponent","Input","className","containerClassName","label","errorMessage","isRequired","avoidKeyboard","keyboardMode","keyboardOffset","keyboardBottomInset","onFocus","onBlur","style","props","ref","focused","setFocused","invalid","placeholderColor","restColor","focusColor","errorColor","focus","value","duration","resting","active","idle","borderStyle","borderColor","handleFocus","event","handleBlur","body","children","isInvalid","isDisabled","editable","accessibilityLabel","accessibilityState","placeholderTextColor","undefined","containerClasses","mode","offset","bottomInset","displayName"],"sourceRoot":"../../../../src","sources":["components/input/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/number-input/index.js

@@ -0,0 +1,350 @@
+"use strict";
+
+/**
+ * NumberInput — a value stepped by two buttons or typed by hand.
+ *
+ * A number is not a slider: past a handful of steps, dragging to 47 is worse
+ * than tapping + a few times or just typing it. So the control keeps both
+ * doors open — a − and a + at the ends for nudging, and an editable field in
+ * the middle for jumping straight to a value — and reconciles them through a
+ * single clamped, step-snapped number.
+ *
+ * The two ends are not just tap targets. Hold one down and it repeats, after a
+ * short delay and then faster, the way a native stepper does — so walking from
+ * 0 to 200 is a press, not two hundred of them. The repeat reads the live
+ * value from a ref rather than a closure, so it never strides off a stale
+ * number.
+ *
+ * Typing is allowed to be briefly invalid — an empty field, a lone `-`, a
+ * trailing `.` — because clamping every keystroke fights the person mid-number.
+ * The field commits (parses, snaps, clamps) on blur, and falls back to the
+ * last good value when what is left cannot be read as a number.
+ *
+ * ```tsx
+ * <NumberInput defaultValue={1} min={0} max={10} />
+ * <NumberInput label="Quantity" value={qty} onValueChange={setQty} />
+ * ```
+ *
+ * Runs controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ */
+import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { MinusIcon, PlusIcon } from "../../icons/index.js";
+import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Text } from "../../primitives/text.js";
+import { selectionTick } from "../../utils/haptics.js";
+import { Label } from "../label/index.js";
+
+/** Wait before a held button starts repeating — a tap must not trip it. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const REPEAT_DELAY = 400;
+/** Interval between repeats once holding — fast enough to cover ground. */
+const REPEAT_INTERVAL = 80;
+const numberInputVariants = tv({
+  slots: {
+    container: 'w-full gap-1.5',
+    control: 'w-full flex-row items-center overflow-hidden rounded-lg border',
+    button: 'h-full items-center justify-center',
+    // The field takes the full height so the digits centre against the same
+    // box the two glyphs do, rather than against their own line's height.
+    field: 'h-full flex-1 text-center font-medium text-foreground',
+    description: 'text-sm text-muted-foreground',
+    error: 'text-sm text-destructive'
+  },
+  variants: {
+    variant: {
+      // Matches Input: outline draws its own edge on the page; filled sits
+      // inside a card, where a second border reads as a seam.
+      outline: {
+        control: 'border-input bg-background'
+      },
+      filled: {
+        control: 'border-transparent bg-muted'
+      }
+    },
+    size: {
+      sm: {
+        control: 'h-10',
+        button: 'w-10'
+      },
+      md: {
+        control: 'h-12',
+        button: 'w-12'
+      },
+      lg: {
+        control: 'h-14',
+        button: 'w-14'
+      }
+    },
+    invalid: {
+      true: {
+        control: 'border-destructive'
+      }
+    },
+    disabled: {
+      true: {
+        container: 'opacity-[0.64]'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'outline',
+    size: 'md'
+  }
+});
+
+/** Icon size per control size — the glyph scales with its target. */
+const ICON_SIZE = {
+  sm: 16,
+  md: 18,
+  lg: 20
+};
+
+/**
+ * The field's job is not to be a box of its own: it has to put the number on
+ * exactly the axis the − and the + sit on, and in the exact middle between
+ * them. An editable field does not do that unhelped — it arrives with padding
+ * and, on Android, with font padding above and below the line, all of which
+ * shift the digits off centre. Zeroing both and centring the line in the full
+ * height leaves geometry as the only thing placing the number.
+ *
+ * Tabular figures on top of that, so the digits keep the same advance widths
+ * while the value counts — a 1 that is narrower than a 7 makes a centred
+ * number appear to shuffle sideways as it steps.
+ */
+const FIELD_BASE = {
+  paddingVertical: 0,
+  paddingHorizontal: 0,
+  includeFontPadding: false,
+  textAlignVertical: 'center',
+  fontVariant: ['tabular-nums']
+};
+
+/**
+ * Font size is set here rather than by a text class because those bring a line
+ * height with them: a 16px number in a 24px line box. The extra leading is
+ * added above the digits, so centring that box leaves the number sitting a
+ * couple of pixels below the − and the + it is meant to line up with — close
+ * enough to look like a mistake rather than a difference. Sized this way the
+ * line box is the font's own, and centring it centres the digits.
+ */
+const FIELD_STYLE = {
+  sm: {
+    ...FIELD_BASE,
+    fontSize: 14
+  },
+  md: {
+    ...FIELD_BASE,
+    fontSize: 16
+  },
+  lg: {
+    ...FIELD_BASE,
+    fontSize: 16
+  }
+};
+/** Decimals implied by `step`, so display and math round to the same place. */
+function precisionOf(step) {
+  if (!isFinite(step)) return 0;
+  const s = String(step);
+  const dot = s.indexOf('.');
+  return dot === -1 ? 0 : s.length - dot - 1;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * Snaps to the nearest step from a finite base (or 0 when `min` is open), then
+ * rounds to the step's precision so 0.1 + 0.2 does not drift to 0.30000004.
+ */
+function normalize(value, min, max, step) {
+  const base = isFinite(min) ? min : 0;
+  const snapped = isFinite(step) && step > 0 ? Math.round((value - base) / step) * step + base : value;
+  const p = precisionOf(step);
+  const factor = 10 ** p;
+  return clamp(Math.round(snapped * factor) / factor, min, max);
+}
+
+/**
+ * A number stepped by buttons or typed by hand, reconciled to one clamped,
+ * step-snapped value. See the file header for why it keeps both affordances.
+ */
+export const NumberInput = /*#__PURE__*/forwardRef(({
+  className,
+  containerClassName,
+  value: controlledValue,
+  defaultValue,
+  min = -Infinity,
+  max = Infinity,
+  step = 1,
+  onValueChange,
+  formatValue,
+  editable = true,
+  variant = 'outline',
+  size = 'md',
+  disabled,
+  label,
+  description,
+  errorMessage,
+  isRequired,
+  haptics,
+  placeholder,
+  onFocus,
+  onBlur,
+  returnKeyType
+}, ref) => {
+  const isControlled = controlledValue !== undefined;
+  const initial = normalize(controlledValue ?? defaultValue ?? (isFinite(min) ? min : 0), min, max, step);
+  const [uncontrolled, setUncontrolled] = useState(initial);
+  const value = isControlled ? normalize(controlledValue, min, max, step) : uncontrolled;
+
+  // The repeat timers read the live value through a ref, so a held button
+  // keeps counting from where it is rather than from the value it closed over.
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const invalid = !!errorMessage;
+  const foreground = useCSSVariable('--color-foreground');
+  const iconColor = typeof foreground === 'string' ? foreground : undefined;
+  const slots = numberInputVariants({
+    variant,
+    size,
+    invalid,
+    disabled: !!disabled
+  });
+  const format = useCallback(v => formatValue ? formatValue(v) : String(v), [formatValue]);
+
+  // `text` is what the field shows while focused; it is allowed to be
+  // half-typed. Away from focus it always mirrors the committed value.
+  const [text, setText] = useState(() => format(value));
+  const [focused, setFocused] = useState(false);
+  useEffect(() => {
+    if (!focused) setText(format(value));
+  }, [value, focused, format]);
+  const commit = useCallback((next, tick) => {
+    const clamped = normalize(next, min, max, step);
+    if (tick && haptics) selectionTick();
+    if (!isControlled) setUncontrolled(clamped);
+    if (clamped !== value) onValueChange?.(clamped);
+  }, [min, max, step, haptics, isControlled, value, onValueChange]);
+
+  // --- hold-to-repeat -----------------------------------------------------
+  const delayRef = useRef(null);
+  const intervalRef = useRef(null);
+  const stopRepeat = useCallback(() => {
+    if (delayRef.current) clearTimeout(delayRef.current);
+    if (intervalRef.current) clearInterval(intervalRef.current);
+    delayRef.current = null;
+    intervalRef.current = null;
+  }, []);
+  useEffect(() => stopRepeat, [stopRepeat]);
+  const startRepeat = useCallback(direction => {
+    const nudge = () => commit(valueRef.current + direction * step, true);
+    nudge();
+    delayRef.current = setTimeout(() => {
+      intervalRef.current = setInterval(nudge, REPEAT_INTERVAL);
+    }, REPEAT_DELAY);
+  }, [commit, step]);
+  const atMin = value <= min;
+  const atMax = value >= max;
+  const handleEndEditing = useCallback(() => {
+    const parsed = parseFloat(text);
+    // An empty or unreadable field falls back to the last good value rather
+    // than snapping to a surprising 0.
+    commit(Number.isNaN(parsed) ? value : parsed, false);
+    setFocused(false);
+    setText(format(Number.isNaN(parsed) ? value : normalize(parsed, min, max, step)));
+  }, [text, value, commit, format, min, max, step]);
+  return /*#__PURE__*/_jsxs(View, {
+    className: slots.container({
+      className: containerClassName
+    }),
+    children: [label ? /*#__PURE__*/_jsx(Label, {
+      isRequired: isRequired,
+      isInvalid: invalid,
+      isDisabled: !!disabled,
+      children: label
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      className: slots.control({
+        className
+      }),
+      children: [/*#__PURE__*/_jsx(AnimatedPressable, {
+        className: slots.button(),
+        disabled: disabled || atMin,
+        pressOpacity: 0.6,
+        onPressIn: () => {
+          if (!disabled && !atMin) startRepeat(-1);
+        },
+        onPressOut: stopRepeat,
+        accessibilityRole: "button",
+        accessibilityLabel: `Decrease ${label ?? 'value'}`,
+        accessibilityState: {
+          disabled: disabled || atMin
+        },
+        style: atMin ? {
+          opacity: 0.4
+        } : undefined,
+        children: /*#__PURE__*/_jsx(MinusIcon, {
+          size: ICON_SIZE[size],
+          color: iconColor,
+          strokeWidth: 2
+        })
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: ref,
+        editable: editable && !disabled,
+        value: text,
+        keyboardType: precisionOf(step) > 0 ? 'decimal-pad' : 'number-pad',
+        placeholder: placeholder,
+        returnKeyType: returnKeyType,
+        selectTextOnFocus: true,
+        onChangeText: setText,
+        onFocus: e => {
+          setFocused(true);
+          onFocus?.(e);
+        },
+        onBlur: e => {
+          handleEndEditing();
+          onBlur?.(e);
+        },
+        onSubmitEditing: handleEndEditing,
+        accessibilityLabel: label,
+        accessibilityState: {
+          disabled: !!disabled
+        },
+        "aria-required": isRequired,
+        "aria-invalid": invalid,
+        className: slots.field(),
+        style: FIELD_STYLE[size]
+      }), /*#__PURE__*/_jsx(AnimatedPressable, {
+        className: slots.button(),
+        disabled: disabled || atMax,
+        pressOpacity: 0.6,
+        onPressIn: () => {
+          if (!disabled && !atMax) startRepeat(1);
+        },
+        onPressOut: stopRepeat,
+        accessibilityRole: "button",
+        accessibilityLabel: `Increase ${label ?? 'value'}`,
+        accessibilityState: {
+          disabled: disabled || atMax
+        },
+        style: atMax ? {
+          opacity: 0.4
+        } : undefined,
+        children: /*#__PURE__*/_jsx(PlusIcon, {
+          size: ICON_SIZE[size],
+          color: iconColor
+        })
+      })]
+    }), errorMessage ? /*#__PURE__*/_jsx(Text, {
+      className: slots.error(),
+      children: errorMessage
+    }) : description ? /*#__PURE__*/_jsx(Text, {
+      className: slots.description(),
+      children: description
+    }) : null]
+  });
+});
+NumberInput.displayName = 'NumberInput';
+//# sourceMappingURL=index.js.map

package/lib/module/components/number-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useCallback","useEffect","useRef","useState","TextInput","View","tv","useCSSVariable","MinusIcon","PlusIcon","AnimatedPressable","Text","selectionTick","Label","jsx","_jsx","jsxs","_jsxs","REPEAT_DELAY","REPEAT_INTERVAL","numberInputVariants","slots","container","control","button","field","description","error","variants","variant","outline","filled","size","sm","md","lg","invalid","true","disabled","defaultVariants","ICON_SIZE","FIELD_BASE","paddingVertical","paddingHorizontal","includeFontPadding","textAlignVertical","fontVariant","FIELD_STYLE","fontSize","precisionOf","step","isFinite","s","String","dot","indexOf","length","clamp","value","min","max","Math","normalize","base","snapped","round","p","factor","NumberInput","className","containerClassName","controlledValue","defaultValue","Infinity","onValueChange","formatValue","editable","label","errorMessage","isRequired","haptics","placeholder","onFocus","onBlur","returnKeyType","ref","isControlled","undefined","initial","uncontrolled","setUncontrolled","valueRef","current","foreground","iconColor","format","v","text","setText","focused","setFocused","commit","next","tick","clamped","delayRef","intervalRef","stopRepeat","clearTimeout","clearInterval","startRepeat","direction","nudge","setTimeout","setInterval","atMin","atMax","handleEndEditing","parsed","parseFloat","Number","isNaN","children","isInvalid","isDisabled","pressOpacity","onPressIn","onPressOut","accessibilityRole","accessibilityLabel","accessibilityState","style","opacity","color","strokeWidth","keyboardType","selectTextOnFocus","onChangeText","e","onSubmitEditing","displayName"],"sourceRoot":"../../../../src","sources":["components/number-input/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/switch/index.js

@@ -5,6 +5,7 @@ import { Pressable, View } from 'react-native';
 import Animated, { interpolate, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { tv } from 'tailwind-variants';
 import { getNativeUI } from "../../native/index.js";
+import { selectionTick } from "../../utils/haptics.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPRING = {
   damping: 18,
@@ -53,7 +54,8 @@ export const Switch = /*#__PURE__*/forwardRef(({
   disabled,
   size = 'md',
   native,
-  label
+  label,
+  haptics
 }, ref) => {
   const progress = useSharedValue(value ? 1 : 0);
   const nativeUI = native ? getNativeUI() : null;
@@ -102,7 +104,10 @@ export const Switch = /*#__PURE__*/forwardRef(({
       disabled: !!disabled
     },
     disabled: disabled,
-    onPress: () => onValueChange?.(!value),
+    onPress: () => {
+      if (haptics) selectionTick();
+      onValueChange?.(!value);
+    },
     hitSlop: 8,
     children: /*#__PURE__*/_jsxs(View, {
       className: slots.track({