@konstructio/ui 0.1.2-alpha.99 → 0.1.4

package/dist/components/Command/components/DialogContent.js

@@ -1,22 +1,22 @@
-import { t as r } from "../../../x-KjMYhcCb.js";
-import { t as d } from "../../../utils-COaoD3PI.js";
-import { i as l, n as e, t as m } from "../../../dist-B5WmTRxj.js";
+import { n as i, o as d, r as o } from "../../../dist-DWopnVS-.js";
+import { t as l } from "../../../x-BmNOD9Gr.js";
+import { t as m } from "../../../utils-DnIJruo0.js";
 import { DialogOverlay as p } from "./DialogOverlay.js";
 import { forwardRef as f } from "react";
 import { jsx as t, jsxs as a } from "react/jsx-runtime";
-var c = f(({ className: o, children: s, ...n }, i) => /* @__PURE__ */ a(l, { children: [/* @__PURE__ */ t(p, {}), /* @__PURE__ */ a(e, {
-  ref: i,
-  className: d("fixed text-white left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", o),
+var c = f(({ className: e, children: s, ...n }, r) => /* @__PURE__ */ a(d, { children: [/* @__PURE__ */ t(p, {}), /* @__PURE__ */ a(o, {
+  ref: r,
+  className: m("fixed text-white left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", e),
   ...n,
-  children: [s, /* @__PURE__ */ a(m, {
-    className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-white",
-    children: [/* @__PURE__ */ t(r, { className: "h-4 w-4" }), /* @__PURE__ */ t("span", {
+  children: [s, /* @__PURE__ */ a(i, {
+    className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-aurora-500 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground text-white",
+    children: [/* @__PURE__ */ t(l, { className: "h-4 w-4" }), /* @__PURE__ */ t("span", {
       className: "sr-only",
       children: "Close"
     })]
   })]
 })] }));
-c.displayName = e.displayName;
+c.displayName = o.displayName;
 export {
   c as DialogContent
 };

package/dist/components/Command/components/DialogOverlay.js

@@ -1,13 +1,13 @@
-import { t as r } from "../../../utils-COaoD3PI.js";
-import { o as a } from "../../../dist-B5WmTRxj.js";
-import { forwardRef as s } from "react";
-import { jsx as d } from "react/jsx-runtime";
-var i = s(({ className: t, ...e }, o) => /* @__PURE__ */ d(a, {
+import { a } from "../../../dist-DWopnVS-.js";
+import { t as i } from "../../../utils-DnIJruo0.js";
+import { forwardRef as r } from "react";
+import { jsx as s } from "react/jsx-runtime";
+var d = r(({ className: t, ...e }, o) => /* @__PURE__ */ s(a, {
   ref: o,
-  className: r("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 delay-200", t),
+  className: i("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 delay-200", t),
   ...e
 }));
-i.displayName = a.displayName;
+d.displayName = a.displayName;
 export {
-  i as DialogOverlay
+  d as DialogOverlay
 };

package/dist/components/Command/components/index.js

@@ -1,6 +1,6 @@
-import { t as o } from "../../../CommandInput-C45ylYPm.js";
-import { CommandEmpty as t } from "./CommandEmpty.js";
-import { CommandGroup as a } from "./CommandGroup.js";
+import { CommandEmpty as o } from "./CommandEmpty.js";
+import { CommandGroup as t } from "./CommandGroup.js";
+import { t as a } from "../../../CommandInput-BrWqUubG.js";
 import { CommandItem as n } from "./CommandItem.js";
 import { CommandList as C } from "./CommandList.js";
 import { CommandSeparator as e } from "./CommandSeparator.js";
@@ -9,9 +9,9 @@ import { DialogContent as S } from "./DialogContent.js";
 import { Command as g } from "./Command.js";
 export {
   g as Command,
-  t as CommandEmpty,
-  a as CommandGroup,
-  o as CommandInput,
+  o as CommandEmpty,
+  t as CommandGroup,
+  a as CommandInput,
   n as CommandItem,
   C as CommandList,
   e as CommandSeparator,

package/dist/components/Command/contexts/Command.provider.js

@@ -1,18 +1,22 @@
 import { useToggle as l } from "../../../hooks/useToggle.js";
 import { CommandContext as p } from "./Command.context.js";
-import { useCallback as o } from "react";
-import { jsx as s } from "react/jsx-runtime";
-var c = ({ children: r }) => {
-  const [t, e] = l(!1), n = o((a) => e(a), [e]), m = o(() => e(), [e]);
-  return /* @__PURE__ */ s(p.Provider, {
-    value: {
-      isOpen: t,
-      setOpen: n,
-      toggleOpen: m
-    },
-    children: r
+import { useCallback as n, useMemo as g } from "react";
+import { jsx as i } from "react/jsx-runtime";
+var v = ({ children: m }) => {
+  const [o, e] = l(!1), t = n((a) => e(a), [e]), r = n(() => e(), [e]), s = g(() => ({
+    isOpen: o,
+    setOpen: t,
+    toggleOpen: r
+  }), [
+    o,
+    t,
+    r
+  ]);
+  return /* @__PURE__ */ i(p.Provider, {
+    value: s,
+    children: m
   });
 };
 export {
-  c as CommandProvider
+  v as CommandProvider
 };

package/dist/components/ConfirmDialog/ConfirmDialog.js

@@ -0,0 +1,113 @@
+import { WarningIcon as K } from "../../assets/icons/components/Warning.js";
+import { t as g } from "../../utils-DnIJruo0.js";
+import { Button as C } from "../Button/Button.js";
+import { CopyButton as T } from "../CopyButton/CopyButton.js";
+import { t as V } from "../../Input-CE6J6HIW.js";
+import { t as l } from "../../Modal-Bwq7Gc0A.js";
+import { Typography as d } from "../Typography/Typography.js";
+import { useEffect as W, useId as A, useState as G } from "react";
+import { Fragment as J, jsx as e, jsxs as r } from "react/jsx-runtime";
+var L = ({ autoFocus: v, cancelLabel: N = "Cancel", children: k, className: I, confirmationInputClassName: w, confirmationInputLabel: B, confirmationPrompt: j, confirmationText: a, confirmLabel: n = "Confirm", containerClassName: D, copyLabel: F = "Copy", description: i, icon: c, isOpen: o, isPending: t = !1, pendingLabel: S, theme: $, title: M, variant: f = "danger", onClose: q, onConfirm: z }) => {
+  const s = A(), p = `${s}-title`, [u, h] = G(""), x = !!a, y = !x || u === a;
+  W(() => {
+    o && h("");
+  }, [o]);
+  const b = () => {
+    t || q();
+  }, E = (m) => {
+    m.preventDefault(), !(t || !y) && z();
+  }, H = c === void 0 ? /* @__PURE__ */ e(K, {
+    size: 24,
+    "aria-hidden": "true",
+    className: g("shrink-0", f === "danger" ? "text-red-600 dark:text-red-500" : "text-aurora-500")
+  }) : c;
+  return /* @__PURE__ */ e(l, {
+    isOpen: o,
+    theme: $,
+    autoFocus: v,
+    showCloseButton: !1,
+    closeOnOverlayClick: !1,
+    ariaLabelledBy: p,
+    containerClassName: D,
+    className: g("max-w-125 min-h-0 min-w-0 gap-0 p-6", I),
+    onClose: b,
+    children: /* @__PURE__ */ r("form", {
+      id: s,
+      noValidate: !0,
+      className: "flex flex-col gap-6",
+      onSubmit: E,
+      children: [
+        /* @__PURE__ */ r(l.Header, {
+          className: "flex items-start gap-4",
+          children: [H, /* @__PURE__ */ r("div", {
+            className: "flex min-w-0 flex-1 flex-col gap-4",
+            children: [
+              /* @__PURE__ */ e(d, {
+                id: p,
+                variant: "subtitle3",
+                component: "h2",
+                className: "text-slate-800 dark:text-slate-200",
+                children: M
+              }),
+              i ? /* @__PURE__ */ e(d, {
+                variant: "body2",
+                className: "text-slate-700 dark:text-slate-50",
+                children: i
+              }) : null,
+              k
+            ]
+          })]
+        }),
+        x ? /* @__PURE__ */ r(l.Body, {
+          className: "flex flex-col gap-2 pl-10",
+          children: [/* @__PURE__ */ e(d, {
+            variant: "body2",
+            component: "p",
+            className: "flex flex-wrap items-center gap-1 font-medium text-slate-800 dark:text-metal-50",
+            children: j ?? /* @__PURE__ */ r(J, { children: [
+              "Type",
+              /* @__PURE__ */ e(T, {
+                text: a,
+                label: a,
+                copyLabel: F,
+                className: "rounded-xs border border-gray-200 bg-gray-50 px-1 py-0.5 font-medium hover:bg-gray-100 dark:border-metal-700 dark:bg-metal-700 dark:hover:bg-metal-600",
+                children: a
+              }),
+              "to confirm"
+            ] })
+          }), /* @__PURE__ */ e(V, {
+            value: u,
+            autoComplete: "off",
+            disabled: t,
+            className: w,
+            "aria-label": B ?? `Type ${a} to confirm`,
+            onChange: (m) => {
+              h(m.target.value);
+            }
+          })]
+        }) : null,
+        /* @__PURE__ */ r(l.Footer, {
+          className: "flex justify-end gap-2",
+          children: [/* @__PURE__ */ e(C, {
+            type: "button",
+            variant: "secondary",
+            disabled: t,
+            "data-autofocus": !0,
+            onClick: b,
+            children: N
+          }), /* @__PURE__ */ e(C, {
+            type: "submit",
+            form: s,
+            variant: f,
+            disabled: t || !y,
+            children: t ? S ?? n : n
+          })]
+        })
+      ]
+    })
+  });
+};
+L.displayName = "KonstructConfirmDialog";
+export {
+  L as ConfirmDialog
+};

package/dist/components/CopyButton/CopyButton.js

@@ -0,0 +1,63 @@
+import { a as v, i as w, n as N, o as B, r as P, t as j } from "../../dist-DsOk4psA.js";
+import { t as k } from "../../dist-C_jtUTU9.js";
+import { CopyIcon as z } from "../../assets/icons/components/Copy.js";
+import { t as i } from "../../utils-DnIJruo0.js";
+import { copyButtonVariants as D } from "./CopyButton.variants.js";
+import { useCopyToClipboard as F } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
+import { useEffect as I, useState as V } from "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+var $ = ({ arrowClassName: p, children: r, className: c, copiedLabel: s = "Copied!", copyLabel: l = "Copy", label: d, resetDelay: m, text: f, theme: u, tooltipClassName: h, onCopy: C, onCopyError: y, ...T }) => {
+  const [g, a] = V(!1), { copied: e, copy: x } = F({
+    resetDelay: m,
+    onCopy: C,
+    onCopyError: y
+  });
+  I(() => {
+    e || a(!1);
+  }, [e]);
+  const O = async (o) => {
+    o.stopPropagation(), await x(f) && a(!0);
+  }, b = (o) => {
+    o.currentTarget.matches(":focus-visible") || o.preventDefault();
+  };
+  return /* @__PURE__ */ n(v, {
+    delayDuration: 0,
+    children: [/* @__PURE__ */ n(j, {
+      open: g,
+      onOpenChange: (o) => {
+        e || a(o);
+      },
+      children: [/* @__PURE__ */ t(B, {
+        asChild: !0,
+        children: /* @__PURE__ */ t("button", {
+          type: "button",
+          "aria-label": `${l} ${d}`,
+          "data-theme": u,
+          className: i(D({
+            iconOnly: !r,
+            className: c
+          })),
+          onClick: O,
+          onFocus: b,
+          ...T,
+          children: r ?? /* @__PURE__ */ t(z, {
+            size: 14,
+            "aria-hidden": "true"
+          })
+        })
+      }), /* @__PURE__ */ t(w, { children: /* @__PURE__ */ n(P, {
+        sideOffset: 4,
+        className: i("z-70 rounded bg-slate-700 px-2 py-1 text-xs text-white shadow-md", "animate-in fade-in-0", h),
+        children: [e ? s : l, /* @__PURE__ */ t(N, { className: i("fill-slate-700", p) })]
+      }) })]
+    }), /* @__PURE__ */ t(k, {
+      role: "status",
+      "aria-live": "polite",
+      children: e ? s : ""
+    })]
+  });
+};
+$.displayName = "KonstructCopyButton";
+export {
+  $ as CopyButton
+};

package/dist/components/CopyButton/CopyButton.variants.js

@@ -0,0 +1,35 @@
+import { t as e } from "../../dist-B9GE4SXf.js";
+var i = e([
+  "inline-flex",
+  "shrink-0",
+  "items-center",
+  "justify-center",
+  "cursor-pointer",
+  "tap-target",
+  "rounded-xs",
+  "transition-colors",
+  "focus-visible:outline-none",
+  "focus-visible:ring-1",
+  "focus-visible:ring-aurora-500",
+  "kubefirst:focus-visible:ring-kubefirst-primary",
+  "disabled:pointer-events-none",
+  "disabled:opacity-45",
+  "pointer-coarse:min-h-11",
+  "pointer-coarse:min-w-11"
+], {
+  variants: { iconOnly: {
+    true: [
+      "text-slate-500",
+      "hover:text-slate-800",
+      "active:text-slate-800",
+      "dark:text-metal-400",
+      "dark:hover:text-metal-100",
+      "dark:active:text-metal-100"
+    ],
+    false: ""
+  } },
+  defaultVariants: { iconOnly: !0 }
+});
+export {
+  i as copyButtonVariants
+};

package/dist/components/CopyButton/hooks/index.js

@@ -0,0 +1,4 @@
+import { useCopyToClipboard as p } from "./useCopyToClipboard/useCopyToClipboard.js";
+export {
+  p as useCopyToClipboard
+};

package/dist/components/CopyButton/hooks/useCopyToClipboard/useCopyToClipboard.js

@@ -0,0 +1,22 @@
+import { useEffect as s, useRef as n, useState as p } from "react";
+var f = 1500, m = ({ resetDelay: o = f, onCopy: u, onCopyError: a } = {}) => {
+  const [c, r] = p(!1), e = n(void 0);
+  return s(() => () => {
+    clearTimeout(e.current);
+  }, []), {
+    copied: c,
+    copy: async (t) => {
+      try {
+        await navigator.clipboard.writeText(t);
+      } catch (i) {
+        return a?.(i), !1;
+      }
+      return r(!0), clearTimeout(e.current), e.current = setTimeout(() => {
+        r(!1);
+      }, o), u?.(t), !0;
+    }
+  };
+};
+export {
+  m as useCopyToClipboard
+};

package/dist/components/Counter/Counter.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as e } from "../../Counter-bTFm7xa3.js";
+import { t as e } from "../../Counter-QMbqdFuI.js";
 export {
   e as Counter
 };

package/dist/components/Counter/Counter.variants.js

@@ -1,26 +1,76 @@
-import { t as e } from "../../dist-Bcn6lMQe.js";
+import { t as e } from "../../dist-B9GE4SXf.js";
 var r = e([
+  "flex",
+  "items-center",
+  "h-9",
+  "pointer-coarse:h-11",
+  "border",
+  "border-x-0",
+  "border-gray-300",
+  "bg-white",
+  "dark:bg-metal-800",
+  "dark:border-metal-700"
+], {
+  variants: {
+    fullWidth: {
+      true: ["flex-1", "w-full"],
+      false: []
+    },
+    hasError: {
+      true: ["border-red-600", "dark:border-red-500"],
+      false: []
+    },
+    disabled: {
+      true: ["bg-gray-100", "dark:bg-metal-900"],
+      false: []
+    }
+  },
+  defaultVariants: {
+    fullWidth: !1,
+    hasError: !1,
+    disabled: !1
+  }
+}), t = e([
   "[&::-webkit-inner-spin-button]:appearance-none",
   "[&::-webkit-outer-spin-button]:appearance-none",
   "[-moz-appearance:textfield]",
   "appearance-none",
-  "border",
-  "border-x-0",
+  "bg-transparent",
+  "border-none",
   "focus-visible:outline-none",
   "focus-visible:ring-transparent",
-  "h-9",
+  "h-full",
   "max-w-16",
   "text-right",
   "px-3",
-  "border-gray-300",
   "text-slate-800",
-  "bg-white",
-  "dark:bg-metal-800",
-  "dark:border-metal-700",
-  "dark:text-metal-50"
-]), t = e([
+  "disabled:text-slate-400",
+  "dark:text-metal-50",
+  "dark:disabled:text-metal-400"
+], {
+  variants: { fullWidth: {
+    true: [
+      "max-w-none",
+      "flex-1",
+      "min-w-0",
+      "w-full"
+    ],
+    false: []
+  } },
+  defaultVariants: { fullWidth: !1 }
+}), d = e([
+  "pr-3",
+  "text-sm",
+  "select-none",
+  "text-slate-400",
+  "dark:text-slate-500"
+]), l = e([
   "h-9",
   "w-9",
+  "pointer-coarse:h-11",
+  "pointer-coarse:w-11",
+  "tap-target",
+  "shrink-0",
   "flex",
   "items-center",
   "justify-center",
@@ -31,6 +81,7 @@ var r = e([
   "cursor-pointer",
   "hover:bg-aurora-50",
   "hover:text-slate-600",
+  "active:bg-aurora-100",
   "disabled:hover:bg-white",
   "disabled:bg-white",
   "disabled:text-slate-400",
@@ -39,19 +90,33 @@ var r = e([
   "dark:text-aurora-500",
   "dark:hover:bg-aurora-900",
   "dark:hover:text-aurora-500",
+  "dark:active:bg-aurora-900",
+  "disabled:active:bg-white",
+  "dark:disabled:active:bg-metal-800",
   "dark:disabled:text-metal-400",
   "dark:disabled:hover:bg-metal-800",
   "dark:disabled:bg-metal-800",
   "disabled:cursor-not-allowed"
-], { variants: { button: {
-  left: ["rounded-e"],
-  rigth: ["rounded-s"]
-} } }), o = e(["cursor-pointer"], {
+], {
+  variants: {
+    button: {
+      left: ["rounded-e"],
+      rigth: ["rounded-s"]
+    },
+    hasError: {
+      true: ["border-red-600", "dark:border-red-500"],
+      false: []
+    }
+  },
+  defaultVariants: { hasError: !1 }
+}), s = e(["cursor-pointer"], {
   variants: { variant: { default: "" } },
   defaultVariants: { variant: "default" }
 });
 export {
-  t as buttonVariants,
-  r as counterVariants,
-  o as labelVariants
+  l as buttonVariants,
+  t as counterVariants,
+  r as fieldVariants,
+  s as labelVariants,
+  d as unitVariants
 };

package/dist/components/DateRangePicker/DateRangePicker.js

@@ -1,29 +1,35 @@
-import { t as a } from "../../utils-COaoD3PI.js";
+import { t as a } from "../../utils-DnIJruo0.js";
 import { Typography as i } from "../Typography/Typography.js";
-import { DateRangePickerProvider as Q } from "./contexts/date-range-picker.provider.js";
-import { PresetPanel as S } from "./components/PresetPanel/PresetPanel.js";
-import { DateTimeInputs as U } from "./components/DateTimeInputs/DateTimeInputs.js";
-import { CalendarPanel as W } from "./components/CalendarPanel/CalendarPanel.js";
-import { dateRangePickerVariants as X, rightPanelVariants as Y } from "./DateRangePicker.variants.js";
+import { CalendarPanel as $ } from "./components/CalendarPanel/CalendarPanel.js";
+import { DateTimeInputs as ee } from "./components/DateTimeInputs/DateTimeInputs.js";
+import { PresetPanel as re } from "./components/PresetPanel/PresetPanel.js";
+import { RightPanel as ae } from "./components/RightPanel/RightPanel.js";
+import { DateRangePickerProvider as te } from "./contexts/date-range-picker/date-range-picker.provider.js";
+import { dateRangePickerVariants as ne, rightPanelVariants as ie } from "./DateRangePicker.variants.js";
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-var Z = ({ animationDuration: m = 500, className: o, defaultPreset: l = "custom", defaultRange: s, defaultTime: c, disabled: p = !1, isRequired: d, label: n, labelWrapperClassName: f, name: g, showTime: P = !0, theme: h, timeFormat: x = "24", blockedDays: u, blockedMonths: v, minDate: k, maxDate: N, hideDisabledNavigation: D, showOutsideDays: R, navigationMode: y = "independent", ariaLabelCalendar: T, ariaLabelPrevMonth: j, ariaLabelNextMonth: I, ariaLabelPrevMonthStart: V, ariaLabelNextMonthStart: b, ariaLabelPrevMonthEnd: C, ariaLabelNextMonthEnd: K, labelStartDate: L, labelEndDate: q, labelTime: w, ariaLabelStartDate: z, ariaLabelEndDate: A, errorInvalidDate: B, errorDateNotAvailable: E, showPresets: F = !0, labelTimePeriod: G, ariaLabelTimePeriod: H, presetLabels: J, classNames: r, onRangeChange: M, onDateChange: O }) => /* @__PURE__ */ e(Q, {
+var oe = ({ animationDuration: o = 500, className: l, defaultPreset: m = "custom", defaultRange: s, defaultTime: c, disabled: p = !1, isRequired: d, label: n, labelWrapperClassName: f, name: g, showTime: P = !0, theme: h, timeFormat: x = "24", blockedDays: u, blockedMonths: k, minDate: v, maxDate: N, hideDisabledNavigation: D, showOutsideDays: R, navigationMode: y = "independent", numberOfMonths: T = 2, dateDisplayFormat: j = "long", ariaLabelCalendar: I, ariaLabelPrevMonth: V, ariaLabelNextMonth: b, ariaLabelPrevMonthStart: C, ariaLabelNextMonthStart: K, ariaLabelPrevMonthEnd: L, ariaLabelNextMonthEnd: q, autoComplete: w, labelStartDate: z, labelEndDate: A, labelTime: B, requiredDates: E, ariaLabelStartDate: F, ariaLabelEndDate: G, errorInvalidDate: H, errorDateNotAvailable: J, showPresets: M = !0, presets: O, footer: Q, revealCalendarOnCustom: S = !1, labelTimePeriod: U, ariaLabelTimePeriod: W, presetLabels: X, classNames: r, onRangeChange: Y, onDateChange: Z, onPresetChange: _ }) => /* @__PURE__ */ e(te, {
   defaultRange: s,
   defaultTime: c,
-  defaultPreset: l,
+  defaultPreset: m,
+  presets: O,
   timeFormat: x,
   showTime: P,
   name: g,
   disabled: p,
-  animationDuration: m,
+  animationDuration: o,
   blockedDays: u,
-  blockedMonths: v,
-  minDate: k,
+  blockedMonths: k,
+  minDate: v,
   maxDate: N,
   hideDisabledNavigation: D,
   showOutsideDays: R,
   navigationMode: y,
-  onRangeChange: M,
-  onDateChange: O,
+  numberOfMonths: T,
+  dateDisplayFormat: j,
+  revealCalendarOnCustom: S,
+  onRangeChange: Y,
+  onDateChange: Z,
+  onPresetChange: _,
   children: /* @__PURE__ */ t("div", {
     className: "flex flex-col gap-2",
     "data-theme": h,
@@ -40,40 +46,46 @@ var Z = ({ animationDuration: m = 500, className: o, defaultPreset: l = "custom"
         })]
       })
     }) : null, /* @__PURE__ */ t("div", {
-      className: a(X({ className: o }), "gap-4", r?.container),
+      className: a(ne({ className: l }), r?.container),
       role: "group",
       "aria-label": n || "Date range picker",
-      children: [F && /* @__PURE__ */ e(S, {
-        labelTimePeriod: G,
-        ariaLabelTimePeriod: H,
-        presetLabels: J,
+      children: [M && /* @__PURE__ */ e(re, {
+        labelTimePeriod: U,
+        ariaLabelTimePeriod: W,
+        presetLabels: X,
         classNames: r?.presetPanel
-      }), /* @__PURE__ */ t("div", {
-        className: a(Y(), r?.rightPanel),
-        children: [/* @__PURE__ */ e(U, {
-          labelStartDate: L,
-          labelEndDate: q,
-          labelTime: w,
-          ariaLabelStartDate: z,
-          ariaLabelEndDate: A,
-          errorInvalidDate: B,
-          errorDateNotAvailable: E,
-          classNames: r?.dateTimeInputs
-        }), /* @__PURE__ */ e(W, {
-          ariaLabelCalendar: T,
-          ariaLabelPrevMonth: j,
-          ariaLabelNextMonth: I,
-          ariaLabelPrevMonthStart: V,
-          ariaLabelNextMonthStart: b,
-          ariaLabelPrevMonthEnd: C,
-          ariaLabelNextMonthEnd: K,
-          classNames: r?.calendarPanel
-        })]
+      }), /* @__PURE__ */ t(ae, {
+        className: a(ie(), r?.rightPanel),
+        children: [
+          /* @__PURE__ */ e(ee, {
+            autoComplete: w,
+            labelStartDate: z,
+            labelEndDate: A,
+            labelTime: B,
+            requiredDates: E,
+            ariaLabelStartDate: F,
+            ariaLabelEndDate: G,
+            errorInvalidDate: H,
+            errorDateNotAvailable: J,
+            classNames: r?.dateTimeInputs
+          }),
+          /* @__PURE__ */ e($, {
+            ariaLabelCalendar: I,
+            ariaLabelPrevMonth: V,
+            ariaLabelNextMonth: b,
+            ariaLabelPrevMonthStart: C,
+            ariaLabelNextMonthStart: K,
+            ariaLabelPrevMonthEnd: L,
+            ariaLabelNextMonthEnd: q,
+            classNames: r?.calendarPanel
+          }),
+          Q
+        ]
       })]
     })]
   })
 });
-Z.displayName = "KonstructDateRangePicker";
+oe.displayName = "KonstructDateRangePicker";
 export {
-  Z as DateRangePicker
+  oe as DateRangePicker
 };

package/dist/components/DateRangePicker/DateRangePicker.variants.js

@@ -1,22 +1,21 @@
-import { t as a } from "../../dist-Bcn6lMQe.js";
+import { t as a } from "../../dist-B9GE4SXf.js";
 var r = a([
   "flex",
   "rounded-xl",
+  "overflow-hidden",
   "max-w-fit",
   "bg-white",
   "dark:bg-metal-800",
   "dark:border-metal-700",
   "shadow",
-  "dark:shadow-metal-50/5",
-  "pt-4.5",
-  "pb-3.5",
-  "px-4"
+  "dark:shadow-metal-50/5"
 ]), t = a([
   "flex",
   "flex-col",
-  "pt-4",
   "gap-6",
-  "pr-4",
+  "pt-4.5",
+  "pb-3.5",
+  "px-4",
   "items-center"
 ]);
 export {