@alfadocs/ui-kit-debug 0.70.0 → 0.71.0

package/dist/_chunks/icon-picker-0B7KhrF1.js

@@ -0,0 +1,272 @@
+import { jsxs as N, jsx as r } from "react/jsx-runtime";
+import { forwardRef as H, useState as y, useRef as h, useCallback as v, useMemo as b } from "react";
+import { c as M } from "./index-D2ZczOXr.js";
+import { useTranslation as F } from "react-i18next";
+import { P as k } from "./popover-B2qCDhJC.js";
+import { B as D } from "./button-DD_0Xdmr.js";
+import { T as E } from "./text-input-B-OWQ1Je.js";
+import { u as G } from "./registry-DvAUVLHh.js";
+import { S as J } from "./search-BonnQsHv.js";
+const U = {
+  id: "icon-picker",
+  capabilities: ["pick", "filter", "open", "close"],
+  state: {
+    value: {
+      type: "string",
+      descriptionKey: "ui.agent.iconPicker.state.value",
+      description: "Id of the currently selected icon, or an empty string when nothing is picked.",
+      read: (t) => t.getValue()
+    },
+    isOpen: {
+      type: "boolean",
+      descriptionKey: "ui.agent.iconPicker.state.isOpen",
+      description: "True when the picker popover is currently open.",
+      read: (t) => t.isOpen()
+    },
+    query: {
+      type: "string",
+      descriptionKey: "ui.agent.iconPicker.state.query",
+      description: "Current search query filtering the icon grid by label.",
+      read: (t) => t.getQuery()
+    }
+  },
+  actions: {
+    set_value: {
+      safety: "write",
+      argsType: "{ id: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          id: {
+            type: "string",
+            description: "Id of an icon in the supplied `icons` set."
+          }
+        },
+        required: ["id"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.setValue",
+      description: "Select the icon with the given id.",
+      examples: [{ args: { id: "star" }, note: 'Pick the "star" icon.' }],
+      invoke: (t, i) => {
+        t.setValue(i.id);
+      }
+    },
+    open: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.open",
+      description: "Open the picker popover.",
+      invoke: (t) => {
+        t.open();
+      }
+    },
+    close: {
+      safety: "read",
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.close",
+      description: "Close the picker popover.",
+      invoke: (t) => {
+        t.close();
+      }
+    },
+    filter: {
+      safety: "write",
+      argsType: "{ query: string }",
+      argsSchema: {
+        type: "object",
+        properties: {
+          query: {
+            type: "string",
+            description: "Case-insensitive substring matched against icon labels."
+          }
+        },
+        required: ["query"]
+      },
+      idempotent: !0,
+      descriptionKey: "ui.agent.iconPicker.actions.filter",
+      description: "Filter the icon grid to labels containing the query.",
+      examples: [
+        {
+          args: { query: "star" },
+          note: 'Show icons whose label contains "star".'
+        }
+      ],
+      invoke: (t, i) => {
+        t.setQuery(i.query);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "icon-picker",
+      description: "Marks the IconPicker trigger button."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, W = M(
+  [
+    "ds:relative ds:inline-flex ds:items-center ds:justify-center",
+    "ds:size-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]",
+    "ds:border ds:text-foreground ds:bg-transparent",
+    "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+    "ds:hover:bg-muted/10",
+    "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+    "ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "ds:forced-colors:focus-visible:outline-[CanvasText]",
+    "ds:[&_svg]:size-5"
+  ].join(" "),
+  {
+    variants: {
+      selected: {
+        true: "ds:border-primary ds:bg-muted",
+        false: "ds:border-transparent"
+      }
+    },
+    defaultVariants: { selected: !1 }
+  }
+), X = H(
+  function({
+    icons: i,
+    value: P,
+    defaultValue: S,
+    onChange: a,
+    placeholder: O,
+    disabled: R,
+    id: u,
+    className: T,
+    "aria-label": j
+  }, K) {
+    const { t: n } = F(), p = P !== void 0, [Q, z] = y(
+      S ?? ""
+    ), o = p ? P ?? "" : Q, [g, A] = y(!1), [c, d] = y(""), x = h(o);
+    x.current = o;
+    const w = h(g);
+    w.current = g;
+    const q = h(c);
+    q.current = c;
+    const s = v((e) => {
+      A(e), e || d("");
+    }, []), l = v(
+      (e) => {
+        p || z(e), a == null || a(e);
+      },
+      [p, a]
+    ), L = v(
+      (e) => {
+        l(e), s(!1);
+      },
+      [l, s]
+    ), _ = b(
+      () => ({
+        getValue: () => x.current,
+        setValue: (e) => l(e),
+        isOpen: () => w.current,
+        open: () => s(!0),
+        close: () => s(!1),
+        getQuery: () => q.current,
+        setQuery: (e) => d(e)
+      }),
+      [l, s]
+    );
+    G(U, _, u);
+    const V = b(
+      () => i.find((e) => e.id === o),
+      [i, o]
+    ), m = c.trim().toLowerCase(), C = b(
+      () => m ? i.filter(
+        (e) => e.label.toLowerCase().includes(m)
+      ) : i,
+      [i, m]
+    ), f = j ?? n("iconPicker.trigger"), B = O ?? n("iconPicker.trigger");
+    return /* @__PURE__ */ N(k.Root, { open: g, onOpenChange: s, id: u, children: [
+      /* @__PURE__ */ r(k.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
+        D,
+        {
+          ref: K,
+          type: "button",
+          intent: "outline",
+          disabled: R,
+          "aria-label": f,
+          className: T,
+          "data-component": "icon-picker",
+          "data-component-id": u,
+          children: V ? /* @__PURE__ */ r(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "ds:inline-flex ds:items-center ds:justify-center ds:[&_svg]:size-5",
+              children: V.node
+            }
+          ) : /* @__PURE__ */ r("span", { className: "ds:inline-flex ds:items-center ds:text-muted-foreground", children: B })
+        }
+      ) }),
+      /* @__PURE__ */ r(
+        k.Content,
+        {
+          align: "start",
+          showArrow: !1,
+          "aria-label": f,
+          className: "ds:w-72",
+          children: /* @__PURE__ */ N("div", { className: "ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ r(
+              E,
+              {
+                size: "sm",
+                value: c,
+                onChange: (e) => d(e.target.value),
+                placeholder: n("iconPicker.search"),
+                "aria-label": n("iconPicker.search"),
+                startAdornment: /* @__PURE__ */ r(J, {}),
+                clearable: !0,
+                onClear: () => d(""),
+                autoComplete: "off"
+              }
+            ),
+            C.length === 0 ? /* @__PURE__ */ r(
+              "p",
+              {
+                role: "status",
+                className: "type-body-sm ds:text-muted-foreground ds:text-center ds:py-[var(--spacing-sm)]",
+                children: n("iconPicker.noResults")
+              }
+            ) : /* @__PURE__ */ r(
+              "div",
+              {
+                role: "group",
+                "aria-label": f,
+                className: "ds:grid ds:grid-cols-5 ds:gap-[var(--spacing-xs)] ds:max-h-64 ds:overflow-y-auto",
+                children: C.map((e) => {
+                  const I = e.id === o;
+                  return /* @__PURE__ */ r(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": e.label,
+                      "aria-pressed": I,
+                      onClick: () => L(e.id),
+                      className: W({ selected: I }),
+                      children: /* @__PURE__ */ r("span", { "aria-hidden": "true", className: "ds:inline-flex", children: e.node })
+                    },
+                    e.id
+                  );
+                })
+              }
+            )
+          ] })
+        }
+      )
+    ] });
+  }
+);
+X.displayName = "IconPicker";
+export {
+  X as I,
+  U as i
+};
+//# sourceMappingURL=icon-picker-0B7KhrF1.js.map

package/dist/_chunks/icon-picker-0B7KhrF1.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker-0B7KhrF1.js","sources":["../../src/components/icon-picker/icon-picker.agent.ts","../../src/components/icon-picker/icon-picker.tsx"],"sourcesContent":["/* -------------------------------------------------------------------- */\n/* Agent adapter — IconPicker.                                            */\n/*                                                                        */\n/* See `src/docs/26-agent-readiness.mdx` for the contract.                */\n/* -------------------------------------------------------------------- */\n\nimport type { AgentAdapter } from '../../agent/types';\nimport type { IconPickerHandle } from './icon-picker';\n\nexport const iconPickerAgent: AgentAdapter<IconPickerHandle> = {\n  id: 'icon-picker',\n  capabilities: ['pick', 'filter', 'open', 'close'],\n  state: {\n    value: {\n      type: 'string',\n      descriptionKey: 'ui.agent.iconPicker.state.value',\n      description:\n        'Id of the currently selected icon, or an empty string when nothing is picked.',\n      read: (handle) => handle.getValue(),\n    },\n    isOpen: {\n      type: 'boolean',\n      descriptionKey: 'ui.agent.iconPicker.state.isOpen',\n      description: 'True when the picker popover is currently open.',\n      read: (handle) => handle.isOpen(),\n    },\n    query: {\n      type: 'string',\n      descriptionKey: 'ui.agent.iconPicker.state.query',\n      description: 'Current search query filtering the icon grid by label.',\n      read: (handle) => handle.getQuery(),\n    },\n  },\n  actions: {\n    set_value: {\n      safety: 'write',\n      argsType: '{ id: string }',\n      argsSchema: {\n        type: 'object',\n        properties: {\n          id: {\n            type: 'string',\n            description: 'Id of an icon in the supplied `icons` set.',\n          },\n        },\n        required: ['id'],\n      },\n      idempotent: true,\n      descriptionKey: 'ui.agent.iconPicker.actions.setValue',\n      description: 'Select the icon with the given id.',\n      examples: [{ args: { id: 'star' }, note: 'Pick the \"star\" icon.' }],\n      invoke: (handle, args: { id: string }) => {\n        handle.setValue(args.id);\n      },\n    },\n    open: {\n      safety: 'read',\n      idempotent: true,\n      descriptionKey: 'ui.agent.iconPicker.actions.open',\n      description: 'Open the picker popover.',\n      invoke: (handle) => {\n        handle.open();\n      },\n    },\n    close: {\n      safety: 'read',\n      idempotent: true,\n      descriptionKey: 'ui.agent.iconPicker.actions.close',\n      description: 'Close the picker popover.',\n      invoke: (handle) => {\n        handle.close();\n      },\n    },\n    filter: {\n      safety: 'write',\n      argsType: '{ query: string }',\n      argsSchema: {\n        type: 'object',\n        properties: {\n          query: {\n            type: 'string',\n            description:\n              'Case-insensitive substring matched against icon labels.',\n          },\n        },\n        required: ['query'],\n      },\n      idempotent: true,\n      descriptionKey: 'ui.agent.iconPicker.actions.filter',\n      description: 'Filter the icon grid to labels containing the query.',\n      examples: [\n        {\n          args: { query: 'star' },\n          note: 'Show icons whose label contains \"star\".',\n        },\n      ],\n      invoke: (handle, args: { query: string }) => {\n        handle.setQuery(args.query);\n      },\n    },\n  },\n  domHooks: {\n    root: {\n      attr: 'data-component',\n      value: 'icon-picker',\n      description: 'Marks the IconPicker trigger button.',\n    },\n    instanceId: {\n      attr: 'data-component-id',\n      sourceProp: 'id',\n      description: 'Sourced from the id prop.',\n    },\n  },\n};\n","import {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type ReactNode,\n} from 'react';\nimport { cva } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { Search } from 'lucide-react';\nimport { Popover } from '../popover';\nimport { Button } from '../button/button';\nimport { TextInput } from '../text-input/text-input';\nimport { useAgentRegistration } from '../../agent';\nimport { iconPickerAgent } from './icon-picker.agent';\n\n/** One selectable glyph. `label` is the accessible name (consumer-localised);\n *  `node` is the rendered lucide/SVG element. */\nexport interface IconPickerIcon {\n  id: string;\n  label: string;\n  node: ReactNode;\n}\n\n/** Agent-readiness curated handle for IconPicker. */\nexport interface IconPickerHandle {\n  getValue: () => string;\n  setValue: (id: string) => void;\n  isOpen: () => boolean;\n  open: () => void;\n  close: () => void;\n  getQuery: () => string;\n  setQuery: (query: string) => void;\n}\n\nexport interface IconPickerProps {\n  /** The glyph set. `label` is each glyph's accessible name. */\n  icons: IconPickerIcon[];\n  /** Controlled selected icon id. Pair with onChange. */\n  value?: string;\n  /** Uncontrolled initial selected icon id. */\n  defaultValue?: string;\n  /** Fires with the chosen icon id when a glyph is picked. */\n  onChange?: (id: string) => void;\n  /** Shown on the trigger when nothing is selected. */\n  placeholder?: ReactNode;\n  disabled?: boolean;\n  id?: string;\n  className?: string;\n  /** Trigger accessible name. Defaults to the bundled `iconPicker.trigger`. */\n  'aria-label'?: string;\n}\n\n// Selectable glyph cell. The only variant is selection state — selected cells\n// take a tokenised highlight (primary border + muted fill); `aria-pressed`\n// carries the state non-visually so it never reads by colour alone.\nconst optionVariants = cva(\n  [\n    'ds:relative ds:inline-flex ds:items-center ds:justify-center',\n    'ds:size-[var(--min-target-size)] ds:rounded-[var(--radius-sm)]',\n    'ds:border ds:text-foreground ds:bg-transparent',\n    'ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none',\n    'ds:hover:bg-muted/10',\n    'ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid',\n    'ds:focus-visible:outline-ring ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'ds:forced-colors:focus-visible:outline-[CanvasText]',\n    'ds:[&_svg]:size-5',\n  ].join(' '),\n  {\n    variants: {\n      selected: {\n        true: 'ds:border-primary ds:bg-muted',\n        false: 'ds:border-transparent',\n      },\n    },\n    defaultVariants: { selected: false },\n  },\n);\n\nexport const IconPicker = forwardRef<HTMLButtonElement, IconPickerProps>(\n  function IconPicker(\n    {\n      icons,\n      value,\n      defaultValue,\n      onChange,\n      placeholder,\n      disabled,\n      id,\n      className,\n      'aria-label': ariaLabel,\n    },\n    ref,\n  ) {\n    const { t } = useTranslation();\n\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState<string>(\n      defaultValue ?? '',\n    );\n    const currentValue = isControlled ? (value ?? '') : internalValue;\n\n    const [open, setOpen] = useState(false);\n    const [query, setQuery] = useState('');\n\n    // Live snapshots for the synchronous agent handle.\n    const currentValueRef = useRef(currentValue);\n    currentValueRef.current = currentValue;\n    const openRef = useRef(open);\n    openRef.current = open;\n    const queryRef = useRef(query);\n    queryRef.current = query;\n\n    const handleOpenChange = useCallback((next: boolean) => {\n      setOpen(next);\n      // Reset the filter when the popover closes so the next open starts fresh.\n      if (!next) setQuery('');\n    }, []);\n\n    const setValueImperative = useCallback(\n      (iconId: string) => {\n        if (!isControlled) setInternalValue(iconId);\n        onChange?.(iconId);\n      },\n      [isControlled, onChange],\n    );\n\n    const handleSelect = useCallback(\n      (iconId: string) => {\n        setValueImperative(iconId);\n        handleOpenChange(false);\n      },\n      [setValueImperative, handleOpenChange],\n    );\n\n    const agentHandle = useMemo<IconPickerHandle>(\n      () => ({\n        getValue: () => currentValueRef.current,\n        setValue: (iconId) => setValueImperative(iconId),\n        isOpen: () => openRef.current,\n        open: () => handleOpenChange(true),\n        close: () => handleOpenChange(false),\n        getQuery: () => queryRef.current,\n        setQuery: (next) => setQuery(next),\n      }),\n      [setValueImperative, handleOpenChange],\n    );\n    useAgentRegistration(iconPickerAgent, agentHandle, id);\n\n    const selectedIcon = useMemo(\n      () => icons.find((icon) => icon.id === currentValue),\n      [icons, currentValue],\n    );\n\n    const normalisedQuery = query.trim().toLowerCase();\n    const filtered = useMemo(\n      () =>\n        normalisedQuery\n          ? icons.filter((icon) =>\n              icon.label.toLowerCase().includes(normalisedQuery),\n            )\n          : icons,\n      [icons, normalisedQuery],\n    );\n\n    const triggerLabel = ariaLabel ?? t('iconPicker.trigger');\n    const resolvedPlaceholder = placeholder ?? t('iconPicker.trigger');\n\n    return (\n      <Popover.Root open={open} onOpenChange={handleOpenChange} id={id}>\n        <Popover.Trigger asChild>\n          <Button\n            ref={ref}\n            type=\"button\"\n            intent=\"outline\"\n            disabled={disabled}\n            aria-label={triggerLabel}\n            className={className}\n            data-component=\"icon-picker\"\n            data-component-id={id}\n          >\n            {selectedIcon ? (\n              <span\n                aria-hidden=\"true\"\n                className=\"ds:inline-flex ds:items-center ds:justify-center ds:[&_svg]:size-5\"\n              >\n                {selectedIcon.node}\n              </span>\n            ) : (\n              <span className=\"ds:inline-flex ds:items-center ds:text-muted-foreground\">\n                {resolvedPlaceholder}\n              </span>\n            )}\n          </Button>\n        </Popover.Trigger>\n\n        <Popover.Content\n          align=\"start\"\n          showArrow={false}\n          aria-label={triggerLabel}\n          className=\"ds:w-72\"\n        >\n          <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]\">\n            <TextInput\n              size=\"sm\"\n              value={query}\n              onChange={(event: ChangeEvent<HTMLInputElement>) =>\n                setQuery(event.target.value)\n              }\n              placeholder={t('iconPicker.search')}\n              aria-label={t('iconPicker.search')}\n              startAdornment={<Search />}\n              clearable\n              onClear={() => setQuery('')}\n              autoComplete=\"off\"\n            />\n\n            {filtered.length === 0 ? (\n              <p\n                role=\"status\"\n                className=\"type-body-sm ds:text-muted-foreground ds:text-center ds:py-[var(--spacing-sm)]\"\n              >\n                {t('iconPicker.noResults')}\n              </p>\n            ) : (\n              <div\n                role=\"group\"\n                aria-label={triggerLabel}\n                className=\"ds:grid ds:grid-cols-5 ds:gap-[var(--spacing-xs)] ds:max-h-64 ds:overflow-y-auto\"\n              >\n                {filtered.map((icon) => {\n                  const selected = icon.id === currentValue;\n                  return (\n                    <button\n                      key={icon.id}\n                      type=\"button\"\n                      aria-label={icon.label}\n                      aria-pressed={selected}\n                      onClick={() => handleSelect(icon.id)}\n                      className={optionVariants({ selected })}\n                    >\n                      <span aria-hidden=\"true\" className=\"ds:inline-flex\">\n                        {icon.node}\n                      </span>\n                    </button>\n                  );\n                })}\n              </div>\n            )}\n          </div>\n        </Popover.Content>\n      </Popover.Root>\n    );\n  },\n);\n\nIconPicker.displayName = 'IconPicker';\n\nexport { optionVariants as iconPickerOptionVariants };\n"],"names":["iconPickerAgent","handle","args","optionVariants","cva","IconPicker","forwardRef","icons","value","defaultValue","onChange","placeholder","disabled","id","className","ariaLabel","ref","t","useTranslation","isControlled","internalValue","setInternalValue","useState","currentValue","open","setOpen","query","setQuery","currentValueRef","useRef","openRef","queryRef","handleOpenChange","useCallback","next","setValueImperative","iconId","handleSelect","agentHandle","useMemo","useAgentRegistration","selectedIcon","icon","normalisedQuery","filtered","triggerLabel","resolvedPlaceholder","Popover","jsx","Button","jsxs","TextInput","event","Search","selected"],"mappings":";;;;;;;;;AASO,MAAMA,IAAkD;AAAA,EAC7D,IAAI;AAAA,EACJ,cAAc,CAAC,QAAQ,UAAU,QAAQ,OAAO;AAAA,EAChD,OAAO;AAAA,IACL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,aACE;AAAA,MACF,MAAM,CAACC,MAAWA,EAAO,SAAA;AAAA,IAAS;AAAA,IAEpC,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,MAAM,CAACA,MAAWA,EAAO,OAAA;AAAA,IAAO;AAAA,IAElC,OAAO;AAAA,MACL,MAAM;AAAA,MACN,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,MAAM,CAACA,MAAWA,EAAO,SAAA;AAAA,IAAS;AAAA,EACpC;AAAA,EAEF,SAAS;AAAA,IACP,WAAW;AAAA,MACT,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,YAAY;AAAA,QACV,MAAM;AAAA,QACN,YAAY;AAAA,UACV,IAAI;AAAA,YACF,MAAM;AAAA,YACN,aAAa;AAAA,UAAA;AAAA,QACf;AAAA,QAEF,UAAU,CAAC,IAAI;AAAA,MAAA;AAAA,MAEjB,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,UAAU,CAAC,EAAE,MAAM,EAAE,IAAI,UAAU,MAAM,yBAAyB;AAAA,MAClE,QAAQ,CAACA,GAAQC,MAAyB;AACxC,QAAAD,EAAO,SAASC,EAAK,EAAE;AAAA,MACzB;AAAA,IAAA;AAAA,IAEF,MAAM;AAAA,MACJ,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,QAAQ,CAACD,MAAW;AAClB,QAAAA,EAAO,KAAA;AAAA,MACT;AAAA,IAAA;AAAA,IAEF,OAAO;AAAA,MACL,QAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,QAAQ,CAACA,MAAW;AAClB,QAAAA,EAAO,MAAA;AAAA,MACT;AAAA,IAAA;AAAA,IAEF,QAAQ;AAAA,MACN,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,YAAY;AAAA,QACV,MAAM;AAAA,QACN,YAAY;AAAA,UACV,OAAO;AAAA,YACL,MAAM;AAAA,YACN,aACE;AAAA,UAAA;AAAA,QACJ;AAAA,QAEF,UAAU,CAAC,OAAO;AAAA,MAAA;AAAA,MAEpB,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,aAAa;AAAA,MACb,UAAU;AAAA,QACR;AAAA,UACE,MAAM,EAAE,OAAO,OAAA;AAAA,UACf,MAAM;AAAA,QAAA;AAAA,MACR;AAAA,MAEF,QAAQ,CAACA,GAAQC,MAA4B;AAC3C,QAAAD,EAAO,SAASC,EAAK,KAAK;AAAA,MAC5B;AAAA,IAAA;AAAA,EACF;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,IAAA;AAAA,IAEf,YAAY;AAAA,MACV,MAAM;AAAA,MACN,YAAY;AAAA,MACZ,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GCvDMC,IAAiBC;AAAA,EACrB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,UAAU;AAAA,QACR,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB,EAAE,UAAU,GAAA;AAAA,EAAM;AAEvC,GAEaC,IAAaC;AAAA,EACxB,SACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,IAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAcC;AAAA,EAAA,GAEhBC,GACA;AACA,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GAERC,IAAeX,MAAU,QACzB,CAACY,GAAeC,CAAgB,IAAIC;AAAA,MACxCb,KAAgB;AAAA,IAAA,GAEZc,IAAeJ,IAAgBX,KAAS,KAAMY,GAE9C,CAACI,GAAMC,CAAO,IAAIH,EAAS,EAAK,GAChC,CAACI,GAAOC,CAAQ,IAAIL,EAAS,EAAE,GAG/BM,IAAkBC,EAAON,CAAY;AAC3C,IAAAK,EAAgB,UAAUL;AAC1B,UAAMO,IAAUD,EAAOL,CAAI;AAC3B,IAAAM,EAAQ,UAAUN;AAClB,UAAMO,IAAWF,EAAOH,CAAK;AAC7B,IAAAK,EAAS,UAAUL;AAEnB,UAAMM,IAAmBC,EAAY,CAACC,MAAkB;AACtD,MAAAT,EAAQS,CAAI,GAEPA,KAAMP,EAAS,EAAE;AAAA,IACxB,GAAG,CAAA,CAAE,GAECQ,IAAqBF;AAAA,MACzB,CAACG,MAAmB;AAClB,QAAKjB,KAAcE,EAAiBe,CAAM,GAC1C1B,KAAA,QAAAA,EAAW0B;AAAA,MACb;AAAA,MACA,CAACjB,GAAcT,CAAQ;AAAA,IAAA,GAGnB2B,IAAeJ;AAAA,MACnB,CAACG,MAAmB;AAClB,QAAAD,EAAmBC,CAAM,GACzBJ,EAAiB,EAAK;AAAA,MACxB;AAAA,MACA,CAACG,GAAoBH,CAAgB;AAAA,IAAA,GAGjCM,IAAcC;AAAA,MAClB,OAAO;AAAA,QACL,UAAU,MAAMX,EAAgB;AAAA,QAChC,UAAU,CAACQ,MAAWD,EAAmBC,CAAM;AAAA,QAC/C,QAAQ,MAAMN,EAAQ;AAAA,QACtB,MAAM,MAAME,EAAiB,EAAI;AAAA,QACjC,OAAO,MAAMA,EAAiB,EAAK;AAAA,QACnC,UAAU,MAAMD,EAAS;AAAA,QACzB,UAAU,CAACG,MAASP,EAASO,CAAI;AAAA,MAAA;AAAA,MAEnC,CAACC,GAAoBH,CAAgB;AAAA,IAAA;AAEvC,IAAAQ,EAAqBxC,GAAiBsC,GAAazB,CAAE;AAErD,UAAM4B,IAAeF;AAAA,MACnB,MAAMhC,EAAM,KAAK,CAACmC,MAASA,EAAK,OAAOnB,CAAY;AAAA,MACnD,CAAChB,GAAOgB,CAAY;AAAA,IAAA,GAGhBoB,IAAkBjB,EAAM,KAAA,EAAO,YAAA,GAC/BkB,IAAWL;AAAA,MACf,MACEI,IACIpC,EAAM;AAAA,QAAO,CAACmC,MACZA,EAAK,MAAM,YAAA,EAAc,SAASC,CAAe;AAAA,MAAA,IAEnDpC;AAAA,MACN,CAACA,GAAOoC,CAAe;AAAA,IAAA,GAGnBE,IAAe9B,KAAaE,EAAE,oBAAoB,GAClD6B,IAAsBnC,KAAeM,EAAE,oBAAoB;AAEjE,6BACG8B,EAAQ,MAAR,EAAa,MAAAvB,GAAY,cAAcQ,GAAkB,IAAAnB,GACxD,UAAA;AAAA,MAAA,gBAAAmC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACtB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAjC;AAAA,UACA,MAAK;AAAA,UACL,QAAO;AAAA,UACP,UAAAJ;AAAA,UACA,cAAYiC;AAAA,UACZ,WAAA/B;AAAA,UACA,kBAAe;AAAA,UACf,qBAAmBD;AAAA,UAElB,UAAA4B,IACC,gBAAAO;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAY;AAAA,cACZ,WAAU;AAAA,cAET,UAAAP,EAAa;AAAA,YAAA;AAAA,UAAA,IAGhB,gBAAAO,EAAC,QAAA,EAAK,WAAU,2DACb,UAAAF,EAAA,CACH;AAAA,QAAA;AAAA,MAAA,GAGN;AAAA,MAEA,gBAAAE;AAAA,QAACD,EAAQ;AAAA,QAAR;AAAA,UACC,OAAM;AAAA,UACN,WAAW;AAAA,UACX,cAAYF;AAAA,UACZ,WAAU;AAAA,UAEV,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAU,kDACb,UAAA;AAAA,YAAA,gBAAAF;AAAA,cAACG;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,OAAOzB;AAAA,gBACP,UAAU,CAAC0B,MACTzB,EAASyB,EAAM,OAAO,KAAK;AAAA,gBAE7B,aAAanC,EAAE,mBAAmB;AAAA,gBAClC,cAAYA,EAAE,mBAAmB;AAAA,gBACjC,kCAAiBoC,GAAA,EAAO;AAAA,gBACxB,WAAS;AAAA,gBACT,SAAS,MAAM1B,EAAS,EAAE;AAAA,gBAC1B,cAAa;AAAA,cAAA;AAAA,YAAA;AAAA,YAGdiB,EAAS,WAAW,IACnB,gBAAAI;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,WAAU;AAAA,gBAET,YAAE,sBAAsB;AAAA,cAAA;AAAA,YAAA,IAG3B,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,cAAYH;AAAA,gBACZ,WAAU;AAAA,gBAET,UAAAD,EAAS,IAAI,CAACF,MAAS;AACtB,wBAAMY,IAAWZ,EAAK,OAAOnB;AAC7B,yBACE,gBAAAyB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEC,MAAK;AAAA,sBACL,cAAYN,EAAK;AAAA,sBACjB,gBAAcY;AAAA,sBACd,SAAS,MAAMjB,EAAaK,EAAK,EAAE;AAAA,sBACnC,WAAWvC,EAAe,EAAE,UAAAmD,GAAU;AAAA,sBAEtC,4BAAC,QAAA,EAAK,eAAY,QAAO,WAAU,kBAChC,YAAK,KAAA,CACR;AAAA,oBAAA;AAAA,oBATKZ,EAAK;AAAA,kBAAA;AAAA,gBAYhB,CAAC;AAAA,cAAA;AAAA,YAAA;AAAA,UACH,EAAA,CAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IACF,GACF;AAAA,EAEJ;AACF;AAEArC,EAAW,cAAc;"}

package/dist/_chunks/image-cropper-D9jqJy19.js

@@ -0,0 +1,367 @@
+import { jsxs as C, jsx as h } from "react/jsx-runtime";
+import { forwardRef as te, useId as oe, useRef as w, useState as re, useCallback as X, useMemo as ie } from "react";
+import { c as Y } from "./index-D2ZczOXr.js";
+import { useTranslation as se } from "react-i18next";
+import { c as ne } from "./compose-refs-C0k0tdqF.js";
+import { u as ae } from "./registry-DvAUVLHh.js";
+import { B as ce } from "./button-DD_0Xdmr.js";
+import { R as de } from "./rotate-ccw-BWANpitO.js";
+const le = {
+  type: "object",
+  properties: {
+    x: { type: "number", minimum: 0, maximum: 1 },
+    y: { type: "number", minimum: 0, maximum: 1 },
+    width: { type: "number", minimum: 0, maximum: 1 },
+    height: { type: "number", minimum: 0, maximum: 1 }
+  },
+  required: ["x", "y", "width", "height"]
+}, pe = {
+  id: "image-cropper",
+  capabilities: ["range_pick"],
+  state: {
+    crop: {
+      type: "object",
+      descriptionKey: "ui.agent.imageCropper.state.crop",
+      description: "Current crop rectangle in normalised [0,1] coordinates: { x, y, width, height }.",
+      read: (o) => o.getCrop()
+    }
+  },
+  actions: {
+    set_crop: {
+      safety: "write",
+      argsType: "{ x: number; y: number; width: number; height: number }",
+      argsSchema: le,
+      idempotent: !0,
+      descriptionKey: "ui.agent.imageCropper.actions.setCrop",
+      description: "Set the crop rectangle (normalised [0,1]). Values are clamped to the image bounds and the minimum crop size.",
+      invoke: (o, c) => {
+        o.setCrop(c);
+      }
+    },
+    reset: {
+      safety: "write",
+      idempotent: !0,
+      descriptionKey: "ui.agent.imageCropper.actions.reset",
+      description: "Reset the crop to the centred default for the current aspect.",
+      invoke: (o) => {
+        o.reset();
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "image-cropper",
+      description: "Marks the ImageCropper wrapper."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    }
+  }
+}, De = (o) => Math.min(1, Math.max(0, o));
+function M(o, c) {
+  const n = Math.min(1, Math.max(c, o.width)), s = Math.min(1, Math.max(c, o.height)), d = Math.min(1 - n, Math.max(0, o.x)), y = Math.min(1 - s, Math.max(0, o.y));
+  return { x: d, y, width: n, height: s };
+}
+function B(o, c, n, s) {
+  if (!c || c <= 0 || n <= 0 || s <= 0) return o;
+  const d = o.width * n / c / s;
+  return { ...o, height: d };
+}
+function D(o, c, n) {
+  const d = B({ x: 0.1, y: 0.1, width: 0.8, height: 0.8 }, o, c, n);
+  return M(
+    {
+      ...d,
+      // Re-centre vertically after the aspect coercion.
+      y: Math.max(0, (1 - d.height) / 2)
+    },
+    0.05
+  );
+}
+function ue(o) {
+  return {
+    x: Math.round(o.x * 100),
+    y: Math.round(o.y * 100),
+    width: Math.round(o.width * 100),
+    height: Math.round(o.height * 100)
+  };
+}
+const me = Y(
+  ["ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]"].join(" ")
+), he = Y(
+  "ds:relative ds:inline-block ds:max-w-full ds:overflow-hidden ds:rounded-[var(--radius-md)] ds:bg-[var(--muted)] ds:select-none ds:touch-none",
+  {
+    variants: {
+      disabled: {
+        true: "ds:opacity-60 ds:pointer-events-none",
+        false: ""
+      }
+    },
+    defaultVariants: { disabled: !1 }
+  }
+), fe = "ds:block ds:max-w-full ds:h-auto ds:pointer-events-none", ge = [
+  "ds:absolute ds:box-border ds:cursor-move",
+  "ds:border-2 ds:border-[color:var(--ring)]",
+  "ds:shadow-[var(--shadow-md)]",
+  "ds:[inset-inline-start:var(--ic-x)] ds:[inset-block-start:var(--ic-y)]",
+  "ds:[inline-size:var(--ic-w)] ds:[block-size:var(--ic-h)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[color:var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]"
+].join(" "), we = "ds:absolute ds:size-[var(--spacing-md)] ds:rounded-full ds:bg-[var(--ring)] ds:border-2 ds:border-[color:var(--background)]", ye = [
+  {
+    corner: "top-start",
+    cls: "ds:[inset-block-start:0] ds:[inset-inline-start:0]"
+  },
+  {
+    corner: "top-end",
+    cls: "ds:[inset-block-start:0] ds:[inset-inline-end:0]"
+  },
+  {
+    corner: "bottom-start",
+    cls: "ds:[inset-block-end:0] ds:[inset-inline-start:0]"
+  },
+  {
+    corner: "bottom-end",
+    cls: "ds:[inset-block-end:0] ds:[inset-inline-end:0]"
+  }
+];
+function be(o, c, n, s) {
+  switch (c) {
+    case "top-start":
+      return {
+        x: o.x + n,
+        y: o.y + s,
+        width: o.width - n,
+        height: o.height - s
+      };
+    case "top-end":
+      return {
+        x: o.x,
+        y: o.y + s,
+        width: o.width + n,
+        height: o.height - s
+      };
+    case "bottom-start":
+      return {
+        x: o.x + n,
+        y: o.y,
+        width: o.width - n,
+        height: o.height + s
+      };
+    case "bottom-end":
+    default:
+      return {
+        x: o.x,
+        y: o.y,
+        width: o.width + n,
+        height: o.height + s
+      };
+  }
+}
+const xe = te(
+  function({
+    src: c,
+    alt: n,
+    aspect: s,
+    value: d,
+    defaultValue: y,
+    onChange: p,
+    minSize: b = 0.1,
+    keyboardStep: T = 0.02,
+    disabled: u,
+    id: H,
+    className: S,
+    "aria-label": W
+  }, E) {
+    const { t: x } = se(), $ = oe(), j = `${$}-instructions`, N = `${$}-live`, z = w(null), U = w(null), V = ne(E, U), R = w(null), v = w(null), I = w(!1), m = d !== void 0, [_, A] = re(
+      () => M(y ?? D(s, 0, 0), b)
+    ), r = m ? M(d, b) : _, f = X(
+      (e) => {
+        I.current = !0;
+        const t = M(e, b);
+        m || A(t), p == null || p(t);
+      },
+      [m, b, p]
+    ), g = () => {
+      var t;
+      const e = (t = z.current) == null ? void 0 : t.getBoundingClientRect();
+      return { w: (e == null ? void 0 : e.width) ?? 0, h: (e == null ? void 0 : e.height) ?? 0 };
+    }, q = () => {
+      if (I.current || m || y) return;
+      const { w: e, h: t } = g();
+      A(D(s, e, t));
+    }, K = (e) => {
+      var a;
+      v.current = null;
+      const t = e.currentTarget;
+      (a = t.hasPointerCapture) != null && a.call(t, e.pointerId) && t.releasePointerCapture(e.pointerId);
+    }, F = (e) => {
+      var l, i;
+      if (u) return;
+      const { w: t, h: a } = g();
+      v.current = {
+        mode: "move",
+        pointerX: e.clientX,
+        pointerY: e.clientY,
+        start: r,
+        boxW: t,
+        boxH: a
+      }, (i = (l = e.currentTarget).setPointerCapture) == null || i.call(l, e.pointerId);
+    }, G = (e, t) => {
+      var i, L;
+      if (u) return;
+      e.stopPropagation();
+      const { w: a, h: l } = g();
+      v.current = {
+        mode: "resize",
+        corner: t,
+        pointerX: e.clientX,
+        pointerY: e.clientY,
+        start: r,
+        boxW: a,
+        boxH: l
+      }, (L = (i = R.current) == null ? void 0 : i.setPointerCapture) == null || L.call(i, e.pointerId);
+    }, J = (e) => {
+      const t = v.current;
+      if (!t || t.boxW <= 0 || t.boxH <= 0) return;
+      const a = (e.clientX - t.pointerX) / t.boxW, l = (e.clientY - t.pointerY) / t.boxH;
+      if (t.mode === "move")
+        f({ ...t.start, x: t.start.x + a, y: t.start.y + l });
+      else if (t.corner) {
+        const i = be(t.start, t.corner, a, l);
+        f(B(i, s, t.boxW, t.boxH));
+      }
+    }, O = (e) => {
+      if (u) return;
+      const t = T, { w: a, h: l } = g();
+      let i = null;
+      e.shiftKey ? (e.key === "ArrowRight" ? i = { ...r, width: r.width + t } : e.key === "ArrowLeft" ? i = { ...r, width: r.width - t } : e.key === "ArrowDown" ? i = { ...r, height: r.height + t } : e.key === "ArrowUp" && (i = { ...r, height: r.height - t }), i && (i = B(i, s, a, l))) : e.key === "ArrowRight" ? i = { ...r, x: r.x + t } : e.key === "ArrowLeft" ? i = { ...r, x: r.x - t } : e.key === "ArrowDown" ? i = { ...r, y: r.y + t } : e.key === "ArrowUp" && (i = { ...r, y: r.y - t }), i && (e.preventDefault(), f(i));
+    }, P = X(() => {
+      const { w: e, h: t } = g();
+      I.current = !1;
+      const a = D(s, e, t);
+      m || A(a), p == null || p(a);
+    }, [s, m, p]), Q = ie(
+      () => ({
+        getCrop: () => r,
+        setCrop: (e) => f(e),
+        reset: P,
+        focus: () => {
+          var e;
+          return (e = R.current) == null ? void 0 : e.focus();
+        }
+      }),
+      [r, f, P]
+    );
+    ae(pe, Q, H);
+    const k = ue(r), Z = {
+      // Inline style — permitted per 23-constraints §Runtime-computed dimensions
+      //   (CSS custom-property setters; the position/size rules live in CVA).
+      "--ic-x": `${r.x * 100}%`,
+      "--ic-y": `${r.y * 100}%`,
+      "--ic-w": `${r.width * 100}%`,
+      "--ic-h": `${r.height * 100}%`
+    }, ee = W ?? x("imageCropper.cropRegion");
+    return /* @__PURE__ */ C(
+      "div",
+      {
+        ref: V,
+        className: me({ className: S }),
+        "data-component": "image-cropper",
+        "data-component-id": H,
+        children: [
+          /* @__PURE__ */ C(
+            "div",
+            {
+              ref: z,
+              dir: "ltr",
+              className: he({ disabled: !!u }),
+              children: [
+                /* @__PURE__ */ h(
+                  "img",
+                  {
+                    src: c,
+                    alt: n,
+                    className: fe,
+                    onLoad: q
+                  }
+                ),
+                /* @__PURE__ */ h(
+                  "div",
+                  {
+                    ref: R,
+                    role: "group",
+                    tabIndex: u ? -1 : 0,
+                    "aria-label": ee,
+                    "aria-describedby": j,
+                    "aria-disabled": u || void 0,
+                    className: ge,
+                    style: Z,
+                    onPointerDown: F,
+                    onPointerMove: J,
+                    onPointerUp: K,
+                    onPointerCancel: K,
+                    onKeyDown: O,
+                    children: ye.map(({ corner: e, cls: t }) => /* @__PURE__ */ h(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        className: `${we} ${t}`,
+                        onPointerDown: (a) => G(a, e)
+                      },
+                      e
+                    ))
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ C("div", { className: "ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ h(
+              "p",
+              {
+                id: j,
+                className: "type-body-sm ds:text-muted-foreground",
+                children: x("imageCropper.instructions")
+              }
+            ),
+            /* @__PURE__ */ C(
+              ce,
+              {
+                type: "button",
+                intent: "outline",
+                size: "sm",
+                disabled: u,
+                onClick: P,
+                children: [
+                  /* @__PURE__ */ h(de, { "aria-hidden": "true", className: "ds:size-4" }),
+                  x("imageCropper.reset")
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ h("p", { id: N, role: "status", "aria-live": "polite", className: "ds:sr-only", children: x("imageCropper.announcement", {
+            x: k.x,
+            y: k.y,
+            width: k.width,
+            height: k.height
+          }) })
+        ]
+      }
+    );
+  }
+);
+xe.displayName = "ImageCropper";
+export {
+  xe as I,
+  B as a,
+  M as b,
+  De as c,
+  D as d,
+  pe as i,
+  ue as t
+};
+//# sourceMappingURL=image-cropper-D9jqJy19.js.map