@gunkin/uiify 0.0.1-alpha

package/dist/components/checkbox/Checkbox.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+function Checkbox(props) {
+  const {
+    checked,
+    defaultChecked,
+    disabled = false,
+    id,
+    label,
+    onCheckedChange,
+    className,
+    "aria-label": ariaLabel
+  } = props;
+  const isControlled = checked !== void 0;
+  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked ?? false);
+  const inputRef = useRef(null);
+  const checkedValue = isControlled ? checked === true : uncontrolledChecked;
+  useEffect(() => {
+    if (inputRef.current) inputRef.current.indeterminate = checked === "indeterminate";
+  }, [checked]);
+  const handleChange = (event) => {
+    if (checked === "indeterminate" && inputRef.current) {
+      inputRef.current.indeterminate = true;
+    }
+    if (!isControlled) setUncontrolledChecked(event.currentTarget.checked);
+    onCheckedChange?.(event.currentTarget.checked);
+  };
+  const input = /* @__PURE__ */ jsx(
+    "input",
+    {
+      "aria-checked": checked === "indeterminate" ? "mixed" : void 0,
+      "aria-label": label === void 0 ? ariaLabel : void 0,
+      "aria-labelledby": label !== void 0 ? `${id}-label` : void 0,
+      checked: isControlled ? checkedValue : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      "data-state": isControlled ? checked === "indeterminate" ? "indeterminate" : checkedValue ? "checked" : "unchecked" : void 0,
+      defaultChecked: !isControlled ? defaultChecked : void 0,
+      disabled: disabled || void 0,
+      id,
+      onChange: handleChange,
+      ref: inputRef,
+      type: "checkbox"
+    }
+  );
+  return label === void 0 ? input : /* @__PURE__ */ jsxs("label", { className, id: `${id}-label`, children: [
+    input,
+    label
+  ] });
+}
+Checkbox.displayName = "Checkbox";
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

package/dist/components/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\nimport type { ChangeEvent, ReactElement } from \"react\";\nimport type { CheckboxProps } from \"./types.js\";\n\nexport function Checkbox(props: CheckboxProps): ReactElement {\n  const {\n    checked,\n    defaultChecked,\n    disabled = false,\n    id,\n    label,\n    onCheckedChange,\n    className,\n    \"aria-label\": ariaLabel,\n  } = props;\n  const isControlled = checked !== undefined;\n  const [uncontrolledChecked, setUncontrolledChecked] = useState(defaultChecked ?? false);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const checkedValue = isControlled ? checked === true : uncontrolledChecked;\n\n  useEffect(() => {\n    if (inputRef.current) inputRef.current.indeterminate = checked === \"indeterminate\";\n  }, [checked]);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (checked === \"indeterminate\" && inputRef.current) {\n      inputRef.current.indeterminate = true;\n    }\n    if (!isControlled) setUncontrolledChecked(event.currentTarget.checked);\n    onCheckedChange?.(event.currentTarget.checked);\n  };\n\n  const input = (\n    <input\n      aria-checked={checked === \"indeterminate\" ? \"mixed\" : undefined}\n      aria-label={label === undefined ? ariaLabel : undefined}\n      aria-labelledby={label !== undefined ? `${id}-label` : undefined}\n      checked={isControlled ? checkedValue : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      data-state={\n        isControlled\n          ? checked === \"indeterminate\"\n            ? \"indeterminate\"\n            : checkedValue\n              ? \"checked\"\n              : \"unchecked\"\n          : undefined\n      }\n      defaultChecked={!isControlled ? defaultChecked : undefined}\n      disabled={disabled || undefined}\n      id={id}\n      onChange={handleChange}\n      ref={inputRef}\n      type=\"checkbox\"\n    />\n  );\n\n  return label === undefined ? (\n    input\n  ) : (\n    <label className={className} id={`${id}-label`}>\n      {input}\n      {label}\n    </label>\n  );\n}\nCheckbox.displayName = \"Checkbox\";\n"],"mappings":";AAmCI,cA2BA,YA3BA;AAjCJ,SAAS,WAAW,QAAQ,gBAAgB;AAIrC,SAAS,SAAS,OAAoC;AAC3D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,EAChB,IAAI;AACJ,QAAM,eAAe,YAAY;AACjC,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAAS,kBAAkB,KAAK;AACtF,QAAM,WAAW,OAAgC,IAAI;AACrD,QAAM,eAAe,eAAe,YAAY,OAAO;AAEvD,YAAU,MAAM;AACd,QAAI,SAAS,QAAS,UAAS,QAAQ,gBAAgB,YAAY;AAAA,EACrE,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,eAAe,CAAC,UAAyC;AAC7D,QAAI,YAAY,mBAAmB,SAAS,SAAS;AACnD,eAAS,QAAQ,gBAAgB;AAAA,IACnC;AACA,QAAI,CAAC,aAAc,wBAAuB,MAAM,cAAc,OAAO;AACrE,sBAAkB,MAAM,cAAc,OAAO;AAAA,EAC/C;AAEA,QAAM,QACJ;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc,YAAY,kBAAkB,UAAU;AAAA,MACtD,cAAY,UAAU,SAAY,YAAY;AAAA,MAC9C,mBAAiB,UAAU,SAAY,GAAG,EAAE,WAAW;AAAA,MACvD,SAAS,eAAe,eAAe;AAAA,MACvC,iBAAe,WAAW,KAAK;AAAA,MAC/B,cACE,eACI,YAAY,kBACV,kBACA,eACE,YACA,cACJ;AAAA,MAEN,gBAAgB,CAAC,eAAe,iBAAiB;AAAA,MACjD,UAAU,YAAY;AAAA,MACtB;AAAA,MACA,UAAU;AAAA,MACV,KAAK;AAAA,MACL,MAAK;AAAA;AAAA,EACP;AAGF,SAAO,UAAU,SACf,QAEA,qBAAC,WAAM,WAAsB,IAAI,GAAG,EAAE,UACnC;AAAA;AAAA,IACA;AAAA,KACH;AAEJ;AACA,SAAS,cAAc;","names":[]}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox } from "./Checkbox.js";
+export type { CheckboxProps, CheckedState } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/checkbox/index.js

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

package/dist/components/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/checkbox/index.ts"],"sourcesContent":["export { Checkbox } from \"./Checkbox.js\";\nexport type { CheckboxProps, CheckedState } from \"./types.js\";\n"],"mappings":"AAAA,SAAS,gBAAgB;","names":[]}

package/dist/components/checkbox/types.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export type CheckedState = boolean | "indeterminate";
+export interface CheckboxProps {
+    readonly id: string;
+    readonly label?: ReactNode;
+    readonly checked?: CheckedState;
+    readonly defaultChecked?: boolean;
+    readonly disabled?: boolean;
+    readonly className?: string;
+    readonly onCheckedChange?: (checked: boolean) => void;
+    readonly "aria-label"?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/checkbox/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/checkbox/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,eAAe,CAAC;AAErD,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;CAChC"}

package/dist/components/checkbox/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/checkbox/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/checkbox.d.ts

@@ -0,0 +1 @@
+export * from "./checkbox/index.js";

package/dist/components/checkbox.js

@@ -0,0 +1 @@
+export * from "./checkbox/index.js";

package/dist/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,12 @@
+import type { ReactElement } from "react";
+import type { CollapsibleProps } from "./types.js";
+/**
+ * Built on `@gunkin/uiify/elements/details`: `Details.Root`/`Details.Summary` already own
+ * `data-disabled`/`aria-disabled`/`tabIndex` from their own `disabled` prop; this component
+ * adds only its own `data-uiify-collapsible` marker and `data-part` values.
+ */
+export declare function Collapsible({ id, label, content, defaultOpen, disabled, className, }: CollapsibleProps): ReactElement;
+export declare namespace Collapsible {
+    var displayName: string;
+}
+//# sourceMappingURL=Collapsible.d.ts.map

package/dist/components/collapsible/Collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/Collapsible.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAEnD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,OAAO,EACP,WAAmB,EACnB,QAAgB,EAChB,SAAS,GACV,EAAE,gBAAgB,GAAG,YAAY,CAejC;yBAtBe,WAAW"}

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DetailsContent, DetailsRoot, DetailsSummary } from "../../elements/details/index.js";
+function Collapsible({
+  id,
+  label,
+  content,
+  defaultOpen = false,
+  disabled = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    DetailsRoot,
+    {
+      className,
+      "data-uiify-collapsible": "",
+      defaultOpen,
+      disabled,
+      id,
+      children: [
+        /* @__PURE__ */ jsx(DetailsSummary, { disabled, part: "trigger", children: label }),
+        /* @__PURE__ */ jsx(DetailsContent, { part: "panel", children: content })
+      ]
+    }
+  );
+}
+Collapsible.displayName = "Collapsible";
+export {
+  Collapsible
+};
+//# sourceMappingURL=Collapsible.js.map

package/dist/components/collapsible/Collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/collapsible/Collapsible.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\nimport { DetailsContent, DetailsRoot, DetailsSummary } from \"../../elements/details/index.js\";\nimport type { CollapsibleProps } from \"./types.js\";\n\n/**\n * Built on `@gunkin/uiify/elements/details`: `Details.Root`/`Details.Summary` already own\n * `data-disabled`/`aria-disabled`/`tabIndex` from their own `disabled` prop; this component\n * adds only its own `data-uiify-collapsible` marker and `data-part` values.\n */\nexport function Collapsible({\n  id,\n  label,\n  content,\n  defaultOpen = false,\n  disabled = false,\n  className,\n}: CollapsibleProps): ReactElement {\n  return (\n    <DetailsRoot\n      className={className}\n      data-uiify-collapsible=\"\"\n      defaultOpen={defaultOpen}\n      disabled={disabled}\n      id={id}\n    >\n      <DetailsSummary disabled={disabled} part=\"trigger\">\n        {label}\n      </DetailsSummary>\n      <DetailsContent part=\"panel\">{content}</DetailsContent>\n    </DetailsRoot>\n  );\n}\nCollapsible.displayName = \"Collapsible\";\n"],"mappings":"AAkBI,SAOE,KAPF;AAjBJ,SAAS,gBAAgB,aAAa,sBAAsB;AAQrD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AACF,GAAmC;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,0BAAuB;AAAA,MACvB;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,kBAAe,UAAoB,MAAK,WACtC,iBACH;AAAA,QACA,oBAAC,kBAAe,MAAK,SAAS,mBAAQ;AAAA;AAAA;AAAA,EACxC;AAEJ;AACA,YAAY,cAAc;","names":[]}

package/dist/components/collapsible/index.d.ts

@@ -0,0 +1,3 @@
+export { Collapsible } from "./Collapsible.js";
+export type { CollapsibleProps } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/collapsible/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/collapsible/index.js

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

package/dist/components/collapsible/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/collapsible/index.ts"],"sourcesContent":["export { Collapsible } from \"./Collapsible.js\";\nexport type { CollapsibleProps } from \"./types.js\";\n"],"mappings":"AAAA,SAAS,mBAAmB;","names":[]}

package/dist/components/collapsible/types.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+export interface CollapsibleProps {
+    readonly id: string;
+    readonly label: ReactNode;
+    readonly content: ReactNode;
+    readonly defaultOpen?: boolean;
+    readonly disabled?: boolean;
+    readonly className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/collapsible/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/collapsible/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAC5B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B"}

package/dist/components/collapsible/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/components/collapsible/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/components/collapsible.d.ts

@@ -0,0 +1 @@
+export * from "./collapsible/index.js";

package/dist/components/collapsible.js

@@ -0,0 +1 @@
+export * from "./collapsible/index.js";

package/dist/components/color-picker/ColorPicker.d.ts

@@ -0,0 +1,37 @@
+import type { ReactElement } from "react";
+import type { ColorPickerRootProps, ColorPickerTriggerOwnProps, ColorPickerContentOwnProps, ColorPickerAreaOwnProps, ColorPickerSliderOwnProps, ColorPickerSwatchOwnProps, ColorPickerSwatchGroupOwnProps, ColorPickerFieldOwnProps } from "./types.js";
+export type { Color, ColorFormat } from "./types.js";
+export declare function ColorPickerRoot(props: ColorPickerRootProps): ReactElement | null;
+export declare namespace ColorPickerRoot {
+    var displayName: string;
+}
+export declare function ColorPickerTrigger(props: ColorPickerTriggerOwnProps): ReactElement | null;
+export declare namespace ColorPickerTrigger {
+    var displayName: string;
+}
+export declare function ColorPickerContent(props: ColorPickerContentOwnProps): ReactElement | null;
+export declare namespace ColorPickerContent {
+    var displayName: string;
+}
+export declare function ColorPickerArea(props: ColorPickerAreaOwnProps): ReactElement | null;
+export declare namespace ColorPickerArea {
+    var displayName: string;
+}
+export declare function ColorPickerSlider(props: ColorPickerSliderOwnProps): ReactElement | null;
+export declare namespace ColorPickerSlider {
+    var displayName: string;
+}
+export declare function ColorPickerSwatch(props: ColorPickerSwatchOwnProps): ReactElement | null;
+export declare function ColorPickerSwatchGroup(props: ColorPickerSwatchGroupOwnProps): ReactElement | null;
+export declare function ColorPickerField(props: ColorPickerFieldOwnProps): ReactElement | null;
+export declare const ColorPicker: {
+    Area: typeof ColorPickerArea;
+    Content: typeof ColorPickerContent;
+    Field: typeof ColorPickerField;
+    Root: typeof ColorPickerRoot;
+    Slider: typeof ColorPickerSlider;
+    Swatch: typeof ColorPickerSwatch;
+    SwatchGroup: typeof ColorPickerSwatchGroup;
+    Trigger: typeof ColorPickerTrigger;
+};
+//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/color-picker/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/ColorPicker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAkB,MAAM,OAAO,CAAC;AAO1D,OAAO,KAAK,EAGV,oBAAoB,EACpB,0BAA0B,EAC1B,0BAA0B,EAC1B,uBAAuB,EACvB,yBAAyB,EACzB,yBAAyB,EACzB,8BAA8B,EAC9B,wBAAwB,EACzB,MAAM,YAAY,CAAC;AAEpB,YAAY,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAKrD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA2BhF;yBA3Be,eAAe;;;AA8B/B,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,GAAG,IAAI,CASzF;yBATe,kBAAkB;;;AAYlC,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,GAAG,IAAI,CAQzF;yBARe,kBAAkB;;;AAWlC,wBAAgB,eAAe,CAAC,KAAK,EAAE,uBAAuB,GAAG,YAAY,GAAG,IAAI,CAmCnF;yBAnCe,eAAe;;;AAsC/B,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CA4BvF;yBA5Be,iBAAiB;;;AA+BjC,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,yBAAyB,GAAG,YAAY,GAAG,IAAI,CAiBvF;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,8BAA8B,GAAG,YAAY,GAAG,IAAI,CAajG;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,GAAG,IAAI,CAkBrF;AAED,eAAO,MAAM,WAAW;;;;;;;;;CASvB,CAAC"}

package/dist/components/color-picker/ColorPicker.js

@@ -0,0 +1,185 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useControllableState, useId } from "@gunkin/uiify/hooks";
+import { createPartContext } from "@gunkin/uiify/core";
+import { Popup } from "../popup/index.js";
+import { Slider } from "../slider/Slider.js";
+import { useRenderElement } from "@gunkin/uiify/core/render";
+import { colorToHex, createColor, formatColor, hsbToRgb, parseHex, rgbToHsb } from "./color.js";
+const [ColorPickerProvider, useColorPickerContext] = createPartContext("ColorPicker");
+function ColorPickerRoot(props) {
+  const {
+    alpha = true,
+    children,
+    defaultValue = createColor({ r: 255, g: 0, b: 0, a: 1 }),
+    format = "hex",
+    onChange,
+    value: controlledValue
+  } = props;
+  const [color, setColor] = useControllableState({
+    defaultValue,
+    ...controlledValue !== void 0 ? { value: controlledValue } : {},
+    ...onChange ? { onChange } : {}
+  });
+  const popoverId = useId(void 0, "uiify-color-picker");
+  const contextValue = useMemo(
+    () => ({ alpha, color, format, popoverId, setColor }),
+    [alpha, color, format, popoverId, setColor]
+  );
+  return /* @__PURE__ */ jsx(ColorPickerProvider, { value: contextValue, children: /* @__PURE__ */ jsx(Popup.Root, { id: popoverId, children }) });
+}
+ColorPickerRoot.displayName = "ColorPickerRoot";
+function ColorPickerTrigger(props) {
+  const { children, className } = props;
+  const { color, popoverId } = useColorPickerContext("Trigger");
+  return /* @__PURE__ */ jsx(Popup.Trigger, { __popupId: popoverId, ...className ? { className } : {}, children: children ?? colorToHex(color) });
+}
+ColorPickerTrigger.displayName = "ColorPickerTrigger";
+function ColorPickerContent(props) {
+  const { children, className } = props;
+  const { popoverId } = useColorPickerContext("Content");
+  return /* @__PURE__ */ jsx(Popup.Content, { __popupId: popoverId, ...className ? { className } : {}, children });
+}
+ColorPickerContent.displayName = "ColorPickerContent";
+function ColorPickerArea(props) {
+  const { className } = props;
+  const { color, setColor } = useColorPickerContext("Area");
+  const hsb = rgbToHsb(color.rgb);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      "data-channel": "area",
+      style: {
+        background: `hsl(${Math.round(hsb.h)}, 100%, 50%)`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            "aria-label": "Saturation",
+            max: 100,
+            min: 0,
+            onValueChange: (value) => {
+              setColor(createColor(hsbToRgb({ ...hsb, s: value })));
+            },
+            step: 1,
+            value: hsb.s
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            "aria-label": "Brightness",
+            max: 100,
+            min: 0,
+            onValueChange: (value) => {
+              setColor(createColor(hsbToRgb({ ...hsb, b: value })));
+            },
+            step: 1,
+            value: hsb.b
+          }
+        )
+      ]
+    }
+  );
+}
+ColorPickerArea.displayName = "ColorPickerArea";
+function ColorPickerSlider(props) {
+  const { channel, className } = props;
+  const { alpha, color, setColor } = useColorPickerContext("Slider");
+  const hsb = rgbToHsb(color.rgb);
+  if (channel === "alpha" && !alpha) return null;
+  const value = channel === "hue" ? hsb.h : color.rgb.a * 100;
+  const max = channel === "hue" ? 360 : 100;
+  return /* @__PURE__ */ jsx(
+    Slider,
+    {
+      "aria-label": channel,
+      "aria-valuetext": String(Math.round(value)),
+      className,
+      max,
+      min: 0,
+      onValueChange: (next) => {
+        if (channel === "hue") {
+          setColor(createColor(hsbToRgb({ ...hsb, h: next })));
+        } else {
+          setColor(createColor({ ...color.rgb, a: next / 100 }));
+        }
+      },
+      step: 1,
+      value
+    }
+  );
+}
+ColorPickerSlider.displayName = "ColorPickerSlider";
+function ColorPickerSwatch(props) {
+  const { className, value } = props;
+  const { setColor } = useColorPickerContext("Swatch");
+  const parsed = parseHex(value) ?? createColor({ r: 0, g: 0, b: 0, a: 1 });
+  return useRenderElement({
+    defaultTag: "button",
+    props: {
+      type: "button",
+      "aria-label": value,
+      "data-value": value,
+      style: { backgroundColor: value },
+      ...className ? { className } : {},
+      onClick: () => setColor(parsed)
+    },
+    state: {}
+  });
+}
+function ColorPickerSwatchGroup(props) {
+  const { children, className, swatches = [] } = props;
+  return useRenderElement({
+    defaultTag: "div",
+    props: {
+      role: "group",
+      ...className ? { className } : {},
+      children: children ?? swatches.map((swatch) => /* @__PURE__ */ jsx(ColorPickerSwatch, { value: swatch }, swatch))
+    },
+    state: {}
+  });
+}
+function ColorPickerField(props) {
+  const { className } = props;
+  const { color, format, setColor } = useColorPickerContext("Field");
+  return useRenderElement({
+    defaultTag: "input",
+    props: {
+      type: "text",
+      "aria-label": "Color value",
+      value: formatColor(color, format),
+      ...className ? { className } : {},
+      onChange(event) {
+        const parsed = parseHex(event.currentTarget.value);
+        if (parsed) setColor(parsed);
+      }
+    },
+    state: {}
+  });
+}
+const ColorPicker = {
+  Area: ColorPickerArea,
+  Content: ColorPickerContent,
+  Field: ColorPickerField,
+  Root: ColorPickerRoot,
+  Slider: ColorPickerSlider,
+  Swatch: ColorPickerSwatch,
+  SwatchGroup: ColorPickerSwatchGroup,
+  Trigger: ColorPickerTrigger
+};
+export {
+  ColorPicker,
+  ColorPickerArea,
+  ColorPickerContent,
+  ColorPickerField,
+  ColorPickerRoot,
+  ColorPickerSlider,
+  ColorPickerSwatch,
+  ColorPickerSwatchGroup,
+  ColorPickerTrigger
+};
+//# sourceMappingURL=ColorPicker.js.map

package/dist/components/color-picker/ColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/color-picker/ColorPicker.tsx"],"sourcesContent":["\"use client\";\n\nimport { useMemo } from \"react\";\nimport type { ReactElement, SyntheticEvent } from \"react\";\nimport { useControllableState, useId } from \"@gunkin/uiify/hooks\";\nimport { createPartContext } from \"@gunkin/uiify/core\";\nimport { Popup } from \"../popup/index.js\";\nimport { Slider } from \"../slider/Slider.js\";\nimport { useRenderElement } from \"@gunkin/uiify/core/render\";\nimport { colorToHex, createColor, formatColor, hsbToRgb, parseHex, rgbToHsb } from \"./color.js\";\nimport type {\n  Color,\n  ColorPickerContextValue,\n  ColorPickerRootProps,\n  ColorPickerTriggerOwnProps,\n  ColorPickerContentOwnProps,\n  ColorPickerAreaOwnProps,\n  ColorPickerSliderOwnProps,\n  ColorPickerSwatchOwnProps,\n  ColorPickerSwatchGroupOwnProps,\n  ColorPickerFieldOwnProps,\n} from \"./types.js\";\n\nexport type { Color, ColorFormat } from \"./types.js\";\n\nconst [ColorPickerProvider, useColorPickerContext] =\n  createPartContext<ColorPickerContextValue>(\"ColorPicker\");\n\nexport function ColorPickerRoot(props: ColorPickerRootProps): ReactElement | null {\n  const {\n    alpha = true,\n    children,\n    defaultValue = createColor({ r: 255, g: 0, b: 0, a: 1 }),\n    format = \"hex\",\n    onChange,\n    value: controlledValue,\n  } = props;\n\n  const [color, setColor] = useControllableState<Color>({\n    defaultValue,\n    ...(controlledValue !== undefined ? { value: controlledValue } : {}),\n    ...(onChange ? { onChange } : {}),\n  });\n  const popoverId = useId(undefined, \"uiify-color-picker\");\n\n  const contextValue = useMemo(\n    () => ({ alpha, color, format, popoverId, setColor }),\n    [alpha, color, format, popoverId, setColor],\n  );\n\n  return (\n    <ColorPickerProvider value={contextValue}>\n      <Popup.Root id={popoverId}>{children}</Popup.Root>\n    </ColorPickerProvider>\n  );\n}\nColorPickerRoot.displayName = \"ColorPickerRoot\";\n\nexport function ColorPickerTrigger(props: ColorPickerTriggerOwnProps): ReactElement | null {\n  const { children, className } = props;\n  const { color, popoverId } = useColorPickerContext(\"Trigger\");\n\n  return (\n    <Popup.Trigger __popupId={popoverId} {...(className ? { className } : {})}>\n      {children ?? colorToHex(color)}\n    </Popup.Trigger>\n  );\n}\nColorPickerTrigger.displayName = \"ColorPickerTrigger\";\n\nexport function ColorPickerContent(props: ColorPickerContentOwnProps): ReactElement | null {\n  const { children, className } = props;\n  const { popoverId } = useColorPickerContext(\"Content\");\n  return (\n    <Popup.Content __popupId={popoverId} {...(className ? { className } : {})}>\n      {children}\n    </Popup.Content>\n  );\n}\nColorPickerContent.displayName = \"ColorPickerContent\";\n\nexport function ColorPickerArea(props: ColorPickerAreaOwnProps): ReactElement | null {\n  const { className } = props;\n  const { color, setColor } = useColorPickerContext(\"Area\");\n  const hsb = rgbToHsb(color.rgb);\n\n  return (\n    <div\n      className={className}\n      data-channel=\"area\"\n      style={{\n        background: `hsl(${Math.round(hsb.h)}, 100%, 50%)`,\n      }}\n    >\n      <Slider\n        aria-label=\"Saturation\"\n        max={100}\n        min={0}\n        onValueChange={(value) => {\n          setColor(createColor(hsbToRgb({ ...hsb, s: value })));\n        }}\n        step={1}\n        value={hsb.s}\n      />\n      <Slider\n        aria-label=\"Brightness\"\n        max={100}\n        min={0}\n        onValueChange={(value) => {\n          setColor(createColor(hsbToRgb({ ...hsb, b: value })));\n        }}\n        step={1}\n        value={hsb.b}\n      />\n    </div>\n  );\n}\nColorPickerArea.displayName = \"ColorPickerArea\";\n\nexport function ColorPickerSlider(props: ColorPickerSliderOwnProps): ReactElement | null {\n  const { channel, className } = props;\n  const { alpha, color, setColor } = useColorPickerContext(\"Slider\");\n  const hsb = rgbToHsb(color.rgb);\n\n  if (channel === \"alpha\" && !alpha) return null;\n\n  const value = channel === \"hue\" ? hsb.h : color.rgb.a * 100;\n  const max = channel === \"hue\" ? 360 : 100;\n\n  return (\n    <Slider\n      aria-label={channel}\n      aria-valuetext={String(Math.round(value))}\n      className={className}\n      max={max}\n      min={0}\n      onValueChange={(next) => {\n        if (channel === \"hue\") {\n          setColor(createColor(hsbToRgb({ ...hsb, h: next })));\n        } else {\n          setColor(createColor({ ...color.rgb, a: next / 100 }));\n        }\n      }}\n      step={1}\n      value={value}\n    />\n  );\n}\nColorPickerSlider.displayName = \"ColorPickerSlider\";\n\nexport function ColorPickerSwatch(props: ColorPickerSwatchOwnProps): ReactElement | null {\n  const { className, value } = props;\n  const { setColor } = useColorPickerContext(\"Swatch\");\n  const parsed = parseHex(value) ?? createColor({ r: 0, g: 0, b: 0, a: 1 });\n\n  return useRenderElement({\n    defaultTag: \"button\",\n    props: {\n      type: \"button\",\n      \"aria-label\": value,\n      \"data-value\": value,\n      style: { backgroundColor: value },\n      ...(className ? { className } : {}),\n      onClick: () => setColor(parsed),\n    },\n    state: {},\n  });\n}\n\nexport function ColorPickerSwatchGroup(props: ColorPickerSwatchGroupOwnProps): ReactElement | null {\n  const { children, className, swatches = [] } = props;\n\n  return useRenderElement({\n    defaultTag: \"div\",\n    props: {\n      role: \"group\",\n      ...(className ? { className } : {}),\n      children:\n        children ?? swatches.map((swatch) => <ColorPickerSwatch key={swatch} value={swatch} />),\n    },\n    state: {},\n  });\n}\n\nexport function ColorPickerField(props: ColorPickerFieldOwnProps): ReactElement | null {\n  const { className } = props;\n  const { color, format, setColor } = useColorPickerContext(\"Field\");\n\n  return useRenderElement({\n    defaultTag: \"input\",\n    props: {\n      type: \"text\",\n      \"aria-label\": \"Color value\",\n      value: formatColor(color, format),\n      ...(className ? { className } : {}),\n      onChange(event: SyntheticEvent<HTMLInputElement>) {\n        const parsed = parseHex(event.currentTarget.value);\n        if (parsed) setColor(parsed);\n      },\n    },\n    state: {},\n  });\n}\n\nexport const ColorPicker = {\n  Area: ColorPickerArea,\n  Content: ColorPickerContent,\n  Field: ColorPickerField,\n  Root: ColorPickerRoot,\n  Slider: ColorPickerSlider,\n  Swatch: ColorPickerSwatch,\n  SwatchGroup: ColorPickerSwatchGroup,\n  Trigger: ColorPickerTrigger,\n};\n"],"mappings":"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","names":[]}

package/dist/components/color-picker/color.d.ts

@@ -0,0 +1,15 @@
+import type { RgbColor, HslColor, HsbColor, ColorFormat, Color } from "./types.js";
+export declare function clamp(value: number, min: number, max: number): number;
+export declare function createColor(rgb: RgbColor): Color;
+export declare function rgbToHsl({ r, g, b, a }: RgbColor): HslColor;
+export declare function hslToRgb({ h, s, l, a }: HslColor): RgbColor;
+export declare function rgbToHsb({ r, g, b, a }: RgbColor): HsbColor;
+export declare function hsbToRgb({ h, s, b, a }: HsbColor): RgbColor;
+export declare function colorToHex(color: Color, includeAlpha?: boolean): string;
+export declare function parseHex(input: string): Color | null;
+export declare function formatColor(color: Color, format: ColorFormat): string;
+export declare function parseColor(input: string): Color | null;
+export declare function colorsEqual(a: Color, b: Color): boolean;
+export declare function roundTripRgbHsl(color: Color): Color;
+export declare function roundTripRgbHsb(color: Color): Color;
+//# sourceMappingURL=color.d.ts.map

package/dist/components/color-picker/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../src/components/color-picker/color.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnF,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,QAAQ,GAAG,KAAK,CAShD;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CA4B3D;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAuB3D;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CA2B3D;AAED,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,GAAG,QAAQ,CAuB3D;AAMD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,EAAE,YAAY,UAAO,GAAG,MAAM,CAKpE;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAapD;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,GAAG,MAAM,CAkBrE;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,GAAG,IAAI,CAiBtD;AAED,wBAAgB,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,GAAG,OAAO,CAEvD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAEnD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAEnD"}