@pautena/react-design-system 2.0.0-alpha.1b → 2.0.0-alpha.4

package/dist/components/drawerx/drawer.types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.types.mjs","sources":["../../../src/components/drawerx/drawer.types.ts"],"sourcesContent":["import type {\n  ComponentType,\n  CSSProperties,\n  HTMLAttributes,\n  PropsWithChildren,\n  ReactElement,\n} from \"react\";\nimport type { BadgeVariant } from \"@/components/badge\";\nimport type { BulletVariant } from \"@/components/bullet\";\n\n/**\n * Drawer states.\n * - open: expanded drawer with labels\n * - close: mini drawer with icons only\n */\nexport type DrawerState = \"open\" | \"close\";\n\n/**\n * Drawer size variants.\n */\nexport type DrawerSize = \"small\" | \"medium\";\n\n/**\n * Avatar configuration for drawer items.\n */\nexport interface DrawerItemAvatar {\n  /**\n   * Avatar image source URL.\n   */\n  src: string;\n  /**\n   * Alt text for the avatar image.\n   */\n  alt: string;\n}\n\n/**\n * Label configuration for drawer items.\n */\nexport interface DrawerItemLabel {\n  /**\n   * Label text content.\n   */\n  text: string;\n  /**\n   * Label color variant.\n   */\n  variant: BadgeVariant;\n}\n\n/**\n * Bullet indicator configuration for drawer items.\n */\nexport interface DrawerItemBullet {\n  /**\n   * Bullet color variant.\n   */\n  variant: BulletVariant;\n}\n\n/**\n * Navigation link item in the drawer.\n */\nexport interface DrawerNavigationLink {\n  /**\n   * Item type discriminator.\n   */\n  kind: \"link\";\n  /**\n   * Unique identifier.\n   */\n  id: string;\n  /**\n   * Display text.\n   */\n  text: string;\n  /**\n   * Navigation URL.\n   */\n  href: string;\n  /**\n   * Optional icon element.\n   */\n  icon?: ReactElement;\n  /**\n   * Optional avatar configuration.\n   */\n  avatar?: DrawerItemAvatar;\n  /**\n   * Optional label badge.\n   */\n  label?: DrawerItemLabel;\n  /**\n   * Optional bullet indicator.\n   */\n  bullet?: DrawerItemBullet;\n}\n\n/**\n * Collapsible navigation group with nested items.\n */\nexport type DrawerNavigationCollapsable = Pick<\n  DrawerNavigationLink,\n  \"id\" | \"text\" | \"icon\"\n> & {\n  /**\n   * Item type discriminator.\n   */\n  kind: \"collapsable\";\n  /**\n   * Nested navigation items.\n   */\n  items: DrawerNavigationItem[];\n};\n\n/**\n * Section header in the drawer navigation.\n */\nexport interface DrawerNavigationHeader {\n  /**\n   * Item type discriminator.\n   */\n  kind: \"header\";\n  /**\n   * Unique identifier.\n   */\n  id: string;\n  /**\n   * Header text.\n   */\n  text: string;\n}\n\n/**\n * Union of all possible drawer navigation item types.\n */\nexport type DrawerNavigationItem =\n  | DrawerNavigationLink\n  | DrawerNavigationCollapsable\n  | DrawerNavigationHeader;\n\n/**\n * Complete navigation structure for the drawer.\n */\nexport type DrawerNavigation = DrawerNavigationItem[];\n\n/**\n * Props for DrawerContent.\n */\nexport interface DrawerContentProps {\n  /**\n   * Navigation items to render.\n   */\n  navigation: DrawerNavigation;\n}\n\n/**\n * Props for Drawer component.\n */\nexport type DrawerProps = PropsWithChildren<HTMLAttributes<HTMLElement>>;\n\n/**\n * Shared item colors returned from drawer selection state.\n */\nexport const getDrawerItemColors = (\n  selected: boolean | undefined,\n): {\n  colorClass: string;\n  fontWeight: CSSProperties[\"fontWeight\"];\n} => ({\n  colorClass: selected ? \"text-primary\" : \"text-foreground\",\n  fontWeight: selected ? 700 : 500,\n});\n\n/**\n * Props for DrawerAppBar.\n */\nexport interface DrawerAppBarProps\n  extends PropsWithChildren<HTMLAttributes<HTMLElement>> {\n  /**\n   * Title to display in the app bar.\n   */\n  title?: string;\n}\n\n/**\n * Props for DrawerProvider.\n */\nexport interface DrawerProviderProps extends PropsWithChildren {\n  /**\n   * Initial state of the drawer.\n   */\n  initialState?: DrawerState;\n  /**\n   * Size of the drawer.\n   * @default \"medium\"\n   */\n  size?: DrawerSize;\n  /**\n   * Whether the drawer is clipped under the app bar.\n   * @default true\n   */\n  clipped?: boolean;\n  /**\n   * Width of the drawer in pixels.\n   */\n  drawerWidth?: number;\n  /**\n   * ID of currently selected navigation item.\n   */\n  selectedItemId?: string;\n  /**\n   * Component used to render links.\n   * @default \"a\"\n   */\n  LinkComponent?: ComponentType<any> | string;\n  /**\n   * Callback fired when drawer state changes.\n   * @param newState - The new drawer state.\n   */\n  onStateChange?: (newState: DrawerState) => void;\n}\n"],"names":["getDrawerItemColors","selected"],"mappings":"AAoKO,MAAMA,IAAsB,CACjCC,OAII;AAAA,EACJ,YAAYA,IAAW,iBAAiB;AAAA,EACxC,YAAYA,IAAW,MAAM;AAC/B;"}

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

@@ -0,0 +1,10 @@
+export { default as Drawer } from '../drawer';
+export type { DrawerAppBarProps } from '../drawer-app-bar';
+export { default as DrawerAppBar } from '../drawer-app-bar';
+export { default as DrawerContent } from '../drawer-content';
+export * from '../drawer-context';
+export type { DrawerMainProps } from '../drawer-main';
+export { default as DrawerMain } from '../drawer-main';
+export type { DrawerSubheaderProps } from '../drawer-subheader';
+export { default as DrawerSubheader } from '../drawer-subheader';
+export * from './drawer.types';

package/dist/components/expandable-alert/expandable-alert.d.ts

@@ -0,0 +1,47 @@
+import { ReactElement, ReactNode } from 'react';
+/**
+ * Supported alert severity levels.
+ */
+export type AlertSeverity = "success" | "info" | "warning" | "error";
+/**
+ * Props for the ExpandableAlert component.
+ */
+export interface ExpandableAlertProps {
+    /**
+     * Alert severity level.
+     */
+    severity: AlertSeverity;
+    /**
+     * Custom icon mapping for different severity levels.
+     */
+    iconMapping?: Partial<Record<AlertSeverity, ReactNode>>;
+    /**
+     * Alert title.
+     */
+    title?: string;
+    /**
+     * Alert message content.
+     */
+    message: string;
+    /**
+     * Additional metadata to display in expandable section.
+     */
+    metadata?: string | string[];
+    /**
+     * Custom component to render in expandable section.
+     */
+    metadataComponent?: ReactElement;
+    /**
+     * Callback when alert is closed.
+     */
+    onClose: () => void;
+    /**
+     * Additional class names for the alert container.
+     */
+    className?: string;
+}
+/**
+ * Alert component with expandable metadata section.
+ */
+export declare function ExpandableAlert({ severity, iconMapping, title, message, metadata, metadataComponent, onClose, className, }: ExpandableAlertProps): import("react/jsx-runtime").JSX.Element;
+export default ExpandableAlert;

package/dist/components/expandable-alert/expandable-alert.mjs

@@ -0,0 +1,77 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { Board as C } from "../board/board.mjs";
+import { Button as t } from "../button/button.mjs";
+import { Alert as N, AlertTitle as w, AlertDescription as x, AlertAction as b } from "../ui/alert.mjs";
+import { Collapsible as A, CollapsibleContent as g } from "../ui/collapsible.mjs";
+import { cn as v } from "../../lib/utils.mjs";
+import k from "../../node_modules/lucide-react/dist/esm/icons/x.mjs";
+import j from "../../node_modules/lucide-react/dist/esm/icons/chevron-up.mjs";
+import z from "../../node_modules/lucide-react/dist/esm/icons/chevron-down.mjs";
+import B from "../../node_modules/lucide-react/dist/esm/icons/circle-x.mjs";
+import D from "../../node_modules/lucide-react/dist/esm/icons/triangle-alert.mjs";
+import E from "../../node_modules/lucide-react/dist/esm/icons/info.mjs";
+import I from "../../node_modules/lucide-react/dist/esm/icons/circle-check.mjs";
+const T = {
+  success: /* @__PURE__ */ e(I, { className: "h-4 w-4", "aria-hidden": "true" }),
+  info: /* @__PURE__ */ e(E, { className: "h-4 w-4", "aria-hidden": "true" }),
+  warning: /* @__PURE__ */ e(D, { className: "h-4 w-4", "aria-hidden": "true" }),
+  error: /* @__PURE__ */ e(B, { className: "h-4 w-4", "aria-hidden": "true" })
+};
+function Q({
+  severity: a,
+  iconMapping: s,
+  title: n,
+  message: c,
+  metadata: i,
+  metadataComponent: m,
+  onClose: d,
+  className: h
+}) {
+  const [r, o] = u(!1), p = s?.[a] ?? T[a];
+  return /* @__PURE__ */ l(
+    N,
+    {
+      variant: a === "error" ? "destructive" : "default",
+      className: v(h),
+      children: [
+        p,
+        /* @__PURE__ */ l("div", { className: "w-full space-y-2", children: [
+          n ? /* @__PURE__ */ e(w, { children: n }) : null,
+          /* @__PURE__ */ e(x, { children: c }),
+          i ? /* @__PURE__ */ e(A, { open: r, onOpenChange: o, children: /* @__PURE__ */ e(g, { className: "mt-3", children: /* @__PURE__ */ e(C, { content: i, children: m }) }) }) : null
+        ] }),
+        /* @__PURE__ */ e(b, { children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ e(
+            t,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": "close alert",
+              onClick: d,
+              children: /* @__PURE__ */ e(k, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          ),
+          i ? /* @__PURE__ */ e(
+            t,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon-sm",
+              "aria-label": r ? "collapse metadata" : "expand metadata",
+              "aria-expanded": r,
+              onClick: () => o((f) => !f),
+              children: r ? /* @__PURE__ */ e(j, { className: "h-4 w-4", "aria-hidden": "true" }) : /* @__PURE__ */ e(z, { className: "h-4 w-4", "aria-hidden": "true" })
+            }
+          ) : null
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  Q as ExpandableAlert,
+  Q as default
+};
+//# sourceMappingURL=expandable-alert.mjs.map

package/dist/components/expandable-alert/expandable-alert.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"expandable-alert.mjs","sources":["../../../src/components/expandable-alert/expandable-alert.tsx"],"sourcesContent":["import {\n  AlertTriangle,\n  CheckCircle2,\n  ChevronDown,\n  ChevronUp,\n  Info,\n  X,\n  XCircle,\n} from \"lucide-react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useState } from \"react\";\nimport Board from \"@/components/board\";\nimport Button from \"@/components/button\";\nimport {\n  Alert,\n  AlertAction,\n  AlertDescription,\n  AlertTitle,\n} from \"@/components/ui/alert\";\nimport { Collapsible, CollapsibleContent } from \"@/components/ui/collapsible\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported alert severity levels.\n */\nexport type AlertSeverity = \"success\" | \"info\" | \"warning\" | \"error\";\n\n/**\n * Props for the ExpandableAlert component.\n */\nexport interface ExpandableAlertProps {\n  /**\n   * Alert severity level.\n   */\n  severity: AlertSeverity;\n  /**\n   * Custom icon mapping for different severity levels.\n   */\n  iconMapping?: Partial<Record<AlertSeverity, ReactNode>>;\n  /**\n   * Alert title.\n   */\n  title?: string;\n  /**\n   * Alert message content.\n   */\n  message: string;\n  /**\n   * Additional metadata to display in expandable section.\n   */\n  metadata?: string | string[];\n  /**\n   * Custom component to render in expandable section.\n   */\n  metadataComponent?: ReactElement;\n  /**\n   * Callback when alert is closed.\n   */\n  onClose: () => void;\n  /**\n   * Additional class names for the alert container.\n   */\n  className?: string;\n}\n\nconst defaultIcons: Record<AlertSeverity, ReactNode> = {\n  success: <CheckCircle2 className=\"h-4 w-4\" aria-hidden=\"true\" />,\n  info: <Info className=\"h-4 w-4\" aria-hidden=\"true\" />,\n  warning: <AlertTriangle className=\"h-4 w-4\" aria-hidden=\"true\" />,\n  error: <XCircle className=\"h-4 w-4\" aria-hidden=\"true\" />,\n};\n\n/**\n * Alert component with expandable metadata section.\n */\nexport function ExpandableAlert({\n  severity,\n  iconMapping,\n  title,\n  message,\n  metadata,\n  metadataComponent,\n  onClose,\n  className,\n}: ExpandableAlertProps) {\n  const [expanded, setExpanded] = useState(false);\n  const icon = iconMapping?.[severity] ?? defaultIcons[severity];\n\n  return (\n    <Alert\n      variant={severity === \"error\" ? \"destructive\" : \"default\"}\n      className={cn(className)}\n    >\n      {icon}\n      <div className=\"w-full space-y-2\">\n        {title ? <AlertTitle>{title}</AlertTitle> : null}\n        <AlertDescription>{message}</AlertDescription>\n        {metadata ? (\n          <Collapsible open={expanded} onOpenChange={setExpanded}>\n            <CollapsibleContent className=\"mt-3\">\n              <Board content={metadata}>{metadataComponent}</Board>\n            </CollapsibleContent>\n          </Collapsible>\n        ) : null}\n      </div>\n      <AlertAction>\n        <div className=\"flex flex-col gap-1\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"close alert\"\n            onClick={onClose}\n          >\n            <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n          </Button>\n          {metadata ? (\n            <Button\n              type=\"button\"\n              variant=\"ghost\"\n              size=\"icon-sm\"\n              aria-label={expanded ? \"collapse metadata\" : \"expand metadata\"}\n              aria-expanded={expanded}\n              onClick={() => setExpanded((value) => !value)}\n            >\n              {expanded ? (\n                <ChevronUp className=\"h-4 w-4\" aria-hidden=\"true\" />\n              ) : (\n                <ChevronDown className=\"h-4 w-4\" aria-hidden=\"true\" />\n              )}\n            </Button>\n          ) : null}\n        </div>\n      </AlertAction>\n    </Alert>\n  );\n}\n\nexport default ExpandableAlert;\n"],"names":["defaultIcons","jsx","CheckCircle2","Info","AlertTriangle","XCircle","ExpandableAlert","severity","iconMapping","title","message","metadata","metadataComponent","onClose","className","expanded","setExpanded","useState","icon","jsxs","Alert","cn","AlertTitle","AlertDescription","Collapsible","CollapsibleContent","Board","AlertAction","Button","X","value","ChevronUp","ChevronDown"],"mappings":";;;;;;;;;;;;;;AAiEA,MAAMA,IAAiD;AAAA,EACrD,SAAS,gBAAAC,EAACC,GAAA,EAAa,WAAU,WAAU,eAAY,QAAO;AAAA,EAC9D,MAAM,gBAAAD,EAACE,GAAA,EAAK,WAAU,WAAU,eAAY,QAAO;AAAA,EACnD,SAAS,gBAAAF,EAACG,GAAA,EAAc,WAAU,WAAU,eAAY,QAAO;AAAA,EAC/D,OAAO,gBAAAH,EAACI,GAAA,EAAQ,WAAU,WAAU,eAAY,OAAA,CAAO;AACzD;AAKO,SAASC,EAAgB;AAAA,EAC9B,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AACF,GAAyB;AACvB,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,EAAK,GACxCC,IAAOV,IAAcD,CAAQ,KAAKP,EAAaO,CAAQ;AAE7D,SACE,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASb,MAAa,UAAU,gBAAgB;AAAA,MAChD,WAAWc,EAAGP,CAAS;AAAA,MAEtB,UAAA;AAAA,QAAAI;AAAA,QACD,gBAAAC,EAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,UAAAV,IAAQ,gBAAAR,EAACqB,GAAA,EAAY,UAAAb,EAAA,CAAM,IAAgB;AAAA,UAC5C,gBAAAR,EAACsB,KAAkB,UAAAb,EAAA,CAAQ;AAAA,UAC1BC,IACC,gBAAAV,EAACuB,GAAA,EAAY,MAAMT,GAAU,cAAcC,GACzC,UAAA,gBAAAf,EAACwB,GAAA,EAAmB,WAAU,QAC5B,4BAACC,GAAA,EAAM,SAASf,GAAW,UAAAC,EAAA,CAAkB,EAAA,CAC/C,GACF,IACE;AAAA,QAAA,GACN;AAAA,QACA,gBAAAX,EAAC0B,GAAA,EACC,UAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAA,gBAAAlB;AAAA,YAAC2B;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,cAAW;AAAA,cACX,SAASf;AAAA,cAET,UAAA,gBAAAZ,EAAC4B,GAAA,EAAE,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UAE3ClB,IACC,gBAAAV;AAAA,YAAC2B;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,cAAYb,IAAW,sBAAsB;AAAA,cAC7C,iBAAeA;AAAA,cACf,SAAS,MAAMC,EAAY,CAACc,MAAU,CAACA,CAAK;AAAA,cAE3C,UAAAf,IACC,gBAAAd,EAAC8B,GAAA,EAAU,WAAU,WAAU,eAAY,OAAA,CAAO,IAElD,gBAAA9B,EAAC+B,GAAA,EAAY,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,YAAA;AAAA,UAAA,IAGtD;AAAA,QAAA,EAAA,CACN,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/expandable-alert/index.d.ts

@@ -0,0 +1,2 @@
+export type { AlertSeverity, ExpandableAlertProps } from './expandable-alert';
+export { default, default as ExpandableAlert } from './expandable-alert';

package/dist/components/form-dialog/form-dialog.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+import { DialogSize } from '../dialog';
+/**
+ * Props for the FormDialog component.
+ *
+ * @template T - The type of data returned from the form.
+ */
+export interface FormDialogProps<T> {
+    /**
+     * Whether the dialog is open.
+     */
+    open: boolean;
+    /**
+     * The title of the dialog.
+     */
+    title: ReactNode;
+    /**
+     * Optional description rendered under the title.
+     */
+    description?: ReactNode;
+    /**
+     * Whether the dialog is in a loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether the dialog is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the submit button is disabled.
+     * @default false
+     */
+    disableAccept?: boolean;
+    /**
+     * Whether the cancel button is disabled.
+     * @default false
+     */
+    disableCancel?: boolean;
+    /**
+     * The text to display on the submit button.
+     * @default "Submit"
+     */
+    submitText?: string;
+    /**
+     * The text to display on the cancel button.
+     * @default "Cancel"
+     */
+    cancelText?: string;
+    /**
+     * Size variant for the dialog content.
+     * @default "md"
+     */
+    size?: DialogSize;
+    /**
+     * Additional class names for the dialog content.
+     */
+    className?: string;
+    /**
+     * Content rendered inside the form.
+     */
+    children?: ReactNode;
+    /**
+     * Callback function to be called when the cancel button is clicked.
+     */
+    onCancel: () => void;
+    /**
+     * Callback function to be called when the submit button is clicked.
+     * @param data - The data to be submitted.
+     */
+    onSubmit: (data: T) => void;
+}
+/**
+ * Form dialog wrapper with submit handling.
+ */
+export declare function FormDialog<T>({ open, title, description, loading, disabled, disableAccept, disableCancel, submitText, cancelText, size, className, children, onSubmit, onCancel, }: FormDialogProps<T>): import("react/jsx-runtime").JSX.Element;
+export default FormDialog;

package/dist/components/form-dialog/form-dialog.mjs

@@ -0,0 +1,93 @@
+import { jsx as e, jsxs as s, Fragment as x } from "react/jsx-runtime";
+import { useId as y } from "react";
+import { Button as l } from "../button/button.mjs";
+import { Dialog as C } from "../dialog/dialog.mjs";
+import { getFormData as w } from "../../utils/forms.mjs";
+import c from "../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+import v from "../../node_modules/lucide-react/dist/esm/icons/x.mjs";
+function H({
+  open: m,
+  title: d,
+  description: f,
+  loading: t = !1,
+  disabled: a = !1,
+  disableAccept: p = !1,
+  disableCancel: u = !1,
+  submitText: r = "Submit",
+  cancelText: h = "Cancel",
+  size: b = "md",
+  className: D,
+  children: N,
+  onSubmit: g,
+  onCancel: i
+}) {
+  const o = y();
+  return /* @__PURE__ */ e(
+    C,
+    {
+      open: m,
+      title: /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { children: d }),
+          t ? /* @__PURE__ */ e(
+            c,
+            {
+              role: "progressbar",
+              "aria-label": "loading",
+              className: "h-4 w-4 animate-spin text-muted-foreground"
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon-sm",
+            "aria-label": "close",
+            disabled: a || t,
+            onClick: i,
+            children: /* @__PURE__ */ e(v, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )
+      ] }),
+      description: f,
+      size: b,
+      className: D,
+      showCloseButton: !1,
+      footer: /* @__PURE__ */ s(x, { children: [
+        /* @__PURE__ */ e(
+          l,
+          {
+            type: "button",
+            variant: "outline",
+            disabled: a || t || u,
+            onClick: i,
+            children: h
+          }
+        ),
+        /* @__PURE__ */ e(
+          l,
+          {
+            type: "submit",
+            form: o,
+            disabled: a || t || p,
+            children: t ? /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ e(c, { className: "h-4 w-4 animate-spin", "aria-hidden": "true" }),
+              r
+            ] }) : r
+          }
+        )
+      ] }),
+      onClose: i,
+      children: /* @__PURE__ */ e("form", { id: o, onSubmit: (n) => {
+        n.preventDefault(), g(w(n));
+      }, className: "space-y-4", children: /* @__PURE__ */ e("fieldset", { disabled: t || a, className: "space-y-4", children: N }) })
+    }
+  );
+}
+export {
+  H as FormDialog,
+  H as default
+};
+//# sourceMappingURL=form-dialog.mjs.map

package/dist/components/form-dialog/form-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-dialog.mjs","sources":["../../../src/components/form-dialog/form-dialog.tsx"],"sourcesContent":["import { Loader2, X } from \"lucide-react\";\nimport type { FormEvent, ReactNode } from \"react\";\nimport { useId } from \"react\";\nimport Button from \"@/components/button\";\nimport Dialog, { type DialogSize } from \"@/components/dialog\";\nimport { getFormData } from \"@/utils/forms\";\n\n/**\n * Props for the FormDialog component.\n *\n * @template T - The type of data returned from the form.\n */\nexport interface FormDialogProps<T> {\n  /**\n   * Whether the dialog is open.\n   */\n  open: boolean;\n  /**\n   * The title of the dialog.\n   */\n  title: ReactNode;\n  /**\n   * Optional description rendered under the title.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the dialog is in a loading state.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Whether the dialog is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the submit button is disabled.\n   * @default false\n   */\n  disableAccept?: boolean;\n  /**\n   * Whether the cancel button is disabled.\n   * @default false\n   */\n  disableCancel?: boolean;\n  /**\n   * The text to display on the submit button.\n   * @default \"Submit\"\n   */\n  submitText?: string;\n  /**\n   * The text to display on the cancel button.\n   * @default \"Cancel\"\n   */\n  cancelText?: string;\n  /**\n   * Size variant for the dialog content.\n   * @default \"md\"\n   */\n  size?: DialogSize;\n  /**\n   * Additional class names for the dialog content.\n   */\n  className?: string;\n  /**\n   * Content rendered inside the form.\n   */\n  children?: ReactNode;\n  /**\n   * Callback function to be called when the cancel button is clicked.\n   */\n  onCancel: () => void;\n  /**\n   * Callback function to be called when the submit button is clicked.\n   * @param data - The data to be submitted.\n   */\n  onSubmit: (data: T) => void;\n}\n\n/**\n * Form dialog wrapper with submit handling.\n */\nexport function FormDialog<T>({\n  open,\n  title,\n  description,\n  loading = false,\n  disabled = false,\n  disableAccept = false,\n  disableCancel = false,\n  submitText = \"Submit\",\n  cancelText = \"Cancel\",\n  size = \"md\",\n  className,\n  children,\n  onSubmit,\n  onCancel,\n}: FormDialogProps<T>) {\n  const formId = useId();\n  const closeDisabled = disabled || loading;\n  const cancelDisabled = disabled || loading;\n  const acceptDisabled = disabled || loading;\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    onSubmit(getFormData<T>(event));\n  };\n\n  const titleContent = (\n    <div className=\"flex items-start justify-between gap-4\">\n      <div className=\"flex items-center gap-2\">\n        <span>{title}</span>\n        {loading ? (\n          <Loader2\n            role=\"progressbar\"\n            aria-label=\"loading\"\n            className=\"h-4 w-4 animate-spin text-muted-foreground\"\n          />\n        ) : null}\n      </div>\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"icon-sm\"\n        aria-label=\"close\"\n        disabled={closeDisabled}\n        onClick={onCancel}\n      >\n        <X className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </Button>\n    </div>\n  );\n\n  const footer = (\n    <>\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        disabled={cancelDisabled || disableCancel}\n        onClick={onCancel}\n      >\n        {cancelText}\n      </Button>\n      <Button\n        type=\"submit\"\n        form={formId}\n        disabled={acceptDisabled || disableAccept}\n      >\n        {loading ? (\n          <span className=\"inline-flex items-center gap-2\">\n            <Loader2 className=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n            {submitText}\n          </span>\n        ) : (\n          submitText\n        )}\n      </Button>\n    </>\n  );\n\n  return (\n    <Dialog\n      open={open}\n      title={titleContent}\n      description={description}\n      size={size}\n      className={className}\n      showCloseButton={false}\n      footer={footer}\n      onClose={onCancel}\n    >\n      <form id={formId} onSubmit={handleSubmit} className=\"space-y-4\">\n        <fieldset disabled={loading || disabled} className=\"space-y-4\">\n          {children}\n        </fieldset>\n      </form>\n    </Dialog>\n  );\n}\n\nexport default FormDialog;\n"],"names":["FormDialog","open","title","description","loading","disabled","disableAccept","disableCancel","submitText","cancelText","size","className","children","onSubmit","onCancel","formId","useId","jsx","Dialog","jsxs","Loader2","Button","X","Fragment","event","getFormData"],"mappings":";;;;;;;AAkFO,SAASA,EAAc;AAAA,EAC5B,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,YAAAC,IAAa;AAAA,EACb,YAAAC,IAAa;AAAA,EACb,MAAAC,IAAO;AAAA,EACP,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAuB;AACrB,QAAMC,IAASC,EAAA;AA8Df,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAjB;AAAA,MACA,OAtDF,gBAAAkB,EAAC,OAAA,EAAI,WAAU,0CACb,UAAA;AAAA,QAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAA,gBAAAF,EAAC,UAAM,UAAAf,EAAA,CAAM;AAAA,UACZE,IACC,gBAAAa;AAAA,YAACG;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,WAAU;AAAA,YAAA;AAAA,UAAA,IAEV;AAAA,QAAA,GACN;AAAA,QACA,gBAAAH;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,cAAW;AAAA,YACX,UA1BgBhB,KAAYD;AAAA,YA2B5B,SAASU;AAAA,YAET,UAAA,gBAAAG,EAACK,GAAA,EAAE,WAAU,WAAU,eAAY,OAAA,CAAO;AAAA,UAAA;AAAA,QAAA;AAAA,MAC5C,GACF;AAAA,MAkCE,aAAAnB;AAAA,MACA,MAAAO;AAAA,MACA,WAAAC;AAAA,MACA,iBAAiB;AAAA,MACjB,QAlCF,gBAAAQ,EAAAI,GAAA,EACE,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,UAtCiBhB,KAAYD,KAsCDG;AAAA,YAC5B,SAASO;AAAA,YAER,UAAAL;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAQ;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAMN;AAAA,YACN,UA7CiBV,KAAYD,KA6CDE;AAAA,YAE3B,UAAAF,IACC,gBAAAe,EAAC,QAAA,EAAK,WAAU,kCACd,UAAA;AAAA,cAAA,gBAAAF,EAACG,GAAA,EAAQ,WAAU,wBAAuB,eAAY,QAAO;AAAA,cAC5DZ;AAAA,YAAA,EAAA,CACH,IAEAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAEJ,GACF;AAAA,MAYE,SAASM;AAAA,MAET,4BAAC,QAAA,EAAK,IAAIC,GAAQ,UApED,CAACS,MAAsC;AAC1D,QAAAA,EAAM,eAAA,GACNX,EAASY,EAAeD,CAAK,CAAC;AAAA,MAChC,GAiE8C,WAAU,aAClD,UAAA,gBAAAP,EAAC,YAAA,EAAS,UAAUb,KAAWC,GAAU,WAAU,aAChD,UAAAO,GACH,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/form-dialog/index.d.ts

@@ -0,0 +1,2 @@
+export type { FormDialogProps } from './form-dialog';
+export { default, default as FormDialog } from './form-dialog';

package/dist/components/forms/autocomplete/autocomplete.d.ts

@@ -0,0 +1,63 @@
+import { ChangeEvent, InputHTMLAttributes, MouseEvent, ReactNode } from 'react';
+/**
+ * Supported field sizes for Autocomplete.
+ */
+export type AutocompleteSize = "small" | "medium";
+/**
+ * Props for the Autocomplete component.
+ *
+ * @template T - Option type.
+ */
+export interface AutocompleteProps<T> extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value" | "defaultValue"> {
+    /**
+     * Label shown above the combobox.
+     */
+    label: string;
+    /**
+     * Available options.
+     */
+    options: T[];
+    /**
+     * Current selected option.
+     */
+    value?: T;
+    /**
+     * Helper text rendered below the field.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the field.
+     */
+    error?: ReactNode;
+    /**
+     * Input size variant.
+     * @default "medium"
+     */
+    size?: AutocompleteSize;
+    /**
+     * Optional accent color used for border and text.
+     */
+    color?: string;
+    /**
+     * Shows a spinner while options are loading.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Called when user selects a value.
+     * @param e - Input or option interaction event.
+     * @param value - Trimmed selected value label.
+     */
+    onChangeValue?: (e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>, value: string) => void;
+    /**
+     * Converts options into labels.
+     */
+    getOptionLabel?: (option: T) => string;
+}
+/**
+ * Searchable combobox with local option filtering.
+ *
+ * @template T - Option type.
+ */
+export declare function Autocomplete<T>({ id, label, options, value, helperText, error, size, color, loading, className, disabled, onChangeValue, getOptionLabel, "aria-invalid": ariaInvalid, ...props }: AutocompleteProps<T>): import("react/jsx-runtime").JSX.Element;
+export default Autocomplete;

package/dist/components/forms/autocomplete/autocomplete.mjs

@@ -0,0 +1,117 @@
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { useState as C, useEffect as j, useMemo as K } from "react";
+import { Field as O, FieldLabel as q, FieldDescription as z, FieldError as A } from "../../ui/field.mjs";
+import { Input as B } from "../../ui/input.mjs";
+import { cn as F } from "../../../lib/utils.mjs";
+import M from "../../../node_modules/lucide-react/dist/esm/icons/loader-circle.mjs";
+function U({
+  id: N,
+  label: p,
+  options: f,
+  value: r,
+  helperText: b,
+  error: d,
+  size: L = "medium",
+  color: u,
+  loading: h = !1,
+  className: $,
+  disabled: x,
+  onChangeValue: v,
+  getOptionLabel: k,
+  "aria-invalid": E,
+  ...D
+}) {
+  const a = (e) => k?.(e) ?? String(e), [g, l] = C(!1), [i, m] = C(r ? a(r) : "");
+  j(() => {
+    r !== void 0 && m(a(r));
+  }, [r]);
+  const w = K(() => {
+    const e = i.toLowerCase();
+    return f.filter(
+      (n) => a(n).toLowerCase().includes(e)
+    );
+  }, [i, f]), s = N ?? `${p}-autocomplete`, c = !!d, I = (e, n) => {
+    const o = a(n);
+    m(o), l(!1), v?.(e, o.trim());
+  }, S = (e) => {
+    e.key === "Escape" && l(!1);
+  };
+  return /* @__PURE__ */ y(
+    O,
+    {
+      "data-invalid": c || void 0,
+      className: F("gap-1.5", $),
+      children: [
+        /* @__PURE__ */ t(q, { htmlFor: s, children: p }),
+        /* @__PURE__ */ y("div", { className: "relative", children: [
+          /* @__PURE__ */ t(
+            B,
+            {
+              id: s,
+              role: "combobox",
+              "aria-expanded": g,
+              "aria-controls": `${s}-listbox`,
+              "aria-autocomplete": "list",
+              "aria-busy": h,
+              "aria-invalid": E || c || void 0,
+              value: i,
+              disabled: x,
+              onFocus: () => l(!0),
+              onClick: () => l(!0),
+              onKeyDown: S,
+              onChange: (e) => {
+                m(e.target.value), l(!0), v?.(e, e.target.value.trim());
+              },
+              className: F(
+                "w-full text-sm pr-9",
+                L === "small" ? "h-9 px-2" : "h-10 px-3",
+                c && "border-destructive",
+                x && "opacity-70"
+              ),
+              style: u ? { borderColor: u, color: u } : void 0,
+              ...D
+            }
+          ),
+          h && /* @__PURE__ */ t(
+            M,
+            {
+              role: "progressbar",
+              "aria-label": "loading",
+              className: "pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin"
+            }
+          ),
+          g && w.length > 0 ? /* @__PURE__ */ t(
+            "div",
+            {
+              id: `${s}-listbox`,
+              role: "listbox",
+              className: "absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-input bg-popover p-1 text-popover-foreground shadow-md",
+              children: w.map((e, n) => {
+                const o = a(e);
+                return /* @__PURE__ */ t(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": o === i,
+                    className: "block w-full cursor-pointer rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground",
+                    onClick: (V) => I(V, e),
+                    children: o
+                  },
+                  `${o}-${n}`
+                );
+              })
+            }
+          ) : null
+        ] }),
+        b && !c ? /* @__PURE__ */ t(z, { children: b }) : null,
+        d ? /* @__PURE__ */ t(A, { children: d }) : null
+      ]
+    }
+  );
+}
+export {
+  U as Autocomplete,
+  U as default
+};
+//# sourceMappingURL=autocomplete.mjs.map

package/dist/components/forms/autocomplete/autocomplete.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"autocomplete.mjs","sources":["../../../../src/components/forms/autocomplete/autocomplete.tsx"],"sourcesContent":["import { Loader2 } from \"lucide-react\";\nimport {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Supported field sizes for Autocomplete.\n */\nexport type AutocompleteSize = \"small\" | \"medium\";\n\n/**\n * Props for the Autocomplete component.\n *\n * @template T - Option type.\n */\nexport interface AutocompleteProps<T>\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"size\" | \"onChange\" | \"value\" | \"defaultValue\"\n  > {\n  /**\n   * Label shown above the combobox.\n   */\n  label: string;\n  /**\n   * Available options.\n   */\n  options: T[];\n  /**\n   * Current selected option.\n   */\n  value?: T;\n  /**\n   * Helper text rendered below the field.\n   */\n  helperText?: ReactNode;\n  /**\n   * Error text rendered below the field.\n   */\n  error?: ReactNode;\n  /**\n   * Input size variant.\n   * @default \"medium\"\n   */\n  size?: AutocompleteSize;\n  /**\n   * Optional accent color used for border and text.\n   */\n  color?: string;\n  /**\n   * Shows a spinner while options are loading.\n   * @default false\n   */\n  loading?: boolean;\n  /**\n   * Called when user selects a value.\n   * @param e - Input or option interaction event.\n   * @param value - Trimmed selected value label.\n   */\n  onChangeValue?: (\n    e: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLButtonElement>,\n    value: string,\n  ) => void;\n  /**\n   * Converts options into labels.\n   */\n  getOptionLabel?: (option: T) => string;\n}\n\n/**\n * Searchable combobox with local option filtering.\n *\n * @template T - Option type.\n */\nexport function Autocomplete<T>({\n  id,\n  label,\n  options,\n  value,\n  helperText,\n  error,\n  size = \"medium\",\n  color,\n  loading = false,\n  className,\n  disabled,\n  onChangeValue,\n  getOptionLabel,\n  \"aria-invalid\": ariaInvalid,\n  ...props\n}: AutocompleteProps<T>) {\n  const optionLabel = (option: T) => getOptionLabel?.(option) ?? String(option);\n\n  const [open, setOpen] = useState(false);\n  const [inputValue, setInputValue] = useState(value ? optionLabel(value) : \"\");\n\n  useEffect(() => {\n    if (value !== undefined) {\n      setInputValue(optionLabel(value));\n    }\n  }, [value]);\n\n  const renderedOptions = useMemo(() => {\n    const query = inputValue.toLowerCase();\n    return options.filter((option) =>\n      optionLabel(option).toLowerCase().includes(query),\n    );\n  }, [inputValue, options]);\n\n  const inputId = id ?? `${label}-autocomplete`;\n  const hasError = Boolean(error);\n\n  const handleSelect = (e: MouseEvent<HTMLButtonElement>, option: T) => {\n    const nextValue = optionLabel(option);\n    setInputValue(nextValue);\n    setOpen(false);\n    onChangeValue?.(e, nextValue.trim());\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Escape\") {\n      setOpen(false);\n    }\n  };\n\n  return (\n    <Field\n      data-invalid={hasError || undefined}\n      className={cn(\"gap-1.5\", className)}\n    >\n      <FieldLabel htmlFor={inputId}>{label}</FieldLabel>\n\n      <div className=\"relative\">\n        <Input\n          id={inputId}\n          role=\"combobox\"\n          aria-expanded={open}\n          aria-controls={`${inputId}-listbox`}\n          aria-autocomplete=\"list\"\n          aria-busy={loading}\n          aria-invalid={ariaInvalid || hasError || undefined}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setOpen(true)}\n          onClick={() => setOpen(true)}\n          onKeyDown={handleKeyDown}\n          onChange={(event) => {\n            setInputValue(event.target.value);\n            setOpen(true);\n            onChangeValue?.(event, event.target.value.trim());\n          }}\n          className={cn(\n            \"w-full text-sm pr-9\",\n            size === \"small\" ? \"h-9 px-2\" : \"h-10 px-3\",\n            hasError && \"border-destructive\",\n            disabled && \"opacity-70\",\n          )}\n          style={color ? { borderColor: color, color } : undefined}\n          {...props}\n        />\n\n        {loading && (\n          <Loader2\n            role=\"progressbar\"\n            aria-label=\"loading\"\n            className=\"pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin\"\n          />\n        )}\n\n        {open && renderedOptions.length > 0 ? (\n          <div\n            id={`${inputId}-listbox`}\n            role=\"listbox\"\n            className=\"absolute z-10 mt-1 max-h-56 w-full overflow-auto rounded-md border border-input bg-popover p-1 text-popover-foreground shadow-md\"\n          >\n            {renderedOptions.map((option, index) => {\n              const labelValue = optionLabel(option);\n\n              return (\n                <button\n                  type=\"button\"\n                  key={`${labelValue}-${index}`}\n                  role=\"option\"\n                  aria-selected={labelValue === inputValue}\n                  className=\"block w-full cursor-pointer rounded-sm px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground\"\n                  onClick={(e) => handleSelect(e, option)}\n                >\n                  {labelValue}\n                </button>\n              );\n            })}\n          </div>\n        ) : null}\n      </div>\n\n      {helperText && !hasError ? (\n        <FieldDescription>{helperText}</FieldDescription>\n      ) : null}\n\n      {error ? <FieldError>{error}</FieldError> : null}\n    </Field>\n  );\n}\n\nexport default Autocomplete;\n"],"names":["Autocomplete","id","label","options","value","helperText","error","size","color","loading","className","disabled","onChangeValue","getOptionLabel","ariaInvalid","props","optionLabel","option","open","setOpen","useState","inputValue","setInputValue","useEffect","renderedOptions","useMemo","query","inputId","hasError","handleSelect","nextValue","handleKeyDown","event","jsxs","Field","cn","jsx","FieldLabel","Input","Loader2","index","labelValue","e","FieldDescription","FieldError"],"mappings":";;;;;;AAyFO,SAASA,EAAgB;AAAA,EAC9B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAgBC;AAAA,EAChB,GAAGC;AACL,GAAyB;AACvB,QAAMC,IAAc,CAACC,MAAcJ,IAAiBI,CAAM,KAAK,OAAOA,CAAM,GAEtE,CAACC,GAAMC,CAAO,IAAIC,EAAS,EAAK,GAChC,CAACC,GAAYC,CAAa,IAAIF,EAAShB,IAAQY,EAAYZ,CAAK,IAAI,EAAE;AAE5E,EAAAmB,EAAU,MAAM;AACd,IAAInB,MAAU,UACZkB,EAAcN,EAAYZ,CAAK,CAAC;AAAA,EAEpC,GAAG,CAACA,CAAK,CAAC;AAEV,QAAMoB,IAAkBC,EAAQ,MAAM;AACpC,UAAMC,IAAQL,EAAW,YAAA;AACzB,WAAOlB,EAAQ;AAAA,MAAO,CAACc,MACrBD,EAAYC,CAAM,EAAE,YAAA,EAAc,SAASS,CAAK;AAAA,IAAA;AAAA,EAEpD,GAAG,CAACL,GAAYlB,CAAO,CAAC,GAElBwB,IAAU1B,KAAM,GAAGC,CAAK,iBACxB0B,IAAW,EAAQtB,GAEnBuB,IAAe,CAAC,GAAkCZ,MAAc;AACpE,UAAMa,IAAYd,EAAYC,CAAM;AACpC,IAAAK,EAAcQ,CAAS,GACvBX,EAAQ,EAAK,GACbP,IAAgB,GAAGkB,EAAU,MAAM;AAAA,EACrC,GAEMC,IAAgB,CAACC,MAA2C;AAChE,IAAIA,EAAM,QAAQ,YAChBb,EAAQ,EAAK;AAAA,EAEjB;AAEA,SACE,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAcN,KAAY;AAAA,MAC1B,WAAWO,EAAG,WAAWzB,CAAS;AAAA,MAElC,UAAA;AAAA,QAAA,gBAAA0B,EAACC,GAAA,EAAW,SAASV,GAAU,UAAAzB,GAAM;AAAA,QAErC,gBAAA+B,EAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,UAAA,gBAAAG;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,IAAIX;AAAA,cACJ,MAAK;AAAA,cACL,iBAAeT;AAAA,cACf,iBAAe,GAAGS,CAAO;AAAA,cACzB,qBAAkB;AAAA,cAClB,aAAWlB;AAAA,cACX,gBAAcK,KAAec,KAAY;AAAA,cACzC,OAAOP;AAAA,cACP,UAAAV;AAAA,cACA,SAAS,MAAMQ,EAAQ,EAAI;AAAA,cAC3B,SAAS,MAAMA,EAAQ,EAAI;AAAA,cAC3B,WAAWY;AAAA,cACX,UAAU,CAACC,MAAU;AACnB,gBAAAV,EAAcU,EAAM,OAAO,KAAK,GAChCb,EAAQ,EAAI,GACZP,IAAgBoB,GAAOA,EAAM,OAAO,MAAM,MAAM;AAAA,cAClD;AAAA,cACA,WAAWG;AAAA,gBACT;AAAA,gBACA5B,MAAS,UAAU,aAAa;AAAA,gBAChCqB,KAAY;AAAA,gBACZjB,KAAY;AAAA,cAAA;AAAA,cAEd,OAAOH,IAAQ,EAAE,aAAaA,GAAO,OAAAA,MAAU;AAAA,cAC9C,GAAGO;AAAA,YAAA;AAAA,UAAA;AAAA,UAGLN,KACC,gBAAA2B;AAAA,YAACG;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,WAAU;AAAA,YAAA;AAAA,UAAA;AAAA,UAIbrB,KAAQM,EAAgB,SAAS,IAChC,gBAAAY;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,GAAGT,CAAO;AAAA,cACd,MAAK;AAAA,cACL,WAAU;AAAA,cAET,UAAAH,EAAgB,IAAI,CAACP,GAAQuB,MAAU;AACtC,sBAAMC,IAAazB,EAAYC,CAAM;AAErC,uBACE,gBAAAmB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,MAAK;AAAA,oBAEL,MAAK;AAAA,oBACL,iBAAeK,MAAepB;AAAA,oBAC9B,WAAU;AAAA,oBACV,SAAS,CAACqB,MAAMb,EAAaa,GAAGzB,CAAM;AAAA,oBAErC,UAAAwB;AAAA,kBAAA;AAAA,kBANI,GAAGA,CAAU,IAAID,CAAK;AAAA,gBAAA;AAAA,cASjC,CAAC;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,QAAA,GACN;AAAA,QAECnC,KAAc,CAACuB,IACd,gBAAAQ,EAACO,GAAA,EAAkB,aAAW,IAC5B;AAAA,QAEHrC,IAAQ,gBAAA8B,EAACQ,GAAA,EAAY,UAAAtC,EAAA,CAAM,IAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlD;"}

package/dist/components/forms/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export type { AutocompleteProps, AutocompleteSize } from './autocomplete';
+export { default, default as Autocomplete } from './autocomplete';

package/dist/components/forms/checkbox-field/checkbox-field.d.ts

@@ -0,0 +1,37 @@
+import { ComponentProps, ReactNode } from 'react';
+import { Checkbox } from '../../ui/checkbox';
+/**
+ * Props for the CheckboxField component.
+ */
+export interface CheckboxFieldProps extends Omit<ComponentProps<typeof Checkbox>, "id" | "className"> {
+    /**
+     * Label shown next to the checkbox.
+     */
+    label: string;
+    /**
+     * Helper text rendered below the control.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error text rendered below the control.
+     */
+    error?: ReactNode;
+    /**
+     * Makes the field span the container width.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Field id used to connect label and checkbox.
+     */
+    id?: string;
+    /**
+     * Additional CSS classes for the field wrapper.
+     */
+    className?: string;
+}
+/**
+ * Checkbox form wrapper with helper and error states.
+ */
+export declare function CheckboxField({ id, label, helperText, error, fullWidth, className, disabled, ...props }: CheckboxFieldProps): import("react/jsx-runtime").JSX.Element;
+export default CheckboxField;

package/dist/components/forms/checkbox-field/checkbox-field.mjs

@@ -0,0 +1,47 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { Checkbox as h } from "../../ui/checkbox.mjs";
+import { Field as f, FieldContent as u, FieldLabel as F, FieldDescription as p, FieldError as v } from "../../ui/field.mjs";
+import { cn as x } from "../../../lib/utils.mjs";
+function E({
+  id: e,
+  label: o,
+  helperText: a,
+  error: l,
+  fullWidth: c = !1,
+  className: s,
+  disabled: r,
+  ...m
+}) {
+  const d = e ?? `${o}-checkbox`, n = !!l;
+  return /* @__PURE__ */ t(
+    f,
+    {
+      orientation: "horizontal",
+      "data-disabled": r || void 0,
+      "data-invalid": n || void 0,
+      className: x(c && "w-full", s),
+      children: [
+        /* @__PURE__ */ i(
+          h,
+          {
+            id: d,
+            disabled: r,
+            "aria-label": o,
+            "aria-invalid": n || void 0,
+            ...m
+          }
+        ),
+        /* @__PURE__ */ t(u, { children: [
+          /* @__PURE__ */ i(F, { htmlFor: d, className: "font-normal", children: o }),
+          a && !n ? /* @__PURE__ */ i(p, { children: a }) : null,
+          l ? /* @__PURE__ */ i(v, { children: l }) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  E as CheckboxField,
+  E as default
+};
+//# sourceMappingURL=checkbox-field.mjs.map