@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

@@ -1,95 +1,76 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as o } from "../../../Badge/Badge.js";
-import { Button as m } from "../../../Button/Button.js";
-import { Checkbox as C } from "../../../Checkbox/Checkbox.js";
-import { cn as n } from "../../../../utils/index.js";
-import { filterButtonIconVariants as y, filterButtonVariants as N } from "../../Filter.variants.js";
-import { useBadgeMultiSelect as B } from "./BadgeMultiSelect.hook.js";
-import { C as O } from "../../../../chevron-down-MZvQoT2F.js";
-const $ = ({
-  options: i,
-  label: p,
-  position: d = "left",
-  onApply: f
-}) => {
-  const {
-    wrapperRef: h,
-    isOpen: l,
-    selectedOptions: u,
-    selectedCount: c,
-    handleOpen: g,
-    handleResetOptions: b,
-    handleApplyOptions: v,
-    handleSelectOption: x
-  } = B({ onApply: f });
-  return i.length === 0 ? null : /* @__PURE__ */ a("div", { ref: h, className: "relative", children: [
-    /* @__PURE__ */ a(
-      "button",
-      {
-        className: n(N(), {
-          "text-slate-700": l
-        }),
-        onClick: g,
-        children: [
-          p,
-          c.length > 0 && /* @__PURE__ */ e(o, { label: c.length.toString() }),
-          /* @__PURE__ */ e(
-            O,
-            {
-              className: n(y(), {
-                "rotate-180": l,
-                "text-blue-600": l
-              })
-            }
-          )
-        ]
-      }
-    ),
-    l && /* @__PURE__ */ a(
-      "div",
-      {
-        className: n(
-          "absolute top-full mt-1 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200",
-          {
-            "left-0": d === "left",
-            "right-0": d === "right"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ e("div", { className: "py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: i.map((t) => {
-            const s = !!u.find(
-              (r) => r.id === t.id
-            );
-            return /* @__PURE__ */ a("div", { className: "flex gap-4 px-6", children: [
-              /* @__PURE__ */ e(
-                C,
-                {
-                  defaultChecked: s,
-                  "data-label": t.id,
-                  onChange: (r) => x(t, r)
-                },
-                `${t.id}-${s}`
-              ),
-              /* @__PURE__ */ e(o, { label: t.label, variant: t.variant })
-            ] }, t.id);
-          }) }) }),
-          /* @__PURE__ */ a("div", { className: "flex justify-center items-center gap-4 py-4 border-t border-gray-200", children: [
-            /* @__PURE__ */ e(
-              m,
-              {
-                variant: "secondary",
-                appearance: "compact",
-                onClick: b,
-                children: "Reset"
-              }
-            ),
-            /* @__PURE__ */ e(m, { appearance: "compact", onClick: v, children: "Apply" })
-          ] })
-        ]
-      }
-    )
-  ] });
+import { t as h } from "../../../../Checkbox-Cn0UWlk8.js";
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { Button as f } from "../../../Button/Button.js";
+import { t as B } from "../../../../chevron-down-DgssmYWu.js";
+import { Badge as c } from "../../../Badge/Badge.js";
+import { filterButtonIconVariants as O, filterButtonVariants as A } from "../../Filter.variants.js";
+import { useBadgeMultiSelect as I } from "./BadgeMultiSelect.hook.js";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+var q = ({ options: t, label: p, position: i = "left", onApply: g, showSelectAll: u = !0, selectAllLabel: b = "All" }) => {
+  const { wrapperRef: x, isOpen: d, isAllSelected: s, selectedOptions: v, selectedCount: m, handleOpen: k, handleResetOptions: C, handleApplyOptions: N, handleSelectAll: y, handleSelectOption: S } = I({
+    onApply: g,
+    options: t
+  });
+  return t.length === 0 ? null : /* @__PURE__ */ l("div", {
+    ref: x,
+    className: "relative",
+    children: [/* @__PURE__ */ l("button", {
+      className: r(A(), { "text-slate-700 dark:text-metal-50": d }),
+      onClick: k,
+      children: [
+        p,
+        m.length > 0 && /* @__PURE__ */ a(c, { label: m.length.toString() }),
+        /* @__PURE__ */ a(B, { className: r(O(), { "rotate-180 text-blue-600 dark:text-aurora-500": d }) })
+      ]
+    }), d && /* @__PURE__ */ l("div", {
+      className: r("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "border", "border-gray-200", "dark:bg-metal-800", "dark:border-metal-700", {
+        "left-0": i === "left",
+        "right-0": i === "right"
+      }),
+      children: [/* @__PURE__ */ a("div", {
+        className: "px-6 py-4",
+        children: /* @__PURE__ */ l("div", {
+          className: "flex flex-col gap-2",
+          children: [u && /* @__PURE__ */ l("div", {
+            className: "flex gap-4",
+            children: [/* @__PURE__ */ a(h, {
+              defaultChecked: s,
+              onChange: (e) => y(t, e)
+            }, `select-all-${s}`), /* @__PURE__ */ a(c, { label: b })]
+          }), t.map((e) => {
+            const o = !!v.find((n) => n.id === e.id);
+            return /* @__PURE__ */ l("div", {
+              className: "flex gap-4",
+              children: [/* @__PURE__ */ a(h, {
+                defaultChecked: o,
+                "data-label": e.id,
+                onChange: (n) => S(e, n)
+              }, `${e.id}-${o}`), /* @__PURE__ */ a(c, {
+                label: e.label,
+                variant: e.variant,
+                leftIcon: e.leftIcon,
+                rightIcon: e.rightIcon,
+                loading: e.loading
+              })]
+            }, e.id);
+          })]
+        })
+      }), /* @__PURE__ */ l("div", {
+        className: r("flex", "justify-center", "items-center", "gap-4", "px-6", "py-4", "border-t", "border-gray-200", "dark:border-metal-700"),
+        children: [/* @__PURE__ */ a(f, {
+          variant: "secondary",
+          appearance: "compact",
+          onClick: C,
+          children: "Reset"
+        }), /* @__PURE__ */ a(f, {
+          appearance: "compact",
+          onClick: N,
+          children: "Apply"
+        })]
+      })]
+    })]
+  });
 };
 export {
-  $ as BadgeMultiSelect
+  q as BadgeMultiSelect
 };

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.types.d.ts

@@ -0,0 +1,13 @@
+import { Option } from '../../Filter.types';
+export type SelectedOptions = Option & {
+    isApplied?: boolean;
+    isRemoved?: boolean;
+};
+export type BadgeMultiSelectProps = {
+    label: string;
+    options: Option[];
+    position?: 'left' | 'right';
+    onApply?: (selectedOptions: Option[]) => void;
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
+};

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DateFilterDropdownProps } from './DateFilterDropdown.types';
+export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.d.ts

@@ -0,0 +1,12 @@
+import { DateFilterDropdownProps } from './DateFilterDropdown.types';
+export declare const useDateFilterDropdown: ({ onApply, countryCode, }: Pick<DateFilterDropdownProps, "onApply" | "countryCode">) => {
+    id: string;
+    appliedDay: string | undefined;
+    isOpen: boolean;
+    selectedDay: Date | undefined;
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleApply: () => void;
+    handleOpen: () => void;
+    handleSelect: (date: Date) => void;
+    handleReset: () => void;
+};

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.hook.js

@@ -1,86 +1,58 @@
-import { useRef as w, useId as C, useState as m, useMemo as L, useCallback as s, useEffect as E } from "react";
-import { sendOpenFilterEvent as y, FilterEvent as f } from "../../events/index.js";
-const R = ({
-  onApply: n
-}) => {
-  const i = w(null), t = C(), [g, a] = m(!1), [r, l] = m(), [v, d] = m(), h = L(
-    () => v?.toLocaleDateString("en-GB", {
-      day: "numeric",
-      month: "short",
-      year: "numeric"
-    }),
-    [v]
-  ), p = s(
-    () => a((e) => (e || y(t), !e)),
-    [t]
-  ), D = s(() => {
-    d(r), n?.(r);
-  }, [n, r]), b = s((e) => l(e), []), c = s(() => a(!1), []), O = s(() => {
-    l(void 0), d(void 0), n?.();
-  }, [n]);
-  return E(() => {
+import { useFilterContext as C } from "../../contexts/filter.hook.js";
+import { FilterEvent as f, sendOpenFilterEvent as S } from "../../events/index.js";
+import { t as y } from "../../../../utils-CQSRNcoF.js";
+import { useCallback as a, useEffect as m, useId as F, useMemo as R, useRef as k, useState as g } from "react";
+var A = ({ onApply: n, countryCode: p = "US" }) => {
+  const { closeOnApply: r } = C(), i = k(null), t = F(), [E, o] = g(!1), [l, d] = g(), [v, c] = g(), h = R(() => v?.toLocaleDateString(y(p), {
+    day: "numeric",
+    month: "short",
+    year: "numeric"
+  }), [v, p]), D = a(() => o((e) => (e || S(t), !e)), [t]), b = a(() => {
+    c(l), n?.(l), r && o(!1);
+  }, [
+    r,
+    n,
+    l
+  ]), O = a((e) => d(e), []), u = a(() => o(!1), []), L = a(() => {
+    d(void 0), c(void 0), n?.(), r && o(!1);
+  }, [r, n]);
+  return m(() => {
     const e = new AbortController();
-    return document.addEventListener(
-      f.OPEN,
-      (o) => {
-        o.detail !== t && a(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener(f.OPEN, ((s) => {
+      s.detail !== t && o(!1);
+    }), { signal: e.signal }), () => {
       e.abort();
     };
-  }, [t]), E(() => {
+  }, [t]), m(() => {
     const e = new AbortController();
-    return document.addEventListener(
-      f.OPEN,
-      (o) => {
-        o.detail !== t && a(!1);
-      },
-      {
-        signal: e.signal
-      }
-    ), document.addEventListener(
-      f.RESET,
-      () => {
-        l(void 0), d(void 0), n?.();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener(f.OPEN, (s) => {
+      s.detail !== t && o(!1);
+    }, { signal: e.signal }), document.addEventListener(f.RESET, () => {
+      d(void 0), c(void 0), n?.();
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [t, n]), E(() => {
-    const e = new AbortController(), o = (u) => {
-      i.current?.contains(u.target) || c();
+  }, [t, n]), m(() => {
+    const e = new AbortController(), s = (w) => {
+      i.current?.contains(w.target) || u();
     };
-    return document.addEventListener("mousedown", o, {
-      signal: e.signal
-    }), document.addEventListener(
-      "visibilitychange",
-      () => {
-        document.hidden && c();
-      },
-      {
-        signal: e.signal
-      }
-    ), () => {
+    return document.addEventListener("mousedown", s, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
+      document.hidden && u();
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [c, i]), {
+  }, [u, i]), {
     id: t,
     appliedDay: h,
-    isOpen: g,
-    selectedDay: r,
+    isOpen: E,
+    selectedDay: l,
     wrapperRef: i,
-    handleApply: D,
-    handleOpen: p,
-    handleSelect: b,
-    handleReset: O
+    handleApply: b,
+    handleOpen: D,
+    handleSelect: O,
+    handleReset: L
   };
 };
 export {
-  R as useDateFilterDropdown
+  A as useDateFilterDropdown
 };

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js

@@ -1,90 +1,55 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as g } from "../../../Badge/Badge.js";
+import { t as e } from "../../../../utils-DHuiYnx1.js";
 import { Button as i } from "../../../Button/Button.js";
+import { t as g } from "../../../../chevron-down-DgssmYWu.js";
+import { Badge as x } from "../../../Badge/Badge.js";
 import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
-import { cn as o } from "../../../../utils/index.js";
-import { filterButtonIconVariants as x, filterButtonVariants as y } from "../../Filter.variants.js";
+import { filterButtonIconVariants as y, filterButtonVariants as k } from "../../Filter.variants.js";
 import { useDateFilterDropdown as D } from "./DateFilterDropdown.hook.js";
-import { C as N } from "../../../../chevron-down-MZvQoT2F.js";
-const R = ({
-  label: s,
-  position: l = "left",
-  onApply: p
-}) => {
-  const {
-    id: c,
-    appliedDay: n,
-    isOpen: t,
-    selectedDay: r,
-    wrapperRef: d,
-    handleApply: m,
-    handleOpen: f,
-    handleSelect: h,
-    handleReset: u
-  } = D({ onApply: p });
-  return /* @__PURE__ */ a("div", { ref: d, className: "relative", children: [
-    /* @__PURE__ */ a(
-      "button",
-      {
-        className: o(y(), {
-          "text-slate-700": t
-        }),
-        onClick: f,
-        children: [
-          s,
-          n && /* @__PURE__ */ e(g, { label: n }),
-          /* @__PURE__ */ e(
-            N,
-            {
-              className: o(x(), {
-                "rotate-180": t,
-                "text-blue-600": t
-              })
-            }
-          )
-        ]
-      }
-    ),
-    t && /* @__PURE__ */ a(
-      "div",
-      {
-        className: o(
-          "absolute top-full mt-1 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200 flex flex-col gap-4 py-4 px-6",
-          {
-            "left-0": l === "left",
-            "right-0": l === "right"
-          }
-        ),
-        children: [
-          /* @__PURE__ */ e(
-            w,
-            {
-              className: "p-0",
-              arrowClassName: "-top-1 right-0",
-              monthsClassName: "shadow-none p-0 w-auto",
-              defaultSelected: r,
-              defaultMonth: r,
-              onSelect: h
-            },
-            r?.toISOString() ?? c
-          ),
-          /* @__PURE__ */ a("div", { className: "flex justify-end items-center gap-4 py-2", children: [
-            /* @__PURE__ */ e(
-              i,
-              {
-                variant: "secondary",
-                appearance: "compact",
-                onClick: u,
-                children: "Reset"
-              }
-            ),
-            /* @__PURE__ */ e(i, { appearance: "compact", onClick: m, children: "Apply" })
-          ] })
-        ]
-      }
-    )
-  ] });
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+var A = ({ label: d, position: l = "left", countryCode: s = "US", onApply: p }) => {
+  const { id: m, appliedDay: n, isOpen: r, selectedDay: o, wrapperRef: c, handleApply: f, handleOpen: h, handleSelect: u, handleReset: b } = D({
+    onApply: p,
+    countryCode: s
+  });
+  return /* @__PURE__ */ a("div", {
+    ref: c,
+    className: "relative",
+    children: [/* @__PURE__ */ a("button", {
+      className: e(k(), { "text-slate-700": r }),
+      onClick: h,
+      children: [
+        d,
+        n && /* @__PURE__ */ t(x, { label: n }),
+        /* @__PURE__ */ t(g, { className: e(y(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
+      ]
+    }), r && /* @__PURE__ */ a("div", {
+      className: e("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "border", "border-gray-200", "flex", "flex-col", "gap-4", "py-4", "px-6", "dark:bg-metal-800", "dark:border-metal-700", {
+        "left-0": l === "left",
+        "right-0": l === "right"
+      }),
+      children: [/* @__PURE__ */ t(w, {
+        className: "p-0",
+        arrowClassName: "-top-1 right-0",
+        monthsClassName: e("shadow-none", "p-0", "w-auto", "dark:border-transparent"),
+        defaultSelected: o,
+        defaultMonth: o,
+        onSelect: u
+      }, o?.toISOString() ?? m), /* @__PURE__ */ a("div", {
+        className: e("flex", "justify-end", "items-center", "gap-4", "py-2"),
+        children: [/* @__PURE__ */ t(i, {
+          variant: "secondary",
+          appearance: "compact",
+          onClick: b,
+          children: "Reset"
+        }), /* @__PURE__ */ t(i, {
+          appearance: "compact",
+          onClick: f,
+          children: "Apply"
+        })]
+      })]
+    })]
+  });
 };
 export {
-  R as DateFilterDropdown
+  A as DateFilterDropdown
 };

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.types.d.ts

@@ -0,0 +1,7 @@
+export type DateFilterDropdownProps = {
+    label: string;
+    position?: 'left' | 'right';
+    onApply?: (date?: Date) => void;
+    /** Country code for locale formatting (default: 'US') */
+    countryCode?: string;
+};

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { DateRangeFilterDropdownProps } from './DateRangeFilterDropdown.types';
+export declare const DateRangeFilterDropdown: FC<DateRangeFilterDropdownProps>;

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.hook.d.ts

@@ -0,0 +1,13 @@
+import { DateRange, DateRangeWithTime } from '../../../DateRangePicker/DateRangePicker.types';
+import { DateRangeFilterDropdownProps } from './DateRangeFilterDropdown.types';
+export declare const useDateRangeFilterDropdown: ({ defaultRange, onApply, countryCode, }: Pick<DateRangeFilterDropdownProps, "defaultRange" | "onApply" | "countryCode">) => {
+    id: string;
+    appliedRange: string | undefined;
+    isOpen: boolean;
+    selectedRange: DateRange | undefined;
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleApply: () => void;
+    handleOpen: () => void;
+    handleRangeChange: (range: DateRangeWithTime) => void;
+    handleReset: () => void;
+};

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.hook.js

@@ -0,0 +1,63 @@
+import { useFilterContext as F } from "../../contexts/filter.hook.js";
+import { FilterEvent as g, sendOpenFilterEvent as S } from "../../events/index.js";
+import { t as D } from "../../../../utils-CQSRNcoF.js";
+import { useCallback as a, useEffect as p, useId as k, useMemo as x, useRef as I, useState as u } from "react";
+var P = ({ defaultRange: h, onApply: t, countryCode: v = "US" }) => {
+  const { closeOnApply: i } = F(), d = I(null), o = k(), [R, r] = u(!1), [l, c] = u(h), [n, f] = u(), E = x(() => {
+    if (!n?.from) return;
+    const e = (s) => s.toLocaleDateString(D(v), {
+      day: "numeric",
+      month: "short"
+    });
+    return n.to ? `${e(n.from)} - ${e(n.to)}` : e(n.from);
+  }, [n]), C = a(() => r((e) => (e || S(o), !e)), [o]), O = a(() => {
+    const e = {
+      from: l?.from,
+      to: l?.to
+    };
+    f(e), t?.(e), i && r(!1);
+  }, [
+    i,
+    t,
+    l
+  ]), b = a((e) => {
+    c({
+      from: e.from,
+      to: e.to
+    });
+  }, []), m = a(() => r(!1), []), L = a(() => {
+    c(void 0), f(void 0), t?.(), i && r(!1);
+  }, [i, t]);
+  return p(() => {
+    const e = new AbortController();
+    return document.addEventListener(g.OPEN, (s) => {
+      s.detail !== o && r(!1);
+    }, { signal: e.signal }), document.addEventListener(g.RESET, () => {
+      c(void 0), f(void 0), t?.();
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [o, t]), p(() => {
+    const e = new AbortController(), s = (w) => {
+      d.current?.contains(w.target) || m();
+    };
+    return document.addEventListener("mousedown", s, { signal: e.signal }), document.addEventListener("visibilitychange", () => {
+      document.hidden && m();
+    }, { signal: e.signal }), () => {
+      e.abort();
+    };
+  }, [m, d]), {
+    id: o,
+    appliedRange: E,
+    isOpen: R,
+    selectedRange: l,
+    wrapperRef: d,
+    handleApply: O,
+    handleOpen: C,
+    handleRangeChange: b,
+    handleReset: L
+  };
+};
+export {
+  P as useDateRangeFilterDropdown
+};

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.js

@@ -0,0 +1,58 @@
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { Button as l } from "../../../Button/Button.js";
+import { t as x } from "../../../../chevron-down-DgssmYWu.js";
+import { Badge as C } from "../../../Badge/Badge.js";
+import { DateRangePicker as D } from "../../../DateRangePicker/DateRangePicker.js";
+import { filterButtonIconVariants as N, filterButtonVariants as y } from "../../Filter.variants.js";
+import { useDateRangeFilterDropdown as B } from "./DateRangeFilterDropdown.hook.js";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+var S = ({ label: i, position: n = "left", showTime: s = !1, timeFormat: d = "24", showPresets: m = !0, defaultRange: p, minDate: c, maxDate: f, countryCode: h = "US", onApply: g }) => {
+  const { appliedRange: o, isOpen: r, selectedRange: u, wrapperRef: R, handleApply: b, handleOpen: k, handleRangeChange: v, handleReset: w } = B({
+    defaultRange: p,
+    onApply: g,
+    countryCode: h
+  });
+  return /* @__PURE__ */ t("div", {
+    ref: R,
+    className: "relative",
+    children: [/* @__PURE__ */ t("button", {
+      className: a(y(), { "text-slate-700": r }),
+      onClick: k,
+      children: [
+        i,
+        o && /* @__PURE__ */ e(C, { label: o }),
+        /* @__PURE__ */ e(x, { className: a(N(), { "rotate-180 text-blue-600 dark:text-aurora-500": r }) })
+      ]
+    }), r && /* @__PURE__ */ t("div", {
+      className: a("absolute", "top-full", "mt-1", "bg-white", "rounded-md", "shadow-md", "animate-in", "fade-in-0", "z-10", "dark:bg-metal-800", "dark:border-metal-700", {
+        "left-0": n === "left",
+        "right-0": n === "right"
+      }),
+      children: [/* @__PURE__ */ e(D, {
+        defaultRange: u,
+        showTime: s,
+        timeFormat: d,
+        showPresets: m,
+        minDate: c,
+        maxDate: f,
+        onRangeChange: v,
+        classNames: { container: "shadow-none" }
+      }), /* @__PURE__ */ t("div", {
+        className: a("flex", "justify-end", "items-center", "gap-4", "p-4", "pt-0"),
+        children: [/* @__PURE__ */ e(l, {
+          variant: "secondary",
+          appearance: "compact",
+          onClick: w,
+          children: "Reset"
+        }), /* @__PURE__ */ e(l, {
+          appearance: "compact",
+          onClick: b,
+          children: "Apply"
+        })]
+      })]
+    })]
+  });
+};
+export {
+  S as DateRangeFilterDropdown
+};

package/dist/components/Filter/components/DateRangeFilterDropdown/DateRangeFilterDropdown.types.d.ts

@@ -0,0 +1,25 @@
+import { DateRange, DateRangeWithTime } from '../../../DateRangePicker/DateRangePicker.types';
+export type DateRangeFilterDropdownProps = {
+    /** Label for the filter button */
+    label: string;
+    /** Position of the dropdown relative to the button */
+    position?: 'left' | 'right';
+    /** Whether to show time inputs (default: false) */
+    showTime?: boolean;
+    /** Time format: '12' for 12-hour or '24' for 24-hour */
+    timeFormat?: '12' | '24';
+    /** Whether to show preset options (default: true) */
+    showPresets?: boolean;
+    /** Callback when the date range is applied */
+    onApply?: (range?: DateRangeWithTime) => void;
+    /** Callback when the date range changes */
+    onRangeChange?: (range: DateRangeWithTime) => void;
+    /** Initial date range */
+    defaultRange?: DateRange;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Country code for locale formatting (default: 'US') */
+    countryCode?: string;
+};