@xaui/native 0.9.1-alpha.29 → 0.9.1-alpha.30

package/dist/{chunk-YGOXQSNU.js → chunk-GI24YJPE.js}

@@ -1,28 +1,41 @@
-import { PressableFeedback, usePressState } from "./chunk-4HELPMAK.js";
-import { warnDev } from "./chunk-EGLLDKN6.js";
-import { Icon } from "./chunk-ICR42HHG.js";
-import { createRecipe, radiusAxis } from "./chunk-4GTAZM2C.js";
-import { childrenToString, createSlotContext, useStyleProps } from "./chunk-PMO62QK4.js";
-import { useXAUITheme } from "./chunk-A3EGFI6T.js";
+import {
+  useRotation
+} from "./chunk-BVJQ3UPZ.js";
+import {
+  PressableFeedback
+} from "./chunk-BFMTUMTU.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  Icon
+} from "./chunk-3FV4COTM.js";
+import {
+  warnDev
+} from "./chunk-EGLLDKN6.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-4GTAZM2C.js";
+import {
+  useXAUITheme
+} from "./chunk-A3EGFI6T.js";
+import {
+  childrenToString,
+  createSlotContext
+} from "./chunk-E2CWBQTV.js";
+import {
+  useStyleProps
+} from "./chunk-URSKA2VR.js";
 
 // src/components/button/button.context.ts
 var [ButtonProvider, useButton] = createSlotContext("Button");
 
 // src/components/button/button-icon.tsx
 import { jsx } from "react/jsx-runtime";
-function ButtonIcon({
-  size,
-  color,
-  ...rest
-}) {
-  const {
-    icon
-  } = useButton();
-  return /* @__PURE__ */jsx(Icon, {
-    size: size ?? icon.size,
-    color: color ?? icon.color,
-    ...rest
-  });
+function ButtonIcon({ size, color, ...rest }) {
+  const { icon } = useButton();
+  return /* @__PURE__ */ jsx(Icon, { size: size ?? icon.size, color: color ?? icon.color, ...rest });
 }
 ButtonIcon.displayName = "XAUI.Button.Icon";
 
@@ -30,93 +43,41 @@ ButtonIcon.displayName = "XAUI.Button.Icon";
 import { forwardRef } from "react";
 import { Text } from "react-native";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var ButtonLabel = forwardRef(function ButtonLabel2({
-  children,
-  style,
-  numberOfLines = 1,
-  ...props
-}, ref) {
-  const {
-    labelStyle
-  } = useButton();
+var ButtonLabel = forwardRef(function ButtonLabel2({ children, style, numberOfLines = 1, ...props }, ref) {
+  const { labelStyle } = useButton();
   const [styleProps, rest] = useStyleProps(props);
-  return /* @__PURE__ */jsx2(Text, {
-    ref,
-    numberOfLines,
-    style: [labelStyle, styleProps, style],
-    ...rest,
-    children
-  });
+  return /* @__PURE__ */ jsx2(
+    Text,
+    {
+      ref,
+      numberOfLines,
+      style: [labelStyle, styleProps, style],
+      ...rest,
+      children
+    }
+  );
 });
 ButtonLabel.displayName = "XAUI.Button.Label";
 
 // src/components/button/button-spinner.tsx
-import { useEffect } from "react";
 import { View } from "react-native";
-import Animated, { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 import { jsx as jsx3 } from "react/jsx-runtime";
-var ROTATION_DURATION = 800;
 function ButtonSpinner({
   style,
   animation = true,
   ...props
 }) {
-  const {
-    spinnerStyle
-  } = useButton();
+  const { spinnerStyle } = useButton();
   const [styleProps] = useStyleProps(props);
   const ringStyle = [spinnerStyle, styleProps, style];
-  if (!animation) return /* @__PURE__ */jsx3(View, {
-    style: ringStyle
-  });
-  return /* @__PURE__ */jsx3(SpinningRing, {
-    style: ringStyle
-  });
+  if (!animation) return /* @__PURE__ */ jsx3(View, { style: ringStyle });
+  return /* @__PURE__ */ jsx3(SpinningRing, { style: ringStyle });
 }
 ButtonSpinner.displayName = "XAUI.Button.Spinner";
-const _worklet_7673867799543_init_data = {
-  code: "function chunkYGOXQSNUJs1(){const{angle}=this.__closure;return{transform:[{rotate:angle.value+\"deg\"}]};}",
-  location: "/home/runner/work/xaui/xaui/packages/native/dist/chunk-YGOXQSNU.js",
-  sourceMap: "{\"version\":3,\"names\":[\"chunkYGOXQSNUJs1\",\"angle\",\"__closure\",\"transform\",\"rotate\",\"value\"],\"sources\":[\"/home/runner/work/xaui/xaui/packages/native/dist/chunk-YGOXQSNU.js\"],\"mappings\":\"AAqFyC,SAAAA,gBAAMA,CAAA,QAAAC,KAAA,OAAAC,SAAA,CAE3C,MAAO,CAAEC,SAAS,CAAE,CAAC,CAAEC,MAAM,CAAKH,KAAK,CAACI,KAAK,MAAM,CAAC,CAAE,CAAC,CACzD\",\"ignoreList\":[]}"
-};
-function SpinningRing({
-  style
-}) {
-  const angle = useSharedValue(0);
-  useEffect(() => {
-    angle.value = withRepeat(withTiming(360, {
-      duration: ROTATION_DURATION,
-      easing: Easing.linear
-    }), -1, false);
-    return () => cancelAnimation(angle);
-  }, [angle]);
-  const animatedStyle = useAnimatedStyle(function chunkYGOXQSNUJs1Factory({
-    _worklet_7673867799543_init_data,
-    angle
-  }) {
-    const _e = [new global.Error(), -2, -27];
-    const chunkYGOXQSNUJs1 = function () {
-      return {
-        transform: [{
-          rotate: `${angle.value}deg`
-        }]
-      };
-    };
-    chunkYGOXQSNUJs1.__closure = {
-      angle
-    };
-    chunkYGOXQSNUJs1.__workletHash = 7673867799543;
-    chunkYGOXQSNUJs1.__pluginVersion = "0.7.4";
-    chunkYGOXQSNUJs1.__initData = _worklet_7673867799543_init_data;
-    chunkYGOXQSNUJs1.__stackDetails = _e;
-    return chunkYGOXQSNUJs1;
-  }({
-    _worklet_7673867799543_init_data,
-    angle
-  }), [angle]);
-  return /* @__PURE__ */jsx3(Animated.View, {
-    style: [style, animatedStyle]
-  });
+function SpinningRing({ style }) {
+  const rotation = useRotation();
+  return /* @__PURE__ */ jsx3(Animated.View, { style: [style, rotation] });
 }
 
 // src/components/button/button.tsx
@@ -126,11 +87,7 @@ import { StyleSheet } from "react-native";
 // src/components/button/button.recipe.ts
 var SLOTS = ["root", "label", "icon", "spinner"];
 var VARIANT_TOKENS = {
-  primary: {
-    bg: "accent",
-    bgPressed: "accentPressed",
-    fg: "accentForeground"
-  },
+  primary: { bg: "accent", bgPressed: "accentPressed", fg: "accentForeground" },
   // The accent's soft slice, not a second neutral: `secondary` is to `primary` what
   // `danger-soft` is to `danger`, and it reads as the same family at lower emphasis.
   secondary: {
@@ -138,25 +95,14 @@ var VARIANT_TOKENS = {
     bgPressed: "accentSoftPressed",
     fg: "accentSoftForeground"
   },
-  default: {
-    bg: "default",
-    bgPressed: "defaultPressed",
-    fg: "defaultForeground"
-  },
+  default: { bg: "default", bgPressed: "defaultPressed", fg: "defaultForeground" },
   tertiary: {
     border: "border",
     bgPressed: "defaultSoftPressed",
     fg: "foreground"
   },
-  ghost: {
-    bgPressed: "defaultSoftPressed",
-    fg: "foreground"
-  },
-  danger: {
-    bg: "danger",
-    bgPressed: "dangerPressed",
-    fg: "dangerForeground"
-  },
+  ghost: { bgPressed: "defaultSoftPressed", fg: "foreground" },
+  danger: { bg: "danger", bgPressed: "dangerPressed", fg: "dangerForeground" },
   "danger-soft": {
     bg: "dangerSoft",
     bgPressed: "dangerSoftPressed",
@@ -173,14 +119,8 @@ function ring(theme, size) {
   };
 }
 function sizeAxis(step) {
-  const {
-    size,
-    padding,
-    gap,
-    glyph,
-    radius
-  } = step;
-  return theme => ({
+  const { size, padding, gap, glyph, radius } = step;
+  return (theme) => ({
     root: {
       height: theme.controlHeights[size],
       paddingHorizontal: theme.spacing(padding),
@@ -191,15 +131,13 @@ function sizeAxis(step) {
       fontSize: theme.fontSizes[size],
       lineHeight: theme.lineHeights[size]
     },
-    icon: {
-      fontSize: theme.fontSizes[glyph]
-    },
+    icon: { fontSize: theme.fontSizes[glyph] },
     spinner: ring(theme, theme.fontSizes[glyph])
   });
 }
 var buttonRecipe = createRecipe({
   slots: SLOTS,
-  base: theme => ({
+  base: (theme) => ({
     root: {
       flexDirection: "row",
       alignItems: "center",
@@ -226,15 +164,9 @@ var buttonRecipe = createRecipe({
       borderColor: colors.border,
       borderWidth: colors.border ? theme.borderWidth.default : 0
     },
-    label: {
-      color: colors.fg
-    },
-    icon: {
-      color: colors.fg
-    },
-    spinner: {
-      borderColor: colors.fg
-    }
+    label: { color: colors.fg },
+    icon: { color: colors.fg },
+    spinner: { borderColor: colors.fg }
   }),
   /**
    * Declaration order is application order: `radius` overrides the radius `size` set, and
@@ -244,13 +176,7 @@ var buttonRecipe = createRecipe({
    */
   variants: {
     size: {
-      xs: sizeAxis({
-        size: "xs",
-        padding: 3,
-        gap: 1,
-        glyph: "sm",
-        radius: "3xl"
-      }),
+      xs: sizeAxis({ size: "xs", padding: 3, gap: 1, glyph: "sm", radius: "3xl" }),
       sm: sizeAxis({
         size: "sm",
         padding: 3.5,
@@ -258,30 +184,13 @@ var buttonRecipe = createRecipe({
         glyph: "md",
         radius: "3xl"
       }),
-      md: sizeAxis({
-        size: "md",
-        padding: 4,
-        gap: 2,
-        glyph: "lg",
-        radius: "3xl"
-      }),
-      lg: sizeAxis({
-        size: "lg",
-        padding: 5,
-        gap: 2.5,
-        glyph: "xl",
-        radius: "4xl"
-      })
+      md: sizeAxis({ size: "md", padding: 4, gap: 2, glyph: "lg", radius: "3xl" }),
+      lg: sizeAxis({ size: "lg", padding: 5, gap: 2.5, glyph: "xl", radius: "4xl" })
     },
     radius: radiusAxis("root"),
     // A square on a fixed height. No width is computed, and none needs to be.
     isIconOnly: {
-      true: () => ({
-        root: {
-          paddingHorizontal: 0,
-          aspectRatio: 1
-        }
-      })
+      true: () => ({ root: { paddingHorizontal: 0, aspectRatio: 1 } })
     }
   },
   /**
@@ -292,27 +201,18 @@ var buttonRecipe = createRecipe({
    * presses through the same OKLab formula as a token one.
    */
   states: {
-    pressed: (_theme, colors) => ({
-      root: {
-        backgroundColor: colors.bgPressed
-      }
-    }),
-    disabled: theme => ({
-      root: {
-        opacity: theme.opacity.disabled
-      }
-    })
+    pressed: (_theme, colors) => ({ root: { backgroundColor: colors.bgPressed } }),
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
   },
-  defaultVariants: {
-    variant: "primary",
-    size: "md"
-  }
+  defaultVariants: { variant: "primary", size: "md" }
 });
 
 // src/components/button/button.utils.ts
 import { Children, isValidElement } from "react";
 function containsElementOfType(children, type) {
-  return Children.toArray(children).some(child => isValidElement(child) && child.type === type);
+  return Children.toArray(children).some(
+    (child) => isValidElement(child) && child.type === type
+  );
 }
 
 // src/components/button/button.tsx
@@ -336,31 +236,16 @@ var ButtonRoot = forwardRef2(function Button({
 }, ref) {
   const theme = useXAUITheme();
   const [styleProps, rest] = useStyleProps(props);
-  const [isPressed, press] = usePressState({
-    onPressIn,
-    onPressOut
-  });
+  const [isPressed, press] = usePressState({ onPressIn, onPressOut });
   const selection = {
     variant,
     size,
     radius,
     isIconOnly: isIconOnly ? "true" : void 0
   };
-  const states = {
-    pressed: isPressed,
-    disabled: isDisabled || isLoading
-  };
-  const styles = buttonRecipe.resolve({
-    theme,
-    selection,
-    states
-  });
-  const tint = color ? buttonRecipe.tint({
-    theme,
-    color,
-    selection,
-    states
-  }) : void 0;
+  const states = { pressed: isPressed, disabled: isDisabled || isLoading };
+  const styles = buttonRecipe.resolve({ theme, selection, states });
+  const tint = color ? buttonRecipe.tint({ theme, color, selection, states }) : void 0;
   const context = useMemo(() => {
     const icon = StyleSheet.flatten([styles.icon, tint?.icon]);
     return {
@@ -376,17 +261,22 @@ var ButtonRoot = forwardRef2(function Button({
       isLoading
     };
   }, [styles, tint, isDisabled, isLoading]);
-  const rootStyle = [styles.root, tint?.root, styleProps, typeof style === "function" ? style({
-    pressed: isPressed
-  }) : style];
+  const rootStyle = [
+    styles.root,
+    tint?.root,
+    styleProps,
+    typeof style === "function" ? style({ pressed: isPressed }) : style
+  ];
   const text = childrenToString(children);
   const showSpinner = isLoading && !containsElementOfType(children, ButtonSpinner);
   if (isIconOnly && !rest.accessibilityLabel && !rest["aria-label"]) {
-    warnDev("Button: an icon-only button needs an `accessibilityLabel` \u2014 there is no text for a screen reader to read, so it announces as an unlabelled button.");
+    warnDev(
+      "Button: an icon-only button needs an `accessibilityLabel` \u2014 there is no text for a screen reader to read, so it announces as an unlabelled button."
+    );
   }
-  return /* @__PURE__ */jsx4(ButtonProvider, {
-    value: context,
-    children: /* @__PURE__ */jsx4(PressableFeedback, {
+  return /* @__PURE__ */ jsx4(ButtonProvider, { value: context, children: /* @__PURE__ */ jsx4(
+    PressableFeedback,
+    {
       ref,
       isPressed,
       isDisabled: isDisabled || isLoading,
@@ -401,13 +291,12 @@ var ButtonRoot = forwardRef2(function Button({
       style: rootStyle,
       onPressIn: press.onPressIn,
       onPressOut: press.onPressOut,
-      children: asChild ? children : /* @__PURE__ */jsxs(Fragment, {
-        children: [showSpinner ? /* @__PURE__ */jsx4(ButtonSpinner, {}) : null, text !== null ? /* @__PURE__ */jsx4(ButtonLabel, {
-          children: text
-        }) : children]
-      })
-    })
-  });
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        showSpinner ? /* @__PURE__ */ jsx4(ButtonSpinner, {}) : null,
+        text !== null ? /* @__PURE__ */ jsx4(ButtonLabel, { children: text }) : children
+      ] })
+    }
+  ) });
 });
 ButtonRoot.displayName = "XAUI.Button.Root";
 
@@ -417,4 +306,9 @@ var Button2 = Object.assign(ButtonRoot, {
   Icon: ButtonIcon,
   Spinner: ButtonSpinner
 });
-export { useButton, buttonRecipe, Button2 as Button };
+
+export {
+  useButton,
+  buttonRecipe,
+  Button2 as Button
+};

package/dist/chunk-GLGU2WFL.cjs

@@ -0,0 +1,190 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkMC7SY2QHcjs = require('./chunk-MC7SY2QH.cjs');
+
+// src/system/slot/merge-refs.ts
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(value);
+      else if (ref) ref.current = value;
+    }
+  };
+}
+
+// src/system/style-props/use-style-props.ts
+var _react = require('react');
+
+// src/utils/style-props.ts
+var STYLE_PROP_KEYS = [
+  // Flex and layout
+  "alignContent",
+  "alignItems",
+  "alignSelf",
+  "aspectRatio",
+  "boxSizing",
+  "columnGap",
+  "direction",
+  "display",
+  "flex",
+  "flexBasis",
+  "flexDirection",
+  "flexGrow",
+  "flexShrink",
+  "flexWrap",
+  "gap",
+  "justifyContent",
+  "overflow",
+  "rowGap",
+  // Position
+  "bottom",
+  "end",
+  "inset",
+  "insetBlock",
+  "insetBlockEnd",
+  "insetBlockStart",
+  "insetInline",
+  "insetInlineEnd",
+  "insetInlineStart",
+  "position",
+  "start",
+  "top",
+  "zIndex",
+  // Margin
+  "margin",
+  "marginBlock",
+  "marginBlockEnd",
+  "marginBlockStart",
+  "marginBottom",
+  "marginEnd",
+  "marginHorizontal",
+  "marginInline",
+  "marginInlineEnd",
+  "marginInlineStart",
+  "marginStart",
+  "marginTop",
+  "marginVertical",
+  // Padding
+  "padding",
+  "paddingBlock",
+  "paddingBlockEnd",
+  "paddingBlockStart",
+  "paddingBottom",
+  "paddingEnd",
+  "paddingHorizontal",
+  "paddingInline",
+  "paddingInlineEnd",
+  "paddingInlineStart",
+  "paddingStart",
+  "paddingTop",
+  "paddingVertical",
+  // Size
+  "height",
+  "maxHeight",
+  "maxWidth",
+  "minHeight",
+  "minWidth",
+  "width",
+  // Border
+  "borderBlockColor",
+  "borderBlockEndColor",
+  "borderBlockStartColor",
+  "borderBottomColor",
+  "borderBottomEndRadius",
+  "borderBottomStartRadius",
+  "borderBottomWidth",
+  "borderColor",
+  "borderCurve",
+  "borderEndColor",
+  "borderEndEndRadius",
+  "borderEndStartRadius",
+  "borderEndWidth",
+  "borderRadius",
+  "borderStartColor",
+  "borderStartEndRadius",
+  "borderStartStartRadius",
+  "borderStartWidth",
+  "borderStyle",
+  "borderTopColor",
+  "borderTopEndRadius",
+  "borderTopStartRadius",
+  "borderTopWidth",
+  "borderWidth",
+  // Fill, shadow, and the rest of a box's paint
+  "backfaceVisibility",
+  "backgroundColor",
+  "boxShadow",
+  "cursor",
+  "elevation",
+  "experimental_backgroundImage",
+  "filter",
+  "isolation",
+  "mixBlendMode",
+  "opacity",
+  "outlineColor",
+  "outlineOffset",
+  "outlineStyle",
+  "outlineWidth",
+  "shadowColor",
+  "shadowOffset",
+  "shadowOpacity",
+  "shadowRadius",
+  // Transform
+  "rotation",
+  "scaleX",
+  "scaleY",
+  "transform",
+  "transformMatrix",
+  "transformOrigin",
+  "translateX",
+  "translateY",
+  // Text — a text slot only
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontVariant",
+  "fontWeight",
+  "includeFontPadding",
+  "letterSpacing",
+  "lineHeight",
+  "textAlign",
+  "textAlignVertical",
+  "textDecorationColor",
+  "textDecorationLine",
+  "textDecorationStyle",
+  "textShadowColor",
+  "textShadowOffset",
+  "textShadowRadius",
+  "textTransform",
+  "userSelect",
+  "verticalAlign",
+  "writingDirection",
+  // Image — an image slot only
+  "objectFit",
+  "overlayColor",
+  "resizeMode",
+  "tintColor"
+];
+var STYLE_PROP_KEY_SET = new Set(STYLE_PROP_KEYS);
+function splitStyleProps(props) {
+  const styleProps = {};
+  const rest = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (STYLE_PROP_KEY_SET.has(key)) styleProps[key] = value;
+    else rest[key] = value;
+  }
+  return [styleProps, rest];
+}
+
+// src/system/style-props/use-style-props.ts
+function useStyleProps(props) {
+  const [styleProps, rest] = splitStyleProps(props);
+  const key = _chunkMC7SY2QHcjs.stableHash.call(void 0, styleProps);
+  return [_react.useMemo.call(void 0, () => styleProps, [key]), rest];
+}
+
+
+
+
+exports.mergeRefs = mergeRefs; exports.useStyleProps = useStyleProps;