@reforma/components 0.0.0-stage → 0.1.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"RawColorEditor.js","sources":["../../../src/ColorInput/ui/RawColorEditor.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport { useCallback } from 'react';\n\nimport { Input } from '../../Input';\nimport previewStyles from '../../PreviewInput/PreviewInput.module.css';\nimport { filterSlots } from '../../Slot';\nimport { Swatch } from '../../Swatch';\nimport styles from '../ColorInput.module.css';\nimport { colorInputValueToString, parseColorInputValue } from '../value';\nimport { CssColorPreviewContent } from './CssColorPreview';\nimport { HiddenColorInput } from './HiddenColorInput';\n\nimport type { ColorInputEditorProps, ColorInputRenderState } from '../ColorInput';\n\nexport function RawColorEditor({\n    ref,\n    inputRef,\n    currentValue,\n    editorFormat: _editorFormat,\n    requestedFormat,\n    size = 'sm',\n    variant = 'filled',\n    placeholder,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isActive,\n    autoFocus,\n    children,\n    name,\n    form,\n    className,\n    onValueChange,\n    'aria-label': ariaLabel,\n    ...props\n}: ColorInputEditorProps) {\n    const rawValue = colorInputValueToString(currentValue);\n    const parsed = parseColorInputValue(rawValue);\n\n    const handleChange = useCallback((nextValue: string) => {\n        const nextParsed = parseColorInputValue(nextValue);\n\n        onValueChange(nextValue || null, {\n            value: nextValue || null,\n            color: nextParsed.color,\n            alpha: nextParsed.alpha,\n            format: requestedFormat,\n            inputValue: nextValue,\n        });\n    }, [onValueChange, requestedFormat]);\n\n    const renderedChildren = typeof children === 'function'\n        ? children({\n            value: rawValue || null,\n            color: parsed.color,\n            alpha: parsed.alpha,\n            format: requestedFormat,\n            inputValue: rawValue,\n            isInvalid: Boolean(isInvalid),\n        } satisfies ColorInputRenderState)\n        : children;\n    const swatchSlot = filterSlots(\n        renderedChildren,\n        'swatch',\n        <Swatch\n            size={ size }\n            isDisabled={ isDisabled }\n            aria-label=\"Selected color\"\n        >\n            <CssColorPreviewContent value={ rawValue } />\n        </Swatch>\n    );\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=\"raw\"\n            data-disabled={ isDisabled || undefined }\n            data-readonly={ isReadOnly || undefined }\n            data-invalid={ isInvalid || undefined }\n            data-active={ isActive || undefined }\n            { ...props }\n        >\n            <Input\n                inputRef={ inputRef }\n                type=\"text\"\n                size={ size }\n                variant={ variant }\n                value={ rawValue }\n                placeholder={ placeholder }\n                isDisabled={ isDisabled }\n                isReadOnly={ isReadOnly }\n                isInvalid={ isInvalid }\n                isActive={ isActive }\n                autoFocus={ autoFocus }\n                aria-label={ ariaLabel }\n                onChange={ handleChange }\n            >\n                <span\n                    slot=\"prefix\"\n                    className={ previewStyles.previewSlot }\n                    data-size={ size }\n                >\n                    { swatchSlot }\n                </span>\n            </Input>\n\n            <HiddenColorInput name={ name } form={ form } value={ rawValue } isDisabled={ isDisabled } />\n        </div>\n    );\n}\n\nRawColorEditor.displayName = 'RawColorEditor';\n"],"names":["RawColorEditor","ref","inputRef","currentValue","_editorFormat","requestedFormat","size","variant","placeholder","isDisabled","isReadOnly","isInvalid","isActive","autoFocus","children","name","form","className","onValueChange","ariaLabel","props","rawValue","colorInputValueToString","parsed","parseColorInputValue","handleChange","useCallback","nextValue","nextParsed","renderedChildren","swatchSlot","filterSlots","Swatch","CssColorPreviewContent","cn","styles","_jsx","Input","previewStyles","HiddenColorInput"],"mappings":";;;;;;;;;;;AAWO,SAASA,EAAe;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,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAcC;AAAA,EACd,GAAGC;AACL,GAAG;AACD,QAAMC,IAAWC,EAAwBnB,CAAY,GAC/CoB,IAASC,EAAqBH,CAAQ,GACtCI,IAAeC,EAAY,CAAAC,MAAa;AAC5C,UAAMC,IAAaJ,EAAqBG,CAAS;AACjD,IAAAT,EAAcS,KAAa,MAAM;AAAA,MAC/B,OAAOA,KAAa;AAAA,MACpB,OAAOC,EAAW;AAAA,MAClB,OAAOA,EAAW;AAAA,MAClB,QAAQvB;AAAA,MACR,YAAYsB;AAAA,IAAA,CACb;AAAA,EACH,GAAG,CAACT,GAAeb,CAAe,CAAC,GAC7BwB,IAAmB,OAAOf,KAAa,aAAaA,EAAS;AAAA,IACjE,OAAOO,KAAY;AAAA,IACnB,OAAOE,EAAO;AAAA,IACd,OAAOA,EAAO;AAAA,IACd,QAAQlB;AAAA,IACR,YAAYgB;AAAA,IACZ,WAAW,EAAQV;AAAA,EAAS,CAC7B,IAAIG,GACCgB,IAAaC,EAAYF,GAAkB,4BAA4BG,GAAQ;AAAA,IACnF,MAAA1B;AAAA,IACA,YAAAG;AAAA,IACA,cAAc;AAAA,IACd,4BAA4BwB,GAAwB;AAAA,MAClD,OAAOZ;AAAA,IAAA,CACR;AAAA,EAAA,CACF,CAAC;AACF,2BAA0B,OAAO;AAAA,IAC/B,KAAApB;AAAA,IACA,WAAWiC,EAAGC,EAAO,MAAMlB,CAAS;AAAA,IACpC,aAAaX;AAAA,IACb,gBAAgBC;AAAA,IAChB,eAAe;AAAA,IACf,iBAAiBE,KAAc;AAAA,IAC/B,iBAAiBC,KAAc;AAAA,IAC/B,gBAAgBC,KAAa;AAAA,IAC7B,eAAeC,KAAY;AAAA,IAC3B,GAAGQ;AAAA,IACH,UAAU,CAAcgB,gBAAAA,EAAKC,GAAO;AAAA,MAClC,UAAAnC;AAAA,MACA,MAAM;AAAA,MACN,MAAAI;AAAA,MACA,SAAAC;AAAA,MACA,OAAOc;AAAA,MACP,aAAAb;AAAA,MACA,YAAAC;AAAA,MACA,YAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,cAAcM;AAAA,MACd,UAAUM;AAAA,MACV,4BAA4B,QAAQ;AAAA,QAClC,MAAM;AAAA,QACN,WAAWa,EAAc;AAAA,QACzB,aAAahC;AAAA,QACb,UAAUwB;AAAA,MAAA,CACX;AAAA,IAAA,CACF,GAAgBM,gBAAAA,EAAKG,GAAkB;AAAA,MACtC,MAAAxB;AAAA,MACA,MAAAC;AAAA,MACA,OAAOK;AAAA,MACP,YAAAZ;AAAA,IAAA,CACD,CAAC;AAAA,EAAA,CACH;AACH;AACAT,EAAe,cAAc;"}

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

@@ -0,0 +1,11 @@
+export declare const CHANNEL_NUMBER_FORMAT: Intl.NumberFormatOptions;
+export type EditableColorChannel = 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'lightness';
+export declare function channelField(key: EditableColorChannel, label: string, value: number, minValue: number, maxValue: number): {
+    key: EditableColorChannel;
+    label: string;
+    value: number;
+    minValue: number;
+    maxValue: number;
+};
+export declare function channelGroupTemplateColumns(columnCount: number): string;
+//# sourceMappingURL=channelFields.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"channelFields.d.ts","sourceRoot":"","sources":["../../../src/ColorInput/ui/channelFields.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,EAAE,IAAI,CAAC,mBAIxC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,YAAY,GAAG,WAAW,CAAC;AAEjG,wBAAgB,YAAY,CAAC,GAAG,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;;;;;;EAQvH;AAED,wBAAgB,2BAA2B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAavE"}

package/dist/ColorInput/ui/channelFields.js

@@ -0,0 +1,25 @@
+import { formatNumber as o } from "../format.js";
+const m = {
+  style: "decimal",
+  useGrouping: !1,
+  maximumFractionDigits: 4
+};
+function c(r, n, i, e, a) {
+  return {
+    key: r,
+    label: n,
+    value: Number(o(i, 2)),
+    minValue: e,
+    maxValue: a
+  };
+}
+function u(r) {
+  const n = "calc(3ch + (var(--reforma-control-group-input-padding-inline) * 2))", i = ["var(--reforma-control-group-prefix-size)", "var(--reforma-control-group-input-gap)", n].join(" + ");
+  return r <= 1 ? `minmax(calc(${i}), 1fr)` : `minmax(calc(${i}), 1.35fr) repeat(${r - 1}, minmax(${n}, 1fr))`;
+}
+export {
+  m as CHANNEL_NUMBER_FORMAT,
+  c as channelField,
+  u as channelGroupTemplateColumns
+};
+//# sourceMappingURL=channelFields.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"channelFields.js","sources":["../../../src/ColorInput/ui/channelFields.ts"],"sourcesContent":["import { formatNumber } from '../format';\n\nexport const CHANNEL_NUMBER_FORMAT: Intl.NumberFormatOptions = {\n    style: 'decimal',\n    useGrouping: false,\n    maximumFractionDigits: 4,\n};\n\nexport type EditableColorChannel = 'red' | 'green' | 'blue' | 'hue' | 'saturation' | 'lightness';\n\nexport function channelField(key: EditableColorChannel, label: string, value: number, minValue: number, maxValue: number) {\n    return {\n        key,\n        label,\n        value: Number(formatNumber(value, 2)),\n        minValue,\n        maxValue,\n    };\n}\n\nexport function channelGroupTemplateColumns(columnCount: number): string {\n    const inputMinWidth = 'calc(3ch + (var(--reforma-control-group-input-padding-inline) * 2))';\n    const previewInputMinWidth = [\n        'var(--reforma-control-group-prefix-size)',\n        'var(--reforma-control-group-input-gap)',\n        inputMinWidth,\n    ].join(' + ');\n\n    if (columnCount <= 1) {\n        return `minmax(calc(${ previewInputMinWidth }), 1fr)`;\n    }\n\n    return `minmax(calc(${ previewInputMinWidth }), 1.35fr) repeat(${ columnCount - 1 }, minmax(${ inputMinWidth }, 1fr))`;\n}\n"],"names":["CHANNEL_NUMBER_FORMAT","channelField","key","label","value","minValue","maxValue","formatNumber","channelGroupTemplateColumns","columnCount","inputMinWidth","previewInputMinWidth"],"mappings":";AACO,MAAMA,IAAwB;AAAA,EACnC,OAAO;AAAA,EACP,aAAa;AAAA,EACb,uBAAuB;AACzB;AACO,SAASC,EAAaC,GAAKC,GAAOC,GAAOC,GAAUC,GAAU;AAClE,SAAO;AAAA,IACL,KAAAJ;AAAA,IACA,OAAAC;AAAA,IACA,OAAO,OAAOI,EAAaH,GAAO,CAAC,CAAC;AAAA,IACpC,UAAAC;AAAA,IACA,UAAAC;AAAA,EAAA;AAEJ;AACO,SAASE,EAA4BC,GAAa;AACvD,QAAMC,IAAgB,uEAChBC,IAAuB,CAAC,4CAA4C,0CAA0CD,CAAa,EAAE,KAAK,KAAK;AAC7I,SAAID,KAAe,IACV,eAAeE,CAAoB,YAErC,eAAeA,CAAoB,qBAAqBF,IAAc,CAAC,YAAYC,CAAa;AACzG;"}

package/dist/ColorInput/value.d.ts

@@ -0,0 +1,27 @@
+import type { Color } from 'react-stately';
+import type { ColorInputFormat } from './format';
+export interface ParsedColorInputValue {
+    color: Color | null;
+    alpha: number;
+}
+export interface ColorInputChangeDetails extends ParsedColorInputValue {
+    value: string | null;
+    format?: ColorInputFormat;
+    inputValue?: string;
+}
+export interface ParsedHexAlphaInput {
+    color: Color;
+    inputValue: string;
+    alpha: number;
+}
+export declare function parseColorInputValue(value: string | Color | null | undefined): ParsedColorInputValue;
+export declare function colorInputValueToString(value: string | Color | null | undefined): string;
+export declare function colorToHexInput(color: Color | null): string;
+export declare function normalizeHexInput(value: string): string | null;
+export declare function parseHexInput(value: string): Color | null;
+export declare function parseHexAlphaInput(value: string): ParsedHexAlphaInput | null;
+export declare function normalizeAlphaInput(value: number): number;
+export declare function withAlpha(color: Color | null, alpha: number): Color | null;
+export declare function serializeColorInputValue(color: Color | null, alpha: number, format?: ColorInputFormat): string | null;
+export declare function shiftHexColor(color: Color | null, delta: number): Color | null;
+//# sourceMappingURL=value.d.ts.map

package/dist/ColorInput/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../src/ColorInput/value.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,qBAAqB;IAClC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,uBAAwB,SAAQ,qBAAqB;IAClE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAChC,KAAK,EAAE,KAAK,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACjB;AAOD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,qBAAqB,CAepG;AAED,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAUxF;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,GAAG,MAAM,CAM3D;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAQ9D;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAYzD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,mBAAmB,GAAG,IAAI,CAkB5E;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMzD;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAW1E;AAED,wBAAgB,wBAAwB,CACpC,KAAK,EAAE,KAAK,GAAG,IAAI,EACnB,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,gBAAyB,GAClC,MAAM,GAAG,IAAI,CAsBf;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAK9E"}

package/dist/ColorInput/value.js

@@ -0,0 +1,82 @@
+import { parseColorValue as o } from "../utils/colorValue.js";
+const a = 16777215, i = /^#?[0-9a-f]{3,8}$/i, c = [3, 6], p = [4, 8];
+function x(t) {
+  if (!t)
+    return {
+      color: null,
+      alpha: 100
+    };
+  const n = o(t);
+  return n ? {
+    color: n,
+    alpha: l(n)
+  } : {
+    color: null,
+    alpha: 100
+  };
+}
+function g(t) {
+  return t ? typeof t == "string" ? t : t.toString("css") : "";
+}
+function s(t) {
+  return t ? t.toString("hex").replace(/^#/, "").toUpperCase() : "";
+}
+function m(t) {
+  const n = t.trim().replace(/^#/, "").toUpperCase();
+  return /^[0-9A-F]{0,6}$/.test(n) ? n : null;
+}
+function H(t) {
+  const n = t.trim().replace(/^#/, "");
+  return !n || !i.test(n) || !c.includes(n.length) ? null : o(`#${n}`);
+}
+function S(t) {
+  const n = t.trim().replace(/^#/, "");
+  if (!i.test(n) || !p.includes(n.length))
+    return null;
+  const r = o(`#${n}`);
+  return r ? {
+    color: r,
+    inputValue: s(r),
+    alpha: l(r)
+  } : null;
+}
+function u(t) {
+  return Number.isFinite(t) ? Math.min(100, Math.max(0, Math.round(t))) : 100;
+}
+function h(t, n) {
+  if (!t)
+    return null;
+  try {
+    return t.withChannelValue("alpha", u(n) / 100);
+  } catch {
+    return t;
+  }
+}
+function C(t, n, r = "auto") {
+  const e = h(t, n);
+  return e ? r === "css" || r === "hexa" ? u(n) < 100 ? e.toString("hexa") : e.toString("hex") : r === "rgba" ? e.toString("rgba") : r === "auto" && u(n) < 100 ? e.toString("hexa") : e.toString("hex") : null;
+}
+function I(t, n) {
+  const r = t?.toHexInt() ?? 0, e = Math.min(a, Math.max(0, r + n));
+  return o(`#${e.toString(16).padStart(6, "0")}`);
+}
+function l(t) {
+  try {
+    return u(t.getChannelValue("alpha") * 100);
+  } catch {
+    return 100;
+  }
+}
+export {
+  g as colorInputValueToString,
+  s as colorToHexInput,
+  u as normalizeAlphaInput,
+  m as normalizeHexInput,
+  x as parseColorInputValue,
+  S as parseHexAlphaInput,
+  H as parseHexInput,
+  C as serializeColorInputValue,
+  I as shiftHexColor,
+  h as withAlpha
+};
+//# sourceMappingURL=value.js.map

package/dist/ColorInput/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","sources":["../../src/ColorInput/value.ts"],"sourcesContent":["import { parseColorValue } from '../utils/colorValue';\n\nimport type { Color } from 'react-stately';\nimport type { ColorInputFormat } from './format';\n\nexport interface ParsedColorInputValue {\n    color: Color | null;\n    alpha: number;\n}\n\nexport interface ColorInputChangeDetails extends ParsedColorInputValue {\n    value: string | null;\n    format?: ColorInputFormat;\n    inputValue?: string;\n}\n\nexport interface ParsedHexAlphaInput {\n    color: Color;\n    inputValue: string;\n    alpha: number;\n}\n\nconst MAX_HEX = 0xffffff;\nconst HEX_RE = /^#?[0-9a-f]{3,8}$/i;\nconst HEX_COLOR_LENGTHS = [3, 6];\nconst HEX_ALPHA_LENGTHS = [4, 8];\n\nexport function parseColorInputValue(value: string | Color | null | undefined): ParsedColorInputValue {\n    if (!value) {\n        return { color: null, alpha: 100 };\n    }\n\n    const color = parseColorValue(value);\n\n    if (!color) {\n        return { color: null, alpha: 100 };\n    }\n\n    return {\n        color,\n        alpha: alphaFromColor(color),\n    };\n}\n\nexport function colorInputValueToString(value: string | Color | null | undefined): string {\n    if (!value) {\n        return '';\n    }\n\n    if (typeof value === 'string') {\n        return value;\n    }\n\n    return value.toString('css');\n}\n\nexport function colorToHexInput(color: Color | null): string {\n    if (!color) {\n        return '';\n    }\n\n    return color.toString('hex').replace(/^#/, '').toUpperCase();\n}\n\nexport function normalizeHexInput(value: string): string | null {\n    const normalized = value.trim().replace(/^#/, '').toUpperCase();\n\n    if (/^[0-9A-F]{0,6}$/.test(normalized)) {\n        return normalized;\n    }\n\n    return null;\n}\n\nexport function parseHexInput(value: string): Color | null {\n    const normalized = value.trim().replace(/^#/, '');\n\n    if (!normalized) {\n        return null;\n    }\n\n    if (!HEX_RE.test(normalized) || !HEX_COLOR_LENGTHS.includes(normalized.length)) {\n        return null;\n    }\n\n    return parseColorValue(`#${ normalized }`);\n}\n\nexport function parseHexAlphaInput(value: string): ParsedHexAlphaInput | null {\n    const normalized = value.trim().replace(/^#/, '');\n\n    if (!HEX_RE.test(normalized) || !HEX_ALPHA_LENGTHS.includes(normalized.length)) {\n        return null;\n    }\n\n    const color = parseColorValue(`#${ normalized }`);\n\n    if (!color) {\n        return null;\n    }\n\n    return {\n        color,\n        inputValue: colorToHexInput(color),\n        alpha: alphaFromColor(color),\n    };\n}\n\nexport function normalizeAlphaInput(value: number): number {\n    if (!Number.isFinite(value)) {\n        return 100;\n    }\n\n    return Math.min(100, Math.max(0, Math.round(value)));\n}\n\nexport function withAlpha(color: Color | null, alpha: number): Color | null {\n    if (!color) {\n        return null;\n    }\n\n    try {\n        return color.withChannelValue('alpha', normalizeAlphaInput(alpha) / 100);\n    }\n    catch {\n        return color;\n    }\n}\n\nexport function serializeColorInputValue(\n    color: Color | null,\n    alpha: number,\n    format: ColorInputFormat = 'auto'\n): string | null {\n    const colorWithAlpha = withAlpha(color, alpha);\n\n    if (!colorWithAlpha) {\n        return null;\n    }\n\n    if (format === 'css' || format === 'hexa') {\n        return normalizeAlphaInput(alpha) < 100\n            ? colorWithAlpha.toString('hexa')\n            : colorWithAlpha.toString('hex');\n    }\n\n    if (format === 'rgba') {\n        return colorWithAlpha.toString('rgba');\n    }\n\n    if (format === 'auto' && normalizeAlphaInput(alpha) < 100) {\n        return colorWithAlpha.toString('hexa');\n    }\n\n    return colorWithAlpha.toString('hex');\n}\n\nexport function shiftHexColor(color: Color | null, delta: number): Color | null {\n    const current = color?.toHexInt() ?? 0;\n    const next = Math.min(MAX_HEX, Math.max(0, current + delta));\n\n    return parseColorValue(`#${ next.toString(16).padStart(6, '0') }`);\n}\n\nfunction alphaFromColor(color: Color): number {\n    try {\n        return normalizeAlphaInput(color.getChannelValue('alpha') * 100);\n    }\n    catch {\n        return 100;\n    }\n}\n"],"names":["MAX_HEX","HEX_RE","HEX_COLOR_LENGTHS","HEX_ALPHA_LENGTHS","parseColorInputValue","value","color","parseColorValue","alphaFromColor","colorInputValueToString","colorToHexInput","normalizeHexInput","normalized","parseHexInput","parseHexAlphaInput","normalizeAlphaInput","withAlpha","alpha","serializeColorInputValue","format","colorWithAlpha","shiftHexColor","delta","current","next"],"mappings":"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"}

package/dist/ColorSlider/ColorSlider.d.ts

@@ -0,0 +1,14 @@
+import { type ColorSliderProps as AriaColorSliderProps } from 'react-aria-components';
+import type { ReactNode, Ref } from 'react';
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className'> {
+    ref?: Ref<HTMLDivElement | null>;
+    className?: string;
+    trackClassName?: string;
+    thumbClassName?: string;
+    children?: ReactNode;
+}
+export declare function ColorSlider({ ref, className, trackClassName, thumbClassName, children, channel, colorSpace, ...props }: ColorSliderProps): import("react").JSX.Element;
+export declare namespace ColorSlider {
+    var displayName: string;
+}
+//# sourceMappingURL=ColorSlider.d.ts.map

package/dist/ColorSlider/ColorSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.d.ts","sourceRoot":"","sources":["../../src/ColorSlider/ColorSlider.tsx"],"names":[],"mappings":"AACA,OAAO,EAIH,KAAK,gBAAgB,IAAI,oBAAoB,EAGhD,MAAM,uBAAuB,CAAC;AAI/B,OAAO,KAAK,EAAiB,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAE3D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,GAAG,WAAW,CAAC;IAC1F,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB;AA6DD,wBAAgB,WAAW,CAAC,EACxB,GAAG,EACH,SAAS,EACT,cAAc,EACd,cAAc,EACd,QAAQ,EACR,OAAO,EACP,UAAU,EACV,GAAG,KAAK,EACX,EAAE,gBAAgB,+BAwBlB;yBAjCe,WAAW"}

package/dist/ColorSlider/ColorSlider.js

@@ -0,0 +1,73 @@
+import { cn as i } from "@reforma/lib";
+import { ColorSlider as m, SliderTrack as g, ColorThumb as d } from "react-aria-components";
+import n from "./ColorSlider.module.css.js";
+import { jsx as a } from "react/jsx-runtime";
+function f(r) {
+  if (r === "hue" || r === "saturation" || r === "brightness")
+    return "hsb";
+  if (r === "lightness")
+    return "hsl";
+  if (r === "red" || r === "green" || r === "blue")
+    return "rgb";
+}
+function p(r) {
+  return ({
+    defaultStyle: o
+  }) => {
+    if (r !== "alpha")
+      return o;
+    const t = o ?? {}, s = k(t);
+    return {
+      ...t,
+      background: `${s}, var(--reforma-color-slider-checker-bg)`
+    };
+  };
+}
+const b = ({
+  defaultStyle: r
+}) => r.left != null ? {
+  ...r,
+  top: r.top ?? "50%",
+  transform: "translate(-50%, -50%)"
+} : r.top != null ? {
+  ...r,
+  left: r.left ?? "50%",
+  transform: "translate(-50%, -50%)"
+} : r;
+function k(r) {
+  const o = r.background ?? r.backgroundImage;
+  return typeof o == "string" ? o : "transparent";
+}
+function C({
+  ref: r,
+  className: o,
+  trackClassName: t,
+  thumbClassName: s,
+  children: u,
+  channel: e,
+  colorSpace: c,
+  ...l
+}) {
+  return /* @__PURE__ */ a(m, {
+    ...l,
+    ref: r,
+    channel: e,
+    colorSpace: c ?? f(e),
+    className: i(n.slider, o),
+    "data-channel": e,
+    "data-modal-drag-exclude": !0,
+    children: u ?? /* @__PURE__ */ a(g, {
+      className: i(n.track, t),
+      style: p(e),
+      children: /* @__PURE__ */ a(d, {
+        className: i(n.thumb, s),
+        style: b
+      })
+    })
+  });
+}
+C.displayName = "ColorSlider";
+export {
+  C as ColorSlider
+};
+//# sourceMappingURL=ColorSlider.js.map

package/dist/ColorSlider/ColorSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.js","sources":["../../src/ColorSlider/ColorSlider.tsx"],"sourcesContent":["import { cn } from '@reforma/lib';\nimport {\n    ColorSlider as AriaColorSlider,\n    ColorThumb,\n    SliderTrack,\n    type ColorSliderProps as AriaColorSliderProps,\n    type ColorThumbProps,\n    type SliderTrackProps,\n} from 'react-aria-components';\n\nimport styles from './ColorSlider.module.css';\n\nimport type { CSSProperties, ReactNode, Ref } from 'react';\n\nexport interface ColorSliderProps extends Omit<AriaColorSliderProps, 'children' | 'className'> {\n    ref?: Ref<HTMLDivElement | null>;\n    className?: string;\n    trackClassName?: string;\n    thumbClassName?: string;\n    children?: ReactNode;\n}\n\n\nfunction getDefaultColorSpace(channel: AriaColorSliderProps['channel']): AriaColorSliderProps['colorSpace'] {\n    if (channel === 'hue' || channel === 'saturation' || channel === 'brightness') {\n        return 'hsb';\n    }\n\n    if (channel === 'lightness') {\n        return 'hsl';\n    }\n\n    if (channel === 'red' || channel === 'green' || channel === 'blue') {\n        return 'rgb';\n    }\n\n    return undefined;\n}\n\nfunction getTrackStyle(channel: AriaColorSliderProps['channel']): SliderTrackProps['style'] {\n    return ({ defaultStyle }) => {\n        if (channel !== 'alpha') {\n            return defaultStyle;\n        }\n\n        const style = defaultStyle ?? {};\n        const gradient = getBackgroundLayer(style);\n\n        return {\n            ...style,\n            background: `${ gradient }, var(--reforma-color-slider-checker-bg)`,\n        };\n    };\n}\n\nconst getThumbStyle: ColorThumbProps['style'] = ({ defaultStyle }) => {\n    if (defaultStyle.left != null) {\n        return {\n            ...defaultStyle,\n            top: defaultStyle.top ?? '50%',\n            transform: 'translate(-50%, -50%)',\n        };\n    }\n\n    if (defaultStyle.top != null) {\n        return {\n            ...defaultStyle,\n            left: defaultStyle.left ?? '50%',\n            transform: 'translate(-50%, -50%)',\n        };\n    }\n\n    return defaultStyle;\n};\n\nfunction getBackgroundLayer(style: CSSProperties): string {\n    const background = style.background ?? style.backgroundImage;\n\n    return typeof background === 'string' ? background : 'transparent';\n}\n\nexport function ColorSlider({\n    ref,\n    className,\n    trackClassName,\n    thumbClassName,\n    children,\n    channel,\n    colorSpace,\n    ...props\n}: ColorSliderProps) {\n    return (\n        <AriaColorSlider\n            { ...props }\n            ref={ ref }\n            channel={ channel }\n            colorSpace={ colorSpace ?? getDefaultColorSpace(channel) }\n            className={ cn(styles.slider, className) }\n            data-channel={ channel }\n            data-modal-drag-exclude\n        >\n            { children ?? (\n                <SliderTrack\n                    className={ cn(styles.track, trackClassName) }\n                    style={ getTrackStyle(channel) }\n                >\n                    <ColorThumb\n                        className={ cn(styles.thumb, thumbClassName) }\n                        style={ getThumbStyle }\n                    />\n                </SliderTrack>\n            ) }\n        </AriaColorSlider>\n    );\n}\n\nColorSlider.displayName = 'ColorSlider';\n"],"names":["getDefaultColorSpace","channel","getTrackStyle","defaultStyle","style","gradient","getBackgroundLayer","getThumbStyle","background","ColorSlider","ref","className","trackClassName","thumbClassName","children","colorSpace","props","AriaColorSlider","cn","styles","_jsx","SliderTrack","ColorThumb"],"mappings":";;;;AAIA,SAASA,EAAqBC,GAAS;AACrC,MAAIA,MAAY,SAASA,MAAY,gBAAgBA,MAAY;AAC/D,WAAO;AAET,MAAIA,MAAY;AACd,WAAO;AAET,MAAIA,MAAY,SAASA,MAAY,WAAWA,MAAY;AAC1D,WAAO;AAGX;AACA,SAASC,EAAcD,GAAS;AAC9B,SAAO,CAAC;AAAA,IACN,cAAAE;AAAA,EAAA,MACI;AACJ,QAAIF,MAAY;AACd,aAAOE;AAET,UAAMC,IAAQD,KAAgB,CAAA,GACxBE,IAAWC,EAAmBF,CAAK;AACzC,WAAO;AAAA,MACL,GAAGA;AAAA,MACH,YAAY,GAAGC,CAAQ;AAAA,IAAA;AAAA,EAE3B;AACF;AACA,MAAME,IAAgB,CAAC;AAAA,EACrB,cAAAJ;AACF,MACMA,EAAa,QAAQ,OAChB;AAAA,EACL,GAAGA;AAAA,EACH,KAAKA,EAAa,OAAO;AAAA,EACzB,WAAW;AAAA,IAGXA,EAAa,OAAO,OACf;AAAA,EACL,GAAGA;AAAA,EACH,MAAMA,EAAa,QAAQ;AAAA,EAC3B,WAAW;AAAA,IAGRA;AAET,SAASG,EAAmBF,GAAO;AACjC,QAAMI,IAAaJ,EAAM,cAAcA,EAAM;AAC7C,SAAO,OAAOI,KAAe,WAAWA,IAAa;AACvD;AACO,SAASC,EAAY;AAAA,EAC1B,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAb;AAAA,EACA,YAAAc;AAAA,EACA,GAAGC;AACL,GAAG;AACD,2BAAyBC,GAAiB;AAAA,IACxC,GAAGD;AAAA,IACH,KAAAN;AAAA,IACA,SAAAT;AAAA,IACA,YAAYc,KAAcf,EAAqBC,CAAO;AAAA,IACtD,WAAWiB,EAAGC,EAAO,QAAQR,CAAS;AAAA,IACtC,gBAAgBV;AAAA,IAChB,2BAA2B;AAAA,IAC3B,UAAUa,KAAyBM,gBAAAA,EAAKC,GAAa;AAAA,MACnD,WAAWH,EAAGC,EAAO,OAAOP,CAAc;AAAA,MAC1C,OAAOV,EAAcD,CAAO;AAAA,MAC5B,4BAA4BqB,GAAY;AAAA,QACtC,WAAWJ,EAAGC,EAAO,OAAON,CAAc;AAAA,QAC1C,OAAON;AAAA,MAAA,CACR;AAAA,IAAA,CACF;AAAA,EAAA,CACF;AACH;AACAE,EAAY,cAAc;"}

package/dist/ColorSlider/ColorSlider.module.css

@@ -0,0 +1 @@
+@layer components{.ColorSlider_slider_iaMBT5{--reforma-color-slider-size: var(--spacing-12);--reforma-color-slider-radius: var(--radius-sm);--reforma-color-slider-thumb-size: var(--spacing-10);--reforma-color-slider-thumb-border: var(--spacing-2);--reforma-color-slider-thumb-shadow: var(--color-secondary-muted-border);--reforma-color-slider-checker-size: var(--spacing-4);--reforma-color-slider-checker-bg: repeating-conic-gradient(var(--color-dark-a15) 0% 25%, transparent 0% 50%) 0 0 / var(--reforma-color-slider-checker-size) var(--reforma-color-slider-checker-size), var(--color-white);width:100%;min-width:var(--spacing-56);touch-action:none}.ColorSlider_slider_iaMBT5[data-orientation=vertical]{width:var(--reforma-color-slider-size);min-width:var(--reforma-color-slider-size);height:100%;min-height:var(--spacing-56)}.ColorSlider_slider_iaMBT5[data-disabled]{opacity:var(--opacity-disabled);pointer-events:none}.ColorSlider_track_1HxR7g{position:relative;box-sizing:border-box;border-radius:calc(var(--reforma-color-slider-radius) * var(--squircle-radius-factor));width:100%;height:var(--reforma-color-slider-size);corner-shape:superellipse(var(--squircle-value));cursor:pointer}.ColorSlider_slider_iaMBT5[data-orientation=vertical] .ColorSlider_track_1HxR7g{width:var(--reforma-color-slider-size);height:100%;min-height:var(--spacing-56)}.ColorSlider_track_1HxR7g:after{position:absolute;box-sizing:border-box;inset:0;border:var(--spacing-1) solid transparent;border-radius:inherit;content:"";corner-shape:inherit;pointer-events:none}.ColorSlider_slider_iaMBT5[data-channel=alpha] .ColorSlider_track_1HxR7g:after{border-color:var(--color-secondary-muted-border)}.ColorSlider_thumb_s6zfRK{z-index:1;box-sizing:border-box;outline:none;box-shadow:0 0 0 var(--spacing-1) var(--reforma-color-slider-thumb-shadow);border:var(--reforma-color-slider-thumb-border) solid var(--color-white);border-radius:var(--radius-full);width:var(--reforma-color-slider-thumb-size);height:var(--reforma-color-slider-thumb-size)}.ColorSlider_thumb_s6zfRK[data-focus-visible]{box-shadow:0 0 0 var(--spacing-1) var(--reforma-color-slider-thumb-shadow),0 0 0 var(--spacing-4) var(--color-primary-muted-border)}.ColorSlider_thumb_s6zfRK[data-disabled]{opacity:var(--opacity-disabled)}}

package/dist/ColorSlider/ColorSlider.module.css.js

@@ -0,0 +1,12 @@
+const r = "ColorSlider_slider_iaMBT5", t = "ColorSlider_track_1HxR7g", l = "ColorSlider_thumb_s6zfRK", o = {
+  slider: r,
+  track: t,
+  thumb: l
+};
+export {
+  o as default,
+  r as slider,
+  l as thumb,
+  t as track
+};
+//# sourceMappingURL=ColorSlider.module.css.js.map

package/dist/ColorSlider/ColorSlider.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorSlider.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/ColorSlider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ColorSlider';
+//# sourceMappingURL=index.d.ts.map

package/dist/ColorSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ColorSlider/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/ColorSlider/index.js

@@ -0,0 +1,5 @@
+import { ColorSlider as e } from "./ColorSlider.js";
+export {
+  e as ColorSlider
+};
+//# sourceMappingURL=index.js.map

package/dist/ColorSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/ConfirmButton/ConfirmButton.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+import { type ButtonColor, type ButtonProps, type ButtonVariant } from '../Button';
+export interface ConfirmButtonProps extends Omit<ButtonProps, 'href' | 'target' | 'rel' | 'onPress' | 'isPressed'> {
+    onConfirm: () => void | Promise<void>;
+    confirmLabel?: ReactNode;
+    confirmColor?: ButtonColor;
+    confirmVariant?: ButtonVariant;
+}
+export declare function ConfirmButton({ children, color, variant, confirmColor, confirmVariant, confirmLabel, onConfirm, isPending: isPendingProp, isDisabled, ...buttonProps }: ConfirmButtonProps): import("react").JSX.Element;
+export declare namespace ConfirmButton {
+    var displayName: string;
+}
+//# sourceMappingURL=ConfirmButton.d.ts.map

package/dist/ConfirmButton/ConfirmButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmButton.d.ts","sourceRoot":"","sources":["../../src/ConfirmButton/ConfirmButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEpE,OAAO,EAAU,KAAK,WAAW,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAM3F,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,WAAW,CAAC;IAC9G,SAAS,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,cAAc,CAAC,EAAE,aAAa,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,OAAO,EACP,YAAY,EACZ,cAAc,EACd,YAAwB,EACxB,SAAS,EACT,SAAS,EAAE,aAAa,EACxB,UAAU,EACV,GAAG,WAAW,EACjB,EAAE,kBAAkB,+BAoHpB;yBA/He,aAAa"}

package/dist/ConfirmButton/ConfirmButton.js

@@ -0,0 +1,95 @@
+import { useRef as y, useState as E, useEffect as g } from "react";
+import { Button as x } from "../Button/Button.js";
+import { useClickout as b } from "../hooks/useClickout.js";
+import a from "./ConfirmButton.module.css.js";
+import { jsx as c, jsxs as L } from "react/jsx-runtime";
+const S = 5e3;
+function _({
+  children: h,
+  color: d,
+  variant: f,
+  confirmColor: P,
+  confirmVariant: R,
+  confirmLabel: l = "Confirm",
+  onConfirm: T,
+  isPending: C,
+  isDisabled: N,
+  ...k
+}) {
+  const u = y(null), o = y(void 0), [e, i] = E(!1), [B, m] = E(!1), n = !!(C || B), t = () => {
+    clearTimeout(o.current), o.current = void 0;
+  }, p = () => {
+    n || (t(), i(!1));
+  }, v = () => {
+    n || !e || (t(), o.current = setTimeout(() => {
+      o.current = void 0, p();
+    }, S));
+  };
+  g(() => () => {
+    t();
+  }, []), b({
+    enabled: e && !n,
+    roots: u,
+    onClickout: p
+  }), g(() => {
+    if (!e || n)
+      return;
+    const s = (r) => {
+      r.key === "Escape" && (r.stopPropagation(), t(), i(!1));
+    };
+    return document.addEventListener("keydown", s), () => document.removeEventListener("keydown", s);
+  }, [e, n]);
+  const w = async () => {
+    if (!n) {
+      t(), m(!0);
+      try {
+        await T();
+      } finally {
+        m(!1), i(!1);
+      }
+    }
+  };
+  return /* @__PURE__ */ c(x, {
+    ...k,
+    ref: u,
+    color: e ? P ?? d : d,
+    variant: e ? R ?? f : f,
+    isDisabled: N,
+    isPending: n,
+    onPointerEnter: e ? t : void 0,
+    onPointerLeave: e ? v : void 0,
+    onBlur: (s) => {
+      const r = s.relatedTarget;
+      r instanceof Node && u.current?.contains(r) || v();
+    },
+    onPress: () => {
+      if (e) {
+        w();
+        return;
+      }
+      i(!0);
+    },
+    children: /* @__PURE__ */ L("span", {
+      className: a.labels,
+      "data-confirming": e || void 0,
+      children: [/* @__PURE__ */ c("span", {
+        className: a.measure,
+        "aria-hidden": "true",
+        children: l
+      }), /* @__PURE__ */ c("span", {
+        className: a.idle,
+        "aria-hidden": e || void 0,
+        children: h
+      }), /* @__PURE__ */ c("span", {
+        className: a.confirm,
+        "aria-hidden": !e || void 0,
+        children: l
+      })]
+    })
+  });
+}
+_.displayName = "ConfirmButton";
+export {
+  _ as ConfirmButton
+};
+//# sourceMappingURL=ConfirmButton.js.map

package/dist/ConfirmButton/ConfirmButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmButton.js","sources":["../../src/ConfirmButton/ConfirmButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from 'react';\n\nimport { Button, type ButtonColor, type ButtonProps, type ButtonVariant } from '../Button';\nimport { useClickout } from '../hooks';\nimport styles from './ConfirmButton.module.css';\n\nconst RESET_AFTER_LEAVE_MS = 5_000;\n\nexport interface ConfirmButtonProps extends Omit<ButtonProps, 'href' | 'target' | 'rel' | 'onPress' | 'isPressed'> {\n    onConfirm: () => void | Promise<void>;\n    confirmLabel?: ReactNode;\n    confirmColor?: ButtonColor;\n    confirmVariant?: ButtonVariant;\n}\n\nexport function ConfirmButton({\n    children,\n    color,\n    variant,\n    confirmColor,\n    confirmVariant,\n    confirmLabel = 'Confirm',\n    onConfirm,\n    isPending: isPendingProp,\n    isDisabled,\n    ...buttonProps\n}: ConfirmButtonProps) {\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const resetTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined);\n    const [confirming, setConfirming] = useState(false);\n    const [pending, setPending] = useState(false);\n    const busy = Boolean(isPendingProp || pending);\n\n    const clearResetTimer = () => {\n        clearTimeout(resetTimerRef.current);\n        resetTimerRef.current = undefined;\n    };\n\n    const reset = () => {\n        if (busy) {\n            return;\n        }\n\n        clearResetTimer();\n        setConfirming(false);\n    };\n\n    const scheduleReset = () => {\n        if (busy || !confirming) {\n            return;\n        }\n\n        clearResetTimer();\n        resetTimerRef.current = setTimeout(() => {\n            resetTimerRef.current = undefined;\n            reset();\n        }, RESET_AFTER_LEAVE_MS);\n    };\n\n    useEffect(() => () => {\n        clearResetTimer();\n    }, []);\n\n    useClickout({\n        enabled: confirming && !busy,\n        roots: buttonRef,\n        onClickout: reset,\n    });\n\n    useEffect(() => {\n        if (!confirming || busy) {\n            return;\n        }\n\n        const onKeyDown = (event: KeyboardEvent) => {\n            if (event.key !== 'Escape') {\n                return;\n            }\n\n            event.stopPropagation();\n            clearResetTimer();\n            setConfirming(false);\n        };\n\n        document.addEventListener('keydown', onKeyDown);\n\n        return () => document.removeEventListener('keydown', onKeyDown);\n    }, [ confirming, busy ]);\n\n    const confirm = async() => {\n        if (busy) {\n            return;\n        }\n\n        clearResetTimer();\n        setPending(true);\n\n        try {\n            await onConfirm();\n        }\n        finally {\n            setPending(false);\n            setConfirming(false);\n        }\n    };\n\n    return (\n        <Button\n            { ...buttonProps }\n            ref={ buttonRef }\n            color={ confirming ? (confirmColor ?? color) : color }\n            variant={ confirming ? (confirmVariant ?? variant) : variant }\n            isDisabled={ isDisabled }\n            isPending={ busy }\n            onPointerEnter={ confirming ? clearResetTimer : undefined }\n            onPointerLeave={ confirming ? scheduleReset : undefined }\n            onBlur={ (event) => {\n                const next = event.relatedTarget;\n\n                if (next instanceof Node && buttonRef.current?.contains(next)) {\n                    return;\n                }\n\n                scheduleReset();\n            } }\n            onPress={ () => {\n                if (confirming) {\n                    void confirm();\n\n                    return;\n                }\n\n                setConfirming(true);\n            } }\n        >\n            <span className={ styles.labels } data-confirming={ confirming || undefined }>\n                <span className={ styles.measure } aria-hidden=\"true\">{ confirmLabel }</span>\n                <span className={ styles.idle } aria-hidden={ confirming || undefined }>{ children }</span>\n                <span className={ styles.confirm } aria-hidden={ !confirming || undefined }>{ confirmLabel }</span>\n            </span>\n        </Button>\n    );\n}\n\nConfirmButton.displayName = 'ConfirmButton';\n"],"names":["RESET_AFTER_LEAVE_MS","ConfirmButton","children","color","variant","confirmColor","confirmVariant","confirmLabel","onConfirm","isPendingProp","isDisabled","buttonProps","buttonRef","useRef","resetTimerRef","confirming","setConfirming","useState","pending","setPending","busy","clearResetTimer","reset","scheduleReset","useEffect","useClickout","onKeyDown","event","confirm","Button","next","styles","_jsx"],"mappings":"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"}

package/dist/ConfirmButton/ConfirmButton.module.css

@@ -0,0 +1 @@
+@layer components{.ConfirmButton_labels_Ex80y7{display:inline-grid;position:relative;align-items:center;justify-items:center}.ConfirmButton_measure_mwPGaE,.ConfirmButton_idle_tSiTAK{grid-area:1 / 1}.ConfirmButton_measure_mwPGaE{visibility:hidden}.ConfirmButton_idle_tSiTAK,.ConfirmButton_confirm_qoQcLv{transition:opacity var(--transition-duration-fast) var(--ease)}.ConfirmButton_confirm_qoQcLv{display:flex;position:absolute;justify-content:center;align-items:center;opacity:0;inset:0}.ConfirmButton_labels_Ex80y7[data-confirming] .ConfirmButton_idle_tSiTAK{opacity:0}.ConfirmButton_labels_Ex80y7[data-confirming] .ConfirmButton_confirm_qoQcLv{opacity:1}}

package/dist/ConfirmButton/ConfirmButton.module.css.js

@@ -0,0 +1,14 @@
+const o = "ConfirmButton_labels_Ex80y7", t = "ConfirmButton_measure_mwPGaE", n = "ConfirmButton_idle_tSiTAK", e = "ConfirmButton_confirm_qoQcLv", s = {
+  labels: o,
+  measure: t,
+  idle: n,
+  confirm: e
+};
+export {
+  e as confirm,
+  s as default,
+  n as idle,
+  o as labels,
+  t as measure
+};
+//# sourceMappingURL=ConfirmButton.module.css.js.map

package/dist/ConfirmButton/ConfirmButton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmButton.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/ConfirmButton/index.d.ts

@@ -0,0 +1,3 @@
+export { ConfirmButton } from './ConfirmButton';
+export type { ConfirmButtonProps } from './ConfirmButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/ConfirmButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ConfirmButton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/ConfirmButton/index.js

@@ -0,0 +1,5 @@
+import { ConfirmButton as t } from "./ConfirmButton.js";
+export {
+  t as ConfirmButton
+};
+//# sourceMappingURL=index.js.map

package/dist/ConfirmButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/ControlGroup/ControlGroup.d.ts

@@ -0,0 +1,58 @@
+import type { HTMLAttributes, ReactNode, Ref } from 'react';
+import type { FormFieldSize } from '../FormField';
+import type { InputProps, InputSize, InputVariant } from '../Input';
+import type { SelectProps } from '../Select';
+export type ControlGroupSize = InputSize;
+export type ControlGroupVariant = Extract<InputVariant, 'filled' | 'bordered' | 'transparent'>;
+export interface ControlGroupProps extends HTMLAttributes<HTMLDivElement> {
+    size?: ControlGroupSize;
+    variant?: ControlGroupVariant;
+    columns?: number;
+    templateColumns?: string;
+    children: ReactNode;
+}
+export interface ControlGroupFieldProps {
+    size?: FormFieldSize;
+    className?: string;
+    children: ReactNode;
+}
+export interface ControlGroupControlProps extends HTMLAttributes<HTMLElement> {
+    ref?: Ref<HTMLElement | null>;
+    children: ReactNode;
+}
+export type ControlGroupInputProps = InputProps & {
+    size?: ControlGroupSize;
+    variant?: ControlGroupVariant;
+};
+export interface ControlGroupSelectProps<T extends object = object> extends Omit<SelectProps<T>, 'size' | 'variant' | 'className' | 'triggerClassName' | 'children'> {
+    size?: ControlGroupSize;
+    variant?: ControlGroupVariant;
+    className?: string;
+    triggerClassName?: string;
+    children: SelectProps<T>['children'];
+}
+export declare function ControlGroup({ size, variant, columns, templateColumns, className, style, children, ...props }: ControlGroupProps): import("react").JSX.Element;
+export declare namespace ControlGroup {
+    var displayName: string;
+}
+declare function ControlGroupFieldRoot({ size, className, children, }: ControlGroupFieldProps): import("react").JSX.Element;
+export declare const ControlGroupField: typeof ControlGroupFieldRoot & {
+    Label: {
+        ({ className, children, ...props }: import("..").FormFieldLabelProps): import("react").JSX.Element;
+        displayName: string;
+    };
+};
+export declare function ControlGroupControl({ className, children, ...props }: ControlGroupControlProps): import("react").JSX.Element;
+export declare namespace ControlGroupControl {
+    var displayName: string;
+}
+export declare function ControlGroupInput({ className, size, variant, ...props }: ControlGroupInputProps): import("react").JSX.Element;
+export declare namespace ControlGroupInput {
+    var displayName: string;
+}
+export declare function ControlGroupSelect<T extends object>({ className, triggerClassName, size, variant, children, ...props }: ControlGroupSelectProps<T>): import("react").JSX.Element;
+export declare namespace ControlGroupSelect {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=ControlGroup.d.ts.map

package/dist/ControlGroup/ControlGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlGroup.d.ts","sourceRoot":"","sources":["../../src/ControlGroup/ControlGroup.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAiB,cAAc,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAE7C,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC;AACzC,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,YAAY,EAAE,QAAQ,GAAG,UAAU,GAAG,aAAa,CAAC,CAAC;AAa/F,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,sBAAsB;IACnC,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,WAAW,CAAC;IACzE,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG;IAC9C,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;CACjC,CAAC;AAEF,MAAM,WAAW,uBAAuB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,kBAAkB,GAAG,UAAU,CAAC;IAChK,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;CACxC;AAED,wBAAgB,YAAY,CAAC,EACzB,IAAW,EACX,OAAkB,EAClB,OAAO,EACP,eAAe,EACf,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,iBAAiB,+BAoBnB;yBA7Be,YAAY;;;AA+B5B,iBAAS,qBAAqB,CAAC,EAC3B,IAAI,EACJ,SAAS,EACT,QAAQ,GACX,EAAE,sBAAsB,+BAaxB;AAED,eAAO,MAAM,iBAAiB;;;;;CAE5B,CAAC;AAEH,wBAAgB,mBAAmB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,wBAAwB,+BAM1B;yBAVe,mBAAmB;;;AAYnC,wBAAgB,iBAAiB,CAAC,EAC9B,SAAS,EACT,IAAI,EACJ,OAAO,EACP,GAAG,KAAK,EACX,EAAE,sBAAsB,+BAYxB;yBAjBe,iBAAiB;;;AAmBjC,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,MAAM,EAAE,EACjD,SAAS,EACT,gBAAgB,EAChB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACX,EAAE,uBAAuB,CAAC,CAAC,CAAC,+BAe5B;yBAtBe,kBAAkB"}