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

package/dist/chunk-MA66HZKP.js

@@ -0,0 +1,401 @@
+import {
+  CloseButton,
+  closeButtonBase
+} from "./chunk-VIJTAIGH.js";
+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,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/dialog/dialog-close.tsx
+import { forwardRef, useCallback } from "react";
+
+// src/components/dialog/dialog.context.ts
+var [DialogProvider, useDialog] = createSlotContext("Dialog");
+
+// src/components/dialog/dialog-close.tsx
+import { jsx } from "react/jsx-runtime";
+var DialogClose = forwardRef(function DialogClose2({ asChild = false, onPress, ...props }, ref) {
+  const { close, closeStyle, closeGlyphStyle } = useDialog();
+  const handlePress = useCallback(
+    (event) => {
+      onPress?.(event);
+      close();
+    },
+    [close, onPress]
+  );
+  return /* @__PURE__ */ jsx(
+    CloseButton,
+    {
+      ref,
+      name: "Dialog.Close",
+      asChild,
+      baseStyle: asChild ? void 0 : closeStyle,
+      glyphStyle: closeGlyphStyle,
+      onPress: handlePress,
+      ...props
+    }
+  );
+});
+DialogClose.displayName = "XAUI.Dialog.Close";
+
+// src/components/dialog/dialog-content.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { View } from "react-native";
+import Animated from "react-native-reanimated";
+
+// src/components/dialog/dialog.animation.ts
+import { Easing, Keyframe } from "react-native-reanimated";
+var ENTER_MS = 200;
+var EXIT_MS = 150;
+var contentEntering = new Keyframe({
+  0: { opacity: 0, transform: [{ scale: 0.94 }] },
+  100: {
+    opacity: 1,
+    transform: [{ scale: 1 }],
+    easing: Easing.out(Easing.cubic)
+  }
+}).duration(ENTER_MS);
+var contentExiting = new Keyframe({
+  0: { opacity: 1, transform: [{ scale: 1 }] },
+  100: {
+    opacity: 0,
+    transform: [{ scale: 0.94 }],
+    easing: Easing.in(Easing.cubic)
+  }
+}).duration(EXIT_MS);
+
+// src/components/dialog/dialog-content.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var DialogContent = forwardRef2(
+  function DialogContent2({ children, accessibilityViewIsModal = true, style, ...props }, ref) {
+    const context = useDialog();
+    const { panelStyle, contentStyle, isOpen } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx2(Portal, { children: /* @__PURE__ */ jsx2(DialogProvider, { value: context, children: /* @__PURE__ */ jsx2(View, { pointerEvents: "box-none", style: panelStyle, children: /* @__PURE__ */ jsx2(
+      Animated.View,
+      {
+        ref,
+        entering: contentEntering,
+        exiting: contentExiting,
+        accessibilityViewIsModal,
+        accessibilityRole: "alert",
+        ...rest,
+        style: [contentStyle, styleProps, style],
+        children
+      }
+    ) }) }) });
+  }
+);
+DialogContent.displayName = "XAUI.Dialog.Content";
+
+// src/components/dialog/dialog-description.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DialogDescription = forwardRef3(
+  function DialogDescription2({ children, style, ...props }, ref) {
+    const { descriptionStyle } = useDialog();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(Text, { ref, ...rest, style: [descriptionStyle, styleProps, style], children });
+  }
+);
+DialogDescription.displayName = "XAUI.Dialog.Description";
+
+// src/components/dialog/dialog-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 DialogOverlay = forwardRef4(
+  function DialogOverlay2({ children, isDismissable = true, style, ...props }, ref) {
+    const context = useDialog();
+    const { overlayStyle, isOpen, close } = context;
+    const [styleProps, rest] = useStyleProps(props);
+    if (!isOpen) return null;
+    return /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsx4(DialogProvider, { 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
+      }
+    ) }) });
+  }
+);
+DialogOverlay.displayName = "XAUI.Dialog.Overlay";
+
+// src/components/dialog/dialog-title.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { Text as Text2 } from "react-native";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var DialogTitle = forwardRef5(function DialogTitle2({ children, accessibilityRole = "header", style, ...props }, ref) {
+  const { titleStyle } = useDialog();
+  const [styleProps, rest] = useStyleProps(props);
+  return /* @__PURE__ */ jsx5(
+    Text2,
+    {
+      ref,
+      accessibilityRole,
+      ...rest,
+      style: [titleStyle, styleProps, style],
+      children
+    }
+  );
+});
+DialogTitle.displayName = "XAUI.Dialog.Title";
+
+// src/components/dialog/dialog-trigger.tsx
+import { forwardRef as forwardRef6, useCallback as useCallback2 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DialogTrigger = forwardRef6(
+  function DialogTrigger2({
+    children,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const { isOpen, isDisabled, toggle } = useDialog();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    const handlePress = useCallback2(
+      (event) => {
+        onPress?.(event);
+        toggle();
+      },
+      [onPress, toggle]
+    );
+    return /* @__PURE__ */ jsx6(
+      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
+      }
+    );
+  }
+);
+DialogTrigger.displayName = "XAUI.Dialog.Trigger";
+
+// src/components/dialog/dialog.tsx
+import { useCallback as useCallback3, useMemo } from "react";
+
+// src/components/dialog/dialog.recipe.ts
+var SLOTS = [
+  "overlay",
+  "panel",
+  "content",
+  "title",
+  "description",
+  "close",
+  "closeGlyph"
+];
+var CLOSE_BOX = 32;
+var CLOSE_BAR = 16;
+var dialogRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => {
+    const shared = closeButtonBase(theme);
+    return {
+      // Unlike the `Popover`'s, this backdrop dims by default. A popover is an aside you can
+      // read the page around; a dialog is a question, and the page behind it is not
+      // available until it is answered.
+      overlay: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        start: 0,
+        end: 0,
+        backgroundColor: theme.colors.backdrop
+      },
+      /**
+       * The layer the panel is centred in, filling the portal. It is not the panel: a
+       * centred box cannot also be the thing that centres it, and the padding here is the
+       * margin the dialog keeps from the screen's edges rather than its own inner padding.
+       */
+      panel: {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        start: 0,
+        end: 0,
+        justifyContent: "center",
+        padding: theme.spacing(5)
+      },
+      content: {
+        backgroundColor: theme.colors.overlay,
+        padding: theme.spacing(5),
+        // HeroUI's `--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(2),
+        ...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
+      },
+      /**
+       * A filled disc, not a bare glyph. Their `CloseButton` is a `tertiary` button, and
+       * their `tertiary` is `background-color: var(--color-default)` — the same token our
+       * `secondary` names. A cross floating on the panel with nothing under it reads as
+       * decoration; the disc is what makes it a target.
+       *
+       * It positions nothing. Where the cross sits is the caller's, exactly as it is
+       * theirs: `alignSelf: 'flex-end'` above a title that spans the panel, or absolute in
+       * the corner over one short enough to leave it free. A slot that placed itself would
+       * have to guess which, and their own examples use both.
+       */
+      close: {
+        ...shared.close,
+        width: CLOSE_BOX,
+        height: CLOSE_BOX,
+        borderRadius: CLOSE_BOX / 2,
+        backgroundColor: theme.colors.default
+      },
+      // `muted`, like theirs: the cross is the way out, not the answer. The answer is a
+      // `Button` in the words the dialog asked for.
+      closeGlyph: {
+        ...shared.closeGlyph,
+        width: CLOSE_BAR,
+        backgroundColor: theme.colors.muted
+      }
+    };
+  },
+  /**
+   * One variant, and it is not a gap. A dialog is the theme's floating surface: it has no
+   * emphasis to report — the question it asks is in its words, not in its fill. The recipe
+   * keeps a single-entry `variantTokens` because `resolveTint` walks that mapping.
+   */
+  variantTokens: { default: {} },
+  variants: { radius: radiusAxis("content") },
+  defaultVariants: { variant: "default" }
+});
+
+// src/components/dialog/dialog.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Dialog({
+  children,
+  radius,
+  isOpen: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  isDisabled = false
+}) {
+  const theme = useXAUITheme();
+  const [isOpen, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const styles = dialogRecipe.resolve({ theme, selection: { radius } });
+  const open = useCallback3(() => setOpen(true), [setOpen]);
+  const close = useCallback3(() => setOpen(false), [setOpen]);
+  const toggle = useCallback3(() => setOpen((current) => !current), [setOpen]);
+  const context = useMemo(
+    () => ({
+      overlayStyle: styles.overlay,
+      panelStyle: styles.panel,
+      contentStyle: styles.content,
+      titleStyle: styles.title,
+      descriptionStyle: styles.description,
+      closeStyle: styles.close,
+      closeGlyphStyle: styles.closeGlyph,
+      isOpen,
+      isDisabled,
+      open,
+      close,
+      toggle
+    }),
+    [styles, isOpen, isDisabled, open, close, toggle]
+  );
+  return /* @__PURE__ */ jsx7(DialogProvider, { value: context, children });
+}
+Dialog.displayName = "XAUI.Dialog.Root";
+
+// src/components/dialog/index.ts
+var Dialog2 = Object.assign(Dialog, {
+  Trigger: DialogTrigger,
+  Overlay: DialogOverlay,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Close: DialogClose
+});
+
+export {
+  useDialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogOverlay,
+  DialogTitle,
+  DialogTrigger,
+  dialogRecipe,
+  Dialog,
+  Dialog2
+};