@cryptlex/web-components 5.0.0 → 5.1.1

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

@@ -1,18 +1,17 @@
-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 { jsx as e, Fragment as i } from "react/jsx-runtime";
+import { CheckboxGroup as l, Checkbox as b, composeRenderProps as a } from "react-aria-components";
 import { FormField as m, labelVariants as p } from "./field.es.js";
-import { Minus as f, Check as x } from "lucide-react";
+import { Minus as h, Check as x } from "lucide-react";
+import { cn as n } from "../../utils/primitives.es.js";
 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(
+function f({ className: r, label: o, description: d, errorMessage: s, ...u }) {
+  return /* @__PURE__ */ e("div", { className: "group form-field", children: /* @__PURE__ */ e(m, { label: o, description: d, errorMessage: s, children: /* @__PURE__ */ e(
     b,
     {
-      className: i(
-        o,
-        (t) => d(
+      className: a(
+        r,
+        (t) => n(
           "group/checkbox cursor-pointer focus-ring flex items-center gap-x-2",
           /* Disabled */
           "disabled-muted",
@@ -21,10 +20,10 @@ function h({ className: o, label: r, description: n, errorMessage: s, ...u }) {
         )
       ),
       ...u,
-      children: i(/* @__PURE__ */ e(a, {}), (t, c) => /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(
+      children: a(/* @__PURE__ */ e(i, {}), (t, c) => /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
         "div",
         {
-          className: d(
+          className: n(
             "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",
@@ -35,28 +34,28 @@ function h({ className: o, label: r, description: n, errorMessage: s, ...u }) {
             /* 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
+          children: c.isIndeterminate ? /* @__PURE__ */ e(h, { className: "size-icon" }) : c.isSelected ? /* @__PURE__ */ e(x, { className: "size-icon" }) : null
         }
       ) }))
     }
   ) }) });
 }
-function S({ ...o }) {
-  const r = g();
+function G({ ...r }) {
+  const o = g();
   return /* @__PURE__ */ e(
-    h,
+    f,
     {
-      isSelected: r.state.value,
-      isDisabled: r.form.state.isSubmitting || o.isDisabled,
-      onChange: () => r.handleChange(!r.state.value),
-      onBlur: r.handleBlur,
-      ...o
+      isSelected: o.state.value,
+      isDisabled: o.form.state.isSubmitting || r.isDisabled,
+      onChange: () => o.handleChange(!o.state.value),
+      onBlur: o.handleBlur,
+      ...r
     }
   );
 }
 export {
-  h as Checkbox,
+  f as Checkbox,
   z as CheckboxGroup,
-  S as TfCheckbox
+  G 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 {\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;"}
+{"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;AAAA,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

@@ -1,107 +1,124 @@
-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,
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { CalendarIcon as f } from "lucide-react";
+import { DatePicker as x, composeRenderProps as m, DateRangePicker as v, Dialog as D } from "react-aria-components";
+import { DateInput as c } from "./datefield.es.js";
+import { FormField as u, FieldGroup as p } from "./field.es.js";
+import { Calendar as P, RangeCalendar as N } from "../ui/calendar.es.js";
+import { parseAbsolute as k, getLocalTimeZone as C } from "@internationalized/date";
+import { Popover as F } from "../ui/popover.es.js";
+import { Button as g } from "../ui/button.es.js";
+import { cn as i } from "../../utils/primitives.es.js";
+import { useFieldContext as R } from "../../utils/form-context.es.js";
+import { getFieldErrorMessage as d } from "../../utils/form-hook.es.js";
+const h = ({
+  className: a,
+  popoverClassName: r,
   ...o
 }) => /* @__PURE__ */ e(
-  D,
+  F,
   {
-    className: d(
-      a,
-      (t) => n("w-auto p-3", t)
+    className: m(
+      r,
+      (t) => i("w-auto p-3", t)
     ),
     children: /* @__PURE__ */ e(
-      $,
+      D,
       {
-        className: n(
-          "flex w-full flex-col gap-y-icon outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",
-          r
+        className: i(
+          "flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",
+          a
         ),
         ...o
       }
     )
   }
 );
-function B({
-  label: r,
-  description: a,
+function b({
+  label: a,
+  description: r,
   errorMessage: o,
   className: t,
-  ...s
+  ...l
 }) {
-  return /* @__PURE__ */ i(
-    g,
+  return /* @__PURE__ */ n(
+    x,
     {
-      className: d(
+      className: m(
         t,
-        (c) => n("group flex flex-col gap-2", c)
+        (s) => i("group flex flex-col gap-2", s)
       ),
-      ...s,
+      ...l,
       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(u, { label: a, description: r, errorMessage: o, children: /* @__PURE__ */ n(p, { "aria-label": a, children: [
+          /* @__PURE__ */ e(c, { className: "flex-1", variant: "ghost" }),
           /* @__PURE__ */ e(
-            h,
+            g,
             {
               variant: "ghost",
               size: "icon",
-              className: "mr-1 data-[focus-visible]:ring-offset-0",
-              children: /* @__PURE__ */ e(m, { "aria-hidden": !0 })
+              className: "-me-2 ms-2",
+              children: /* @__PURE__ */ e(f, { "aria-hidden": !0 })
             }
           )
         ] }) }),
-        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(N, {}) })
+        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(P, {}) })
       ]
     }
   );
 }
-function G({
-  label: r,
-  description: a,
+function G({ ...a }) {
+  const r = R();
+  return /* @__PURE__ */ e(
+    b,
+    {
+      hideTimeZone: !0,
+      value: r.state.value ? k(r.state.value, C()) : null,
+      onChange: (o) => o ? r.handleChange(o.toAbsoluteString()) : r.handleChange(null),
+      onBlur: r.handleBlur,
+      isInvalid: !!d(r),
+      errorMessage: d(r),
+      ...a
+    }
+  );
+}
+function L({
+  label: a,
+  description: r,
   errorMessage: o,
   className: t,
-  ...s
+  ...l
 }) {
-  return /* @__PURE__ */ i(
-    u,
+  return /* @__PURE__ */ n(
+    v,
     {
-      className: d(
+      className: m(
         t,
-        (c) => n("group flex flex-col gap-2", c)
+        (s) => i("group flex flex-col gap-2", s)
       ),
-      ...s,
+      ...l,
       children: [
-        /* @__PURE__ */ e(f, { label: r, errorMessage: o, description: a, children: /* @__PURE__ */ i(p, { children: [
-          /* @__PURE__ */ e(l, { variant: "ghost", slot: "start" }),
+        /* @__PURE__ */ e(u, { label: a, errorMessage: o, description: r, children: /* @__PURE__ */ n(p, { 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(l, { className: "flex-1", variant: "ghost", slot: "end" }),
+          /* @__PURE__ */ e(c, { className: "flex-1", variant: "ghost", slot: "end" }),
           /* @__PURE__ */ e(
-            h,
+            g,
             {
               variant: "ghost",
               size: "icon",
               className: "mr-1 data-[focus-visible]:ring-offset-0",
-              children: /* @__PURE__ */ e(m, { "aria-hidden": !0 })
+              children: /* @__PURE__ */ e(f, { "aria-hidden": !0 })
             }
           )
         ] }) }),
-        /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(v, {}) })
+        /* @__PURE__ */ e(h, { children: /* @__PURE__ */ e(N, {}) })
       ]
     }
   );
 }
 export {
-  B as DatePicker,
-  G as DateRangePicker
+  b as DatePicker,
+  L as DateRangePicker,
+  G as TfDatePicker
 };
 //# sourceMappingURL=date-picker.es.js.map

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

@@ -1 +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;"}
+{"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":";;;;;;;;;;;;AAoBA,MAAMA,IAAoB,CAAC;AAAA,EACzB,WAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,GAAGC;AACL,MACE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,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;AAAA,QAAmBL;AAAA,QAAW,CAACA,MACxCM,EAAG,6BAA6BN,CAAS;AAAA,MAAA;AAAA,MAE1C,GAAGE;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAC,EAACW,KAAU,OAAAL,GAAc,aAAAC,GAA0B,cAAAC,GACjD,UAAA,gBAAAC,EAACG,GAAA,EAAW,cAAYN,GACtB,UAAA;AAAA,UAAA,gBAAAN,EAACa,GAAA,EAAU,WAAU,UAAS,SAAQ,SAAQ;AAAA,UAC9C,gBAAAb;AAAA,YAACc;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,WAAW;AAAA,cAEX,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;AAEO,SAASC,EAAa,EAAE,GAAGlB,KAA+G;AAC/I,QAAMmB,IAAQC,EAAA;AACd,SACE,gBAAAnB;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,cAAY;AAAA,MACZ,OAAOa,EAAM,MAAM,QAAQE,EAAcF,EAAM,MAAM,OAAOG,EAAA,CAAkB,IAAI;AAAA,MAClF,UAAU,CAACC,MAAMA,IAAIJ,EAAM,aAAaI,EAAE,kBAAkB,IAAIJ,EAAM,aAAa,IAAI;AAAA,MACvF,QAAQA,EAAM;AAAA,MACd,WAAW,CAAC,CAACK,EAAqBL,CAAK;AAAA,MACvC,cAAcK,EAAqBL,CAAK;AAAA,MACvC,GAAGnB;AAAA,IAAA;AAAA,EAAA;AAEV;AAGO,SAASyB,EAAyC;AAAA,EACvD,OAAAlB;AAAA,EACA,aAAAC;AAAA,EACA,cAAAC;AAAA,EACA,WAAAX;AAAA,EACA,GAAGE;AACL,GAA4B;AAC1B,SACE,gBAAAU;AAAA,IAACgB;AAAAA,IAAA;AAAA,MACC,WAAWvB;AAAA,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,EAAC0B,GAAA,CAAA,CAAc,EAAA,CACjB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

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

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

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

@@ -1 +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;"}
+{"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;AAAA,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;AAAA,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;AAAA,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;AAAA,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

@@ -1,58 +1,56 @@
 "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 { jsx as n, jsxs as o, Fragment as l } from "react/jsx-runtime";
+import { cva as s } from "class-variance-authority";
+import { Label as d, Text as m, Group as c, composeRenderProps as u } from "react-aria-components";
+import { Info as f, CircleX as p } from "lucide-react";
 import { cn as r } from "../../utils/primitives.es.js";
-const x = d([
+const x = s([
   "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: e, ...t }) {
+  return /* @__PURE__ */ n(d, { className: r(x(), e), ...t });
 }
-function g({ className: t, children: e, ...i }) {
+function h({ className: e, children: t, ...i }) {
   return /* @__PURE__ */ o(
     m,
     {
-      className: r("text-sm text-muted leading-tight", t),
+      className: r("text-sm text-muted leading-tight", e),
       ...i,
       slot: "description",
       children: [
-        e,
-        /* @__PURE__ */ n(u, { className: "inline size-2 align-text-top ms-0.5" })
+        t,
+        /* @__PURE__ */ n(f, { className: "inline size-2 align-text-top ms-0.5" })
       ]
     }
   );
 }
-function h({ className: t, children: e, ...i }) {
+function v({ className: e, children: t, ...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),
+      className: r("text-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in", e),
       ...i,
       children: [
-        e,
+        t,
         /* @__PURE__ */ n(p, { className: "inline size-2 align-text-top ms-0.5" })
       ]
     }
   );
 }
-const $ = d("", {
+const b = s("", {
   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",
+        // 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 */
-        "data-[focus-within]:outline-none data-[focus-within]:ring-2 data-[focus-within]:ring-ring data-[focus-within]:ring-offset-2",
+        "focus-ring",
         /* Disabled */
-        "data-[disabled]:opacity-50"
+        "disabled-muted"
       ],
       ghost: ""
     }
@@ -61,33 +59,33 @@ const $ = d("", {
     variant: "default"
   }
 });
-function z({ className: t, variant: e, ...i }) {
+function w({ className: e, variant: t, ...i }) {
   return /* @__PURE__ */ n(
-    l,
+    c,
     {
-      className: f(
-        t,
-        (a) => r($({ variant: e }), a)
+      className: u(
+        e,
+        (a) => r(b({ variant: t }), a)
       ),
       ...i
     }
   );
 }
-function L({ label: t, description: e, errorMessage: i, children: a }) {
-  return /* @__PURE__ */ o(s, { children: [
-    t && /* @__PURE__ */ n(b, { children: t }),
-    a,
+function z({ label: e, description: t, errorMessage: i, children: a }) {
+  return /* @__PURE__ */ o(l, { children: [
     e && /* @__PURE__ */ n(g, { children: e }),
-    i && /* @__PURE__ */ n(h, { children: i })
+    a,
+    t && /* @__PURE__ */ n(h, { children: t }),
+    i && /* @__PURE__ */ n(v, { children: i })
   ] });
 }
 export {
-  g as FieldDescription,
-  h as FieldError,
-  z as FieldGroup,
-  b as FieldLabel,
-  L as FormField,
-  $ as fieldGroupVariants,
+  h as FieldDescription,
+  v as FieldError,
+  w as FieldGroup,
+  g as FieldLabel,
+  z as FormField,
+  b as fieldGroupVariants,
   x as labelVariants
 };
 //# sourceMappingURL=field.es.js.map

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

@@ -1 +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;"}
+{"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;AAAA,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;"}