@reforma/components 0.0.0-stage → 0.1.0

package/dist/ColorInput/ui/CssColorPreview.js

@@ -0,0 +1,48 @@
+import { ColorSwatch as c, Swatch as n } from "../../Swatch/Swatch.js";
+import a from "../ColorInput.module.css.js";
+import { parseColorInputValue as i, withAlpha as p } from "../value.js";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+function d({
+  value: e,
+  size: s,
+  isDisabled: l,
+  slot: t
+}) {
+  const o = i(e);
+  return o.color ? /* @__PURE__ */ r(c, {
+    slot: t,
+    color: p(o.color, o.alpha),
+    size: s,
+    isDisabled: l,
+    "aria-label": "Selected color"
+  }) : /* @__PURE__ */ r(n, {
+    slot: t,
+    size: s,
+    isDisabled: l,
+    "aria-label": "Selected color",
+    children: /* @__PURE__ */ r(h, {
+      value: e
+    })
+  });
+}
+function h({
+  value: e
+}) {
+  return /* @__PURE__ */ m("span", {
+    className: a.cssPreview,
+    "aria-hidden": !0,
+    children: [/* @__PURE__ */ r("span", {
+      className: a.cssPreviewChecker
+    }), /* @__PURE__ */ r("span", {
+      className: a.cssPreviewColor,
+      style: {
+        "--reforma-color-input-preview": e || "transparent"
+      }
+    })]
+  });
+}
+export {
+  d as CssColorPreview,
+  h as CssColorPreviewContent
+};
+//# sourceMappingURL=CssColorPreview.js.map

package/dist/ColorInput/ui/CssColorPreview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CssColorPreview.js","sources":["../../../src/ColorInput/ui/CssColorPreview.tsx"],"sourcesContent":["import { ColorSwatch, Swatch } from '../../Swatch';\nimport styles from '../ColorInput.module.css';\nimport { parseColorInputValue, withAlpha } from '../value';\n\nimport type { CSSProperties } from 'react';\nimport type { ColorInputSize } from '../ColorInput';\n\nexport function CssColorPreview({\n    value,\n    size,\n    isDisabled,\n    slot,\n}: {\n    value: string;\n    size: ColorInputSize;\n    isDisabled?: boolean;\n    slot?: string;\n}) {\n    const parsed = parseColorInputValue(value);\n\n    if (parsed.color) {\n        return (\n            <ColorSwatch\n                slot={ slot }\n                color={ withAlpha(parsed.color, parsed.alpha) }\n                size={ size }\n                isDisabled={ isDisabled }\n                aria-label=\"Selected color\"\n            />\n        );\n    }\n\n    return (\n        <Swatch slot={ slot } size={ size } isDisabled={ isDisabled } aria-label=\"Selected color\">\n            <CssColorPreviewContent value={ value } />\n        </Swatch>\n    );\n}\n\nexport function CssColorPreviewContent({ value }: { value: string }) {\n    return (\n        <span className={ styles.cssPreview } aria-hidden>\n            <span className={ styles.cssPreviewChecker } />\n            <span\n                className={ styles.cssPreviewColor }\n                style={ { '--reforma-color-input-preview': value || 'transparent' } as CSSProperties }\n            />\n        </span>\n    );\n}\n"],"names":["CssColorPreview","value","size","isDisabled","slot","parsed","parseColorInputValue","ColorSwatch","withAlpha","Swatch","CssColorPreviewContent","styles","_jsx"],"mappings":";;;;AAIO,SAASA,EAAgB;AAAA,EAC9B,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC;AAAA,EACA,MAAAC;AACF,GAAG;AACD,QAAMC,IAASC,EAAqBL,CAAK;AACzC,SAAII,EAAO,0BACgBE,GAAa;AAAA,IACpC,MAAAH;AAAA,IACA,OAAOI,EAAUH,EAAO,OAAOA,EAAO,KAAK;AAAA,IAC3C,MAAAH;AAAA,IACA,YAAAC;AAAA,IACA,cAAc;AAAA,EAAA,CACf,sBAEsBM,GAAQ;AAAA,IAC/B,MAAAL;AAAA,IACA,MAAAF;AAAA,IACA,YAAAC;AAAA,IACA,cAAc;AAAA,IACd,4BAA4BO,GAAwB;AAAA,MAClD,OAAAT;AAAA,IAAA,CACD;AAAA,EAAA,CACF;AACH;AACO,SAASS,EAAuB;AAAA,EACrC,OAAAT;AACF,GAAG;AACD,2BAA0B,QAAQ;AAAA,IAChC,WAAWU,EAAO;AAAA,IAClB,eAAe;AAAA,IACf,UAAU,CAAcC,gBAAAA,EAAK,QAAQ;AAAA,MACnC,WAAWD,EAAO;AAAA,IAAA,CACnB,GAAgBC,gBAAAA,EAAK,QAAQ;AAAA,MAC5B,WAAWD,EAAO;AAAA,MAClB,OAAO;AAAA,QACL,iCAAiCV,KAAS;AAAA,MAAA;AAAA,IAC5C,CACD,CAAC;AAAA,EAAA,CACH;AACH;"}

package/dist/ColorInput/ui/CssFunctionChannelEditor.d.ts

@@ -0,0 +1,3 @@
+import type { ColorInputEditorProps } from '../ColorInput';
+export declare function CssFunctionChannelEditor({ ref, inputRef, currentValue, editorFormat, requestedFormat, size, variant, showAlpha, isDisabled, isReadOnly, isInvalid, isActive, autoFocus, placeholder: _placeholder, name, form, children, className, onValueChange, ...props }: ColorInputEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=CssFunctionChannelEditor.d.ts.map

package/dist/ColorInput/ui/CssFunctionChannelEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CssFunctionChannelEditor.d.ts","sourceRoot":"","sources":["../../../src/ColorInput/ui/CssFunctionChannelEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,eAAe,CAAC;AAGlF,wBAAgB,wBAAwB,CAAC,EACrC,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,IAAW,EACX,OAAkB,EAClB,SAAgB,EAChB,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EAAE,YAAY,EACzB,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACX,EAAE,qBAAqB,+BA+GvB"}

package/dist/ColorInput/ui/CssFunctionChannelEditor.js

@@ -0,0 +1,143 @@
+import { cn as P } from "@reforma/lib";
+import { useCallback as f } from "react";
+import { ControlGroup as R, ControlGroupField as p, ControlGroupInput as N } from "../../ControlGroup/ControlGroup.js";
+import { For as U } from "../../For/For.js";
+import { Show as J } from "../../Show/Show.js";
+import { filterSlots as K, Slot as Q } from "../../Slot/Slot.js";
+import W from "../ColorInput.module.css.js";
+import { parseCssColorChannels as X, serializeCssColorChannels as T, normalizeAlpha as Y } from "../format.js";
+import { colorInputValueToString as Z } from "../value.js";
+import { CHANNEL_NUMBER_FORMAT as w, channelGroupTemplateColumns as $ } from "./channelFields.js";
+import { CssColorPreview as q } from "./CssColorPreview.js";
+import { HiddenColorInput as D } from "./HiddenColorInput.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+function ho({
+  ref: y,
+  inputRef: A,
+  currentValue: G,
+  editorFormat: h,
+  requestedFormat: m,
+  size: u = "sm",
+  variant: C = "filled",
+  showAlpha: v = !0,
+  isDisabled: r,
+  isReadOnly: s,
+  isInvalid: V,
+  isActive: g,
+  autoFocus: E,
+  placeholder: oo,
+  name: I,
+  form: L,
+  children: c,
+  className: _,
+  onValueChange: b,
+  ...j
+}) {
+  const l = X(Z(G), h), e = f((o) => {
+    const a = T(o);
+    b(a, {
+      value: a,
+      color: null,
+      alpha: o.alpha,
+      format: m,
+      inputValue: a
+    });
+  }, [b, m]), k = f((o, a) => {
+    const d = l.channels.map((x, O) => O === o ? {
+      ...x,
+      value: a
+    } : x);
+    e({
+      ...l,
+      channels: d
+    });
+  }, [e, l]), B = f((o) => {
+    e({
+      ...l,
+      alpha: Y(o)
+    });
+  }, [e, l]), F = l.channels.length + Number(v), H = $(F), n = T(l), M = typeof c == "function" ? c({
+    value: n,
+    color: null,
+    alpha: l.alpha,
+    format: m,
+    inputValue: n,
+    isInvalid: !!V
+  }) : c, S = K(M, "swatch"), z = S ? /* @__PURE__ */ t(Q, {
+    slot: "prefix",
+    children: S
+  }) : /* @__PURE__ */ t(q, {
+    slot: "prefix",
+    value: n,
+    size: u,
+    isDisabled: r
+  });
+  return /* @__PURE__ */ i("div", {
+    ref: y,
+    className: P(W.root, _),
+    "data-size": u,
+    "data-variant": C,
+    "data-editor": "channels",
+    "data-color-format": h,
+    "data-disabled": r || void 0,
+    "data-readonly": s || void 0,
+    "data-invalid": V || void 0,
+    "data-active": g || void 0,
+    ...j,
+    children: [/* @__PURE__ */ i(R, {
+      size: u,
+      variant: C,
+      templateColumns: H,
+      children: [/* @__PURE__ */ t(U, {
+        each: l.channels,
+        children: (o, a) => /* @__PURE__ */ i(p, {
+          children: [/* @__PURE__ */ t(p.Label, {
+            children: o.label
+          }), /* @__PURE__ */ t(N, {
+            type: "number",
+            inputRef: a === 0 ? A : void 0,
+            "aria-label": o.label,
+            value: o.value,
+            minValue: o.minValue,
+            maxValue: o.maxValue,
+            step: o.step,
+            interactionStep: o.interactionStep,
+            roundTo: o.roundTo,
+            formatOptions: w,
+            autoFocus: a === 0 ? E : void 0,
+            isDisabled: r,
+            isReadOnly: s,
+            onChange: (d) => k(a, d),
+            children: a === 0 ? z : null
+          })]
+        }, o.key)
+      }), /* @__PURE__ */ t(J, {
+        when: v,
+        children: /* @__PURE__ */ i(p, {
+          children: [/* @__PURE__ */ t(p.Label, {
+            children: "%"
+          }), /* @__PURE__ */ t(N, {
+            type: "number",
+            "aria-label": "Alpha",
+            value: l.alpha,
+            minValue: 0,
+            maxValue: 100,
+            formatOptions: w,
+            isDisabled: r,
+            isReadOnly: s,
+            onChange: B
+          })]
+        })
+      })]
+    }), /* @__PURE__ */ t(D, {
+      name: I,
+      form: L,
+      value: n,
+      isDisabled: r
+    })]
+  });
+}
+export {
+  ho as CssFunctionChannelEditor
+};
+//# sourceMappingURL=CssFunctionChannelEditor.js.map

package/dist/ColorInput/ui/CssFunctionChannelEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CssFunctionChannelEditor.js","sources":["../../../src/ColorInput/ui/CssFunctionChannelEditor.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { useCallback } from 'react';\n\nimport { ControlGroup, ControlGroupField, ControlGroupInput } from '../../ControlGroup';\nimport { For } from '../../For';\nimport { Show } from '../../Show';\nimport { filterSlots, Slot } from '../../Slot';\nimport styles from '../ColorInput.module.css';\nimport { normalizeAlpha, parseCssColorChannels, serializeCssColorChannels } from '../format';\nimport { colorInputValueToString } from '../value';\nimport { CHANNEL_NUMBER_FORMAT, channelGroupTemplateColumns } from './channelFields';\nimport { CssColorPreview } from './CssColorPreview';\nimport { HiddenColorInput } from './HiddenColorInput';\n\nimport type { ColorInputEditorProps, ColorInputRenderState } from '../ColorInput';\nimport type { ParsedCssColorChannels } from '../format';\n\nexport function CssFunctionChannelEditor({\n    ref,\n    inputRef,\n    currentValue,\n    editorFormat,\n    requestedFormat,\n    size = 'sm',\n    variant = 'filled',\n    showAlpha = true,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isActive,\n    autoFocus,\n    placeholder: _placeholder,\n    name,\n    form,\n    children,\n    className,\n    onValueChange,\n    ...props\n}: ColorInputEditorProps) {\n    const parsed = parseCssColorChannels(colorInputValueToString(currentValue), editorFormat)!;\n\n    const emitChannels = useCallback((nextChannels: ParsedCssColorChannels) => {\n        const nextValue = serializeCssColorChannels(nextChannels);\n\n        onValueChange(nextValue, {\n            value: nextValue,\n            color: null,\n            alpha: nextChannels.alpha,\n            format: requestedFormat,\n            inputValue: nextValue,\n        });\n    }, [onValueChange, requestedFormat]);\n\n    const updateChannel = useCallback((index: number, value: number) => {\n        const channels = parsed.channels.map((channel, channelIndex) => (\n            channelIndex === index ? { ...channel, value } : channel\n        ));\n\n        emitChannels({ ...parsed, channels });\n    }, [emitChannels, parsed]);\n\n    const updateAlpha = useCallback((alpha: number) => {\n        emitChannels({ ...parsed, alpha: normalizeAlpha(alpha) });\n    }, [emitChannels, parsed]);\n\n    const channelColumns = parsed.channels.length + Number(showAlpha);\n    const templateColumns = channelGroupTemplateColumns(channelColumns);\n    const submittedValue = serializeCssColorChannels(parsed);\n    const renderedChildren = typeof children === 'function'\n        ? children({\n            value: submittedValue,\n            color: null,\n            alpha: parsed.alpha,\n            format: requestedFormat,\n            inputValue: submittedValue,\n            isInvalid: Boolean(isInvalid),\n        } satisfies ColorInputRenderState)\n        : children;\n    const swatchSlot = filterSlots(renderedChildren, 'swatch');\n    const prefixSlot = swatchSlot\n        ? <Slot slot=\"prefix\">{ swatchSlot }</Slot>\n        : <CssColorPreview slot=\"prefix\" value={ submittedValue } size={ size } isDisabled={ isDisabled } />;\n\n    return (\n        <div\n            ref={ ref }\n            className={ cn(styles.root, className) }\n            data-size={ size }\n            data-variant={ variant }\n            data-editor=\"channels\"\n            data-color-format={ editorFormat }\n            data-disabled={ isDisabled || undefined }\n            data-readonly={ isReadOnly || undefined }\n            data-invalid={ isInvalid || undefined }\n            data-active={ isActive || undefined }\n            { ...props }\n        >\n            <ControlGroup size={ size } variant={ variant } templateColumns={ templateColumns }>\n                <For each={ parsed.channels }>\n                    { (channel, index) => (\n                        <ControlGroupField key={ channel.key }>\n                            <ControlGroupField.Label>{ channel.label }</ControlGroupField.Label>\n                            <ControlGroupInput\n                                type=\"number\"\n                                inputRef={ index === 0 ? inputRef : undefined }\n                                aria-label={ channel.label }\n                                value={ channel.value }\n                                minValue={ channel.minValue }\n                                maxValue={ channel.maxValue }\n                                step={ channel.step }\n                                interactionStep={ channel.interactionStep }\n                                roundTo={ channel.roundTo }\n                                formatOptions={ CHANNEL_NUMBER_FORMAT }\n                                autoFocus={ index === 0 ? autoFocus : undefined }\n                                isDisabled={ isDisabled }\n                                isReadOnly={ isReadOnly }\n                                onChange={ next => updateChannel(index, next) }\n                            >\n                                {\n                                    index === 0\n                                        ? prefixSlot\n                                        : null\n                                }\n                            </ControlGroupInput>\n                        </ControlGroupField>\n                    ) }\n                </For>\n\n                <Show when={ showAlpha }>\n                    <ControlGroupField>\n                        <ControlGroupField.Label>%</ControlGroupField.Label>\n                        <ControlGroupInput\n                            type=\"number\"\n                            aria-label=\"Alpha\"\n                            value={ parsed.alpha }\n                            minValue={ 0 }\n                            maxValue={ 100 }\n                            formatOptions={ CHANNEL_NUMBER_FORMAT }\n                            isDisabled={ isDisabled }\n                            isReadOnly={ isReadOnly }\n                            onChange={ updateAlpha }\n                        />\n                    </ControlGroupField>\n                </Show>\n            </ControlGroup>\n\n            <HiddenColorInput name={ name } form={ form } value={ submittedValue } isDisabled={ isDisabled } />\n        </div>\n    );\n}\n"],"names":["CssFunctionChannelEditor","ref","inputRef","currentValue","editorFormat","requestedFormat","size","variant","showAlpha","isDisabled","isReadOnly","isInvalid","isActive","autoFocus","_placeholder","name","form","children","className","onValueChange","props","parsed","parseCssColorChannels","colorInputValueToString","emitChannels","useCallback","nextChannels","nextValue","serializeCssColorChannels","updateChannel","index","value","channels","channel","channelIndex","updateAlpha","alpha","normalizeAlpha","channelColumns","templateColumns","channelGroupTemplateColumns","submittedValue","renderedChildren","swatchSlot","filterSlots","prefixSlot","_jsx","Slot","CssColorPreview","cn","styles","_jsxs","ControlGroup","For","ControlGroupField","ControlGroupInput","CHANNEL_NUMBER_FORMAT","next","Show","HiddenColorInput"],"mappings":"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"}

package/dist/ColorInput/ui/HexColorEditor.d.ts

@@ -0,0 +1,3 @@
+import type { ColorInputEditorProps } from '../ColorInput';
+export declare function HexColorEditor({ ref, inputRef, currentValue, editorFormat: _editorFormat, requestedFormat, size, variant, showAlpha, placeholder, isDisabled, isReadOnly, isInvalid, isActive, autoFocus, name, form, children, className, onBlur, onKeyDown, onValueChange, ...props }: ColorInputEditorProps): import("react").JSX.Element;
+//# sourceMappingURL=HexColorEditor.d.ts.map

package/dist/ColorInput/ui/HexColorEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HexColorEditor.d.ts","sourceRoot":"","sources":["../../../src/ColorInput/ui/HexColorEditor.tsx"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,eAAe,CAAC;AASlF,wBAAgB,cAAc,CAAC,EAC3B,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,IAAW,EACX,OAAkB,EAClB,SAAgB,EAChB,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,aAAa,EACb,GAAG,KAAK,EACX,EAAE,qBAAqB,+BAuPvB"}

package/dist/ColorInput/ui/HexColorEditor.js

@@ -0,0 +1,206 @@
+import { mergeRefs as so, cn as po } from "@reforma/lib";
+import { useRunner as uo } from "@reforma/lib/useRunner";
+import { useMemo as L, useState as P, useRef as U, useEffect as ho, useCallback as n } from "react";
+import { Provider as mo, DEFAULT_SLOT as fo } from "react-aria-components";
+import { Box as xo } from "../../Box/Box.js";
+import { Input as _ } from "../../Input/Input.js";
+import { Show as Co } from "../../Show/Show.js";
+import { filterSlots as w, SlotContext as So } from "../../Slot/Slot.js";
+import { ColorSwatch as go } from "../../Swatch/Swatch.js";
+import s from "../ColorInput.module.css.js";
+import { serializeColorObject as D } from "../format.js";
+import { parseColorInputValue as Io, colorToHexInput as h, withAlpha as K, parseHexInput as M, normalizeHexInput as vo, parseHexAlphaInput as No, shiftHexColor as bo, serializeColorInputValue as wo, normalizeAlphaInput as y } from "../value.js";
+import { HiddenColorInput as yo } from "./HiddenColorInput.js";
+import { jsx as c, jsxs as H } from "react/jsx-runtime";
+const Ho = {
+  [fo]: {},
+  swatch: {},
+  value: {},
+  alpha: {}
+};
+function Mo({
+  ref: O,
+  inputRef: k,
+  currentValue: A,
+  editorFormat: ko,
+  requestedFormat: p,
+  size: f = "sm",
+  variant: F = "filled",
+  showAlpha: g = !0,
+  placeholder: W,
+  isDisabled: u,
+  isReadOnly: x,
+  isInvalid: I,
+  isActive: $,
+  autoFocus: G,
+  name: J,
+  form: Q,
+  children: v,
+  className: X,
+  onBlur: R,
+  onKeyDown: B,
+  onValueChange: E,
+  ...T
+}) {
+  const a = L(() => Io(A), [A]), [d, i] = P(() => h(a.color)), [r, m] = P(() => String(a.alpha)), V = U(null), j = U(null), Y = L(() => so(V, k), [k]);
+  ho(() => {
+    i(h(a.color)), m(String(a.alpha));
+  }, [a.color, a.alpha]);
+  const t = n((o, l) => {
+    const e = y(l), S = K(o, e), b = o ? D(o, e, p, "hex") : null;
+    E(b, {
+      value: b,
+      color: S,
+      alpha: e,
+      format: p,
+      inputValue: b ?? ""
+    });
+  }, [E, p]), C = n((o = d) => {
+    if (!o) {
+      t(null, Number(r));
+      return;
+    }
+    const l = M(o);
+    if (!l) {
+      i(h(a.color));
+      return;
+    }
+    const e = h(l);
+    i(e), t(l, Number(r));
+  }, [r, t, d, a.color]), Z = n((o) => {
+    const l = vo(o);
+    if (l != null && (i(l), l.length === 6)) {
+      const e = M(l);
+      e && t(e, Number(r));
+    }
+  }, [r, t]), q = n((o) => {
+    const l = No(o.clipboardData.getData("text"));
+    l && (o.preventDefault(), i(l.inputValue), m(String(l.alpha)), t(l.color, l.alpha));
+  }, [t]), oo = n((o) => {
+    /^\d{0,3}$/.test(o) && (m(o), o !== "" && t(a.color, Number(o)));
+  }, [t, a.color]), ao = n(() => {
+    const o = y(Number(r));
+    m(String(o)), t(a.color, o);
+  }, [r, t, a.color]), lo = n((o) => {
+    const l = y(o);
+    m(String(l)), t(a.color, l);
+  }, [t, a.color]);
+  uo(j, {
+    value: a.alpha,
+    min: 0,
+    max: 100,
+    step: 1,
+    shiftStep: 10,
+    disabled: u || x || !g,
+    onChange: lo,
+    shouldRun: (o) => o.closest("[data-scrub-handle]") != null
+  });
+  const to = n((o) => {
+    C(), R?.(o);
+  }, [C, R]), ro = n((o) => {
+    if (o.key === "Enter")
+      C();
+    else if (o.key === "Escape")
+      i(h(a.color));
+    else if ((o.key === "ArrowUp" || o.key === "ArrowDown") && o.target === V.current) {
+      o.preventDefault();
+      const l = o.key === "ArrowUp" ? 1 : -1, e = o.shiftKey ? 16 : 1, S = bo(a.color, l * e);
+      i(h(S)), t(S, Number(r));
+    }
+    B?.(o);
+  }, [r, C, t, B, a.color]), z = K(a.color, a.alpha), N = typeof v == "function" ? v({
+    value: wo(a.color, a.alpha, p),
+    color: z,
+    alpha: a.alpha,
+    format: p,
+    inputValue: d,
+    isInvalid: !!(I || !a.color && d)
+  }) : v, eo = w(N, "swatch", /* @__PURE__ */ c(go, {
+    slot: "swatch",
+    size: f,
+    color: z,
+    isDisabled: u,
+    "aria-label": "Selected color"
+  })), no = w(N, (o) => !["swatch", "alpha"].includes(o)), co = w(N, "alpha", /* @__PURE__ */ H("div", {
+    ref: j,
+    className: s.alphaField,
+    children: [/* @__PURE__ */ c("div", {
+      className: s.alphaScrubHandle,
+      "data-scrub-handle": !0
+    }), /* @__PURE__ */ c(_, {
+      className: s.alphaInput,
+      type: "text",
+      variant: "inline",
+      size: f,
+      inputMode: "numeric",
+      value: r,
+      isDisabled: u,
+      isReadOnly: x,
+      "aria-label": "Color opacity",
+      onChange: oo,
+      onBlur: ao
+    }), /* @__PURE__ */ c("span", {
+      className: s.alphaSuffix,
+      "aria-hidden": !0,
+      children: "%"
+    })]
+  })), io = a.color ? D(a.color, a.alpha, p, "hex") : "";
+  return /* @__PURE__ */ c(mo, {
+    values: [[So, {
+      slots: Ho
+    }]],
+    children: /* @__PURE__ */ H("div", {
+      ref: O,
+      className: po(s.root, X),
+      "data-size": f,
+      "data-variant": F,
+      "data-editor": "hex",
+      "data-disabled": u || void 0,
+      "data-readonly": x || void 0,
+      "data-invalid": I || void 0,
+      "data-active": $ || void 0,
+      onBlur: to,
+      onKeyDown: ro,
+      ...T,
+      children: [/* @__PURE__ */ H("div", {
+        className: s.colorField,
+        "data-single": !g || void 0,
+        children: [/* @__PURE__ */ c(xo, {
+          direction: "row",
+          align: "center",
+          justify: "center",
+          className: "flex-shrink-0",
+          children: eo
+        }), /* @__PURE__ */ c(_, {
+          className: s.hexInput,
+          inputRef: Y,
+          type: "text",
+          variant: "inline",
+          size: f,
+          value: d,
+          placeholder: W,
+          isDisabled: u,
+          isReadOnly: x,
+          isInvalid: I,
+          "aria-label": T["aria-label"] ?? "Color",
+          autoFocus: G,
+          spellCheck: !1,
+          onChange: Z,
+          onPaste: q
+        }), no]
+      }), /* @__PURE__ */ c(Co, {
+        when: g,
+        children: co
+      }), /* @__PURE__ */ c(yo, {
+        name: J,
+        form: Q,
+        value: io,
+        isDisabled: u
+      })]
+    })
+  });
+}
+export {
+  Mo as HexColorEditor
+};
+//# sourceMappingURL=HexColorEditor.js.map

package/dist/ColorInput/ui/HexColorEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HexColorEditor.js","sources":["../../../src/ColorInput/ui/HexColorEditor.tsx"],"sourcesContent":["import { cn, mergeRefs } from '@reforma/lib';\nimport { useRunner } from '@reforma/lib/useRunner';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Provider } from 'react-aria-components';\n\nimport { Box } from '../../Box';\nimport { Input } from '../../Input';\nimport { Show } from '../../Show';\nimport { DEFAULT_SLOT, filterSlots, SlotContext } from '../../Slot';\nimport { ColorSwatch } from '../../Swatch';\nimport styles from '../ColorInput.module.css';\nimport { serializeColorObject } from '../format';\nimport {\n    colorToHexInput,\n    normalizeAlphaInput,\n    normalizeHexInput,\n    parseColorInputValue,\n    parseHexAlphaInput,\n    parseHexInput,\n    serializeColorInputValue,\n    shiftHexColor,\n    withAlpha,\n} from '../value';\nimport { HiddenColorInput } from './HiddenColorInput';\n\nimport type { ClipboardEvent, FocusEvent, KeyboardEvent } from 'react';\nimport type { Color } from 'react-stately';\nimport type { ColorInputEditorProps, ColorInputRenderState } from '../ColorInput';\n\nconst COLOR_INPUT_SLOTS = {\n    [DEFAULT_SLOT]: {},\n    swatch: {},\n    value: {},\n    alpha: {},\n};\n\nexport function HexColorEditor({\n    ref,\n    inputRef,\n    currentValue,\n    editorFormat: _editorFormat,\n    requestedFormat,\n    size = 'sm',\n    variant = 'filled',\n    showAlpha = true,\n    placeholder,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isActive,\n    autoFocus,\n    name,\n    form,\n    children,\n    className,\n    onBlur,\n    onKeyDown,\n    onValueChange,\n    ...props\n}: ColorInputEditorProps) {\n    const parsed = useMemo(() => parseColorInputValue(currentValue), [currentValue]);\n    const [inputValue, setInputValue] = useState(() => colorToHexInput(parsed.color));\n    const [alphaValue, setAlphaValue] = useState(() => String(parsed.alpha));\n    const hexInputRef = useRef<HTMLInputElement | null>(null);\n    const alphaFieldRef = useRef<HTMLDivElement | null>(null);\n    const mergedInputRef = useMemo(() => mergeRefs(hexInputRef, inputRef), [inputRef]);\n\n    useEffect(() => {\n        setInputValue(colorToHexInput(parsed.color));\n        setAlphaValue(String(parsed.alpha));\n    }, [parsed.color, parsed.alpha]);\n\n    const emitChange = useCallback((nextColor: Color | null, nextAlpha: number) => {\n        const alpha = normalizeAlphaInput(nextAlpha);\n        const color = withAlpha(nextColor, alpha);\n        const nextValue = nextColor\n            ? serializeColorObject(nextColor, alpha, requestedFormat, 'hex')\n            : null;\n\n        onValueChange(nextValue, {\n            value: nextValue,\n            color,\n            alpha,\n            format: requestedFormat,\n            inputValue: nextValue ?? '',\n        });\n    }, [onValueChange, requestedFormat]);\n\n    const commitInputValue = useCallback((nextInputValue = inputValue) => {\n        if (!nextInputValue) {\n            emitChange(null, Number(alphaValue));\n\n            return;\n        }\n\n        const nextColor = parseHexInput(nextInputValue);\n\n        if (!nextColor) {\n            setInputValue(colorToHexInput(parsed.color));\n\n            return;\n        }\n\n        const normalizedInput = colorToHexInput(nextColor);\n\n        setInputValue(normalizedInput);\n        emitChange(nextColor, Number(alphaValue));\n    }, [alphaValue, emitChange, inputValue, parsed.color]);\n\n    const handleInputChange = useCallback((nextInputValue: string) => {\n        const normalized = normalizeHexInput(nextInputValue);\n\n        if (normalized == null) {\n            return;\n        }\n\n        setInputValue(normalized);\n\n        if (normalized.length === 6) {\n            const nextColor = parseHexInput(normalized);\n\n            if (nextColor) {\n                emitChange(nextColor, Number(alphaValue));\n            }\n        }\n    }, [alphaValue, emitChange]);\n\n    const handleInputPaste = useCallback((event: ClipboardEvent<HTMLInputElement>) => {\n        const parsedHexAlpha = parseHexAlphaInput(event.clipboardData.getData('text'));\n\n        if (!parsedHexAlpha) {\n            return;\n        }\n\n        event.preventDefault();\n\n        setInputValue(parsedHexAlpha.inputValue);\n        setAlphaValue(String(parsedHexAlpha.alpha));\n        emitChange(parsedHexAlpha.color, parsedHexAlpha.alpha);\n    }, [emitChange]);\n\n    const handleAlphaChange = useCallback((nextAlphaValue: string) => {\n        if (!/^\\d{0,3}$/.test(nextAlphaValue)) {\n            return;\n        }\n\n        setAlphaValue(nextAlphaValue);\n\n        if (nextAlphaValue === '') {\n            return;\n        }\n\n        emitChange(parsed.color, Number(nextAlphaValue));\n    }, [emitChange, parsed.color]);\n\n    const handleAlphaBlur = useCallback(() => {\n        const alpha = normalizeAlphaInput(Number(alphaValue));\n\n        setAlphaValue(String(alpha));\n        emitChange(parsed.color, alpha);\n    }, [alphaValue, emitChange, parsed.color]);\n\n    const handleAlphaRunnerChange = useCallback((nextAlpha: number) => {\n        const alpha = normalizeAlphaInput(nextAlpha);\n\n        setAlphaValue(String(alpha));\n        emitChange(parsed.color, alpha);\n    }, [emitChange, parsed.color]);\n\n    useRunner(alphaFieldRef, {\n        value: parsed.alpha,\n        min: 0,\n        max: 100,\n        step: 1,\n        shiftStep: 10,\n        disabled: isDisabled || isReadOnly || !showAlpha,\n        onChange: handleAlphaRunnerChange,\n        shouldRun: target => target.closest('[data-scrub-handle]') != null,\n    });\n\n    const handleBlur = useCallback((event: FocusEvent<HTMLDivElement>) => {\n        commitInputValue();\n        onBlur?.(event);\n    }, [commitInputValue, onBlur]);\n\n    const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {\n        if (event.key === 'Enter') {\n            commitInputValue();\n        }\n        else if (event.key === 'Escape') {\n            setInputValue(colorToHexInput(parsed.color));\n        }\n        else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n            if (event.target === hexInputRef.current) {\n                event.preventDefault();\n\n                const direction = event.key === 'ArrowUp' ? 1 : -1;\n                const step = event.shiftKey ? 16 : 1;\n                const nextColor = shiftHexColor(parsed.color, direction * step);\n\n                setInputValue(colorToHexInput(nextColor));\n                emitChange(nextColor, Number(alphaValue));\n            }\n        }\n\n        onKeyDown?.(event);\n    }, [alphaValue, commitInputValue, emitChange, onKeyDown, parsed.color]);\n\n    const colorWithAlpha = withAlpha(parsed.color, parsed.alpha);\n    const renderedChildren = typeof children === 'function'\n        ? children({\n            value: serializeColorInputValue(parsed.color, parsed.alpha, requestedFormat),\n            color: colorWithAlpha,\n            alpha: parsed.alpha,\n            format: requestedFormat,\n            inputValue,\n            isInvalid: Boolean(isInvalid || (!parsed.color && inputValue)),\n        } satisfies ColorInputRenderState)\n        : children;\n    const swatchSlot = filterSlots(\n        renderedChildren,\n        'swatch',\n        <ColorSwatch\n            slot=\"swatch\"\n            size={ size }\n            color={ colorWithAlpha }\n            isDisabled={ isDisabled }\n            aria-label=\"Selected color\"\n        />\n    );\n    const restSlots = filterSlots(renderedChildren, slot => !['swatch', 'alpha'].includes(slot));\n    const alphaSlot = filterSlots(\n        renderedChildren,\n        'alpha',\n        <div ref={ alphaFieldRef } className={ styles.alphaField }>\n            <div className={ styles.alphaScrubHandle } data-scrub-handle />\n            <Input\n                className={ styles.alphaInput }\n                type=\"text\"\n                variant=\"inline\"\n                size={ size }\n                inputMode=\"numeric\"\n                value={ alphaValue }\n                isDisabled={ isDisabled }\n                isReadOnly={ isReadOnly }\n                aria-label=\"Color opacity\"\n                onChange={ handleAlphaChange }\n                onBlur={ handleAlphaBlur }\n            />\n            <span className={ styles.alphaSuffix } aria-hidden>%</span>\n        </div>\n    );\n    const submittedValue = parsed.color\n        ? serializeColorObject(parsed.color, parsed.alpha, requestedFormat, 'hex')\n        : '';\n\n    return (\n        <Provider values={ [[SlotContext, { slots: COLOR_INPUT_SLOTS }]] }>\n            <div\n                ref={ ref }\n                className={ cn(styles.root, className) }\n                data-size={ size }\n                data-variant={ variant }\n                data-editor=\"hex\"\n                data-disabled={ isDisabled || undefined }\n                data-readonly={ isReadOnly || undefined }\n                data-invalid={ isInvalid || undefined }\n                data-active={ isActive || undefined }\n                onBlur={ handleBlur }\n                onKeyDown={ handleKeyDown }\n                { ...props }\n            >\n                <div className={ styles.colorField } data-single={ !showAlpha || undefined }>\n                    <Box direction=\"row\" align=\"center\" justify=\"center\" className=\"flex-shrink-0\">\n                        { swatchSlot }\n                    </Box>\n\n                    <Input\n                        className={ styles.hexInput }\n                        inputRef={ mergedInputRef }\n                        type=\"text\"\n                        variant=\"inline\"\n                        size={ size }\n                        value={ inputValue }\n                        placeholder={ placeholder }\n                        isDisabled={ isDisabled }\n                        isReadOnly={ isReadOnly }\n                        isInvalid={ isInvalid }\n                        aria-label={ props['aria-label'] ?? 'Color' }\n                        autoFocus={ autoFocus }\n                        spellCheck={ false }\n                        onChange={ handleInputChange }\n                        onPaste={ handleInputPaste }\n                    />\n\n                    { restSlots }\n                </div>\n\n                <Show when={ showAlpha }>\n                    { alphaSlot }\n                </Show>\n\n                <HiddenColorInput name={ name } form={ form } value={ submittedValue } isDisabled={ isDisabled } />\n            </div>\n        </Provider>\n    );\n}\n"],"names":["COLOR_INPUT_SLOTS","DEFAULT_SLOT","HexColorEditor","ref","inputRef","currentValue","_editorFormat","requestedFormat","size","variant","showAlpha","placeholder","isDisabled","isReadOnly","isInvalid","isActive","autoFocus","name","form","children","className","onBlur","onKeyDown","onValueChange","props","parsed","useMemo","parseColorInputValue","inputValue","setInputValue","useState","colorToHexInput","alphaValue","setAlphaValue","hexInputRef","useRef","alphaFieldRef","mergedInputRef","mergeRefs","useEffect","emitChange","useCallback","nextColor","nextAlpha","alpha","normalizeAlphaInput","color","withAlpha","nextValue","serializeColorObject","commitInputValue","nextInputValue","parseHexInput","normalizedInput","handleInputChange","normalized","normalizeHexInput","handleInputPaste","event","parsedHexAlpha","parseHexAlphaInput","handleAlphaChange","nextAlphaValue","handleAlphaBlur","handleAlphaRunnerChange","useRunner","target","handleBlur","handleKeyDown","direction","step","shiftHexColor","colorWithAlpha","renderedChildren","serializeColorInputValue","swatchSlot","filterSlots","ColorSwatch","restSlots","slot","alphaSlot","styles","_jsx","Input","submittedValue","Provider","SlotContext","cn","_jsxs","Box","Show","HiddenColorInput"],"mappings":";;;;;;;;;;;;;;AAcA,MAAMA,KAAoB;AAAA,EACxB,CAACC,EAAY,GAAG,CAAA;AAAA,EAChB,QAAQ,CAAA;AAAA,EACR,OAAO,CAAA;AAAA,EACP,OAAO,CAAA;AACT;AACO,SAASC,GAAe;AAAA,EAC7B,KAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAcC;AAAA,EACd,iBAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,GAAG;AACD,QAAMC,IAASC,EAAQ,MAAMC,GAAqBtB,CAAY,GAAG,CAACA,CAAY,CAAC,GACzE,CAACuB,GAAYC,CAAa,IAAIC,EAAS,MAAMC,EAAgBN,EAAO,KAAK,CAAC,GAC1E,CAACO,GAAYC,CAAa,IAAIH,EAAS,MAAM,OAAOL,EAAO,KAAK,CAAC,GACjES,IAAcC,EAAO,IAAI,GACzBC,IAAgBD,EAAO,IAAI,GAC3BE,IAAiBX,EAAQ,MAAMY,GAAUJ,GAAa9B,CAAQ,GAAG,CAACA,CAAQ,CAAC;AACjF,EAAAmC,GAAU,MAAM;AACd,IAAAV,EAAcE,EAAgBN,EAAO,KAAK,CAAC,GAC3CQ,EAAc,OAAOR,EAAO,KAAK,CAAC;AAAA,EACpC,GAAG,CAACA,EAAO,OAAOA,EAAO,KAAK,CAAC;AAC/B,QAAMe,IAAaC,EAAY,CAACC,GAAWC,MAAc;AACvD,UAAMC,IAAQC,EAAoBF,CAAS,GACrCG,IAAQC,EAAUL,GAAWE,CAAK,GAClCI,IAAYN,IAAYO,EAAqBP,GAAWE,GAAOrC,GAAiB,KAAK,IAAI;AAC/F,IAAAgB,EAAcyB,GAAW;AAAA,MACvB,OAAOA;AAAA,MACP,OAAAF;AAAA,MACA,OAAAF;AAAA,MACA,QAAQrC;AAAA,MACR,YAAYyC,KAAa;AAAA,IAAA,CAC1B;AAAA,EACH,GAAG,CAACzB,GAAehB,CAAe,CAAC,GAC7B2C,IAAmBT,EAAY,CAACU,IAAiBvB,MAAe;AACpE,QAAI,CAACuB,GAAgB;AACnB,MAAAX,EAAW,MAAM,OAAOR,CAAU,CAAC;AACnC;AAAA,IACF;AACA,UAAMU,IAAYU,EAAcD,CAAc;AAC9C,QAAI,CAACT,GAAW;AACd,MAAAb,EAAcE,EAAgBN,EAAO,KAAK,CAAC;AAC3C;AAAA,IACF;AACA,UAAM4B,IAAkBtB,EAAgBW,CAAS;AACjD,IAAAb,EAAcwB,CAAe,GAC7Bb,EAAWE,GAAW,OAAOV,CAAU,CAAC;AAAA,EAC1C,GAAG,CAACA,GAAYQ,GAAYZ,GAAYH,EAAO,KAAK,CAAC,GAC/C6B,IAAoBb,EAAY,CAAAU,MAAkB;AACtD,UAAMI,IAAaC,GAAkBL,CAAc;AACnD,QAAII,KAAc,SAGlB1B,EAAc0B,CAAU,GACpBA,EAAW,WAAW,IAAG;AAC3B,YAAMb,IAAYU,EAAcG,CAAU;AAC1C,MAAIb,KACFF,EAAWE,GAAW,OAAOV,CAAU,CAAC;AAAA,IAE5C;AAAA,EACF,GAAG,CAACA,GAAYQ,CAAU,CAAC,GACrBiB,IAAmBhB,EAAY,CAAAiB,MAAS;AAC5C,UAAMC,IAAiBC,GAAmBF,EAAM,cAAc,QAAQ,MAAM,CAAC;AAC7E,IAAKC,MAGLD,EAAM,eAAA,GACN7B,EAAc8B,EAAe,UAAU,GACvC1B,EAAc,OAAO0B,EAAe,KAAK,CAAC,GAC1CnB,EAAWmB,EAAe,OAAOA,EAAe,KAAK;AAAA,EACvD,GAAG,CAACnB,CAAU,CAAC,GACTqB,KAAoBpB,EAAY,CAAAqB,MAAkB;AACtD,IAAK,YAAY,KAAKA,CAAc,MAGpC7B,EAAc6B,CAAc,GACxBA,MAAmB,MAGvBtB,EAAWf,EAAO,OAAO,OAAOqC,CAAc,CAAC;AAAA,EACjD,GAAG,CAACtB,GAAYf,EAAO,KAAK,CAAC,GACvBsC,KAAkBtB,EAAY,MAAM;AACxC,UAAMG,IAAQC,EAAoB,OAAOb,CAAU,CAAC;AACpD,IAAAC,EAAc,OAAOW,CAAK,CAAC,GAC3BJ,EAAWf,EAAO,OAAOmB,CAAK;AAAA,EAChC,GAAG,CAACZ,GAAYQ,GAAYf,EAAO,KAAK,CAAC,GACnCuC,KAA0BvB,EAAY,CAAAE,MAAa;AACvD,UAAMC,IAAQC,EAAoBF,CAAS;AAC3C,IAAAV,EAAc,OAAOW,CAAK,CAAC,GAC3BJ,EAAWf,EAAO,OAAOmB,CAAK;AAAA,EAChC,GAAG,CAACJ,GAAYf,EAAO,KAAK,CAAC;AAC7B,EAAAwC,GAAU7B,GAAe;AAAA,IACvB,OAAOX,EAAO;AAAA,IACd,KAAK;AAAA,IACL,KAAK;AAAA,IACL,MAAM;AAAA,IACN,WAAW;AAAA,IACX,UAAUb,KAAcC,KAAc,CAACH;AAAA,IACvC,UAAUsD;AAAA,IACV,WAAW,CAAAE,MAAUA,EAAO,QAAQ,qBAAqB,KAAK;AAAA,EAAA,CAC/D;AACD,QAAMC,KAAa1B,EAAY,CAAAiB,MAAS;AACtC,IAAAR,EAAA,GACA7B,IAASqC,CAAK;AAAA,EAChB,GAAG,CAACR,GAAkB7B,CAAM,CAAC,GACvB+C,KAAgB3B,EAAY,CAAAiB,MAAS;AACzC,QAAIA,EAAM,QAAQ;AAChB,MAAAR,EAAA;AAAA,aACSQ,EAAM,QAAQ;AACvB,MAAA7B,EAAcE,EAAgBN,EAAO,KAAK,CAAC;AAAA,cAClCiC,EAAM,QAAQ,aAAaA,EAAM,QAAQ,gBAC9CA,EAAM,WAAWxB,EAAY,SAAS;AACxC,MAAAwB,EAAM,eAAA;AACN,YAAMW,IAAYX,EAAM,QAAQ,YAAY,IAAI,IAC1CY,IAAOZ,EAAM,WAAW,KAAK,GAC7BhB,IAAY6B,GAAc9C,EAAO,OAAO4C,IAAYC,CAAI;AAC9D,MAAAzC,EAAcE,EAAgBW,CAAS,CAAC,GACxCF,EAAWE,GAAW,OAAOV,CAAU,CAAC;AAAA,IAC1C;AAEF,IAAAV,IAAYoC,CAAK;AAAA,EACnB,GAAG,CAAC1B,GAAYkB,GAAkBV,GAAYlB,GAAWG,EAAO,KAAK,CAAC,GAChE+C,IAAiBzB,EAAUtB,EAAO,OAAOA,EAAO,KAAK,GACrDgD,IAAmB,OAAOtD,KAAa,aAAaA,EAAS;AAAA,IACjE,OAAOuD,GAAyBjD,EAAO,OAAOA,EAAO,OAAOlB,CAAe;AAAA,IAC3E,OAAOiE;AAAA,IACP,OAAO/C,EAAO;AAAA,IACd,QAAQlB;AAAA,IACR,YAAAqB;AAAA,IACA,WAAW,GAAQd,KAAa,CAACW,EAAO,SAASG;AAAA,EAAU,CAC5D,IAAIT,GACCwD,KAAaC,EAAYH,GAAkB,4BAA4BI,IAAa;AAAA,IACxF,MAAM;AAAA,IACN,MAAArE;AAAA,IACA,OAAOgE;AAAA,IACP,YAAA5D;AAAA,IACA,cAAc;AAAA,EAAA,CACf,CAAC,GACIkE,KAAYF,EAAYH,GAAkB,CAAAM,MAAQ,CAAC,CAAC,UAAU,OAAO,EAAE,SAASA,CAAI,CAAC,GACrFC,KAAYJ,EAAYH,GAAkB,2BAA4B,OAAO;AAAA,IACjF,KAAKrC;AAAA,IACL,WAAW6C,EAAO;AAAA,IAClB,UAAU,CAAcC,gBAAAA,EAAK,OAAO;AAAA,MAClC,WAAWD,EAAO;AAAA,MAClB,qBAAqB;AAAA,IAAA,CACtB,GAAgBC,gBAAAA,EAAKC,GAAO;AAAA,MAC3B,WAAWF,EAAO;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,MACT,MAAAzE;AAAA,MACA,WAAW;AAAA,MACX,OAAOwB;AAAA,MACP,YAAApB;AAAA,MACA,YAAAC;AAAA,MACA,cAAc;AAAA,MACd,UAAUgD;AAAA,MACV,QAAQE;AAAA,IAAA,CACT,GAAgBmB,gBAAAA,EAAK,QAAQ;AAAA,MAC5B,WAAWD,EAAO;AAAA,MAClB,eAAe;AAAA,MACf,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EAAA,CACH,CAAC,GACIG,KAAiB3D,EAAO,QAAQwB,EAAqBxB,EAAO,OAAOA,EAAO,OAAOlB,GAAiB,KAAK,IAAI;AACjH,2BAAyB8E,IAAU;AAAA,IACjC,QAAQ,CAAC,CAACC,IAAa;AAAA,MACrB,OAAOtF;AAAA,IAAA,CACR,CAAC;AAAA,IACF,4BAA6B,OAAO;AAAA,MAClC,KAAAG;AAAA,MACA,WAAWoF,GAAGN,EAAO,MAAM7D,CAAS;AAAA,MACpC,aAAaZ;AAAA,MACb,gBAAgBC;AAAA,MAChB,eAAe;AAAA,MACf,iBAAiBG,KAAc;AAAA,MAC/B,iBAAiBC,KAAc;AAAA,MAC/B,gBAAgBC,KAAa;AAAA,MAC7B,eAAeC,KAAY;AAAA,MAC3B,QAAQoD;AAAA,MACR,WAAWC;AAAA,MACX,GAAG5C;AAAA,MACH,UAAU,CAAcgE,gBAAAA,EAAM,OAAO;AAAA,QACnC,WAAWP,EAAO;AAAA,QAClB,eAAe,CAACvE,KAAa;AAAA,QAC7B,UAAU,CAAcwE,gBAAAA,EAAKO,IAAK;AAAA,UAChC,WAAW;AAAA,UACX,OAAO;AAAA,UACP,SAAS;AAAA,UACT,WAAW;AAAA,UACX,UAAUd;AAAA,QAAA,CACX,GAAgBO,gBAAAA,EAAKC,GAAO;AAAA,UAC3B,WAAWF,EAAO;AAAA,UAClB,UAAU5C;AAAA,UACV,MAAM;AAAA,UACN,SAAS;AAAA,UACT,MAAA7B;AAAA,UACA,OAAOoB;AAAA,UACP,aAAAjB;AAAA,UACA,YAAAC;AAAA,UACA,YAAAC;AAAA,UACA,WAAAC;AAAA,UACA,cAAcU,EAAM,YAAY,KAAK;AAAA,UACrC,WAAAR;AAAA,UACA,YAAY;AAAA,UACZ,UAAUsC;AAAA,UACV,SAASG;AAAA,QAAA,CACV,GAAGqB,EAAS;AAAA,MAAA,CACd,GAAgBI,gBAAAA,EAAKQ,IAAM;AAAA,QAC1B,MAAMhF;AAAA,QACN,UAAUsE;AAAA,MAAA,CACX,GAAgBE,gBAAAA,EAAKS,IAAkB;AAAA,QACtC,MAAA1E;AAAA,QACA,MAAAC;AAAA,QACA,OAAOkE;AAAA,QACP,YAAAxE;AAAA,MAAA,CACD,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACF;AACH;"}

package/dist/ColorInput/ui/HiddenColorInput.d.ts

@@ -0,0 +1,7 @@
+export declare function HiddenColorInput({ name, form, value, isDisabled, }: {
+    name?: string;
+    form?: string;
+    value: string;
+    isDisabled?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HiddenColorInput.d.ts.map

package/dist/ColorInput/ui/HiddenColorInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenColorInput.d.ts","sourceRoot":"","sources":["../../../src/ColorInput/ui/HiddenColorInput.tsx"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,EAC7B,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,UAAU,GACb,EAAE;IACC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;CACxB,+BAQA"}

package/dist/ColorInput/ui/HiddenColorInput.js

@@ -0,0 +1,23 @@
+import { Show as d } from "../../Show/Show.js";
+import { jsx as n } from "react/jsx-runtime";
+function h({
+  name: e,
+  form: o,
+  value: r,
+  isDisabled: i
+}) {
+  return /* @__PURE__ */ n(d, {
+    when: e,
+    children: (t) => /* @__PURE__ */ n("input", {
+      type: "hidden",
+      name: t,
+      form: o,
+      value: r,
+      disabled: i
+    })
+  });
+}
+export {
+  h as HiddenColorInput
+};
+//# sourceMappingURL=HiddenColorInput.js.map

package/dist/ColorInput/ui/HiddenColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HiddenColorInput.js","sources":["../../../src/ColorInput/ui/HiddenColorInput.tsx"],"sourcesContent":["import { Show } from '../../Show';\n\nexport function HiddenColorInput({\n    name,\n    form,\n    value,\n    isDisabled,\n}: {\n    name?: string;\n    form?: string;\n    value: string;\n    isDisabled?: boolean;\n}) {\n    return (\n        <Show when={ name }>\n            { inputName => (\n                <input type=\"hidden\" name={ inputName } form={ form } value={ value } disabled={ isDisabled } />\n            ) }\n        </Show>\n    );\n}\n"],"names":["HiddenColorInput","name","form","value","isDisabled","Show","inputName","_jsx"],"mappings":";;AAEO,SAASA,EAAiB;AAAA,EAC/B,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AACF,GAAG;AACD,2BAAyBC,GAAM;AAAA,IAC7B,MAAMJ;AAAA,IACN,UAAU,CAAAK,MAA0BC,gBAAAA,EAAK,SAAS;AAAA,MAChD,MAAM;AAAA,MACN,MAAMD;AAAA,MACN,MAAAJ;AAAA,MACA,OAAAC;AAAA,MACA,UAAUC;AAAA,IAAA,CACX;AAAA,EAAA,CACF;AACH;"}

package/dist/ColorInput/ui/RawColorEditor.d.ts

@@ -0,0 +1,6 @@
+import type { ColorInputEditorProps } from '../ColorInput';
+export declare function RawColorEditor({ ref, inputRef, currentValue, editorFormat: _editorFormat, requestedFormat, size, variant, placeholder, isDisabled, isReadOnly, isInvalid, isActive, autoFocus, children, name, form, className, onValueChange, 'aria-label': ariaLabel, ...props }: ColorInputEditorProps): import("react").JSX.Element;
+export declare namespace RawColorEditor {
+    var displayName: string;
+}
+//# sourceMappingURL=RawColorEditor.d.ts.map

package/dist/ColorInput/ui/RawColorEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RawColorEditor.d.ts","sourceRoot":"","sources":["../../../src/ColorInput/ui/RawColorEditor.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,qBAAqB,EAAyB,MAAM,eAAe,CAAC;AAElF,wBAAgB,cAAc,CAAC,EAC3B,GAAG,EACH,QAAQ,EACR,YAAY,EACZ,YAAY,EAAE,aAAa,EAC3B,eAAe,EACf,IAAW,EACX,OAAkB,EAClB,WAAW,EACX,UAAU,EACV,UAAU,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,aAAa,EACb,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACX,EAAE,qBAAqB,+BA8EvB;yBAnGe,cAAc"}

package/dist/ColorInput/ui/RawColorEditor.js

@@ -0,0 +1,101 @@
+import { cn as P } from "@reforma/lib";
+import { useCallback as k } from "react";
+import { Input as B } from "../../Input/Input.js";
+import H from "../../PreviewInput/PreviewInput.module.css.js";
+import { filterSlots as R } from "../../Slot/Slot.js";
+import { Swatch as T } from "../../Swatch/Swatch.js";
+import V from "../ColorInput.module.css.js";
+import { colorInputValueToString as _, parseColorInputValue as u } from "../value.js";
+import { CssColorPreviewContent as $ } from "./CssColorPreview.js";
+import { HiddenColorInput as F } from "./HiddenColorInput.js";
+import { jsx as a, jsxs as G } from "react/jsx-runtime";
+function J({
+  ref: h,
+  inputRef: v,
+  currentValue: C,
+  editorFormat: K,
+  requestedFormat: e,
+  size: r = "sm",
+  variant: p = "filled",
+  placeholder: w,
+  isDisabled: t,
+  isReadOnly: d,
+  isInvalid: i,
+  isActive: m,
+  autoFocus: S,
+  children: n,
+  name: y,
+  form: x,
+  className: I,
+  onValueChange: c,
+  "aria-label": N,
+  ...b
+}) {
+  const o = _(C), f = u(o), g = k((l) => {
+    const s = u(l);
+    c(l || null, {
+      value: l || null,
+      color: s.color,
+      alpha: s.alpha,
+      format: e,
+      inputValue: l
+    });
+  }, [c, e]), j = typeof n == "function" ? n({
+    value: o || null,
+    color: f.color,
+    alpha: f.alpha,
+    format: e,
+    inputValue: o,
+    isInvalid: !!i
+  }) : n, E = R(j, "swatch", /* @__PURE__ */ a(T, {
+    size: r,
+    isDisabled: t,
+    "aria-label": "Selected color",
+    children: /* @__PURE__ */ a($, {
+      value: o
+    })
+  }));
+  return /* @__PURE__ */ G("div", {
+    ref: h,
+    className: P(V.root, I),
+    "data-size": r,
+    "data-variant": p,
+    "data-editor": "raw",
+    "data-disabled": t || void 0,
+    "data-readonly": d || void 0,
+    "data-invalid": i || void 0,
+    "data-active": m || void 0,
+    ...b,
+    children: [/* @__PURE__ */ a(B, {
+      inputRef: v,
+      type: "text",
+      size: r,
+      variant: p,
+      value: o,
+      placeholder: w,
+      isDisabled: t,
+      isReadOnly: d,
+      isInvalid: i,
+      isActive: m,
+      autoFocus: S,
+      "aria-label": N,
+      onChange: g,
+      children: /* @__PURE__ */ a("span", {
+        slot: "prefix",
+        className: H.previewSlot,
+        "data-size": r,
+        children: E
+      })
+    }), /* @__PURE__ */ a(F, {
+      name: y,
+      form: x,
+      value: o,
+      isDisabled: t
+    })]
+  });
+}
+J.displayName = "RawColorEditor";
+export {
+  J as RawColorEditor
+};
+//# sourceMappingURL=RawColorEditor.js.map