@xaui/native 0.9.1-alpha.42 → 0.9.1-alpha.43

package/dist/chunk-J5WXI5NU.js

@@ -0,0 +1,520 @@
+import { Portal } from "./chunk-2PMXMKS5.js";
+import { overlayEntering, overlayExiting } from "./chunk-64MXEVT3.js";
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { PressableFeedback } from "./chunk-LIUO6D3D.js";
+import { usePressState } from "./chunk-423RQBOX.js";
+import { createSlotContext } from "./chunk-K72UDPVN.js";
+import { createRecipe } from "./chunk-4GTAZM2C.js";
+import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+import { useStyleProps } from "./chunk-M63GFNKV.js";
+
+// src/components/bottom-sheet/bottom-sheet-close.tsx
+import { forwardRef, useCallback } from "react";
+
+// src/components/bottom-sheet/bottom-sheet.context.ts
+var [BottomSheetProvider, useBottomSheet] = createSlotContext("BottomSheet");
+
+// src/components/bottom-sheet/bottom-sheet-close.tsx
+import { jsx } from "react/jsx-runtime";
+var BottomSheetClose = forwardRef(function BottomSheetClose2({
+  children,
+  asChild = false,
+  accessibilityRole = "button",
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    close
+  } = useBottomSheet();
+  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
+  });
+});
+BottomSheetClose.displayName = "XAUI.BottomSheet.Close";
+
+// src/components/bottom-sheet/bottom-sheet-content.tsx
+import { useCallback as useCallback2, useEffect, useState } from "react";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+
+// src/components/bottom-sheet/bottom-sheet.animation.ts
+var SHEET_SPRING = {
+  damping: 28,
+  stiffness: 260,
+  mass: 0.9
+};
+var DISMISS_VELOCITY = 900;
+
+// src/components/bottom-sheet/bottom-sheet-content.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+const _worklet_77790971326_init_data = {
+  code: "function chunkJ5WXI5NUJs1(event){const{height,dismissThreshold,DISMISS_VELOCITY,offset,withSpring,SHEET_SPRING,runOnJS,close}=this.__closure;const farEnough=event.translationY>height*dismissThreshold;const fastEnough=event.velocityY>DISMISS_VELOCITY;if(farEnough||fastEnough){offset.set(withSpring(height,SHEET_SPRING));runOnJS(close)();return;}offset.set(withSpring(0,SHEET_SPRING));}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-J5WXI5NU.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkJ5WXI5NUJs1\",\"event\",\"height\",\"dismissThreshold\",\"DISMISS_VELOCITY\",\"offset\",\"withSpring\",\"SHEET_SPRING\",\"runOnJS\",\"close\",\"__closure\",\"farEnough\",\"translationY\",\"fastEnough\",\"velocityY\",\"set\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-J5WXI5NU.js\"],\"mappings\":\"AA0HY,SAAAA,gBAAUA,CAAAC,KAAA,QAAAC,MAAA,CAAAC,gBAAA,CAAAC,gBAAA,CAAAC,MAAA,CAAAC,UAAA,CAAAC,YAAA,CAAAC,OAAA,CAAAC,KAAA,OAAAC,SAAA,CAClB,KAAM,CAAAC,SAAS,CAAGV,KAAK,CAACW,YAAY,CAAGV,MAAM,CAAGC,gBAAgB,CAChE,KAAM,CAAAU,UAAU,CAAGZ,KAAK,CAACa,SAAS,CAAGV,gBAAgB,CACrD,GAAIO,SAAS,EAAIE,UAAU,CAAE,CAC3BR,MAAM,CAACU,GAAG,CAACT,UAAU,CAACJ,MAAM,CAAEK,YAAY,CAAC,CAAC,CAC5CC,OAAO,CAACC,KAAK,CAAC,CAAC,CAAC,CAChB,OACF,CACAJ,MAAM,CAACU,GAAG,CAACT,UAAU,CAAC,CAAC,CAAEC,YAAY,CAAC,CAAC,CACzC\",\"ignoreList\":[]}"
+};
+const _worklet_12195044952804_init_data = {
+  code: "function chunkJ5WXI5NUJs2(event){const{offset}=this.__closure;offset.set(Math.max(event.translationY,0));}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-J5WXI5NU.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkJ5WXI5NUJs2\",\"event\",\"offset\",\"__closure\",\"set\",\"Math\",\"max\",\"translationY\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-J5WXI5NU.js\"],\"mappings\":\"AAwH2D,SAAAA,gBAAUA,CAAAC,KAAA,QAAAC,MAAA,OAAAC,SAAA,CACjED,MAAM,CAACE,GAAG,CAACC,IAAI,CAACC,GAAG,CAACL,KAAK,CAACM,YAAY,CAAE,CAAC,CAAC,CAAC,CAC7C\",\"ignoreList\":[]}"
+};
+const _worklet_15404457517253_init_data = {
+  code: "function chunkJ5WXI5NUJs3(){const{offset}=this.__closure;return{transform:[{translateY:offset.get()}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-J5WXI5NU.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkJ5WXI5NUJs3\",\"offset\",\"__closure\",\"transform\",\"translateY\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-J5WXI5NU.js\"],\"mappings\":\"AAoIiC,SAAAA,iBAAA,QAAAC,MAAA,OAAAC,SAAA,OAAO,CACpCC,SAAS,CAAE,CAAC,CAAEC,UAAU,CAAEH,MAAM,CAACI,GAAG,CAAC,CAAE,CAAC,CAC1C,CAAC\",\"ignoreList\":[]}"
+};
+function BottomSheetContent({
+  children,
+  isSwipeable = true,
+  accessibilityViewIsModal = true,
+  style,
+  onLayout,
+  ...props
+}) {
+  const context = useBottomSheet();
+  const {
+    contentStyle,
+    isOpen,
+    dismissThreshold,
+    close
+  } = context;
+  const [styleProps, rest] = useStyleProps(props);
+  const [height, setHeight] = useState(0);
+  const offset = useSharedValue(OFFSCREEN);
+  const measure = useCallback2(event => {
+    onLayout?.(event);
+    setHeight(event.nativeEvent.layout.height);
+  }, [onLayout]);
+  useEffect(() => {
+    if (height === 0) return;
+    offset.set(withSpring(isOpen ? 0 : height, SHEET_SPRING));
+  }, [height, isOpen, offset]);
+  const pan = Gesture.Pan().enabled(isSwipeable).onUpdate(function chunkJ5WXI5NUJs2Factory({
+    _worklet_12195044952804_init_data,
+    offset
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkJ5WXI5NUJs2 = function (event) {
+      offset.set(Math.max(event.translationY, 0));
+    };
+    chunkJ5WXI5NUJs2.__closure = {
+      offset
+    };
+    chunkJ5WXI5NUJs2.__workletHash = 12195044952804;
+    chunkJ5WXI5NUJs2.__pluginVersion = "0.7.4";
+    chunkJ5WXI5NUJs2.__initData = _worklet_12195044952804_init_data;
+    chunkJ5WXI5NUJs2.__stackDetails = _e;
+    return chunkJ5WXI5NUJs2;
+  }({
+    _worklet_12195044952804_init_data,
+    offset
+  })).onEnd(function chunkJ5WXI5NUJs1Factory({
+    _worklet_77790971326_init_data,
+    height,
+    dismissThreshold,
+    DISMISS_VELOCITY,
+    offset,
+    withSpring,
+    SHEET_SPRING,
+    runOnJS,
+    close
+  }) {
+    const _e = [new global.Error(), -9, -27];
+    const chunkJ5WXI5NUJs1 = function (event) {
+      const farEnough = event.translationY > height * dismissThreshold;
+      const fastEnough = event.velocityY > DISMISS_VELOCITY;
+      if (farEnough || fastEnough) {
+        offset.set(withSpring(height, SHEET_SPRING));
+        runOnJS(close)();
+        return;
+      }
+      offset.set(withSpring(0, SHEET_SPRING));
+    };
+    chunkJ5WXI5NUJs1.__closure = {
+      height,
+      dismissThreshold,
+      DISMISS_VELOCITY,
+      offset,
+      withSpring,
+      SHEET_SPRING,
+      runOnJS,
+      close
+    };
+    chunkJ5WXI5NUJs1.__workletHash = 77790971326;
+    chunkJ5WXI5NUJs1.__pluginVersion = "0.7.4";
+    chunkJ5WXI5NUJs1.__initData = _worklet_77790971326_init_data;
+    chunkJ5WXI5NUJs1.__stackDetails = _e;
+    return chunkJ5WXI5NUJs1;
+  }({
+    _worklet_77790971326_init_data,
+    height,
+    dismissThreshold,
+    DISMISS_VELOCITY,
+    offset,
+    withSpring,
+    SHEET_SPRING,
+    runOnJS,
+    close
+  }));
+  const slide = useAnimatedStyle(function chunkJ5WXI5NUJs3Factory({
+    _worklet_15404457517253_init_data,
+    offset
+  }) {
+    const _e = [new global.Error(), -2, -27];
+    const chunkJ5WXI5NUJs3 = () => ({
+      transform: [{
+        translateY: offset.get()
+      }]
+    });
+    chunkJ5WXI5NUJs3.__closure = {
+      offset
+    };
+    chunkJ5WXI5NUJs3.__workletHash = 15404457517253;
+    chunkJ5WXI5NUJs3.__pluginVersion = "0.7.4";
+    chunkJ5WXI5NUJs3.__initData = _worklet_15404457517253_init_data;
+    chunkJ5WXI5NUJs3.__stackDetails = _e;
+    return chunkJ5WXI5NUJs3;
+  }({
+    _worklet_15404457517253_init_data,
+    offset
+  }));
+  if (!isOpen) return null;
+  return /* @__PURE__ */jsx2(Portal, {
+    children: /* @__PURE__ */jsx2(BottomSheetProvider, {
+      value: context,
+      children: /* @__PURE__ */jsx2(GestureDetector, {
+        gesture: pan,
+        children: /* @__PURE__ */jsx2(Animated.View, {
+          accessibilityViewIsModal,
+          onLayout: measure,
+          ...rest,
+          style: [contentStyle, slide, styleProps, style],
+          children
+        })
+      })
+    })
+  });
+}
+var OFFSCREEN = 2e3;
+BottomSheetContent.displayName = "XAUI.BottomSheet.Content";
+
+// src/components/bottom-sheet/bottom-sheet-description.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var BottomSheetDescription = forwardRef2(function BottomSheetDescription2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    descriptionStyle
+  } = useBottomSheet();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx3(Text, {
+    ref,
+    ...rest,
+    style: [descriptionStyle, styleProps, style],
+    children
+  });
+});
+BottomSheetDescription.displayName = "XAUI.BottomSheet.Description";
+
+// src/components/bottom-sheet/bottom-sheet-handle.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { View } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var BottomSheetHandle = forwardRef3(function BottomSheetHandle2({
+  style,
+  ...props
+}, ref) {
+  const {
+    handleStyle
+  } = useBottomSheet();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx4(View, {
+    ref,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    ...rest,
+    style: [handleStyle, styleProps, style]
+  });
+});
+BottomSheetHandle.displayName = "XAUI.BottomSheet.Handle";
+
+// src/components/bottom-sheet/bottom-sheet-overlay.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { Pressable } from "react-native";
+import Animated2 from "react-native-reanimated";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var AnimatedPressable = Animated2.createAnimatedComponent(Pressable);
+var BottomSheetOverlay = forwardRef4(function BottomSheetOverlay2({
+  children,
+  isDismissable = true,
+  style,
+  ...props
+}, ref) {
+  const context = useBottomSheet();
+  const {
+    overlayStyle,
+    isOpen,
+    close
+  } = context;
+  const [styleProps, rest] = useStyleProps(props);
+  if (!isOpen) return null;
+  return /* @__PURE__ */jsx5(Portal, {
+    children: /* @__PURE__ */jsx5(BottomSheetProvider, {
+      value: context,
+      children: /* @__PURE__ */jsx5(AnimatedPressable, {
+        ref,
+        entering: overlayEntering,
+        exiting: overlayExiting,
+        accessibilityRole: "none",
+        importantForAccessibility: "no",
+        onPress: isDismissable ? close : void 0,
+        ...rest,
+        style: [overlayStyle, styleProps, style],
+        children
+      })
+    })
+  });
+});
+BottomSheetOverlay.displayName = "XAUI.BottomSheet.Overlay";
+
+// src/components/bottom-sheet/bottom-sheet-title.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var BottomSheetTitle = forwardRef5(function BottomSheetTitle2({
+  children,
+  accessibilityRole = "header",
+  style,
+  ...props
+}, ref) {
+  const {
+    titleStyle
+  } = useBottomSheet();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */jsx6(Text2, {
+    ref,
+    accessibilityRole,
+    ...rest,
+    style: [titleStyle, styleProps, style],
+    children
+  });
+});
+BottomSheetTitle.displayName = "XAUI.BottomSheet.Title";
+
+// src/components/bottom-sheet/bottom-sheet-trigger.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback3 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var BottomSheetTrigger = forwardRef6(function BottomSheetTrigger2({
+  children,
+  asChild = false,
+  accessibilityRole = "button",
+  accessibilityState,
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    isOpen,
+    isDisabled,
+    toggle
+  } = useBottomSheet();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({
+    onPressIn,
+    onPressOut
+  });
+  const handlePress = useCallback3(event => {
+    onPress?.(event);
+    toggle();
+  }, [onPress, toggle]);
+  return /* @__PURE__ */jsx7(PressableFeedback, {
+    ref,
+    isPressed,
+    isDisabled,
+    asChild,
+    accessibilityRole,
+    accessibilityState: {
+      disabled: isDisabled,
+      expanded: isOpen,
+      ...accessibilityState
+    },
+    ...rest,
+    style: [styleProps, typeof style === "function" ? style({
+      pressed: isPressed
+    }) : style],
+    onPress: handlePress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    children
+  });
+});
+BottomSheetTrigger.displayName = "XAUI.BottomSheet.Trigger";
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+import { useCallback as useCallback4, useMemo } from "react";
+
+// src/components/bottom-sheet/bottom-sheet.recipe.ts
+var SLOTS = ["overlay", "content", "handle", "title", "description"];
+var HANDLE = {
+  width: 36,
+  height: 4
+};
+function topCorners(radius) {
+  return theme => ({
+    content: {
+      borderTopStartRadius: theme.radius[radius],
+      borderTopEndRadius: theme.radius[radius]
+    }
+  });
+}
+var RADII = ["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "field", "full"];
+var bottomSheetRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    overlay: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      start: 0,
+      end: 0,
+      backgroundColor: theme.colors.backdrop
+    },
+    content: {
+      position: "absolute",
+      start: 0,
+      end: 0,
+      bottom: 0,
+      backgroundColor: theme.colors.overlay,
+      padding: theme.spacing(5),
+      gap: theme.spacing(2),
+      // HeroUI's `--radius-4xl` on a base of 8 is 32 points; the nearest on our base of 12
+      // is `3xl` at 36. A sheet's corner is the largest in the library because it is the
+      // only edge of it you can see.
+      borderTopStartRadius: theme.radius["3xl"],
+      borderTopEndRadius: theme.radius["3xl"],
+      borderCurve: "continuous",
+      ...theme.shadows.overlay
+    },
+    /**
+     * The grab bar. It is the only thing telling a reader the sheet can be dragged — the
+     * gesture has no other affordance, and a sheet without one reads as a panel that
+     * happens to have arrived from below.
+     */
+    handle: {
+      alignSelf: "center",
+      width: HANDLE.width,
+      height: HANDLE.height,
+      borderRadius: HANDLE.height / 2,
+      backgroundColor: theme.colors.separator
+    },
+    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
+    }
+  }),
+  /** One variant: a sheet is the theme's floating surface, with no emphasis to report. */
+  variantTokens: {
+    default: {}
+  },
+  variants: {
+    radius: Object.fromEntries(RADII.map(r => [r, topCorners(r)]))
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+
+// src/components/bottom-sheet/bottom-sheet.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function BottomSheet({
+  children,
+  radius,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false,
+  dismissThreshold = 0.35
+}) {
+  const theme = useXAUITheme();
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const styles = bottomSheetRecipe.resolve({
+    theme,
+    selection: {
+      radius
+    }
+  });
+  const open = useCallback4(() => setOpen(true), [setOpen]);
+  const close = useCallback4(() => setOpen(false), [setOpen]);
+  const toggle = useCallback4(() => setOpen(current => !current), [setOpen]);
+  const context = useMemo(() => ({
+    overlayStyle: styles.overlay,
+    contentStyle: styles.content,
+    handleStyle: styles.handle,
+    titleStyle: styles.title,
+    descriptionStyle: styles.description,
+    isOpen,
+    isDisabled,
+    dismissThreshold,
+    open,
+    close,
+    toggle
+  }), [styles, isOpen, isDisabled, dismissThreshold, open, close, toggle]);
+  return /* @__PURE__ */jsx8(BottomSheetProvider, {
+    value: context,
+    children
+  });
+}
+BottomSheet.displayName = "XAUI.BottomSheet.Root";
+
+// src/components/bottom-sheet/index.ts
+var BottomSheet2 = Object.assign(BottomSheet, {
+  Trigger: BottomSheetTrigger,
+  Overlay: BottomSheetOverlay,
+  Content: BottomSheetContent,
+  Handle: BottomSheetHandle,
+  Title: BottomSheetTitle,
+  Description: BottomSheetDescription,
+  Close: BottomSheetClose
+});
+export { useBottomSheet, BottomSheetClose, BottomSheetContent, BottomSheetDescription, BottomSheetHandle, BottomSheetOverlay, BottomSheetTitle, BottomSheetTrigger, bottomSheetRecipe, BottomSheet, BottomSheet2 };