@xaui/native 0.9.1-alpha.90 → 0.9.1-alpha.92

package/dist/{chunk-4XZWVJZL.cjs → chunk-QUSQEYLP.cjs}

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
-var _chunk5YEMZL4Ccjs = require('./chunk-5YEMZL4C.cjs');
+var _chunkCBRW53GNcjs = require('./chunk-CBRW53GN.cjs');
 
 
 var _chunkYSTLHVQVcjs = require('./chunk-YSTLHVQV.cjs');
 
 
-var _chunkA2JNZMDJcjs = require('./chunk-A2JNZMDJ.cjs');
+var _chunk2B6PUYTPcjs = require('./chunk-2B6PUYTP.cjs');
 
 
-var _chunkD2UYBAGBcjs = require('./chunk-D2UYBAGB.cjs');
+var _chunkIPD3IUE2cjs = require('./chunk-IPD3IUE2.cjs');
 
 
-var _chunkSDLDRTT7cjs = require('./chunk-SDLDRTT7.cjs');
+var _chunkUEW3GAP5cjs = require('./chunk-UEW3GAP5.cjs');
 
 
 var _chunkISHMSP6Pcjs = require('./chunk-ISHMSP6P.cjs');
@@ -25,7 +25,7 @@ var _chunkJ5COSALOcjs = require('./chunk-J5COSALO.cjs');
 var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
 
 
-var _chunkPIU3JONRcjs = require('./chunk-PIU3JONR.cjs');
+var _chunkOW4N2C3Mcjs = require('./chunk-OW4N2C3M.cjs');
 
 
 var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
@@ -235,7 +235,7 @@ var DateTimePickerSteps = _react.forwardRef.call(void 0, function DateTimePicker
     time: timeText
   };
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkA2JNZMDJcjs.Tabs,
+    _chunk2B6PUYTPcjs.Tabs,
     {
       ref,
       value: step,
@@ -243,9 +243,9 @@ var DateTimePickerSteps = _react.forwardRef.call(void 0, function DateTimePicker
       isDisabled,
       ...props,
       style: [{ marginBottom: theme.spacing(2) }, style],
-      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkA2JNZMDJcjs.Tabs.List, { style: { alignSelf: "center" }, children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA2JNZMDJcjs.Tabs.Indicator, {}),
-        STEPS.map((name) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA2JNZMDJcjs.Tabs.Trigger, { value: name, children: _nullishCoalesce(_nullishCoalesce(shown[name], () => ( _optionalChain([labels, 'optionalAccess', _4 => _4[name]]))), () => ( name)) }, name))
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunk2B6PUYTPcjs.Tabs.List, { style: { alignSelf: "center" }, children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2B6PUYTPcjs.Tabs.Indicator, {}),
+        STEPS.map((name) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk2B6PUYTPcjs.Tabs.Trigger, { value: name, children: _nullishCoalesce(_nullishCoalesce(shown[name], () => ( _optionalChain([labels, 'optionalAccess', _4 => _4[name]]))), () => ( name)) }, name))
       ] })
     }
   );
@@ -262,10 +262,10 @@ function DateTimePickerSheet({
   ...props
 }) {
   const picker = useDateTimePicker();
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2, { isOpen: picker.isOpen, onOpenChange: picker.setOpen, ...props, children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2.Overlay, {}),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2.Content, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DateTimePickerProvider, { value: picker, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkD2UYBAGBcjs.BottomSheet2.Handle, {}),
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2, { isOpen: picker.isOpen, onOpenChange: picker.setOpen, ...props, children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2.Overlay, {}),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2.Content, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DateTimePickerProvider, { value: picker, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkIPD3IUE2cjs.BottomSheet2.Handle, {}),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DateTimePickerSteps, { labels: stepLabels }),
       picker.step === "date" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         DateTimePickerCalendar,
@@ -285,7 +285,7 @@ function DateTimePickerCalendar({
 }) {
   const { value, onPickDate, calendar } = useDateTimePicker();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunkSDLDRTT7cjs.Calendar,
+    _chunkUEW3GAP5cjs.Calendar,
     {
       size: calendar.size,
       color: calendar.color,
@@ -296,13 +296,13 @@ function DateTimePickerCalendar({
       onValueChange: onPickDate,
       ...props,
       children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkSDLDRTT7cjs.Calendar.Header, { children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSDLDRTT7cjs.Calendar.PreviousButton, { accessibilityLabel: previousLabel }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSDLDRTT7cjs.Calendar.Title, {}),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSDLDRTT7cjs.Calendar.NextButton, { accessibilityLabel: nextLabel })
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkUEW3GAP5cjs.Calendar.Header, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.PreviousButton, { accessibilityLabel: previousLabel }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.Title, {}),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.NextButton, { accessibilityLabel: nextLabel })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSDLDRTT7cjs.Calendar.Weekdays, {}),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkSDLDRTT7cjs.Calendar.Grid, {})
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.Weekdays, {}),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUEW3GAP5cjs.Calendar.Grid, {})
       ]
     }
   );
@@ -311,7 +311,7 @@ DateTimePickerCalendar.displayName = "XAUI.DateTimePicker.Calendar";
 function DateTimePickerClock(props) {
   const { value, onPickTime, clock } = useDateTimePicker();
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-    _chunk5YEMZL4Ccjs.TimePicker2,
+    _chunkCBRW53GNcjs.TimePicker2,
     {
       size: clock.size,
       color: clock.color,
@@ -323,8 +323,8 @@ function DateTimePickerClock(props) {
       closeOnSelect: false,
       ...props,
       children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5YEMZL4Ccjs.TimePicker2.Display, { style: { alignSelf: "center" } }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5YEMZL4Ccjs.TimePicker2.Clock, { style: { alignSelf: "center" } })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCBRW53GNcjs.TimePicker2.Display, { style: { alignSelf: "center" } }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCBRW53GNcjs.TimePicker2.Clock, { style: { alignSelf: "center" } })
       ]
     }
   );
@@ -335,7 +335,7 @@ DateTimePickerClock.displayName = "XAUI.DateTimePicker.Clock";
 
 function DateTimePickerIndicator(props) {
   const { glyph } = useDateTimePicker();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5YEMZL4Ccjs.TimePickerIndicator, { ...props }) });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCBRW53GNcjs.TimePickerIndicator, { ...props }) });
 }
 DateTimePickerIndicator.displayName = "XAUI.DateTimePicker.Indicator";
 
@@ -366,7 +366,7 @@ var DateTimePickerTrigger = _react.forwardRef.call(void 0,
     const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
     const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkGSZDN6EZcjs.IconContext.Provider, { value: glyph, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkPIU3JONRcjs.PressableFeedback,
+      _chunkOW4N2C3Mcjs.PressableFeedback,
       {
         ref,
         isPressed,

package/dist/chunk-RCSEVEIR.js

@@ -0,0 +1,422 @@
+import {
+  containsElementOfType
+} from "./chunk-7J3M62W5.js";
+import {
+  useControllableState
+} from "./chunk-F6W3JQ7K.js";
+import {
+  PressableFeedback
+} from "./chunk-2AFA5HA2.js";
+import {
+  usePressState
+} from "./chunk-423RQBOX.js";
+import {
+  Icon
+} from "./chunk-JN6IRT2M.js";
+import {
+  createRecipe,
+  radiusAxis
+} from "./chunk-DKVXTMIJ.js";
+import {
+  createSlotContext
+} from "./chunk-TTZOIXKE.js";
+import {
+  warnDev
+} from "./chunk-EGLLDKN6.js";
+import {
+  useXAUITheme
+} from "./chunk-Z6JBWRPL.js";
+import {
+  useStyleProps
+} from "./chunk-M63GFNKV.js";
+
+// src/components/morph-button/morph-button-face.tsx
+import { forwardRef } from "react";
+import Animated from "react-native-reanimated";
+
+// src/components/morph-button/morph-button.animation.ts
+import { Easing, FadeIn, FadeOut, LinearTransition } from "react-native-reanimated";
+var MORPH_SPRING = { stiffness: 1400, damping: 110, mass: 3 };
+function morphTransition(spring) {
+  return LinearTransition.springify().stiffness(spring.stiffness).damping(spring.damping).mass(spring.mass);
+}
+var FACE_MS = 140;
+var faceEntering = FadeIn.duration(FACE_MS).easing(Easing.out(Easing.ease));
+var faceExiting = FadeOut.duration(FACE_MS).easing(Easing.in(Easing.ease));
+
+// src/components/morph-button/morph-button.context.ts
+var [MorphButtonProvider, useMorphButton] = createSlotContext("MorphButton");
+
+// src/components/morph-button/morph-button-face.tsx
+import { jsx } from "react/jsx-runtime";
+function face(which, name) {
+  const Component = forwardRef(function MorphButtonFace({ children, style, ...props }, ref) {
+    const { isExpanded, collapsedStyle, expandedStyle, animation } = useMorphButton();
+    const [styleProps, rest] = useStyleProps(props);
+    if (isExpanded !== (which === "expanded")) return null;
+    return /* @__PURE__ */ jsx(
+      Animated.View,
+      {
+        ref,
+        entering: animation ? faceEntering : void 0,
+        exiting: animation ? faceExiting : void 0,
+        ...rest,
+        style: [
+          which === "expanded" ? expandedStyle : collapsedStyle,
+          styleProps,
+          style
+        ],
+        children
+      }
+    );
+  });
+  Component.displayName = name;
+  return Component;
+}
+var MorphButtonCollapsed = face("collapsed", "XAUI.MorphButton.Collapsed");
+var MorphButtonExpanded = face("expanded", "XAUI.MorphButton.Expanded");
+
+// src/components/morph-button/morph-button-icon.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function MorphButtonIcon({ size, color, ...rest }) {
+  const { icon } = useMorphButton();
+  return /* @__PURE__ */ jsx2(Icon, { size: size ?? icon.size, color: color ?? icon.color, ...rest });
+}
+MorphButtonIcon.displayName = "XAUI.MorphButton.Icon";
+
+// src/components/morph-button/morph-button-text.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Text } from "react-native";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function text(slot, lines, name) {
+  const Component = forwardRef2(function MorphButtonText({ children, style, numberOfLines = lines, ...props }, ref) {
+    const context = useMorphButton();
+    const [styleProps, rest] = useStyleProps(props);
+    return /* @__PURE__ */ jsx3(
+      Text,
+      {
+        ref,
+        numberOfLines,
+        style: [context[slot], styleProps, style],
+        ...rest,
+        children
+      }
+    );
+  });
+  Component.displayName = name;
+  return Component;
+}
+var MorphButtonLabel = text("labelStyle", 1, "XAUI.MorphButton.Label");
+var MorphButtonTitle = text(
+  "titleStyle",
+  void 0,
+  "XAUI.MorphButton.Title"
+);
+var MorphButtonDescription = text(
+  "descriptionStyle",
+  void 0,
+  "XAUI.MorphButton.Description"
+);
+
+// src/components/morph-button/morph-button.tsx
+import { forwardRef as forwardRef3, useCallback, useEffect, useMemo, useRef } from "react";
+import { StyleSheet } from "react-native";
+
+// src/components/morph-button/morph-button.recipe.ts
+var SLOTS = [
+  "root",
+  "collapsed",
+  "expanded",
+  "label",
+  "title",
+  "description",
+  "icon"
+];
+var VARIANT_TOKENS = {
+  primary: { bg: "accent", bgPressed: "accentPressed", fg: "accentForeground" },
+  secondary: {
+    bg: "accentSoft",
+    bgPressed: "accentSoftPressed",
+    fg: "accentSoftForeground"
+  },
+  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" },
+  "danger-soft": {
+    bg: "dangerSoft",
+    bgPressed: "dangerSoftPressed",
+    fg: "dangerSoftForeground"
+  }
+};
+var DESCRIPTION_OPACITY = 0.72;
+function sharedCorner(theme, height) {
+  return theme.controlHeights[height] / 2;
+}
+function sizeAxis(step) {
+  const { height, inset, gap, padding, stack, label, title, description, glyph } = step;
+  return (theme) => ({
+    root: { borderRadius: sharedCorner(theme, height) },
+    collapsed: {
+      height: theme.controlHeights[height],
+      paddingHorizontal: theme.spacing(inset),
+      gap: theme.spacing(gap)
+    },
+    expanded: { padding: theme.spacing(padding), gap: theme.spacing(stack) },
+    label: {
+      fontSize: theme.fontSizes[label],
+      lineHeight: theme.lineHeights[label]
+    },
+    title: {
+      fontSize: theme.fontSizes[title],
+      lineHeight: theme.lineHeights[title]
+    },
+    description: {
+      fontSize: theme.fontSizes[description],
+      lineHeight: theme.lineHeights[description]
+    },
+    icon: { fontSize: theme.fontSizes[glyph] }
+  });
+}
+var SIZES = {
+  sm: {
+    height: "sm",
+    inset: 3.5,
+    gap: 1.5,
+    padding: 4,
+    stack: 1,
+    label: "sm",
+    title: "md",
+    description: "xs",
+    glyph: "md"
+  },
+  md: {
+    height: "md",
+    inset: 4,
+    gap: 2,
+    padding: 5,
+    stack: 1.5,
+    label: "md",
+    title: "lg",
+    description: "sm",
+    glyph: "lg"
+  },
+  lg: {
+    height: "lg",
+    inset: 5,
+    gap: 2.5,
+    padding: 6,
+    stack: 2,
+    label: "lg",
+    title: "xl",
+    description: "md",
+    glyph: "xl"
+  }
+};
+var morphButtonRecipe = createRecipe({
+  slots: SLOTS,
+  base: (theme) => ({
+    root: {
+      // No width and no height: the faces carry the measurements, so the box is the size of
+      // whichever one is mounted. RN's own `alignItems: 'stretch'` is what lets the card
+      // fill the box the pill's label sized.
+      borderWidth: 0,
+      // The entering face is at its final size while the box is still travelling, so
+      // without this the card's content is drawn outside the shape for the length of the
+      // spring. Clipped, the same frames read as the shape revealing it.
+      overflow: "hidden",
+      // iOS's squircle, and what keeps a corner this large reading as a shape rather than
+      // as two arcs meeting a straight edge.
+      borderCurve: "continuous"
+    },
+    collapsed: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    label: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium
+    },
+    title: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.semibold
+    },
+    description: {
+      fontFamily: theme.fontFamilies.body,
+      opacity: DESCRIPTION_OPACITY
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * Where the variant's colours land, for every variant at once — the `Button`'s `paint`,
+   * with the card's two text slots reading the same foreground as the pill's label. The
+   * border width follows the *presence* of the border role rather than a per-variant flag.
+   */
+  paint: (theme, colors) => ({
+    root: {
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      borderWidth: colors.border ? theme.borderWidth.default : 0
+    },
+    label: { color: colors.fg },
+    title: { color: colors.fg },
+    description: { color: colors.fg },
+    icon: { color: colors.fg }
+  }),
+  /** Declaration order is application order: `radius` overrides the corner `size` derived. */
+  variants: {
+    size: {
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    radius: radiusAxis("root")
+  },
+  /**
+   * The pressed colour is the variant's own `…Pressed` token rather than a
+   * `PressableFeedback.Highlight`, exactly as on the `Button`: a control picks one
+   * treatment or the other, and both would darken it twice.
+   */
+  states: {
+    pressed: (_theme, colors) => ({ root: { backgroundColor: colors.bgPressed } }),
+    disabled: (theme) => ({ root: { opacity: theme.opacity.disabled } })
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+
+// src/components/morph-button/morph-button.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var MorphButtonRoot = forwardRef3(
+  function MorphButton({
+    children,
+    variant,
+    size,
+    radius,
+    color,
+    isExpanded: controlledExpanded,
+    defaultExpanded = false,
+    onExpandedChange,
+    animation = true,
+    isDisabled = false,
+    asChild = false,
+    accessibilityRole = "button",
+    accessibilityState,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const theme = useXAUITheme();
+    const [styleProps, rest] = useStyleProps(props);
+    const [isPressed, press] = usePressState({ onPressIn, onPressOut });
+    const [isExpanded, setExpanded] = useControllableState({
+      value: controlledExpanded,
+      defaultValue: defaultExpanded,
+      onChange: onExpandedChange
+    });
+    const selection = { variant, size, radius };
+    const states = { pressed: isPressed, disabled: isDisabled };
+    const styles = morphButtonRecipe.resolve({ theme, selection, states });
+    const tint = color ? morphButtonRecipe.tint({ theme, color, selection, states }) : void 0;
+    const hasMorphed = useRef(false);
+    useEffect(() => {
+      hasMorphed.current = true;
+    }, [isExpanded]);
+    const toggle = useCallback(() => {
+      if (isDisabled) return;
+      setExpanded((current) => !current);
+    }, [isDisabled, setExpanded]);
+    const handlePress = useCallback(
+      (event) => {
+        onPress?.(event);
+        toggle();
+      },
+      [onPress, toggle]
+    );
+    const transition = useMemo(() => {
+      if (animation === false) return void 0;
+      const tuned = animation === true ? MORPH_SPRING : { ...MORPH_SPRING, ...animation };
+      return morphTransition(tuned);
+    }, [animation]);
+    const context = useMemo(() => {
+      const icon = StyleSheet.flatten([styles.icon, tint?.icon]);
+      return {
+        collapsedStyle: styles.collapsed,
+        expandedStyle: styles.expanded,
+        labelStyle: tint ? [styles.label, tint.label] : styles.label,
+        titleStyle: tint ? [styles.title, tint.title] : styles.title,
+        descriptionStyle: tint ? [styles.description, tint.description] : styles.description,
+        icon: {
+          size: icon.fontSize,
+          // `ColorValue` also covers the platform's opaque colours, which `Icon` cannot
+          // hand to a third-party component expecting a string.
+          color: typeof icon.color === "string" ? icon.color : void 0
+        },
+        isExpanded,
+        toggle,
+        isDisabled,
+        animation: animation !== false && hasMorphed.current
+      };
+    }, [styles, tint, isExpanded, toggle, isDisabled, animation]);
+    const rootStyle = [
+      styles.root,
+      tint?.root,
+      styleProps,
+      typeof style === "function" ? style({ pressed: isPressed }) : style
+    ];
+    if (!asChild && !containsElementOfType(children, MorphButtonCollapsed) && !containsElementOfType(children, MorphButtonExpanded)) {
+      warnDev(
+        "MorphButton: neither a `MorphButton.Collapsed` nor a `MorphButton.Expanded` is composed, so one of the two shapes is empty. The two faces are the API \u2014 a bare string cannot be auto-wrapped, because it could belong to either."
+      );
+    }
+    return /* @__PURE__ */ jsx4(MorphButtonProvider, { value: context, children: /* @__PURE__ */ jsx4(
+      PressableFeedback,
+      {
+        ref,
+        isPressed,
+        isDisabled,
+        asChild,
+        layout: transition,
+        accessibilityRole,
+        accessibilityState: {
+          expanded: isExpanded,
+          disabled: isDisabled,
+          ...accessibilityState
+        },
+        ...rest,
+        style: rootStyle,
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children
+      }
+    ) });
+  }
+);
+MorphButtonRoot.displayName = "XAUI.MorphButton.Root";
+
+// src/components/morph-button/index.ts
+var MorphButton2 = Object.assign(MorphButtonRoot, {
+  Collapsed: MorphButtonCollapsed,
+  Expanded: MorphButtonExpanded,
+  Label: MorphButtonLabel,
+  Title: MorphButtonTitle,
+  Description: MorphButtonDescription,
+  Icon: MorphButtonIcon
+});
+
+export {
+  MORPH_SPRING,
+  useMorphButton,
+  MorphButtonCollapsed,
+  MorphButtonExpanded,
+  MorphButtonIcon,
+  MorphButtonLabel,
+  MorphButtonTitle,
+  MorphButtonDescription,
+  morphButtonRecipe,
+  MorphButtonRoot,
+  MorphButton2 as MorphButton
+};

package/dist/{chunk-GOKUBJIK.js → chunk-RLC3EXMV.js}

@@ -1,13 +1,13 @@
 import {
   CloseButtonBase,
   closeButtonGeometry
-} from "./chunk-4BAKKBHJ.js";
+} from "./chunk-USIWPESU.js";
 import {
   useControllableState
 } from "./chunk-F6W3JQ7K.js";
 import {
   PressableFeedback
-} from "./chunk-XZ42OWKC.js";
+} from "./chunk-2AFA5HA2.js";
 import {
   usePressState
 } from "./chunk-423RQBOX.js";

package/dist/{chunk-BLYKQD47.cjs → chunk-RREJUSAS.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
 
-var _chunk67WT74DYcjs = require('./chunk-67WT74DY.cjs');
+var _chunkZE4IHUUOcjs = require('./chunk-ZE4IHUUO.cjs');
 
 
 var _chunkGSZDN6EZcjs = require('./chunk-GSZDN6EZ.cjs');
@@ -34,7 +34,7 @@ var _jsxruntime = require('react/jsx-runtime');
 var AlertClose = _react.forwardRef.call(void 0, function AlertClose2({ isDisabled, ...props }, ref) {
   const { closeStyle, closeGlyphStyle, isDisabled: isAlertDisabled } = useAlert();
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunk67WT74DYcjs.CloseButtonBase,
+    _chunkZE4IHUUOcjs.CloseButtonBase,
     {
       ref,
       name: "Alert.Close",
@@ -196,7 +196,7 @@ var alertRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
   // The cross's own geometry — thickness and centring — belongs to the shared
   // `CloseButtonBase`; what stays below is the box and bar size this component's scale sets.
   base: (theme) => ({
-    ..._chunk67WT74DYcjs.closeButtonGeometry.call(void 0, theme),
+    ..._chunkZE4IHUUOcjs.closeButtonGeometry.call(void 0, theme),
     root: {
       flexDirection: "row",
       // Top-aligned, not centred: an alert's message can run to three lines, and an icon

package/dist/{chunk-BLDMKFIG.js → chunk-RSIWSVXI.js}

@@ -18,7 +18,7 @@ import {
 } from "./chunk-F6W3JQ7K.js";
 import {
   PressableFeedback
-} from "./chunk-XZ42OWKC.js";
+} from "./chunk-2AFA5HA2.js";
 import {
   usePressState
 } from "./chunk-423RQBOX.js";

package/dist/{chunk-5VYB7F3H.js → chunk-RXEUKYM5.js}

@@ -21,7 +21,7 @@ import {
 } from "./chunk-F6W3JQ7K.js";
 import {
   PressableFeedback
-} from "./chunk-XZ42OWKC.js";
+} from "./chunk-2AFA5HA2.js";
 import {
   usePressState
 } from "./chunk-423RQBOX.js";

package/dist/{chunk-WRW4JBB4.js → chunk-SUJLTC2K.js}

@@ -1,12 +1,12 @@
 import {
   useAnchorRef
 } from "./chunk-734MFAX4.js";
-import {
-  containsElementOfType
-} from "./chunk-7J3M62W5.js";
 import {
   useRotation
 } from "./chunk-3GFRSZYR.js";
+import {
+  containsElementOfType
+} from "./chunk-7J3M62W5.js";
 import {
   useAnchoredPosition
 } from "./chunk-Z6FRP4EV.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk-F6W3JQ7K.js";
 import {
   PressableFeedback
-} from "./chunk-XZ42OWKC.js";
+} from "./chunk-2AFA5HA2.js";
 import {
   usePressState
 } from "./chunk-423RQBOX.js";