@alfadocs/ui-kit 0.0.12

package/dist/_chunks/task-card-uxjApfcg.js

@@ -0,0 +1,112 @@
+import { jsx as t, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as v } from "react";
+import { c as g } from "./index-D2ZczOXr.js";
+import { useTranslation as b } from "react-i18next";
+import { C as x } from "./chevron-right-BrpYejk0.js";
+import { S as y } from "./square-check-big-Jr-0202D.js";
+import { C } from "./circle-alert-ChA9opNA.js";
+import { S as N } from "./square-CZoGU14v.js";
+const k = g(
+  [
+    "relative flex items-start gap-[var(--spacing-sm)]",
+    "rounded-[var(--radius-sm)]",
+    "transition-colors",
+    "motion-reduce:transition-none",
+    "text-start group",
+    "forced-colors:border forced-colors:border-[CanvasText]"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "p-[var(--spacing-sm)]",
+        md: "p-[var(--spacing-md)]"
+      },
+      interactive: {
+        true: "hover:bg-[color:var(--muted)]/40 cursor-pointer",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "sm",
+      interactive: !1
+    }
+  }
+), u = [
+  "focus-visible:outline-none",
+  "after:content-[''] after:absolute after:inset-0 after:rounded-[var(--radius-sm)]",
+  "after:pointer-events-auto",
+  "focus-visible:after:outline-[length:var(--focus-ring-width)]",
+  "focus-visible:after:outline-solid",
+  "focus-visible:after:outline-[color:var(--ring)]",
+  "focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]",
+  "forced-colors:focus-visible:after:outline-[CanvasText]"
+].join(" ");
+function S(r) {
+  return /^(https?:\/\/(?!\/)|\/(?!\/)|#)/.test(r);
+}
+function T({ status: r, priority: a }) {
+  const e = a === "high" ? "text-[color:var(--destructive)]" : "text-[color:var(--muted-foreground)]";
+  return r === "done" ? /* @__PURE__ */ t(y, { "aria-hidden": "true", className: `size-4 ${e}` }) : a === "high" ? /* @__PURE__ */ t(C, { "aria-hidden": "true", className: `size-4 ${e}` }) : /* @__PURE__ */ t(N, { "aria-hidden": "true", className: `size-4 ${e}` });
+}
+const w = v(
+  ({ item: r, size: a = "sm", onActivate: e, className: d, ...f }, p) => {
+    const { t: m } = b(), s = !!e, h = !!r.url && S(r.url), l = m("ui.taskCard.itemLabel", {
+      title: r.title,
+      due: r.dueLabel ?? "",
+      defaultValue: '{{title}}{{due, prepend, " · "}}'
+    }), n = /* @__PURE__ */ t("span", { className: "flex-1 min-w-0 truncate type-body-sm text-[color:var(--foreground)]", children: r.title });
+    let o;
+    return s && h ? o = /* @__PURE__ */ t(
+      "a",
+      {
+        href: r.url,
+        "aria-label": l,
+        className: u + " contents",
+        onClick: (i) => {
+          i.defaultPrevented || i.metaKey || i.ctrlKey || i.shiftKey || e == null || e(r);
+        },
+        children: n
+      }
+    ) : s ? o = /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        "aria-label": l,
+        className: u + " contents bg-transparent border-0 p-0 text-start",
+        onClick: () => e == null ? void 0 : e(r),
+        children: n
+      }
+    ) : o = n, /* @__PURE__ */ c(
+      "div",
+      {
+        ref: p,
+        role: "listitem",
+        "data-status": r.status ?? "open",
+        "data-priority": r.priority ?? "normal",
+        className: k({ size: a, interactive: s, className: d }),
+        ...f,
+        children: [
+          /* @__PURE__ */ t("span", { className: "mt-[var(--spacing-2xs)] shrink-0", children: /* @__PURE__ */ t(T, { status: r.status, priority: r.priority }) }),
+          /* @__PURE__ */ c("div", { className: "flex-1 min-w-0 flex flex-col gap-[var(--spacing-2xs)]", children: [
+            o,
+            r.description ? /* @__PURE__ */ t("span", { className: "type-body-sm text-[color:var(--muted-foreground)] truncate", children: r.description }) : null,
+            r.dueLabel ? /* @__PURE__ */ t("span", { className: "type-eyebrow text-[color:var(--muted-foreground)]", children: r.dueLabel }) : null
+          ] }),
+          s ? /* @__PURE__ */ t(
+            x,
+            {
+              "aria-hidden": "true",
+              className: "mt-[var(--spacing-2xs)] size-4 shrink-0 text-[color:var(--muted-foreground)] opacity-0 transition-opacity motion-reduce:transition-none group-hover:opacity-100 group-focus-within:opacity-100 rtl:rotate-180"
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+w.displayName = "TaskCard";
+export {
+  w as T,
+  S as i
+};
+//# sourceMappingURL=task-card-uxjApfcg.js.map

package/dist/_chunks/task-card-uxjApfcg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-card-uxjApfcg.js","sources":["../../src/components/task-card/task-card.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { CheckSquare, Square, AlertCircle, ChevronRight } from 'lucide-react';\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport type TaskStatus = 'open' | 'in-progress' | 'done';\nexport type TaskPriority = 'low' | 'normal' | 'high';\n\nexport interface TaskItem {\n  /** Unique identifier for the task. */\n  id: string;\n  /** Title — single line, primary content. */\n  title: string;\n  /** Optional secondary line (e.g. \"Patient A · Due today\"). */\n  description?: string;\n  /**\n   * Localised due-date hint (e.g. \"Due today\" / \"Tomorrow\"). Rendered as a\n   * trailing eyebrow chip when set; consumers compute the bucket and pass\n   * the localised string.\n   */\n  dueLabel?: string;\n  /** Lifecycle state — drives the leading icon. */\n  status?: TaskStatus;\n  /** Priority — `high` colours the leading icon as `--destructive`. */\n  priority?: TaskPriority;\n  /** Optional deep link — when present the row is an anchor. */\n  url?: string;\n}\n\nexport interface TaskCardProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick' | 'role' | 'title'>,\n    VariantProps<typeof taskCardVariants> {\n  /** The task to render. */\n  item: TaskItem;\n  /** Visual density. */\n  size?: 'sm' | 'md';\n  /** Fires when the row is activated (click / Enter / Space). */\n  onActivate?: (item: TaskItem) => void;\n}\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst taskCardVariants = cva(\n  [\n    'relative flex items-start gap-[var(--spacing-sm)]',\n    'rounded-[var(--radius-sm)]',\n    'transition-colors',\n    'motion-reduce:transition-none',\n    'text-start group',\n    'forced-colors:border forced-colors:border-[CanvasText]',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'p-[var(--spacing-sm)]',\n        md: 'p-[var(--spacing-md)]',\n      },\n      interactive: {\n        true: 'hover:bg-[color:var(--muted)]/40 cursor-pointer',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n      interactive: false,\n    },\n  },\n);\n\nconst stretchedLinkClass = [\n  'focus-visible:outline-none',\n  \"after:content-[''] after:absolute after:inset-0 after:rounded-[var(--radius-sm)]\",\n  'after:pointer-events-auto',\n  'focus-visible:after:outline-[length:var(--focus-ring-width)]',\n  'focus-visible:after:outline-solid',\n  'focus-visible:after:outline-[color:var(--ring)]',\n  'focus-visible:after:outline-offset-[length:var(--focus-ring-offset)]',\n  'forced-colors:focus-visible:after:outline-[CanvasText]',\n].join(' ');\n\n/* ------------------------------------------------------------------ */\n/* Helpers                                                             */\n/* ------------------------------------------------------------------ */\n\nexport function isSafeTaskUrl(url: string): boolean {\n  return /^(https?:\\/\\/(?!\\/)|\\/(?!\\/)|#)/.test(url);\n}\n\nfunction StatusIcon({ status, priority }: { status?: TaskStatus; priority?: TaskPriority }): ReactNode {\n  const tone =\n    priority === 'high'\n      ? 'text-[color:var(--destructive)]'\n      : 'text-[color:var(--muted-foreground)]';\n  if (status === 'done') {\n    return <CheckSquare aria-hidden=\"true\" className={`size-4 ${tone}`} />;\n  }\n  if (priority === 'high') {\n    return <AlertCircle aria-hidden=\"true\" className={`size-4 ${tone}`} />;\n  }\n  return <Square aria-hidden=\"true\" className={`size-4 ${tone}`} />;\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(\n  ({ item, size = 'sm', onActivate, className, ...rest }, ref) => {\n    const { t } = useTranslation();\n    const interactive = !!onActivate;\n    const hasSafeUrl = !!item.url && isSafeTaskUrl(item.url);\n    const ariaLabel = t('ui.taskCard.itemLabel', {\n      title: item.title,\n      due: item.dueLabel ?? '',\n      defaultValue: '{{title}}{{due, prepend, \" · \"}}',\n    });\n\n    const titleNode = (\n      <span className=\"flex-1 min-w-0 truncate type-body-sm text-[color:var(--foreground)]\">\n        {item.title}\n      </span>\n    );\n\n    let activator: ReactNode;\n    if (interactive && hasSafeUrl) {\n      activator = (\n        <a\n          href={item.url}\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' contents'}\n          onClick={(e) => {\n            if (e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey) return;\n            onActivate?.(item);\n          }}\n        >\n          {titleNode}\n        </a>\n      );\n    } else if (interactive) {\n      activator = (\n        <button\n          type=\"button\"\n          aria-label={ariaLabel}\n          className={stretchedLinkClass + ' contents bg-transparent border-0 p-0 text-start'}\n          onClick={() => onActivate?.(item)}\n        >\n          {titleNode}\n        </button>\n      );\n    } else {\n      activator = titleNode;\n    }\n\n    return (\n      <div\n        ref={ref}\n        role=\"listitem\"\n        data-status={item.status ?? 'open'}\n        data-priority={item.priority ?? 'normal'}\n        className={taskCardVariants({ size, interactive, className })}\n        {...rest}\n      >\n        <span className=\"mt-[var(--spacing-2xs)] shrink-0\">\n          <StatusIcon status={item.status} priority={item.priority} />\n        </span>\n\n        <div className=\"flex-1 min-w-0 flex flex-col gap-[var(--spacing-2xs)]\">\n          {activator}\n          {item.description ? (\n            <span className=\"type-body-sm text-[color:var(--muted-foreground)] truncate\">\n              {item.description}\n            </span>\n          ) : null}\n          {item.dueLabel ? (\n            <span className=\"type-eyebrow text-[color:var(--muted-foreground)]\">\n              {item.dueLabel}\n            </span>\n          ) : null}\n        </div>\n\n        {interactive ? (\n          <ChevronRight\n            aria-hidden=\"true\"\n            className=\"mt-[var(--spacing-2xs)] size-4 shrink-0 text-[color:var(--muted-foreground)] opacity-0 transition-opacity motion-reduce:transition-none group-hover:opacity-100 group-focus-within:opacity-100 rtl:rotate-180\"\n          />\n        ) : null}\n      </div>\n    );\n  },\n);\n\nTaskCard.displayName = 'TaskCard';\n"],"names":["taskCardVariants","cva","stretchedLinkClass","isSafeTaskUrl","url","StatusIcon","status","priority","tone","CheckSquare","AlertCircle","Square","TaskCard","forwardRef","item","size","onActivate","className","rest","ref","t","useTranslation","interactive","hasSafeUrl","ariaLabel","titleNode","jsx","activator","e","jsxs","ChevronRight"],"mappings":"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"}

package/dist/_chunks/task-tray-BdfM3p8N.js

@@ -0,0 +1,99 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { c as b } from "./index-D2ZczOXr.js";
+import { useTranslation as T } from "react-i18next";
+import { I as N } from "./icon-button-C1vpylg3.js";
+import { S as w } from "./skeleton-vbTWUntB.js";
+import { E as j } from "./empty-state-DiG7vYBM.js";
+import { T as z } from "./task-card-uxjApfcg.js";
+import { c as E } from "./createLucideIcon-CrFbzy84.js";
+import { P as I } from "./plus-CYKNmfuA.js";
+/**
+ * @license lucide-react v1.8.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const L = [
+  ["path", { d: "M13 5h8", key: "a7qcls" }],
+  ["path", { d: "M13 12h8", key: "h98zly" }],
+  ["path", { d: "M13 19h8", key: "c3s6r1" }],
+  ["path", { d: "m3 17 2 2 4-4", key: "1jhpwq" }],
+  ["rect", { x: "3", y: "4", width: "6", height: "6", rx: "1", key: "cif1o7" }]
+], M = E("list-todo", L), S = b(
+  [
+    "flex flex-col",
+    "rounded-[var(--radius-md)] border border-[color:var(--border)]",
+    "bg-[color:var(--card)] text-[color:var(--card-foreground)]",
+    "overflow-hidden"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: ""
+      }
+    },
+    defaultVariants: {
+      size: "sm"
+    }
+  }
+), q = x(
+  ({
+    items: i,
+    title: n,
+    size: o = "sm",
+    onOpenTask: m,
+    onAddTask: l,
+    addLabel: p,
+    loading: c = !1,
+    emptyTitle: f,
+    emptyDescription: h,
+    className: y,
+    ...v
+  }, u) => {
+    const { t: e } = T(), d = n ?? e("ui.taskTray.title", "Tasks"), k = p ?? e("ui.taskTray.add", "Add task"), g = !c && i.length === 0;
+    let r;
+    return c ? r = /* @__PURE__ */ a("div", { className: "flex flex-col gap-[var(--spacing-sm)] p-[var(--spacing-sm)]", children: [0, 1, 2].map((s) => /* @__PURE__ */ a(w, { variant: "rectangular", height: "2.5rem" }, s)) }) : g ? r = /* @__PURE__ */ a("div", { className: "p-[var(--spacing-md)]", children: /* @__PURE__ */ a(
+      j,
+      {
+        variant: "first-use",
+        size: "sm",
+        title: f ?? e("ui.taskTray.empty.title", "No tasks yet"),
+        description: h ?? e("ui.taskTray.empty.description", "New tasks will appear here.")
+      }
+    ) }) : r = /* @__PURE__ */ a("ul", { className: "flex list-none flex-col divide-y divide-[color:var(--border)]", children: i.map((s) => /* @__PURE__ */ a(z, { item: s, size: o, onActivate: m }, s.id)) }), /* @__PURE__ */ t(
+      "section",
+      {
+        ref: u,
+        "aria-label": d,
+        className: S({ size: o, className: y }),
+        ...v,
+        children: [
+          /* @__PURE__ */ t("header", { className: "flex items-center justify-between gap-[var(--spacing-sm)] border-b border-[color:var(--border)] p-[var(--spacing-sm)]", children: [
+            /* @__PURE__ */ t("h3", { className: "m-0 inline-flex items-center gap-[var(--spacing-xs)] type-title-card", children: [
+              /* @__PURE__ */ a(M, { "aria-hidden": "true", className: "size-4" }),
+              d
+            ] }),
+            l ? /* @__PURE__ */ a(
+              N,
+              {
+                icon: /* @__PURE__ */ a(I, {}),
+                intent: "outline",
+                size: "sm",
+                "aria-label": k,
+                onClick: l
+              }
+            ) : null
+          ] }),
+          r
+        ]
+      }
+    );
+  }
+);
+q.displayName = "TaskTray";
+export {
+  q as T
+};
+//# sourceMappingURL=task-tray-BdfM3p8N.js.map

package/dist/_chunks/task-tray-BdfM3p8N.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task-tray-BdfM3p8N.js","sources":["../../node_modules/lucide-react/dist/esm/icons/list-todo.js","../../src/components/task-tray/task-tray.tsx"],"sourcesContent":["/**\n * @license lucide-react v1.8.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M13 5h8\", key: \"a7qcls\" }],\n  [\"path\", { d: \"M13 12h8\", key: \"h98zly\" }],\n  [\"path\", { d: \"M13 19h8\", key: \"c3s6r1\" }],\n  [\"path\", { d: \"m3 17 2 2 4-4\", key: \"1jhpwq\" }],\n  [\"rect\", { x: \"3\", y: \"4\", width: \"6\", height: \"6\", rx: \"1\", key: \"cif1o7\" }]\n];\nconst ListTodo = createLucideIcon(\"list-todo\", __iconNode);\n\nexport { __iconNode, ListTodo as default };\n//# sourceMappingURL=list-todo.js.map\n","import {\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { ListTodo, Plus } from 'lucide-react';\nimport { IconButton } from '../button/icon-button';\nimport { Skeleton } from '../skeleton/skeleton';\nimport { EmptyState } from '../empty-state/empty-state';\nimport { TaskCard, type TaskItem } from '../task-card';\n\n/* ------------------------------------------------------------------ */\n/* CVA                                                                 */\n/* ------------------------------------------------------------------ */\n\nconst taskTrayVariants = cva(\n  [\n    'flex flex-col',\n    'rounded-[var(--radius-md)] border border-[color:var(--border)]',\n    'bg-[color:var(--card)] text-[color:var(--card-foreground)]',\n    'overflow-hidden',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: '',\n        md: '',\n      },\n    },\n    defaultVariants: {\n      size: 'sm',\n    },\n  },\n);\n\n/* ------------------------------------------------------------------ */\n/* Types                                                               */\n/* ------------------------------------------------------------------ */\n\nexport interface TaskTrayProps\n  extends Omit<HTMLAttributes<HTMLElement>, 'onClick'>,\n    VariantProps<typeof taskTrayVariants> {\n  /** Tasks rendered inside the panel. */\n  items: TaskItem[];\n  /** Section title — rendered in the header. Localised by the consumer. */\n  title?: string;\n  /** Visual density forwarded to each TaskCard. */\n  size?: 'sm' | 'md';\n  /** Fires when the user activates a task (click / Enter / Space). */\n  onOpenTask?: (item: TaskItem) => void;\n  /** Fires when the user activates the header \"Add\" affordance. */\n  onAddTask?: () => void;\n  /** Localised label for the \"Add\" affordance. Defaults to `ui.taskTray.add`. */\n  addLabel?: string;\n  /** When true the panel renders skeleton placeholders. */\n  loading?: boolean;\n  /** Render an empty state when `items` is empty and `loading` is false. */\n  emptyTitle?: string;\n  emptyDescription?: string;\n}\n\n/* ------------------------------------------------------------------ */\n/* Component                                                           */\n/* ------------------------------------------------------------------ */\n\nexport const TaskTray = forwardRef<HTMLElement, TaskTrayProps>(\n  (\n    {\n      items,\n      title,\n      size = 'sm',\n      onOpenTask,\n      onAddTask,\n      addLabel,\n      loading = false,\n      emptyTitle,\n      emptyDescription,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const heading = title ?? t('ui.taskTray.title', 'Tasks');\n    const resolvedAddLabel = addLabel ?? t('ui.taskTray.add', 'Add task');\n    const isEmpty = !loading && items.length === 0;\n\n    let body: ReactNode;\n    if (loading) {\n      body = (\n        <div className=\"flex flex-col gap-[var(--spacing-sm)] p-[var(--spacing-sm)]\">\n          {[0, 1, 2].map((i) => (\n            <Skeleton key={i} variant=\"rectangular\" height=\"2.5rem\" />\n          ))}\n        </div>\n      );\n    } else if (isEmpty) {\n      body = (\n        <div className=\"p-[var(--spacing-md)]\">\n          <EmptyState\n            variant=\"first-use\"\n            size=\"sm\"\n            title={emptyTitle ?? t('ui.taskTray.empty.title', 'No tasks yet')}\n            description={\n              emptyDescription ??\n              t('ui.taskTray.empty.description', 'New tasks will appear here.')\n            }\n          />\n        </div>\n      );\n    } else {\n      body = (\n        <ul className=\"flex list-none flex-col divide-y divide-[color:var(--border)]\">\n          {items.map((item) => (\n            <TaskCard key={item.id} item={item} size={size} onActivate={onOpenTask} />\n          ))}\n        </ul>\n      );\n    }\n\n    return (\n      <section\n        ref={ref}\n        aria-label={heading}\n        className={taskTrayVariants({ size, className })}\n        {...rest}\n      >\n        <header className=\"flex items-center justify-between gap-[var(--spacing-sm)] border-b border-[color:var(--border)] p-[var(--spacing-sm)]\">\n          <h3 className=\"m-0 inline-flex items-center gap-[var(--spacing-xs)] type-title-card\">\n            <ListTodo aria-hidden=\"true\" className=\"size-4\" />\n            {heading}\n          </h3>\n          {onAddTask ? (\n            <IconButton\n              icon={<Plus />}\n              intent=\"outline\"\n              size=\"sm\"\n              aria-label={resolvedAddLabel}\n              onClick={onAddTask}\n            />\n          ) : null}\n        </header>\n        {body}\n      </section>\n    );\n  },\n);\n\nTaskTray.displayName = 'TaskTray';\n"],"names":["__iconNode","ListTodo","createLucideIcon","taskTrayVariants","cva","TaskTray","forwardRef","items","title","size","onOpenTask","onAddTask","addLabel","loading","emptyTitle","emptyDescription","className","rest","ref","t","useTranslation","heading","resolvedAddLabel","isEmpty","body","jsx","i","Skeleton","EmptyState","item","TaskCard","jsxs","IconButton","Plus"],"mappings":";;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,MAAMA,IAAa;AAAA,EACjB,CAAC,QAAQ,EAAE,GAAG,WAAW,KAAK,SAAQ,CAAE;AAAA,EACxC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAQ,CAAE;AAAA,EACzC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAQ,CAAE;AAAA,EACzC,CAAC,QAAQ,EAAE,GAAG,iBAAiB,KAAK,SAAQ,CAAE;AAAA,EAC9C,CAAC,QAAQ,EAAE,GAAG,KAAK,GAAG,KAAK,OAAO,KAAK,QAAQ,KAAK,IAAI,KAAK,KAAK,SAAQ,CAAE;AAC9E,GACMC,IAAWC,EAAiB,aAAaF,CAAU,GCCnDG,IAAmBC;AAAA,EACvB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAgCaC,IAAWC;AAAA,EACtB,CACE;AAAA,IACE,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,YAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAUb,KAASW,EAAE,qBAAqB,OAAO,GACjDG,IAAmBV,KAAYO,EAAE,mBAAmB,UAAU,GAC9DI,IAAU,CAACV,KAAWN,EAAM,WAAW;AAE7C,QAAIiB;AACJ,WAAIX,IACFW,IACE,gBAAAC,EAAC,SAAI,WAAU,+DACZ,WAAC,GAAG,GAAG,CAAC,EAAE,IAAI,CAACC,MACd,gBAAAD,EAACE,KAAiB,SAAQ,eAAc,QAAO,SAAA,GAAhCD,CAAyC,CACzD,GACH,IAEOH,IACTC,IACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA,gBAAAA;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,OAAOd,KAAcK,EAAE,2BAA2B,cAAc;AAAA,QAChE,aACEJ,KACAI,EAAE,iCAAiC,6BAA6B;AAAA,MAAA;AAAA,IAAA,GAGtE,IAGFK,sBACG,MAAA,EAAG,WAAU,iEACX,UAAAjB,EAAM,IAAI,CAACsB,MACV,gBAAAJ,EAACK,GAAA,EAAuB,MAAAD,GAAY,MAAApB,GAAY,YAAYC,KAA7CmB,EAAK,EAAoD,CACzE,GACH,GAKF,gBAAAE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAAb;AAAA,QACA,cAAYG;AAAA,QACZ,WAAWlB,EAAiB,EAAE,MAAAM,GAAM,WAAAO,GAAW;AAAA,QAC9C,GAAGC;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAc,EAAC,UAAA,EAAO,WAAU,yHAChB,UAAA;AAAA,YAAA,gBAAAA,EAAC,MAAA,EAAG,WAAU,wEACZ,UAAA;AAAA,cAAA,gBAAAN,EAACxB,GAAA,EAAS,eAAY,QAAO,WAAU,UAAS;AAAA,cAC/CoB;AAAA,YAAA,GACH;AAAA,YACCV,IACC,gBAAAc;AAAA,cAACO;AAAA,cAAA;AAAA,gBACC,wBAAOC,GAAA,EAAK;AAAA,gBACZ,QAAO;AAAA,gBACP,MAAK;AAAA,gBACL,cAAYX;AAAA,gBACZ,SAASX;AAAA,cAAA;AAAA,YAAA,IAET;AAAA,UAAA,GACN;AAAA,UACCa;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEAnB,EAAS,cAAc;","x_google_ignoreList":[0]}

package/dist/_chunks/text-area-CKxZ7cS3.js

@@ -0,0 +1,152 @@
+import { jsxs as x, jsx as A } from "react/jsx-runtime";
+import { forwardRef as ae, useRef as j, useCallback as H, useState as k, useLayoutEffect as se, useEffect as ce } from "react";
+import { c as le } from "./index-D2ZczOXr.js";
+import { useTranslation as de } from "react-i18next";
+import { u as ue } from "./form-field-context-94LwgYTQ.js";
+const fe = le(
+  [
+    "block w-full border rounded-[var(--radius-sm)] bg-background text-foreground",
+    "leading-[var(--line-height-base)]",
+    "ps-[var(--spacing-sm)] pe-[var(--spacing-sm)] py-[var(--spacing-xs)]",
+    "focus:outline-none",
+    "focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid",
+    "focus-visible:outline-ring focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+    "forced-colors:focus-visible:outline-[CanvasText]",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:bg-muted read-only:cursor-default",
+    "transition-[height,color,background-color,border-color] duration-[var(--animation-duration)] motion-reduce:transition-none",
+    "placeholder:text-muted-foreground"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "min-h-8 text-[var(--font-size-sm)]",
+        md: "min-h-[var(--min-target-size)] text-[var(--font-size-base)]",
+        lg: "min-h-[calc(var(--min-target-size)*1.5)] text-[var(--font-size-lg)]"
+      },
+      tone: {
+        default: "border-border",
+        error: "border-destructive"
+      },
+      resize: {
+        auto: "resize-none",
+        manual: "resize-y"
+      }
+    },
+    defaultVariants: { size: "md", tone: "default", resize: "manual" }
+  }
+), me = (n) => n >= 1 ? "text-destructive" : n >= 0.9 ? "text-warning" : "text-muted-foreground", ve = (n) => [...n].length, be = ae(
+  ({
+    size: n = "md",
+    tone: M = "default",
+    autoResize: r = !1,
+    minRows: f = 2,
+    maxRows: m,
+    showCounter: S,
+    className: q,
+    id: E,
+    disabled: P,
+    value: y,
+    defaultValue: T,
+    maxLength: i,
+    rows: W,
+    onChange: o,
+    onCompositionStart: v,
+    onCompositionEnd: b,
+    onInput: $,
+    ...D
+  }, c) => {
+    const { t: N } = de(), a = ue(), F = E ?? a.id, O = a.disabled || P, Y = a.invalid ? "error" : M, w = j(null), _ = H(
+      (e) => {
+        w.current = e, typeof c == "function" ? c(e) : c && (c.current = e);
+      },
+      [c]
+    ), l = y !== void 0, [G, z] = k(
+      String(T ?? "")
+    ), p = l ? String(y) : G, d = j(!1), g = H(() => {
+      const e = w.current;
+      if (!e || !r) return;
+      const t = window.getComputedStyle(e), u = parseFloat(t.lineHeight), C = parseFloat(t.paddingTop), ee = parseFloat(t.paddingBottom), te = parseFloat(t.borderTopWidth), re = parseFloat(t.borderBottomWidth), B = C + ee + te + re, ne = (Number.isFinite(u) ? u : 24) * f + B, ie = typeof m == "number" ? (Number.isFinite(u) ? u : 24) * m + B : Number.POSITIVE_INFINITY;
+      e.style.height = "auto";
+      const oe = Math.max(ne, Math.min(e.scrollHeight, ie));
+      e.style.height = `${oe}px`;
+    }, [r, f, m]);
+    se(() => {
+      r && g();
+    }, [r, g, p]);
+    const J = (e) => {
+      l || z(e.target.value), !d.current && (o == null || o(e));
+    }, K = (e) => {
+      d.current = !0, v == null || v(e);
+    }, Q = (e) => {
+      d.current = !1, b == null || b(e);
+      const t = e.currentTarget;
+      l || z(t.value), o == null || o({
+        ...e,
+        target: t,
+        currentTarget: t
+      }), r && g();
+    }, s = typeof i == "number" && (S ?? !0) && i > 0, h = ve(p), I = s ? Math.max(0, i - h) : 0, U = s ? h / i : 0, [X, Z] = k("");
+    ce(() => {
+      if (!s) return;
+      const e = window.setTimeout(() => {
+        d.current || Z(
+          N("ui.inputs.textarea.charactersRemaining", {
+            count: I,
+            defaultValue: "{{count}} characters remaining"
+          })
+        );
+      }, 500);
+      return () => window.clearTimeout(e);
+    }, [s, I, N]);
+    const V = s ? `${F}-counter` : void 0, L = [a.describedBy || void 0, V].filter(Boolean).join(" ") || void 0, R = r ? "auto" : "manual";
+    return /* @__PURE__ */ x("div", { className: "flex w-full flex-col gap-[var(--spacing-xs)]", children: [
+      /* @__PURE__ */ A(
+        "textarea",
+        {
+          ref: _,
+          id: F,
+          value: l ? p : void 0,
+          defaultValue: l ? void 0 : T,
+          disabled: O,
+          "aria-describedby": L,
+          "aria-invalid": a.invalid || void 0,
+          "aria-required": a.required || void 0,
+          maxLength: i,
+          rows: r ? f : W,
+          onChange: J,
+          onCompositionStart: K,
+          onCompositionEnd: Q,
+          onInput: $,
+          className: fe({
+            size: n,
+            tone: Y,
+            resize: R,
+            className: q
+          }),
+          ...D
+        }
+      ),
+      s ? /* @__PURE__ */ x(
+        "div",
+        {
+          id: V,
+          className: "flex justify-end type-meta tabular-nums",
+          children: [
+            /* @__PURE__ */ x("span", { "aria-hidden": "true", className: me(U), children: [
+              h,
+              " / ",
+              i
+            ] }),
+            /* @__PURE__ */ A("span", { className: "sr-only", "aria-live": "polite", children: X })
+          ]
+        }
+      ) : null
+    ] });
+  }
+);
+be.displayName = "TextArea";
+export {
+  be as T
+};
+//# sourceMappingURL=text-area-CKxZ7cS3.js.map

package/dist/_chunks/text-area-CKxZ7cS3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-area-CKxZ7cS3.js","sources":["../../src/components/text-area/text-area.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CompositionEvent,\n  type TextareaHTMLAttributes,\n} from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { useTranslation } from 'react-i18next';\nimport { useFormField } from '../form-field/form-field-context';\n\nconst textAreaVariants = cva(\n  [\n    'block w-full border rounded-[var(--radius-sm)] bg-background text-foreground',\n    'leading-[var(--line-height-base)]',\n    'ps-[var(--spacing-sm)] pe-[var(--spacing-sm)] py-[var(--spacing-xs)]',\n    'focus:outline-none',\n    'focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-solid',\n    'focus-visible:outline-ring focus-visible:outline-offset-[length:var(--focus-ring-offset)]',\n    'forced-colors:focus-visible:outline-[CanvasText]',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    'read-only:bg-muted read-only:cursor-default',\n    'transition-[height,color,background-color,border-color] duration-[var(--animation-duration)] motion-reduce:transition-none',\n    'placeholder:text-muted-foreground',\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'min-h-8 text-[var(--font-size-sm)]',\n        md: 'min-h-[var(--min-target-size)] text-[var(--font-size-base)]',\n        lg: 'min-h-[calc(var(--min-target-size)*1.5)] text-[var(--font-size-lg)]',\n      },\n      tone: {\n        default: 'border-border',\n        error: 'border-destructive',\n      },\n      resize: {\n        auto: 'resize-none',\n        manual: 'resize-y',\n      },\n    },\n    defaultVariants: { size: 'md', tone: 'default', resize: 'manual' },\n  },\n);\n\nconst counterToneClass = (ratio: number): string => {\n  if (ratio >= 1) return 'text-destructive';\n  if (ratio >= 0.9) return 'text-warning';\n  return 'text-muted-foreground';\n};\n\ntype NativeTextareaProps = Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'children' | 'size'\n>;\n\nexport interface TextAreaProps\n  extends NativeTextareaProps,\n    Pick<VariantProps<typeof textAreaVariants>, 'size' | 'tone'> {\n  size?: 'sm' | 'md' | 'lg';\n  tone?: 'default' | 'error';\n  autoResize?: boolean;\n  minRows?: number;\n  maxRows?: number;\n  showCounter?: boolean;\n}\n\nconst codePointLength = (value: string): number => [...value].length;\n\nexport const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n  (\n    {\n      size = 'md',\n      tone = 'default',\n      autoResize = false,\n      minRows = 2,\n      maxRows,\n      showCounter,\n      className,\n      id,\n      disabled,\n      value,\n      defaultValue,\n      maxLength,\n      rows,\n      onChange,\n      onCompositionStart,\n      onCompositionEnd,\n      onInput,\n      ...props\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation();\n    const ctx = useFormField();\n    const textAreaId = id ?? ctx.id;\n    const effectiveDisabled = ctx.disabled || disabled;\n    const effectiveTone: 'default' | 'error' = ctx.invalid ? 'error' : tone;\n\n    const innerRef = useRef<HTMLTextAreaElement | null>(null);\n    const setRefs = useCallback(\n      (node: HTMLTextAreaElement | null) => {\n        innerRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          ref.current = node;\n        }\n      },\n      [ref],\n    );\n\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState<string>(\n      String(defaultValue ?? ''),\n    );\n    const currentValue = isControlled ? String(value) : internalValue;\n\n    const composingRef = useRef(false);\n\n    const resizeTextArea = useCallback(() => {\n      const el = innerRef.current;\n      if (!el || !autoResize) return;\n\n      const styles = window.getComputedStyle(el);\n      const lineHeight = parseFloat(styles.lineHeight);\n      const paddingTop = parseFloat(styles.paddingTop);\n      const paddingBottom = parseFloat(styles.paddingBottom);\n      const borderTop = parseFloat(styles.borderTopWidth);\n      const borderBottom = parseFloat(styles.borderBottomWidth);\n      const verticalChrome =\n        paddingTop + paddingBottom + borderTop + borderBottom;\n\n      const minH =\n        (Number.isFinite(lineHeight) ? lineHeight : 24) * minRows +\n        verticalChrome;\n      const maxH =\n        typeof maxRows === 'number'\n          ? (Number.isFinite(lineHeight) ? lineHeight : 24) * maxRows +\n            verticalChrome\n          : Number.POSITIVE_INFINITY;\n\n      // EXCEPTION to constraint #4 (no inline styles): height is computed from\n      // runtime scrollHeight and cannot be expressed as a static Tailwind class.\n      el.style.height = 'auto';\n      const next = Math.max(minH, Math.min(el.scrollHeight, maxH));\n      el.style.height = `${next}px`;\n    }, [autoResize, minRows, maxRows]);\n\n    useLayoutEffect(() => {\n      if (!autoResize) return;\n      resizeTextArea();\n    }, [autoResize, resizeTextArea, currentValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      if (!isControlled) {\n        setInternalValue(event.target.value);\n      }\n      if (composingRef.current) return;\n      onChange?.(event);\n    };\n\n    const handleCompositionStart = (\n      event: CompositionEvent<HTMLTextAreaElement>,\n    ) => {\n      composingRef.current = true;\n      onCompositionStart?.(event);\n    };\n\n    const handleCompositionEnd = (\n      event: CompositionEvent<HTMLTextAreaElement>,\n    ) => {\n      composingRef.current = false;\n      onCompositionEnd?.(event);\n      const target = event.currentTarget;\n      if (!isControlled) {\n        setInternalValue(target.value);\n      }\n      // Synthesise a ChangeEvent from the CompositionEvent so consumers receive\n      // a single post-IME change. nativeEvent is still the CompositionEvent, so\n      // consumers inspecting `nativeEvent.inputType` will not find the usual\n      // \"insertCompositionText\" value — documented as a known limitation.\n      onChange?.({\n        ...event,\n        target,\n        currentTarget: target,\n      } as unknown as ChangeEvent<HTMLTextAreaElement>);\n      if (autoResize) resizeTextArea();\n    };\n\n    const counterEnabled =\n      typeof maxLength === 'number' &&\n      (showCounter ?? true) &&\n      maxLength > 0;\n\n    const current = codePointLength(currentValue);\n    const remaining = counterEnabled\n      ? Math.max(0, (maxLength as number) - current)\n      : 0;\n    const ratio = counterEnabled ? current / (maxLength as number) : 0;\n\n    const [announced, setAnnounced] = useState<string>('');\n    useEffect(() => {\n      if (!counterEnabled) return;\n      const handle = window.setTimeout(() => {\n        if (composingRef.current) return;\n        setAnnounced(\n          t('ui.inputs.textarea.charactersRemaining', {\n            count: remaining,\n            defaultValue: '{{count}} characters remaining',\n          }),\n        );\n      }, 500);\n      return () => window.clearTimeout(handle);\n    }, [counterEnabled, remaining, t]);\n\n    const counterId = counterEnabled ? `${textAreaId}-counter` : undefined;\n    const describedBy =\n      [ctx.describedBy || undefined, counterId].filter(Boolean).join(' ') ||\n      undefined;\n\n    const resizeVariant: 'auto' | 'manual' = autoResize ? 'auto' : 'manual';\n\n    return (\n      <div className=\"flex w-full flex-col gap-[var(--spacing-xs)]\">\n        <textarea\n          ref={setRefs}\n          id={textAreaId}\n          value={isControlled ? currentValue : undefined}\n          defaultValue={!isControlled ? defaultValue : undefined}\n          disabled={effectiveDisabled}\n          aria-describedby={describedBy}\n          aria-invalid={ctx.invalid || undefined}\n          aria-required={ctx.required || undefined}\n          maxLength={maxLength}\n          rows={autoResize ? minRows : rows}\n          onChange={handleChange}\n          onCompositionStart={handleCompositionStart}\n          onCompositionEnd={handleCompositionEnd}\n          onInput={onInput}\n          className={textAreaVariants({\n            size,\n            tone: effectiveTone,\n            resize: resizeVariant,\n            className,\n          })}\n          {...props}\n        />\n        {counterEnabled ? (\n          <div\n            id={counterId}\n            className=\"flex justify-end type-meta tabular-nums\"\n          >\n            <span aria-hidden=\"true\" className={counterToneClass(ratio)}>\n              {current} / {maxLength}\n            </span>\n            <span className=\"sr-only\" aria-live=\"polite\">\n              {announced}\n            </span>\n          </div>\n        ) : null}\n      </div>\n    );\n  },\n);\n\nTextArea.displayName = 'TextArea';\n"],"names":["textAreaVariants","cva","counterToneClass","ratio","codePointLength","value","TextArea","forwardRef","size","tone","autoResize","minRows","maxRows","showCounter","className","id","disabled","defaultValue","maxLength","rows","onChange","onCompositionStart","onCompositionEnd","onInput","props","ref","t","useTranslation","ctx","useFormField","textAreaId","effectiveDisabled","effectiveTone","innerRef","useRef","setRefs","useCallback","node","isControlled","internalValue","setInternalValue","useState","currentValue","composingRef","resizeTextArea","el","styles","lineHeight","paddingTop","paddingBottom","borderTop","borderBottom","verticalChrome","minH","maxH","next","useLayoutEffect","handleChange","event","handleCompositionStart","handleCompositionEnd","target","counterEnabled","current","remaining","announced","setAnnounced","useEffect","handle","counterId","describedBy","resizeVariant","jsxs","jsx"],"mappings":";;;;;AAeA,MAAMA,KAAmBC;AAAA,EACvB;AAAA,IACE;AAAA,IACA;AAAA,IACA;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,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,MAET,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,IAEF,iBAAiB,EAAE,MAAM,MAAM,MAAM,WAAW,QAAQ,SAAA;AAAA,EAAS;AAErE,GAEMC,KAAmB,CAACC,MACpBA,KAAS,IAAU,qBACnBA,KAAS,MAAY,iBAClB,yBAmBHC,KAAkB,CAACC,MAA0B,CAAC,GAAGA,CAAK,EAAE,QAEjDC,KAAWC;AAAA,EACtB,CACE;AAAA,IACE,MAAAC,IAAO;AAAA,IACP,MAAAC,IAAO;AAAA,IACP,YAAAC,IAAa;AAAA,IACb,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAX;AAAA,IACA,cAAAY;AAAA,IACA,WAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,EAAE,GAAAC,EAAA,IAAMC,GAAA,GACRC,IAAMC,GAAA,GACNC,IAAaf,KAAMa,EAAI,IACvBG,IAAoBH,EAAI,YAAYZ,GACpCgB,IAAqCJ,EAAI,UAAU,UAAUnB,GAE7DwB,IAAWC,EAAmC,IAAI,GAClDC,IAAUC;AAAA,MACd,CAACC,MAAqC;AACpC,QAAAJ,EAAS,UAAUI,GACf,OAAOZ,KAAQ,aACjBA,EAAIY,CAAI,IACCZ,MACTA,EAAI,UAAUY;AAAA,MAElB;AAAA,MACA,CAACZ,CAAG;AAAA,IAAA,GAGAa,IAAejC,MAAU,QACzB,CAACkC,GAAeC,CAAgB,IAAIC;AAAA,MACxC,OAAOxB,KAAgB,EAAE;AAAA,IAAA,GAErByB,IAAeJ,IAAe,OAAOjC,CAAK,IAAIkC,GAE9CI,IAAeT,EAAO,EAAK,GAE3BU,IAAiBR,EAAY,MAAM;AACvC,YAAMS,IAAKZ,EAAS;AACpB,UAAI,CAACY,KAAM,CAACnC,EAAY;AAExB,YAAMoC,IAAS,OAAO,iBAAiBD,CAAE,GACnCE,IAAa,WAAWD,EAAO,UAAU,GACzCE,IAAa,WAAWF,EAAO,UAAU,GACzCG,KAAgB,WAAWH,EAAO,aAAa,GAC/CI,KAAY,WAAWJ,EAAO,cAAc,GAC5CK,KAAe,WAAWL,EAAO,iBAAiB,GAClDM,IACJJ,IAAaC,KAAgBC,KAAYC,IAErCE,MACH,OAAO,SAASN,CAAU,IAAIA,IAAa,MAAMpC,IAClDyC,GACIE,KACJ,OAAO1C,KAAY,YACd,OAAO,SAASmC,CAAU,IAAIA,IAAa,MAAMnC,IAClDwC,IACA,OAAO;AAIb,MAAAP,EAAG,MAAM,SAAS;AAClB,YAAMU,KAAO,KAAK,IAAIF,IAAM,KAAK,IAAIR,EAAG,cAAcS,EAAI,CAAC;AAC3D,MAAAT,EAAG,MAAM,SAAS,GAAGU,EAAI;AAAA,IAC3B,GAAG,CAAC7C,GAAYC,GAASC,CAAO,CAAC;AAEjC,IAAA4C,GAAgB,MAAM;AACpB,MAAK9C,KACLkC,EAAA;AAAA,IACF,GAAG,CAAClC,GAAYkC,GAAgBF,CAAY,CAAC;AAE7C,UAAMe,IAAe,CAACC,MAA4C;AAIhE,MAHKpB,KACHE,EAAiBkB,EAAM,OAAO,KAAK,GAEjC,CAAAf,EAAa,YACjBvB,KAAA,QAAAA,EAAWsC;AAAA,IACb,GAEMC,IAAyB,CAC7BD,MACG;AACH,MAAAf,EAAa,UAAU,IACvBtB,KAAA,QAAAA,EAAqBqC;AAAA,IACvB,GAEME,IAAuB,CAC3BF,MACG;AACH,MAAAf,EAAa,UAAU,IACvBrB,KAAA,QAAAA,EAAmBoC;AACnB,YAAMG,IAASH,EAAM;AACrB,MAAKpB,KACHE,EAAiBqB,EAAO,KAAK,GAM/BzC,KAAA,QAAAA,EAAW;AAAA,QACT,GAAGsC;AAAA,QACH,QAAAG;AAAA,QACA,eAAeA;AAAA,MAAA,IAEbnD,KAAYkC,EAAA;AAAA,IAClB,GAEMkB,IACJ,OAAO5C,KAAc,aACpBL,KAAe,OAChBK,IAAY,GAER6C,IAAU3D,GAAgBsC,CAAY,GACtCsB,IAAYF,IACd,KAAK,IAAI,GAAI5C,IAAuB6C,CAAO,IAC3C,GACE5D,IAAQ2D,IAAiBC,IAAW7C,IAAuB,GAE3D,CAAC+C,GAAWC,CAAY,IAAIzB,EAAiB,EAAE;AACrD,IAAA0B,GAAU,MAAM;AACd,UAAI,CAACL,EAAgB;AACrB,YAAMM,IAAS,OAAO,WAAW,MAAM;AACrC,QAAIzB,EAAa,WACjBuB;AAAA,UACExC,EAAE,0CAA0C;AAAA,YAC1C,OAAOsC;AAAA,YACP,cAAc;AAAA,UAAA,CACf;AAAA,QAAA;AAAA,MAEL,GAAG,GAAG;AACN,aAAO,MAAM,OAAO,aAAaI,CAAM;AAAA,IACzC,GAAG,CAACN,GAAgBE,GAAWtC,CAAC,CAAC;AAEjC,UAAM2C,IAAYP,IAAiB,GAAGhC,CAAU,aAAa,QACvDwC,IACJ,CAAC1C,EAAI,eAAe,QAAWyC,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAClE,QAEIE,IAAmC7D,IAAa,SAAS;AAE/D,WACE,gBAAA8D,EAAC,OAAA,EAAI,WAAU,gDACb,UAAA;AAAA,MAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKtC;AAAA,UACL,IAAIL;AAAA,UACJ,OAAOQ,IAAeI,IAAe;AAAA,UACrC,cAAeJ,IAA8B,SAAfrB;AAAA,UAC9B,UAAUc;AAAA,UACV,oBAAkBuC;AAAA,UAClB,gBAAc1C,EAAI,WAAW;AAAA,UAC7B,iBAAeA,EAAI,YAAY;AAAA,UAC/B,WAAAV;AAAA,UACA,MAAMR,IAAaC,IAAUQ;AAAA,UAC7B,UAAUsC;AAAA,UACV,oBAAoBE;AAAA,UACpB,kBAAkBC;AAAA,UAClB,SAAArC;AAAA,UACA,WAAWvB,GAAiB;AAAA,YAC1B,MAAAQ;AAAA,YACA,MAAMwB;AAAA,YACN,QAAQuC;AAAA,YACR,WAAAzD;AAAA,UAAA,CACD;AAAA,UACA,GAAGU;AAAA,QAAA;AAAA,MAAA;AAAA,MAELsC,IACC,gBAAAU;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIH;AAAA,UACJ,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAG,EAAC,UAAK,eAAY,QAAO,WAAWtE,GAAiBC,CAAK,GACvD,UAAA;AAAA,cAAA4D;AAAA,cAAQ;AAAA,cAAI7C;AAAA,YAAA,GACf;AAAA,8BACC,QAAA,EAAK,WAAU,WAAU,aAAU,UACjC,UAAA+C,EAAA,CACH;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,IAEA;AAAA,IAAA,GACN;AAAA,EAEJ;AACF;AAEA3D,GAAS,cAAc;"}

package/dist/_chunks/text-input-D16CcMlL.js

@@ -0,0 +1,187 @@
+import { jsxs as Y, jsx as i } from "react/jsx-runtime";
+import { forwardRef as Z, useState as E, useRef as z, useCallback as A } from "react";
+import { c as I } from "./index-D2ZczOXr.js";
+import { useTranslation as C } from "react-i18next";
+import { u as ee } from "./form-field-context-94LwgYTQ.js";
+import { I as te, a as h, b as v } from "./input-surface-D5OMCB1W.js";
+import { X as se } from "./x-CCcI3eJp.js";
+const ae = I(
+  [
+    "relative flex items-center w-full",
+    "rounded-[var(--radius-sm)]",
+    "focus-within:outline-[length:var(--focus-ring-width)] focus-within:outline-solid",
+    "focus-within:outline-ring focus-within:outline-offset-[length:var(--focus-ring-offset)]",
+    "forced-colors:focus-within:outline-[CanvasText]",
+    "has-[:disabled]:cursor-not-allowed"
+  ].join(" ")
+), re = I(
+  [
+    "w-full rounded-[var(--radius-sm)] border bg-background text-foreground",
+    "placeholder:text-muted-foreground",
+    "transition-colors duration-[var(--animation-duration)] motion-reduce:transition-none",
+    "focus:outline-none focus-visible:outline-none",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "read-only:bg-muted read-only:cursor-default"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: `${h.sm} ${v.sm}`,
+        md: `${h.md} ${v.md}`,
+        lg: `${h.lg} ${v.lg}`
+      },
+      tone: te,
+      hasStart: {
+        true: "ps-10",
+        false: ""
+      },
+      hasEnd: {
+        true: "pe-10",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      { size: "sm", hasStart: !1, class: "ps-3" },
+      { size: "md", hasStart: !1, class: "ps-3" },
+      { size: "lg", hasStart: !1, class: "ps-4" },
+      { size: "sm", hasEnd: !1, class: "pe-3" },
+      { size: "md", hasEnd: !1, class: "pe-3" },
+      { size: "lg", hasEnd: !1, class: "pe-4" }
+    ],
+    defaultVariants: {
+      size: "md",
+      tone: "default",
+      hasStart: !1,
+      hasEnd: !1
+    }
+  }
+), N = "absolute inset-y-0 flex items-center pointer-events-none text-muted-foreground", ie = Z(
+  ({
+    size: P = "md",
+    tone: R = "default",
+    startAdornment: l,
+    endAdornment: u,
+    clearable: V = !1,
+    onClear: c,
+    className: _,
+    id: $,
+    disabled: j,
+    value: b,
+    defaultValue: O,
+    onChange: s,
+    onCompositionStart: d,
+    onCompositionEnd: f,
+    ...x
+  }, r) => {
+    const { t: U } = C(), a = ee(), k = $ ?? a.id, y = a.disabled || j, F = a.invalid ? "error" : R, n = b !== void 0, [B, p] = E(
+      String(O ?? "")
+    ), T = n ? String(b) : B, D = T.length > 0, m = z(!1), [q, w] = E(!1), o = z(null), H = A(
+      (e) => {
+        o.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+      },
+      [r]
+    ), X = !!l, S = V && D && !y && !x.readOnly, G = !!u || S, W = (e) => {
+      n || p(e.target.value), !m.current && (s == null || s(e));
+    }, J = (e) => {
+      m.current = !0, w(!0), d == null || d(e);
+    }, K = (e) => {
+      m.current = !1, w(!1), f == null || f(e);
+      const t = e.currentTarget;
+      n || p(t.value), s == null || s({
+        ...e,
+        target: t,
+        currentTarget: t
+      });
+    }, L = () => {
+      var t;
+      n || p("");
+      const e = o.current;
+      if (e && s) {
+        const Q = Object.getPrototypeOf(e), g = (t = Object.getOwnPropertyDescriptor(Q, "value")) == null ? void 0 : t.set;
+        g == null || g.call(e, ""), s({
+          target: e,
+          currentTarget: e,
+          bubbles: !0,
+          type: "change",
+          nativeEvent: new Event("change", { bubbles: !0 }),
+          preventDefault: () => {
+          },
+          stopPropagation: () => {
+          },
+          isDefaultPrevented: () => !1,
+          isPropagationStopped: () => !1,
+          persist: () => {
+          }
+        });
+      }
+      c == null || c(), e == null || e.focus();
+    }, M = (e) => {
+      var t;
+      e.target !== o.current && (e.target.closest("button") || (t = o.current) == null || t.focus());
+    };
+    return /* @__PURE__ */ Y(
+      "div",
+      {
+        className: ae(),
+        onClick: M,
+        "data-composing": q ? "true" : void 0,
+        children: [
+          l ? /* @__PURE__ */ i(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${N} start-0 ps-3 [&_svg]:size-4`,
+              children: l
+            }
+          ) : null,
+          /* @__PURE__ */ i(
+            "input",
+            {
+              ref: H,
+              id: k,
+              type: "text",
+              value: T,
+              disabled: y,
+              "aria-describedby": a.describedBy || void 0,
+              "aria-invalid": a.invalid || void 0,
+              "aria-required": a.required || void 0,
+              onChange: W,
+              onCompositionStart: J,
+              onCompositionEnd: K,
+              className: re({
+                size: P,
+                tone: F,
+                hasStart: X,
+                hasEnd: G,
+                className: _
+              }),
+              ...x
+            }
+          ),
+          S ? /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              "aria-label": U("ui.inputs.text.clear", "Clear input"),
+              onClick: L,
+              className: "absolute inset-y-0 end-0 pe-3 flex items-center pointer-events-auto text-muted-foreground hover:text-foreground transition-colors duration-[var(--animation-duration)] motion-reduce:transition-none",
+              children: /* @__PURE__ */ i(se, { "aria-hidden": "true", className: "size-4" })
+            }
+          ) : u ? /* @__PURE__ */ i(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: `${N} end-0 pe-3 [&_svg]:size-4`,
+              children: u
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+ie.displayName = "TextInput";
+export {
+  ie as T
+};
+//# sourceMappingURL=text-input-D16CcMlL.js.map