@cryptlex/web-components 4.1.0 → 5.1.0

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

@@ -1,39 +1,62 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import { useFieldContext as s } from "../../utils/form-context.es.js";
-import { CircleDashed as a, Check as l } from "lucide-react";
-import { cn as c } from "../../utils/primitives.es.js";
-function u({ className: n, checked: e, indeterminate: r, ...i }) {
-  return /* @__PURE__ */ t("div", { className: "relative size-input", children: [
-    r && /* @__PURE__ */ o(a, { className: "pointer-events-none text-primary-foreground absolute size-icon top-2 left-2" }),
-    e && !r && /* @__PURE__ */ o(l, { className: "pointer-events-none text-primary-foreground absolute size-icon top-2 left-2" }),
-    /* @__PURE__ */ o(
-      "input",
-      {
-        checked: e,
-        type: "checkbox",
-        className: c(
-          "appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-          n
-        ),
-        ...i
-      }
-    )
-  ] });
+import { jsx as e, Fragment as a } from "react/jsx-runtime";
+import { CheckboxGroup as l, Checkbox as b } 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/Checkbox.es.js";
+import { composeRenderProps as i } 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 { FormField as m, labelVariants as p } from "./field.es.js";
+import { Minus as f, Check as x } from "lucide-react";
+import { useFieldContext as g } from "../../utils/form-context.es.js";
+import { cn as d } from "../../utils/primitives.es.js";
+const z = l;
+function h({ className: o, label: r, description: n, errorMessage: s, ...u }) {
+  return /* @__PURE__ */ e("div", { className: "group form-field", children: /* @__PURE__ */ e(m, { label: r, description: n, errorMessage: s, children: /* @__PURE__ */ e(
+    b,
+    {
+      className: i(
+        o,
+        (t) => d(
+          "group/checkbox cursor-pointer focus-ring flex items-center gap-x-2",
+          /* Disabled */
+          "disabled-muted",
+          p,
+          t
+        )
+      ),
+      ...u,
+      children: i(/* @__PURE__ */ e(a, {}), (t, c) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: d(
+            "flex size-input shrink-0 items-center bg-card justify-center border border-input text-current ring-offset-background",
+            /* Selected */
+            "group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground",
+            /* Disabled */
+            "group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50",
+            /* Invalid */
+            "group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground",
+            /* Resets */
+            "focus:outline-none focus-visible:outline-none"
+          ),
+          children: c.isIndeterminate ? /* @__PURE__ */ e(f, { className: "size-icon" }) : c.isSelected ? /* @__PURE__ */ e(x, { className: "size-icon" }) : null
+        }
+      ) }))
+    }
+  ) }) });
 }
-function m({ ...n }) {
-  const e = s();
-  return /* @__PURE__ */ o(
-    u,
+function S({ ...o }) {
+  const r = g();
+  return /* @__PURE__ */ e(
+    h,
     {
-      checked: e.state.value,
-      onChange: () => e.handleChange(!e.state.value),
-      onBlur: e.handleBlur,
-      ...n
+      isSelected: r.state.value,
+      isDisabled: r.form.state.isSubmitting || o.isDisabled,
+      onChange: () => r.handleChange(!r.state.value),
+      onBlur: r.handleBlur,
+      ...o
     }
   );
 }
 export {
-  u as Checkbox,
-  m as TfCheckbox
+  h as Checkbox,
+  z as CheckboxGroup,
+  S as TfCheckbox
 };
 //# sourceMappingURL=checkbox.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import { cn } from \"@/utils\";\nimport { useFieldContext } from \"@/utils/form-context\";\nimport { Check, CircleDashed } from \"lucide-react\";\nimport type * as React from \"react\";\n\nexport interface CheckboxProps\n\textends Omit<React.ComponentProps<\"input\">, \"type\" | \"value\"> {\n\tindeterminate?: boolean\n}\n\nexport function Checkbox({ className, checked, indeterminate, ...props }: CheckboxProps) {\n\treturn (\n\t\t<div className=\"relative size-input\">\n\t\t\t{indeterminate && <CircleDashed className=\"pointer-events-none text-primary-foreground absolute size-icon top-2 left-2\" />}\n\t\t\t{checked && !indeterminate && <Check className=\"pointer-events-none text-primary-foreground absolute size-icon top-2 left-2\" />}\n\t\t\t<input\n\t\t\t\tchecked={checked}\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"appearance-none size-input border border-input bg-card checked:bg-primary rounded-none focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\n\t\t</div>\n\t);\n}\n\nexport interface TfCheckboxProps\n\textends Omit<\n\t\tReact.ComponentProps<typeof Checkbox>,\n\t\t\"onChange\" | \"onBlur\" | \"checked\"\n\t> { }\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n\tconst field = useFieldContext<boolean>();\n\n\treturn (\n\t\t<Checkbox\n\t\t\tchecked={field.state.value}\n\t\t\tonChange={() => field.handleChange(!field.state.value)}\n\t\t\tonBlur={field.handleBlur}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\n"],"names":["Checkbox","className","checked","indeterminate","props","jsxs","jsx","CircleDashed","Check","cn","TfCheckbox","field","useFieldContext"],"mappings":";;;;AAUO,SAASA,EAAS,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,KAAwB;AACxF,SACC,gBAAAC,EAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,IAAAF,KAAiB,gBAAAG,EAACC,GAAA,EAAa,WAAU,8EAAA,CAA8E;AAAA,IACvHL,KAAW,CAACC,KAAiB,gBAAAG,EAACE,GAAA,EAAM,WAAU,+EAA8E;AAAA,IAC7H,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,SAAAJ;AAAA,QACA,MAAK;AAAA,QACL,WAAWO;AAAA,UACV;AAAA,UACAR;AAAA,QAAA;AAAA,QAEA,GAAGG;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GAED;AAEF;AAOO,SAASM,EAAW,EAAE,GAAGN,KAA0B;AACzD,QAAMO,IAAQC,EAAA;AAEd,SACC,gBAAAN;AAAA,IAACN;AAAA,IAAA;AAAA,MACA,SAASW,EAAM,MAAM;AAAA,MACrB,UAAU,MAAMA,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK;AAAA,MACrD,QAAQA,EAAM;AAAA,MACb,GAAGP;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"checkbox.es.js","sources":["../../../lib/components/inputs/checkbox.tsx"],"sourcesContent":["import {\n  Checkbox as AriaCheckbox,\n  CheckboxGroup as AriaCheckboxGroup,\n  composeRenderProps,\n  type CheckboxProps as AriaCheckboxProps\n} from \"react-aria-components\"\n\nimport { cn, useFieldContext } from \"@/utils/index\"\n\nimport { FormField, labelVariants, type FormFieldProps } from \"@/components/inputs/field\"\nimport { Check, Minus } from \"lucide-react\"\n\nexport const CheckboxGroup = AriaCheckboxGroup\ntype CheckboxProps = AriaCheckboxProps & FormFieldProps;\nexport function Checkbox({ className, label, description, errorMessage, ...props }: Omit<CheckboxProps, 'children'>) {\n  return (\n    <div className=\"group form-field\">\n      <FormField label={label} description={description} errorMessage={errorMessage}>\n        <AriaCheckbox\n          className={composeRenderProps(className, (className) =>\n            cn(\n              \"group/checkbox cursor-pointer focus-ring flex items-center gap-x-2\",\n              /* Disabled */\n              \"disabled-muted\",\n              labelVariants,\n              className\n            )\n          )}\n          {...props}\n        >\n          {composeRenderProps(<></>, (_, renderProps) => (\n            <>\n              <div\n                className={cn(\n                  \"flex size-input shrink-0 items-center bg-card justify-center border border-input text-current ring-offset-background\",\n                  /* Selected */\n                  \"group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground\",\n                  /* Disabled */\n                  \"group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50\",\n                  /* Invalid */\n                  \"group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground\",\n                  /* Resets */\n                  \"focus:outline-none focus-visible:outline-none\"\n                )}\n              >\n                {renderProps.isIndeterminate ? (\n                  <Minus className=\"size-icon\" />\n                ) : renderProps.isSelected ? (\n                  <Check className=\"size-icon\" />\n                ) : null}\n              </div>\n            </>\n          ))}\n        </AriaCheckbox>\n      </FormField>\n    </div>\n  )\n}\n\nexport type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, \"onChange\" | \"onBlur\" | \"isChecked\">\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n  const field = useFieldContext<boolean>();\n  return (\n    <Checkbox\n      isSelected={field.state.value}\n      isDisabled={field.form.state.isSubmitting || props.isDisabled}\n      onChange={() => field.handleChange(!field.state.value)}\n      onBlur={field.handleBlur}\n      {...props}\n    />\n  );\n};"],"names":["CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","props","jsx","FormField","AriaCheckbox","composeRenderProps","cn","labelVariants","Fragment","_","renderProps","Minus","Check","TfCheckbox","field","useFieldContext"],"mappings":";;;;;;;AAYO,MAAMA,IAAgBC;AAEtB,SAASC,EAAS,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,GAAa,cAAAC,GAAc,GAAGC,KAA0C;AACnH,SACE,gBAAAC,EAAC,SAAI,WAAU,oBACb,4BAACC,GAAA,EAAU,OAAAL,GAAc,aAAAC,GAA0B,cAAAC,GACjD,UAAA,gBAAAE;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,WAAWC;AAAAA,QAAmBR;AAAA,QAAW,CAACA,MACxCS;AAAA,UACE;AAAA;AAAA,UAEA;AAAA,UACAC;AAAA,UACAV;AAAAA,QAAA;AAAA,MACF;AAAA,MAED,GAAGI;AAAA,MAEH,YAAmB,gBAAAC,EAAAM,GAAA,CAAA,CAAE,GAAK,CAACC,GAAGC,MAC7B,gBAAAR,EAAAM,GAAA,EACE,UAAA,gBAAAN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWI;AAAA,YACT;AAAA;AAAA,YAEA;AAAA;AAAA,YAEA;AAAA;AAAA,YAEA;AAAA;AAAA,YAEA;AAAA,UAAA;AAAA,UAGD,UAAAI,EAAY,kBACX,gBAAAR,EAACS,GAAA,EAAM,WAAU,YAAA,CAAY,IAC3BD,EAAY,aACd,gBAAAR,EAACU,GAAA,EAAM,WAAU,aAAY,IAC3B;AAAA,QAAA;AAAA,MAAA,GAER,CACD;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;AAGO,SAASC,EAAW,EAAE,GAAGZ,KAA0B;AACxD,QAAMa,IAAQC,EAAA;AACd,SACE,gBAAAb;AAAA,IAACN;AAAA,IAAA;AAAA,MACC,YAAYkB,EAAM,MAAM;AAAA,MACxB,YAAYA,EAAM,KAAK,MAAM,gBAAgBb,EAAM;AAAA,MACnD,UAAU,MAAMa,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK;AAAA,MACrD,QAAQA,EAAM;AAAA,MACb,GAAGb;AAAA,IAAA;AAAA,EAAA;AAGV;"}

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

@@ -0,0 +1,127 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { CalendarIcon as f } 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 x, DateRangePicker 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/DatePicker.es.js";
+import { Dialog as b } 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 c } from "./datefield.es.js";
+import { FormField as p, FieldGroup as u } from "./field.es.js";
+import { Calendar as v, RangeCalendar as N } from "../ui/calendar.es.js";
+import { getLocalTimeZone as C } from "../../node_modules/.pnpm/@internationalized_date@3.8.2/node_modules/@internationalized/date/dist/queries.es.js";
+import { parseAbsolute as D } from "../../node_modules/.pnpm/@internationalized_date@3.8.2/node_modules/@internationalized/date/dist/string.es.js";
+import { Popover as P } from "../ui/popover.es.js";
+import { Button as h } from "../ui/button.es.js";
+import { useFieldContext as k } from "../../utils/form-context.es.js";
+import { getFieldErrorMessage as m } from "../../utils/form-hook.es.js";
+import { cn as n } from "../../utils/primitives.es.js";
+const g = ({
+  className: a,
+  popoverClassName: r,
+  ...o
+}) => /* @__PURE__ */ e(
+  P,
+  {
+    className: d(
+      r,
+      (t) => n("w-auto p-3", t)
+    ),
+    children: /* @__PURE__ */ e(
+      b,
+      {
+        className: n(
+          "flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",
+          a
+        ),
+        ...o
+      }
+    )
+  }
+);
+function F({
+  label: a,
+  description: r,
+  errorMessage: o,
+  className: t,
+  ...l
+}) {
+  return /* @__PURE__ */ i(
+    x,
+    {
+      className: d(
+        t,
+        (s) => n("group flex flex-col gap-2", s)
+      ),
+      ...l,
+      children: [
+        /* @__PURE__ */ e(p, { label: a, description: r, errorMessage: o, children: /* @__PURE__ */ i(u, { "aria-label": a, children: [
+          /* @__PURE__ */ e(c, { className: "flex-1", variant: "ghost" }),
+          /* @__PURE__ */ e(
+            h,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "-me-2 ms-2",
+              children: /* @__PURE__ */ e(f, { "aria-hidden": !0 })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(v, {}) })
+      ]
+    }
+  );
+}
+function q({ ...a }) {
+  const r = k();
+  return /* @__PURE__ */ e(
+    F,
+    {
+      hideTimeZone: !0,
+      value: r.state.value ? D(r.state.value, C()) : null,
+      onChange: (o) => o ? r.handleChange(o.toAbsoluteString()) : r.handleChange(null),
+      onBlur: r.handleBlur,
+      isInvalid: !!m(r),
+      errorMessage: m(r),
+      ...a
+    }
+  );
+}
+function H({
+  label: a,
+  description: r,
+  errorMessage: o,
+  className: t,
+  ...l
+}) {
+  return /* @__PURE__ */ i(
+    $,
+    {
+      className: d(
+        t,
+        (s) => n("group flex flex-col gap-2", s)
+      ),
+      ...l,
+      children: [
+        /* @__PURE__ */ e(p, { label: a, errorMessage: o, description: r, children: /* @__PURE__ */ i(u, { children: [
+          /* @__PURE__ */ e(c, { variant: "ghost", slot: "start" }),
+          /* @__PURE__ */ e("span", { "aria-hidden": !0, className: "px-2 text-sm text-muted-foreground", children: "-" }),
+          /* @__PURE__ */ e(c, { 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(f, { "aria-hidden": !0 })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(N, {}) })
+      ]
+    }
+  );
+}
+export {
+  F as DatePicker,
+  H as DateRangePicker,
+  q as TfDatePicker
+};
+//# 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, getFieldErrorMessage, useFieldContext } from \"@/utils/index\"\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from \"@internationalized/date\"\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-2 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 aria-label={label}>\n          <DateInput className=\"flex-1\" variant=\"ghost\" />\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            className={'-me-2 ms-2'}\n          >\n            <CalendarIcon aria-hidden />\n          </Button>\n        </FieldGroup>\n      </FormField>\n      <DatePickerContent>\n        <Calendar />\n      </DatePickerContent>\n    </AriaDatePicker>\n  )\n}\n\nexport function TfDatePicker({ ...props }: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n  const field = useFieldContext<string | null>();\n  return (\n    <DatePicker\n      hideTimeZone\n      value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n      onChange={(v) => v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null)}\n      onBlur={field.handleBlur}\n      isInvalid={!!getFieldErrorMessage(field)}\n      errorMessage={getFieldErrorMessage(field)}\n      {...props}\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","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"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"}

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 s, DateInput as u, 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 $ } from "./field.es.js";
+import { cn as i } from "../../utils/primitives.es.js";
+function x({ className: t, ...a }) {
+  return /* @__PURE__ */ e(
+    s,
+    {
+      className: o(
+        t,
+        (d) => i(
+          "inline 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(
+    u,
+    {
+      className: o(
+        t,
+        (r) => i($({ variant: a }), "text-sm", r)
+      ),
+      ...d,
+      children: (r) => /* @__PURE__ */ e(x, { 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,
+  x 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          \"inline 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 TimeFieldProps<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}: TimeFieldProps<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,GAAsB;AACpB,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,94 @@
+"use client";
+import { jsx as r, jsxs as o, Fragment as s } from "react/jsx-runtime";
+import { cva as d } from "class-variance-authority";
+import { composeRenderProps 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/utils.es.js";
+import { Group 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/Group.es.js";
+import { Label 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/Label.es.js";
+import { Text 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/Text.es.js";
+import { Info as u, CircleX as p } from "lucide-react";
+import { cn as n } 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: e, ...t }) {
+  return /* @__PURE__ */ r(m, { className: n(x(), e), ...t });
+}
+function g({ className: e, children: t, ...i }) {
+  return /* @__PURE__ */ o(
+    c,
+    {
+      className: n("text-sm text-muted leading-tight", e),
+      ...i,
+      slot: "description",
+      children: [
+        t,
+        /* @__PURE__ */ r(u, { className: "inline size-2 align-text-top ms-0.5" })
+      ]
+    }
+  );
+}
+function $({ className: e, children: t, ...i }) {
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: n("text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in", e),
+      ...i,
+      children: [
+        t,
+        /* @__PURE__ */ r(p, { className: "inline size-2 align-text-top ms-0.5" })
+      ]
+    }
+  );
+}
+const h = d("", {
+  variants: {
+    variant: {
+      default: [
+        // TODO standardize the padding here
+        "relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-2 py-2 text-sm ring-offset-background",
+        /* Focus Within */
+        "focus-ring",
+        /* Disabled */
+        "disabled-muted"
+      ],
+      ghost: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function L({ className: e, variant: t, ...i }) {
+  return /* @__PURE__ */ r(
+    f,
+    {
+      className: l(
+        e,
+        (a) => n(h({ variant: t }), a)
+      ),
+      ...i
+    }
+  );
+}
+function k({ label: e, description: t, errorMessage: i, children: a }) {
+  return /* @__PURE__ */ o(s, { children: [
+    e && /* @__PURE__ */ r(b, { children: e }),
+    a,
+    t && /* @__PURE__ */ r(g, { children: t }),
+    i && /* @__PURE__ */ r($, { children: i })
+  ] });
+}
+export {
+  g as FieldDescription,
+  $ as FieldError,
+  L as FieldGroup,
+  b as FieldLabel,
+  k as FormField,
+  h 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        // TODO standardize the padding here\n        \"relative flex h-input w-full items-center overflow-hidden border border-input bg-card px-2 py-2 text-sm ring-offset-background\",\n        /* Focus Within */\n        \"focus-ring\",\n        /* Disabled */\n        \"disabled-muted\",\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;AAAA,QAEP;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,61 @@
+import { jsx as r, Fragment as x, jsxs as l } from "react/jsx-runtime";
+import { SearchField as F } from "./searchfield.es.js";
+import { Menu as I, MenuItem as N } from "../ui/menu.es.js";
+import { useQuery as p } from "@tanstack/react-query";
+import { useId as C, useState as q } from "react";
+import { Autocomplete as j } 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 K, Popover as M } from "../ui/popover.es.js";
+import { Loader as $ } from "../ui/loader.es.js";
+import { Button as v } from "../ui/button.es.js";
+import { useFieldContext as A } from "../../utils/form-context.es.js";
+function E({ value: t, disabled: s = !1, searchFn: n, multiple: o, onChange: f, onBlur: i, accessor: h = "id", idLookup: m }) {
+  const c = C(), [a, g] = q(""), { data: y, isError: d, isFetching: u, error: b } = p({
+    queryKey: [c, a],
+    queryFn: () => n(a)
+  }), S = p({
+    queryKey: [c, t],
+    queryFn: () => m(Array.from(t.keys()).map((e) => e.toString())),
+    enabled: m && t.size > 0
+  });
+  return /* @__PURE__ */ r(x, { children: /* @__PURE__ */ l(K, { onOpenChange: (e) => {
+    e || i == null || i(t);
+  }, children: [
+    /* @__PURE__ */ r(v, { className: "min-w-3xs", isDisabled: s, children: (() => {
+      var e;
+      return (e = S.data) == null ? void 0 : e.join(",");
+    })() }),
+    /* @__PURE__ */ r(M, { className: "p-2", children: /* @__PURE__ */ l(
+      j,
+      {
+        inputValue: a,
+        onInputChange: g,
+        children: [
+          /* @__PURE__ */ r(F, { className: "mb-icon", autoFocus: !0 }),
+          u && /* @__PURE__ */ r($, { className: "p-input" }),
+          !u && !d && /* @__PURE__ */ r(I, { selectedKeys: t, selectionMode: o ? "multiple" : "single", onSelectionChange: (e) => {
+            typeof e != "string" && f(e);
+          }, className: "text-sm", items: y, renderEmptyState: () => "No results found.", children: (e) => /* @__PURE__ */ r(N, { id: e[h], children: e.name }, e.id) }),
+          d && /* @__PURE__ */ r("div", { className: "text-destructive p-icon", children: b.message })
+        ]
+      }
+    ) })
+  ] }) });
+}
+function k({ disabled: t, ...s }) {
+  const n = A();
+  return /* @__PURE__ */ r(
+    E,
+    {
+      ...s,
+      disabled: t || n.form.state.isSubmitting,
+      value: n.state.value,
+      onBlur: (o) => n.handleBlur(),
+      onChange: (o) => n.handleChange(o)
+    }
+  );
+}
+export {
+  E as IdSearchInput,
+  k 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, Loader, 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        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                    {isFetching && <Loader className=\"p-input\" />}\n                    {!isFetching && !isError && <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                    {\n                        isError && <div className=\"text-destructive p-icon\">{error.message}</div>\n                    }\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","Loader","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;AAMD,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,WAXrC,MAAM;;AAC5B,cAAOwB,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,UAC5Cb,KAAc,gBAAAI,EAACU,GAAA,EAAO,WAAU,UAAA,CAAU;AAAA,UAC1C,CAACd,KAAc,CAACD,uBAAYgB,GAAA,EAAK,cAAc9B,GAAO,eAAeG,IAAW,aAAa,UAAU,mBAAmB,CAAC4B,MAAM;AAC9H,YAAI,OAAQA,KAAO,YACnB3B,EAAS2B,CAAC;AAAA,UACd,GAAG,WAAW,WAAW,OAAOlB,GAAM,kBAAkB,MAAM,qBACzD,UAAA,CAACmB,wBAAWC,GAAA,EAA0B,IAAID,EAAK1B,CAAQ,GAAI,YAAK,QAAtC0B,EAAK,EAAsC,EAAA,CAC1E;AAAA,UAEIlB,KAAW,gBAAAK,EAAC,OAAA,EAAI,WAAU,2BAA2B,YAAM,QAAA,CAAQ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAE3E,CACJ;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAEJ;AAEO,SAASe,EAAwD,EAAE,UAAAjC,GAAU,GAAGkC,KAA0D;AAC7I,QAAMC,IAAQC,EAAA;AACd,SACI,gBAAAlB;AAAA,IAACpB;AAAA,IAAA;AAAA,MACI,GAAGoC;AAAA,MACJ,UAAUlC,KAAYmC,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" }) })
       ]
     }
   );