@gerege-systems/ui 0.11.2

package/dist-lib/components/ui/Form.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { forwardRef as a, useId as D, useContext as f, createContext as u, Children as N, isValidElement as h } from "react";
+import * as C from "@radix-ui/react-label";
+import { FormProvider as j, Controller as S, useFormContext as p } from "react-hook-form";
+import { Slot as E } from "@radix-ui/react-slot";
+import { cn as l } from "../../lib/utils.js";
+function F(o, e = []) {
+  if (!o) return e;
+  for (const r of Object.values(o)) {
+    if (!r || typeof r != "object") continue;
+    const t = r.message;
+    typeof t == "string" && t ? e.push(t) : "type" in r || F(r, e);
+  }
+  return e;
+}
+function L() {
+  const { formState: o } = p(), e = F(o.errors);
+  return /* @__PURE__ */ i("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: e.join(". ") });
+}
+function M({ children: o, ...e }) {
+  return /* @__PURE__ */ b(j, { ...e, children: [
+    o,
+    /* @__PURE__ */ i(L, {})
+  ] });
+}
+M.displayName = "Form";
+const y = u(null);
+function q(o) {
+  return /* @__PURE__ */ i(y.Provider, { value: { name: o.name }, children: /* @__PURE__ */ i(S, { ...o }) });
+}
+const x = u(null);
+function d() {
+  const o = f(y), e = f(x), { getFieldState: r, formState: t } = p();
+  if (!o)
+    throw new Error("useFormField must be used inside <FormField>");
+  const s = r(o.name, t), n = (e == null ? void 0 : e.id) ?? "";
+  return {
+    id: n,
+    name: o.name,
+    formItemId: `${n}-item`,
+    formDescriptionId: `${n}-desc`,
+    formMessageId: `${n}-error`,
+    hasDescription: (e == null ? void 0 : e.hasDescription) ?? !1,
+    ...s
+  };
+}
+function g(o) {
+  return N.toArray(o).some((e) => {
+    if (!h(e)) return !1;
+    if (e.type === I) return !0;
+    const r = e.props.children;
+    return (typeof e.type == "string" || typeof e.type == "symbol") && r ? g(r) : !1;
+  });
+}
+const P = a(
+  function({ className: e, children: r, ...t }, s) {
+    const n = D(), m = g(r);
+    return /* @__PURE__ */ i(x.Provider, { value: { id: n, hasDescription: m }, children: /* @__PURE__ */ i("div", { ref: s, className: l("flex flex-col gap-1.5", e), ...t, children: r }) });
+  }
+);
+P.displayName = "FormItem";
+const w = a(function({ className: e, ...r }, t) {
+  const { formItemId: s, error: n } = d();
+  return /* @__PURE__ */ i(
+    C.Root,
+    {
+      ref: t,
+      htmlFor: s,
+      className: l("text-foreground text-sm font-medium", n && "text-danger-text", e),
+      ...r
+    }
+  );
+});
+w.displayName = "FormLabel";
+const R = a(
+  function(e, r) {
+    const { error: t, formItemId: s, formDescriptionId: n, formMessageId: m, hasDescription: c } = d(), v = [c ? n : null, t ? m : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ i(
+      E,
+      {
+        ref: r,
+        id: s,
+        "aria-describedby": v,
+        "aria-invalid": !!t,
+        ...e
+      }
+    );
+  }
+);
+R.displayName = "FormControl";
+const I = a(function({ className: e, ...r }, t) {
+  const { formDescriptionId: s } = d();
+  return /* @__PURE__ */ i(
+    "p",
+    {
+      ref: t,
+      id: s,
+      className: l("text-foreground-subtle text-xs", e),
+      ...r
+    }
+  );
+});
+I.displayName = "FormDescription";
+const $ = a(
+  function({ className: e, children: r, ...t }, s) {
+    const { error: n, formMessageId: m } = d(), c = n ? String((n == null ? void 0 : n.message) ?? "") : r;
+    return c ? /* @__PURE__ */ i(
+      "p",
+      {
+        ref: s,
+        id: m,
+        className: l("text-danger-text text-xs", e),
+        ...t,
+        children: c
+      }
+    ) : null;
+  }
+);
+$.displayName = "FormError";
+export {
+  M as Form,
+  R as FormControl,
+  I as FormDescription,
+  $ as FormError,
+  q as FormField,
+  P as FormItem,
+  w as FormLabel,
+  d as useFormField
+};
+//# sourceMappingURL=Form.js.map

package/dist-lib/components/ui/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../src/components/ui/Form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useId,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldErrors,\n  type FieldPath,\n  type FieldValues,\n  type FormProviderProps,\n} from 'react-hook-form';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  react-hook-form bindings + accessible label / description / error wiring.\n *\n *  Usage:\n *    const form = useForm<Values>(…);\n *    <Form {...form}>\n *      <FormField\n *        control={form.control}\n *        name=\"email\"\n *        render={({ field }) => (\n *          <FormItem>\n *            <FormLabel>Email</FormLabel>\n *            <FormControl><Input type=\"email\" {...field} /></FormControl>\n *            <FormDescription>We never share this.</FormDescription>\n *            <FormError />\n *          </FormItem>\n *        )}\n *      />\n *    </Form>\n *\n *  Ids: `<item>-item` (control), `<item>-desc`, `<item>-error` — the same\n *  `-desc` / `-error` suffixes the standalone fields use (useFieldIds).\n *  Invalid styling is driven purely by `aria-invalid` on the control; no\n *  `aria-invalid` is set on the control; style from `aria-invalid:` (no `tone` injection).\n * --------------------------------------------------------------------------- */\n\nfunction collectMessages(errors: FieldErrors | undefined, out: string[] = []): string[] {\n  if (!errors) return out;\n  for (const value of Object.values(errors)) {\n    if (!value || typeof value !== 'object') continue;\n    const message = (value as { message?: unknown }).message;\n    if (typeof message === 'string' && message) out.push(message);\n    else if (!('type' in value)) collectMessages(value as FieldErrors, out);\n  }\n  return out;\n}\n\n/**\n * Single polite live region per form. Field-level `FormError` elements are\n * plain text wired via `aria-describedby`; this region announces the current\n * error set once instead of one `role=\"alert\"` per field firing in parallel.\n */\nfunction FormLiveRegion() {\n  const { formState } = useFormContext();\n  const messages = collectMessages(formState.errors);\n  return (\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n      {messages.join('. ')}\n    </div>\n  );\n}\n\n/**\n * Form context provider. Spread the `useForm()` return value into it, exactly\n * like react-hook-form's `FormProvider` — plus one shared live region for\n * validation announcements.\n */\nexport function Form<\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = unknown,\n  TTransformedValues = TFieldValues,\n>({ children, ...form }: FormProviderProps<TFieldValues, TContext, TTransformedValues>) {\n  return (\n    <FormProvider {...form}>\n      {children}\n      <FormLiveRegion />\n    </FormProvider>\n  );\n}\nForm.displayName = 'Form';\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name as string }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\ninterface FormItemContextValue {\n  id: string;\n  /** Whether a <FormDescription> is rendered — drives aria-describedby. */\n  hasDescription: boolean;\n}\nconst FormItemContext = createContext<FormItemContextValue | null>(null);\n\nexport function useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n  if (!fieldContext) {\n    throw new Error('useFormField must be used inside <FormField>');\n  }\n  const fieldState = getFieldState(fieldContext.name, formState);\n  const id = itemContext?.id ?? '';\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-item`,\n    formDescriptionId: `${id}-desc`,\n    formMessageId: `${id}-error`,\n    hasDescription: itemContext?.hasDescription ?? false,\n    ...fieldState,\n  };\n}\n\n/** Synchronous scan for a <FormDescription> among the item's children (through fragments / host elements). */\nfunction containsDescription(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n    if (child.type === FormDescription) return true;\n    const nested = (child.props as { children?: ReactNode }).children;\n    // Only descend into host elements / fragments — custom components own their subtree.\n    return (typeof child.type === 'string' || typeof child.type === 'symbol') && nested\n      ? containsDescription(nested)\n      : false;\n  });\n}\n\nexport const FormItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function FormItem({ className, children, ...props }, ref) {\n    const id = useId();\n    // Derived during render (no effect → no second pass / hydration flip).\n    const hasDescription = containsDescription(children);\n    return (\n      <FormItemContext.Provider value={{ id, hasDescription }}>\n        <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props}>\n          {children}\n        </div>\n      </FormItemContext.Provider>\n    );\n  },\n);\nFormItem.displayName = 'FormItem';\n\nexport const FormLabel = forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(function FormLabel({ className, ...props }, ref) {\n  const { formItemId, error } = useFormField();\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={formItemId}\n      className={cn('text-foreground text-sm font-medium', error && 'text-danger-text', className)}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n\nexport const FormControl = forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(\n  function FormControl(props, ref) {\n    const { error, formItemId, formDescriptionId, formMessageId, hasDescription } = useFormField();\n    // Only reference ids that actually render: the description when mounted,\n    // the message only while there is an error (FormError returns null otherwise).\n    const describedBy =\n      [hasDescription ? formDescriptionId : null, error ? formMessageId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={describedBy}\n        aria-invalid={!!error}\n        {...props}\n      />\n    );\n  },\n);\nFormControl.displayName = 'FormControl';\n\nexport const FormDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function FormDescription({ className, ...props }, ref) {\n  const { formDescriptionId } = useFormField();\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn('text-foreground-subtle text-xs', className)}\n      {...props}\n    />\n  );\n});\nFormDescription.displayName = 'FormDescription';\n\n/**\n * Field-level validation message. Not a live region on its own — it is\n * referenced from the control via `aria-describedby`, and the form's single\n * live region announces changes.\n */\nexport const FormError = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function FormError({ className, children, ...props }, ref) {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message ?? '') : children;\n    if (!body) return null;\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn('text-danger-text text-xs', className)}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\nFormError.displayName = 'FormError';\n"],"names":["collectMessages","errors","out","value","message","FormLiveRegion","formState","useFormContext","messages","jsx","Form","children","form","jsxs","FormProvider","FormFieldContext","createContext","FormField","props","Controller","FormItemContext","useFormField","fieldContext","useContext","itemContext","getFieldState","fieldState","id","containsDescription","Children","child","isValidElement","FormDescription","nested","FormItem","forwardRef","className","ref","useId","hasDescription","cn","FormLabel","formItemId","error","LabelPrimitive","FormControl","formDescriptionId","formMessageId","describedBy","Slot","FormError","body"],"mappings":"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"}

package/dist-lib/components/ui/Icon.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { default as dynamicIconImports } from 'lucide-react/dynamicIconImports';
+import { LucideProps } from 'lucide-react';
+/** Every lucide icon name, kebab-case — e.g. `calendar`, `chevrons-up-down`. */
+export type IconName = keyof typeof dynamicIconImports;
+/** All available icon names (useful for pickers and docs). */
+export declare const iconNames: IconName[];
+export interface IconProps extends Omit<LucideProps, 'ref'> {
+    /** Lucide icon name in kebab-case, e.g. `name="calendar"`. Autocompletes. */
+    name: IconName;
+    /**
+     * Shown while the icon chunk loads (first use only — icons are cached).
+     * Defaults to an invisible square so layout doesn't shift.
+     */
+    fallback?: ReactNode;
+}
+/**
+ * Name-addressed lucide icon. Use when the icon is dynamic (data-driven
+ * nav items, user-configurable dashboards) or when importing components for
+ * every icon is friction.
+ *
+ * Each icon is code-split and loaded on first use, so referencing the full
+ * lucide set costs nothing up front — `<Icon name="rocket" />` ships only
+ * the rocket.
+ *
+ * @example
+ *   <Icon name="calendar" className="size-4" />
+ *   <Icon name="chevrons-up-down" size={16} strokeWidth={1.5} />
+ *
+ * @do Use `size-4` (16px) inline with text, `size-5` (20px) inside buttons.
+ * @dont Reach for this in hot lists with hundreds of distinct icons on first
+ *       paint — statically imported icons from `Icons` skip the lazy hop.
+ */
+export declare function Icon({ name, fallback, ...props }: IconProps): import("react/jsx-runtime").JSX.Element | null;

package/dist-lib/components/ui/Icon.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as a, Suspense as u, lazy as d } from "react";
+import r from "lucide-react/dynamicIconImports";
+const p = Object.keys(r), i = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set();
+function f(e) {
+  const t = i.get(e);
+  if (t) return t;
+  const n = r[e];
+  if (typeof n != "function")
+    return process.env.NODE_ENV !== "production" && !s.has(e) && (s.add(e), console.warn(
+      `[@gerege-systems/ui] <Icon name="${e}"> is not a lucide icon; rendering nothing.`
+    )), null;
+  const c = d(n);
+  return i.set(e, c), c;
+}
+function y({ name: e, fallback: t, ...n }) {
+  const c = a(() => f(e), [e]), l = t ?? /* @__PURE__ */ o(
+    "span",
+    {
+      "aria-hidden": !0,
+      className: n.className,
+      style: { display: "inline-block", width: n.size ?? "1em", height: n.size ?? "1em" }
+    }
+  );
+  return c ? /* @__PURE__ */ o(u, { fallback: l, children: /* @__PURE__ */ o(c, { ...n }) }) : null;
+}
+export {
+  y as Icon,
+  p as iconNames
+};
+//# sourceMappingURL=Icon.js.map

package/dist-lib/components/ui/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../src/components/ui/Icon.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense, useMemo, type LazyExoticComponent, type ReactNode } from 'react';\nimport dynamicIconImports from 'lucide-react/dynamicIconImports';\nimport type { LucideIcon, LucideProps } from 'lucide-react';\n\n/** Every lucide icon name, kebab-case — e.g. `calendar`, `chevrons-up-down`. */\nexport type IconName = keyof typeof dynamicIconImports;\n\n/** All available icon names (useful for pickers and docs). */\nexport const iconNames = Object.keys(dynamicIconImports) as IconName[];\n\n// lazy() must return a stable component per name or React remounts (and\n// re-suspends) on every render.\nconst cache = new Map<IconName, LazyExoticComponent<LucideIcon>>();\nconst warned = new Set<string>();\n\nfunction getIcon(name: IconName): LazyExoticComponent<LucideIcon> | null {\n  const cached = cache.get(name);\n  if (cached) return cached;\n  const loader = dynamicIconImports[name];\n  if (typeof loader !== 'function') {\n    // Unknown name (data-driven input) → render nothing, warn once in dev.\n    if (process.env.NODE_ENV !== 'production' && !warned.has(name)) {\n      warned.add(name);\n      console.warn(\n        `[@gerege-systems/ui] <Icon name=\"${name}\"> is not a lucide icon; rendering nothing.`,\n      );\n    }\n    return null;\n  }\n  const created = lazy(loader);\n  cache.set(name, created);\n  return created;\n}\n\nexport interface IconProps extends Omit<LucideProps, 'ref'> {\n  /** Lucide icon name in kebab-case, e.g. `name=\"calendar\"`. Autocompletes. */\n  name: IconName;\n  /**\n   * Shown while the icon chunk loads (first use only — icons are cached).\n   * Defaults to an invisible square so layout doesn't shift.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * Name-addressed lucide icon. Use when the icon is dynamic (data-driven\n * nav items, user-configurable dashboards) or when importing components for\n * every icon is friction.\n *\n * Each icon is code-split and loaded on first use, so referencing the full\n * lucide set costs nothing up front — `<Icon name=\"rocket\" />` ships only\n * the rocket.\n *\n * @example\n *   <Icon name=\"calendar\" className=\"size-4\" />\n *   <Icon name=\"chevrons-up-down\" size={16} strokeWidth={1.5} />\n *\n * @do Use `size-4` (16px) inline with text, `size-5` (20px) inside buttons.\n * @dont Reach for this in hot lists with hundreds of distinct icons on first\n *       paint — statically imported icons from `Icons` skip the lazy hop.\n */\nexport function Icon({ name, fallback, ...props }: IconProps) {\n  const LucideIcon = useMemo(() => getIcon(name), [name]);\n\n  const placeholder = fallback ?? (\n    <span\n      aria-hidden\n      className={props.className}\n      style={{ display: 'inline-block', width: props.size ?? '1em', height: props.size ?? '1em' }}\n    />\n  );\n\n  if (!LucideIcon) return null;\n\n  return (\n    <Suspense fallback={placeholder}>\n      <LucideIcon {...props} />\n    </Suspense>\n  );\n}\n"],"names":["iconNames","dynamicIconImports","cache","warned","getIcon","name","cached","loader","created","lazy","Icon","fallback","props","LucideIcon","useMemo","placeholder","jsx","Suspense"],"mappings":";;;;AAUO,MAAMA,IAAY,OAAO,KAAKC,CAAkB,GAIjDC,wBAAY,IAAA,GACZC,wBAAa,IAAA;AAEnB,SAASC,EAAQC,GAAwD;AACvE,QAAMC,IAASJ,EAAM,IAAIG,CAAI;AAC7B,MAAIC,EAAQ,QAAOA;AACnB,QAAMC,IAASN,EAAmBI,CAAI;AACtC,MAAI,OAAOE,KAAW;AAEpB,WAAI,QAAQ,IAAI,aAAa,gBAAgB,CAACJ,EAAO,IAAIE,CAAI,MAC3DF,EAAO,IAAIE,CAAI,GACf,QAAQ;AAAA,MACN,oCAAoCA,CAAI;AAAA,IAAA,IAGrC;AAET,QAAMG,IAAUC,EAAKF,CAAM;AAC3B,SAAAL,EAAM,IAAIG,GAAMG,CAAO,GAChBA;AACT;AA6BO,SAASE,EAAK,EAAE,MAAAL,GAAM,UAAAM,GAAU,GAAGC,KAAoB;AAC5D,QAAMC,IAAaC,EAAQ,MAAMV,EAAQC,CAAI,GAAG,CAACA,CAAI,CAAC,GAEhDU,IAAcJ,KAClB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAWJ,EAAM;AAAA,MACjB,OAAO,EAAE,SAAS,gBAAgB,OAAOA,EAAM,QAAQ,OAAO,QAAQA,EAAM,QAAQ,MAAA;AAAA,IAAM;AAAA,EAAA;AAI9F,SAAKC,IAGH,gBAAAG,EAACC,KAAS,UAAUF,GAClB,4BAACF,GAAA,EAAY,GAAGD,GAAO,EAAA,CACzB,IALsB;AAO1B;"}

package/dist-lib/components/ui/IconButton.d.ts

@@ -0,0 +1,34 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from '../../lib/cva.js';
+declare const iconButton: (props?: ({
+    variant?: "outline" | "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "md" | "sm" | "lg" | "xl" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButton> {
+    /**
+     * Accessible label for screen readers. **Required** — an icon-only button
+     * with no label is invisible to assistive tech.
+     */
+    'aria-label': string;
+    /** The Lucide icon to render. */
+    icon: ReactNode;
+    /** Show a spinner instead of the icon; blocks interaction but keeps focus (`aria-disabled`). */
+    loading?: boolean;
+}
+/**
+ * Square, icon-only button. Default variant is `ghost` because most
+ * IconButtons sit in dense toolbars or tables. Always pass `aria-label`.
+ *
+ * @example Toolbar action
+ *   <IconButton aria-label="Edit row" icon={<Edit2 />} onClick={onEdit} />
+ *
+ * @example Dismissible chip
+ *   <IconButton aria-label="Remove tag" size="sm" icon={<X />} />
+ *
+ * @do Use `ghost` for in-row actions; `outline` when next to a label-less
+ *      primary button you want users to consider as an alternative.
+ * @dont Use IconButton when the action's meaning isn't universally
+ *       recognised. If users need to learn the icon, ship a Button with text.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

package/dist-lib/components/ui/IconButton.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { Loader2 as b } from "../../icons/index.js";
+import { cn as f } from "../../lib/utils.js";
+import { cva as m } from "class-variance-authority";
+const l = m(
+  [
+    "inline-flex items-center justify-center shrink-0",
+    "rounded-md",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "focus-visible:ring-offset-background",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-busy:pointer-events-none",
+    "[&_svg]:pointer-events-none"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: "bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active",
+        secondary: "bg-background-muted text-foreground border border-border-input hover:bg-surface-hover active:bg-surface-active",
+        outline: "border border-border-input bg-transparent text-foreground hover:bg-background-muted",
+        ghost: "bg-transparent text-foreground-muted hover:bg-background-muted hover:text-foreground",
+        destructive: "bg-danger text-on-danger hover:bg-danger-hover active:bg-danger-active"
+      },
+      size: {
+        // Matches Button heights: sm 32 / md 36 / lg 40 / xl 44 (touch / marketing).
+        sm: "h-8 w-8 [&_svg]:size-4",
+        md: "h-9 w-9 [&_svg]:size-4",
+        lg: "h-10 w-10 [&_svg]:size-5",
+        xl: "h-11 w-11 [&_svg]:size-5"
+      }
+    },
+    defaultVariants: {
+      variant: "ghost",
+      size: "md"
+    }
+  }
+), p = g(function({ className: o, variant: n, size: i, icon: a, loading: e, disabled: s, type: c = "button", onClick: d, ...u }, v) {
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      ref: v,
+      type: c,
+      "aria-busy": e || void 0,
+      "aria-disabled": e || void 0,
+      disabled: s,
+      className: f(l({ variant: n, size: i }), o),
+      onClick: e ? h : d,
+      ...u,
+      children: e ? /* @__PURE__ */ t(b, { className: "animate-spin", "aria-hidden": "true" }) : a
+    }
+  );
+});
+p.displayName = "IconButton";
+function h(r) {
+  r.preventDefault(), r.stopPropagation();
+}
+export {
+  p as IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist-lib/components/ui/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/ui/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type SyntheticEvent } from 'react';\nimport { Loader2 } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst iconButton = cva(\n  [\n    'inline-flex items-center justify-center shrink-0',\n    'rounded-md',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'outline-none',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'aria-busy:pointer-events-none',\n    '[&_svg]:pointer-events-none',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: 'bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active',\n        secondary:\n          'bg-background-muted text-foreground border border-border-input hover:bg-surface-hover active:bg-surface-active',\n        outline:\n          'border border-border-input bg-transparent text-foreground hover:bg-background-muted',\n        ghost:\n          'bg-transparent text-foreground-muted hover:bg-background-muted hover:text-foreground',\n        destructive: 'bg-danger text-on-danger hover:bg-danger-hover active:bg-danger-active',\n      },\n      size: {\n        // Matches Button heights: sm 32 / md 36 / lg 40 / xl 44 (touch / marketing).\n        sm: 'h-8 w-8 [&_svg]:size-4',\n        md: 'h-9 w-9 [&_svg]:size-4',\n        lg: 'h-10 w-10 [&_svg]:size-5',\n        xl: 'h-11 w-11 [&_svg]:size-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'ghost',\n      size: 'md',\n    },\n  },\n);\n\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButton> {\n  /**\n   * Accessible label for screen readers. **Required** — an icon-only button\n   * with no label is invisible to assistive tech.\n   */\n  'aria-label': string;\n  /** The Lucide icon to render. */\n  icon: ReactNode;\n  /** Show a spinner instead of the icon; blocks interaction but keeps focus (`aria-disabled`). */\n  loading?: boolean;\n}\n\n/**\n * Square, icon-only button. Default variant is `ghost` because most\n * IconButtons sit in dense toolbars or tables. Always pass `aria-label`.\n *\n * @example Toolbar action\n *   <IconButton aria-label=\"Edit row\" icon={<Edit2 />} onClick={onEdit} />\n *\n * @example Dismissible chip\n *   <IconButton aria-label=\"Remove tag\" size=\"sm\" icon={<X />} />\n *\n * @do Use `ghost` for in-row actions; `outline` when next to a label-less\n *      primary button you want users to consider as an alternative.\n * @dont Use IconButton when the action's meaning isn't universally\n *       recognised. If users need to learn the icon, ship a Button with text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { className, variant, size, icon, loading, disabled, type = 'button', onClick, ...props },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-busy={loading || undefined}\n      aria-disabled={loading || undefined}\n      disabled={disabled}\n      className={cn(iconButton({ variant, size }), className)}\n      onClick={loading ? blockEvent : onClick}\n      {...props}\n    >\n      {loading ? <Loader2 className=\"animate-spin\" aria-hidden=\"true\" /> : icon}\n    </button>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nfunction blockEvent(e: SyntheticEvent) {\n  e.preventDefault();\n  e.stopPropagation();\n}\n"],"names":["iconButton","cva","IconButton","forwardRef","className","variant","size","icon","loading","disabled","type","onClick","props","ref","jsx","cn","blockEvent","Loader2","e"],"mappings":";;;;;;AAOA,MAAMA,IAAaC;AAAA,EACjB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,QACF,aAAa;AAAA,MAAA;AAAA,MAEf,MAAM;AAAA;AAAA,QAEJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GA8BaC,IAAaC,EAA+C,SACvE,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,GAAGC,EAAA,GAClFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAH;AAAA,MACA,aAAWF,KAAW;AAAA,MACtB,iBAAeA,KAAW;AAAA,MAC1B,UAAAC;AAAA,MACA,WAAWM,EAAGf,EAAW,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,MACtD,SAASI,IAAUQ,IAAaL;AAAA,MAC/B,GAAGC;AAAA,MAEH,cAAU,gBAAAE,EAACG,GAAA,EAAQ,WAAU,gBAAe,eAAY,QAAO,IAAKV;AAAA,IAAA;AAAA,EAAA;AAG3E,CAAC;AAEDL,EAAW,cAAc;AAEzB,SAASc,EAAWE,GAAmB;AACrC,EAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACJ;"}

package/dist-lib/components/ui/Input.d.ts

@@ -0,0 +1,54 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from '../../lib/cva.js';
+declare const field: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+    tone?: "default" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type InputType = NonNullable<InputHTMLAttributes<HTMLInputElement>['type']>;
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'value'>, VariantProps<typeof field> {
+    /** Controlled value. `null` is treated as an empty controlled value (no React warning). */
+    value?: InputHTMLAttributes<HTMLInputElement>['value'] | null;
+    /** Field type. `password` enables a show/hide toggle; `search` adds a clear button. */
+    type?: InputType;
+    /** Visible label rendered above the input. */
+    label?: ReactNode;
+    /** Hint below the input. Hidden while `error` is set. */
+    helperText?: ReactNode;
+    /** Validation message. Renders in `danger` colour and sets `aria-invalid`. */
+    error?: ReactNode;
+    /** Content rendered inside the field, before the input — icon or short text. */
+    prefix?: ReactNode;
+    /** Content rendered inside the field, after the input. */
+    suffix?: ReactNode;
+    /** Show an inline clear (×) button when the input has a value. */
+    clearable?: boolean;
+    /**
+     * Fires when the clear button is pressed. Controlled inputs own their state
+     * and should reset `value` here; uncontrolled inputs are cleared for you.
+     */
+    onClear?: () => void;
+    /** Visually conceal the label while keeping it for screen readers. */
+    hideLabel?: boolean;
+}
+/**
+ * Text-style input with optional label, helper / error, prefix / suffix,
+ * clear, and password show-hide. Wraps a single native `<input>` so it works
+ * with `react-hook-form` and any controlled / uncontrolled pattern.
+ *
+ * @example Email with helper
+ *   <Input type="email" label="Work email" helperText="We never share this." />
+ *
+ * @example Password with show/hide
+ *   <Input type="password" label="Password" autoComplete="current-password" />
+ *
+ * @example Search with clear
+ *   <Input type="search" placeholder="Search…" value={q} onChange={…}
+ *          clearable onClear={() => setQ('')} />
+ *
+ * @do Always pair an input with a visible label. If space forces hiding it,
+ *      use `hideLabel` so the label stays in the accessibility tree.
+ * @dont Use placeholder as the only label — placeholders disappear on input
+ *       and fail accessibility.
+ */
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist-lib/components/ui/Input.js

@@ -0,0 +1,158 @@
+"use client";
+import { jsxs as B, jsx as e } from "react/jsx-runtime";
+import { forwardRef as Y, useRef as Z, useState as P } from "react";
+import { X as $, EyeOff as ee, Eye as te, Search as re } from "../../icons/index.js";
+import { cn as s } from "../../lib/utils.js";
+import { useStrings as ne } from "../../hooks/use-strings.js";
+import { useFieldIds as se } from "../../hooks/use-field-ids.js";
+import { cva as j } from "class-variance-authority";
+const ie = j(
+  [
+    "group inline-flex items-center w-full",
+    "rounded-md border border-border-input bg-card text-sm",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+    "has-disabled:opacity-50 has-disabled:pointer-events-none",
+    "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-background",
+    // Invalid state comes from the input's aria-invalid so Form wiring needs no extra prop.
+    "has-aria-invalid:border-danger has-aria-invalid:focus-within:border-danger has-aria-invalid:focus-within:ring-danger"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 gap-1.5",
+        md: "h-9 px-3 gap-2",
+        lg: "h-10 px-3.5 gap-2"
+      },
+      tone: {
+        default: "focus-within:border-accent focus-within:ring-ring",
+        error: "border-danger focus-within:border-danger focus-within:ring-danger"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "default"
+    }
+  }
+), oe = j([
+  "flex-1 min-w-0 bg-transparent outline-none",
+  // Fill the field's height so the focusable target is the full control
+  // (32/36/40px), not the ~20px text box. Below 24px axe's target-size
+  // rule only passes while nothing sits close by, which is a trap for
+  // consumers packing a toolbar.
+  "self-stretch",
+  "placeholder:text-foreground-subtle",
+  "text-foreground",
+  // 16px below md so iOS Safari does not zoom the page on focus; --text-lg = 1rem.
+  "text-lg md:text-sm",
+  "disabled:cursor-not-allowed",
+  // `type="search"` draws a native clear button in WebKit/Chromium. We render
+  // our own via `clearable`, so suppress the native one or both show at once.
+  "[&::-webkit-search-cancel-button]:appearance-none",
+  "[&::-webkit-search-decoration]:appearance-none"
+]), S = s(
+  "text-foreground-subtle hover:text-foreground relative -m-1 flex size-6 shrink-0 items-center justify-center rounded-sm",
+  'before:absolute before:-inset-0.5 before:content-[""]',
+  "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "disabled:pointer-events-none"
+), ae = Y(function({
+  className: R,
+  type: i = "text",
+  size: O,
+  tone: F,
+  label: v,
+  helperText: l,
+  error: o,
+  prefix: H,
+  suffix: w,
+  clearable: L,
+  onClear: u,
+  hideLabel: T,
+  id: _,
+  disabled: r,
+  value: N,
+  defaultValue: a,
+  onInput: f,
+  "aria-describedby": D,
+  "aria-invalid": p,
+  ...M
+}, c) {
+  const h = ne(), y = !!o || p === !0 || p === "true", { fieldId: z, helperId: V, errorId: X, describedBy: q } = se(_, {
+    hasHelper: !!l,
+    hasError: !!o,
+    extra: D
+  }), m = N === null ? "" : N, n = Z(null), A = (t) => {
+    n.current = t, typeof c == "function" ? c(t) : c && (c.current = t);
+  }, [d, C] = P(!1), G = i === "password" ? d ? "text" : "password" : i, J = y ? "error" : F, k = H ?? (i === "search" ? /* @__PURE__ */ e(re, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }) : null), b = m !== void 0, [K, E] = P(
+    a == null ? "" : String(a)
+  ), g = b ? m : K, Q = g !== void 0 && g !== "" && g !== null, U = (t) => {
+    b || E(t.currentTarget.value), f == null || f(t);
+  }, W = () => {
+    var t, I;
+    if (!b && n.current) {
+      const x = (t = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) == null ? void 0 : t.set;
+      x == null || x.call(n.current, ""), n.current.dispatchEvent(new Event("input", { bubbles: !0 })), E("");
+    }
+    u == null || u(), (I = n.current) == null || I.focus();
+  };
+  return /* @__PURE__ */ B("div", { className: s("flex flex-col gap-1.5", R), children: [
+    v && /* @__PURE__ */ e(
+      "label",
+      {
+        htmlFor: z,
+        className: s("text-foreground text-sm font-medium", T && "sr-only"),
+        children: v
+      }
+    ),
+    /* @__PURE__ */ B("div", { className: s(ie({ size: O, tone: J })), children: [
+      k && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: k }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: A,
+          id: z,
+          type: G,
+          disabled: r,
+          value: m,
+          defaultValue: a,
+          onInput: U,
+          "aria-invalid": y ? !0 : p,
+          "aria-describedby": q,
+          className: s(oe()),
+          ...M
+        }
+      ),
+      L && Q && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: W,
+          disabled: r,
+          tabIndex: r ? -1 : void 0,
+          "aria-label": h.input.clear,
+          className: S,
+          children: /* @__PURE__ */ e($, { className: "size-4", "aria-hidden": !0 })
+        }
+      ),
+      i === "password" && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => C((t) => !t),
+          disabled: r,
+          tabIndex: r ? -1 : void 0,
+          "aria-label": d ? h.input.hidePassword : h.input.showPassword,
+          "aria-pressed": d,
+          className: S,
+          children: d ? /* @__PURE__ */ e(ee, { className: "size-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(te, { className: "size-4", "aria-hidden": !0 })
+        }
+      ),
+      w && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: w })
+    ] }),
+    o ? /* @__PURE__ */ e("p", { id: X, className: "text-danger-text text-xs", children: o }) : l ? /* @__PURE__ */ e("p", { id: V, className: "text-foreground-subtle text-xs", children: l }) : null
+  ] });
+});
+ae.displayName = "Input";
+export {
+  ae as Input
+};
+//# sourceMappingURL=Input.js.map

package/dist-lib/components/ui/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/ui/Input.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useRef,\n  useState,\n  type ComponentProps,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { Eye, EyeOff, Search, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cva, type VariantProps } from '@/lib/cva';\nimport { useFieldIds } from '@/hooks/use-field-ids';\n\n/* -----------------------------------------------------------------------------\n *  Field-shell variants. The inner <input> is unstyled background and gets all\n *  its visual treatment from this wrapper so prefix / suffix / clear slots\n *  share the same border + focus state with no double rings.\n * --------------------------------------------------------------------------- */\nconst field = cva(\n  [\n    'group inline-flex items-center w-full',\n    'rounded-md border border-border-input bg-card text-sm',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'has-disabled:opacity-50 has-disabled:pointer-events-none',\n    'focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-background',\n    // Invalid state comes from the input's aria-invalid so Form wiring needs no extra prop.\n    'has-aria-invalid:border-danger has-aria-invalid:focus-within:border-danger has-aria-invalid:focus-within:ring-danger',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-8 px-2.5 gap-1.5',\n        md: 'h-9 px-3 gap-2',\n        lg: 'h-10 px-3.5 gap-2',\n      },\n      tone: {\n        default: 'focus-within:border-accent focus-within:ring-ring',\n        error: 'border-danger focus-within:border-danger focus-within:ring-danger',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      tone: 'default',\n    },\n  },\n);\n\nconst innerInput = cva([\n  'flex-1 min-w-0 bg-transparent outline-none',\n  // Fill the field's height so the focusable target is the full control\n  // (32/36/40px), not the ~20px text box. Below 24px axe's target-size\n  // rule only passes while nothing sits close by, which is a trap for\n  // consumers packing a toolbar.\n  'self-stretch',\n  'placeholder:text-foreground-subtle',\n  'text-foreground',\n  // 16px below md so iOS Safari does not zoom the page on focus; --text-lg = 1rem.\n  'text-lg md:text-sm',\n  'disabled:cursor-not-allowed',\n  // `type=\"search\"` draws a native clear button in WebKit/Chromium. We render\n  // our own via `clearable`, so suppress the native one or both show at once.\n  '[&::-webkit-search-cancel-button]:appearance-none',\n  '[&::-webkit-search-decoration]:appearance-none',\n]);\n\ntype InputType = NonNullable<InputHTMLAttributes<HTMLInputElement>['type']>;\n\n// Inline clear / password buttons: 24px box (WCAG 2.5.8 minimum) with a halo\n// that extends the hit area without growing the field.\nconst innerButton = cn(\n  'text-foreground-subtle hover:text-foreground relative -m-1 flex size-6 shrink-0 items-center justify-center rounded-sm',\n  'before:absolute before:-inset-0.5 before:content-[\"\"]',\n  'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n  'disabled:pointer-events-none',\n);\n\nexport interface InputProps\n  extends\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'value'>,\n    VariantProps<typeof field> {\n  /** Controlled value. `null` is treated as an empty controlled value (no React warning). */\n  value?: InputHTMLAttributes<HTMLInputElement>['value'] | null;\n  /** Field type. `password` enables a show/hide toggle; `search` adds a clear button. */\n  type?: InputType;\n  /** Visible label rendered above the input. */\n  label?: ReactNode;\n  /** Hint below the input. Hidden while `error` is set. */\n  helperText?: ReactNode;\n  /** Validation message. Renders in `danger` colour and sets `aria-invalid`. */\n  error?: ReactNode;\n  /** Content rendered inside the field, before the input — icon or short text. */\n  prefix?: ReactNode;\n  /** Content rendered inside the field, after the input. */\n  suffix?: ReactNode;\n  /** Show an inline clear (×) button when the input has a value. */\n  clearable?: boolean;\n  /**\n   * Fires when the clear button is pressed. Controlled inputs own their state\n   * and should reset `value` here; uncontrolled inputs are cleared for you.\n   */\n  onClear?: () => void;\n  /** Visually conceal the label while keeping it for screen readers. */\n  hideLabel?: boolean;\n}\n\n/**\n * Text-style input with optional label, helper / error, prefix / suffix,\n * clear, and password show-hide. Wraps a single native `<input>` so it works\n * with `react-hook-form` and any controlled / uncontrolled pattern.\n *\n * @example Email with helper\n *   <Input type=\"email\" label=\"Work email\" helperText=\"We never share this.\" />\n *\n * @example Password with show/hide\n *   <Input type=\"password\" label=\"Password\" autoComplete=\"current-password\" />\n *\n * @example Search with clear\n *   <Input type=\"search\" placeholder=\"Search…\" value={q} onChange={…}\n *          clearable onClear={() => setQ('')} />\n *\n * @do Always pair an input with a visible label. If space forces hiding it,\n *      use `hideLabel` so the label stays in the accessibility tree.\n * @dont Use placeholder as the only label — placeholders disappear on input\n *       and fail accessibility.\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    className,\n    type = 'text',\n    size,\n    tone,\n    label,\n    helperText,\n    error,\n    prefix,\n    suffix,\n    clearable,\n    onClear,\n    hideLabel,\n    id,\n    disabled,\n    value: valueProp,\n    defaultValue,\n    onInput,\n    'aria-describedby': ariaDescribedby,\n    'aria-invalid': ariaInvalid,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const isError = Boolean(error) || ariaInvalid === true || ariaInvalid === 'true';\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: Boolean(error),\n    extra: ariaDescribedby,\n  });\n  // `null` (nullable form state) is a controlled empty value, not \"uncontrolled\".\n  const value = valueProp === null ? '' : valueProp;\n  const innerRef = useRef<HTMLInputElement | null>(null);\n  const setRefs = (el: HTMLInputElement | null) => {\n    innerRef.current = el;\n    if (typeof ref === 'function') ref(el);\n    else if (ref) ref.current = el;\n  };\n\n  const [showPassword, setShowPassword] = useState(false);\n  const effectiveType = type === 'password' ? (showPassword ? 'text' : 'password') : type;\n\n  const effectiveTone = isError ? 'error' : tone;\n\n  // Pre-fill prefix slot for search type.\n  const renderedPrefix =\n    prefix ??\n    (type === 'search' ? <Search className=\"text-foreground-subtle size-4\" aria-hidden /> : null);\n\n  // Track the value of uncontrolled inputs so `clearable` can show/hide the\n  // button without the consumer wiring state.\n  const isControlled = value !== undefined;\n  const [localValue, setLocalValue] = useState<string>(\n    defaultValue === undefined || defaultValue === null ? '' : String(defaultValue),\n  );\n  const current = isControlled ? value : localValue;\n  const hasValue = current !== undefined && current !== '' && current !== null;\n\n  // React 19 types `onInput` as `InputEventHandler`; `ComponentProps` keeps this portable.\n  const handleInput: NonNullable<ComponentProps<'input'>['onInput']> = (e) => {\n    if (!isControlled) setLocalValue(e.currentTarget.value);\n    onInput?.(e);\n  };\n\n  const handleClear = () => {\n    if (!isControlled && innerRef.current) {\n      // Use the native setter so React's onChange/onInput listeners fire.\n      const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n      setter?.call(innerRef.current, '');\n      innerRef.current.dispatchEvent(new Event('input', { bubbles: true }));\n      setLocalValue('');\n    }\n    onClear?.();\n    innerRef.current?.focus();\n  };\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      {label && (\n        <label\n          htmlFor={fieldId}\n          className={cn('text-foreground text-sm font-medium', hideLabel && 'sr-only')}\n        >\n          {label}\n        </label>\n      )}\n\n      <div className={cn(field({ size, tone: effectiveTone }))}>\n        {renderedPrefix && (\n          <span className=\"text-foreground-subtle flex items-center [&_svg]:size-4\">\n            {renderedPrefix}\n          </span>\n        )}\n\n        <input\n          ref={setRefs}\n          id={fieldId}\n          type={effectiveType}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onInput={handleInput}\n          aria-invalid={isError ? true : ariaInvalid}\n          aria-describedby={describedBy}\n          className={cn(innerInput())}\n          {...props}\n        />\n\n        {clearable && hasValue && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            disabled={disabled}\n            tabIndex={disabled ? -1 : undefined}\n            aria-label={strings.input.clear}\n            className={innerButton}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </button>\n        )}\n\n        {type === 'password' && (\n          <button\n            type=\"button\"\n            onClick={() => setShowPassword((p) => !p)}\n            disabled={disabled}\n            tabIndex={disabled ? -1 : undefined}\n            aria-label={showPassword ? strings.input.hidePassword : strings.input.showPassword}\n            aria-pressed={showPassword}\n            className={innerButton}\n          >\n            {showPassword ? (\n              <EyeOff className=\"size-4\" aria-hidden />\n            ) : (\n              <Eye className=\"size-4\" aria-hidden />\n            )}\n          </button>\n        )}\n\n        {suffix && (\n          <span className=\"text-foreground-subtle flex items-center [&_svg]:size-4\">{suffix}</span>\n        )}\n      </div>\n\n      {error ? (\n        <p id={errorId} className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={helperId} className=\"text-foreground-subtle text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nInput.displayName = 'Input';\n"],"names":["field","cva","innerInput","innerButton","cn","Input","forwardRef","className","type","size","tone","label","helperText","error","prefix","suffix","clearable","onClear","hideLabel","id","disabled","valueProp","defaultValue","onInput","ariaDescribedby","ariaInvalid","props","ref","strings","useStrings","isError","fieldId","helperId","errorId","describedBy","useFieldIds","value","innerRef","useRef","setRefs","el","showPassword","setShowPassword","useState","effectiveType","effectiveTone","renderedPrefix","jsx","Search","isControlled","localValue","setLocalValue","current","hasValue","handleInput","e","handleClear","setter","_a","_b","jsxs","X","p","EyeOff","Eye"],"mappings":"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"}

package/dist-lib/components/ui/Kbd.d.ts

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** Visual size — match the surrounding text. */
+    size?: 'sm' | 'md';
+}
+/**
+ * Stylised keyboard shortcut indicator. Compose multiple `<Kbd>` for chords.
+ *
+ * @example
+ *   Press <Kbd>⌘</Kbd>+<Kbd>K</Kbd> to open the command palette.
+ *
+ * @do Use OS-conventional symbols (⌘ ⇧ ⌥ ⌃ ⏎) — keep visuals consistent
+ *      across the app.
+ * @dont Use Kbd for clickable buttons — it implies a real keyboard input.
+ */
+export declare const Kbd: import('react').ForwardRefExoticComponent<KbdProps & import('react').RefAttributes<HTMLElement>>;

package/dist-lib/components/ui/Kbd.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { cn as s } from "../../lib/utils.js";
+const d = m(function({ size: e = "sm", className: r, ...o }, t) {
+  return /* @__PURE__ */ n(
+    "kbd",
+    {
+      ref: t,
+      className: s(
+        "border-border bg-background-subtle inline-flex items-center justify-center rounded-sm border font-mono",
+        "text-foreground-muted shadow-xs",
+        e === "sm" ? "h-5 min-w-5 px-1 text-xs" : "h-6 min-w-6 px-1.5 text-xs",
+        r
+      ),
+      ...o
+    }
+  );
+});
+d.displayName = "Kbd";
+export {
+  d as Kbd
+};
+//# sourceMappingURL=Kbd.js.map