@xleddyl/443-components-native 0.0.0-stage → 0.1.0

package/lib/module/components/forms/PinPad.js

@@ -0,0 +1,147 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { disabledOpacity } from "../../utils/styles.js";
+import { renderIcon } from "../core/Icon.js";
+import { Text } from "../core/Text.js";
+import { Touchable } from "../core/Touchable.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const keyOffset = {
+  sm: 4,
+  md: 20,
+  lg: 32
+};
+const keySize = (theme, size) => theme.components.pinPad?.keySize?.[size] ?? theme.sizes.control.lg + keyOffset[size];
+const keyIconSize = (theme, size) => Math.round(keySize(theme, size) * 0.36);
+const DIGIT_ROWS = [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9']];
+export const PinPadKey = ({
+  children,
+  icon,
+  size = 'md',
+  disabled,
+  style,
+  labelStyle,
+  accessibilityRole = 'button',
+  ...props
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  return /*#__PURE__*/_jsxs(Touchable, {
+    haptic: "light",
+    accessibilityRole: accessibilityRole,
+    disabled: disabled,
+    ...props,
+    style: [stylesheet.key(size, !!disabled), style],
+    children: [icon ? renderIcon(icon, {
+      size: keyIconSize(theme, size),
+      color: theme.colors.text
+    }) : null, typeof children === 'string' || typeof children === 'number' ? /*#__PURE__*/_jsx(Text, {
+      variant: size === 'sm' ? 'heading' : 'title',
+      style: labelStyle,
+      children: children
+    }) : children]
+  });
+};
+export const PinPad = ({
+  ref,
+  value,
+  defaultValue = '',
+  onValueChange,
+  onComplete,
+  maxLength,
+  size = 'md',
+  disabled = false,
+  leftKey,
+  rightKey,
+  deleteLabel = 'Delete',
+  style,
+  styles
+}) => {
+  const [entered, setEntered] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onValueChange
+  });
+  const append = digit => {
+    if (maxLength !== undefined && entered.length >= maxLength) {
+      return;
+    }
+    const next = entered + digit;
+    setEntered(next);
+    if (maxLength !== undefined && next.length === maxLength) {
+      onComplete?.(next);
+    }
+  };
+  const removeLast = () => {
+    if (entered.length > 0) {
+      setEntered(entered.slice(0, -1));
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [stylesheet.container, style, styles?.container],
+    children: [DIGIT_ROWS.map(row => /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.row, styles?.row],
+      children: row.map(digit => /*#__PURE__*/_jsx(PinPadKey, {
+        size: size,
+        disabled: disabled,
+        accessibilityLabel: digit,
+        onPress: () => append(digit),
+        style: styles?.key,
+        labelStyle: styles?.keyLabel,
+        children: digit
+      }, digit))
+    }, row.join(''))), /*#__PURE__*/_jsxs(View, {
+      style: [stylesheet.row, styles?.row],
+      children: [leftKey ?? /*#__PURE__*/_jsx(View, {
+        style: stylesheet.spacer(size)
+      }), /*#__PURE__*/_jsx(PinPadKey, {
+        size: size,
+        disabled: disabled,
+        accessibilityLabel: "0",
+        onPress: () => append('0'),
+        style: styles?.key,
+        labelStyle: styles?.keyLabel,
+        children: "0"
+      }), rightKey ?? /*#__PURE__*/_jsx(PinPadKey, {
+        size: size,
+        disabled: disabled || entered.length === 0,
+        accessibilityLabel: deleteLabel,
+        onPress: removeLast,
+        icon: "backspace",
+        style: [stylesheet.ghostKey, styles?.key]
+      })]
+    })]
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: {
+    alignSelf: 'center',
+    gap: theme.space(1.5)
+  },
+  row: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: theme.space(2)
+  },
+  key: (size, disabled) => ({
+    width: keySize(theme, size),
+    height: keySize(theme, size),
+    borderRadius: theme.radius.full,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: theme.colors.surfaceSunken,
+    opacity: disabledOpacity(theme, disabled)
+  }),
+  ghostKey: {
+    backgroundColor: 'transparent'
+  },
+  spacer: size => ({
+    width: keySize(theme, size),
+    height: keySize(theme, size)
+  })
+}));
+//# sourceMappingURL=PinPad.js.map

package/lib/module/components/forms/PinPad.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","useUnistyles","useControllableState","disabledOpacity","renderIcon","Text","Touchable","jsx","_jsx","jsxs","_jsxs","keyOffset","sm","md","lg","keySize","theme","size","components","pinPad","sizes","control","keyIconSize","Math","round","DIGIT_ROWS","PinPadKey","children","icon","disabled","style","labelStyle","accessibilityRole","props","haptic","stylesheet","key","color","colors","text","variant","PinPad","ref","value","defaultValue","onValueChange","onComplete","maxLength","leftKey","rightKey","deleteLabel","styles","entered","setEntered","onChange","append","digit","undefined","length","next","removeLast","slice","container","map","row","accessibilityLabel","onPress","keyLabel","join","spacer","ghostKey","create","alignSelf","gap","space","flexDirection","justifyContent","width","height","borderRadius","radius","full","alignItems","backgroundColor","surfaceSunken","opacity"],"sourceRoot":"../../../../src","sources":["components/forms/PinPad.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/forms/Radio.js

@@ -0,0 +1,95 @@
+"use strict";
+
+import { View } from 'react-native';
+import Animated, { useAnimatedStyle } from 'react-native-reanimated';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useToggleProgress } from "../../hooks/useToggleProgress.js";
+import { toneColors } from "../../theme/tones.js";
+import { textLabel } from "../../utils/a11y.js";
+import { hitSlopFor } from "../../utils/hitSlop.js";
+import { Touchable } from "../core/Touchable.js";
+import { ControlLabel } from "./ControlLabel.js";
+import { useRadioGroup } from "./radioGroupContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const circleSize = (theme, size) => theme.sizes.icon[size] + 2;
+export const Radio = ({
+  ref,
+  value,
+  label,
+  description,
+  accessibilityLabel,
+  disabled = false,
+  size: sizeProp,
+  tone: toneProp,
+  style,
+  styles
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  const group = useRadioGroup();
+  const size = sizeProp ?? group?.size ?? 'md';
+  const tone = toneProp ?? group?.tone ?? 'primary';
+  const selected = group?.value === value;
+  const isDisabled = disabled || !!group?.disabled;
+  const progress = useToggleProgress(selected);
+  const dimension = circleSize(theme, size);
+  const dotStyle = useAnimatedStyle(() => ({
+    opacity: Math.min(1, progress.value),
+    transform: [{
+      scale: Math.max(0, progress.value)
+    }]
+  }));
+  return /*#__PURE__*/_jsxs(Touchable, {
+    ref: ref,
+    feedback: "opacity",
+    haptic: "selection",
+    accessibilityRole: "radio",
+    accessibilityLabel: accessibilityLabel ?? textLabel(label),
+    accessibilityState: {
+      disabled: isDisabled,
+      checked: selected,
+      selected
+    },
+    disabled: isDisabled,
+    onPress: () => group?.select(value),
+    hitSlop: hitSlopFor(dimension, dimension, theme.sizes.minTouchTarget),
+    style: [stylesheet.container, style, styles?.container],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [stylesheet.circle(size, selected, tone), styles?.circle],
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: [stylesheet.dot(size, tone), dotStyle, styles?.dot]
+      })
+    }), /*#__PURE__*/_jsx(ControlLabel, {
+      label: label,
+      description: description,
+      style: styles?.content,
+      labelStyle: styles?.label,
+      descriptionStyle: styles?.description
+    })]
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.space(1.25)
+  },
+  circle: (size, selected, tone) => ({
+    width: circleSize(theme, size),
+    height: circleSize(theme, size),
+    borderRadius: theme.radius.full,
+    borderWidth: theme.sizes.borderWidth * 1.5,
+    borderColor: selected ? toneColors(theme, tone).solid : theme.colors.borderStrong,
+    backgroundColor: theme.colors.surface,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }),
+  dot: (size, tone) => ({
+    width: circleSize(theme, size) / 2,
+    height: circleSize(theme, size) / 2,
+    borderRadius: theme.radius.full,
+    backgroundColor: toneColors(theme, tone).solid
+  })
+}));
+//# sourceMappingURL=Radio.js.map

package/lib/module/components/forms/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Animated","useAnimatedStyle","StyleSheet","useUnistyles","useToggleProgress","toneColors","textLabel","hitSlopFor","Touchable","ControlLabel","useRadioGroup","jsx","_jsx","jsxs","_jsxs","circleSize","theme","size","sizes","icon","Radio","ref","value","label","description","accessibilityLabel","disabled","sizeProp","tone","toneProp","style","styles","group","selected","isDisabled","progress","dimension","dotStyle","opacity","Math","min","transform","scale","max","feedback","haptic","accessibilityRole","accessibilityState","checked","onPress","select","hitSlop","minTouchTarget","stylesheet","container","children","circle","dot","content","labelStyle","descriptionStyle","create","flexDirection","alignItems","gap","space","width","height","borderRadius","radius","full","borderWidth","borderColor","solid","colors","borderStrong","backgroundColor","surface","justifyContent"],"sourceRoot":"../../../../src","sources":["components/forms/Radio.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/forms/RadioGroup.js

@@ -0,0 +1,59 @@
+"use strict";
+
+import { View } from 'react-native';
+import { StyleSheet } from 'react-native-unistyles';
+import { useControllableState, whenPresent } from "../../hooks/useControllableState.js";
+import { groupLayout } from "./groupLayout.js";
+import { fieldAccessibility, useFieldContext } from "./fieldContext.js";
+import { Radio } from "./Radio.js";
+import { RadioGroupContext } from "./radioGroupContext.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const RadioGroup = ({
+  ref,
+  value,
+  defaultValue,
+  onValueChange,
+  options,
+  children,
+  orientation = 'vertical',
+  disabled = false,
+  size,
+  tone,
+  accessibilityLabel,
+  style
+}) => {
+  const field = useFieldContext();
+  const [selected, setSelected] = useControllableState({
+    value,
+    defaultValue,
+    onChange: whenPresent(onValueChange)
+  });
+  return /*#__PURE__*/_jsx(RadioGroupContext, {
+    value: {
+      value: selected,
+      select: setSelected,
+      disabled: disabled || !!field?.disabled,
+      size,
+      tone
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      accessibilityRole: "radiogroup",
+      accessibilityLabel: accessibilityLabel,
+      ...fieldAccessibility(field),
+      style: [stylesheet.container(orientation), style],
+      children: options ? options.map(option => /*#__PURE__*/_jsx(Radio, {
+        value: option.value,
+        label: option.label,
+        description: option.description,
+        disabled: option.disabled
+      }, option.value)) : children
+    })
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: orientation => ({
+    ...groupLayout(theme, orientation)
+  })
+}));
+//# sourceMappingURL=RadioGroup.js.map

package/lib/module/components/forms/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","useControllableState","whenPresent","groupLayout","fieldAccessibility","useFieldContext","Radio","RadioGroupContext","jsx","_jsx","RadioGroup","ref","value","defaultValue","onValueChange","options","children","orientation","disabled","size","tone","accessibilityLabel","style","field","selected","setSelected","onChange","select","accessibilityRole","stylesheet","container","map","option","label","description","create","theme"],"sourceRoot":"../../../../src","sources":["components/forms/RadioGroup.tsx"],"mappings":";;AACA,SAASA,IAAI,QAAQ,cAAc;AAEnC,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,oBAAoB,EAAEC,WAAW,QAAQ,qCAAkC;AAEpF,SAASC,WAAW,QAAQ,kBAAe;AAE3C,SAASC,kBAAkB,EAAEC,eAAe,QAAQ,mBAAgB;AACpE,SAASC,KAAK,QAAQ,YAAS;AAC/B,SAASC,iBAAiB,QAAQ,wBAAqB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwBvD,OAAO,MAAMC,UAAU,GAAGA,CAAC;EACxBC,GAAG;EACHC,KAAK;EACLC,YAAY;EACZC,aAAa;EACbC,OAAO;EACPC,QAAQ;EACRC,WAAW,GAAG,UAAU;EACxBC,QAAQ,GAAG,KAAK;EAChBC,IAAI;EACJC,IAAI;EACJC,kBAAkB;EAClBC;AACc,CAAC,KAAK;EACpB,MAAMC,KAAK,GAAGlB,eAAe,CAAC,CAAC;EAC/B,MAAM,CAACmB,QAAQ,EAAEC,WAAW,CAAC,GAAGxB,oBAAoB,CAAqB;IACtEW,KAAK;IACLC,YAAY;IACZa,QAAQ,EAAExB,WAAW,CAACY,aAAa;EACtC,CAAC,CAAC;EAEF,oBACGL,IAAA,CAACF,iBAAiB;IACfK,KAAK,EAAE;MACJA,KAAK,EAAEY,QAAQ;MACfG,MAAM,EAAEF,WAAW;MACnBP,QAAQ,EAAEA,QAAQ,IAAI,CAAC,CAACK,KAAK,EAAEL,QAAQ;MACvCC,IAAI;MACJC;IACH,CAAE;IAAAJ,QAAA,eAEFP,IAAA,CAACV,IAAI;MACFY,GAAG,EAAEA,GAAI;MACTiB,iBAAiB,EAAC,YAAY;MAC9BP,kBAAkB,EAAEA,kBAAmB;MAAA,GACnCjB,kBAAkB,CAACmB,KAAK,CAAC;MAC7BD,KAAK,EAAE,CAACO,UAAU,CAACC,SAAS,CAACb,WAAW,CAAC,EAAEK,KAAK,CAAE;MAAAN,QAAA,EAEjDD,OAAO,GACHA,OAAO,CAACgB,GAAG,CAAEC,MAAM,iBAChBvB,IAAA,CAACH,KAAK;QAEHM,KAAK,EAAEoB,MAAM,CAACpB,KAAM;QACpBqB,KAAK,EAAED,MAAM,CAACC,KAAM;QACpBC,WAAW,EAAEF,MAAM,CAACE,WAAY;QAChChB,QAAQ,EAAEc,MAAM,CAACd;MAAS,GAJrBc,MAAM,CAACpB,KAKd,CACH,CAAC,GACFI;IAAQ,CACV;EAAC,CACS,CAAC;AAE1B,CAAC;AAED,MAAMa,UAAU,GAAG7B,UAAU,CAACmC,MAAM,CAAEC,KAAK,KAAM;EAC9CN,SAAS,EAAGb,WAA6B,KAAM;IAC5C,GAAGd,WAAW,CAACiC,KAAK,EAAEnB,WAAW;EACpC,CAAC;AACJ,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/components/forms/SegmentedControl.js

@@ -0,0 +1,124 @@
+"use strict";
+
+import { View } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useControllableState, whenPresent } from "../../hooks/useControllableState.js";
+import { useItemLayouts, useSlidingIndicator } from "../../hooks/useSlidingIndicator.js";
+import { disabledOpacity, nativeShadow } from "../../utils/styles.js";
+import { renderIcon } from "../core/Icon.js";
+import { Text } from "../core/Text.js";
+import { Touchable } from "../core/Touchable.js";
+import { fieldAccessibility, useFieldControl } from "./fieldContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PADDING = 3;
+const segmentHeight = (theme, size) => theme.sizes.control[size] - PADDING * 2;
+export const SegmentedControl = ({
+  ref,
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  size = 'md',
+  fullWidth = true,
+  disabled = false,
+  accessibilityLabel,
+  style,
+  styles
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  const control = useFieldControl({
+    disabled
+  });
+  const [selected, setSelected] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? options[0]?.value,
+    onChange: whenPresent(onValueChange)
+  });
+  const [segments, handleSegmentLayout] = useItemLayouts();
+  const selectedOption = options.find(option => option.value === selected) ?? options[0];
+  const selectedLayout = selectedOption ? segments[selectedOption.value] : undefined;
+  const indicatorStyle = useSlidingIndicator(selectedLayout, -PADDING);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    accessibilityRole: "radiogroup",
+    accessibilityLabel: accessibilityLabel,
+    ...fieldAccessibility(control.field),
+    style: [stylesheet.container(size, fullWidth, control.disabled), style, styles?.container],
+    children: [selectedLayout ? /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [stylesheet.indicator(size), indicatorStyle, styles?.indicator]
+    }) : null, options.map(option => {
+      const active = option.value === selected;
+      const optionDisabled = control.disabled || !!option.disabled;
+      const color = active ? theme.colors.text : theme.colors.textMuted;
+      return /*#__PURE__*/_jsxs(Touchable, {
+        feedback: control.disabled ? 'none' : 'opacity',
+        haptic: "selection",
+        accessibilityRole: "radio",
+        accessibilityLabel: option.label,
+        accessibilityState: {
+          checked: active,
+          selected: active,
+          disabled: optionDisabled
+        },
+        disabled: optionDisabled,
+        onPress: () => setSelected(option.value),
+        onLayout: event => handleSegmentLayout(option.value, event),
+        style: [stylesheet.segment(size, fullWidth), styles?.segment],
+        children: [renderIcon(option.icon, {
+          size: size === 'lg' ? 'md' : 'sm',
+          color
+        }), /*#__PURE__*/_jsx(Text, {
+          variant: "label",
+          weight: active ? 'semibold' : 'medium',
+          numberOfLines: 1,
+          style: [stylesheet.label(color), styles?.label],
+          children: option.label
+        })]
+      }, option.value);
+    })]
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: (size, fullWidth, disabled) => ({
+    flexDirection: 'row',
+    alignSelf: fullWidth ? 'stretch' : 'flex-start',
+    height: theme.sizes.control[size],
+    padding: PADDING,
+    borderRadius: theme.radius.md,
+    backgroundColor: theme.colors.surfaceSunken,
+    opacity: disabledOpacity(theme, disabled)
+  }),
+  indicator: size => ({
+    position: 'absolute',
+    top: PADDING,
+    left: PADDING,
+    height: segmentHeight(theme, size),
+    borderRadius: theme.radius.md - PADDING,
+    backgroundColor: theme.colors.surfaceRaised,
+    borderWidth: theme.sizes.borderWidth,
+    borderColor: theme.colors.border,
+    ...nativeShadow(theme, {
+      opacity: 0.12,
+      elevation: 1
+    })
+  }),
+  segment: (size, fullWidth) => ({
+    flexGrow: fullWidth ? 1 : 0,
+    flexShrink: fullWidth ? 1 : 0,
+    flexBasis: fullWidth ? 0 : 'auto',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: theme.space(0.75),
+    height: segmentHeight(theme, size),
+    paddingHorizontal: theme.space(1)
+  }),
+  label: color => ({
+    color
+  })
+}));
+//# sourceMappingURL=SegmentedControl.js.map

package/lib/module/components/forms/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["View","Animated","StyleSheet","useUnistyles","useControllableState","whenPresent","useItemLayouts","useSlidingIndicator","disabledOpacity","nativeShadow","renderIcon","Text","Touchable","fieldAccessibility","useFieldControl","jsx","_jsx","jsxs","_jsxs","PADDING","segmentHeight","theme","size","sizes","control","SegmentedControl","ref","options","value","defaultValue","onValueChange","fullWidth","disabled","accessibilityLabel","style","styles","selected","setSelected","onChange","segments","handleSegmentLayout","selectedOption","find","option","selectedLayout","undefined","indicatorStyle","accessibilityRole","field","stylesheet","container","children","pointerEvents","indicator","map","active","optionDisabled","color","colors","text","textMuted","feedback","haptic","label","accessibilityState","checked","onPress","onLayout","event","segment","icon","variant","weight","numberOfLines","create","flexDirection","alignSelf","height","padding","borderRadius","radius","md","backgroundColor","surfaceSunken","opacity","position","top","left","surfaceRaised","borderWidth","borderColor","border","elevation","flexGrow","flexShrink","flexBasis","alignItems","justifyContent","gap","space","paddingHorizontal"],"sourceRoot":"../../../../src","sources":["components/forms/SegmentedControl.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,188 @@
+"use strict";
+
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+import { scheduleOnRN } from 'react-native-worklets';
+import { StyleSheet, useUnistyles } from 'react-native-unistyles';
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { toneColors } from "../../theme/tones.js";
+import { adjustableActions } from "../../utils/a11y.js";
+import { clamp, clampRatio, snapToStep } from "../../utils/math.js";
+import { disabledOpacity, nativeShadow } from "../../utils/styles.js";
+import { fieldAccessibility, useFieldControl } from "./fieldContext.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const thumbDiameter = (theme, size) => theme.sizes.icon[size] + 6;
+const trackThickness = (theme, size) => Math.round(theme.sizes.icon[size] / 3);
+export const Slider = ({
+  ref,
+  value,
+  defaultValue,
+  onValueChange,
+  onSlidingComplete,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = 'md',
+  tone = 'primary',
+  disabled = false,
+  accessibilityLabel,
+  style,
+  styles
+}) => {
+  const {
+    theme
+  } = useUnistyles();
+  const reducedMotion = useReducedMotion();
+  const control = useFieldControl({
+    disabled
+  });
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? min,
+    onChange: onValueChange
+  });
+  const thumb = thumbDiameter(theme, size);
+  const range = max - min;
+  const ratioOf = next => {
+    'worklet';
+
+    return range === 0 ? 0 : (next - min) / range;
+  };
+  const progress = useSharedValue(ratioOf(current));
+  const innerWidth = useSharedValue(0);
+  const dragging = useSharedValue(false);
+  const lastCommitted = useSharedValue(current);
+  const settleDuration = reducedMotion ? 0 : theme.motion.duration.fast;
+  const commit = next => {
+    setCurrent(next);
+  };
+  const complete = next => {
+    onSlidingComplete?.(next);
+  };
+  const ratioAt = x => {
+    'worklet';
+
+    return clampRatio((x - thumb / 2) / innerWidth.value);
+  };
+  const valueAt = ratio => {
+    'worklet';
+
+    return snapToStep(min + ratio * range, min, max, step);
+  };
+  const gesture = Gesture.Race(Gesture.Pan().enabled(!control.disabled).activeOffsetX([-6, 6]).failOffsetY([-14, 14]).onBegin(event => {
+    dragging.value = true;
+    progress.value = ratioAt(event.x);
+  }).onUpdate(event => {
+    const ratio = ratioAt(event.x);
+    progress.value = ratio;
+    const stepped = valueAt(ratio);
+    if (stepped !== lastCommitted.value) {
+      lastCommitted.value = stepped;
+      scheduleOnRN(commit, stepped);
+    }
+  }).onFinalize(() => {
+    dragging.value = false;
+    const stepped = valueAt(progress.value);
+    progress.value = withTiming(ratioOf(stepped), {
+      duration: settleDuration
+    });
+    scheduleOnRN(complete, stepped);
+  }), Gesture.Tap().enabled(!control.disabled).onEnd(event => {
+    const stepped = valueAt(ratioAt(event.x));
+    progress.value = withTiming(ratioOf(stepped), {
+      duration: settleDuration
+    });
+    lastCommitted.value = stepped;
+    scheduleOnRN(commit, stepped);
+    scheduleOnRN(complete, stepped);
+  }));
+  const handleLayout = event => {
+    innerWidth.value = Math.max(1, event.nativeEvent.layout.width - thumb);
+  };
+  useEffect(() => {
+    lastCommitted.value = current;
+    if (!dragging.value) {
+      progress.value = withTiming(ratioOf(current), {
+        duration: settleDuration
+      });
+    }
+  }, [current, min, range, progress, dragging, lastCommitted, settleDuration]);
+  const fillStyle = useAnimatedStyle(() => ({
+    width: progress.value * innerWidth.value + thumb / 2
+  }));
+  const thumbStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: progress.value * innerWidth.value
+    }]
+  }));
+  const adjust = direction => {
+    const next = clamp(current + direction * step, min, max);
+    setCurrent(next);
+    onSlidingComplete?.(next);
+  };
+  return /*#__PURE__*/_jsx(GestureDetector, {
+    gesture: gesture,
+    children: /*#__PURE__*/_jsxs(View, {
+      ref: ref,
+      onLayout: handleLayout,
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityValue: {
+        min,
+        max,
+        now: current
+      },
+      ...adjustableActions(adjust),
+      accessibilityState: {
+        disabled: control.disabled
+      },
+      ...fieldAccessibility(control.field),
+      style: [stylesheet.container(thumb, control.disabled), style, styles?.container],
+      children: [/*#__PURE__*/_jsx(View, {
+        style: [stylesheet.track(size), styles?.track],
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          style: [stylesheet.fill(size, tone), fillStyle, styles?.fill]
+        })
+      }), /*#__PURE__*/_jsx(Animated.View, {
+        style: [stylesheet.thumb(thumb, tone), thumbStyle, styles?.thumb]
+      })]
+    })
+  });
+};
+const stylesheet = StyleSheet.create(theme => ({
+  container: (thumb, disabled) => ({
+    height: Math.max(theme.sizes.minTouchTarget, thumb),
+    justifyContent: 'center',
+    alignSelf: 'stretch',
+    opacity: disabledOpacity(theme, disabled)
+  }),
+  track: size => ({
+    height: trackThickness(theme, size),
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.colors.surfaceSunken,
+    borderWidth: theme.sizes.borderWidth,
+    borderColor: theme.colors.border,
+    overflow: 'hidden'
+  }),
+  fill: (size, tone) => ({
+    height: trackThickness(theme, size),
+    backgroundColor: toneColors(theme, tone).solid
+  }),
+  thumb: (thumb, tone) => ({
+    position: 'absolute',
+    left: 0,
+    width: thumb,
+    height: thumb,
+    borderRadius: theme.radius.full,
+    backgroundColor: theme.colors.surface,
+    borderWidth: theme.sizes.borderWidth * 2,
+    borderColor: toneColors(theme, tone).solid,
+    ...nativeShadow(theme, {
+      opacity: 0.2
+    })
+  })
+}));
+//# sourceMappingURL=Slider.js.map