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

package/dist/chunk-RD3ZUUBC.cjs

@@ -0,0 +1,760 @@
+"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 _chunkYSZ4K6L6cjs = require('./chunk-YSZ4K6L6.cjs');
+
+
+
+
+
+
+var _chunk377XFATDcjs = require('./chunk-377XFATD.cjs');
+
+
+var _chunk7EIHHOHPcjs = require('./chunk-7EIHHOHP.cjs');
+
+
+var _chunkPIU3JONRcjs = require('./chunk-PIU3JONR.cjs');
+
+
+var _chunk7DPL3ZDScjs = require('./chunk-7DPL3ZDS.cjs');
+
+
+var _chunkFHNIGHN5cjs = require('./chunk-FHNIGHN5.cjs');
+
+
+
+var _chunkSL3V7R2Ycjs = require('./chunk-SL3V7R2Y.cjs');
+
+
+var _chunkCDRGTUYFcjs = require('./chunk-CDRGTUYF.cjs');
+
+
+
+
+
+var _chunkIIAQISBGcjs = require('./chunk-IIAQISBG.cjs');
+
+
+var _chunkTK44VBIEcjs = require('./chunk-TK44VBIE.cjs');
+
+// src/components/color-picker/color-picker-content.tsx
+var _react = require('react');
+
+// src/components/color-picker/color-picker-grid.tsx
+
+var _reactnative = require('react-native');
+
+// src/components/color-picker/color-picker-group.tsx
+
+
+
+// src/components/color-picker/color-picker.context.ts
+var [ColorPickerProvider, useColorPicker] = _chunkCDRGTUYFcjs.createSlotContext.call(void 0, "ColorPicker");
+
+// src/components/color-picker/color-picker-group.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var ColorPickerGroup = _react.forwardRef.call(void 0, 
+  function ColorPickerGroup2({ name, children, style, ...props }, ref) {
+    const { groupStyle, groupLabelStyle, swatchesStyle } = useColorPicker();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const text = _chunkFHNIGHN5cjs.childrenToString.call(void 0, name);
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _reactnative.View, { ref, ...rest, style: [groupStyle, styleProps, style], children: [
+      text !== null ? (
+        // One line, always: the column's width is what aligns the ramps, and a name that
+        // wrapped inside it would make its own row taller than the seventeen others.
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.Text, { numberOfLines: 1, style: groupLabelStyle, children: text })
+      ) : name,
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: swatchesStyle, children })
+    ] });
+  }
+);
+ColorPickerGroup.displayName = "XAUI.ColorPicker.Group";
+
+// src/components/color-picker/color-picker-swatch.tsx
+
+
+
+var ColorPickerSwatch = _react.forwardRef.call(void 0, 
+  function ColorPickerSwatch2({
+    color,
+    accessibilityLabel,
+    accessibilityState,
+    style,
+    onPress,
+    onPressIn,
+    onPressOut,
+    ...props
+  }, ref) {
+    const {
+      value,
+      select,
+      isDisabled,
+      swatchStyle,
+      swatchSelectedStyle,
+      swatchFillStyle
+    } = useColorPicker();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const [isPressed, press] = _chunk7DPL3ZDScjs.usePressState.call(void 0, { onPressIn, onPressOut });
+    const isSelected = sameColor(value, color);
+    const handlePress = _react.useCallback.call(void 0, 
+      (event) => {
+        _optionalChain([onPress, 'optionalCall', _ => _(event)]);
+        select(color);
+      },
+      [color, onPress, select]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      _chunkPIU3JONRcjs.PressableFeedback,
+      {
+        ref,
+        isPressed,
+        isDisabled,
+        accessibilityRole: "radio",
+        accessibilityLabel: _nullishCoalesce(accessibilityLabel, () => ( color)),
+        accessibilityState: {
+          disabled: isDisabled,
+          selected: isSelected,
+          checked: isSelected,
+          ...accessibilityState
+        },
+        ...rest,
+        style: [
+          swatchStyle,
+          styleProps,
+          typeof style === "function" ? style({ pressed: isPressed }) : style
+        ],
+        onPress: handlePress,
+        onPressIn: press.onPressIn,
+        onPressOut: press.onPressOut,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { style: [swatchFillStyle, { backgroundColor: color }] }),
+          isSelected ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactnative.View, { pointerEvents: "none", style: swatchSelectedStyle }) : null
+        ]
+      }
+    );
+  }
+);
+ColorPickerSwatch.displayName = "XAUI.ColorPicker.Swatch";
+function sameColor(value, color) {
+  if (value === void 0) return false;
+  if (!_chunkIIAQISBGcjs.isHex.call(void 0, value) || !_chunkIIAQISBGcjs.isHex.call(void 0, color)) return value === color;
+  return _chunkIIAQISBGcjs.rgbToHex.call(void 0, _chunkIIAQISBGcjs.hexToRgb.call(void 0, value)) === _chunkIIAQISBGcjs.rgbToHex.call(void 0, _chunkIIAQISBGcjs.hexToRgb.call(void 0, color));
+}
+
+// src/components/color-picker/color-picker.style.ts
+
+var MAX_HEIGHT = "75%";
+var colorPickerSheet = _reactnative.StyleSheet.create({
+  previewEmpty: { borderStyle: "dashed", backgroundColor: "transparent" },
+  panel: { flexShrink: 1, maxHeight: MAX_HEIGHT },
+  grid: { flexShrink: 1 }
+});
+
+// src/components/color-picker/color-picker-grid.tsx
+
+var ColorPickerGrid = _react.forwardRef.call(void 0, 
+  function ColorPickerGrid2({
+    children,
+    accessibilityRole = "radiogroup",
+    contentContainerStyle,
+    style,
+    ...props
+  }, ref) {
+    const { colors, layout, gridStyle } = useColorPicker();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.ScrollView,
+      {
+        ref,
+        accessibilityRole,
+        ...rest,
+        contentContainerStyle: [gridStyle, contentContainerStyle],
+        style: [colorPickerSheet.grid, styleProps, style],
+        children: _nullishCoalesce(children, () => ( colors.map((group) => (
+          // A mosaic has no names — that is what lets its rows close up — and the group
+          // renders no label when it is given none.
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            ColorPickerGroup,
+            {
+              name: layout === "mosaic" ? void 0 : group.name,
+              children: group.swatches.map((swatch) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                ColorPickerSwatch,
+                {
+                  color: swatch.value,
+                  accessibilityLabel: `${group.name} ${swatch.shade}`
+                },
+                swatch.value
+              ))
+            },
+            group.name
+          )
+        ))))
+      }
+    );
+  }
+);
+ColorPickerGrid.displayName = "XAUI.ColorPicker.Grid";
+
+// src/components/color-picker/color-picker-content.tsx
+
+var ColorPickerContent = _react.forwardRef.call(void 0, 
+  function ColorPickerContent2({ children, style, ...props }, ref) {
+    const context = useColorPicker();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunk377XFATDcjs.DialogContent,
+      {
+        ref,
+        ...rest,
+        style: [context.contentStyle, colorPickerSheet.panel, styleProps, style],
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColorPickerProvider, { value: context, children: _nullishCoalesce(children, () => ( /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColorPickerGrid, {}))) })
+      }
+    );
+  }
+);
+ColorPickerContent.displayName = "XAUI.ColorPicker.Content";
+
+// src/components/color-picker/color-picker-field.tsx
+
+
+var ColorPickerField = _react.forwardRef.call(void 0, 
+  function ColorPickerField2({ value, ...props }, ref) {
+    const { value: chosen } = useColorPicker();
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkYSZ4K6L6cjs.DummyFieldField, { ref, value: _nullishCoalesce(value, () => ( _optionalChain([chosen, 'optionalAccess', _2 => _2.toUpperCase, 'call', _3 => _3()]))), ...props });
+  }
+);
+ColorPickerField.displayName = "XAUI.ColorPicker.Field";
+
+// src/components/color-picker/color-picker-preview.tsx
+
+
+
+var ColorPickerPreview = _react.forwardRef.call(void 0, 
+  function ColorPickerPreview2({ color, style, ...props }, ref) {
+    const { value, previewStyle, previewEmptyStyle } = useColorPicker();
+    const [styleProps, rest] = _chunkTK44VBIEcjs.useStyleProps.call(void 0, props);
+    const shown = _nullishCoalesce(color, () => ( value));
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _reactnative.View,
+      {
+        ref,
+        ...rest,
+        style: [
+          previewStyle,
+          // After the context's, because that one already carries the chosen colour: a
+          // `color` written here is the caller's and has to win over it.
+          color ? { backgroundColor: color } : void 0,
+          shown ? void 0 : previewEmptyStyle,
+          styleProps,
+          style
+        ]
+      }
+    );
+  }
+);
+ColorPickerPreview.displayName = "XAUI.ColorPicker.Preview";
+
+// src/components/color-picker/color-picker.tsx
+
+
+// src/components/color-picker/color-picker.palette.ts
+var SHADES = ["100", "200", "300", "400", "500", "600", "700", "800"];
+function ramp(name, values) {
+  return {
+    name,
+    swatches: SHADES.map((shade, index) => ({
+      shade,
+      value: values[index]
+    }))
+  };
+}
+var TAILWIND_PALETTE = [
+  ramp("Red", [
+    "#fee2e2",
+    "#fecaca",
+    "#fca5a5",
+    "#f87171",
+    "#ef4444",
+    "#dc2626",
+    "#b91c1c",
+    "#991b1b"
+  ]),
+  ramp("Orange", [
+    "#ffedd5",
+    "#fed7aa",
+    "#fdba74",
+    "#fb923c",
+    "#f97316",
+    "#ea580c",
+    "#c2410c",
+    "#9a3412"
+  ]),
+  ramp("Amber", [
+    "#fef3c7",
+    "#fde68a",
+    "#fcd34d",
+    "#fbbf24",
+    "#f59e0b",
+    "#d97706",
+    "#b45309",
+    "#92400e"
+  ]),
+  ramp("Yellow", [
+    "#fef9c3",
+    "#fef08a",
+    "#fde047",
+    "#facc15",
+    "#eab308",
+    "#ca8a04",
+    "#a16207",
+    "#854d0e"
+  ]),
+  ramp("Lime", [
+    "#ecfccb",
+    "#d9f99d",
+    "#bef264",
+    "#a3e635",
+    "#84cc16",
+    "#65a30d",
+    "#4d7c0f",
+    "#3f6212"
+  ]),
+  ramp("Green", [
+    "#dcfce7",
+    "#bbf7d0",
+    "#86efac",
+    "#4ade80",
+    "#22c55e",
+    "#16a34a",
+    "#15803d",
+    "#166534"
+  ]),
+  ramp("Emerald", [
+    "#d1fae5",
+    "#a7f3d0",
+    "#6ee7b7",
+    "#34d399",
+    "#10b981",
+    "#059669",
+    "#047857",
+    "#065f46"
+  ]),
+  ramp("Teal", [
+    "#ccfbf1",
+    "#99f6e4",
+    "#5eead4",
+    "#2dd4bf",
+    "#14b8a6",
+    "#0d9488",
+    "#0f766e",
+    "#115e59"
+  ]),
+  ramp("Cyan", [
+    "#cffafe",
+    "#a5f3fc",
+    "#67e8f9",
+    "#22d3ee",
+    "#06b6d4",
+    "#0891b2",
+    "#0e7490",
+    "#155e75"
+  ]),
+  ramp("Sky", [
+    "#e0f2fe",
+    "#bae6fd",
+    "#7dd3fc",
+    "#38bdf8",
+    "#0ea5e9",
+    "#0284c7",
+    "#0369a1",
+    "#075985"
+  ]),
+  ramp("Blue", [
+    "#dbeafe",
+    "#bfdbfe",
+    "#93c5fd",
+    "#60a5fa",
+    "#3b82f6",
+    "#2563eb",
+    "#1d4ed8",
+    "#1e40af"
+  ]),
+  ramp("Indigo", [
+    "#e0e7ff",
+    "#c7d2fe",
+    "#a5b4fc",
+    "#818cf8",
+    "#6366f1",
+    "#4f46e5",
+    "#4338ca",
+    "#3730a3"
+  ]),
+  ramp("Violet", [
+    "#ede9fe",
+    "#ddd6fe",
+    "#c4b5fd",
+    "#a78bfa",
+    "#8b5cf6",
+    "#7c3aed",
+    "#6d28d9",
+    "#5b21b6"
+  ]),
+  ramp("Purple", [
+    "#f3e8ff",
+    "#e9d5ff",
+    "#d8b4fe",
+    "#c084fc",
+    "#a855f7",
+    "#9333ea",
+    "#7e22ce",
+    "#6b21a8"
+  ]),
+  ramp("Fuchsia", [
+    "#fae8ff",
+    "#f5d0fe",
+    "#f0abfc",
+    "#e879f9",
+    "#d946ef",
+    "#c026d3",
+    "#a21caf",
+    "#86198f"
+  ]),
+  ramp("Pink", [
+    "#fce7f3",
+    "#fbcfe8",
+    "#f9a8d4",
+    "#f472b6",
+    "#ec4899",
+    "#db2777",
+    "#be185d",
+    "#9d174d"
+  ]),
+  ramp("Rose", [
+    "#ffe4e6",
+    "#fecdd3",
+    "#fda4af",
+    "#fb7185",
+    "#f43f5e",
+    "#e11d48",
+    "#be123c",
+    "#9f1239"
+  ]),
+  ramp("Zinc", [
+    "#f4f4f5",
+    "#e4e4e7",
+    "#d4d4d8",
+    "#a1a1aa",
+    "#71717a",
+    "#52525b",
+    "#3f3f46",
+    "#27272a"
+  ])
+];
+
+// src/components/color-picker/color-picker.recipe.ts
+var SLOTS = [
+  "content",
+  "preview",
+  "grid",
+  "group",
+  "groupLabel",
+  "swatches",
+  "swatch",
+  "swatchSelected",
+  "swatchFill"
+];
+var VARIANT_TOKENS = {
+  // A single entry, and it is still a table: `resolveTint` maps the roles a variant
+  // declared, so `border` is what carries a raw `color` onto the ring below. The field's
+  // own tint travels through the `DummyField`'s table rather than this one.
+  default: { border: "accent" }
+};
+var SIZES = {
+  xs: { cell: 6, chip: 4, pad: 4, labelGap: 1, stackGap: 1.5, label: "xs" },
+  sm: { cell: 7, chip: 5, pad: 4, labelGap: 1.25, stackGap: 1.5, label: "xs" },
+  md: { cell: 8, chip: 5, pad: 4, labelGap: 1.5, stackGap: 2, label: "sm" },
+  // The label holds at `sm`: a hue's name is a caption beside a bar rather than body copy,
+  // and letting the type grow here would take the width straight off the colour.
+  lg: { cell: 9, chip: 6, pad: 4, labelGap: 1.75, stackGap: 2, label: "sm" }
+};
+var LABEL_WIDTH = 4;
+var RING = 2;
+function sizeAxis(step) {
+  const { cell, chip, pad, labelGap, stackGap, label } = step;
+  return (theme) => {
+    const side = theme.spacing(cell);
+    const chipSide = theme.spacing(chip);
+    return {
+      content: { padding: theme.spacing(pad) },
+      preview: {
+        width: chipSide,
+        height: chipSide,
+        borderRadius: theme.radius.sm
+      },
+      grid: { gap: theme.spacing(stackGap) },
+      group: { gap: theme.spacing(labelGap) },
+      groupLabel: {
+        width: theme.fontSizes[label] * LABEL_WIDTH,
+        fontSize: theme.fontSizes[label],
+        lineHeight: theme.lineHeights[label]
+      },
+      // A basis rather than a width, and square whatever it ends up: `aspectRatio` takes
+      // the height off the width the row actually granted.
+      swatch: { flexBasis: side, flexGrow: 0, flexShrink: 1, aspectRatio: 1 },
+      swatchSelected: { borderWidth: theme.borderWidth.default * RING }
+    };
+  };
+}
+var colorPickerRecipe = _chunkSL3V7R2Ycjs.createRecipe.call(void 0, {
+  slots: SLOTS,
+  base: (theme) => ({
+    // The chip carries a hairline for the reason the bar below does: a white swatch on a
+    // white sheet is nothing at all without one.
+    preview: {
+      borderWidth: theme.borderWidth.default,
+      borderColor: theme.colors.border,
+      borderCurve: "continuous"
+    },
+    // A row, so the name reads beside the ramp and the eighteen of them stack in half the
+    // height. Centred on the cross axis: a caption level with the bar it names.
+    group: { flexDirection: "row", alignItems: "center" },
+    groupLabel: {
+      fontFamily: theme.fontFamilies.body,
+      fontWeight: theme.fontWeights.medium,
+      color: theme.colors.muted
+    },
+    /**
+     * The ramp is a **square bar**: no gap between its cells and no corner on either end.
+     * A rounded end would put a curve on two of the eight colours and leave the other six
+     * square, which reads as a bar that has been cut rather than one that stops — and the
+     * corner is the one shape a swatch cannot afford, because it is the shape of the
+     * colour itself.
+     *
+     * The hairline is the grid's only edge. One around the bar rather than one around each
+     * cell: per-cell borders double up into a two-point line between every pair of colours,
+     * and what actually needs an outline is the pale end of a ramp against a white sheet.
+     *
+     * `overflow` is for the `radius` axis rather than for the default — a caller who asks
+     * for a corner gets one, and the cells inside are clipped to it.
+     */
+    swatches: {
+      flexDirection: "row",
+      // No `gap`: the cells of one ramp touch. What separates two ramps is `grid`'s.
+      //
+      // No `flexWrap` either, and no `flexGrow`: the bar is as wide as its cells want to be
+      // and shrinks with them when the row is narrower than that. Wrapping would break a
+      // ramp in half and growing would leave a hairline around empty ground on a group of
+      // four swatches.
+      flexShrink: 1,
+      overflow: "hidden",
+      borderWidth: theme.borderWidth.default,
+      borderColor: theme.colors.border
+    },
+    swatchFill: { flex: 1 },
+    // Over the cell rather than around it — see `RING`. R13: `start` and `end`, never
+    // `left` and `right`, so the ring mirrors with the row it sits in.
+    swatchSelected: {
+      position: "absolute",
+      top: 0,
+      bottom: 0,
+      start: 0,
+      end: 0,
+      borderCurve: "continuous"
+    }
+  }),
+  variantTokens: VARIANT_TOKENS,
+  /**
+   * The ring's colour, on a slot of its own.
+   *
+   * It is `paint` rather than a `isSelected` axis because **the tint pass re-runs `paint`
+   * and the states, not the axes** — a ring painted from an axis would stay the accent on a
+   * picker whose `color` is the caller's own.
+   */
+  paint: (_theme, colors) => ({ swatchSelected: { borderColor: colors.border } }),
+  variants: {
+    size: {
+      xs: sizeAxis(SIZES.xs),
+      sm: sizeAxis(SIZES.sm),
+      md: sizeAxis(SIZES.md),
+      lg: sizeAxis(SIZES.lg)
+    },
+    /**
+     * Every colour touching every other, with nothing named.
+     *
+     * Declared after `size` so it overrides what the cell chose, and it is one axis rather
+     * than two props because the two halves are the same decision: the names were the only
+     * thing holding the rows apart, so dropping them is what lets the block close up. The
+     * width they were taking goes back to the colour — the cells **grow** here where they
+     * only shrink in a ramp, so eight of them divide the whole row instead of stopping at
+     * their basis, which is what makes a mosaic cell half again the size.
+     *
+     * The hairline moves with the shape it describes. Around each ramp it would double into
+     * a two-point line between every pair of rows, so in a mosaic it is the block's own
+     * edge — and the block fills the row, which is what makes a full-width border right
+     * here and wrong in a ramp.
+     */
+    layout: {
+      ramps: () => ({}),
+      mosaic: (theme) => ({
+        grid: {
+          gap: 0,
+          overflow: "hidden",
+          borderWidth: theme.borderWidth.default,
+          borderColor: theme.colors.border
+        },
+        swatches: { flexGrow: 1, borderWidth: 0 },
+        swatch: { flexGrow: 1 }
+      })
+    },
+    /** Declared last, so it overrides the corner the block, the bar and the chip chose. */
+    radius: _chunkSL3V7R2Ycjs.radiusAxis.call(void 0, "grid", "swatches", "preview")
+  },
+  /**
+   * The grid dims as a whole rather than swatch by swatch, which is the treatment the
+   * field above it already gets from the `DummyField`'s own recipe. It only ever shows on
+   * a grid written **without** a dialog: a disabled field cannot be opened, so there is no
+   * panel to dim.
+   */
+  states: {
+    disabled: (theme) => ({ grid: { opacity: theme.opacity.disabled } })
+  },
+  // `variant` is named even though the table has one entry: without it the selection
+  // resolves to `undefined`, `paint` is handed an empty set of colours, and the ring's
+  // `borderColor` comes out `undefined` — so the chosen swatch is drawn with no ring at
+  // all. `createRecipe` warns about exactly this now.
+  defaultVariants: { variant: "default", size: "md", layout: "ramps" }
+});
+
+// src/components/color-picker/color-picker.tsx
+
+var ColorPickerRoot = _react.forwardRef.call(void 0, 
+  function ColorPicker({
+    children,
+    variant,
+    size = "md",
+    radius,
+    color,
+    labelPlacement,
+    layout = "ramps",
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    isOpen: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    colors = TAILWIND_PALETTE,
+    closeOnSelect = true,
+    isInvalid = false,
+    isDisabled = false,
+    asChild = false,
+    ...props
+  }, ref) {
+    const theme = _chunkIIAQISBGcjs.useXAUITheme.call(void 0, );
+    const [value, setValue] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+      value: controlledValue,
+      defaultValue,
+      onChange: onValueChange
+    });
+    const [isOpen, setOpen] = _chunk7EIHHOHPcjs.useControllableState.call(void 0, {
+      value: controlledOpen,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    });
+    const selection = { size, radius, layout };
+    const styles = colorPickerRecipe.resolve({
+      theme,
+      selection,
+      states: { disabled: isDisabled }
+    });
+    const tint = color ? colorPickerRecipe.tint({ theme, color, selection }) : void 0;
+    const open = _react.useCallback.call(void 0, () => {
+      if (!isDisabled) setOpen(true);
+    }, [isDisabled, setOpen]);
+    const select = _react.useCallback.call(void 0, 
+      (next) => {
+        if (isDisabled) return;
+        setValue(next);
+        if (closeOnSelect) setOpen(false);
+      },
+      [closeOnSelect, isDisabled, setOpen, setValue]
+    );
+    const context = _react.useMemo.call(void 0, 
+      () => ({
+        value,
+        select,
+        colors,
+        layout,
+        isDisabled,
+        contentStyle: styles.content,
+        // The chip carries the answer, so the answer is part of its style rather than a
+        // prop the slot merges: a raw colour resolves outside the cache, like every other
+        // value the caller invents.
+        previewStyle: [
+          styles.preview,
+          value ? { backgroundColor: value } : void 0
+        ],
+        previewEmptyStyle: colorPickerSheet.previewEmpty,
+        gridStyle: styles.grid,
+        groupStyle: styles.group,
+        groupLabelStyle: styles.groupLabel,
+        swatchesStyle: styles.swatches,
+        swatchStyle: styles.swatch,
+        swatchSelectedStyle: tint ? [styles.swatchSelected, tint.swatchSelected] : styles.swatchSelected,
+        swatchFillStyle: styles.swatchFill
+      }),
+      [value, select, colors, layout, isDisabled, styles, tint]
+    );
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ColorPickerProvider, { value: context, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk377XFATDcjs.Dialog, { isOpen, onOpenChange: setOpen, isDisabled, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkYSZ4K6L6cjs.DummyFieldRoot,
+      {
+        ref,
+        variant,
+        size,
+        radius,
+        color,
+        labelPlacement,
+        isInvalid,
+        isDisabled,
+        asChild,
+        onPress: open,
+        ...props,
+        children
+      }
+    ) }) });
+  }
+);
+ColorPickerRoot.displayName = "XAUI.ColorPicker.Root";
+
+// src/components/color-picker/index.ts
+var ColorPicker2 = Object.assign(ColorPickerRoot, {
+  Label: _chunkYSZ4K6L6cjs.DummyFieldLabel,
+  Preview: ColorPickerPreview,
+  Field: ColorPickerField,
+  Description: _chunkYSZ4K6L6cjs.DummyFieldDescription,
+  Error: _chunkYSZ4K6L6cjs.DummyFieldError,
+  Overlay: _chunk377XFATDcjs.DialogOverlay,
+  Content: ColorPickerContent,
+  Title: _chunk377XFATDcjs.DialogTitle,
+  Close: _chunk377XFATDcjs.DialogClose,
+  Grid: ColorPickerGrid,
+  Group: ColorPickerGroup,
+  Swatch: ColorPickerSwatch
+});
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.useColorPicker = useColorPicker; exports.ColorPickerGroup = ColorPickerGroup; exports.ColorPickerSwatch = ColorPickerSwatch; exports.ColorPickerGrid = ColorPickerGrid; exports.ColorPickerContent = ColorPickerContent; exports.ColorPickerField = ColorPickerField; exports.ColorPickerPreview = ColorPickerPreview; exports.TAILWIND_PALETTE = TAILWIND_PALETTE; exports.colorPickerRecipe = colorPickerRecipe; exports.ColorPickerRoot = ColorPickerRoot; exports.ColorPicker = ColorPicker2;