@konstructio/ui 0.1.2-alpha.51 → 0.1.2-alpha.53

package/dist/components/Datepicker/DatePicker.types.d.ts

@@ -0,0 +1,29 @@
+import { VariantProps } from 'class-variance-authority';
+import { getAllTimezones } from 'countries-and-timezones';
+import { DayPickerProps as DayPickerPrimitiveProps } from 'react-day-picker';
+import { datePickerVariants } from './DatePicker.variants';
+type TimeZone = keyof ReturnType<typeof getAllTimezones>;
+/**
+ * Props for the DatePicker component.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   defaultSelected={new Date()}
+ *   onSelect={(date) => setSelectedDate(date)}
+ * />
+ * ```
+ */
+export type DatePickerProps = Omit<DayPickerPrimitiveProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+    /** CSS classes for the navigation arrows */
+    arrowClassName?: string;
+    /** CSS classes for the months container */
+    monthsClassName?: string;
+    /** Timezone for date display */
+    timeZone?: TimeZone;
+    /** Initial selected date */
+    defaultSelected?: Date;
+    /** Callback when a date is selected */
+    onSelect?: (date: Date) => void;
+};
+export {};

package/dist/components/Datepicker/DatePicker.variants.d.ts

@@ -0,0 +1 @@
+export declare const datePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/components/Divider/Divider.d.ts

@@ -0,0 +1,17 @@
+import { FC, HTMLAttributes } from 'react';
+/**
+ * A horizontal divider/separator line.
+ *
+ * @example
+ * ```tsx
+ * <div>
+ *   <p>Section 1</p>
+ *   <Divider />
+ *   <p>Section 2</p>
+ * </div>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-divider--docs Storybook}
+ */
+declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
+export { Divider };

package/dist/components/Divider/Divider.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const dividerVariants: (props?: ({
+    variant?: "default" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/DropdownButton/DropdownButton.d.ts

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { Props } from './DropdownButton.types';
+/**
+ * A button with an attached dropdown menu for selecting actions.
+ * Closes automatically on outside click, Escape key, or tab visibility change.
+ *
+ * @example
+ * ```tsx
+ * <DropdownButton
+ *   options={[
+ *     { label: 'Download PDF', onClick: handlePdf },
+ *     { label: 'Download CSV', onClick: handleCsv },
+ *   ]}
+ *   buttonClassName="w-64"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-dropdownbutton--docs Storybook}
+ */
+export declare const DropdownButton: FC<Props>;

package/dist/components/DropdownButton/DropdownButton.types.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from 'react';
+/**
+ * Configuration for a dropdown menu option.
+ */
+export type Option = {
+    /** The text or element displayed for this option */
+    label: string | ReactNode;
+    /** Callback fired when this option is selected */
+    onClick?: VoidFunction;
+};
+/**
+ * Props for the DropdownButton component.
+ *
+ * @example
+ * ```tsx
+ * <DropdownButton
+ *   options={[
+ *     { label: 'PDF', onClick: () => downloadPdf() },
+ *     { label: 'CSV', onClick: () => downloadCsv() },
+ *     { label: 'Excel', onClick: () => downloadExcel() },
+ *   ]}
+ * />
+ * ```
+ */
+export type Props = {
+    /** Additional CSS classes for the trigger button */
+    buttonClassName?: string;
+    /** Additional CSS classes for the wrapper container */
+    className?: string;
+    /** Additional CSS classes for each dropdown item */
+    itemClassName?: string;
+    /** Additional CSS classes for the dropdown list */
+    listClassName?: string;
+    /** Array of options to display in the dropdown */
+    options: Option[];
+};

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

@@ -0,0 +1,26 @@
+import { FilterComponentProps } from './Filter.types';
+import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown } from './components';
+/**
+ * A compound component for building filter interfaces.
+ * Includes sub-components for badge multi-select, date filtering, and reset actions.
+ *
+ * @example
+ * ```tsx
+ * <Filter theme="civo">
+ *   <Filter.BadgeMultiSelect
+ *     label="Status"
+ *     options={[
+ *       { id: 'active', label: 'Active', variant: 'success' },
+ *       { id: 'pending', label: 'Pending', variant: 'warning' },
+ *     ]}
+ *     selectedValues={selected}
+ *     onChange={setSelected}
+ *   />
+ *   <Filter.ResetButton onClick={() => setSelected([])} />
+ * </Filter>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-filter--docs Storybook}
+ */
+declare const Filter: FilterComponentProps;
+export { Filter, BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, };

package/dist/components/Filter/Filter.js

@@ -3,7 +3,8 @@ import { cn as m } from "../../utils/index.js";
 import { filterVariants as a } from "./Filter.variants.js";
 import { BadgeMultiSelect as l } from "./components/BadgeDropdown/BadgeMultiSelect.js";
 import { DateFilterDropdown as p } from "./components/DateFilterDropdown/DateFilterDropdown.js";
-import { ResetButton as s } from "./components/ResetButton/ResetButton.js";
+import { DateRangeFilterDropdown as n } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as d } from "./components/ResetButton/ResetButton.js";
 const t = ({
   className: e,
   theme: o = "civo",
@@ -12,9 +13,11 @@ const t = ({
 t.displayName = "KonstructFilter";
 t.BadgeMultiSelect = l;
 t.DateFilterDropdown = p;
-t.ResetButton = s;
+t.DateRangeFilterDropdown = n;
+t.ResetButton = d;
 export {
   l as BadgeMultiSelect,
   p as DateFilterDropdown,
+  n as DateRangeFilterDropdown,
   t as Filter
 };

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

@@ -0,0 +1,53 @@
+import { VariantProps } from 'class-variance-authority';
+import { FC, PropsWithChildren } from 'react';
+import { Theme } from '../../domain/theme';
+import { BadgeProps } from '../Badge/Badge.types';
+import { filterVariants } from './Filter.variants';
+import { BadgeMultiSelectProps, DateFilterDropdownProps, DateRangeFilterDropdownProps, ResetButtonProps } from './components';
+/**
+ * Configuration for a filter option.
+ */
+export type Option = {
+    /** Unique identifier for the option */
+    id: string;
+    /** Display label for the option */
+    label: string;
+    /** Visual variant for the badge */
+    variant?: BadgeProps['variant'];
+};
+/**
+ * Props for the Filter component.
+ * A compound component for building filter interfaces.
+ *
+ * @example
+ * ```tsx
+ * <Filter theme="civo">
+ *   <Filter.BadgeMultiSelect
+ *     label="Status"
+ *     options={statusOptions}
+ *     selectedValues={selectedStatuses}
+ *     onChange={setSelectedStatuses}
+ *   />
+ *   <Filter.DateFilterDropdown
+ *     label="Date"
+ *     onDateChange={setDateRange}
+ *   />
+ *   <Filter.ResetButton onClick={resetFilters} />
+ * </Filter>
+ * ```
+ */
+export type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildren & {
+    /** Additional CSS classes for the filter wrapper */
+    className?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+};
+/**
+ * Filter compound component type with sub-components.
+ */
+export type FilterComponentProps = FC<FilterProps> & {
+    BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+    DateFilterDropdown: FC<DateFilterDropdownProps>;
+    DateRangeFilterDropdown: FC<DateRangeFilterDropdownProps>;
+    ResetButton: FC<ResetButtonProps>;
+};

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

@@ -0,0 +1,3 @@
+export declare const filterVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const filterButtonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const filterButtonIconVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

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

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

@@ -0,0 +1,12 @@
+import { Option } from '../../Filter.types';
+import { BadgeMultiSelectProps, SelectedOptions } from './BadgeMultiSelect.types';
+export declare const useBadgeMultiSelect: ({ onApply, }: Pick<BadgeMultiSelectProps, "onApply">) => {
+    isOpen: boolean;
+    selectedCount: SelectedOptions[];
+    selectedOptions: SelectedOptions[];
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleApplyOptions: () => void;
+    handleOpen: () => void;
+    handleResetOptions: () => void;
+    handleSelectOption: (option: Option, checked: boolean) => void;
+};

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

@@ -5,7 +5,7 @@ import { Checkbox as k } from "../../../Checkbox/Checkbox.js";
 import { filterButtonIconVariants as C, filterButtonVariants as y } from "../../Filter.variants.js";
 import { cn as r } from "../../../../utils/index.js";
 import { useBadgeMultiSelect as N } from "./BadgeMultiSelect.hook.js";
-import { C as B } from "../../../../chevron-down-DgT-uSF9.js";
+import { C as B } from "../../../../chevron-down-BBFYYzZq.js";
 const $ = ({
   options: n,
   label: p,

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

@@ -0,0 +1,11 @@
+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;
+};

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,27 +1,29 @@
-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
+import { useRef as w, useId as S, useState as m, useMemo as C, useCallback as s, useEffect as f } from "react";
+import { sendOpenFilterEvent as y, FilterEvent as E } from "../../events/index.js";
+import { getLocale as F } from "../../utils/index.js";
+const N = ({
+  onApply: n,
+  countryCode: v = "US"
 }) => {
-  const i = w(null), t = C(), [g, a] = m(!1), [r, l] = m(), [v, d] = m(), h = L(
-    () => v?.toLocaleDateString("en-GB", {
+  const i = w(null), t = S(), [h, a] = m(!1), [r, l] = m(), [g, c] = m(), p = C(
+    () => g?.toLocaleDateString(F(v), {
       day: "numeric",
       month: "short",
       year: "numeric"
     }),
-    [v]
-  ), p = s(
+    [g, v]
+  ), D = 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?.();
+  ), b = s(() => {
+    c(r), n?.(r);
+  }, [n, r]), L = s((e) => l(e), []), d = s(() => a(!1), []), O = s(() => {
+    l(void 0), c(void 0), n?.();
   }, [n]);
-  return E(() => {
+  return f(() => {
     const e = new AbortController();
     return document.addEventListener(
-      f.OPEN,
+      E.OPEN,
       ((o) => {
         o.detail !== t && a(!1);
       }),
@@ -31,10 +33,10 @@ const R = ({
     ), () => {
       e.abort();
     };
-  }, [t]), E(() => {
+  }, [t]), f(() => {
     const e = new AbortController();
     return document.addEventListener(
-      f.OPEN,
+      E.OPEN,
       (o) => {
         o.detail !== t && a(!1);
       },
@@ -42,9 +44,9 @@ const R = ({
         signal: e.signal
       }
     ), document.addEventListener(
-      f.RESET,
+      E.RESET,
       () => {
-        l(void 0), d(void 0), n?.();
+        l(void 0), c(void 0), n?.();
       },
       {
         signal: e.signal
@@ -52,16 +54,16 @@ const R = ({
     ), () => {
       e.abort();
     };
-  }, [t, n]), E(() => {
+  }, [t, n]), f(() => {
     const e = new AbortController(), o = (u) => {
-      i.current?.contains(u.target) || c();
+      i.current?.contains(u.target) || d();
     };
     return document.addEventListener("mousedown", o, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
       () => {
-        document.hidden && c();
+        document.hidden && d();
       },
       {
         signal: e.signal
@@ -69,18 +71,18 @@ const R = ({
     ), () => {
       e.abort();
     };
-  }, [c, i]), {
+  }, [d, i]), {
     id: t,
-    appliedDay: h,
-    isOpen: g,
+    appliedDay: p,
+    isOpen: h,
     selectedDay: r,
     wrapperRef: i,
-    handleApply: D,
-    handleOpen: p,
-    handleSelect: b,
+    handleApply: b,
+    handleOpen: D,
+    handleSelect: L,
     handleReset: O
   };
 };
 export {
-  R as useDateFilterDropdown
+  N as useDateFilterDropdown
 };

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

@@ -1,42 +1,43 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as b } from "../../../Badge/Badge.js";
+import { Badge as g } from "../../../Badge/Badge.js";
 import { Button as i } from "../../../Button/Button.js";
-import { DatePicker as g } from "../../../Datepicker/DatePicker.js";
-import { filterButtonIconVariants as x, filterButtonVariants as w } from "../../Filter.variants.js";
+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 y } from "./DateFilterDropdown.hook.js";
-import { C as k } from "../../../../chevron-down-DgT-uSF9.js";
-const R = ({
+import { useDateFilterDropdown as k } from "./DateFilterDropdown.hook.js";
+import { C as D } from "../../../../chevron-down-BBFYYzZq.js";
+const A = ({
   label: d,
   position: l = "left",
-  onApply: s
+  countryCode: s = "US",
+  onApply: p
 }) => {
   const {
-    id: p,
+    id: m,
     appliedDay: n,
     isOpen: r,
     selectedDay: o,
-    wrapperRef: m,
-    handleApply: c,
-    handleOpen: f,
-    handleSelect: h,
-    handleReset: u
-  } = y({ onApply: s });
-  return /* @__PURE__ */ a("div", { ref: m, className: "relative", children: [
+    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: t(w(), {
+        className: t(y(), {
           "text-slate-700": r
         }),
-        onClick: f,
+        onClick: h,
         children: [
           d,
-          n && /* @__PURE__ */ e(b, { label: n }),
+          n && /* @__PURE__ */ e(g, { label: n }),
           /* @__PURE__ */ e(
-            k,
+            D,
             {
-              className: t(x(), {
+              className: t(w(), {
                 "rotate-180 text-blue-600 dark:text-aurora-500": r
               })
             }
@@ -73,7 +74,7 @@ const R = ({
         ),
         children: [
           /* @__PURE__ */ e(
-            g,
+            x,
             {
               className: "p-0",
               arrowClassName: "-top-1 right-0",
@@ -85,9 +86,9 @@ const R = ({
               ),
               defaultSelected: o,
               defaultMonth: o,
-              onSelect: h
+              onSelect: u
             },
-            o?.toISOString() ?? p
+            o?.toISOString() ?? m
           ),
           /* @__PURE__ */ a(
             "div",
@@ -105,11 +106,11 @@ const R = ({
                   {
                     variant: "secondary",
                     appearance: "compact",
-                    onClick: u,
+                    onClick: b,
                     children: "Reset"
                   }
                 ),
-                /* @__PURE__ */ e(i, { appearance: "compact", onClick: c, children: "Apply" })
+                /* @__PURE__ */ e(i, { appearance: "compact", onClick: f, children: "Apply" })
               ]
             }
           )
@@ -119,5 +120,5 @@ const R = ({
   ] });
 };
 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
+};