@xaui/native 0.9.1-alpha.22 → 0.9.1-alpha.24

package/dist/chunk-J4QE34AU.js

@@ -0,0 +1,732 @@
+import { warnDev } from "./chunk-EGLLDKN6.js";
+import { createRecipe, radiusAxis } from "./chunk-3JATAB7S.js";
+import { createSlotContext, useStyleProps } from "./chunk-PMO62QK4.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+
+// src/components/input-otp/input-otp-box.tsx
+import { forwardRef as forwardRef3, useMemo } from "react";
+import { View as View2 } from "react-native";
+
+// src/components/input-otp/input-otp.context.ts
+var [InputOTPProvider, useInputOTP] = createSlotContext("InputOTP");
+var [InputOTPBoxProvider, useInputOTPBox] = createSlotContext("InputOTP.Box");
+
+// src/components/input-otp/input-otp-caret.tsx
+import { useEffect } from "react";
+import { View } from "react-native";
+import Animated, { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
+import { jsx } from "react/jsx-runtime";
+var BLINK_DURATION = 530;
+function InputOTPCaret({
+  style,
+  animation = true,
+  ...props
+}) {
+  const {
+    caretStyle
+  } = useInputOTP();
+  const {
+    slot
+  } = useInputOTPBox();
+  const [styleProps] = useStyleProps(props);
+  const barStyle = [caretStyle, styleProps, style];
+  if (!slot?.isCaretVisible) return null;
+  if (!animation) return /* @__PURE__ */jsx(View, {
+    style: barStyle
+  });
+  return /* @__PURE__ */jsx(BlinkingCaret, {
+    style: barStyle
+  });
+}
+InputOTPCaret.displayName = "XAUI.InputOTP.Caret";
+const _worklet_14878605646981_init_data = {
+  code: "function chunkJ4QE34AUJs1(){const{opacity}=this.__closure;return{opacity:opacity.value};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-J4QE34AU.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkJ4QE34AUJs1\",\"opacity\",\"__closure\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-J4QE34AU.js\"],\"mappings\":\"AA4DyC,SAAAA,iBAAA,QAAAC,OAAA,OAAAC,SAAA,OAAO,CAAED,OAAO,CAAEA,OAAO,CAACE,KAAM,CAAC\",\"ignoreList\":[]}"
+};
+function BlinkingCaret({
+  style
+}) {
+  const opacity = useSharedValue(1);
+  useEffect(() => {
+    opacity.value = withRepeat(withTiming(0, {
+      duration: BLINK_DURATION,
+      easing: Easing.ease
+    }), -1, true);
+    return () => cancelAnimation(opacity);
+  }, [opacity]);
+  const animatedStyle = useAnimatedStyle(function chunkJ4QE34AUJs1Factory({
+    _worklet_14878605646981_init_data,
+    opacity
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkJ4QE34AUJs1 = () => ({
+      opacity: opacity.value
+    });
+    chunkJ4QE34AUJs1.__closure = {
+      opacity
+    };
+    chunkJ4QE34AUJs1.__workletHash = 14878605646981;
+    chunkJ4QE34AUJs1.__pluginVersion = "0.7.4";
+    chunkJ4QE34AUJs1.__initData = _worklet_14878605646981_init_data;
+    chunkJ4QE34AUJs1.__stackDetails = _e;
+    return chunkJ4QE34AUJs1;
+  }({
+    _worklet_14878605646981_init_data,
+    opacity
+  }));
+  return /* @__PURE__ */jsx(Animated.View, {
+    style: [style, animatedStyle]
+  });
+}
+
+// src/components/input-otp/input-otp-placeholder.tsx
+import { forwardRef } from "react";
+import { Text } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var InputOTPPlaceholder = forwardRef(function InputOTPPlaceholder2({
+  children,
+  style,
+  maxFontSizeMultiplier = 1.6,
+  ...props
+}, ref) {
+  const {
+    placeholderStyle
+  } = useInputOTP();
+  const {
+    slot
+  } = useInputOTPBox();
+  const [styleProps, rest] = useStyleProps(props);
+  const char = children ?? slot?.placeholderChar;
+  if (!char) return null;
+  return /* @__PURE__ */jsx2(Text, {
+    ref,
+    maxFontSizeMultiplier,
+    style: [placeholderStyle, styleProps, style],
+    ...rest,
+    children: char
+  });
+});
+InputOTPPlaceholder.displayName = "XAUI.InputOTP.Placeholder";
+
+// src/components/input-otp/input-otp-value.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var InputOTPValue = forwardRef2(function InputOTPValue2({
+  children,
+  style,
+  maxFontSizeMultiplier = 1.6,
+  ...props
+}, ref) {
+  const {
+    valueStyle
+  } = useInputOTP();
+  const {
+    slot
+  } = useInputOTPBox();
+  const [styleProps, rest] = useStyleProps(props);
+  const char = children ?? slot?.char;
+  if (!char) return null;
+  return /* @__PURE__ */jsx3(Text2, {
+    ref,
+    maxFontSizeMultiplier,
+    style: [valueStyle, styleProps, style],
+    ...rest,
+    children: char
+  });
+});
+InputOTPValue.displayName = "XAUI.InputOTP.Value";
+
+// src/components/input-otp/input-otp-box.tsx
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var InputOTPBox = forwardRef3(function InputOTPBox2({
+  index,
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    boxStyle,
+    boxActiveStyle,
+    slots
+  } = useInputOTP();
+  const [styleProps, rest] = useStyleProps(props);
+  const slot = slots[index];
+  const context = useMemo(() => ({
+    slot
+  }), [slot]);
+  return /* @__PURE__ */jsx4(InputOTPBoxProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx4(View2, {
+      ref,
+      style: [slot?.isActive ? boxActiveStyle : boxStyle, styleProps, style],
+      ...rest,
+      children: children ?? /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx4(InputOTPPlaceholder, {}), /* @__PURE__ */jsx4(InputOTPValue, {}), /* @__PURE__ */jsx4(InputOTPCaret, {})]
+      })
+    })
+  });
+});
+InputOTPBox.displayName = "XAUI.InputOTP.Box";
+
+// src/components/input-otp/input-otp-group.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { View as View3 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var InputOTPGroup = forwardRef4(function InputOTPGroup2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    groupStyle,
+    slots,
+    value,
+    maxLength,
+    isFocused,
+    isDisabled,
+    isInvalid
+  } = useInputOTP();
+  const [styleProps, rest] = useStyleProps(props);
+  const content = typeof children === "function" ? children({
+    slots,
+    value,
+    maxLength,
+    isFocused,
+    isDisabled,
+    isInvalid
+  }) : children;
+  return /* @__PURE__ */jsx5(View3, {
+    ref,
+    style: [groupStyle, styleProps, style],
+    ...rest,
+    children: content
+  });
+});
+InputOTPGroup.displayName = "XAUI.InputOTP.Group";
+
+// src/components/input-otp/input-otp-separator.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { View as View4 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var InputOTPSeparator = forwardRef5(function InputOTPSeparator2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    separatorStyle
+  } = useInputOTP();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx6(View4, {
+    ref,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    style: [separatorStyle, styleProps, style],
+    ...rest,
+    children
+  });
+});
+InputOTPSeparator.displayName = "XAUI.InputOTP.Separator";
+
+// src/components/input-otp/input-otp.tsx
+import { forwardRef as forwardRef6, useImperativeHandle, useMemo as useMemo3 } from "react";
+import { TextInput, View as View5 } from "react-native";
+
+// src/components/input-otp/input-otp.hook.ts
+import { useCallback as useCallback2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+
+// src/hooks/use-controllable-state.ts
+import { useCallback, useRef, useState } from "react";
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : uncontrolled;
+  useControlWarning(isControlled);
+  const latest = useRef(current);
+  latest.current = current;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const controlled = useRef(isControlled);
+  controlled.current = isControlled;
+  const set = useCallback(next => {
+    const resolved = typeof next === "function" ? next(latest.current) : next;
+    if (resolved === latest.current) return;
+    if (!controlled.current) setUncontrolled(resolved);
+    onChangeRef.current?.(resolved);
+  }, []);
+  return [current, set];
+}
+function useControlWarning(isControlled) {
+  const wasControlled = useRef(isControlled);
+  if (wasControlled.current !== isControlled) {
+    warnDev(`a component switched from ${wasControlled.current ? "controlled" : "uncontrolled"} to ${isControlled ? "controlled" : "uncontrolled"}. Decide for the life of the component: pass \`value\` always, or never. Passing \`undefined\` for a value you do control reads as "uncontrolled" here.`);
+    wasControlled.current = isControlled;
+  }
+}
+
+// src/components/input-otp/input-otp.utils.ts
+function buildSlots({
+  value,
+  maxLength,
+  isFocused,
+  placeholder
+}) {
+  return Array.from({
+    length: maxLength
+  }, (_, index) => {
+    const char = value[index] ?? null;
+    const isActive = isFocused && index === value.length;
+    return {
+      index,
+      char,
+      // A box shows its placeholder only when it has neither a character nor the caret.
+      placeholderChar: char === null && !isActive ? placeholderFor(placeholder, index) : null,
+      isActive,
+      isCaretVisible: isActive && char === null
+    };
+  });
+}
+function placeholderFor(placeholder, index) {
+  if (!placeholder) return null;
+  return placeholder.length === 1 ? placeholder : placeholder[index] ?? null;
+}
+function extractPastedCode(pasted, maxLength) {
+  const match = pasted.match(new RegExp(`(?<!\\d)(\\d{${maxLength}})(?!\\d)`));
+  return match?.[1] ?? "";
+}
+function isPaste(text, previous) {
+  return text.length > previous.length + 1;
+}
+var OTP_DIGITS = "^\\d+$";
+var OTP_LETTERS = "^[a-zA-Z]+$";
+var OTP_ALPHANUMERIC = "^[a-zA-Z0-9]+$";
+
+// src/components/input-otp/input-otp.hook.ts
+function useInputOTPState({
+  maxLength,
+  value: valueProp,
+  defaultValue = "",
+  onChangeText: onChangeTextProp,
+  onComplete,
+  pattern,
+  placeholder
+}) {
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue,
+    onChange: onChangeTextProp
+  });
+  const [isFocused, setIsFocused] = useState2(false);
+  const inputRef = useRef2(null);
+  const regexp = useMemo2(() => {
+    if (!pattern) return null;
+    return typeof pattern === "string" ? new RegExp(pattern) : pattern;
+  }, [pattern]);
+  const slots = useMemo2(() => buildSlots({
+    value,
+    maxLength,
+    isFocused,
+    placeholder
+  }), [value, maxLength, isFocused, placeholder]);
+  const latest = useRef2({
+    value,
+    maxLength,
+    regexp,
+    onComplete,
+    setValue
+  });
+  latest.current = {
+    value,
+    maxLength,
+    regexp,
+    onComplete,
+    setValue
+  };
+  const onChangeText = useCallback2(text => {
+    const current = latest.current;
+    const candidate = isPaste(text, current.value) ? extractPastedCode(text, current.maxLength) : text;
+    const next = candidate.slice(0, current.maxLength);
+    if (next.length > 0 && current.regexp && !current.regexp.test(next)) return;
+    current.setValue(next);
+    if (next.length === current.maxLength) current.onComplete?.(next);
+  }, []);
+  const onFocus = useCallback2(() => setIsFocused(true), []);
+  const onBlur = useCallback2(() => setIsFocused(false), []);
+  const handle = useMemo2(() => ({
+    focus: () => inputRef.current?.focus(),
+    blur: () => inputRef.current?.blur(),
+    // Both halves: the native buffer and our value. Clearing one and not the other is
+    // how a cleared field comes back on the next keystroke.
+    clear: () => {
+      inputRef.current?.clear();
+      latest.current.setValue("");
+    }
+  }), []);
+  return {
+    value,
+    slots,
+    isFocused,
+    inputRef,
+    handle,
+    onChangeText,
+    onFocus,
+    onBlur
+  };
+}
+
+// src/components/input-otp/input-otp.recipe.ts
+var SLOTS = ["root", "group", "box", "value", "placeholder", "caret", "separator"];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "fieldBackground",
+    border: "fieldBorder",
+    borderFocus: "accent",
+    fg: "fieldForeground"
+  },
+  secondary: {
+    bg: "default",
+    border: "fieldBorder",
+    borderFocus: "accent",
+    fg: "fieldForeground"
+  },
+  tertiary: {
+    border: "fieldBorder",
+    borderFocus: "accent",
+    fg: "fieldForeground"
+  }
+};
+var PLACEHOLDER_OPACITY = 0.5;
+var ACTIVE_BORDER_WIDTH = 2;
+function sizeAxis(step) {
+  const {
+    control,
+    gap,
+    glyph
+  } = step;
+  return theme => {
+    const height = theme.controlHeights[control];
+    const type = {
+      fontSize: theme.fontSizes[glyph],
+      lineHeight: theme.lineHeights[glyph]
+    };
+    return {
+      root: {
+        gap: theme.spacing(gap)
+      },
+      group: {
+        gap: theme.spacing(gap)
+      },
+      box: {
+        height,
+        width: height - theme.spacing(1)
+      },
+      value: type,
+      placeholder: type,
+      // As tall as the character it stands in for, so the box does not change shape
+      // between an empty state and a typed one.
+      caret: {
+        height: theme.lineHeights[glyph],
+        width: theme.spacing(CARET_WIDTH)
+      },
+      separator: {
+        height: theme.spacing(CARET_WIDTH),
+        width: theme.spacing(SEPARATOR_WIDTH)
+      }
+    };
+  };
+}
+var CARET_WIDTH = 0.5;
+var SEPARATOR_WIDTH = 2;
+var SIZES = {
+  sm: {
+    control: "sm",
+    gap: 2,
+    glyph: "md"
+  },
+  md: {
+    control: "md",
+    gap: 2,
+    glyph: "lg"
+  },
+  lg: {
+    control: "lg",
+    gap: 2.5,
+    glyph: "xl"
+  }
+};
+var inputOTPRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    root: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    group: {
+      flexDirection: "row",
+      alignItems: "center"
+    },
+    box: {
+      alignItems: "center",
+      justifyContent: "center",
+      // `lg` and not `field`, which is the radius the rest of this family uses. A field is
+      // wide, so 21 on a 48-tall one reads as a rounded rectangle; a code box is very
+      // nearly square — 44 by 48 at `md`, 36 by 40 at `sm` — where the geometric maximum
+      // is 22, so the same 21 is a pill in all but name and is clamped to one outright at
+      // the small end. Twelve is where HeroUI lands for the same box from the other
+      // direction: their `field` radius is their `xl`, and their scale's base is 8 where
+      // ours is 12.
+      borderRadius: theme.radius.lg,
+      borderCurve: "continuous",
+      // The one root in the library that clips: the box has no shadow to lose and a
+      // character wider than it would otherwise spill onto its neighbour.
+      overflow: "hidden"
+    },
+    // `semibold`, where a field's own text is `regular`. A code is read at a glance and
+    // then compared character by character, which is the one thing weight helps with.
+    value: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold
+    },
+    placeholder: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold,
+      color: theme.colors.fieldPlaceholder,
+      opacity: PLACEHOLDER_OPACITY
+    },
+    caret: {
+      position: "absolute",
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.colors.fieldPlaceholder
+    },
+    // The theme's second separator level rather than the first at half opacity: it is
+    // already the lighter of the two, and it composites the same way in both modes.
+    separator: {
+      borderRadius: theme.radius.full,
+      backgroundColor: theme.colors.separatorSecondary
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land. The border width follows the *presence* of the
+   * border role, so a variant that names none needs no rule of its own to say so.
+   *
+   * The active box takes the ring whichever variant it is: the `focused` state sets the
+   * width as well as the colour. The box has a fixed width and height and centres what it
+   * holds, so an edge appearing moves nothing.
+   */
+  paint: (theme, colors) => ({
+    box: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.field : 0
+    },
+    value: {
+      color: colors.fg
+    }
+  }),
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("box"),
+    /**
+     * Declared after `size` and before the states, so a code that is wrong stays wrong
+     * under the finger: the ring below reads `borderFocus`, and the root hands it the
+     * danger colour by suppressing the active state and painting every box instead.
+     */
+    isInvalid: {
+      true: theme => ({
+        box: {
+          borderColor: theme.colors.danger,
+          borderWidth: ACTIVE_BORDER_WIDTH
+        }
+      })
+    }
+  },
+  compoundVariants: [{
+    when: {
+      variant: "primary"
+    },
+    style: theme => ({
+      box: theme.shadows.field
+    })
+  }],
+  /**
+   * `focused` here means **this box is the active one**, not that the component has the
+   * keyboard: the root resolves the recipe twice, once each way, and hands both to the
+   * boxes so none of them resolves anything itself (R5).
+   */
+  states: {
+    focused: (_theme, colors) => ({
+      box: {
+        borderColor: colors.borderFocus,
+        borderWidth: ACTIVE_BORDER_WIDTH
+      }
+    }),
+    disabled: theme => ({
+      root: {
+        opacity: theme.opacity.disabled
+      }
+    })
+  },
+  defaultVariants: {
+    variant: "secondary",
+    size: "md"
+  }
+});
+
+// src/components/input-otp/input-otp.style.ts
+import { Platform, StyleSheet } from "react-native";
+var inputOTPSheet = StyleSheet.create({
+  hiddenInput: {
+    ...StyleSheet.absoluteFillObject,
+    color: "transparent",
+    // A caret of our own is drawn in the active box; the platform's would sit wherever
+    // the invisible text happens to end.
+    ...Platform.select({
+      ios: {
+        opacity: 0.02
+      },
+      default: {
+        opacity: 0
+      }
+    })
+  }
+});
+
+// src/components/input-otp/input-otp.tsx
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+var InputOTPRoot = forwardRef6(function InputOTP({
+  children,
+  maxLength,
+  variant,
+  size,
+  radius,
+  color,
+  value: valueProp,
+  defaultValue,
+  onChangeText,
+  onComplete,
+  pattern,
+  placeholder,
+  isInvalid = false,
+  isDisabled = false,
+  inputMode = "numeric",
+  textInputProps,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const state = useInputOTPState({
+    maxLength,
+    value: valueProp,
+    defaultValue,
+    onChangeText,
+    onComplete,
+    pattern,
+    placeholder
+  });
+  useImperativeHandle(ref, () => state.handle, [state.handle]);
+  const selection = {
+    variant,
+    size,
+    radius,
+    isInvalid: isInvalid ? "true" : void 0
+  };
+  const states = {
+    disabled: isDisabled
+  };
+  const styles = inputOTPRecipe.resolve({
+    theme,
+    selection,
+    states
+  });
+  const activeStyles = isInvalid ? styles : inputOTPRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      ...states,
+      focused: true
+    }
+  });
+  const tint = color ? inputOTPRecipe.tint({
+    theme,
+    color,
+    selection,
+    states
+  }) : void 0;
+  const activeTint = color && !isInvalid ? inputOTPRecipe.tint({
+    theme,
+    color,
+    selection,
+    states: {
+      ...states,
+      focused: true
+    }
+  }) : tint;
+  const context = useMemo3(() => ({
+    groupStyle: styles.group,
+    boxStyle: tint ? [styles.box, tint.box] : styles.box,
+    boxActiveStyle: activeTint ? [activeStyles.box, activeTint.box] : activeStyles.box,
+    valueStyle: tint ? [styles.value, tint.value] : styles.value,
+    placeholderStyle: styles.placeholder,
+    caretStyle: styles.caret,
+    separatorStyle: styles.separator,
+    slots: state.slots,
+    value: state.value,
+    maxLength,
+    isFocused: state.isFocused,
+    isDisabled,
+    isInvalid,
+    inputRef: state.inputRef
+  }), [styles, activeStyles, tint, activeTint, state.slots, state.value, state.isFocused, state.inputRef, maxLength, isDisabled, isInvalid]);
+  return /* @__PURE__ */jsx7(InputOTPProvider, {
+    value: context,
+    children: /* @__PURE__ */jsxs2(View5, {
+      style: [styles.root, tint?.root, styleProps, style],
+      ...rest,
+      children: [children, /* @__PURE__ */jsx7(TextInput, {
+        ref: state.inputRef,
+        style: inputOTPSheet.hiddenInput,
+        value: state.value,
+        onChangeText: state.onChangeText,
+        onFocus: state.onFocus,
+        onBlur: state.onBlur,
+        editable: !isDisabled,
+        inputMode,
+        caretHidden: true,
+        autoComplete: "one-time-code",
+        textContentType: "oneTimeCode",
+        accessibilityLabel: `${maxLength}-character code`,
+        accessibilityState: {
+          disabled: isDisabled
+        },
+        accessibilityValue: {
+          text: `${state.value.length} of ${maxLength} entered`
+        },
+        ...textInputProps
+      })]
+    })
+  });
+});
+InputOTPRoot.displayName = "XAUI.InputOTP.Root";
+
+// src/components/input-otp/index.ts
+var InputOTP2 = Object.assign(InputOTPRoot, {
+  Group: InputOTPGroup,
+  Box: InputOTPBox,
+  Value: InputOTPValue,
+  Placeholder: InputOTPPlaceholder,
+  Caret: InputOTPCaret,
+  Separator: InputOTPSeparator
+});
+export { useInputOTP, useInputOTPBox, useControllableState, buildSlots, extractPastedCode, OTP_DIGITS, OTP_LETTERS, OTP_ALPHANUMERIC, inputOTPRecipe, InputOTP2 as InputOTP };