prime-ui-kit 0.15.0 → 0.17.0

package/dist/chunks/{chunk-6TI4DSM5.js → chunk-PRP4B6OG.js}

@@ -2,7 +2,7 @@
 
 import {
   defineGlyph
-} from "./chunk-Q3BFRQHZ.js";
+} from "./chunk-2ODXLPW3.js";
 
 // src/icons/glyphs/a-arrow-down.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/chunks/{chunk-2IKH55MI.js → chunk-SVFWPLNW.js}

@@ -3,6 +3,7 @@
 import {
   Button,
   ColorSwatches,
+  FieldActionButton,
   FieldFrame,
   Icon,
   Input,
@@ -10,36 +11,54 @@ import {
   Select,
   SurfaceDepthProvider,
   SwatchChip,
+  checkerboardClass,
   createComponentContext,
+  fieldInputTextClass,
   fieldSurfaceClass,
+  fieldTierClass,
   fieldTriggerClass,
   toDataAttributes,
   useControllableState,
   useFieldFrame,
-  useInheritedDisabled
-} from "./chunk-XJAVS6FH.js";
+  useInheritedDisabled,
+  useLabels,
+  useOpenState
+} from "./chunk-7WWZYGRC.js";
 import {
-  cx
-} from "./chunk-Q3BFRQHZ.js";
+  cx,
+  useHostTier
+} from "./chunk-2ODXLPW3.js";
 
 // src/components/color-field/ColorField.tsx
-import * as React2 from "react";
-import { parseColor as parseColor2 } from "react-aria-components";
+import * as React3 from "react";
 
 // src/components/color-picker/ColorPicker.tsx
-import * as React from "react";
+import * as React2 from "react";
 import {
   ColorArea as AriaColorArea,
   ColorPicker as AriaColorPicker,
   ColorSlider as AriaColorSlider,
   ColorThumb as AriaColorThumb,
-  SliderOutput as AriaSliderOutput,
   SliderTrack as AriaSliderTrack,
   ColorPickerStateContext,
+  ColorSliderStateContext,
   composeRenderProps,
-  parseColor
+  parseColor,
+  useLocale
 } from "react-aria-components";
 
+// src/hooks/useDraft.ts
+import * as React from "react";
+function useDraft(source) {
+  const inputRef = React.useRef(null);
+  const [draft, setDraft] = React.useState(source);
+  React.useEffect(() => {
+    if (inputRef.current && document.activeElement === inputRef.current) return;
+    setDraft(source);
+  }, [source]);
+  return { inputRef, draft, setDraft };
+}
+
 // src/components/color-picker/ColorPicker.module.css
 var ColorPicker_default = {
   panel: "ColorPicker_panel",
@@ -49,7 +68,6 @@ var ColorPicker_default = {
   sliderValue: "ColorPicker_sliderValue",
   sliderTrack: "ColorPicker_sliderTrack",
   thumb: "ColorPicker_thumb",
-  thumbArea: "ColorPicker_thumbArea",
   area: "ColorPicker_area",
   formatSelectWrap: "ColorPicker_formatSelectWrap",
   channelStrip: "ColorPicker_channelStrip",
@@ -59,6 +77,7 @@ var ColorPicker_default = {
   channelInput: "ColorPicker_channelInput",
   channelCellHex: "ColorPicker_channelCellHex",
   channelSuffix: "ColorPicker_channelSuffix",
+  swatchButton: "ColorPicker_swatchButton",
   eyeDropperSquare: "ColorPicker_eyeDropperSquare"
 };
 
@@ -68,6 +87,7 @@ var COLOR_PICKER_LABELS = {
   format: "\u0424\u043E\u0440\u043C\u0430\u0442 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0439 \u0446\u0432\u0435\u0442\u0430",
   eyeDropper: "\u041F\u0438\u043F\u0435\u0442\u043A\u0430",
   hex: "Hex",
+  palette: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u043F\u0430\u043B\u0438\u0442\u0440\u0443",
   hue: "\u041E\u0442\u0442\u0435\u043D\u043E\u043A, \u0433\u0440\u0430\u0434\u0443\u0441\u044B",
   saturation: "\u041D\u0430\u0441\u044B\u0449\u0435\u043D\u043D\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
   lightness: "\u042F\u0440\u043A\u043E\u0441\u0442\u044C, \u043F\u0440\u043E\u0446\u0435\u043D\u0442\u044B",
@@ -76,10 +96,10 @@ var COLOR_PICKER_LABELS = {
   green: "\u0417\u0435\u043B\u0451\u043D\u044B\u0439, 0\u2013255",
   blue: "\u0421\u0438\u043D\u0438\u0439, 0\u2013255"
 };
-var CHECKER_BG = "repeating-conic-gradient(var(--prime-color-layer-current) 0deg 90deg, var(--prime-color-fill-strong) 90deg 180deg) 0% 0% / var(--prime-space-2) var(--prime-space-2)";
+var CHECKER_LAYER = "var(--swatch-checker) 0% 0% / var(--prime-space-2) var(--prime-space-2)";
 var [ColorPickerProvider, useColorPickerContext] = createComponentContext("ColorPicker");
 function useColorState() {
-  const state = React.useContext(ColorPickerStateContext);
+  const state = React2.useContext(ColorPickerStateContext);
   if (!state) throw new Error("ColorPicker parts must be used inside <ColorPicker.Root>.");
   return state;
 }
@@ -88,13 +108,7 @@ function toHexText(color) {
 }
 function useColorDraft(read, parse) {
   const state = useColorState();
-  const inputRef = React.useRef(null);
-  const [text, setText] = React.useState(() => read(state.color));
-  const fingerprint = state.color.toString("hexa");
-  React.useEffect(() => {
-    if (inputRef.current && document.activeElement === inputRef.current) return;
-    setText(read(state.color));
-  }, [fingerprint]);
+  const { inputRef, draft: text, setDraft: setText } = useDraft(read(state.color));
   const commit = () => {
     const next = parse(text.trim(), state.color);
     if (next) state.setColor(next);
@@ -110,13 +124,13 @@ function onCommitKeyDown(commit) {
     event.currentTarget.blur();
   };
 }
-var parseHex = (text) => {
+function parseHex(text) {
   try {
     return parseColor(text);
   } catch {
     return null;
   }
-};
+}
 var FORMAT_LABELS = { hsl: "HSL", rgb: "RGB", hex: "Hex" };
 var isFormat = (value) => value in FORMAT_LABELS;
 function FormatSelect({ className, ...rest }) {
@@ -158,13 +172,13 @@ function ChannelField({
     (color) => displayChannelValue(color, channel, space),
     (value, color) => parseChannelValue(value, color, channel, space)
   );
-  return /* @__PURE__ */ jsxs("label", { className: cx(fieldSurfaceClass, ColorPicker_default.channelCell), children: [
+  return /* @__PURE__ */ jsxs("label", { className: cx(fieldTierClass, fieldSurfaceClass, ColorPicker_default.channelCell), "data-size": "s", children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         ref: inputRef,
         "aria-label": labels[channel],
-        className: ColorPicker_default.channelInput,
+        className: cx(fieldInputTextClass, ColorPicker_default.channelInput),
         inputMode: "decimal",
         value: text,
         onBlur: commit,
@@ -178,30 +192,37 @@ function ChannelField({
 function StripHexField() {
   const { labels } = useColorPickerContext();
   const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
-  return /* @__PURE__ */ jsx("label", { className: cx(fieldSurfaceClass, ColorPicker_default.channelCell, ColorPicker_default.channelCellHex), children: /* @__PURE__ */ jsx(
-    "input",
+  return /* @__PURE__ */ jsx(
+    "label",
     {
-      ref: inputRef,
-      "aria-label": labels.hex,
-      autoCapitalize: "off",
-      autoCorrect: "off",
-      className: ColorPicker_default.channelInput,
-      spellCheck: false,
-      value: text,
-      onBlur: commit,
-      onChange: (e) => setText(e.target.value),
-      onKeyDown: onCommitKeyDown(commit)
+      className: cx(fieldTierClass, fieldSurfaceClass, ColorPicker_default.channelCell, ColorPicker_default.channelCellHex),
+      "data-size": "s",
+      children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          "aria-label": labels.hex,
+          autoCapitalize: "off",
+          autoCorrect: "off",
+          className: cx(fieldInputTextClass, ColorPicker_default.channelInput),
+          spellCheck: false,
+          value: text,
+          onBlur: commit,
+          onChange: (e) => setText(e.target.value),
+          onKeyDown: onCommitKeyDown(commit)
+        }
+      )
     }
-  ) });
+  );
 }
-function ChannelStrip({ className, focusRing = true, ...rest }) {
+function ChannelStrip({ className, focusRing, ...rest }) {
   const { format } = useColorPickerContext();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ...rest,
       className: cx(ColorPicker_default.channelStrip, className),
-      "data-focus-ring": focusRing ? void 0 : "false",
+      ...toDataAttributes({ "focus-ring": focusRing }),
       children: [
         /* @__PURE__ */ jsx("div", { className: ColorPicker_default.channelStripLead, children: /* @__PURE__ */ jsx(EyeDropperButton, { className: ColorPicker_default.channelStripEyedropperBtn }) }),
         format === "hex" ? /* @__PURE__ */ jsx(StripHexField, {}) : format === "hsl" ? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -239,31 +260,51 @@ function ColorPickerRoot({
   value,
   defaultValue,
   onValueChange,
+  format: formatProp,
   defaultFormat = "hsl",
+  onFormatChange,
+  size: sizeProp,
   labels: labelsProp,
   children
 }) {
-  const [format, setFormat] = React.useState(defaultFormat);
-  const labels = React.useMemo(() => ({ ...COLOR_PICKER_LABELS, ...labelsProp }), [labelsProp]);
-  const contextValue = React.useMemo(() => ({ format, setFormat, labels }), [format, labels]);
-  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx(AriaColorPicker, { value, defaultValue, onChange: onValueChange, children }) });
+  const tier = useHostTier(sizeProp);
+  const [format, setFormat] = useControllableState({
+    value: formatProp,
+    defaultValue: defaultFormat,
+    onChange: onFormatChange
+  });
+  const labels = useLabels(COLOR_PICKER_LABELS, labelsProp);
+  const contextValue = React2.useMemo(
+    () => ({ format, setFormat, labels }),
+    [format, setFormat, labels]
+  );
+  return tier.provide(
+    /* @__PURE__ */ jsx(ColorPickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx(AriaColorPicker, { value, defaultValue, onChange: onValueChange, children }) })
+  );
 }
 ColorPickerRoot.displayName = "ColorPicker.Root";
+var SliderChannelContext = React2.createContext(null);
 function Slider({ className, disabled, ...props }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(SliderChannelContext.Provider, { value: props.channel, children: /* @__PURE__ */ jsx(
     AriaColorSlider,
     {
       className: composeRenderProps(className, (c) => cx(ColorPicker_default.slider, c)),
       isDisabled: useInheritedDisabled(disabled),
       ...props
     }
-  );
+  ) });
+}
+function sliderValueLabel(color, channel, locale) {
+  const raw = color.getChannelValue(channel);
+  const rounded = channel === "alpha" ? Math.round(raw * 100) / 100 : Math.round(raw);
+  return color.withChannelValue(channel, rounded).formatChannelValue(channel, locale);
 }
 function Area({ className, disabled, ...props }) {
   return /* @__PURE__ */ jsx(
     AriaColorArea,
     {
-      className: composeRenderProps(className, (c) => cx(ColorPicker_default.area, c)),
+      className: composeRenderProps(className, (c) => cx(fieldTierClass, ColorPicker_default.area, c)),
+      "data-size": "l",
       isDisabled: useInheritedDisabled(disabled),
       ...props
     }
@@ -273,11 +314,11 @@ function SliderTrack({ className, style, ...props }) {
   return /* @__PURE__ */ jsx(
     AriaSliderTrack,
     {
-      className: composeRenderProps(className, (c) => cx(ColorPicker_default.sliderTrack, c)),
+      className: composeRenderProps(className, (c) => cx(checkerboardClass, ColorPicker_default.sliderTrack, c)),
       style: (renderProps) => {
         const fromUser = typeof style === "function" ? style(renderProps) : style;
         const baseBg = renderProps.defaultStyle.background;
-        const layered = renderProps.isDisabled || baseBg === void 0 ? baseBg : `${String(baseBg)}, ${CHECKER_BG}`;
+        const layered = renderProps.isDisabled || baseBg === void 0 ? baseBg : `${String(baseBg)}, ${CHECKER_LAYER}`;
         return {
           ...renderProps.defaultStyle,
           ...fromUser,
@@ -297,15 +338,6 @@ function Thumb({ className, ...props }) {
     }
   );
 }
-function AreaThumb({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    AriaColorThumb,
-    {
-      className: composeRenderProps(className, (c) => cx(ColorPicker_default.thumbArea, c)),
-      ...props
-    }
-  );
-}
 function Swatches(props) {
   const state = useColorState();
   return /* @__PURE__ */ jsx(
@@ -319,12 +351,15 @@ function Swatches(props) {
 }
 Swatches.displayName = "ColorPicker.Swatches";
 function SliderMeta({ label, className, ...rest }) {
+  const slider = React2.useContext(ColorSliderStateContext);
+  const channel = React2.useContext(SliderChannelContext);
+  const { locale } = useLocale();
   return /* @__PURE__ */ jsxs("div", { ...rest, className: cx(ColorPicker_default.sliderHeader, className), children: [
     /* @__PURE__ */ jsx("span", { className: ColorPicker_default.sliderLabel, children: label }),
-    /* @__PURE__ */ jsx(AriaSliderOutput, { className: ColorPicker_default.sliderValue })
+    /* @__PURE__ */ jsx("output", { className: ColorPicker_default.sliderValue, "aria-live": "off", children: slider && channel ? sliderValueLabel(slider.value, channel, locale) : null })
   ] });
 }
-function HexInput({ label, hint, error, focusRing = true, ...rest }) {
+function HexInput({ label, hint, error, focusRing, children, ...rest }) {
   const { labels } = useColorPickerContext();
   const { inputRef, text, setText, commit } = useColorDraft(toHexText, parseHex);
   return /* @__PURE__ */ jsx(
@@ -335,19 +370,22 @@ function HexInput({ label, hint, error, focusRing = true, ...rest }) {
       hint,
       error,
       focusRing,
-      children: /* @__PURE__ */ jsx(Input.Wrapper, { children: /* @__PURE__ */ jsx(
-        Input.Field,
-        {
-          ref: inputRef,
-          autoCapitalize: "off",
-          autoCorrect: "off",
-          spellCheck: false,
-          value: text,
-          onBlur: commit,
-          onChange: (e) => setText(e.target.value),
-          onKeyDown: onCommitKeyDown(commit)
-        }
-      ) })
+      children: /* @__PURE__ */ jsxs(Input.Wrapper, { children: [
+        /* @__PURE__ */ jsx(
+          Input.Field,
+          {
+            ref: inputRef,
+            autoCapitalize: "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            value: text,
+            onBlur: commit,
+            onChange: (e) => setText(e.target.value),
+            onKeyDown: onCommitKeyDown(commit)
+          }
+        ),
+        children
+      ] })
     }
   );
 }
@@ -362,8 +400,7 @@ function EyeDropperButton({
 }) {
   const { labels } = useColorPickerContext();
   const state = useColorState();
-  const EyeDropperApi = typeof window === "undefined" ? void 0 : window.EyeDropper;
-  const supported = EyeDropperApi !== void 0;
+  const supported = React2.useSyncExternalStore(subscribeNever, eyeDropperSupported, () => false);
   return /* @__PURE__ */ jsx(
     Button.Root,
     {
@@ -378,6 +415,7 @@ function EyeDropperButton({
       className: cx(ColorPicker_default.eyeDropperSquare, className),
       onClick: (e) => {
         onClick?.(e);
+        const EyeDropperApi = window.EyeDropper;
         if (e.defaultPrevented || !EyeDropperApi) return;
         void new EyeDropperApi().open().then((result) => state.setColor(parseColor(result.sRGBHex))).catch(() => {
         });
@@ -388,20 +426,36 @@ function EyeDropperButton({
   );
 }
 EyeDropperButton.displayName = "ColorPicker.EyeDropperButton";
+var subscribeNever = () => () => {
+};
+var eyeDropperSupported = () => window.EyeDropper !== void 0;
 function TriggerSwatch(props) {
   const state = useColorState();
   return /* @__PURE__ */ jsx(SwatchChip, { ...props, value: state.color.toString("css") });
 }
 TriggerSwatch.displayName = "ColorPicker.TriggerSwatch";
+function SwatchButton({ className, ...rest }) {
+  const { labels } = useColorPickerContext();
+  return /* @__PURE__ */ jsx(
+    FieldActionButton,
+    {
+      ...rest,
+      label: labels.palette,
+      className: cx(ColorPicker_default.swatchButton, className),
+      children: /* @__PURE__ */ jsx(TriggerSwatch, {})
+    }
+  );
+}
+SwatchButton.displayName = "ColorPicker.SwatchButton";
 var ColorPicker = {
   Root: ColorPickerRoot,
   Panel,
   TriggerSwatch,
+  SwatchButton,
   FormatSelect,
   ChannelStrip,
   HexInput,
   Area,
-  AreaThumb,
   Slider,
   SliderMeta,
   SliderTrack,
@@ -422,31 +476,31 @@ var ColorField_default = {
 // src/components/color-field/ColorField.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var COLOR_FIELD_LABELS = {
-  ...COLOR_PICKER_LABELS,
+  eyeDropper: COLOR_PICKER_LABELS.eyeDropper,
+  hex: COLOR_PICKER_LABELS.hex,
+  hue: COLOR_PICKER_LABELS.hue,
+  saturation: COLOR_PICKER_LABELS.saturation,
+  lightness: COLOR_PICKER_LABELS.lightness,
+  alpha: COLOR_PICKER_LABELS.alpha,
+  red: COLOR_PICKER_LABELS.red,
+  green: COLOR_PICKER_LABELS.green,
+  blue: COLOR_PICKER_LABELS.blue,
   optional: "\u043D\u0435\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E",
+  required: "\u043E\u0431\u044F\u0437\u0430\u0442\u0435\u043B\u044C\u043D\u043E\u0435 \u043F\u043E\u043B\u0435",
   presets: "\u0413\u043E\u0442\u043E\u0432\u044B\u0435 \u0446\u0432\u0435\u0442\u0430"
 };
 var FALLBACK_COLOR = "#000000";
-function readColor(text, fallback) {
-  try {
-    return parseColor2(text);
-  } catch {
-    return fallback;
-  }
-}
-function toHex(color, alpha) {
-  return color.toString(alpha && color.getChannelValue("alpha") < 1 ? "hexa" : "hex");
-}
+var toHex = (color, alpha) => toHexText(alpha ? color : color.withChannelValue("alpha", 1));
 function ColorField({
   value: valueProp,
   defaultValue = FALLBACK_COLOR,
   onValueChange,
   presets,
   alpha = false,
-  size = "m",
+  size: sizeProp,
   disabled: disabledProp = false,
   invalid: invalidProp,
-  focusRing = true,
+  focusRing,
   name,
   id,
   label,
@@ -461,21 +515,29 @@ function ColorField({
   labels: labelsProp,
   ...rest
 }) {
+  const tier = useHostTier(sizeProp);
+  const { size } = tier;
   const disabled = useInheritedDisabled(disabledProp);
-  const labels = React2.useMemo(() => ({ ...COLOR_FIELD_LABELS, ...labelsProp }), [labelsProp]);
-  const ids = useFieldFrame(id, { hint, error, invalid: invalidProp }, ariaDescribedBy);
+  const labels = useLabels(COLOR_FIELD_LABELS, labelsProp);
+  const ids = useFieldFrame(
+    id,
+    { label, hint, error, invalid: invalidProp, required },
+    ariaDescribedBy
+  );
   const textId = `${ids.controlId}-value`;
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = useOpenState({ disabled });
   const [value, setValue] = useControllableState({
     value: valueProp,
     defaultValue,
     onChange: onValueChange
   });
-  const [color, setColor] = React2.useState(() => readColor(value, parseColor2(FALLBACK_COLOR)));
-  const [synced, setSynced] = React2.useState(value);
+  const [color, setColor] = React3.useState(
+    () => parseHex(value) ?? parseHex(FALLBACK_COLOR)
+  );
+  const [synced, setSynced] = React3.useState(value);
   if (value !== synced) {
     setSynced(value);
-    setColor(readColor(value, color));
+    setColor(parseHex(value) ?? color);
   }
   const changeColor = (next) => {
     const hex = toHex(next, alpha);
@@ -484,67 +546,66 @@ function ColorField({
     setValue(hex);
   };
   const text = toHex(color, alpha);
-  const hasLabel = label != null && label !== false;
-  return /* @__PURE__ */ jsxs2(
-    FieldFrame,
-    {
-      ...rest,
-      size,
-      ids,
-      label,
-      required,
-      optional,
-      hint,
-      error,
-      disabled,
-      optionalLabel: labels.optional,
-      className,
-      children: [
-        /* @__PURE__ */ jsx2(
-          ColorPicker.Root,
-          {
-            value: color,
-            onValueChange: changeColor,
-            defaultFormat: "hex",
-            labels,
-            children: /* @__PURE__ */ jsxs2(Popover.Root, { open: open && !disabled, onOpenChange: setOpen, children: [
-              /* @__PURE__ */ jsx2(Popover.Trigger, { children: /* @__PURE__ */ jsxs2(
-                "button",
-                {
-                  id: ids.controlId,
-                  type: "button",
-                  disabled,
-                  "aria-label": ariaLabel ? `${ariaLabel}: ${text}` : void 0,
-                  "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? (hasLabel ? cx(ids.labelId, textId) : void 0),
-                  "aria-describedby": ids.describedBy,
-                  "aria-invalid": ids.invalid || void 0,
-                  className: cx(fieldTriggerClass, ColorField_default.trigger),
-                  ...toDataAttributes({
-                    size,
-                    invalid: ids.invalid || void 0,
-                    disabled: disabled || void 0,
-                    "focus-ring": focusRing ? void 0 : false
-                  }),
-                  children: [
-                    /* @__PURE__ */ jsx2(SwatchChip, { value: color.toString("css"), className: ColorField_default.swatch }),
-                    /* @__PURE__ */ jsx2("span", { id: textId, className: ColorField_default.value, children: text }),
-                    /* @__PURE__ */ jsx2(Icon, { name: "nav.chevronDown", className: ColorField_default.chevron })
-                  ]
-                }
-              ) }),
-              /* @__PURE__ */ jsx2(Popover.Content, { size, trapFocus: true, children: /* @__PURE__ */ jsxs2(ColorPicker.Panel, { className: ColorField_default.panel, children: [
-                /* @__PURE__ */ jsx2(ColorPicker.Area, { colorSpace: "hsl", xChannel: "saturation", yChannel: "lightness", children: /* @__PURE__ */ jsx2(ColorPicker.AreaThumb, {}) }),
-                /* @__PURE__ */ jsx2(ColorPicker.Slider, { channel: "hue", colorSpace: "hsl", "aria-label": labels.hue, children: /* @__PURE__ */ jsx2(ColorPicker.SliderTrack, { children: /* @__PURE__ */ jsx2(ColorPicker.Thumb, {}) }) }),
-                alpha ? /* @__PURE__ */ jsx2(ColorPicker.Slider, { channel: "alpha", "aria-label": labels.alpha, children: /* @__PURE__ */ jsx2(ColorPicker.SliderTrack, { children: /* @__PURE__ */ jsx2(ColorPicker.Thumb, {}) }) }) : null,
-                /* @__PURE__ */ jsx2(ColorPicker.ChannelStrip, {}),
-                presets?.length ? /* @__PURE__ */ jsx2(ColorPicker.Swatches, { "aria-label": labels.presets, presets }) : null
-              ] }) })
-            ] })
-          }
-        ),
-        name ? /* @__PURE__ */ jsx2("input", { type: "hidden", name, value: text, disabled }) : null
-      ]
-    }
+  return tier.provide(
+    /* @__PURE__ */ jsxs2(
+      FieldFrame,
+      {
+        ...rest,
+        size,
+        ids,
+        label,
+        required,
+        optional,
+        hint,
+        error,
+        disabled,
+        optionalLabel: labels.optional,
+        requiredLabel: labels.required,
+        className,
+        children: [
+          /* @__PURE__ */ jsx2(
+            ColorPicker.Root,
+            {
+              value: color,
+              onValueChange: changeColor,
+              defaultFormat: "hex",
+              labels,
+              children: /* @__PURE__ */ jsxs2(Popover.Root, { open, onOpenChange: setOpen, openOnArrow: true, children: [
+                /* @__PURE__ */ jsx2(Popover.Trigger, { children: /* @__PURE__ */ jsxs2(
+                  "button",
+                  {
+                    id: ids.controlId,
+                    type: "button",
+                    disabled,
+                    ...ids.controlAria({ role: "button", textId, text, ariaLabel, ariaLabelledBy }),
+                    className: cx(fieldTriggerClass, ColorField_default.trigger),
+                    ...toDataAttributes({
+                      size,
+                      invalid: ids.invalid || void 0,
+                      disabled: disabled || void 0,
+                      "focus-ring": focusRing
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx2(ColorPicker.TriggerSwatch, { className: ColorField_default.swatch }),
+                      /* @__PURE__ */ jsx2("span", { id: textId, className: ColorField_default.value, children: text }),
+                      /* @__PURE__ */ jsx2(Icon, { name: "nav.chevronDown", className: ColorField_default.chevron })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx2(Popover.Content, { size, trapFocus: true, children: /* @__PURE__ */ jsxs2(ColorPicker.Panel, { className: ColorField_default.panel, children: [
+                  /* @__PURE__ */ jsx2(ColorPicker.Area, { colorSpace: "hsl", xChannel: "saturation", yChannel: "lightness", children: /* @__PURE__ */ jsx2(ColorPicker.Thumb, {}) }),
+                  /* @__PURE__ */ jsx2(ColorPicker.Slider, { channel: "hue", colorSpace: "hsl", "aria-label": labels.hue, children: /* @__PURE__ */ jsx2(ColorPicker.SliderTrack, { children: /* @__PURE__ */ jsx2(ColorPicker.Thumb, {}) }) }),
+                  alpha ? /* @__PURE__ */ jsx2(ColorPicker.Slider, { channel: "alpha", "aria-label": labels.alpha, children: /* @__PURE__ */ jsx2(ColorPicker.SliderTrack, { children: /* @__PURE__ */ jsx2(ColorPicker.Thumb, {}) }) }) : null,
+                  /* @__PURE__ */ jsx2(ColorPicker.ChannelStrip, {}),
+                  presets?.length ? /* @__PURE__ */ jsx2(ColorPicker.Swatches, { "aria-label": labels.presets, presets }) : null
+                ] }) })
+              ] })
+            }
+          ),
+          name ? /* @__PURE__ */ jsx2("input", { type: "hidden", name, value: text, disabled }) : null
+        ]
+      }
+    )
   );
 }
 ColorField.displayName = "ColorField";

package/dist/color-picker.d.ts

@@ -5,5 +5,5 @@
  */
 export type { ColorFieldLabels, ColorFieldProps } from "./components/color-field/ColorField";
 export { ColorField } from "./components/color-field/ColorField";
-export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
+export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchButtonProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
 export { ColorPicker, parseColor } from "./components/color-picker/ColorPicker";

package/dist/color-picker.js

@@ -4,9 +4,9 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-2IKH55MI.js";
-import "./chunks/chunk-XJAVS6FH.js";
-import "./chunks/chunk-Q3BFRQHZ.js";
+} from "./chunks/chunk-SVFWPLNW.js";
+import "./chunks/chunk-7WWZYGRC.js";
+import "./chunks/chunk-2ODXLPW3.js";
 export {
   ColorField,
   ColorPicker,