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

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.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/index.d.ts

@@ -0,0 +1,8 @@
+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';

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

@@ -1,8 +1,10 @@
-import { BadgeMultiSelect as o } from "./BadgeDropdown/BadgeMultiSelect.js";
+import { BadgeMultiSelect as t } from "./BadgeDropdown/BadgeMultiSelect.js";
 import { DateFilterDropdown as p } from "./DateFilterDropdown/DateFilterDropdown.js";
-import { ResetButton as l } from "./ResetButton/ResetButton.js";
+import { DateRangeFilterDropdown as f } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as m } from "./ResetButton/ResetButton.js";
 export {
-  o as BadgeMultiSelect,
+  t as BadgeMultiSelect,
   p as DateFilterDropdown,
-  l as ResetButton
+  f as DateRangeFilterDropdown,
+  m as ResetButton
 };

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/utils/index.d.ts

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