@oneplatformdev/ui 0.1.99-beta.302 → 0.1.99-beta.305

package/ColorInput/ColorInput.d.ts

@@ -0,0 +1,10 @@
+import { ColorInputProps } from './ColorInput.types';
+/**
+ * Color field: a text input showing the hex value with a color-indicator swatch
+ * that opens a full color picker popover. Mirrors the Figma branding design.
+ *
+ * Controlled via `value`/`onChange` (hex strings) — pair it with `FormColorInput`
+ * for react-hook-form usage, the same way `Input` pairs with `FormInput`.
+ */
+export declare const ColorInput: import('react').ForwardRefExoticComponent<ColorInputProps & import('react').RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=ColorInput.d.ts.map

package/ColorInput/ColorInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.d.ts","sourceRoot":"","sources":["../../src/ColorInput/ColorInput.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAKrD;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,8GA6GtB,CAAC"}

package/ColorInput/ColorInput.js

@@ -0,0 +1,103 @@
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { forwardRef as L, useState as j } from "react";
+import { cn as C } from "@oneplatformdev/utils";
+import { ColorPicker as D } from "./ColorPicker.js";
+import { parseColor as I, rgbaToHex as T, isValidColor as $ } from "./color.utils.js";
+import { useSavedColors as z } from "./useSavedColors.js";
+import { Popover as H, PopoverTrigger as K, PopoverContent as V } from "../Popover/Popover.js";
+const W = L(
+  (u, f) => {
+    const {
+      value: s = "",
+      onChange: b,
+      withAlpha: g = !1,
+      error: h,
+      savedColors: d,
+      onAddSavedColor: i,
+      onRemoveSavedColor: m,
+      savedColorsLabel: x,
+      addLabel: S,
+      removeColorLabel: E,
+      storageKey: F,
+      formats: N,
+      className: k,
+      disabled: r,
+      onBlur: w,
+      ...y
+    } = u, [c, A] = j(!1), a = z(F), l = d !== void 0 || i !== void 0 || m !== void 0, O = l ? d : a.savedColors, P = l ? i : a.addColor, B = l ? m : a.removeColor, p = I(s), R = p ? T(p, !0) : "#E8E9EB", n = (o) => b?.(o);
+    return /* @__PURE__ */ v(H, { open: c, onOpenChange: A, children: [
+      /* @__PURE__ */ v(
+        "div",
+        {
+          className: C(
+            "flex h-10 w-full items-center gap-2 rounded-lg border bg-[#FCFCFC] px-2",
+            c ? "border-[#9368FF]" : "border-[#E8E9EB]",
+            h && "border-red-500",
+            r && "opacity-60",
+            k
+          ),
+          children: [
+            /* @__PURE__ */ e(
+              "input",
+              {
+                ref: f,
+                value: s,
+                disabled: r,
+                onChange: (o) => n(o.target.value),
+                onBlur: (o) => {
+                  const t = o.target.value.trim();
+                  t && !t.startsWith("#") && $(`#${t}`) && n(`#${t}`), w?.(o);
+                },
+                className: "h-full flex-1 bg-transparent text-base font-medium text-[#06080D] outline-none",
+                ...y
+              }
+            ),
+            /* @__PURE__ */ e(K, { asChild: !0, children: /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                disabled: r,
+                "aria-label": "Open color picker",
+                className: C(
+                  "size-6 shrink-0 rounded border border-black/5",
+                  !r && "cursor-pointer"
+                ),
+                style: { backgroundColor: R }
+              }
+            ) })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        V,
+        {
+          align: "end",
+          side: "right",
+          sideOffset: 8,
+          className: "w-auto",
+          onOpenAutoFocus: (o) => o.preventDefault(),
+          children: /* @__PURE__ */ e(
+            D,
+            {
+              value: s,
+              onChange: n,
+              withAlpha: g,
+              savedColors: O,
+              onAddSavedColor: P,
+              onRemoveSavedColor: B,
+              savedColorsLabel: x,
+              addLabel: S,
+              removeColorLabel: E,
+              formats: N
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+W.displayName = "ColorInput";
+export {
+  W as ColorInput
+};
+//# sourceMappingURL=ColorInput.js.map

package/ColorInput/ColorInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.js","sources":["../../src/ColorInput/ColorInput.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport { Popover, PopoverContent, PopoverTrigger } from '../Popover';\r\nimport { ColorInputProps } from './ColorInput.types';\r\nimport { ColorPicker } from './ColorPicker';\r\nimport { isValidColor, parseColor, rgbaToHex } from './color.utils';\r\nimport { useSavedColors } from './useSavedColors';\r\n\r\n/**\r\n * Color field: a text input showing the hex value with a color-indicator swatch\r\n * that opens a full color picker popover. Mirrors the Figma branding design.\r\n *\r\n * Controlled via `value`/`onChange` (hex strings) — pair it with `FormColorInput`\r\n * for react-hook-form usage, the same way `Input` pairs with `FormInput`.\r\n */\r\nexport const ColorInput = forwardRef<HTMLInputElement, ColorInputProps>(\r\n  (props, ref) => {\r\n    const {\r\n      value = '',\r\n      onChange,\r\n      withAlpha = false,\r\n      error,\r\n      savedColors,\r\n      onAddSavedColor,\r\n      onRemoveSavedColor,\r\n      savedColorsLabel,\r\n      addLabel,\r\n      removeColorLabel,\r\n      storageKey,\r\n      formats,\r\n      className,\r\n      disabled,\r\n      onBlur,\r\n      ...rest\r\n    } = props;\r\n\r\n    const [open, setOpen] = useState(false);\r\n\r\n    // When the consumer doesn't control the palette, persist it to localStorage.\r\n    const persisted = useSavedColors(storageKey);\r\n    const isControlledPalette =\r\n      savedColors !== undefined ||\r\n      onAddSavedColor !== undefined ||\r\n      onRemoveSavedColor !== undefined;\r\n    const resolvedSavedColors = isControlledPalette\r\n      ? savedColors\r\n      : persisted.savedColors;\r\n    const resolvedAddSavedColor = isControlledPalette\r\n      ? onAddSavedColor\r\n      : persisted.addColor;\r\n    const resolvedRemoveSavedColor = isControlledPalette\r\n      ? onRemoveSavedColor\r\n      : persisted.removeColor;\r\n\r\n    // The swatch reflects the last valid color; falls back to a neutral fill.\r\n    const rgba = parseColor(value);\r\n    const swatch = rgba ? rgbaToHex(rgba, true) : '#E8E9EB';\r\n\r\n    const commit = (next: string) => onChange?.(next);\r\n\r\n    return (\r\n      <Popover open={open} onOpenChange={setOpen}>\r\n        <div\r\n          className={cn(\r\n            'flex h-10 w-full items-center gap-2 rounded-lg border bg-[#FCFCFC] px-2',\r\n            open ? 'border-[#9368FF]' : 'border-[#E8E9EB]',\r\n            error && 'border-red-500',\r\n            disabled && 'opacity-60',\r\n            className,\r\n          )}\r\n        >\r\n          <input\r\n            ref={ref}\r\n            value={value}\r\n            disabled={disabled}\r\n            onChange={(e) => commit(e.target.value)}\r\n            onBlur={(e) => {\r\n              // Normalize on blur: prefix # and drop invalid input back to swatch.\r\n              const trimmed = e.target.value.trim();\r\n              if (trimmed && !trimmed.startsWith('#') && isValidColor(`#${trimmed}`)) {\r\n                commit(`#${trimmed}`);\r\n              }\r\n              onBlur?.(e);\r\n            }}\r\n            className=\"h-full flex-1 bg-transparent text-base font-medium text-[#06080D] outline-none\"\r\n            {...rest}\r\n          />\r\n          <PopoverTrigger asChild>\r\n            <button\r\n              type=\"button\"\r\n              disabled={disabled}\r\n              aria-label=\"Open color picker\"\r\n              className={cn(\r\n                'size-6 shrink-0 rounded border border-black/5',\r\n                !disabled && 'cursor-pointer',\r\n              )}\r\n              style={{ backgroundColor: swatch }}\r\n            />\r\n          </PopoverTrigger>\r\n        </div>\r\n\r\n        <PopoverContent\r\n          align=\"end\"\r\n          side=\"right\"\r\n          sideOffset={8}\r\n          className=\"w-auto\"\r\n          onOpenAutoFocus={(e) => e.preventDefault()}\r\n        >\r\n          <ColorPicker\r\n            value={value}\r\n            onChange={commit}\r\n            withAlpha={withAlpha}\r\n            savedColors={resolvedSavedColors}\r\n            onAddSavedColor={resolvedAddSavedColor}\r\n            onRemoveSavedColor={resolvedRemoveSavedColor}\r\n            savedColorsLabel={savedColorsLabel}\r\n            addLabel={addLabel}\r\n            removeColorLabel={removeColorLabel}\r\n            formats={formats}\r\n          />\r\n        </PopoverContent>\r\n      </Popover>\r\n    );\r\n  },\r\n);\r\n\r\nColorInput.displayName = 'ColorInput';\r\n"],"names":["ColorInput","forwardRef","props","ref","value","onChange","withAlpha","error","savedColors","onAddSavedColor","onRemoveSavedColor","savedColorsLabel","addLabel","removeColorLabel","storageKey","formats","className","disabled","onBlur","rest","open","setOpen","useState","persisted","useSavedColors","isControlledPalette","resolvedSavedColors","resolvedAddSavedColor","resolvedRemoveSavedColor","rgba","parseColor","swatch","rgbaToHex","commit","next","jsxs","Popover","cn","jsx","e","trimmed","isValidColor","PopoverTrigger","PopoverContent","ColorPicker"],"mappings":";;;;;;;AAiBO,MAAMA,IAAaC;AAAA,EACxB,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,OAAAC,IAAQ;AAAA,MACR,UAAAC;AAAA,MACA,WAAAC,IAAY;AAAA,MACZ,OAAAC;AAAA,MACA,aAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,oBAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,kBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,SAAAC;AAAA,MACA,WAAAC;AAAA,MACA,UAAAC;AAAA,MACA,QAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDjB,GAEE,CAACkB,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAGhCC,IAAYC,EAAeV,CAAU,GACrCW,IACJjB,MAAgB,UAChBC,MAAoB,UACpBC,MAAuB,QACnBgB,IAAsBD,IACxBjB,IACAe,EAAU,aACRI,IAAwBF,IAC1BhB,IACAc,EAAU,UACRK,IAA2BH,IAC7Bf,IACAa,EAAU,aAGRM,IAAOC,EAAW1B,CAAK,GACvB2B,IAASF,IAAOG,EAAUH,GAAM,EAAI,IAAI,WAExCI,IAAS,CAACC,MAAiB7B,IAAW6B,CAAI;AAEhD,WACE,gBAAAC,EAACC,GAAA,EAAQ,MAAAhB,GAAY,cAAcC,GACjC,UAAA;AAAA,MAAA,gBAAAc;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWE;AAAA,YACT;AAAA,YACAjB,IAAO,qBAAqB;AAAA,YAC5Bb,KAAS;AAAA,YACTU,KAAY;AAAA,YACZD;AAAA,UAAA;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAAsB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,KAAAnC;AAAA,gBACA,OAAAC;AAAA,gBACA,UAAAa;AAAA,gBACA,UAAU,CAACsB,MAAMN,EAAOM,EAAE,OAAO,KAAK;AAAA,gBACtC,QAAQ,CAACA,MAAM;AAEb,wBAAMC,IAAUD,EAAE,OAAO,MAAM,KAAA;AAC/B,kBAAIC,KAAW,CAACA,EAAQ,WAAW,GAAG,KAAKC,EAAa,IAAID,CAAO,EAAE,KACnEP,EAAO,IAAIO,CAAO,EAAE,GAEtBtB,IAASqB,CAAC;AAAA,gBACZ;AAAA,gBACA,WAAU;AAAA,gBACT,GAAGpB;AAAA,cAAA;AAAA,YAAA;AAAA,YAEN,gBAAAmB,EAACI,GAAA,EAAe,SAAO,IACrB,UAAA,gBAAAJ;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,UAAArB;AAAA,gBACA,cAAW;AAAA,gBACX,WAAWoB;AAAA,kBACT;AAAA,kBACA,CAACpB,KAAY;AAAA,gBAAA;AAAA,gBAEf,OAAO,EAAE,iBAAiBc,EAAA;AAAA,cAAO;AAAA,YAAA,EACnC,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGF,gBAAAO;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,MAAK;AAAA,UACL,YAAY;AAAA,UACZ,WAAU;AAAA,UACV,iBAAiB,CAACJ,MAAMA,EAAE,eAAA;AAAA,UAE1B,UAAA,gBAAAD;AAAA,YAACM;AAAA,YAAA;AAAA,cACC,OAAAxC;AAAA,cACA,UAAU6B;AAAA,cACV,WAAA3B;AAAA,cACA,aAAaoB;AAAA,cACb,iBAAiBC;AAAA,cACjB,oBAAoBC;AAAA,cACpB,kBAAAjB;AAAA,cACA,UAAAC;AAAA,cACA,kBAAAC;AAAA,cACA,SAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEAf,EAAW,cAAc;"}

package/ColorInput/ColorInput.stories.js

@@ -0,0 +1,78 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { useState as d } from "react";
+import { ColorInput as n } from "./ColorInput.js";
+import { DEFAULT_SAVED_COLORS as i } from "./color.utils.js";
+function o({ initialValue: e = "#9368FF", ...s }) {
+  const [t, a] = d(e);
+  return /* @__PURE__ */ l("div", { className: "w-[341px] space-y-3", children: [
+    /* @__PURE__ */ r("span", { className: "text-sm font-medium text-[#06080D]", children: "Колір" }),
+    /* @__PURE__ */ r(n, { ...s, value: t, onChange: a }),
+    /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground", children: [
+      "value: ",
+      /* @__PURE__ */ r("span", { className: "font-mono", children: t })
+    ] })
+  ] });
+}
+const h = {
+  title: "ColorInput",
+  component: n,
+  parameters: { layout: "centered" },
+  args: {
+    withAlpha: !1,
+    error: !1,
+    disabled: !1
+  },
+  argTypes: {
+    value: { control: !1 },
+    onChange: { control: !1 },
+    onAddSavedColor: { control: !1 }
+  },
+  decorators: [
+    (e) => /* @__PURE__ */ r("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ r(e, {}) })
+  ]
+}, v = {
+  render: (e) => /* @__PURE__ */ r(o, { ...e })
+}, x = {
+  args: { withAlpha: !0 },
+  render: (e) => /* @__PURE__ */ r(o, { ...e, initialValue: "#9368FFcc" })
+}, C = {
+  args: { error: !0 },
+  render: (e) => /* @__PURE__ */ r(o, { ...e })
+}, g = {
+  args: { disabled: !0 },
+  render: (e) => /* @__PURE__ */ r(o, { ...e })
+}, A = {
+  render: (e) => /* @__PURE__ */ r(o, { ...e, formats: ["hex"] })
+}, S = {
+  render: (e) => /* @__PURE__ */ r(o, { ...e, formats: ["rgb", "hsl"] })
+}, y = {
+  // No savedColors / onAddSavedColor → palette auto-persists to localStorage.
+  render: (e) => /* @__PURE__ */ r(o, { ...e, storageKey: "storybook-color-input" })
+}, b = {
+  render: (e) => {
+    const [s, t] = d(i);
+    return /* @__PURE__ */ r("div", { className: "w-[341px] space-y-3", children: /* @__PURE__ */ r(
+      n,
+      {
+        ...e,
+        value: "#3B82F6",
+        onChange: () => {
+        },
+        savedColors: s,
+        onAddSavedColor: (a) => t((c) => [...c, a])
+      }
+    ) });
+  }
+};
+export {
+  v as Default,
+  g as Disabled,
+  C as Error,
+  A as HexOnly,
+  y as PersistedSavedColors,
+  S as RgbAndHsl,
+  x as WithAlpha,
+  b as WithSavedColorAdd,
+  h as default
+};
+//# sourceMappingURL=ColorInput.stories.js.map

package/ColorInput/ColorInput.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.stories.js","sources":["../../src/ColorInput/ColorInput.stories.tsx"],"sourcesContent":["import React, { useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { ColorInput } from './ColorInput';\r\nimport { DEFAULT_SAVED_COLORS } from './color.utils';\r\n\r\ntype ControlledProps = Omit<\r\n  React.ComponentProps<typeof ColorInput>,\r\n  'value' | 'onChange'\r\n> & {\r\n  initialValue?: string;\r\n};\r\n\r\nfunction ControlledColorInput({ initialValue = '#9368FF', ...args }: ControlledProps) {\r\n  const [value, setValue] = useState(initialValue);\r\n  return (\r\n    <div className=\"w-[341px] space-y-3\">\r\n      <span className=\"text-sm font-medium text-[#06080D]\">Колір</span>\r\n      <ColorInput {...args} value={value} onChange={setValue} />\r\n      <div className=\"text-xs text-muted-foreground\">\r\n        value: <span className=\"font-mono\">{value}</span>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst meta = {\r\n  title: 'ColorInput',\r\n  component: ColorInput,\r\n  parameters: { layout: 'centered' },\r\n  args: {\r\n    withAlpha: false,\r\n    error: false,\r\n    disabled: false,\r\n  },\r\n  argTypes: {\r\n    value: { control: false },\r\n    onChange: { control: false },\r\n    onAddSavedColor: { control: false },\r\n  },\r\n  decorators: [\r\n    (Story) => (\r\n      <div className=\"p-6 w-[420px]\">\r\n        <Story />\r\n      </div>\r\n    ),\r\n  ],\r\n} satisfies Meta<typeof ColorInput>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n  render: (args) => <ControlledColorInput {...args} />,\r\n};\r\n\r\nexport const WithAlpha: Story = {\r\n  args: { withAlpha: true },\r\n  render: (args) => <ControlledColorInput {...args} initialValue=\"#9368FFcc\" />,\r\n};\r\n\r\nexport const Error: Story = {\r\n  args: { error: true },\r\n  render: (args) => <ControlledColorInput {...args} />,\r\n};\r\n\r\nexport const Disabled: Story = {\r\n  args: { disabled: true },\r\n  render: (args) => <ControlledColorInput {...args} />,\r\n};\r\n\r\nexport const HexOnly: Story = {\r\n  render: (args) => <ControlledColorInput {...args} formats={['hex']} />,\r\n};\r\n\r\nexport const RgbAndHsl: Story = {\r\n  render: (args) => (\r\n    <ControlledColorInput {...args} formats={['rgb', 'hsl']} />\r\n  ),\r\n};\r\n\r\nexport const PersistedSavedColors: Story = {\r\n  // No savedColors / onAddSavedColor → palette auto-persists to localStorage.\r\n  render: (args) => (\r\n    <ControlledColorInput {...args} storageKey=\"storybook-color-input\" />\r\n  ),\r\n};\r\n\r\nexport const WithSavedColorAdd: Story = {\r\n  render: (args) => {\r\n    const [saved, setSaved] = useState<string[]>(DEFAULT_SAVED_COLORS);\r\n    return (\r\n      <div className=\"w-[341px] space-y-3\">\r\n        <ColorInput\r\n          {...args}\r\n          value=\"#3B82F6\"\r\n          onChange={() => {}}\r\n          savedColors={saved}\r\n          onAddSavedColor={(hex) => setSaved((prev) => [...prev, hex])}\r\n        />\r\n      </div>\r\n    );\r\n  },\r\n};\r\n"],"names":["ControlledColorInput","initialValue","args","value","setValue","useState","jsxs","jsx","ColorInput","meta","Story","Default","WithAlpha","Error","Disabled","HexOnly","RgbAndHsl","PersistedSavedColors","WithSavedColorAdd","saved","setSaved","DEFAULT_SAVED_COLORS","hex","prev"],"mappings":";;;;AAaA,SAASA,EAAqB,EAAE,cAAAC,IAAe,WAAW,GAAGC,KAAyB;AACpF,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASJ,CAAY;AAC/C,SACE,gBAAAK,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,sCAAqC,UAAA,SAAK;AAAA,sBACzDC,GAAA,EAAY,GAAGN,GAAM,OAAAC,GAAc,UAAUC,GAAU;AAAA,IACxD,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAJ,EAAA,CAAM;AAAA,IAAA,EAAA,CAC5C;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMM,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY,EAAE,QAAQ,WAAA;AAAA,EACtB,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,OAAO,EAAE,SAAS,GAAA;AAAA,IAClB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,iBAAiB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEpC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACT,MAAS,gBAAAK,EAACP,GAAA,EAAsB,GAAGE,EAAA,CAAM;AACpD,GAEaU,IAAmB;AAAA,EAC9B,MAAM,EAAE,WAAW,GAAA;AAAA,EACnB,QAAQ,CAACV,MAAS,gBAAAK,EAACP,KAAsB,GAAGE,GAAM,cAAa,YAAA,CAAY;AAC7E,GAEaW,IAAe;AAAA,EAC1B,MAAM,EAAE,OAAO,GAAA;AAAA,EACf,QAAQ,CAACX,MAAS,gBAAAK,EAACP,GAAA,EAAsB,GAAGE,EAAA,CAAM;AACpD,GAEaY,IAAkB;AAAA,EAC7B,MAAM,EAAE,UAAU,GAAA;AAAA,EAClB,QAAQ,CAACZ,MAAS,gBAAAK,EAACP,GAAA,EAAsB,GAAGE,EAAA,CAAM;AACpD,GAEaa,IAAiB;AAAA,EAC5B,QAAQ,CAACb,MAAS,gBAAAK,EAACP,GAAA,EAAsB,GAAGE,GAAM,SAAS,CAAC,KAAK,EAAA,CAAG;AACtE,GAEac,IAAmB;AAAA,EAC9B,QAAQ,CAACd,MACP,gBAAAK,EAACP,GAAA,EAAsB,GAAGE,GAAM,SAAS,CAAC,OAAO,KAAK,EAAA,CAAG;AAE7D,GAEae,IAA8B;AAAA;AAAA,EAEzC,QAAQ,CAACf,MACP,gBAAAK,EAACP,KAAsB,GAAGE,GAAM,YAAW,wBAAA,CAAwB;AAEvE,GAEagB,IAA2B;AAAA,EACtC,QAAQ,CAAChB,MAAS;AAChB,UAAM,CAACiB,GAAOC,CAAQ,IAAIf,EAAmBgB,CAAoB;AACjE,WACE,gBAAAd,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACJ,OAAM;AAAA,QACN,UAAU,MAAM;AAAA,QAAC;AAAA,QACjB,aAAaiB;AAAA,QACb,iBAAiB,CAACG,MAAQF,EAAS,CAACG,MAAS,CAAC,GAAGA,GAAMD,CAAG,CAAC;AAAA,MAAA;AAAA,IAAA,GAE/D;AAAA,EAEJ;AACF;"}

package/ColorInput/ColorInput.types.d.ts

@@ -0,0 +1,46 @@
+import { InputHTMLAttributes } from 'react';
+import { ColorFormat } from './color.utils';
+export interface ColorInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'color'> {
+    /** Current color as a hex string (#rrggbb or #rrggbbaa). */
+    value?: string;
+    /** Called with the next hex string whenever the color changes. */
+    onChange?: (hex: string) => void;
+    /** Show the alpha slider / percent field and emit 8-digit hex. Default false. */
+    withAlpha?: boolean;
+    /** Marks the field as invalid (red border). */
+    error?: boolean;
+    /**
+     * Saved-colors palette inside the picker. When omitted the input manages its
+     * own palette persisted to localStorage (see `storageKey`).
+     */
+    savedColors?: string[];
+    /**
+     * Called from the picker's "+ Add" action. When omitted (and `savedColors`
+     * is also omitted) the added color is persisted to localStorage instead.
+     */
+    onAddSavedColor?: (hex: string) => void;
+    /**
+     * Called when a saved swatch's hover "×" is clicked. When omitted (and the
+     * palette is auto-managed) removal is persisted to localStorage instead.
+     */
+    onRemoveSavedColor?: (hex: string) => void;
+    /** i18n: label before the palette. Default "Saved colors:". */
+    savedColorsLabel?: string;
+    /** i18n: label of the add action. Default "+ Add". */
+    addLabel?: string;
+    /** i18n: accessible label for a swatch's remove button. Default "Remove color". */
+    removeColorLabel?: string;
+    /**
+     * localStorage key for the auto-managed saved-colors palette. Only used when
+     * `savedColors`/`onAddSavedColor` are not provided.
+     */
+    storageKey?: string;
+    /**
+     * Color formats offered in the picker's format dropdown. Defaults to all
+     * (`['hex', 'rgb', 'rgba', 'hsl', 'hsb']`). Restrict with e.g.
+     * `formats={['hex']}`.
+     */
+    formats?: ColorFormat[];
+    className?: string;
+}
+//# sourceMappingURL=ColorInput.types.d.ts.map

package/ColorInput/ColorInput.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorInput.types.d.ts","sourceRoot":"","sources":["../../src/ColorInput/ColorInput.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,OAAO,GAAG,UAAU,GAAG,OAAO,CAC/B;IACD,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,iFAAiF;IACjF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB;;;OAGG;IACH,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/ColorInput/ColorInput.types.js

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

package/ColorInput/ColorInput.types.js.map

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

package/ColorInput/ColorPicker.d.ts

@@ -0,0 +1,28 @@
+import { ColorFormat } from './color.utils';
+export interface ColorPickerProps {
+    value: string;
+    onChange: (hex: string) => void;
+    withAlpha?: boolean;
+    /** Saved-colors palette. Empty by default. */
+    savedColors?: string[];
+    /** Renders the "+ Add" action; called with the current color. */
+    onAddSavedColor?: (hex: string) => void;
+    /** When provided, each saved swatch gets a hover "×" to remove it. */
+    onRemoveSavedColor?: (hex: string) => void;
+    /** Label before the palette (i18n). Default "Saved colors:". */
+    savedColorsLabel?: string;
+    /** Label of the add action (i18n). Default "+ Add". */
+    addLabel?: string;
+    /** Accessible label for a swatch's remove button (i18n). Default "Remove color". */
+    removeColorLabel?: string;
+    /**
+     * Color formats offered in the format dropdown. Defaults to all of them
+     * (`['hex', 'rgb', 'rgba', 'hsl', 'hsb']`). Pass a subset to restrict input,
+     * e.g. `formats={['hex']}` to only allow hex. With a single format the
+     * dropdown is hidden.
+     */
+    formats?: ColorFormat[];
+    className?: string;
+}
+export declare const ColorPicker: ({ value, onChange, withAlpha, savedColors, onAddSavedColor, onRemoveSavedColor, savedColorsLabel, addLabel, removeColorLabel, formats, className, }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColorPicker.d.ts.map

package/ColorInput/ColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../src/ColorInput/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAIL,WAAW,EAQZ,MAAM,eAAe,CAAC;AAyEvB,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iEAAiE;IACjE,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oFAAoF;IACpF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA6CD,eAAO,MAAM,WAAW,GAAI,qJAYzB,gBAAgB,4CAmRlB,CAAC"}

package/ColorInput/ColorPicker.js

@@ -0,0 +1,322 @@
+import { jsxs as d, jsx as t, Fragment as K } from "react/jsx-runtime";
+import { useState as k, useEffect as A, useCallback as V, useRef as W } from "react";
+import { cn as N } from "@oneplatformdev/utils";
+import { COLOR_FORMATS as H, parseColor as C, rgbaToHsva as _, formatColor as g, hsvaToRgba as w, COLOR_FORMAT_LABELS as B, parseColorInFormat as Q, clamp as z, FORMAT_HAS_ALPHA as Z } from "./color.utils.js";
+const ee = ({
+  value: a,
+  options: p,
+  onChange: h
+}) => {
+  const [r, o] = k(!1), c = W(null);
+  return A(() => {
+    if (!r) return;
+    const n = (m) => {
+      c.current && !c.current.contains(m.target) && o(!1);
+    };
+    return window.addEventListener("mousedown", n), () => window.removeEventListener("mousedown", n);
+  }, [r]), /* @__PURE__ */ d("div", { ref: c, className: "relative w-[74px] shrink-0", children: [
+    /* @__PURE__ */ d(
+      "button",
+      {
+        type: "button",
+        onClick: () => o((n) => !n),
+        "aria-haspopup": "listbox",
+        "aria-expanded": r,
+        className: N(
+          "flex h-7 w-full cursor-pointer items-center justify-between rounded border bg-white pl-2 pr-1.5 text-sm text-[#374151] shadow-[0px_1px_2px_rgba(31,41,55,0.08)] transition-colors",
+          r ? "border-[#9368FF]" : "border-[#E5E7EB] hover:border-[#D1D5DB]"
+        ),
+        children: [
+          /* @__PURE__ */ t("span", { children: B[a] }),
+          /* @__PURE__ */ d("svg", { className: "size-3 text-[#9CA3AF]", viewBox: "0 0 12 12", fill: "none", children: [
+            /* @__PURE__ */ t("path", { d: "M3.5 5 6 2.5 8.5 5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ t("path", { d: "M3.5 7 6 9.5 8.5 7", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round" })
+          ] })
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ t(
+      "ul",
+      {
+        role: "listbox",
+        className: "absolute left-0 top-[calc(100%+4px)] z-20 w-full overflow-hidden rounded border border-[#E5E7EB] bg-white py-1 shadow-[0px_10px_15px_rgba(31,41,55,0.1),0px_4px_6px_rgba(31,41,55,0.05)]",
+        children: p.map((n) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": n === a,
+            onClick: () => {
+              h(n), o(!1);
+            },
+            className: N(
+              "flex w-full cursor-pointer items-center px-2 py-1 text-left text-sm hover:bg-[#F3F4F6]",
+              n === a ? "font-medium text-[#9368FF]" : "text-[#374151]"
+            ),
+            children: B[n]
+          }
+        ) }, n))
+      }
+    )
+  ] });
+}, E = (a, p, h, r) => {
+  const o = a.getBoundingClientRect(), c = z((p - o.left) / o.width, 0, 1), n = z((h - o.top) / o.height, 0, 1);
+  return {
+    x: r === "y" ? 0 : c,
+    y: r === "x" ? 0 : n
+  };
+}, L = (a) => {
+  const p = W(null), h = V(
+    (r) => {
+      const o = p.current;
+      if (!o) return;
+      r.preventDefault(), a(r.clientX, r.clientY, o);
+      const c = (m) => a(m.clientX, m.clientY, o), n = () => {
+        window.removeEventListener("pointermove", c), window.removeEventListener("pointerup", n);
+      };
+      window.addEventListener("pointermove", c), window.addEventListener("pointerup", n);
+    },
+    [a]
+  );
+  return { ref: p, start: h };
+}, se = ({
+  value: a,
+  onChange: p,
+  withAlpha: h = !1,
+  savedColors: r = [],
+  onAddSavedColor: o,
+  onRemoveSavedColor: c,
+  savedColorsLabel: n = "Saved colors:",
+  addLabel: m = "+ Add",
+  removeColorLabel: D = "Remove color",
+  formats: M = H,
+  className: X
+}) => {
+  const f = M.length ? M : H, [i, S] = k(f[0]);
+  A(() => {
+    f.includes(i) || S(f[0]);
+  }, [f, i]);
+  const [s, O] = k(() => {
+    const e = C(a);
+    return e ? _(e) : { h: 0, s: 0, v: 0, a: 1 };
+  }), [Y, y] = k(null), u = h || (i === "hex" || i === "rgba");
+  A(() => {
+    const e = C(a);
+    if (!e) return;
+    const l = _(e);
+    O(
+      (x) => g(w(x), "hex", u).toLowerCase() === a.trim().toLowerCase() ? x : l
+    );
+  }, [a, u]);
+  const b = V(
+    (e) => {
+      O(e), p(g(w(e), "hex", u));
+    },
+    [p, u]
+  ), R = L((e, l, x) => {
+    const { x: v, y: J } = E(x, e, l, "both");
+    b({ ...s, s: v, v: 1 - J });
+  }), $ = L((e, l, x) => {
+    const { x: v } = E(x, e, 0, "x");
+    b({ ...s, h: v * 360 });
+  }), j = L((e, l, x) => {
+    const { x: v } = E(x, e, 0, "x");
+    b({ ...s, a: v });
+  }), I = g(w({ h: s.h, s: 1, v: 1, a: 1 }), "hex"), T = g(w({ ...s, a: 1 }), "hex"), F = g(w(s), "hex", u), U = u ? s.a : 1, P = r.find(
+    (e) => e.toLowerCase() === F.toLowerCase()
+  ), q = Y ?? g(w(s), i, Z[i]).replace(
+    i === "hex" ? /^#/ : /^$/,
+    ""
+  ), G = f.length > 1;
+  return /* @__PURE__ */ d("div", { className: N("flex w-[232px] flex-col gap-4", X), children: [
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: R.ref,
+        onPointerDown: R.start,
+        className: "relative h-[152px] w-full cursor-crosshair touch-none overflow-hidden rounded",
+        style: {
+          backgroundImage: "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)",
+          backgroundSize: "16px 16px"
+        },
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "pointer-events-none absolute inset-0",
+              style: {
+                opacity: U,
+                backgroundColor: I,
+                backgroundImage: "linear-gradient(to top, #000 0%, transparent 100%), linear-gradient(to right, #fff 0%, transparent 100%)"
+              }
+            }
+          ),
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: "pointer-events-none absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]",
+              style: {
+                left: `calc(8px + ${s.s} * (100% - 16px))`,
+                top: `calc(8px + ${1 - s.v} * (100% - 16px))`,
+                // actual color incl. alpha, so the dot matches the square
+                backgroundColor: F
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(
+      "div",
+      {
+        ref: $.ref,
+        onPointerDown: $.start,
+        className: "relative h-2 w-full cursor-pointer touch-none rounded-full",
+        style: {
+          backgroundImage: "linear-gradient(90deg, #FF0000 0%, #FF8A00 12%, #FFE600 25%, #14FF00 39%, #00A3FF 50%, #0500FF 62%, #AD00FF 73%, #FF00C7 85%, #FF0000 100%)"
+        },
+        children: /* @__PURE__ */ t(
+          "span",
+          {
+            className: "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]",
+            style: {
+              left: `calc(${s.h / 360} * (100% - 16px))`,
+              backgroundColor: I
+            }
+          }
+        )
+      }
+    ),
+    u && /* @__PURE__ */ t(
+      "div",
+      {
+        ref: j.ref,
+        onPointerDown: j.start,
+        className: "relative h-2 w-full cursor-pointer touch-none rounded-full",
+        style: {
+          backgroundImage: `linear-gradient(90deg, transparent 0%, ${T} 100%), repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)`,
+          backgroundSize: "100% 100%, 6px 6px"
+        },
+        children: /* @__PURE__ */ t(
+          "span",
+          {
+            className: "pointer-events-none absolute top-1/2 size-4 -translate-y-1/2 rounded-full border-2 border-white shadow-[0px_2px_4px_rgba(31,41,55,0.2)]",
+            style: {
+              left: `calc(${s.a} * (100% - 16px))`,
+              backgroundColor: T
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ d("div", { className: "flex items-start gap-2", children: [
+      G && /* @__PURE__ */ t(
+        ee,
+        {
+          value: i,
+          options: f,
+          onChange: (e) => {
+            y(null), S(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ d("div", { className: "flex h-7 flex-1 items-center gap-1 rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]", children: [
+        i === "hex" && /* @__PURE__ */ t("span", { className: "text-sm text-[#9CA3AF]", children: "#" }),
+        /* @__PURE__ */ t(
+          "input",
+          {
+            value: q,
+            onChange: (e) => {
+              y(e.target.value);
+              const l = Q(e.target.value, i);
+              l && b(_(l));
+            },
+            onBlur: () => y(null),
+            className: "w-full min-w-0 bg-transparent text-sm text-[#374151] outline-none",
+            "aria-label": `${B[i]} value`
+          }
+        )
+      ] }),
+      u && i === "hex" && /* @__PURE__ */ t("div", { className: "flex h-7 w-[56px] shrink-0 items-center rounded border border-[#E5E7EB] bg-white px-1.5 shadow-[0px_1px_2px_rgba(31,41,55,0.08)]", children: /* @__PURE__ */ t(
+        "input",
+        {
+          value: `${Math.round(s.a * 100)}%`,
+          onChange: (e) => {
+            const l = parseInt(e.target.value.replace(/[^0-9]/g, ""), 10);
+            Number.isNaN(l) || b({ ...s, a: z(l, 0, 100) / 100 });
+          },
+          className: "w-full bg-transparent text-sm text-[#374151] outline-none",
+          "aria-label": "Alpha percent"
+        }
+      ) })
+    ] }),
+    (!!o || r.length > 0) && /* @__PURE__ */ d(K, { children: [
+      /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ t("span", { className: "text-xs font-medium text-[#374151]", children: n }),
+        /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+          !!c && P && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              "aria-label": D,
+              title: D,
+              className: "flex cursor-pointer items-center text-[#6B7280] hover:text-[#EF4444]",
+              onClick: () => c?.(P),
+              children: /* @__PURE__ */ t("svg", { viewBox: "0 0 16 16", className: "size-3.5", fill: "none", children: /* @__PURE__ */ t(
+                "path",
+                {
+                  d: "M2.5 4h11M6.5 4V2.8c0-.4.3-.8.8-.8h1.4c.5 0 .8.4.8.8V4M4 4l.6 8.3c0 .6.5 1 1 1h4.8c.5 0 1-.4 1-1L12 4M6.5 6.8v4M9.5 6.8v4",
+                  stroke: "currentColor",
+                  strokeWidth: "1.1",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              ) })
+            }
+          ),
+          !!o && /* @__PURE__ */ t(
+            "button",
+            {
+              type: "button",
+              className: "text-xs font-medium text-[#6B7280] hover:text-[#374151]",
+              onClick: () => o?.(F),
+              children: m
+            }
+          )
+        ] })
+      ] }),
+      r.length > 0 && /* @__PURE__ */ t("div", { className: "grid grid-cols-7 gap-2", children: r.map((e) => /* @__PURE__ */ d("div", { className: "relative size-6", children: [
+        /* @__PURE__ */ t(
+          "span",
+          {
+            className: "absolute inset-0 rounded-full",
+            style: {
+              backgroundImage: "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%)",
+              backgroundSize: "8px 8px"
+            }
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "button",
+            title: e,
+            onClick: () => {
+              const l = C(e);
+              l && b(_(l));
+            },
+            className: N(
+              "absolute inset-0 cursor-pointer rounded-full",
+              F.toLowerCase() === e.toLowerCase() && "border-2 border-white shadow-[0px_0px_0px_2px_rgba(0,0,0,0.25)]"
+            ),
+            style: { backgroundColor: e }
+          }
+        )
+      ] }, e)) })
+    ] })
+  ] });
+};
+export {
+  se as ColorPicker
+};
+//# sourceMappingURL=ColorPicker.js.map