@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

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

@@ -1,55 +1,72 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { Badge as g } from "../../../Badge/Badge.js";
 import { Button as i } from "../../../Button/Button.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 { useDateFilterDropdown as D } from "./DateFilterDropdown.hook.js";
-import { C as N } from "../../../../chevron-down-MZvQoT2F.js";
-const R = ({
-  label: s,
+import { DatePicker as x } from "../../../Datepicker/DatePicker.js";
+import { filterButtonIconVariants as w, filterButtonVariants as y } from "../../Filter.variants.js";
+import { cn as t } from "../../../../utils/index.js";
+import { useDateFilterDropdown as k } from "./DateFilterDropdown.hook.js";
+import { C as D } from "../../../../chevron-down-BBFYYzZq.js";
+const A = ({
+  label: d,
   position: l = "left",
+  countryCode: s = "US",
   onApply: p
 }) => {
   const {
-    id: c,
+    id: m,
     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: [
+    isOpen: r,
+    selectedDay: o,
+    wrapperRef: c,
+    handleApply: f,
+    handleOpen: h,
+    handleSelect: u,
+    handleReset: b
+  } = k({ onApply: p, countryCode: s });
+  return /* @__PURE__ */ a("div", { ref: c, className: "relative", children: [
     /* @__PURE__ */ a(
       "button",
       {
-        className: o(y(), {
-          "text-slate-700": t
+        className: t(y(), {
+          "text-slate-700": r
         }),
-        onClick: f,
+        onClick: h,
         children: [
-          s,
+          d,
           n && /* @__PURE__ */ e(g, { label: n }),
           /* @__PURE__ */ e(
-            N,
+            D,
             {
-              className: o(x(), {
-                "rotate-180": t,
-                "text-blue-600": t
+              className: t(w(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": r
               })
             }
           )
         ]
       }
     ),
-    t && /* @__PURE__ */ a(
+    r && /* @__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",
+        className: t(
+          "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"
@@ -57,34 +74,51 @@ const R = ({
         ),
         children: [
           /* @__PURE__ */ e(
-            w,
+            x,
             {
               className: "p-0",
               arrowClassName: "-top-1 right-0",
-              monthsClassName: "shadow-none p-0 w-auto",
-              defaultSelected: r,
-              defaultMonth: r,
-              onSelect: h
+              monthsClassName: t(
+                "shadow-none",
+                "p-0",
+                "w-auto",
+                "dark:border-transparent"
+              ),
+              defaultSelected: o,
+              defaultMonth: o,
+              onSelect: u
             },
-            r?.toISOString() ?? c
+            o?.toISOString() ?? m
           ),
-          /* @__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" })
-          ] })
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: t(
+                "flex",
+                "justify-end",
+                "items-center",
+                "gap-4",
+                "py-2"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  i,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: b,
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ e(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,84 @@
+import { useRef as w, useId as S, useState as u, useMemo as D, useCallback as s, useEffect as g } from "react";
+import { sendOpenFilterEvent as F, FilterEvent as v } from "../../events/index.js";
+import { getLocale as k } from "../../utils/index.js";
+const x = ({
+  defaultRange: h,
+  onApply: t,
+  countryCode: E = "US"
+}) => {
+  const d = w(null), o = S(), [R, a] = u(!1), [i, l] = u(
+    h
+  ), [n, c] = u(), p = D(() => {
+    if (!n?.from) return;
+    const e = (r) => r.toLocaleDateString(k(E), {
+      day: "numeric",
+      month: "short"
+    });
+    return n.to ? `${e(n.from)} - ${e(n.to)}` : e(n.from);
+  }, [n]), b = s(
+    () => a((e) => (e || F(o), !e)),
+    [o]
+  ), C = s(() => {
+    const e = {
+      from: i?.from,
+      to: i?.to
+    };
+    c(e), t?.(e), a(!1);
+  }, [t, i]), L = s((e) => {
+    l({ from: e.from, to: e.to });
+  }, []), m = s(() => a(!1), []), O = s(() => {
+    l(void 0), c(void 0), t?.();
+  }, [t]);
+  return g(() => {
+    const e = new AbortController();
+    return document.addEventListener(
+      v.OPEN,
+      (r) => {
+        r.detail !== o && a(!1);
+      },
+      {
+        signal: e.signal
+      }
+    ), document.addEventListener(
+      v.RESET,
+      () => {
+        l(void 0), c(void 0), t?.();
+      },
+      {
+        signal: e.signal
+      }
+    ), () => {
+      e.abort();
+    };
+  }, [o, t]), g(() => {
+    const e = new AbortController(), r = (f) => {
+      d.current?.contains(f.target) || m();
+    };
+    return document.addEventListener("mousedown", r, {
+      signal: e.signal
+    }), document.addEventListener(
+      "visibilitychange",
+      () => {
+        document.hidden && m();
+      },
+      {
+        signal: e.signal
+      }
+    ), () => {
+      e.abort();
+    };
+  }, [m, d]), {
+    id: o,
+    appliedRange: p,
+    isOpen: R,
+    selectedRange: i,
+    wrapperRef: d,
+    handleApply: C,
+    handleOpen: b,
+    handleRangeChange: L,
+    handleReset: O
+  };
+};
+export {
+  x as useDateRangeFilterDropdown
+};

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

@@ -0,0 +1,121 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Badge as C } from "../../../Badge/Badge.js";
+import { Button as l } from "../../../Button/Button.js";
+import { DateRangePicker as v } from "../../../DateRangePicker/DateRangePicker.js";
+import { filterButtonIconVariants as D, filterButtonVariants as N } from "../../Filter.variants.js";
+import { cn as t } from "../../../../utils/index.js";
+import { useDateRangeFilterDropdown as y } from "./DateRangeFilterDropdown.hook.js";
+import { C as B } from "../../../../chevron-down-BBFYYzZq.js";
+const S = ({
+  label: i,
+  position: n = "left",
+  showTime: s = !1,
+  timeFormat: d = "24",
+  showPresets: m = !0,
+  defaultRange: c,
+  minDate: p,
+  maxDate: f,
+  countryCode: h = "US",
+  onApply: g
+}) => {
+  const {
+    appliedRange: o,
+    isOpen: r,
+    selectedRange: u,
+    wrapperRef: R,
+    handleApply: b,
+    handleOpen: k,
+    handleRangeChange: w,
+    handleReset: x
+  } = y({ defaultRange: c, onApply: g, countryCode: h });
+  return /* @__PURE__ */ a("div", { ref: R, className: "relative", children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        className: t(N(), {
+          "text-slate-700": r
+        }),
+        onClick: k,
+        children: [
+          i,
+          o && /* @__PURE__ */ e(C, { label: o }),
+          /* @__PURE__ */ e(
+            B,
+            {
+              className: t(D(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": r
+              })
+            }
+          )
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ a(
+      "div",
+      {
+        className: t(
+          "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(
+            v,
+            {
+              defaultRange: u,
+              showTime: s,
+              timeFormat: d,
+              showPresets: m,
+              minDate: p,
+              maxDate: f,
+              onRangeChange: w,
+              classNames: {
+                container: "shadow-none"
+              }
+            }
+          ),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: t(
+                "flex",
+                "justify-end",
+                "items-center",
+                "gap-4",
+                "p-4",
+                "pt-0"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  l,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: x,
+                    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;
+};

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

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

package/dist/components/Filter/components/ResetButton/ResetButton.js

@@ -1,29 +1,32 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useCallback as a } from "react";
-import { Button as m } from "../../../Button/Button.js";
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as m } from "react";
+import { Button as i } from "../../../Button/Button.js";
+import { cn as c } from "../../../../utils/index.js";
 import { resetEvent as p } from "../../events/index.js";
-const u = ({
+const d = ({
   disabled: e,
+  className: r,
   onClick: t,
-  ...r
+  ...o
 }) => {
-  const o = a(() => {
+  const n = m(() => {
     p(), t?.();
   }, [t]);
-  return /* @__PURE__ */ n(
-    m,
+  return /* @__PURE__ */ a(
+    i,
     {
       type: "button",
-      variant: "text",
+      variant: "link",
       appearance: "compact",
       version: "alternate",
-      onClick: o,
+      onClick: n,
       disabled: e,
-      ...r,
+      className: c("hover:no-underline", r),
+      ...o,
       children: "Reset"
     }
   );
 };
 export {
-  u as ResetButton
+  d as ResetButton
 };

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

@@ -0,0 +1,5 @@
+import { ButtonProps } from '../../../Button/Button.types';
+export type ResetButtonProps = ButtonProps & {
+    disabled?: boolean;
+    onClick?: VoidFunction;
+};

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

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

package/dist/components/Filter/components/TextMultiSelect/TextMultiSelect.js

@@ -0,0 +1,122 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { Badge as k } from "../../../Badge/Badge.js";
+import { Button as o } from "../../../Button/Button.js";
+import { Checkbox as v } from "../../../Checkbox/Checkbox.js";
+import { filterButtonIconVariants as C, filterButtonVariants as N } from "../../Filter.variants.js";
+import { cn as r } from "../../../../utils/index.js";
+import { useBadgeMultiSelect as y } from "../BadgeDropdown/BadgeMultiSelect.hook.js";
+import { C as w } from "../../../../chevron-down-BBFYYzZq.js";
+const $ = ({
+  options: n,
+  label: m,
+  position: i = "left",
+  onApply: p
+}) => {
+  const {
+    wrapperRef: h,
+    isOpen: l,
+    selectedOptions: f,
+    selectedCount: c,
+    handleOpen: u,
+    handleResetOptions: x,
+    handleApplyOptions: g,
+    handleSelectOption: b
+  } = y({ onApply: p });
+  return n.length === 0 ? null : /* @__PURE__ */ a("div", { ref: h, className: "relative", children: [
+    /* @__PURE__ */ a(
+      "button",
+      {
+        className: r(N(), {
+          "text-slate-700 dark:text-metal-50": l
+        }),
+        onClick: u,
+        children: [
+          m,
+          c.length > 0 && /* @__PURE__ */ e(k, { label: c.length.toString() }),
+          /* @__PURE__ */ e(
+            w,
+            {
+              className: r(C(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": l
+              })
+            }
+          )
+        ]
+      }
+    ),
+    l && /* @__PURE__ */ a(
+      "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__ */ e("div", { className: "px-6 py-4", children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-2", children: n.map((t) => {
+            const s = !!f.find(
+              (d) => d.id === t.id
+            );
+            return /* @__PURE__ */ a("div", { className: "flex gap-4", children: [
+              /* @__PURE__ */ e(
+                v,
+                {
+                  defaultChecked: s,
+                  "data-label": t.id,
+                  onChange: (d) => b(t, d)
+                },
+                `${t.id}-${s}`
+              ),
+              /* @__PURE__ */ e("span", { className: "text-sm text-slate-700 dark:text-metal-200 whitespace-nowrap", children: t.label })
+            ] }, t.id);
+          }) }) }),
+          /* @__PURE__ */ a(
+            "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__ */ e(
+                  o,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: x,
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ e(o, { appearance: "compact", onClick: g, children: "Apply" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  $ as TextMultiSelect
+};

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

@@ -0,0 +1,7 @@
+import { Option } from '../../Filter.types';
+export type TextMultiSelectProps = {
+    label: string;
+    options: Option[];
+    position?: 'left' | 'right';
+    onApply?: (selectedOptions: Option[]) => void;
+};

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

@@ -0,0 +1,10 @@
+export * from './BadgeDropdown/BadgeMultiSelect';
+export * from './BadgeDropdown/BadgeMultiSelect.types';
+export * from './DateFilterDropdown/DateFilterDropdown';
+export * from './DateFilterDropdown/DateFilterDropdown.types';
+export * from './DateRangeFilterDropdown/DateRangeFilterDropdown';
+export * from './DateRangeFilterDropdown/DateRangeFilterDropdown.types';
+export * from './ResetButton/ResetButton';
+export * from './ResetButton/ResetButton.types';
+export * from './TextMultiSelect/TextMultiSelect';
+export * from './TextMultiSelect/TextMultiSelect.types';

package/dist/components/Filter/components/index.js

@@ -1,8 +1,12 @@
 import { BadgeMultiSelect as o } from "./BadgeDropdown/BadgeMultiSelect.js";
 import { DateFilterDropdown as p } from "./DateFilterDropdown/DateFilterDropdown.js";
-import { ResetButton as l } from "./ResetButton/ResetButton.js";
+import { DateRangeFilterDropdown as x } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as m } from "./ResetButton/ResetButton.js";
+import { TextMultiSelect as i } from "./TextMultiSelect/TextMultiSelect.js";
 export {
   o as BadgeMultiSelect,
   p as DateFilterDropdown,
-  l as ResetButton
+  x as DateRangeFilterDropdown,
+  m as ResetButton,
+  i as TextMultiSelect
 };

package/dist/components/Filter/events/index.d.ts

@@ -0,0 +1,6 @@
+export declare enum FilterEvent {
+    OPEN = "@konstrtuctio/KonstructFilter/event-OPEN",
+    RESET = "@konstrtuctio/KonstructFilter/event-RESET"
+}
+export declare const sendOpenFilterEvent: (id: string) => boolean;
+export declare const resetEvent: () => boolean;

package/dist/components/Filter/events/index.js

@@ -1,8 +1,8 @@
-var e = /* @__PURE__ */ ((t) => (t.OPEN = "@konstrtuctio/Filter/event-OPEN", t.RESET = "@konstrtuctio/Filter/event-RESET", t))(e || {});
+var e = /* @__PURE__ */ ((t) => (t.OPEN = "@konstrtuctio/KonstructFilter/event-OPEN", t.RESET = "@konstrtuctio/KonstructFilter/event-RESET", t))(e || {});
 const n = (t) => document.dispatchEvent(
-  new CustomEvent("@konstrtuctio/Filter/event-OPEN", { detail: t })
+  new CustomEvent("@konstrtuctio/KonstructFilter/event-OPEN", { detail: t })
 ), o = () => document.dispatchEvent(new CustomEvent(
-  "@konstrtuctio/Filter/event-RESET"
+  "@konstrtuctio/KonstructFilter/event-RESET"
   /* RESET */
 ));
 export {

package/dist/components/Filter/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getLocale: (countryCode?: string) => string;