@cryptlex/web-components 4.1.0 → 5.0.0

package/dist/components/inputs/date-picker.es.js

@@ -0,0 +1,107 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { CalendarIcon as m } from "lucide-react";
+import { composeRenderProps as d } 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 { DatePicker as g, DateRangePicker 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/DatePicker.es.js";
+import { Dialog as $ } 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/Dialog.es.js";
+import { DateInput as l } from "./datefield.es.js";
+import { FormField as f, FieldGroup as p } from "./field.es.js";
+import { Calendar as N, RangeCalendar as v } from "../ui/calendar.es.js";
+import { Popover as D } from "../ui/popover.es.js";
+import { Button as h } from "../ui/button.es.js";
+import { cn as n } from "../../utils/primitives.es.js";
+const x = ({
+  className: r,
+  popoverClassName: a,
+  ...o
+}) => /* @__PURE__ */ e(
+  D,
+  {
+    className: d(
+      a,
+      (t) => n("w-auto p-3", t)
+    ),
+    children: /* @__PURE__ */ e(
+      $,
+      {
+        className: n(
+          "flex w-full flex-col gap-y-icon outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",
+          r
+        ),
+        ...o
+      }
+    )
+  }
+);
+function B({
+  label: r,
+  description: a,
+  errorMessage: o,
+  className: t,
+  ...s
+}) {
+  return /* @__PURE__ */ i(
+    g,
+    {
+      className: d(
+        t,
+        (c) => n("group flex flex-col gap-2", c)
+      ),
+      ...s,
+      children: [
+        /* @__PURE__ */ e(f, { label: r, description: a, errorMessage: o, children: /* @__PURE__ */ i(p, { children: [
+          /* @__PURE__ */ e(l, { className: "flex-1", variant: "ghost" }),
+          /* @__PURE__ */ e(
+            h,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "mr-1 data-[focus-visible]:ring-offset-0",
+              children: /* @__PURE__ */ e(m, { "aria-hidden": !0 })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(N, {}) })
+      ]
+    }
+  );
+}
+function G({
+  label: r,
+  description: a,
+  errorMessage: o,
+  className: t,
+  ...s
+}) {
+  return /* @__PURE__ */ i(
+    u,
+    {
+      className: d(
+        t,
+        (c) => n("group flex flex-col gap-2", c)
+      ),
+      ...s,
+      children: [
+        /* @__PURE__ */ e(f, { label: r, errorMessage: o, description: a, children: /* @__PURE__ */ i(p, { children: [
+          /* @__PURE__ */ e(l, { variant: "ghost", slot: "start" }),
+          /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "px-2 text-sm text-muted-foreground", children: "-" }),
+          /* @__PURE__ */ e(l, { className: "flex-1", variant: "ghost", slot: "end" }),
+          /* @__PURE__ */ e(
+            h,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "mr-1 data-[focus-visible]:ring-offset-0",
+              children: /* @__PURE__ */ e(m, { "aria-hidden": !0 })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(v, {}) })
+      ]
+    }
+  );
+}
+export {
+  B as DatePicker,
+  G as DateRangePicker
+};
+//# sourceMappingURL=date-picker.es.js.map

package/dist/components/inputs/date-picker.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.es.js","sources":["../../../lib/components/inputs/date-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"lucide-react\"\nimport {\n  DatePicker as AriaDatePicker,\n  DatePickerProps as AriaDatePickerProps,\n  DateRangePicker as AriaDateRangePicker,\n  DateRangePickerProps as AriaDateRangePickerProps,\n  DateValue as AriaDateValue,\n  Dialog as AriaDialog,\n  DialogProps as AriaDialogProps,\n  PopoverProps as AriaPopoverProps,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { DateInput } from \"@/components/inputs/datefield\"\nimport { FieldGroup, FormField, type FormFieldProps } from \"@/components/inputs/field\"\nimport { Button, Popover } from \"@/components/ui\"\nimport { Calendar, RangeCalendar } from \"@/components/ui/calendar\"\nimport { cn } from \"@/utils/index\"\n\nconst DatePickerContent = ({\n  className,\n  popoverClassName,\n  ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps[\"className\"] }) => (\n  <Popover\n    className={composeRenderProps(popoverClassName, (className) =>\n      cn(\"w-auto p-3\", className)\n    )}\n  >\n    <AriaDialog\n      className={cn(\n        \"flex w-full flex-col gap-y-icon outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0\",\n        className\n      )}\n      {...props}\n    />\n  </Popover>\n)\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps { }\n\nexport function DatePicker<T extends AriaDateValue>({\n  label,\n  description,\n  errorMessage,\n  className,\n  ...props\n}: DatePickerProps<T>) {\n  return (\n    <AriaDatePicker\n      className={composeRenderProps(className, (className) =>\n        cn(\"group flex flex-col gap-2\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <FieldGroup>\n          <DateInput className=\"flex-1\" variant=\"ghost\" />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"mr-1 data-[focus-visible]:ring-offset-0\"\n          >\n            <CalendarIcon aria-hidden />\n          </Button>\n        </FieldGroup>\n      </FormField>\n      <DatePickerContent>\n        <Calendar />\n      </DatePickerContent>\n    </AriaDatePicker>\n  )\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps { }\nexport function DateRangePicker<T extends AriaDateValue>({\n  label,\n  description,\n  errorMessage,\n  className,\n  ...props\n}: DateRangePickerProps<T>) {\n  return (\n    <AriaDateRangePicker\n      className={composeRenderProps(className, (className) =>\n        cn(\"group flex flex-col gap-2\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} errorMessage={errorMessage} description={description}>\n        <FieldGroup>\n          <DateInput variant=\"ghost\" slot={\"start\"} />\n          <span aria-hidden className=\"px-2 text-sm text-muted-foreground\">\n            -\n          </span>\n          <DateInput className=\"flex-1\" variant=\"ghost\" slot={\"end\"} />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className=\"mr-1 data-[focus-visible]:ring-offset-0\"\n          >\n            <CalendarIcon aria-hidden />\n          </Button>\n        </FieldGroup>\n      </FormField>\n      <DatePickerContent>\n        <RangeCalendar />\n      </DatePickerContent>\n    </AriaDateRangePicker>\n  )\n}\n\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","cn","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","CalendarIcon","Calendar","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":";;;;;;;;;;;AAmBA,MAAMA,IAAoB,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAAA,MAAmBJ;AAAA,MAAkB,CAACD,MAC/CM,EAAG,cAAcN,CAAS;AAAA,IAAA;AAAA,IAG5B,UAAA,gBAAAG;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,WAAWD;AAAA,UACT;AAAA,UACAN;AAAA,QAAA;AAAA,QAED,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EACN;AACF;AAKK,SAASM,EAAoC;AAAA,EAClD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAX;AAAA,EACA,GAAGE;AACL,GAAuB;AACrB,SACE,gBAAAU;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWR;AAAAA,QAAmBL;AAAA,QAAW,CAACA,MACxCM,EAAG,6BAA6BN,CAAS;AAAA,MAAA;AAAA,MAE1C,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAACW,GAAA,EAAU,OAAAL,GAAc,aAAAC,GAA0B,cAAAC,GACjD,4BAACI,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAZ,EAACa,GAAA,EAAU,WAAU,UAAS,SAAQ,SAAQ;AAAA,UAC9C,gBAAAb;AAAA,YAACc;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cAEV,UAAA,gBAAAd,EAACe,GAAA,EAAa,eAAW,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B,EAAA,CACF,EAAA,CACF;AAAA,QACA,gBAAAf,EAACJ,GAAA,EACC,UAAA,gBAAAI,EAACgB,GAAA,CAAA,CAAS,EAAA,CACZ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;AAGO,SAASC,EAAyC;AAAA,EACvD,OAAAX;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAX;AAAA,EACA,GAAGE;AACL,GAA4B;AAC1B,SACE,gBAAAU;AAAA,IAACS;AAAAA,IAAA;AAAA,MACC,WAAWhB;AAAAA,QAAmBL;AAAA,QAAW,CAACA,MACxCM,EAAG,6BAA6BN,CAAS;AAAA,MAAA;AAAA,MAE1C,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAACW,GAAA,EAAU,OAAAL,GAAc,cAAAE,GAA4B,aAAAD,GACnD,4BAACK,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAZ,EAACa,GAAA,EAAU,SAAQ,SAAQ,MAAM,SAAS;AAAA,4BACzC,QAAA,EAAK,eAAW,IAAC,WAAU,sCAAqC,UAAA,KAEjE;AAAA,4BACCA,GAAA,EAAU,WAAU,UAAS,SAAQ,SAAQ,MAAM,OAAO;AAAA,UAC3D,gBAAAb;AAAA,YAACc;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAU;AAAA,cAEV,UAAA,gBAAAd,EAACe,GAAA,EAAa,eAAW,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QAC5B,EAAA,CACF,EAAA,CACF;AAAA,QACA,gBAAAf,EAACJ,GAAA,EACC,UAAA,gBAAAI,EAACmB,GAAA,CAAA,CAAc,EAAA,CACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { composeRenderProps as o } 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 { DateSegment as u, DateInput as s, DateField as m, TimeField 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/DateField.es.js";
+import { FormField as f, fieldGroupVariants as x } from "./field.es.js";
+import { cn as i } from "../../utils/primitives.es.js";
+function $({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    u,
+    {
+      className: o(
+        t,
+        (d) => i(
+          "type-literal:px-0 inline rounded p-0.5 caret-transparent outline-0",
+          /* Placeholder */
+          "data-[placeholder]:text-muted-foreground",
+          /* Disabled */
+          "disabled-muted",
+          /* Focused */
+          "data-[focused]:bg-accent data-[focused]:text-accent-foreground",
+          /* Invalid */
+          "data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive",
+          d
+        )
+      ),
+      ...a
+    }
+  );
+}
+function l({
+  className: t,
+  variant: a,
+  ...d
+}) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      className: o(
+        t,
+        (r) => i(x({ variant: a }), "text-sm", r)
+      ),
+      ...d,
+      children: (r) => /* @__PURE__ */ e($, { segment: r })
+    }
+  );
+}
+function F({
+  label: t,
+  description: a,
+  className: d,
+  errorMessage: r,
+  ...c
+}) {
+  return /* @__PURE__ */ e(
+    m,
+    {
+      className: o(
+        d,
+        (n) => i("group form-field", n)
+      ),
+      ...c,
+      children: /* @__PURE__ */ e(f, { label: t, description: a, errorMessage: r, children: /* @__PURE__ */ e(l, {}) })
+    }
+  );
+}
+function N({
+  label: t,
+  description: a,
+  errorMessage: d,
+  className: r,
+  ...c
+}) {
+  return /* @__PURE__ */ e(
+    p,
+    {
+      className: o(
+        r,
+        (n) => i("group form-field", n)
+      ),
+      ...c,
+      children: /* @__PURE__ */ e(f, { label: t, description: a, errorMessage: d, children: /* @__PURE__ */ e(l, {}) })
+    }
+  );
+}
+export {
+  F as DateField,
+  l as DateInput,
+  $ as DateSegment,
+  N as TimeField
+};
+//# sourceMappingURL=datefield.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"datefield.es.js","sources":["../../../lib/components/inputs/datefield.tsx"],"sourcesContent":["\"use client\"\n\nimport { VariantProps } from \"class-variance-authority\"\nimport {\n  DateField as AriaDateField,\n  DateFieldProps as AriaDateFieldProps,\n  DateInput as AriaDateInput,\n  DateInputProps as AriaDateInputProps,\n  DateSegment as AriaDateSegment,\n  DateSegmentProps as AriaDateSegmentProps,\n  DateValue as AriaDateValue,\n  TimeField as AriaTimeField,\n  TimeFieldProps as AriaTimeFieldProps,\n  TimeValue as AriaTimeValue,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { cn } from \"@/utils/index\"\n\nimport { fieldGroupVariants, FormField, type FormFieldProps } from \"./field\"\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n  return (\n    <AriaDateSegment\n      className={composeRenderProps(className, (className) =>\n        cn(\n          \"type-literal:px-0 inline rounded p-0.5 caret-transparent outline-0\",\n          /* Placeholder */\n          \"data-[placeholder]:text-muted-foreground\",\n          /* Disabled */\n          \"disabled-muted\",\n          /* Focused */\n          \"data-[focused]:bg-accent data-[focused]:text-accent-foreground\",\n          /* Invalid */\n          \"data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive\",\n          className\n        )\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface DateInputProps\n  extends AriaDateInputProps,\n  VariantProps<typeof fieldGroupVariants> { }\n\nexport function DateInput({\n  className,\n  variant,\n  ...props\n}: Omit<DateInputProps, \"children\">) {\n  return (\n    <AriaDateInput\n      className={composeRenderProps(className, (className) =>\n        cn(fieldGroupVariants({ variant }), \"text-sm\", className)\n      )}\n      {...props}\n    >\n      {(segment) => <DateSegment segment={segment} />}\n    </AriaDateInput>\n  )\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps { }\n\nexport function DateField<T extends AriaDateValue>({\n  label,\n  description,\n  className,\n  errorMessage,\n  ...props\n}: DateFieldProps<T>) {\n  return (\n    <AriaDateField\n      className={composeRenderProps(className, (className) =>\n        cn(\"group form-field\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <DateInput />\n      </FormField>\n    </AriaDateField>\n  )\n}\n\ninterface JollyTimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps { }\n\nexport function TimeField<T extends AriaTimeValue>({\n  label,\n  description,\n  errorMessage,\n  className,\n  ...props\n}: JollyTimeFieldProps<T>) {\n  return (\n    <AriaTimeField\n      className={composeRenderProps(className, (className) =>\n        cn(\"group form-field\", className)\n      )}\n      {...props}\n    >\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <DateInput />\n      </FormField>\n    </AriaTimeField>\n  )\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","cn","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":";;;;;;AAqBO,SAASA,EAAY,EAAE,WAAAC,GAAW,GAAGC,KAA+B;AACzE,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK;AAAA,UACE;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA;AAAA,UAEA;AAAA,UACAL;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAMO,SAASK,EAAU;AAAA,EACxB,WAAAN;AAAA,EACA,SAAAO;AAAA,EACA,GAAGN;AACL,GAAqC;AACnC,SACE,gBAAAC;AAAA,IAACM;AAAAA,IAAA;AAAA,MACC,WAAWJ;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAGI,EAAmB,EAAE,SAAAF,EAAA,CAAS,GAAG,WAAWP,CAAS;AAAA,MAAA;AAAA,MAEzD,GAAGC;AAAA,MAEH,UAAA,CAACS,MAAY,gBAAAR,EAACH,GAAA,EAAY,SAAAW,EAAA,CAAkB;AAAA,IAAA;AAAA,EAAA;AAGnD;AAIO,SAASC,EAAmC;AAAA,EACjD,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAb;AAAA,EACA,cAAAc;AAAA,EACA,GAAGb;AACL,GAAsB;AACpB,SACE,gBAAAC;AAAA,IAACa;AAAAA,IAAA;AAAA,MACC,WAAWX;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,oBAAoBL,CAAS;AAAA,MAAA;AAAA,MAEjC,GAAGC;AAAA,MAEJ,4BAACe,GAAA,EAAU,OAAAJ,GAAc,aAAAC,GAA0B,cAAAC,GACjD,UAAA,gBAAAZ,EAACI,KAAU,EAAA,CACb;AAAA,IAAA;AAAA,EAAA;AAGN;AAIO,SAASW,EAAmC;AAAA,EACjD,OAAAL;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAd;AAAA,EACA,GAAGC;AACL,GAA2B;AACzB,SACE,gBAAAC;AAAA,IAACgB;AAAAA,IAAA;AAAA,MACC,WAAWd;AAAAA,QAAmBJ;AAAA,QAAW,CAACA,MACxCK,EAAG,oBAAoBL,CAAS;AAAA,MAAA;AAAA,MAEjC,GAAGC;AAAA,MAEJ,4BAACe,GAAA,EAAU,OAAAJ,GAAc,aAAAC,GAA0B,cAAAC,GACjD,UAAA,gBAAAZ,EAACI,KAAU,EAAA,CACb;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

@@ -0,0 +1,93 @@
+"use client";
+import { jsx as n, jsxs as o, Fragment as s } from "react/jsx-runtime";
+import { cva as d } from "class-variance-authority";
+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 { Group 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/Group.es.js";
+import { Label 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/Label.es.js";
+import { Text as m } 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/Text.es.js";
+import { Info as u, CircleX as p } from "lucide-react";
+import { cn as r } from "../../utils/primitives.es.js";
+const x = d([
+  "select-none text-sm font-medium leading-none",
+  /* Disabled */
+  "disabled-muted",
+  /* Invalid */
+  "group-data-[invalid]:text-destructive"
+]);
+function b({ className: t, ...e }) {
+  return /* @__PURE__ */ n(c, { className: r(x(), t), ...e });
+}
+function g({ className: t, children: e, ...i }) {
+  return /* @__PURE__ */ o(
+    m,
+    {
+      className: r("text-sm text-muted leading-tight", t),
+      ...i,
+      slot: "description",
+      children: [
+        e,
+        /* @__PURE__ */ n(u, { className: "inline size-2 align-text-top ms-0.5" })
+      ]
+    }
+  );
+}
+function h({ className: t, children: e, ...i }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: r("text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in", t),
+      ...i,
+      children: [
+        e,
+        /* @__PURE__ */ n(p, { className: "inline size-2 align-text-top ms-0.5" })
+      ]
+    }
+  );
+}
+const $ = d("", {
+  variants: {
+    variant: {
+      default: [
+        "relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-3 py-2 text-sm ring-offset-background",
+        /* Focus Within */
+        "data-[focus-within]:outline-none data-[focus-within]:ring-2 data-[focus-within]:ring-ring data-[focus-within]:ring-offset-2",
+        /* Disabled */
+        "data-[disabled]:opacity-50"
+      ],
+      ghost: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function z({ className: t, variant: e, ...i }) {
+  return /* @__PURE__ */ n(
+    l,
+    {
+      className: f(
+        t,
+        (a) => r($({ variant: e }), a)
+      ),
+      ...i
+    }
+  );
+}
+function L({ label: t, description: e, errorMessage: i, children: a }) {
+  return /* @__PURE__ */ o(s, { children: [
+    t && /* @__PURE__ */ n(b, { children: t }),
+    a,
+    e && /* @__PURE__ */ n(g, { children: e }),
+    i && /* @__PURE__ */ n(h, { children: i })
+  ] });
+}
+export {
+  g as FieldDescription,
+  h as FieldError,
+  z as FieldGroup,
+  b as FieldLabel,
+  L as FormField,
+  $ as fieldGroupVariants,
+  x as labelVariants
+};
+//# sourceMappingURL=field.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"field.es.js","sources":["../../../lib/components/inputs/field.tsx"],"sourcesContent":["\"use client\"\n\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport {\n  Group as AriaGroup,\n  GroupProps as AriaGroupProps,\n  Label as AriaLabel,\n  LabelProps as AriaLabelProps,\n  Text as AriaText,\n  TextProps as AriaTextProps,\n  composeRenderProps\n} from \"react-aria-components\"\n\nimport { cn } from \"@/utils/index\"\nimport { CircleX, Info } from \"lucide-react\"\nimport type React from \"react\"\n\nexport const labelVariants = cva([\n  \"select-none text-sm font-medium leading-none\",\n  /* Disabled */\n  \"disabled-muted\",\n  /* Invalid */\n  \"group-data-[invalid]:text-destructive\",\n])\n\nexport function FieldLabel({ className, ...props }: AriaLabelProps) {\n  return (\n    <AriaLabel className={cn(labelVariants(), className)} {...props} />\n  )\n}\n\nexport function FieldDescription({ className, children, ...props }: AriaTextProps) {\n  return (\n    <AriaText\n      className={cn(\"text-sm text-muted leading-tight\", className)}\n      {...props}\n      slot=\"description\"\n    >\n      {children}<Info className=\"inline size-2 align-text-top ms-0.5\" />\n    </AriaText>\n  )\n}\n// TODO, if we were to use AriaFieldError, it would use the internal ValidationState Context object, which might be useful for composing inputs but\n// this would have significant overlap with what Tanstack Form is already doing for us. It has pros and cons, needs to be discussed and explored.\nexport function FieldError({ className, children, ...props }: React.ComponentPropsWithRef<'div'>) {\n  return (\n    <div\n      className={cn(\"text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in\", className)}\n      {...props}\n    >\n      {children}<CircleX className=\"inline size-2 align-text-top ms-0.5\" />\n    </div>\n  )\n}\n\nexport const fieldGroupVariants = cva(\"\", {\n  variants: {\n    variant: {\n      default: [\n        \"relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-3 py-2 text-sm ring-offset-background\",\n        /* Focus Within */\n        \"data-[focus-within]:outline-none data-[focus-within]:ring-2 data-[focus-within]:ring-ring data-[focus-within]:ring-offset-2\",\n        /* Disabled */\n        \"data-[disabled]:opacity-50\",\n      ],\n      ghost: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n})\n\nexport interface GroupProps\n  extends AriaGroupProps,\n  VariantProps<typeof fieldGroupVariants> { }\n\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n  return (\n    <AriaGroup\n      className={composeRenderProps(className, (className) =>\n        cn(fieldGroupVariants({ variant }), className)\n      )}\n      {...props}\n    />\n  )\n}\n\nexport type FormFieldProps = {\n  label?: string\n  description?: React.ReactNode\n  errorMessage?: string\n  // | ((validation: AriaValidationResult) => string)\n}\n\nexport function FormField({ label, description, errorMessage, children }: FormFieldProps & {\n  children: React.ReactNode\n}) {\n  return <>\n    {label && <FieldLabel>{label}</FieldLabel>}\n    {children}\n    {description && (<FieldDescription>{description}</FieldDescription>)}\n    {errorMessage && <FieldError>{errorMessage}</FieldError>}\n  </>\n}\n"],"names":["labelVariants","cva","FieldLabel","className","props","jsx","AriaLabel","cn","FieldDescription","children","jsxs","AriaText","Info","FieldError","CircleX","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","Fragment"],"mappings":";;;;;;;;;AAiBO,MAAMA,IAAgBC,EAAI;AAAA,EAC/B;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AACF,CAAC;AAEM,SAASC,EAAW,EAAE,WAAAC,GAAW,GAAGC,KAAyB;AAClE,SACE,gBAAAC,EAACC,KAAU,WAAWC,EAAGP,KAAiBG,CAAS,GAAI,GAAGC,GAAO;AAErE;AAEO,SAASI,EAAiB,EAAE,WAAAL,GAAW,UAAAM,GAAU,GAAGL,KAAwB;AACjF,SACE,gBAAAM;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWJ,EAAG,oCAAoCJ,CAAS;AAAA,MAC1D,GAAGC;AAAA,MACJ,MAAK;AAAA,MAEJ,UAAA;AAAA,QAAAK;AAAA,QAAS,gBAAAJ,EAACO,GAAA,EAAK,WAAU,sCAAA,CAAsC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtE;AAGO,SAASC,EAAW,EAAE,WAAAV,GAAW,UAAAM,GAAU,GAAGL,KAA6C;AAChG,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWH,EAAG,oHAAoHJ,CAAS;AAAA,MAC1I,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAK;AAAA,QAAS,gBAAAJ,EAACS,GAAA,EAAQ,WAAU,sCAAA,CAAsC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGzE;AAEO,MAAMC,IAAqBd,EAAI,IAAI;AAAA,EACxC,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,QACP;AAAA;AAAA,QAEA;AAAA;AAAA,QAEA;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,IAAA;AAAA,EACT;AAAA,EAEF,iBAAiB;AAAA,IACf,SAAS;AAAA,EAAA;AAEb,CAAC;AAMM,SAASe,EAAW,EAAE,WAAAb,GAAW,SAAAc,GAAS,GAAGb,KAAqB;AACvE,SACE,gBAAAC;AAAA,IAACa;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QAAmBhB;AAAA,QAAW,CAACA,MACxCI,EAAGQ,EAAmB,EAAE,SAAAE,EAAA,CAAS,GAAGd,CAAS;AAAA,MAAA;AAAA,MAE9C,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AASO,SAASgB,EAAU,EAAE,OAAAC,GAAO,aAAAC,GAAa,cAAAC,GAAc,UAAAd,KAE3D;AACD,SAAO,gBAAAC,EAAAc,GAAA,EACJ,UAAA;AAAA,IAAAH,KAAS,gBAAAhB,EAACH,KAAY,UAAAmB,EAAA,CAAM;AAAA,IAC5BZ;AAAA,IACAa,KAAgB,gBAAAjB,EAACG,GAAA,EAAkB,UAAAc,EAAA,CAAY;AAAA,IAC/CC,KAAgB,gBAAAlB,EAACQ,GAAA,EAAY,UAAAU,EAAA,CAAa;AAAA,EAAA,GAC7C;AACF;"}

package/dist/components/inputs/id-search.es.js

@@ -0,0 +1,58 @@
+import { jsx as t, Fragment as b, jsxs as d } from "react/jsx-runtime";
+import { SearchField as S } from "./searchfield.es.js";
+import { Menu as x, MenuItem as F } from "../ui/menu.es.js";
+import { useQuery as u } from "@tanstack/react-query";
+import { useId as I, useState as C } from "react";
+import { Autocomplete 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/Autocomplete.es.js";
+import { PopoverTrigger as q, Popover as j } from "../ui/popover.es.js";
+import { Button as A } from "../ui/button.es.js";
+import { useFieldContext as K } from "../../utils/form-context.es.js";
+function M({ value: r, disabled: s = !1, searchFn: n, multiple: o, onChange: l, onBlur: i, accessor: f = "id", idLookup: m }) {
+  const c = I(), [a, p] = C(""), { data: h, isError: $, isFetching: E, error: P } = u({
+    queryKey: [c, a],
+    queryFn: () => n(a)
+  }), y = u({
+    queryKey: [c, r],
+    queryFn: () => m(Array.from(r.keys()).map((e) => e.toString())),
+    enabled: m && r.size > 0
+  });
+  return /* @__PURE__ */ t(b, { children: /* @__PURE__ */ d(q, { onOpenChange: (e) => {
+    e || i == null || i(r);
+  }, children: [
+    /* @__PURE__ */ t(A, { className: "min-w-3xs", isDisabled: s, children: (() => {
+      var e;
+      return console.error(Array.from(r.keys()).map((g) => g.toString())), (e = y.data) == null ? void 0 : e.join(",");
+    })() }),
+    /* @__PURE__ */ t(j, { className: "p-2", children: /* @__PURE__ */ d(
+      N,
+      {
+        inputValue: a,
+        onInputChange: p,
+        children: [
+          /* @__PURE__ */ t(S, { className: "mb-icon", autoFocus: !0 }),
+          /* @__PURE__ */ t(x, { selectedKeys: r, selectionMode: o ? "multiple" : "single", onSelectionChange: (e) => {
+            typeof e != "string" && l(e);
+          }, className: "text-sm", items: h, renderEmptyState: () => "No results found.", children: (e) => /* @__PURE__ */ t(F, { id: e[f], children: e.name }, e.id) })
+        ]
+      }
+    ) })
+  ] }) });
+}
+function V({ disabled: r, ...s }) {
+  const n = K();
+  return /* @__PURE__ */ t(
+    M,
+    {
+      ...s,
+      disabled: r || n.form.state.isSubmitting,
+      value: n.state.value,
+      onBlur: (o) => n.handleBlur(),
+      onChange: (o) => n.handleChange(o)
+    }
+  );
+}
+export {
+  M as IdSearchInput,
+  V as TfIdSearchInput
+};
+//# sourceMappingURL=id-search.es.js.map

package/dist/components/inputs/id-search.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"id-search.es.js","sources":["../../../lib/components/inputs/id-search.tsx"],"sourcesContent":["import { SearchField } from \"@/components/inputs/searchfield\";\nimport { Button, Popover, PopoverTrigger } from \"@/components/ui\";\nimport { Menu, MenuItem } from \"@/components/ui/menu\";\nimport { useFieldContext } from \"@/utils\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useId, useState } from \"react\";\nimport { Autocomplete } from 'react-aria-components';\n\nexport type SelectState = Set<number | string>;\n\ntype SearchInputProps<T> = {\n    value: SelectState;\n    onChange: (v: SelectState) => void\n    onBlur?: (v: SelectState) => void\n    multiple: boolean\n    disabled?: boolean\n    idLookup?: (ids: string[]) => Promise<string[] | undefined>\n    searchFn: (q: string) => Promise<T[] | undefined>\n    accessor: 'id' | 'name';\n}\nexport function IdSearchInput<T extends { id: string; name: string }>({ value, disabled = false, searchFn, multiple, onChange, onBlur, accessor = 'id', idLookup }: SearchInputProps<T>) {\n    const id = useId();\n    const [search, _setSearch] = useState('');\n    const { data, isError, isFetching, error } = useQuery({\n        queryKey: [id, search],\n        queryFn: () => searchFn(search)\n    })\n\n    const namesQuery = useQuery({\n        queryKey: [id, value],\n        queryFn: () => idLookup!(Array.from(value.keys()).map(id => id.toString())),\n        enabled: idLookup && value.size > 0\n    })\n\n    const renderButtonLabel = () => {\n        console.error(Array.from(value.keys()).map(id => id.toString()))\n        return namesQuery.data?.join(',');\n    };\n\n    return <>\n        <PopoverTrigger onOpenChange={(o) => {\n            if (!o) {\n                // searchInputRef.current?.focus();\n                onBlur?.(value);\n            }\n        }}>\n            <Button className={'min-w-3xs'} isDisabled={disabled}>{renderButtonLabel()}</Button>\n            <Popover className={'p-2'}>\n                <Autocomplete\n                    inputValue={search}\n                    onInputChange={_setSearch}\n                >\n                    <SearchField className={'mb-icon'} autoFocus />\n                    <Menu selectedKeys={value} selectionMode={multiple ? \"multiple\" : 'single'} onSelectionChange={(s) => {\n                        if (typeof (s) === 'string') return;\n                        onChange(s)\n                    }} className={'text-sm'} items={data} renderEmptyState={() => 'No results found.'}>\n                        {(item) => (<MenuItem key={item['id']} id={item[accessor]}>{item.name}</MenuItem>)}\n                    </Menu>\n                </Autocomplete>\n            </Popover>\n        </PopoverTrigger >\n    </>\n\n}\n\nexport function TfIdSearchInput<T extends { id: string; name: string }>({ disabled, ...props }: Omit<SearchInputProps<T>, 'value' | 'onChange'>) {\n    const field = useFieldContext<SelectState>();\n    return (\n        <IdSearchInput\n            {...props}\n            disabled={disabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={(e) => field.handleChange(e)}\n        />\n    );\n}"],"names":["IdSearchInput","value","disabled","searchFn","multiple","onChange","onBlur","accessor","idLookup","id","useId","search","_setSearch","useState","data","isError","isFetching","error","useQuery","namesQuery","jsx","Fragment","jsxs","PopoverTrigger","o","Button","_a","Popover","Autocomplete","SearchField","Menu","s","item","MenuItem","TfIdSearchInput","props","field","useFieldContext","_","e"],"mappings":";;;;;;;;;AAoBO,SAASA,EAAsD,EAAE,OAAAC,GAAO,UAAAC,IAAW,IAAO,UAAAC,GAAU,UAAAC,GAAU,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,IAAW,MAAM,UAAAC,EAAA,GAAiC;AACrL,QAAMC,IAAKC,EAAA,GACL,CAACC,GAAQC,CAAU,IAAIC,EAAS,EAAE,GAClC,EAAE,MAAAC,GAAM,SAAAC,GAAS,YAAAC,GAAY,OAAAC,EAAA,IAAUC,EAAS;AAAA,IAClD,UAAU,CAACT,GAAIE,CAAM;AAAA,IACrB,SAAS,MAAMR,EAASQ,CAAM;AAAA,EAAA,CACjC,GAEKQ,IAAaD,EAAS;AAAA,IACxB,UAAU,CAACT,GAAIR,CAAK;AAAA,IACpB,SAAS,MAAMO,EAAU,MAAM,KAAKP,EAAM,MAAM,EAAE,IAAI,CAAAQ,MAAMA,EAAG,SAAA,CAAU,CAAC;AAAA,IAC1E,SAASD,KAAYP,EAAM,OAAO;AAAA,EAAA,CACrC;AAOD,SAAO,gBAAAmB,EAAAC,GAAA,EACH,UAAA,gBAAAC,EAACC,GAAA,EAAe,cAAc,CAACC,MAAM;AACjC,IAAKA,KAEDlB,KAAA,QAAAA,EAASL;AAAA,EAEjB,GACI,UAAA;AAAA,IAAA,gBAAAmB,EAACK,KAAO,WAAW,aAAa,YAAYvB,GAAW,WAZrC,MAAM;;AAC5B,qBAAQ,MAAM,MAAM,KAAKD,EAAM,KAAA,CAAM,EAAE,IAAI,CAAAQ,MAAMA,EAAG,SAAA,CAAU,CAAC,IACxDiB,IAAAP,EAAW,SAAX,gBAAAO,EAAiB,KAAK;AAAA,IACjC,MASmF;AAAA,IAC3E,gBAAAN,EAACO,GAAA,EAAQ,WAAW,OAChB,UAAA,gBAAAL;AAAA,MAACM;AAAAA,MAAA;AAAA,QACG,YAAYjB;AAAA,QACZ,eAAeC;AAAA,QAEf,UAAA;AAAA,UAAA,gBAAAQ,EAACS,GAAA,EAAY,WAAW,WAAW,WAAS,IAAC;AAAA,UAC7C,gBAAAT,EAACU,GAAA,EAAK,cAAc7B,GAAO,eAAeG,IAAW,aAAa,UAAU,mBAAmB,CAAC2B,MAAM;AAClG,YAAI,OAAQA,KAAO,YACnB1B,EAAS0B,CAAC;AAAA,UACd,GAAG,WAAW,WAAW,OAAOjB,GAAM,kBAAkB,MAAM,qBACzD,UAAA,CAACkB,wBAAWC,GAAA,EAA0B,IAAID,EAAKzB,CAAQ,GAAI,YAAK,QAAtCyB,EAAK,EAAsC,EAAA,CAC1E;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACJ,CACJ;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAEJ;AAEO,SAASE,EAAwD,EAAE,UAAAhC,GAAU,GAAGiC,KAA0D;AAC7I,QAAMC,IAAQC,EAAA;AACd,SACI,gBAAAjB;AAAA,IAACpB;AAAA,IAAA;AAAA,MACI,GAAGmC;AAAA,MACJ,UAAUjC,KAAYkC,EAAM,KAAK,MAAM;AAAA,MACvC,OAAOA,EAAM,MAAM;AAAA,MACnB,QAAQ,CAAAE,MAAKF,EAAM,WAAA;AAAA,MACnB,UAAU,CAACG,MAAMH,EAAM,aAAaG,CAAC;AAAA,IAAA;AAAA,EAAA;AAGjD;"}

package/dist/components/inputs/input-otp.es.js

@@ -31,7 +31,7 @@ function P({
   className: r,
   ...i
 }) {
-  const o = d.use(p), { char: s, hasFakeCaret: a, isActive: c } = o.slots[e];
+  const o = d.use(p), { char: a, hasFakeCaret: s, isActive: c } = o.slots[e];
   return /* @__PURE__ */ u(
     "div",
     {
@@ -42,8 +42,8 @@ function P({
       ),
       ...i,
       children: [
-        s,
-        a && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t("div", { className: "h-icon w-px animate-caret-blink bg-foreground duration-1000" }) })
+        a,
+        s && /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ t("div", { className: "h-icon w-px animate-caret-blink bg-foreground duration-1000" }) })
       ]
     }
   );

package/dist/components/inputs/license-type-select.es.js

@@ -1,30 +1,31 @@
-import { jsx as e, Fragment as l } from "react/jsx-runtime";
-import { TfSingleSelect as n } from "./select.es.js";
-function i({
-  ...o
-}) {
+import { jsx as e, Fragment as i } from "react/jsx-runtime";
+import { TfSingleSelect as d, SelectItem as n } from "./select.es.js";
+const r = [
+  {
+    label: /* @__PURE__ */ e(i, { children: "Node-locked" }),
+    id: "node-locked"
+  },
+  {
+    label: /* @__PURE__ */ e(i, { children: "Hosted floating" }),
+    id: "hosted-floating"
+  },
+  {
+    label: /* @__PURE__ */ e(i, { children: "LexFloatServer" }),
+    id: "on-premise-floating"
+  }
+];
+function a({ ...o }) {
   return /* @__PURE__ */ e(
-    n,
+    d,
     {
-      options: [
-        {
-          label: /* @__PURE__ */ e(l, { children: "Node-locked" }),
-          value: "node-locked"
-        },
-        {
-          label: /* @__PURE__ */ e(l, { children: "Hosted floating" }),
-          value: "hosted-floating"
-        },
-        {
-          label: /* @__PURE__ */ e(l, { children: "LexFloatServer" }),
-          value: "on-premise-floating"
-        }
-      ],
-      ...o
+      ...o,
+      items: r,
+      children: (l) => /* @__PURE__ */ e(n, { id: l.id, children: l.label }, l.id)
     }
   );
 }
 export {
-  i as TfLicenseTypeSelect
+  r as LICENSE_TYPE_OPTIONS,
+  a as TfLicenseTypeSelect
 };
 //# sourceMappingURL=license-type-select.es.js.map

package/dist/components/inputs/license-type-select.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"license-type-select.es.js","sources":["../../../lib/components/inputs/license-type-select.tsx"],"sourcesContent":["import {\n\tTfSingleSelect,\n\ttype TfSingleSelectProps,\n} from \"@/components/inputs/select\";\n\nexport function TfLicenseTypeSelect({\n\t...props\n}: Omit<TfSingleSelectProps, \"options\">) {\n\treturn (\n\t\t<TfSingleSelect\n\t\t\toptions={[\n\t\t\t\t{\n\t\t\t\t\tlabel: <>Node-locked</>,\n\t\t\t\t\tvalue: \"node-locked\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: <>Hosted floating</>,\n\t\t\t\t\tvalue: \"hosted-floating\",\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tlabel: <>LexFloatServer</>,\n\t\t\t\t\tvalue: \"on-premise-floating\",\n\t\t\t\t},\n\t\t\t]}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["TfLicenseTypeSelect","props","jsx","TfSingleSelect"],"mappings":";;AAKO,SAASA,EAAoB;AAAA,EACnC,GAAGC;AACJ,GAAyC;AACxC,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACA,SAAS;AAAA,QACR;AAAA,UACC,8BAAS,UAAA,cAAA,CAAW;AAAA,UACpB,OAAO;AAAA,QAAA;AAAA,QAER;AAAA,UACC,8BAAS,UAAA,kBAAA,CAAe;AAAA,UACxB,OAAO;AAAA,QAAA;AAAA,QAER;AAAA,UACC,8BAAS,UAAA,iBAAA,CAAc;AAAA,UACvB,OAAO;AAAA,QAAA;AAAA,MACR;AAAA,MAEA,GAAGF;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"license-type-select.es.js","sources":["../../../lib/components/inputs/license-type-select.tsx"],"sourcesContent":["import { SelectItem, TfSingleSelect } from \"@/components/inputs/select\";\n\nexport const LICENSE_TYPE_OPTIONS = [\n\t{\n\t\tlabel: <>Node-locked</>,\n\t\tid: \"node-locked\",\n\t},\n\t{\n\t\tlabel: <>Hosted floating</>,\n\t\tid: \"hosted-floating\",\n\t},\n\t{\n\t\tlabel: <>LexFloatServer</>,\n\t\tid: \"on-premise-floating\",\n\t},\n];\n\nexport function TfLicenseTypeSelect({ ...props }: Omit<React.ComponentProps<typeof TfSingleSelect>, 'items' | 'children'>) {\n\treturn (\n\t\t<TfSingleSelect\n\t\t\t{...props}\n\t\t\titems={LICENSE_TYPE_OPTIONS}\n\t\t>\n\t\t\t{(item) => <SelectItem id={item.id} key={item.id}>{item.label}</SelectItem>}\n\t\t</TfSingleSelect>\n\t);\n};\n"],"names":["LICENSE_TYPE_OPTIONS","TfLicenseTypeSelect","props","jsx","TfSingleSelect","item","SelectItem"],"mappings":";;AAEO,MAAMA,IAAuB;AAAA,EACnC;AAAA,IACC,8BAAS,UAAA,cAAA,CAAW;AAAA,IACpB,IAAI;AAAA,EAAA;AAAA,EAEL;AAAA,IACC,8BAAS,UAAA,kBAAA,CAAe;AAAA,IACxB,IAAI;AAAA,EAAA;AAAA,EAEL;AAAA,IACC,8BAAS,UAAA,iBAAA,CAAc;AAAA,IACvB,IAAI;AAAA,EAAA;AAEN;AAEO,SAASC,EAAoB,EAAE,GAAGC,KAAkF;AAC1H,SACC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,GAAGF;AAAA,MACJ,OAAOF;AAAA,MAEN,UAAA,CAACK,MAAS,gBAAAF,EAACG,GAAA,EAAW,IAAID,EAAK,IAAmB,UAAAA,EAAK,MAAA,GAAfA,EAAK,EAAgB;AAAA,IAAA;AAAA,EAAA;AAGjE;"}

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

@@ -1,70 +1,54 @@
-import { jsxs as d, Fragment as i, jsx as n } from "react/jsx-runtime";
-import { DropdownMenu as M, DropdownMenuTrigger as k, DropdownMenuContent as w, DropdownMenuGroup as S, DropdownMenuCheckboxItem as s } from "../ui/dropdown-menu.es.js";
-import { useFieldContext as x } from "../../utils/form-context.es.js";
-import B, { useCallback as h } from "react";
-import { cn as j } from "../../utils/primitives.es.js";
-function A({
-  options: r,
+import { jsx as r } from "react/jsx-runtime";
+import { FormField as u } from "./field.es.js";
+import { EasyMenu as d, MenuItem as m } from "../ui/menu.es.js";
+import { useFieldContext as c } from "../../utils/form-context.es.js";
+import { getFieldErrorMessage as f } from "../../utils/form-hook.es.js";
+function M({
+  options: i,
   value: l,
-  setValue: c,
-  buttonLabel: o,
-  className: m,
-  ...u
+  setValue: t,
+  label: n,
+  errorMessage: s,
+  description: o,
+  ...a
 }) {
-  const f = B.useCallback(() => {
-    const e = l ?? [];
-    return r.filter((t) => e.includes(t.value)).map((t, C, D) => /* @__PURE__ */ d(i, { children: [
-      t.label,
-      C + 1 !== D.length && /* @__PURE__ */ n(i, { children: ", " })
-    ] }));
-  }, [l]), g = (e) => {
-    l.includes(e) ? c([...l.filter((t) => t !== e)]) : c([...l, e]);
-  }, b = () => {
-    a() ? c([]) : c(r.map((e) => e.value));
-  }, p = h((e) => l.includes(e), [l]), a = h(() => l.length === r.length, [l, r]);
-  return /* @__PURE__ */ n(i, { children: /* @__PURE__ */ d(M, { children: [
-    /* @__PURE__ */ n(k, { ...u, asChild: !0, children: /* @__PURE__ */ n("button", { ...u, className: j("btn-dropdown", m), children: o || f() }) }),
-    /* @__PURE__ */ n(w, { children: /* @__PURE__ */ d(S, { children: [
-      /* @__PURE__ */ n(
-        s,
-        {
-          className: "italic",
-          onSelect: (e) => {
-            e.preventDefault(), b();
-          },
-          checked: a(),
-          children: "(Select all)"
-        }
-      ),
-      r.map((e) => /* @__PURE__ */ n(
-        s,
+  return /* @__PURE__ */ r("div", { className: "group form-field", children: /* @__PURE__ */ r(u, { label: n, description: o, errorMessage: s, children: /* @__PURE__ */ r(
+    d,
+    {
+      selectionMode: "multiple",
+      selectedKeys: l,
+      onSelectionChange: (e) => {
+        typeof e != "string" && t(e);
+      },
+      label: l.size,
+      ...a,
+      children: i.map((e) => /* @__PURE__ */ r(
+        m,
         {
-          onSelect: (t) => {
-            t.preventDefault(), g(e.value);
-          },
-          disabled: e.disabled,
-          checked: p(e.value),
+          id: e.value,
+          isDisabled: e == null ? void 0 : e.disabled,
           children: e.label
         },
         e.value
       ))
-    ] }) })
-  ] }) });
+    }
+  ) }) });
 }
-function I({ ...r }) {
-  const l = x();
-  return /* @__PURE__ */ n(
-    A,
+function v({ ...i }) {
+  const l = c();
+  return /* @__PURE__ */ r(
+    M,
     {
       value: l.state.value,
       setValue: l.setValue,
-      onBlur: l.handleBlur,
-      ...r
+      onClose: l.handleBlur,
+      errorMessage: f(l),
+      ...i
     }
   );
 }
 export {
-  A as MultiSelect,
-  I as TfMultiSelect
+  M as MultiSelect,
+  v as TfMultiSelect
 };
 //# sourceMappingURL=multi-select.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"multi-select.es.js","sources":["../../../lib/components/inputs/multi-select.tsx"],"sourcesContent":["import {\n\tDropdownMenu,\n\tDropdownMenuCheckboxItem,\n\tDropdownMenuContent,\n\tDropdownMenuGroup,\n\tDropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport React, { useCallback } from \"react\";\n\nexport interface SelectionProps<V extends number | string | string[]>\n\textends Omit<\n\t\tReact.ComponentProps<\"button\">,\n\t\t\"value\" | \"values\" | \"defaultValue\"\n\t> {\n\tvalue: V;\n\tsetValue: (v: V) => void;\n\tbuttonLabel?: React.ReactNode;\n\toptions: {\n\t\tvalue: string;\n\t\tlabel: React.ReactElement;\n\t\tdisabled?: boolean;\n\t}[];\n}\n\nexport interface MultiSelectProps extends SelectionProps<string[]> { }\n\nexport function MultiSelect({\n\toptions,\n\tvalue,\n\tsetValue,\n\tbuttonLabel,\n\tclassName,\n\t...props\n}: MultiSelectProps) {\n\t// Returns an array of labels for every value that’s currently selected.\n\t// If nothing is selected, it returns an empty array.\n\tconst defaultButtonLabel = React.useCallback(() => {\n\t\tconst selected = value ?? [];\n\t\treturn options\n\t\t\t.filter((o) => selected.includes(o.value))\n\t\t\t.map((o, i, arr) => (\n\t\t\t\t<>\n\t\t\t\t\t{o.label}\n\t\t\t\t\t{i + 1 !== arr.length && <>, </>}\n\t\t\t\t</>\n\t\t\t));\n\t}, [value]);\n\n\tconst toggleValue = (v: string) => {\n\t\tvalue.includes(v)\n\t\t\t? setValue([...value.filter((vx) => vx !== v)])\n\t\t\t: setValue([...value, v]);\n\t};\n\n\t// Select/deselect all\n\tconst toggleAll = () => {\n\t\tareAllSelected() ? setValue([]) : setValue(options.map((opt) => opt.value));\n\t};\n\n\tconst isChecked = useCallback((v: string) => value.includes(v), [value]);\n\n\tconst areAllSelected = useCallback(() => {\n\t\treturn value.length === options.length;\n\t}, [value, options]);\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 {...props} className={cn(\"btn-dropdown\", className)}>\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<DropdownMenuGroup>\n\t\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\t\tclassName=\"italic\"\n\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\ttoggleAll();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tchecked={areAllSelected()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t(Select all)\n\t\t\t\t\t\t</DropdownMenuCheckboxItem>\n\t\t\t\t\t\t{options.map((opt) => (\n\t\t\t\t\t\t\t<DropdownMenuCheckboxItem\n\t\t\t\t\t\t\t\tonSelect={(e) => {\n\t\t\t\t\t\t\t\t\t// Don't close the popover when selecting items\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t\ttoggleValue(opt.value);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tkey={opt.value}\n\t\t\t\t\t\t\t\tdisabled={opt.disabled}\n\t\t\t\t\t\t\t\tchecked={isChecked(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</DropdownMenuCheckboxItem>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</DropdownMenuGroup>\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\t\t</>\n\t);\n};\n\nexport interface TfMultiSelectProps\n\textends Omit<MultiSelectProps, \"value\" | \"setValue\"> { }\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n\tconst field = useFieldContext<string[]>();\n\n\treturn (\n\t\t<MultiSelect\n\t\t\tvalue={field.state.value}\n\t\t\tsetValue={field.setValue}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["MultiSelect","options","value","setValue","buttonLabel","className","props","defaultButtonLabel","React","selected","o","i","arr","jsxs","Fragment","toggleValue","v","vx","toggleAll","areAllSelected","opt","isChecked","useCallback","jsx","DropdownMenu","DropdownMenuTrigger","cn","DropdownMenuContent","DropdownMenuGroup","DropdownMenuCheckboxItem","e","TfMultiSelect","field","useFieldContext"],"mappings":";;;;;AA4BO,SAASA,EAAY;AAAA,EAC3B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACJ,GAAqB;AAGpB,QAAMC,IAAqBC,EAAM,YAAY,MAAM;AAClD,UAAMC,IAAWP,KAAS,CAAA;AAC1B,WAAOD,EACL,OAAO,CAACS,MAAMD,EAAS,SAASC,EAAE,KAAK,CAAC,EACxC,IAAI,CAACA,GAAGC,GAAGC,MACX,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,MAAAJ,EAAE;AAAA,MACFC,IAAI,MAAMC,EAAI,iCAAY,UAAA,KAAA,CAAE;AAAA,IAAA,EAAA,CAC9B,CACA;AAAA,EACH,GAAG,CAACV,CAAK,CAAC,GAEJa,IAAc,CAACC,MAAc;AAClC,IAAAd,EAAM,SAASc,CAAC,IACbb,EAAS,CAAC,GAAGD,EAAM,OAAO,CAACe,MAAOA,MAAOD,CAAC,CAAC,CAAC,IAC5Cb,EAAS,CAAC,GAAGD,GAAOc,CAAC,CAAC;AAAA,EAC1B,GAGME,IAAY,MAAM;AACvB,IAAAC,MAAmBhB,EAAS,CAAA,CAAE,IAAIA,EAASF,EAAQ,IAAI,CAACmB,MAAQA,EAAI,KAAK,CAAC;AAAA,EAC3E,GAEMC,IAAYC,EAAY,CAACN,MAAcd,EAAM,SAASc,CAAC,GAAG,CAACd,CAAK,CAAC,GAEjEiB,IAAiBG,EAAY,MAC3BpB,EAAM,WAAWD,EAAQ,QAC9B,CAACC,GAAOD,CAAO,CAAC;AAEnB,SACC,gBAAAsB,EAAAT,GAAA,EACC,4BAACU,GAAA,EACA,UAAA;AAAA,IAAA,gBAAAD,EAACE,KAAqB,GAAGnB,GAAO,SAAO,IACtC,UAAA,gBAAAiB,EAAC,YAAQ,GAAGjB,GAAO,WAAWoB,EAAG,gBAAgBrB,CAAS,GACxD,eAA4BE,KAC9B,GACD;AAAA,IACA,gBAAAgB,EAACI,GAAA,EACA,UAAA,gBAAAd,EAACe,GAAA,EACA,UAAA;AAAA,MAAA,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,UAAU,CAAC,MAAM;AAChB,cAAE,eAAA,GACFX,EAAA;AAAA,UACD;AAAA,UACA,SAASC,EAAA;AAAA,UACT,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAGAlB,EAAQ,IAAI,CAACmB,MACb,gBAAAG;AAAA,QAACM;AAAA,QAAA;AAAA,UACA,UAAU,CAACC,MAAM;AAEhB,YAAAA,EAAE,eAAA,GACFf,EAAYK,EAAI,KAAK;AAAA,UACtB;AAAA,UAEA,UAAUA,EAAI;AAAA,UACd,SAASC,EAAUD,EAAI,KAAK;AAAA,UAE3B,UAAAA,EAAI;AAAA,QAAA;AAAA,QAJAA,EAAI;AAAA,MAAA,CAMV;AAAA,IAAA,EAAA,CACF,EAAA,CACD;AAAA,EAAA,EAAA,CACD,EAAA,CACD;AAEF;AAIO,SAASW,EAAc,EAAE,GAAGzB,KAA6B;AAC/D,QAAM0B,IAAQC,EAAA;AAEd,SACC,gBAAAV;AAAA,IAACvB;AAAA,IAAA;AAAA,MACA,OAAOgC,EAAM,MAAM;AAAA,MACnB,UAAUA,EAAM;AAAA,MAChB,QAAQA,EAAM;AAAA,MACb,GAAG1B;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"multi-select.es.js","sources":["../../../lib/components/inputs/multi-select.tsx"],"sourcesContent":["import { FormField, type FormFieldProps } from \"@/components/inputs/field\";\nimport { EasyMenu, MenuItem } from \"@/components/ui/menu\";\nimport { getFieldErrorMessage } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport React from \"react\";\n\nexport interface SelectionProps<V extends number | string | Set<string | number>> {\n\tvalue: V;\n\tsetValue: (v: V) => void;\n\tbuttonLabel?: React.ReactNode;\n\toptions: {\n\t\tvalue: string;\n\t\tlabel: React.ReactElement;\n\t\tdisabled?: boolean;\n\t}[];\n}\n\nexport interface MultiSelectProps extends SelectionProps<Set<string | number>>, FormFieldProps, Omit<React.ComponentProps<typeof EasyMenu>, 'label'> { }\n\nexport function MultiSelect({\n\toptions,\n\tvalue,\n\tsetValue,\n\tlabel,\n\terrorMessage,\n\tdescription,\n\t...props\n}: MultiSelectProps) {\n\treturn (\n\t\t<div className=\"group form-field\">\n\t\t\t<FormField {...{ label, description, errorMessage }}>\n\t\t\t\t<EasyMenu\n\t\t\t\t\tselectionMode=\"multiple\"\n\t\t\t\t\tselectedKeys={value}\n\t\t\t\t\tonSelectionChange={(v) => {\n\t\t\t\t\t\tif (typeof (v) === 'string') return\n\t\t\t\t\t\tsetValue(v)\n\t\t\t\t\t}}\n\t\t\t\t\tlabel={value.size}\n\t\t\t\t\t{...props}>\n\t\t\t\t\t{options.map((opt) => (\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tid={opt.value}\n\t\t\t\t\t\t\tkey={opt.value}\n\t\t\t\t\t\t\tisDisabled={opt?.disabled}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{opt.label}\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</EasyMenu>\n\t\t\t</FormField>\n\t\t</div>\n\t);\n};\n\nexport interface TfMultiSelectProps\n\textends Omit<MultiSelectProps, \"value\" | \"setValue\"> { }\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n\tconst field = useFieldContext<Set<number | string>>();\n\n\treturn (\n\t\t<MultiSelect\n\t\t\tvalue={field.state.value}\n\t\t\tsetValue={field.setValue}\n\t\t\tonClose={field.handleBlur}\n\t\t\terrorMessage={getFieldErrorMessage(field)}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["MultiSelect","options","value","setValue","label","errorMessage","description","props","jsx","FormField","EasyMenu","v","opt","MenuItem","TfMultiSelect","field","useFieldContext","getFieldErrorMessage"],"mappings":";;;;;AAmBO,SAASA,EAAY;AAAA,EAC3B,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACJ,GAAqB;AACpB,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,oBACd,UAAA,gBAAAA,EAACC,GAAA,EAAgB,OAAAL,GAAO,aAAAE,GAAa,cAAAD,GACpC,UAAA,gBAAAG;AAAA,IAACE;AAAA,IAAA;AAAA,MACA,eAAc;AAAA,MACd,cAAcR;AAAA,MACd,mBAAmB,CAACS,MAAM;AACzB,QAAI,OAAQA,KAAO,YACnBR,EAASQ,CAAC;AAAA,MACX;AAAA,MACA,OAAOT,EAAM;AAAA,MACZ,GAAGK;AAAA,MACH,UAAAN,EAAQ,IAAI,CAACW,MACb,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,IAAID,EAAI;AAAA,UAER,YAAYA,KAAA,gBAAAA,EAAK;AAAA,UAEhB,UAAAA,EAAI;AAAA,QAAA;AAAA,QAHAA,EAAI;AAAA,MAAA,CAKV;AAAA,IAAA;AAAA,EAAA,GAEH,EAAA,CACD;AAEF;AAIO,SAASE,EAAc,EAAE,GAAGP,KAA6B;AAC/D,QAAMQ,IAAQC,EAAA;AAEd,SACC,gBAAAR;AAAA,IAACR;AAAA,IAAA;AAAA,MACA,OAAOe,EAAM,MAAM;AAAA,MACnB,UAAUA,EAAM;AAAA,MAChB,SAASA,EAAM;AAAA,MACf,cAAcE,EAAqBF,CAAK;AAAA,MACvC,GAAGR;AAAA,IAAA;AAAA,EAAA;AAGP;"}