@cryptlex/web-components 4.1.0 → 5.0.0

package/dist/components/inputs/numberfield.es.js

@@ -0,0 +1,103 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { composeRenderProps as n } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/utils.es.js";
+import { Input as u } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/Input.es.js";
+import { NumberField as f } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/NumberField.es.js";
+import { ChevronUp as p, ChevronDown as b } from "lucide-react";
+import { FormField as h, FieldGroup as N } from "./field.es.js";
+import { useFieldContext as g } from "../../utils/form-context.es.js";
+import { getFieldErrorMessage as d } from "../../utils/form-hook.es.js";
+import { cn as i } from "../../utils/primitives.es.js";
+import { Button as x } from "../ui/button.es.js";
+const F = f;
+function $({ className: o, ...t }) {
+  return /* @__PURE__ */ r(
+    u,
+    {
+      className: n(
+        o,
+        (e) => i(
+          "w-fit min-w-0 flex-1 border-r border-transparent bg-card pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+          e
+        )
+      ),
+      ...t
+    }
+  );
+}
+function v({
+  className: o,
+  ...t
+}) {
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: i(
+        "absolute right-0 flex h-full flex-col border-l",
+        o
+      ),
+      ...t,
+      children: [
+        /* @__PURE__ */ r(a, { slot: "increment", children: /* @__PURE__ */ r(p, { "aria-hidden": !0, className: "size-icon" }) }),
+        /* @__PURE__ */ r("div", { className: "border-b" }),
+        /* @__PURE__ */ r(a, { slot: "decrement", children: /* @__PURE__ */ r(b, { "aria-hidden": !0, className: "size-icon" }) })
+      ]
+    }
+  );
+}
+function a({ className: o, ...t }) {
+  return /* @__PURE__ */ r(
+    x,
+    {
+      className: n(
+        o,
+        (e) => i("w-auto grow h-3 px-0.5 text-muted-foreground", e)
+      ),
+      variant: "ghost",
+      size: "none",
+      ...t
+    }
+  );
+}
+function w({
+  label: o,
+  description: t,
+  errorMessage: e,
+  className: m,
+  ...s
+}) {
+  return /* @__PURE__ */ r(
+    F,
+    {
+      className: n(
+        m,
+        (c) => i("group form-field", c)
+      ),
+      ...s,
+      children: /* @__PURE__ */ r(h, { label: o, description: t, errorMessage: e, children: /* @__PURE__ */ l(N, { children: [
+        /* @__PURE__ */ r($, {}),
+        /* @__PURE__ */ r(v, {})
+      ] }) })
+    }
+  );
+}
+function E({ isDisabled: o, ...t }) {
+  const e = g();
+  return /* @__PURE__ */ r(
+    w,
+    {
+      isInvalid: !!d(e),
+      isDisabled: o || e.form.state.isSubmitting,
+      value: e.state.value,
+      id: e.name,
+      onChange: e.handleChange,
+      onBlur: e.handleBlur,
+      errorMessage: d(e),
+      ...t
+    }
+  );
+}
+export {
+  w as NumberField,
+  E as TfNumberField
+};
+//# sourceMappingURL=numberfield.es.js.map

package/dist/components/inputs/numberfield.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"numberfield.es.js","sources":["../../../lib/components/inputs/numberfield.tsx"],"sourcesContent":["import {\n  ButtonProps as AriaButtonProps,\n  Input as AriaInput,\n  InputProps as AriaInputProps,\n  NumberField as AriaNumberField,\n  NumberFieldProps as AriaNumberFieldProps,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { Button } from \"@/components/ui\"\nimport { cn, getFieldErrorMessage, useFieldContext } from \"@/utils/index\"\nimport { ChevronDown, ChevronUp } from \"lucide-react\"\nimport type React from \"react\"\nimport { FieldGroup, FormField, type FormFieldProps } from \"./field\"\n\nconst ANumberField = AriaNumberField\n\nfunction NumberFieldInput({ className, ...props }: AriaInputProps) {\n  return (\n    <AriaInput\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"w-fit min-w-0 flex-1 border-r border-transparent bg-card pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NumberFieldSteppers({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"absolute right-0 flex h-full flex-col border-l\",\n        className\n      )}\n      {...props}\n    >\n      <NumberFieldStepper slot=\"increment\">\n        <ChevronUp aria-hidden className=\"size-icon\" />\n      </NumberFieldStepper>\n      <div className=\"border-b\" />\n      <NumberFieldStepper slot=\"decrement\">\n        <ChevronDown aria-hidden className=\"size-icon\" />\n      </NumberFieldStepper>\n    </div>\n  )\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n  return (\n    <Button\n      className={composeRenderProps(className, (className) =>\n        cn(\"w-auto grow h-3 px-0.5 text-muted-foreground\", className)\n      )}\n      variant={\"ghost\"}\n      size={\"none\"}\n      {...props}\n    />\n  )\n}\n\ntype NumberFieldProps = AriaNumberFieldProps & FormFieldProps\nexport function NumberField({\n  label,\n  description,\n  errorMessage,\n  className,\n  ...props\n}: NumberFieldProps) {\n  return (\n    <ANumberField\n      className={composeRenderProps(className, (className) =>\n        cn(\"group form-field\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <FieldGroup>\n          <NumberFieldInput />\n          <NumberFieldSteppers />\n        </FieldGroup>\n      </FormField>\n    </ANumberField>\n  )\n}\n\nexport function TfNumberField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n  const field = useFieldContext<number>();\n\n  return (\n    <NumberField\n      isInvalid={!!getFieldErrorMessage(field)}\n      isDisabled={isDisabled || field.form.state.isSubmitting}\n      value={field.state.value}\n      id={field.name}\n      onChange={field.handleChange}\n      onBlur={field.handleBlur}\n      errorMessage={getFieldErrorMessage(field)}\n      {...props}\n    />)\n}\n\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","cn","NumberFieldSteppers","jsxs","NumberFieldStepper","ChevronUp","ChevronDown","Button","NumberField","label","description","errorMessage","FormField","FieldGroup","TfNumberField","isDisabled","field","useFieldContext","getFieldErrorMessage"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAeC;AAErB,SAASC,EAAiB,EAAE,WAAAC,GAAW,GAAGC,KAAyB;AACjE,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK;AAAA,UACE;AAAA,UACAL;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASK,EAAoB;AAAA,EAC3B,WAAAN;AAAA,EACA,GAAGC;AACL,GAAgC;AAC9B,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAACM,GAAA,EAAmB,MAAK,aACvB,UAAA,gBAAAN,EAACO,KAAU,eAAW,IAAC,WAAU,YAAA,CAAY,EAAA,CAC/C;AAAA,QACA,gBAAAP,EAAC,OAAA,EAAI,WAAU,WAAA,CAAW;AAAA,QAC1B,gBAAAA,EAACM,GAAA,EAAmB,MAAK,aACvB,UAAA,gBAAAN,EAACQ,KAAY,eAAW,IAAC,WAAU,YAAA,CAAY,EAAA,CACjD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAASF,EAAmB,EAAE,WAAAR,GAAW,GAAGC,KAA0B;AACpE,SACE,gBAAAC;AAAA,IAACS;AAAA,IAAA;AAAA,MACC,WAAWP;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,gDAAgDL,CAAS;AAAA,MAAA;AAAA,MAE9D,SAAS;AAAA,MACT,MAAM;AAAA,MACL,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAGO,SAASW,EAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAf;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,SACE,gBAAAC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,WAAWO;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,oBAAoBL,CAAS;AAAA,MAAA;AAAA,MAEjC,GAAGC;AAAA,MAEJ,4BAACe,GAAA,EAAU,OAAAH,GAAc,aAAAC,GAA0B,cAAAC,GACjD,4BAACE,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAf,EAACH,GAAA,EAAiB;AAAA,0BACjBO,GAAA,CAAA,CAAoB;AAAA,MAAA,EAAA,CACvB,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,SAASY,EAAc,EAAE,YAAAC,GAAY,GAAGlB,KAAiG;AAC9I,QAAMmB,IAAQC,EAAA;AAEd,SACE,gBAAAnB;AAAA,IAACU;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,CAACU,EAAqBF,CAAK;AAAA,MACvC,YAAYD,KAAcC,EAAM,KAAK,MAAM;AAAA,MAC3C,OAAOA,EAAM,MAAM;AAAA,MACnB,IAAIA,EAAM;AAAA,MACV,UAAUA,EAAM;AAAA,MAChB,QAAQA,EAAM;AAAA,MACd,cAAcE,EAAqBF,CAAK;AAAA,MACvC,GAAGnB;AAAA,IAAA;AAAA,EAAA;AAEV;"}

package/dist/components/inputs/searchfield.es.js

@@ -0,0 +1,83 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { SearchIcon as f, XIcon as m } from "lucide-react";
+import { Button as p } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/Button.es.js";
+import { composeRenderProps as t } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/utils.es.js";
+import { Input as l } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/Input.es.js";
+import { SearchField as u } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/SearchField.es.js";
+import { FormField as b, FieldGroup as h } from "./field.es.js";
+import { cn as a } from "../../utils/primitives.es.js";
+function $({ className: r, ...o }) {
+  return /* @__PURE__ */ e(
+    u,
+    {
+      className: t(
+        r,
+        (i) => a("group", i)
+      ),
+      ...o
+    }
+  );
+}
+function x({ className: r, ...o }) {
+  return /* @__PURE__ */ e(
+    l,
+    {
+      className: t(
+        r,
+        (i) => a(
+          "min-w-0 ring-0 focus-visible:outline-none flex-1 bg-card px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",
+          i
+        )
+      ),
+      ...o
+    }
+  );
+}
+function g({ className: r, ...o }) {
+  return /* @__PURE__ */ e(
+    p,
+    {
+      className: t(
+        r,
+        (i) => a(
+          "mr-1 opacity-70 ring-offset-background transition-opacity",
+          /* Hover */
+          "data-[hovered]:opacity-100",
+          /* Disabled */
+          "data-[disabled]:pointer-events-none",
+          /* Empty */
+          "group-data-[empty]:invisible",
+          i
+        )
+      ),
+      ...o
+    }
+  );
+}
+function w({
+  label: r,
+  description: o,
+  className: i,
+  errorMessage: c,
+  ...n
+}) {
+  return /* @__PURE__ */ e(
+    $,
+    {
+      className: t(
+        i,
+        (d) => a("group form-field", d)
+      ),
+      ...n,
+      children: /* @__PURE__ */ e(b, { label: r, description: o, errorMessage: c, children: /* @__PURE__ */ s(h, { children: [
+        /* @__PURE__ */ e(f, { "aria-hidden": !0, className: "size-icon text-muted-foreground" }),
+        /* @__PURE__ */ e(x, { placeholder: "" }),
+        /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(m, { "aria-hidden": !0, className: "size-icon" }) })
+      ] }) })
+    }
+  );
+}
+export {
+  w as SearchField
+};
+//# sourceMappingURL=searchfield.es.js.map

package/dist/components/inputs/searchfield.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchfield.es.js","sources":["../../../lib/components/inputs/searchfield.tsx"],"sourcesContent":["import { SearchIcon, XIcon } from \"lucide-react\"\nimport {\n  Button as AriaButton,\n  ButtonProps as AriaButtonProps,\n  Input as AriaInput,\n  InputProps as AriaInputProps,\n  SearchField as AriaSearchField,\n  SearchFieldProps as AriaSearchFieldProps,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { cn } from \"@/utils/index\"\n\nimport { FieldGroup, FormField, type FormFieldProps } from \"./field\"\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n  return (\n    <AriaSearchField\n      className={composeRenderProps(className, (className) =>\n        cn(\"group\", className)\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n  return (\n    <AriaInput\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"min-w-0 ring-0 focus-visible:outline-none flex-1 bg-card px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SearchFieldClear({ className, ...props }: AriaButtonProps) {\n  return (\n    <AriaButton\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"mr-1 opacity-70 ring-offset-background transition-opacity\",\n          /* Hover */\n          \"data-[hovered]:opacity-100\",\n          /* Disabled */\n          \"data-[disabled]:pointer-events-none\",\n          /* Empty */\n          \"group-data-[empty]:invisible\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps { };\nexport function SearchField({\n  label,\n  description,\n  className,\n  errorMessage,\n  ...props\n}: SearchFieldProps) {\n  return (\n    <ASearchField\n      className={composeRenderProps(className, (className) =>\n        cn(\"group form-field\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <FieldGroup>\n          <SearchIcon aria-hidden className=\"size-icon text-muted-foreground\" />\n          <ASearchFieldInput placeholder=\"\" />\n          <SearchFieldClear>\n            <XIcon aria-hidden className=\"size-icon\" />\n          </SearchFieldClear>\n        </FieldGroup>\n      </FormField>\n    </ASearchField>\n  )\n}"],"names":["ASearchField","className","props","jsx","AriaSearchField","composeRenderProps","cn","ASearchFieldInput","AriaInput","SearchFieldClear","AriaButton","SearchField","label","description","errorMessage","FormField","FieldGroup","SearchIcon","XIcon"],"mappings":";;;;;;;;AAeA,SAASA,EAAa,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACnE,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,SAASL,CAAS;AAAA,MAAA;AAAA,MAEtB,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASK,EAAkB,EAAE,WAAAN,GAAW,GAAGC,KAAyB;AAClE,SACE,gBAAAC;AAAA,IAACK;AAAAA,IAAA;AAAA,MACC,WAAWH;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK;AAAA,UACE;AAAA,UACAL;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASO,EAAiB,EAAE,WAAAR,GAAW,GAAGC,KAA0B;AAClE,SACE,gBAAAC;AAAA,IAACO;AAAAA,IAAA;AAAA,MACC,WAAWL;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK;AAAA,UACE;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACAL;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAGO,SAASS,EAAY;AAAA,EAC1B,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAZ;AAAA,EACA,cAAAa;AAAA,EACA,GAAGZ;AACL,GAAqB;AACnB,SACE,gBAAAC;AAAA,IAACH;AAAA,IAAA;AAAA,MACC,WAAWK;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,oBAAoBL,CAAS;AAAA,MAAA;AAAA,MAEjC,GAAGC;AAAA,MAEJ,4BAACa,GAAA,EAAU,OAAAH,GAAc,aAAAC,GAA0B,cAAAC,GACjD,4BAACE,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAb,EAACc,GAAA,EAAW,eAAW,IAAC,WAAU,mCAAkC;AAAA,QACpE,gBAAAd,EAACI,GAAA,EAAkB,aAAY,GAAA,CAAG;AAAA,QAClC,gBAAAJ,EAACM,KACC,UAAA,gBAAAN,EAACe,GAAA,EAAM,eAAW,IAAC,WAAU,aAAY,EAAA,CAC3C;AAAA,MAAA,EAAA,CACF,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/inputs/select.es.js

@@ -1,49 +1,114 @@
 "use client";
-import { jsx as e, Fragment as c, jsxs as m } from "react/jsx-runtime";
-import { useFieldContext as s } from "../../utils/form-context.es.js";
-import * as f from "react";
-import { DropdownMenu as h, DropdownMenuTrigger as p, DropdownMenuContent as g, DropdownMenuRadioGroup as w, DropdownMenuRadioItem as C } from "../ui/dropdown-menu.es.js";
-import { cn as D } from "../../utils/primitives.es.js";
-function M({
-  value: r,
-  setValue: l,
-  options: o,
+import { jsx as t, jsxs as c, Fragment as f } from "react/jsx-runtime";
+import { composeRenderProps as n } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/utils.es.js";
+import { ListBox as p } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/ListBox.es.js";
+import { SelectValue as u, Select as h } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/Select.es.js";
+import { FormField as S } from "./field.es.js";
+import { ChevronDown as g } from "lucide-react";
+import { ListBoxItem as x, ListBoxHeader as $, ListBoxCollection as B } from "../ui/list-box.es.js";
+import { Popover as v } from "../ui/popover.es.js";
+import { useFieldContext as C } from "../../utils/form-context.es.js";
+import { getFieldErrorMessage as N } from "../../utils/form-hook.es.js";
+import { Button as w } from "../ui/button.es.js";
+import { cn as i } from "../../utils/primitives.es.js";
+const F = h, k = x, q = $, G = B, L = ({
+  className: r,
+  ...e
+}) => /* @__PURE__ */ t(
+  u,
+  {
+    className: n(
+      r,
+      (o) => i(
+        "line-clamp-1 data-[placeholder]:text-muted-foreground",
+        /* Description */
+        "[&>[slot=description]]:hidden",
+        o
+      )
+    ),
+    ...e
+  }
+);
+function _({ className: r, children: e, ...o }) {
+  return /* @__PURE__ */ t(w, { ...o, children: n(e, (l) => /* @__PURE__ */ c(f, { children: [
+    l,
+    /* @__PURE__ */ t(g, { "aria-hidden": "true", className: "size-icon opacity-50" })
+  ] })) });
+}
+function P({ className: r, ...e }) {
+  return /* @__PURE__ */ t(
+    v,
+    {
+      className: n(
+        r,
+        (o) => i("w-auto min-w-[--trigger-width]", o)
+      ),
+      ...e
+    }
+  );
+}
+function j({
+  className: r,
+  ...e
+}) {
+  return /* @__PURE__ */ t(
+    p,
+    {
+      className: n(
+        r,
+        (o) => i(
+          "overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]",
+          o
+        )
+      ),
+      ...e
+    }
+  );
+}
+function y({
+  label: r,
+  description: e,
+  errorMessage: o,
+  children: l,
   className: a,
-  buttonLabel: t,
-  ...u
+  items: s,
+  ...m
 }) {
-  const d = f.useCallback(() => {
-    var n;
-    return (n = o.find((i) => i.value === r)) == null ? void 0 : n.label;
-  }, [r]);
-  return /* @__PURE__ */ e(c, { children: /* @__PURE__ */ m(h, { children: [
-    /* @__PURE__ */ e(p, { ...u, asChild: !0, children: /* @__PURE__ */ e("button", { className: D("btn-dropdown", a), ...u, children: t || d() }) }),
-    /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(w, { value: r, children: o.map((n) => /* @__PURE__ */ e(
-      C,
-      {
-        onSelect: () => {
-          l(n.value);
-        },
-        value: n.value,
-        children: n.label
-      }
-    )) }) })
-  ] }) });
+  return /* @__PURE__ */ t(
+    F,
+    {
+      className: n(
+        a,
+        (d) => i("group form-field", d)
+      ),
+      ...m,
+      children: /* @__PURE__ */ c(S, { label: r, description: e, errorMessage: o, children: [
+        /* @__PURE__ */ t(_, { children: /* @__PURE__ */ t(L, {}) }),
+        /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(j, { items: s, children: l }) })
+      ] })
+    }
+  );
 }
-function B({ ...r }) {
-  const l = s();
-  return /* @__PURE__ */ e(
-    M,
+function J({ ...r }) {
+  const e = C();
+  return /* @__PURE__ */ t(
+    y,
     {
-      value: l.state.value,
-      setValue: l.handleChange,
-      onBlur: l.handleBlur,
+      selectedKey: e.state.value,
+      onSelectionChange: (o) => e.handleChange(o.toString()),
+      onBlur: e.handleBlur,
+      errorMessage: N(e),
       ...r
     }
   );
 }
 export {
-  M as SingleSelect,
-  B as TfSingleSelect
+  G as SelectCollection,
+  q as SelectHeader,
+  k as SelectItem,
+  P as SelectPopover,
+  L as SelectValue,
+  y as SingleSelect,
+  J as TfSingleSelect
 };
 //# sourceMappingURL=select.es.js.map

package/dist/components/inputs/select.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.es.js","sources":["../../../lib/components/inputs/select.tsx"],"sourcesContent":["\"use client\";\nimport type { SelectionProps } from \"@/components/inputs/multi-select\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuRadioGroup,\n\tDropdownMenuRadioItem,\n\tDropdownMenuTrigger,\n} from \"@/components/ui\";\nimport { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport * as React from \"react\";\n\nexport interface SingleSelectProps extends SelectionProps<string> { }\n\nexport function SingleSelect({\n\tvalue,\n\tsetValue,\n\toptions,\n\tclassName,\n\tbuttonLabel,\n\t...props\n}: SingleSelectProps) {\n\tconst defaultButtonLabel = React.useCallback(() => {\n\t\treturn options.find((o) => o.value === value)?.label;\n\t}, [value]);\n\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger {...props} asChild>\n\t\t\t\t\t<button className={cn(\"btn-dropdown\", className)} {...props}>\n\t\t\t\t\t\t{buttonLabel ? buttonLabel : defaultButtonLabel()}\n\t\t\t\t\t</button>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent>\n\t\t\t\t\t<DropdownMenuRadioGroup value={value}>\n\t\t\t\t\t\t{options.map((opt) => (\n\t\t\t\t\t\t\t<DropdownMenuRadioItem\n\t\t\t\t\t\t\t\tonSelect={() => {\n\t\t\t\t\t\t\t\t\tsetValue(opt.value);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tvalue={opt.value}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t\t</DropdownMenuRadioItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</DropdownMenuRadioGroup>\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\t\t</>\n\t);\n}\n\nexport interface TfSingleSelectProps\n\textends Omit<SingleSelectProps, \"value\" | \"setValue\"> { }\nexport function TfSingleSelect({ ...props }: TfSingleSelectProps) {\n\tconst field = useFieldContext<string>();\n\n\treturn (\n\t\t<SingleSelect\n\t\t\tvalue={field.state.value}\n\t\t\tsetValue={field.handleChange}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"names":["SingleSelect","value","setValue","options","className","buttonLabel","props","defaultButtonLabel","React","_a","o","jsx","Fragment","DropdownMenu","DropdownMenuTrigger","cn","DropdownMenuContent","DropdownMenuRadioGroup","opt","DropdownMenuRadioItem","TfSingleSelect","field","useFieldContext"],"mappings":";;;;;;AAeO,SAASA,EAAa;AAAA,EAC5B,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACJ,GAAsB;AACrB,QAAMC,IAAqBC,EAAM,YAAY,MAAM;;AAClD,YAAOC,IAAAN,EAAQ,KAAK,CAACO,MAAMA,EAAE,UAAUT,CAAK,MAArC,gBAAAQ,EAAwC;AAAA,EAChD,GAAG,CAACR,CAAK,CAAC;AAEV,SACC,gBAAAU,EAAAC,GAAA,EACC,4BAACC,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAF,EAACG,KAAqB,GAAGR,GAAO,SAAO,IACtC,UAAA,gBAAAK,EAAC,YAAO,WAAWI,EAAG,gBAAgBX,CAAS,GAAI,GAAGE,GACpD,eAA4BC,KAC9B,GACD;AAAA,IACA,gBAAAI,EAACK,KACA,UAAA,gBAAAL,EAACM,GAAA,EAAuB,OAAAhB,GACtB,UAAAE,EAAQ,IAAI,CAACe,MACb,gBAAAP;AAAA,MAACQ;AAAA,MAAA;AAAA,QACA,UAAU,MAAM;AACf,UAAAjB,EAASgB,EAAI,KAAK;AAAA,QACnB;AAAA,QACA,OAAOA,EAAI;AAAA,QAEV,UAAAA,EAAI;AAAA,MAAA;AAAA,IAAA,CAEN,GACF,EAAA,CACD;AAAA,EAAA,EAAA,CACD,EAAA,CACD;AAEF;AAIO,SAASE,EAAe,EAAE,GAAGd,KAA8B;AACjE,QAAMe,IAAQC,EAAA;AAEd,SACC,gBAAAX;AAAA,IAACX;AAAA,IAAA;AAAA,MACA,OAAOqB,EAAM,MAAM;AAAA,MACnB,UAAUA,EAAM;AAAA,MAChB,QAAQA,EAAM;AAAA,MACb,GAAGf;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"select.es.js","sources":["../../../lib/components/inputs/select.tsx"],"sourcesContent":["\"use client\"\nimport {\n  ListBox as AriaListBox,\n  ListBoxProps as AriaListBoxProps,\n  PopoverProps as AriaPopoverProps,\n  Select as AriaSelect,\n  SelectProps as AriaSelectProps,\n  SelectValue as AriaSelectValue,\n  SelectValueProps as AriaSelectValueProps,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { cn, getFieldErrorMessage, useFieldContext } from \"@/utils/index\"\n\nimport { FormField, type FormFieldProps } from \"@/components/inputs/field\"\nimport { Button } from \"@/components/ui\"\nimport { ChevronDown } from \"lucide-react\"\nimport {\n  ListBoxCollection,\n  ListBoxHeader,\n  ListBoxItem,\n} from \"../ui/list-box\"\nimport { Popover } from \"../ui/popover\"\n\nconst ASelect = AriaSelect\nexport const SelectItem = ListBoxItem\nexport const SelectHeader = ListBoxHeader\nexport const SelectCollection = ListBoxCollection\n\nexport const SelectValue = <T extends object>({\n  className,\n  ...props\n}: AriaSelectValueProps<T>) => (\n  <AriaSelectValue\n    className={composeRenderProps(className, (className) =>\n      cn(\n        \"line-clamp-1 data-[placeholder]:text-muted-foreground\",\n        /* Description */\n        \"[&>[slot=description]]:hidden\",\n        className\n      )\n    )}\n    {...props}\n  />\n)\n\nfunction SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {\n  return (\n    <Button {...props}>\n      {composeRenderProps(children, (children) => (\n        <>\n          {children}\n          <ChevronDown aria-hidden=\"true\" className=\"size-icon opacity-50\" />\n        </>\n      ))}\n    </Button>\n  )\n}\n\nexport function SelectPopover({ className, ...props }: AriaPopoverProps) {\n  return (\n    <Popover\n      className={composeRenderProps(className, (className) =>\n        cn(\"w-auto min-w-[--trigger-width]\", className)\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectListBox<T extends object>({\n  className,\n  ...props\n}: AriaListBoxProps<T>) {\n  return (\n    <AriaListBox\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"overflow-auto p-1 outline-none [clip-path:inset(0_0_0_0_round_calc(var(--radius)-2px))]\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SingleSelectProps<T extends object> extends Omit<AriaSelectProps<T>, \"children\">, FormFieldProps {\n  items: Iterable<T>\n  children: React.ReactNode | ((item: T) => React.ReactNode)\n}\n\nexport function SingleSelect<T extends object>({\n  label,\n  description,\n  errorMessage,\n  children,\n  className,\n  items,\n  ...props\n}: SingleSelectProps<T>) {\n  return (\n    <ASelect\n      className={composeRenderProps(className, (className) =>\n        cn(\"group form-field\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectPopover>\n          <SelectListBox items={items}>{children}</SelectListBox>\n        </SelectPopover>\n      </FormField>\n    </ASelect>\n  )\n}\n\n\ntype TfSingleSelectProps<T extends object> = Omit<SingleSelectProps<T>, \"value\" | \"setValue\">;\n\nexport function TfSingleSelect<T extends object>({ ...props }: TfSingleSelectProps<T>) {\n  const field = useFieldContext<string>();\n\n  return (\n    <SingleSelect\n      selectedKey={field.state.value}\n      onSelectionChange={(e) => field.handleChange(e!.toString())}\n      onBlur={field.handleBlur}\n      errorMessage={getFieldErrorMessage(field)}\n      {...props}\n    />\n  );\n}\n"],"names":["ASelect","AriaSelect","SelectItem","ListBoxItem","SelectHeader","ListBoxHeader","SelectCollection","ListBoxCollection","SelectValue","className","props","jsx","AriaSelectValue","composeRenderProps","cn","SelectTrigger","children","Button","jsxs","Fragment","ChevronDown","SelectPopover","Popover","SelectListBox","AriaListBox","SingleSelect","label","description","errorMessage","items","FormField","TfSingleSelect","field","useFieldContext","e","getFieldErrorMessage"],"mappings":";;;;;;;;;;;;;AAwBA,MAAMA,IAAUC,GACHC,IAAaC,GACbC,IAAeC,GACfC,IAAmBC,GAEnBC,IAAc,CAAmB;AAAA,EAC5C,WAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,WAAWC;AAAAA,MAAmBJ;AAAA,MAAW,CAACA,MACxCK;AAAA,QACE;AAAA;AAAA,QAEA;AAAA,QACAL;AAAAA,MAAA;AAAA,IACF;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;AAGF,SAASK,EAAc,EAAE,WAAAN,GAAW,UAAAO,GAAU,GAAGN,KAA8C;AAC7F,SACE,gBAAAC,EAACM,KAAQ,GAAGP,GACT,YAAmBM,GAAU,CAACA,MAC7B,gBAAAE,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAH;AAAAA,IACD,gBAAAL,EAACS,GAAA,EAAY,eAAY,QAAO,WAAU,uBAAA,CAAuB;AAAA,EAAA,EAAA,CACnE,CACD,EAAA,CACH;AAEJ;AAEO,SAASC,EAAc,EAAE,WAAAZ,GAAW,GAAGC,KAA2B;AACvE,SACE,gBAAAC;AAAA,IAACW;AAAA,IAAA;AAAA,MACC,WAAWT;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,kCAAkCL,CAAS;AAAA,MAAA;AAAA,MAE/C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASa,EAAgC;AAAA,EACvC,WAAAd;AAAA,EACA,GAAGC;AACL,GAAwB;AACtB,SACE,gBAAAC;AAAA,IAACa;AAAAA,IAAA;AAAA,MACC,WAAWX;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK;AAAA,UACE;AAAA,UACAL;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAOO,SAASe,EAA+B;AAAA,EAC7C,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAZ;AAAA,EACA,WAAAP;AAAA,EACA,OAAAoB;AAAA,EACA,GAAGnB;AACL,GAAyB;AACvB,SACE,gBAAAC;AAAA,IAACX;AAAA,IAAA;AAAA,MACC,WAAWa;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,oBAAoBL,CAAS;AAAA,MAAA;AAAA,MAEjC,GAAGC;AAAA,MAEJ,UAAA,gBAAAQ,EAACY,GAAA,EAAU,OAAAJ,GAAc,aAAAC,GAA0B,cAAAC,GACjD,UAAA;AAAA,QAAA,gBAAAjB,EAACI,GAAA,EACC,UAAA,gBAAAJ,EAACH,GAAA,CAAA,CAAY,GACf;AAAA,0BACCa,GAAA,EACC,UAAA,gBAAAV,EAACY,GAAA,EAAc,OAAAM,GAAe,UAAAb,GAAS,EAAA,CACzC;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAKO,SAASe,EAAiC,EAAE,GAAGrB,KAAiC;AACrF,QAAMsB,IAAQC,EAAA;AAEd,SACE,gBAAAtB;AAAA,IAACc;AAAA,IAAA;AAAA,MACC,aAAaO,EAAM,MAAM;AAAA,MACzB,mBAAmB,CAACE,MAAMF,EAAM,aAAaE,EAAG,UAAU;AAAA,MAC1D,QAAQF,EAAM;AAAA,MACd,cAAcG,EAAqBH,CAAK;AAAA,MACvC,GAAGtB;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/inputs/textfield.es.js

@@ -0,0 +1,89 @@
+import { jsx as o } from "react/jsx-runtime";
+import { composeRenderProps as f } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/utils.es.js";
+import { Input as l } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/Input.es.js";
+import { TextArea as s } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/TextArea.es.js";
+import { TextField as c } from "../../node_modules/.pnpm/react-aria-components@1.11.0_react-dom@19.1.0_react@19.1.0/node_modules/react-aria-components/dist/TextField.es.js";
+import { FormField as u } from "./field.es.js";
+import { useFieldContext as p } from "../../utils/form-context.es.js";
+import { getFieldErrorMessage as x } from "../../utils/form-hook.es.js";
+import { cn as i } from "../../utils/primitives.es.js";
+const b = c;
+function g({ className: r, ...t }) {
+  return /* @__PURE__ */ o(
+    l,
+    {
+      className: f(
+        r,
+        (e) => i(
+          "flex input-dim w-full border border-input bg-card ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground",
+          /* Disabled */
+          "disabled-muted",
+          /* Focused */
+          "focus-ring",
+          e
+        )
+      ),
+      ...t
+    }
+  );
+}
+function $({ className: r, ...t }) {
+  return /* @__PURE__ */ o(
+    s,
+    {
+      className: f(
+        r,
+        (e) => i(
+          "flex min-h-32 w-full border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground",
+          /* Focused */
+          "focus-ring",
+          /* Disabled */
+          "disabled-muted",
+          e
+        )
+      ),
+      ...t
+    }
+  );
+}
+function h({
+  label: r,
+  description: t,
+  errorMessage: e,
+  textArea: n,
+  className: d,
+  ...a
+}) {
+  return /* @__PURE__ */ o(
+    b,
+    {
+      className: f(
+        d,
+        (m) => i("group form-field", m)
+      ),
+      ...a,
+      children: /* @__PURE__ */ o(u, { label: r, errorMessage: e, description: t, children: n ? /* @__PURE__ */ o($, {}) : /* @__PURE__ */ o(g, {}) })
+    }
+  );
+}
+function I({ isDisabled: r, ...t }) {
+  const e = p();
+  return /* @__PURE__ */ o(
+    h,
+    {
+      isDisabled: r || e.form.state.isSubmitting,
+      value: e.state.value,
+      id: e.name,
+      name: e.name,
+      onBlur: e.handleBlur,
+      onChange: e.handleChange,
+      errorMessage: x(e),
+      ...t
+    }
+  );
+}
+export {
+  h as TextField,
+  I as TfTextField
+};
+//# sourceMappingURL=textfield.es.js.map

package/dist/components/inputs/textfield.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textfield.es.js","sources":["../../../lib/components/inputs/textfield.tsx"],"sourcesContent":["import {\n  Input as AriaInput,\n  InputProps as AriaInputProps,\n  TextArea as AriaTextArea,\n  TextAreaProps as AriaTextAreaProps,\n  TextField as AriaTextField,\n  TextFieldProps as AriaTextFieldProps,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { cn, getFieldErrorMessage, useFieldContext } from \"@/utils/index\"\n\nimport { FormField, type FormFieldProps } from \"./field\"\n\nconst ATextField = AriaTextField\n\nfunction Input({ className, ...props }: AriaInputProps) {\n  return (\n    <AriaInput\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"flex input-dim w-full border border-input bg-card ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground\",\n          /* Disabled */\n          \"disabled-muted\",\n          /* Focused */\n          \"focus-ring\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TextArea({ className, ...props }: AriaTextAreaProps) {\n  return (\n    <AriaTextArea\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"flex min-h-32 w-full border border-input bg-card px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground\",\n          /* Focused */\n          \"focus-ring\",\n          /* Disabled */\n          \"disabled-muted\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n  textArea?: boolean\n}\n\nexport function TextField({\n  label,\n  description,\n  errorMessage,\n  textArea,\n  className,\n  ...props\n}: TextFieldProps) {\n  return (\n    <ATextField\n      className={composeRenderProps(className, (className) =>\n        cn(\"group form-field\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} errorMessage={errorMessage} description={description}>\n        {textArea ? <TextArea /> : <Input />}\n      </FormField>\n    </ATextField>\n  )\n}\n\nexport function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {\n  const field = useFieldContext<string>();\n\n  return (\n    <TextField\n      isDisabled={isDisabled || field.form.state.isSubmitting}\n      value={field.state.value}\n      id={field.name}\n      name={field.name}\n      onBlur={field.handleBlur}\n      onChange={field.handleChange}\n      errorMessage={getFieldErrorMessage(field)}\n      {...props} />)\n}\n\n\n"],"names":["ATextField","AriaTextField","Input","className","props","jsx","AriaInput","composeRenderProps","cn","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","FormField","TfTextField","isDisabled","field","useFieldContext","getFieldErrorMessage"],"mappings":";;;;;;;;;AAcA,MAAMA,IAAaC;AAEnB,SAASC,EAAM,EAAE,WAAAC,GAAW,GAAGC,KAAyB;AACtD,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK;AAAA,UACE;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACAL;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASK,EAAS,EAAE,WAAAN,GAAW,GAAGC,KAA4B;AAC5D,SACE,gBAAAC;AAAA,IAACK;AAAAA,IAAA;AAAA,MACC,WAAWH;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK;AAAA,UACE;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACAL;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAMO,SAASO,EAAU;AAAA,EACxB,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAZ;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,SACE,gBAAAC;AAAA,IAACL;AAAA,IAAA;AAAA,MACC,WAAWO;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,oBAAoBL,CAAS;AAAA,MAAA;AAAA,MAEjC,GAAGC;AAAA,MAEJ,UAAA,gBAAAC,EAACW,GAAA,EAAU,OAAAJ,GAAc,cAAAE,GAA4B,aAAAD,GAClD,UAAAE,IAAW,gBAAAV,EAACI,GAAA,CAAA,CAAS,IAAK,gBAAAJ,EAACH,GAAA,CAAA,CAAM,EAAA,CACpC;AAAA,IAAA;AAAA,EAAA;AAGN;AAEO,SAASe,EAAY,EAAE,YAAAC,GAAY,GAAGd,KAAiD;AAC5F,QAAMe,IAAQC,EAAA;AAEd,SACE,gBAAAf;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,YAAYO,KAAcC,EAAM,KAAK,MAAM;AAAA,MAC3C,OAAOA,EAAM,MAAM;AAAA,MACnB,IAAIA,EAAM;AAAA,MACV,MAAMA,EAAM;AAAA,MACZ,QAAQA,EAAM;AAAA,MACd,UAAUA,EAAM;AAAA,MAChB,cAAcE,EAAqBF,CAAK;AAAA,MACvC,GAAGf;AAAA,IAAA;AAAA,EAAA;AACV;"}

package/dist/components/key-value-card/key-value-card.es.js

@@ -1,60 +1,53 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Badge as d } from "../ui/badge.es.js";
-import { Card as i, CardHeader as f, CardTitle as m, CardContent as h } from "../ui/card.es.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { Badge as p } from "../ui/badge.es.js";
+import { Card as f, CardHeader as i, CardTitle as h, CardContent as m } from "../ui/card.es.js";
 import { Skeleton as x } from "../ui/skeleton.es.js";
 import { formatDate as u } from "../data-table/table-commons.es.js";
-import { CopyButton as y } from "../ui/copy-button.es.js";
-const B = ({
-  data: c,
+const b = ({
+  data: l,
   label: o,
-  fields: l
+  fields: t
 }) => {
-  const p = (n, r) => {
-    if (n.transform)
-      return n.transform(r);
+  const d = (a, r) => {
+    if (a.transform)
+      return a.transform(r);
     if (r == null)
       return "-";
-    switch (n.type) {
-      case "link":
-      case "copyButton":
-        return /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-          r,
-          /* @__PURE__ */ e(y, { value: r })
-        ] });
+    switch (a.type) {
       case "date":
         return /* @__PURE__ */ e("span", { children: u(r) });
       case "yesno":
         return /* @__PURE__ */ e("span", { children: r ? "Yes" : "No" });
       case "badge":
-        return /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: Array.isArray(r) ? r.map((s, a) => /* @__PURE__ */ e(d, { children: typeof s == "object" ? (s == null ? void 0 : s.name) || (s == null ? void 0 : s.id) : s }, a)) : r });
+        return /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: Array.isArray(r) ? r.map((s, n) => /* @__PURE__ */ e(p, { children: typeof s == "object" ? (s == null ? void 0 : s.name) || (s == null ? void 0 : s.id) : s }, n)) : r });
       case "boolean":
         return /* @__PURE__ */ e("span", { children: r.toString() });
       default:
         return /* @__PURE__ */ e("span", { children: r });
     }
   };
-  return /* @__PURE__ */ t(i, { children: [
-    /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(m, { children: o }) }),
-    /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: c ? l.map((n) => {
-      const r = n.accessor ? n.accessor.split(".").reduce(
-        (s, a) => s && a in s ? s[a] : void 0,
-        c
+  return /* @__PURE__ */ c(f, { children: [
+    /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(h, { children: o }) }),
+    /* @__PURE__ */ e(m, { children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: l ? t.map((a) => {
+      const r = a.accessor ? a.accessor.split(".").reduce(
+        (s, n) => s && n in s ? s[n] : void 0,
+        l
       ) : null;
-      return /* @__PURE__ */ t(
+      return /* @__PURE__ */ c(
         "div",
         {
           className: "flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0",
           children: [
-            /* @__PURE__ */ e("p", { className: "text-sm flex w-full justify-start col-span-1", children: n.display }),
-            /* @__PURE__ */ e("div", { className: "text-sm flex w-full justify-start text-wrap break-all", children: p(n, r) })
+            /* @__PURE__ */ e("p", { className: "text-sm flex w-full justify-start col-span-1", children: a.display }),
+            /* @__PURE__ */ e("div", { className: "text-sm flex w-full justify-start text-wrap break-all", children: d(a, r) })
           ]
         },
-        n.display
+        a.display
       );
-    }) : l.map((n, r) => /* @__PURE__ */ e(x, { className: "h-12 w-full" }, r)) }) })
+    }) : t.map((a, r) => /* @__PURE__ */ e(x, { className: "h-12 w-full" }, r)) }) })
   ] });
 };
 export {
-  B as KeyValueCard
+  b as KeyValueCard
 };
 //# sourceMappingURL=key-value-card.es.js.map

package/dist/components/key-value-card/key-value-card.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"key-value-card.es.js","sources":["../../../lib/components/key-value-card/key-value-card.tsx"],"sourcesContent":["import { Badge } from \"@/components/ui/badge\";\nimport {\n\tCard,\n\tCardContent,\n\tCardHeader,\n\tCardTitle,\n\tCopyButton,\n\tformatDate,\n\tSkeleton,\n} from \"@/index\";\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n\t? {\n\t\t[K in keyof T]: K extends string | number\n\t\t? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`\n\t\t: never;\n\t}[keyof T]\n\t: never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n\tdisplay: string;\n\taccessor: NestedKeyOf<T>;\n\ttype?:\n\t| \"text\"\n\t| \"badge\"\n\t| \"boolean\"\n\t| \"date\"\n\t| \"yesno\"\n\t| \"copyButton\"\n\t| \"link\"; // Field types\n\ttransform?: (value: any) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n\tdata: T; // Ensure data is of type T\n\tlabel: string;\n\tfields: DisplayField<T>[];\n\tclassName?: string;\n}\n\nexport const KeyValueCard = <T extends {}>({\n\tdata,\n\tlabel,\n\tfields,\n}: KeyValueCardProps<T>) => {\n\tconst renderValue = (field: DisplayField<T>, value: any) => {\n\t\tif (field.transform) {\n\t\t\treturn field.transform(value);\n\t\t}\n\t\tif (value === undefined || value === null) {\n\t\t\treturn \"-\";\n\t\t}\n\t\tswitch (field.type) {\n\t\t\tcase \"link\":\n\t\t\t// return <Link to={value}>{value}</Link>;\n\t\t\tcase \"copyButton\":\n\t\t\t\treturn (\n\t\t\t\t\t<span className=\"flex items-center gap-2\">\n\t\t\t\t\t\t{value}\n\t\t\t\t\t\t<CopyButton value={value} />\n\t\t\t\t\t</span>\n\t\t\t\t);\n\t\t\tcase \"date\":\n\t\t\t\treturn <span>{formatDate(value)}</span>;\n\t\t\tcase \"yesno\":\n\t\t\t\treturn <span>{value ? \"Yes\" : \"No\"}</span>;\n\t\t\tcase \"badge\":\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"flex flex-wrap gap-1\">\n\t\t\t\t\t\t{Array.isArray(value)\n\t\t\t\t\t\t\t? value.map((item, index) => (\n\t\t\t\t\t\t\t\t<Badge key={index}>\n\t\t\t\t\t\t\t\t\t{typeof item === \"object\" ? item?.name || item?.id : item}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t: value}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\n\t\t\tcase \"boolean\":\n\t\t\t\treturn <span>{value.toString()}</span>;\n\t\t\tdefault:\n\t\t\t\treturn <span>{value}</span>;\n\t\t}\n\t};\n\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>{label}</CardTitle>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t{data\n\t\t\t\t\t\t? fields.map((field) => {\n\t\t\t\t\t\t\t// TODO: improve this\n\t\t\t\t\t\t\tconst value = field.accessor\n\t\t\t\t\t\t\t\t? field.accessor\n\t\t\t\t\t\t\t\t\t.split(\".\")\n\t\t\t\t\t\t\t\t\t.reduce(\n\t\t\t\t\t\t\t\t\t\t(obj, key) =>\n\t\t\t\t\t\t\t\t\t\t\tobj && key in obj ? obj[key] : undefined,\n\t\t\t\t\t\t\t\t\t\tdata as Record<string, any>,\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t: null;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={field.display}\n\t\t\t\t\t\t\t\t\tclassName=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm flex w-full justify-start col-span-1\">\n\t\t\t\t\t\t\t\t\t\t{field.display}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<div className=\"text-sm flex w-full justify-start text-wrap break-all\">\n\t\t\t\t\t\t\t\t\t\t{renderValue(field, value)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t: fields.map((_, index) => (\n\t\t\t\t\t\t\t<Skeleton key={index} className=\"h-12 w-full\" />\n\t\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n};\n"],"names":["KeyValueCard","data","label","fields","renderValue","field","value","jsxs","jsx","CopyButton","formatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","_","Skeleton"],"mappings":";;;;;;AA0CO,MAAMA,IAAe,CAAe;AAAA,EAC1C,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AACD,MAA4B;AAC3B,QAAMC,IAAc,CAACC,GAAwBC,MAAe;AAC3D,QAAID,EAAM;AACT,aAAOA,EAAM,UAAUC,CAAK;AAE7B,QAA2BA,KAAU;AACpC,aAAO;AAER,YAAQD,EAAM,MAAA;AAAA,MACb,KAAK;AAAA,MAEL,KAAK;AACJ,eACC,gBAAAE,EAAC,QAAA,EAAK,WAAU,2BACd,UAAA;AAAA,UAAAD;AAAA,UACD,gBAAAE,EAACC,KAAW,OAAAH,EAAA,CAAc;AAAA,QAAA,GAC3B;AAAA,MAEF,KAAK;AACJ,eAAO,gBAAAE,EAAC,QAAA,EAAM,UAAAE,EAAWJ,CAAK,GAAE;AAAA,MACjC,KAAK;AACJ,eAAO,gBAAAE,EAAC,QAAA,EAAM,UAAAF,IAAQ,QAAQ,MAAK;AAAA,MACpC,KAAK;AACJ,eACC,gBAAAE,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA,MAAM,QAAQF,CAAK,IACjBA,EAAM,IAAI,CAACK,GAAMC,wBACjBC,GAAA,EACC,UAAA,OAAOF,KAAS,YAAWA,KAAA,gBAAAA,EAAM,UAAQA,KAAA,gBAAAA,EAAM,MAAKA,EAAA,GAD1CC,CAEZ,CACA,IACCN,EAAA,CACJ;AAAA,MAGF,KAAK;AACJ,eAAO,gBAAAE,EAAC,QAAA,EAAM,UAAAF,EAAM,SAAA,GAAW;AAAA,MAChC;AACC,eAAO,gBAAAE,EAAC,UAAM,UAAAF,EAAA,CAAM;AAAA,IAAA;AAAA,EAEvB;AAEA,2BACEQ,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAA,EACA,UAAA,gBAAAP,EAACQ,GAAA,EAAW,UAAAd,EAAA,CAAM,GACnB;AAAA,IACA,gBAAAM,EAACS,GAAA,EACA,UAAA,gBAAAT,EAAC,OAAA,EAAI,WAAU,uBACb,UAAAP,IACEE,EAAO,IAAI,CAACE,MAAU;AAEvB,YAAMC,IAAQD,EAAM,WACjBA,EAAM,SACN,MAAM,GAAG,EACT;AAAA,QACA,CAACa,GAAKC,MACLD,KAAOC,KAAOD,IAAMA,EAAIC,CAAG,IAAI;AAAA,QAChClB;AAAA,MAAA,IAEA;AAEH,aACC,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UAEA,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,gDACX,UAAAH,EAAM,SACR;AAAA,8BACC,OAAA,EAAI,WAAU,yDACb,UAAAD,EAAYC,GAAOC,CAAK,EAAA,CAC1B;AAAA,UAAA;AAAA,QAAA;AAAA,QARKD,EAAM;AAAA,MAAA;AAAA,IAWd,CAAC,IACCF,EAAO,IAAI,CAACiB,GAAGR,MAChB,gBAAAJ,EAACa,GAAA,EAAqB,WAAU,cAAA,GAAjBT,CAA+B,CAC9C,GACH,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}
+{"version":3,"file":"key-value-card.es.js","sources":["../../../lib/components/key-value-card/key-value-card.tsx"],"sourcesContent":["import { Badge } from \"@/components/ui/badge\";\nimport {\n\tCard,\n\tCardContent,\n\tCardHeader,\n\tCardTitle,\n\tformatDate,\n\tSkeleton\n} from \"@/index\";\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n\t? {\n\t\t[K in keyof T]: K extends string | number\n\t\t? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}`\n\t\t: never;\n\t}[keyof T]\n\t: never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n\tdisplay: string;\n\taccessor: NestedKeyOf<T>;\n\ttype?:\n\t| \"text\"\n\t| \"badge\"\n\t| \"boolean\"\n\t| \"date\"\n\t| \"yesno\"\n\t| \"copyButton\"\n\t| \"link\"; // Field types\n\ttransform?: (value: any) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n\tdata: T; // Ensure data is of type T\n\tlabel: string;\n\tfields: DisplayField<T>[];\n\tclassName?: string;\n}\n\nexport const KeyValueCard = <T extends {}>({\n\tdata,\n\tlabel,\n\tfields,\n}: KeyValueCardProps<T>) => {\n\tconst renderValue = (field: DisplayField<T>, value: any) => {\n\t\tif (field.transform) {\n\t\t\treturn field.transform(value);\n\t\t}\n\t\tif (value === undefined || value === null) {\n\t\t\treturn \"-\";\n\t\t}\n\t\tswitch (field.type) {\n\t\t\tcase \"date\":\n\t\t\t\treturn <span>{formatDate(value)}</span>;\n\t\t\tcase \"yesno\":\n\t\t\t\treturn <span>{value ? \"Yes\" : \"No\"}</span>;\n\t\t\tcase \"badge\":\n\t\t\t\treturn (\n\t\t\t\t\t<div className=\"flex flex-wrap gap-1\">\n\t\t\t\t\t\t{Array.isArray(value)\n\t\t\t\t\t\t\t? value.map((item, index) => (\n\t\t\t\t\t\t\t\t<Badge key={index}>\n\t\t\t\t\t\t\t\t\t{typeof item === \"object\" ? item?.name || item?.id : item}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t))\n\t\t\t\t\t\t\t: value}\n\t\t\t\t\t</div>\n\t\t\t\t);\n\n\t\t\tcase \"boolean\":\n\t\t\t\treturn <span>{value.toString()}</span>;\n\t\t\tdefault:\n\t\t\t\treturn <span>{value}</span>;\n\t\t}\n\t};\n\n\treturn (\n\t\t<Card>\n\t\t\t<CardHeader>\n\t\t\t\t<CardTitle>{label}</CardTitle>\n\t\t\t</CardHeader>\n\t\t\t<CardContent>\n\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t{data\n\t\t\t\t\t\t? fields.map((field) => {\n\t\t\t\t\t\t\t// TODO: improve this\n\t\t\t\t\t\t\tconst value = field.accessor\n\t\t\t\t\t\t\t\t? field.accessor\n\t\t\t\t\t\t\t\t\t.split(\".\")\n\t\t\t\t\t\t\t\t\t.reduce(\n\t\t\t\t\t\t\t\t\t\t(obj, key) =>\n\t\t\t\t\t\t\t\t\t\t\tobj && key in obj ? obj[key] : undefined,\n\t\t\t\t\t\t\t\t\t\tdata as Record<string, any>,\n\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t: null;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={field.display}\n\t\t\t\t\t\t\t\t\tclassName=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<p className=\"text-sm flex w-full justify-start col-span-1\">\n\t\t\t\t\t\t\t\t\t\t{field.display}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t\t<div className=\"text-sm flex w-full justify-start text-wrap break-all\">\n\t\t\t\t\t\t\t\t\t\t{renderValue(field, value)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})\n\t\t\t\t\t\t: fields.map((_, index) => (\n\t\t\t\t\t\t\t<Skeleton key={index} className=\"h-12 w-full\" />\n\t\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</CardContent>\n\t\t</Card>\n\t);\n};\n"],"names":["KeyValueCard","data","label","fields","renderValue","field","value","jsx","formatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":";;;;;AAyCO,MAAMA,IAAe,CAAe;AAAA,EAC1C,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AACD,MAA4B;AAC3B,QAAMC,IAAc,CAACC,GAAwBC,MAAe;AAC3D,QAAID,EAAM;AACT,aAAOA,EAAM,UAAUC,CAAK;AAE7B,QAA2BA,KAAU;AACpC,aAAO;AAER,YAAQD,EAAM,MAAA;AAAA,MACb,KAAK;AACJ,eAAO,gBAAAE,EAAC,QAAA,EAAM,UAAAC,EAAWF,CAAK,GAAE;AAAA,MACjC,KAAK;AACJ,eAAO,gBAAAC,EAAC,QAAA,EAAM,UAAAD,IAAQ,QAAQ,MAAK;AAAA,MACpC,KAAK;AACJ,eACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,wBACb,UAAA,MAAM,QAAQD,CAAK,IACjBA,EAAM,IAAI,CAACG,GAAMC,wBACjBC,GAAA,EACC,UAAA,OAAOF,KAAS,YAAWA,KAAA,gBAAAA,EAAM,UAAQA,KAAA,gBAAAA,EAAM,MAAKA,EAAA,GAD1CC,CAEZ,CACA,IACCJ,EAAA,CACJ;AAAA,MAGF,KAAK;AACJ,eAAO,gBAAAC,EAAC,QAAA,EAAM,UAAAD,EAAM,SAAA,GAAW;AAAA,MAChC;AACC,eAAO,gBAAAC,EAAC,UAAM,UAAAD,EAAA,CAAM;AAAA,IAAA;AAAA,EAEvB;AAEA,2BACEM,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAA,EACA,UAAA,gBAAAN,EAACO,GAAA,EAAW,UAAAZ,EAAA,CAAM,GACnB;AAAA,IACA,gBAAAK,EAACQ,GAAA,EACA,UAAA,gBAAAR,EAAC,OAAA,EAAI,WAAU,uBACb,UAAAN,IACEE,EAAO,IAAI,CAACE,MAAU;AAEvB,YAAMC,IAAQD,EAAM,WACjBA,EAAM,SACN,MAAM,GAAG,EACT;AAAA,QACA,CAACW,GAAKC,MACLD,KAAOC,KAAOD,IAAMA,EAAIC,CAAG,IAAI;AAAA,QAChChB;AAAA,MAAA,IAEA;AAEH,aACC,gBAAAiB;AAAA,QAAC;AAAA,QAAA;AAAA,UAEA,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAAX,EAAC,KAAA,EAAE,WAAU,gDACX,UAAAF,EAAM,SACR;AAAA,8BACC,OAAA,EAAI,WAAU,yDACb,UAAAD,EAAYC,GAAOC,CAAK,EAAA,CAC1B;AAAA,UAAA;AAAA,QAAA;AAAA,QARKD,EAAM;AAAA,MAAA;AAAA,IAWd,CAAC,IACCF,EAAO,IAAI,CAACgB,GAAGT,MAChB,gBAAAH,EAACa,GAAA,EAAqB,WAAU,cAAA,GAAjBV,CAA+B,CAC9C,GACH,EAAA,CACD;AAAA,EAAA,GACD;AAEF;"}

package/dist/components/ui/avatar.es.js

@@ -1,15 +1,15 @@
 import { jsx as o } from "react/jsx-runtime";
 import { cn as r } from "../../utils/primitives.es.js";
-function f({ className: e, initials: t, ...n }) {
+function f({ className: e, initials: n, ...t }) {
   return /* @__PURE__ */ o(
     "div",
     {
       className: r(
-        "relative text-xs font-mono font-bold flex items-center justify-center bg-accent text-accent-foreground select-none size-input shrink-0 overflow-hidden rounded-full",
+        "relative text-xs font-mono font-bold flex items-center leading-none justify-center bg-accent text-accent-foreground select-none size-input shrink-0 overflow-hidden rounded-full",
         e
       ),
-      ...n,
-      children: t
+      ...t,
+      children: n
     }
   );
 }