@xaui/native 0.9.1-alpha.37 → 0.9.1-alpha.38

package/dist/chunk-ZF6KIHXH.js

@@ -0,0 +1,591 @@
+import { ChevronDownIcon, Icon, IconContext } from "./chunk-FHUYHV6J.js";
+import { useControllableState } from "./chunk-F6W3JQ7K.js";
+import { PressableFeedback } from "./chunk-LIUO6D3D.js";
+import { usePressState } from "./chunk-423RQBOX.js";
+import { Slot, 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/accordion/accordion-content.tsx
+import { forwardRef } from "react";
+import Animated from "react-native-reanimated";
+
+// src/components/accordion/accordion.animation.ts
+import { Easing, FadeIn, FadeOut, LinearTransition } from "react-native-reanimated";
+var LAYOUT = LinearTransition.springify().damping(140).stiffness(1600).mass(4);
+var CONTENT_MS = 200;
+var contentEntering = FadeIn.duration(CONTENT_MS).easing(Easing.out(Easing.ease));
+var contentExiting = FadeOut.duration(CONTENT_MS).easing(Easing.in(Easing.ease));
+var INDICATOR_SPRING = {
+  damping: 140,
+  stiffness: 1e3,
+  mass: 4
+};
+var INDICATOR_ROTATION = [0, -180];
+
+// src/components/accordion/accordion.context.ts
+var [AccordionProvider, useAccordion] = createSlotContext("Accordion");
+var [AccordionItemProvider, useAccordionItem] = createSlotContext("Accordion.Item");
+
+// src/components/accordion/accordion-content.tsx
+import { jsx } from "react/jsx-runtime";
+var AccordionContent = forwardRef(function AccordionContent2({
+  children,
+  style,
+  ...props
+}, ref) {
+  const {
+    contentStyle
+  } = useAccordion();
+  const {
+    isExpanded
+  } = useAccordionItem();
+  const [styleProps, rest] = useStyleProps(props);
+  if (!isExpanded) return null;
+  return /* @__PURE__ */jsx(Animated.View, {
+    ref,
+    entering: contentEntering,
+    exiting: contentExiting,
+    ...rest,
+    style: [contentStyle, styleProps, style],
+    children
+  });
+});
+AccordionContent.displayName = "XAUI.Accordion.Content";
+
+// src/components/accordion/accordion-indicator.tsx
+import { useEffect } from "react";
+import Animated2, { interpolate, useAnimatedStyle, useSharedValue, withSpring } from "react-native-reanimated";
+import { jsx as jsx2 } from "react/jsx-runtime";
+const _worklet_14153867294208_init_data = {
+  code: "function chunkZF6KIHXHJs1(){const{interpolate,progress,INDICATOR_ROTATION}=this.__closure;return{transform:[{rotate:interpolate(progress.get(),[0,1],[INDICATOR_ROTATION[0],INDICATOR_ROTATION[1]])+\"deg\"}]};}",
+  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZF6KIHXH.js",
+  sourceMap: "{\"version\":3,\"names\":[\"chunkZF6KIHXHJs1\",\"interpolate\",\"progress\",\"INDICATOR_ROTATION\",\"__closure\",\"transform\",\"rotate\",\"get\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-ZF6KIHXH.js\"],\"mappings\":\"AA4FoC,SAAAA,iBAAA,QAAAC,WAAA,CAAAC,QAAA,CAAAC,kBAAA,OAAAC,SAAA,OAAO,CACvCC,SAAS,CAAE,CACT,CACEC,MAAM,CAAKL,WAAW,CAACC,QAAQ,CAACK,GAAG,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAAC,CAAC,CAAE,CAACJ,kBAAkB,CAAC,CAAC,CAAC,CAAEA,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC,MAChG,CAAC,CAEL,CAAC\",\"ignoreList\":[]}"
+};
+function AccordionIndicator({
+  as = ChevronDownIcon,
+  ...props
+}) {
+  const {
+    indicatorStyle
+  } = useAccordion();
+  const {
+    isExpanded
+  } = useAccordionItem();
+  const progress = useSharedValue(isExpanded ? 1 : 0);
+  useEffect(() => {
+    progress.set(withSpring(isExpanded ? 1 : 0, INDICATOR_SPRING));
+  }, [isExpanded, progress]);
+  const rotation = useAnimatedStyle(function chunkZF6KIHXHJs1Factory({
+    _worklet_14153867294208_init_data,
+    interpolate,
+    progress,
+    INDICATOR_ROTATION
+  }) {
+    const _e = [new global.Error(), -4, -27];
+    const chunkZF6KIHXHJs1 = () => ({
+      transform: [{
+        rotate: `${interpolate(progress.get(), [0, 1], [INDICATOR_ROTATION[0], INDICATOR_ROTATION[1]])}deg`
+      }]
+    });
+    chunkZF6KIHXHJs1.__closure = {
+      interpolate,
+      progress,
+      INDICATOR_ROTATION
+    };
+    chunkZF6KIHXHJs1.__workletHash = 14153867294208;
+    chunkZF6KIHXHJs1.__pluginVersion = "0.7.4";
+    chunkZF6KIHXHJs1.__initData = _worklet_14153867294208_init_data;
+    chunkZF6KIHXHJs1.__stackDetails = _e;
+    return chunkZF6KIHXHJs1;
+  }({
+    _worklet_14153867294208_init_data,
+    interpolate,
+    progress,
+    INDICATOR_ROTATION
+  }));
+  return /* @__PURE__ */jsx2(Animated2.View, {
+    style: [indicatorStyle, rotation],
+    children: /* @__PURE__ */jsx2(Icon, {
+      as,
+      ...props
+    })
+  });
+}
+AccordionIndicator.displayName = "XAUI.Accordion.Indicator";
+
+// src/components/accordion/accordion-item.tsx
+import { forwardRef as forwardRef2, useMemo } from "react";
+import Animated3 from "react-native-reanimated";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var AccordionItem = forwardRef2(function AccordionItem2({
+  value,
+  children,
+  isDisabled = false,
+  style,
+  ...props
+}, ref) {
+  const {
+    itemStyle,
+    isDisabled: isRootDisabled,
+    isExpanded
+  } = useAccordion();
+  const [styleProps, rest] = useStyleProps(props);
+  const expanded = isExpanded(value);
+  const disabled = isRootDisabled || isDisabled;
+  const context = useMemo(() => ({
+    value,
+    isExpanded: expanded,
+    isDisabled: disabled
+  }), [value, expanded, disabled]);
+  return /* @__PURE__ */jsx3(AccordionItemProvider, {
+    value: context,
+    children: /* @__PURE__ */jsx3(Animated3.View, {
+      ref,
+      layout: LAYOUT,
+      ...rest,
+      style: [itemStyle, styleProps, style],
+      children: typeof children === "function" ? children(context) : children
+    })
+  });
+});
+AccordionItem.displayName = "XAUI.Accordion.Item";
+
+// src/components/accordion/accordion-trigger.tsx
+import { Children, forwardRef as forwardRef3, useCallback } from "react";
+import { Text } from "react-native";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var AccordionTrigger = forwardRef3(function AccordionTrigger2({
+  children,
+  asChild = false,
+  accessibilityRole = "button",
+  accessibilityState,
+  style,
+  onPress,
+  onPressIn,
+  onPressOut,
+  ...props
+}, ref) {
+  const {
+    triggerStyle,
+    triggerPressedStyle,
+    labelStyle,
+    glyph,
+    toggle
+  } = useAccordion();
+  const {
+    value,
+    isExpanded,
+    isDisabled
+  } = useAccordionItem();
+  const [styleProps, rest] = useStyleProps(props);
+  const [isPressed, press] = usePressState({
+    onPressIn,
+    onPressOut
+  });
+  const handlePress = useCallback(event => {
+    onPress?.(event);
+    toggle(value);
+  }, [onPress, toggle, value]);
+  return /* @__PURE__ */jsx4(IconContext.Provider, {
+    value: glyph,
+    children: /* @__PURE__ */jsx4(PressableFeedback, {
+      ref,
+      isPressed,
+      isDisabled,
+      asChild,
+      accessibilityRole,
+      accessibilityState: {
+        disabled: isDisabled,
+        expanded: isExpanded,
+        ...accessibilityState
+      },
+      ...rest,
+      style: [triggerStyle, isPressed && triggerPressedStyle, styleProps, typeof style === "function" ? style({
+        pressed: isPressed
+      }) : style],
+      onPress: handlePress,
+      onPressIn: press.onPressIn,
+      onPressOut: press.onPressOut,
+      children: asChild ? children : wrapText(children, labelStyle)
+    })
+  });
+});
+AccordionTrigger.displayName = "XAUI.Accordion.Trigger";
+function wrapText(children, style) {
+  return Children.map(children, child => typeof child === "string" || typeof child === "number" ? /* @__PURE__ */jsx4(Text, {
+    style,
+    children: child
+  }) : child);
+}
+
+// src/components/accordion/accordion.tsx
+import { Children as Children2, forwardRef as forwardRef4, Fragment, useMemo as useMemo3 } from "react";
+import { StyleSheet as StyleSheet2 } from "react-native";
+import Animated4 from "react-native-reanimated";
+
+// src/components/accordion/accordion.hook.ts
+import { useCallback as useCallback2, useMemo as useMemo2 } from "react";
+function useExpansion({
+  value,
+  defaultValue,
+  onValueChange,
+  selectionMode,
+  isCollapsible
+}) {
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue: defaultValue ?? (selectionMode === "multiple" ? [] : ""),
+    onChange: onValueChange
+  });
+  const isExpanded = useCallback2(item => Array.isArray(current) ? current.includes(item) : current === item, [current]);
+  const toggle = useCallback2(item => {
+    setCurrent(value_ => nextValue(value_, item, selectionMode, isCollapsible));
+  }, [isCollapsible, selectionMode, setCurrent]);
+  return useMemo2(() => ({
+    isExpanded,
+    toggle
+  }), [isExpanded, toggle]);
+}
+function nextValue(current, item, selectionMode, isCollapsible) {
+  if (selectionMode === "multiple") {
+    const list = Array.isArray(current) ? current : current ? [current] : [];
+    if (!list.includes(item)) return [...list, item];
+    if (!isCollapsible && list.length === 1) return current;
+    return list.filter(value => value !== item);
+  }
+  if (current !== item) return item;
+  return isCollapsible ? "" : current;
+}
+
+// src/components/accordion/accordion.recipe.ts
+import { StyleSheet } from "react-native";
+var SLOTS = ["root", "container", "separator", "item", "trigger", "indicator", "content"];
+var VARIANT_TOKENS = {
+  primary: {
+    bg: "surface",
+    fg: "surfaceForeground"
+  },
+  secondary: {
+    bg: "surfaceSecondary",
+    fg: "surfaceSecondaryForeground"
+  },
+  tertiary: {
+    border: "border",
+    fg: "foreground"
+  },
+  ghost: {
+    fg: "foreground"
+  }
+};
+var HAIRLINE = StyleSheet.hairlineWidth;
+var SIZES = {
+  xs: {
+    padding: 2.5,
+    gap: 2.5,
+    label: "sm",
+    glyph: "md",
+    radius: "md"
+  },
+  sm: {
+    padding: 3,
+    gap: 3,
+    label: "md",
+    glyph: "lg",
+    radius: "lg"
+  },
+  md: {
+    padding: 3,
+    gap: 4,
+    label: "md",
+    glyph: "lg",
+    radius: "xl"
+  },
+  lg: {
+    padding: 4,
+    gap: 4,
+    label: "lg",
+    glyph: "xl",
+    radius: "2xl"
+  }
+};
+var TRIGGER_PADDING_VERTICAL = 4;
+function sizeAxis(step) {
+  const {
+    padding,
+    gap,
+    label,
+    glyph,
+    radius
+  } = step;
+  return theme => ({
+    // Both layers, at the same value: the outer one draws the corner, the inner one is
+    // what a pressed row is cut against.
+    root: {
+      borderRadius: theme.radius[radius]
+    },
+    container: {
+      borderRadius: theme.radius[radius]
+    },
+    trigger: {
+      paddingVertical: theme.spacing(TRIGGER_PADDING_VERTICAL),
+      paddingHorizontal: theme.spacing(padding),
+      gap: theme.spacing(gap),
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    },
+    indicator: {
+      fontSize: theme.fontSizes[glyph]
+    },
+    content: {
+      paddingHorizontal: theme.spacing(padding),
+      paddingBottom: theme.spacing(TRIGGER_PADDING_VERTICAL)
+    }
+  });
+}
+var accordionRecipe = createRecipe({
+  slots: SLOTS,
+  base: theme => ({
+    // The root carries the shadow and the border; it must **not** clip. On iOS
+    // `overflow: 'hidden'` sets `masksToBounds`, which clips the layer's own shadow along
+    // with everything else, and a lifted `primary` would have none at all.
+    root: {
+      flexDirection: "column",
+      borderCurve: "continuous"
+    },
+    // So the clipping is one layer in. This is the one extra node in the component, and
+    // it is here for a platform constraint rather than for layout: a single layer cannot
+    // both cast a shadow and clip its children on iOS. Without it a pressed row paints
+    // over the card's rounded corner, square, for as long as a finger is on it.
+    container: {
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    separator: {
+      height: HAIRLINE,
+      backgroundColor: theme.colors.separator
+    },
+    // This one is load-bearing: it is what makes the height animation read as a panel
+    // unrolling rather than as content sliding out from behind the row above it.
+    item: {
+      flexDirection: "column",
+      overflow: "hidden"
+    },
+    trigger: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium
+    },
+    indicator: {
+      alignItems: "center",
+      justifyContent: "center"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * The fill is the **root's**, never the row's. A row that painted its own would stack
+   * two fills where the separator sits, and the hairline would disappear into the seam.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    trigger: {
+      color: colors.fg
+    },
+    indicator: {
+      color: theme.colors.muted
+    }
+  }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("root", "container")
+  },
+  /**
+   * A container inset from its own edge, and its separators inset with it. `ghost` has no
+   * edge to be inset from, so its rows run the full width and the hairline runs with them
+   * — which is the difference between a list on a page and a list in a box.
+   *
+   * `primary` is the only one lifted. It is the one that reads as a card, and HeroUI puts
+   * their `--shadow-surface` on exactly that variant. `secondary` and `tertiary` have too
+   * little fill to lift — a shadow under either would read as dirt rather than as height
+   * — and in dark mode the theme's surface shadow is already nothing (§4), which is why
+   * this names the role rather than a set of numbers.
+   */
+  compoundVariants: [...["primary", "secondary", "tertiary"].map(variant => ({
+    when: {
+      variant
+    },
+    style: theme => ({
+      separator: {
+        marginHorizontal: theme.spacing(3)
+      }
+    })
+  })), {
+    when: {
+      variant: "primary"
+    },
+    style: theme => ({
+      root: theme.shadows.surface
+    })
+  }],
+  states: {
+    // On the row, not on the root: pressing one row must not tint the whole container.
+    pressed: theme => ({
+      trigger: {
+        backgroundColor: theme.colors.defaultSoftPressed
+      }
+    }),
+    disabled: theme => ({
+      root: {
+        opacity: theme.opacity.disabled
+      }
+    })
+  },
+  defaultVariants: {
+    variant: "ghost",
+    size: "md"
+  }
+});
+
+// src/components/accordion/accordion.tsx
+import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+var AccordionRoot = forwardRef4(function Accordion({
+  children,
+  variant,
+  size,
+  radius,
+  color,
+  selectionMode = "single",
+  value,
+  defaultValue,
+  onValueChange,
+  isDisabled = false,
+  isCollapsible = true,
+  hasSeparator = true,
+  asChild = false,
+  style,
+  ...props
+}, ref) {
+  const theme = useXAUITheme();
+  const [styleProps, rest] = useStyleProps(props);
+  const {
+    isExpanded,
+    toggle
+  } = useExpansion({
+    value,
+    defaultValue,
+    onValueChange,
+    selectionMode,
+    isCollapsible
+  });
+  const selection = {
+    variant,
+    size,
+    radius
+  };
+  const styles = accordionRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      disabled: isDisabled
+    }
+  });
+  const pressed = accordionRecipe.resolve({
+    theme,
+    selection,
+    states: {
+      pressed: true
+    }
+  });
+  const tint = color ? accordionRecipe.tint({
+    theme,
+    color,
+    selection
+  }) : void 0;
+  const context = useMemo3(() => {
+    const trigger = StyleSheet2.flatten([styles.trigger, tint?.trigger]);
+    const indicator = StyleSheet2.flatten([styles.indicator, tint?.indicator]);
+    return {
+      separatorStyle: styles.separator,
+      itemStyle: styles.item,
+      triggerStyle: tint ? [styles.trigger, tint.trigger] : styles.trigger,
+      triggerPressedStyle: pressed.trigger,
+      indicatorStyle: styles.indicator,
+      contentStyle: styles.content,
+      // The trigger is a row of views, so a stringifiable child is wrapped in a `Text` of
+      // its own — and that text takes the type the recipe put on the row.
+      labelStyle: {
+        color: trigger.color,
+        fontFamily: trigger.fontFamily,
+        fontWeight: trigger.fontWeight,
+        fontSize: trigger.fontSize,
+        lineHeight: trigger.lineHeight
+      },
+      glyph: {
+        size: indicator.fontSize,
+        color: typeof indicator.color === "string" ? indicator.color : void 0
+      },
+      isDisabled,
+      isExpanded,
+      toggle
+    };
+  }, [styles, pressed, tint, isDisabled, isExpanded, toggle]);
+  const rootStyle = [styles.root, tint?.root, styleProps, style];
+  const items = Children2.toArray(children);
+  const rows = items.map((child, index) => /* @__PURE__ */jsxs(Fragment, {
+    children: [child, hasSeparator && index < items.length - 1 ? /* @__PURE__ */jsx5(Animated4.View, {
+      layout: LAYOUT,
+      style: styles.separator
+    }) : null]
+  }, index));
+  return /* @__PURE__ */jsx5(AccordionProvider, {
+    value: context,
+    children: asChild ? /* @__PURE__ */jsx5(Slot, {
+      ref,
+      ...rest,
+      style: rootStyle,
+      children
+    }) :
+    // Two layers, and the only place in the library where a root has one inside it.
+    // A single layer cannot both cast a shadow and clip its children on iOS, and this
+    // component needs both: `primary` is lifted, and a pressed row has to be cut
+    // against the card's rounded corner rather than painting over it.
+    //
+    // The layout transition is on each of them as well as on every row. Without it on
+    // the outer one the accordion's own height jumps to its new total in one frame
+    // while the rows inside it are still animating.
+    /* @__PURE__ */
+    jsx5(Animated4.View, {
+      ref,
+      layout: LAYOUT,
+      ...rest,
+      style: rootStyle,
+      children: /* @__PURE__ */jsx5(Animated4.View, {
+        layout: LAYOUT,
+        style: styles.container,
+        children: rows
+      })
+    })
+  });
+});
+AccordionRoot.displayName = "XAUI.Accordion.Root";
+
+// src/components/accordion/index.ts
+var Accordion2 = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Indicator: AccordionIndicator,
+  Content: AccordionContent
+});
+export { LAYOUT, useAccordion, useAccordionItem, AccordionContent, AccordionIndicator, AccordionItem, AccordionTrigger, accordionRecipe, AccordionRoot, Accordion2 as Accordion };