@xaui/native 0.9.1-alpha.4 → 0.9.1-alpha.41

package/dist/chunk-EZEYMLO3.js

@@ -0,0 +1,402 @@
+import {
+  useAnchorRef
+} from "./chunk-734MFAX4.js";
+import {
+  useAnchoredPosition
+} from "./chunk-2EGR4LWD.js";
+import {
+  Portal
+} from "./chunk-2PMXMKS5.js";
+import {
+  anchoredEntering,
+  anchoredExiting,
+  overlayEntering,
+  overlayExiting
+} from "./chunk-64MXEVT3.js";
+import {
+  useMergedRef
+} from "./chunk-NCTOTTVW.js";
+import {
+  useControllableState
+} from "./chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "./chunk-6UEZJRVI.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  createSlotContext
+} from "./chunk-K72UDPVN.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/popover/popover-close.tsx
+import { forwardRef, useCallback } from "react";
+
+// src/components/popover/popover.context.ts
+var [PopoverProvider, usePopover] = createSlotContext("Popover");
+
+// src/components/popover/popover-close.tsx
+import { jsx } from "react/jsx-runtime";
+var PopoverClose = forwardRef(
+  function PopoverClose2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { close } = usePopover();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    const handlePress = useCallback(
+      (event) => {
+        onPress?.(event);
+        close();
+      },
+      [close, onPress]
+    );
+    return /* @__PURE__ */ jsx(
+      PressableFeedback,
+      {
+        ref,
+        isPressed,
+        asChild,
+        accessibilityRole,
+        ...rest,
+        style: [
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    );
+  }
+);
+PopoverClose.displayName = "XAUI.Popover.Close";
+
+// src/components/popover/popover-content.tsx
+import { forwardRef as forwardRef2 } from "react";
+import Animated from "react-native-reanimated";
+
+// src/components/popover/popover.recipe.ts
+var SLOTS = ["trigger", "overlay", "content", "title", "description"];
+function popoverMeasure(fontSize) {
+  return fontSize * 13;
+}
+var popoverRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    overlay: { position: "absolute", top: 0, bottom: 0, start: 0, end: 0 },
+    content: {
+      position: "absolute",
+      backgroundColor: theme.colors.overlay,
+      // HeroUI's twelve by sixteen: a panel is read, not scanned, so it is wider-padded
+      // than it is tall-padded.
+      paddingVertical: theme.spacing(3),
+      paddingHorizontal: theme.spacing(4),
+      // Their `--radius-3xl` on a base of 8 is 24 points; our base is 12, so the same 24
+      // is `2xl`. Reading their key rather than their number puts a pill on it.
+      borderRadius: theme.radius["2xl"],
+      borderCurve: "continuous",
+      gap: theme.spacing(1.5),
+      ...theme.shadows.overlay
+    },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      fontSize: theme.fontSizes.lg,
+      lineHeight: theme.lineHeights.lg,
+      color: theme.colors.overlayForeground
+    },
+    description: {
+      fontFamily: theme.fontFamilies.body,
+      fontSize: theme.fontSizes.md,
+      lineHeight: theme.lineHeights.md,
+      color: theme.colors.muted
+    }
+  }),
+  variantTokens: { default: {} },
+  variants: { radius: radiusAxis("content") },
+  states: {
+    disabled: (theme) => ({ trigger: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "default" }
+});
+
+// src/components/popover/popover-content.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DEFAULT_OFFSET = 9;
+var DEFAULT_INSETS = {
+  top: 12,
+  bottom: 12,
+  start: 12,
+  end: 12
+};
+var PopoverContent = forwardRef2(
+  function PopoverContent2({
+    children,
+    placement = "bottom",
+    align = "center",
+    width = "content-fit",
+    offset = DEFAULT_OFFSET,
+    alignOffset = 0,
+    avoidCollisions = true,
+    insets,
+    style,
+    onLayout,
+    ...props
+  }, ref) {
+    const context = usePopover();
+    const { contentStyle, isOpen, anchor } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    const theme = useXAUITheme();
+    const { position, onContentLayout, measuringStyle } = useAnchoredPosition({
+      anchor,
+      isOpen,
+      placement,
+      align,
+      width,
+      offset,
+      alignOffset,
+      avoidCollisions,
+      insets: { ...DEFAULT_INSETS, ...insets },
+      maxWidth: popoverMeasure(theme.fontSizes.md),
+      onLayout
+    });
+    if (!isOpen || anchor === null) return null;
+    return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(PopoverProvider, { value: context, children: /* @__PURE__ */ jsx2(
+      Animated.View,
+      {
+        ref,
+        entering: position ? anchoredEntering(position.placement) : void 0,
+        exiting: position ? anchoredExiting(position.placement) : void 0,
+        onLayout: onContentLayout,
+        ...rest,
+        style: [
+          contentStyle,
+          position === null ? measuringStyle : {
+            top: position.top,
+            start: position.start,
+            width: position.width,
+            maxHeight: position.maxHeight
+          },
+          styleProps,
+          style
+        ],
+        children
+      },
+      position?.placement ?? "measuring"
+    ) }) });
+  }
+);
+PopoverContent.displayName = "XAUI.Popover.Content";
+
+// src/components/popover/popover-description.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var PopoverDescription = forwardRef3(
+  function PopoverDescription2({ children, style, ...props }, ref) {
+    const { descriptionStyle } = usePopover();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(Text, { ref, ...rest, style: [descriptionStyle, styleProps, style], children });
+  }
+);
+PopoverDescription.displayName = "XAUI.Popover.Description";
+
+// src/components/popover/popover-overlay.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Pressable } from "react-native";
+import Animated2 from "react-native-reanimated";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AnimatedPressable = Animated2.createAnimatedComponent(Pressable);
+var PopoverOverlay = forwardRef4(
+  function PopoverOverlay2({ children, isDismissable = true, style, ...props }, ref) {
+    const context = usePopover();
+    const { overlayStyle, isOpen, close } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsx4(PopoverProvider, { value: context, children: /* @__PURE__ */ jsx4(
+      AnimatedPressable,
+      {
+        ref,
+        entering: overlayEntering,
+        exiting: overlayExiting,
+        accessibilityRole: "none",
+        importantForAccessibility: "no",
+        onPress: isDismissable ? close : void 0,
+        ...rest,
+        style: [overlayStyle, styleProps, style],
+        children
+      }
+    ) }) });
+  }
+);
+PopoverOverlay.displayName = "XAUI.Popover.Overlay";
+
+// src/components/popover/popover-title.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var PopoverTitle = forwardRef5(
+  function PopoverTitle2({ children, accessibilityRole = "header", style, ...props }, ref) {
+    const { titleStyle } = usePopover();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx5(
+      Text2,
+      {
+        ref,
+        accessibilityRole,
+        ...rest,
+        style: [titleStyle, styleProps, style],
+        children
+      }
+    );
+  }
+);
+PopoverTitle.displayName = "XAUI.Popover.Title";
+
+// src/components/popover/popover-trigger.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback2 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var PopoverTrigger = forwardRef6(
+  function PopoverTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onLayout,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { triggerStyle, isOpen, isDisabled, toggle, setAnchor } = usePopover();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    const anchor = useAnchorRef({ isOpen, onAnchor: setAnchor, onLayout });
+    const refs = useMergedRef(anchor.node, ref);
+    const handlePress = useCallback2(
+      (event) => {
+        onPress?.(event);
+        anchor.measure();
+        toggle();
+      },
+      [anchor, onPress, toggle]
+    );
+    return /* @__PURE__ */ jsx6(
+      PressableFeedback,
+      {
+        ref: refs,
+        isPressed,
+        isDisabled,
+        asChild,
+        accessibilityRole,
+        accessibilityState: {
+          disabled: isDisabled,
+          expanded: isOpen,
+          ...accessibilityState
+        },
+        ...rest,
+        onLayout: anchor.onLayout,
+        style: [
+          triggerStyle,
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    );
+  }
+);
+PopoverTrigger.displayName = "XAUI.Popover.Trigger";
+
+// src/components/popover/popover.tsx
+import { useCallback as useCallback3, useMemo, useState } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Popover({
+  children,
+  radius,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false
+}) {
+  const theme = useXAUITheme();
+  const [anchor, setAnchor] = useState(null);
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const styles = popoverRecipe.resolve({
+    theme,
+    selection: { radius },
+    states: { disabled: isDisabled }
+  });
+  const open = useCallback3(() => setOpen(true), [setOpen]);
+  const close = useCallback3(() => setOpen(false), [setOpen]);
+  const toggle = useCallback3(() => setOpen((current) => !current), [setOpen]);
+  const context = useMemo(
+    () => ({
+      triggerStyle: styles.trigger,
+      overlayStyle: styles.overlay,
+      contentStyle: styles.content,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      isOpen,
+      isDisabled,
+      open,
+      close,
+      toggle,
+      anchor,
+      setAnchor
+    }),
+    [styles, isOpen, isDisabled, open, close, toggle, anchor]
+  );
+  return /* @__PURE__ */ jsx7(PopoverProvider, { value: context, children });
+}
+Popover.displayName = "XAUI.Popover.Root";
+
+// src/components/popover/index.ts
+var Popover2 = Object.assign(Popover, {
+  Trigger: PopoverTrigger,
+  Overlay: PopoverOverlay,
+  Content: PopoverContent,
+  Title: PopoverTitle,
+  Description: PopoverDescription,
+  Close: PopoverClose
+});
+
+export {
+  usePopover,
+  PopoverClose,
+  popoverRecipe,
+  PopoverContent,
+  PopoverDescription,
+  PopoverOverlay,
+  PopoverTitle,
+  PopoverTrigger,
+  Popover,
+  Popover2
+};

package/dist/chunk-F6CQ6CBI.cjs

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(obj) {
+  return obj && obj.__esModule ? obj : {
+    default: obj
+  };
+} // src/system/selection-fill/selection-fill.tsx
+var _reactnative = require('react-native');
+var _reactnativereanimated = require('react-native-reanimated');
+var _reactnativereanimated2 = _interopRequireDefault(_reactnativereanimated);
+var _jsxruntime = require('react/jsx-runtime');
+var DURATION = 120;
+var FROM_SCALE = 0.8;
+function SelectionFill({
+  isVisible,
+  style,
+  animation = true,
+  children
+}) {
+  if (!animation) {
+    return isVisible ? /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnative.View, {
+      style,
+      children
+    }) : null;
+  }
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, AnimatedFill, {
+    isVisible,
+    style,
+    children
+  });
+}
+SelectionFill.displayName = "XAUI.SelectionFill";
+const _worklet_11674708088880_init_data = {
+  code: "function chunkF6CQ6CBICjs1(){const{_reactnativereanimated,isVisible,DURATION}=this.__closure;return _reactnativereanimated.withTiming.call(void 0,isVisible?1:0,{duration:DURATION});}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-F6CQ6CBI.cjs",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkF6CQ6CBICjs1\",\"_reactnativereanimated\",\"isVisible\",\"DURATION\",\"__closure\",\"withTiming\",\"call\",\"duration\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-F6CQ6CBI.cjs\"],\"mappings\":\"AA2BuE,SAAAA,iBAAMA,CAAA,QAAAC,sBAAA,CAAAC,SAAA,CAAAC,QAAA,OAAAC,SAAA,CAEzE,MAAO,CAAAH,sBAAsB,CAACI,UAAU,CAACC,IAAI,CAAC,IAAK,EAAC,CAAEJ,SAAS,CAAG,CAAC,CAAG,CAAC,CAAE,CAAEK,QAAQ,CAAEJ,QAAS,CAAC,CAAC,CAClG\",\"ignoreList\":[]}"
+};
+const _worklet_9756080511809_init_data = {
+  code: "function chunkF6CQ6CBICjs2(){const{progress,FROM_SCALE}=this.__closure;return{opacity:progress.value,transform:[{scale:FROM_SCALE+(1-FROM_SCALE)*progress.value}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-F6CQ6CBI.cjs",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkF6CQ6CBICjs2\",\"progress\",\"FROM_SCALE\",\"__closure\",\"opacity\",\"value\",\"transform\",\"scale\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-F6CQ6CBI.cjs\"],\"mappings\":\"AA+B6E,SAAAA,iBAAMA,CAAA,QAAAC,QAAA,CAAAC,UAAA,OAAAC,SAAA,CAE/E,MAAO,CACLC,OAAO,CAAEH,QAAQ,CAACI,KAAK,CACvBC,SAAS,CAAE,CAAC,CAAEC,KAAK,CAAEL,UAAU,CAAG,CAAC,CAAC,CAAGA,UAAU,EAAID,QAAQ,CAACI,KAAM,CAAC,CACvE,CAAC,CACH\",\"ignoreList\":[]}"
+};
+function AnimatedFill({
+  isVisible,
+  style,
+  children
+}) {
+  const progress = _reactnativereanimated.useDerivedValue.call(void 0, function chunkF6CQ6CBICjs1Factory({
+    _worklet_11674708088880_init_data,
+    _reactnativereanimated,
+    isVisible,
+    DURATION
+  }) {
+    const _e = [new global.Error(), -4, -27];
+    const chunkF6CQ6CBICjs1 = function () {
+      return _reactnativereanimated.withTiming.call(void 0, isVisible ? 1 : 0, {
+        duration: DURATION
+      });
+    };
+    chunkF6CQ6CBICjs1.__closure = {
+      _reactnativereanimated,
+      isVisible,
+      DURATION
+    };
+    chunkF6CQ6CBICjs1.__workletHash = 11674708088880;
+    chunkF6CQ6CBICjs1.__pluginVersion = "0.7.4";
+    chunkF6CQ6CBICjs1.__initData = _worklet_11674708088880_init_data;
+    chunkF6CQ6CBICjs1.__stackDetails = _e;
+    return chunkF6CQ6CBICjs1;
+  }({
+    _worklet_11674708088880_init_data,
+    _reactnativereanimated,
+    isVisible,
+    DURATION
+  }), [isVisible]);
+  const animatedStyle = _reactnativereanimated.useAnimatedStyle.call(void 0, function chunkF6CQ6CBICjs2Factory({
+    _worklet_9756080511809_init_data,
+    progress,
+    FROM_SCALE
+  }) {
+    const _e = [new global.Error(), -3, -27];
+    const chunkF6CQ6CBICjs2 = function () {
+      return {
+        opacity: progress.value,
+        transform: [{
+          scale: FROM_SCALE + (1 - FROM_SCALE) * progress.value
+        }]
+      };
+    };
+    chunkF6CQ6CBICjs2.__closure = {
+      progress,
+      FROM_SCALE
+    };
+    chunkF6CQ6CBICjs2.__workletHash = 9756080511809;
+    chunkF6CQ6CBICjs2.__pluginVersion = "0.7.4";
+    chunkF6CQ6CBICjs2.__initData = _worklet_9756080511809_init_data;
+    chunkF6CQ6CBICjs2.__stackDetails = _e;
+    return chunkF6CQ6CBICjs2;
+  }({
+    _worklet_9756080511809_init_data,
+    progress,
+    FROM_SCALE
+  }), [progress]);
+  return /* @__PURE__ */_jsxruntime.jsx.call(void 0, _reactnativereanimated2.default.View, {
+    style: [style, animatedStyle],
+    children
+  });
+}
+exports.SelectionFill = SelectionFill;

package/dist/chunk-F6W3JQ7K.js

@@ -0,0 +1,42 @@
+import {
+  warnDev
+} from "./chunk-EGLLDKN6.js";
+
+// 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;
+  }
+}
+
+export {
+  useControllableState
+};

package/dist/chunk-FHUYHV6J.js

@@ -0,0 +1,89 @@
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/system/icon/chevron-down-icon.tsx
+import { Path, Svg } from "react-native-svg";
+import { jsx } from "react/jsx-runtime";
+function ChevronDownIcon({
+  size = 20,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
+    Path,
+    {
+      d: "m6 9 6 6 6-6",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+ChevronDownIcon.displayName = "XAUI.ChevronDownIcon";
+
+// src/system/icon/icon-context.ts
+import { createContext, useContext } from "react";
+var IconContext = createContext({});
+IconContext.displayName = "XAUI.Icon.Context";
+function useIconContext() {
+  return useContext(IconContext);
+}
+
+// src/system/icon/icon.tsx
+import { cloneElement, isValidElement } from "react";
+import { Image } from "react-native";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function Icon(props) {
+  const inherited = useIconContext();
+  const theme = useXAUITheme();
+  const size = props.size ?? inherited.size ?? theme.fontSizes.md;
+  const color = props.color ?? inherited.color ?? theme.colors.foreground;
+  if (props.as) {
+    const Component = props.as;
+    return /* @__PURE__ */ jsx2(Component, { size, color });
+  }
+  if (isValidElement(props.children)) {
+    return cloneElement(props.children, {
+      width: size,
+      height: size,
+      color
+    });
+  }
+  if (props.source) return /* @__PURE__ */ jsx2(IconImage, { ...props, resolved: { size, color } });
+  throw new Error(
+    "XAUI: Icon needs one of `as` (an icon component), a raw SVG element as its child, or `source` (an image). It renders nothing on its own."
+  );
+}
+Icon.displayName = "XAUI.Icon";
+function IconImage({
+  source,
+  style,
+  resolved,
+  size: _size,
+  color: _color,
+  ...props
+}) {
+  const [styleProps] = useStyleProps(props);
+  return /* @__PURE__ */ jsx2(
+    Image,
+    {
+      source,
+      style: [
+        { width: resolved.size, height: resolved.size, tintColor: resolved.color },
+        styleProps,
+        style
+      ]
+    }
+  );
+}
+
+export {
+  ChevronDownIcon,
+  IconContext,
+  useIconContext,
+  Icon
+};