@konstructio/ui 0.1.2-alpha.70 → 0.1.2-alpha.72

package/dist/components/DateRangePicker/components/CalendarPanel/components/TogetherModeCalendar/TogetherModeCalendar.js

@@ -6,7 +6,7 @@ import { CalendarDivider as F } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as G } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as m } from "../NavigationButton/NavigationButton.js";
 import { useTogetherCarousel as H } from "../../hooks/useTogetherCarousel.js";
-import { m as R } from "../../../../../../proxy-CngVm5qA.js";
+import { m as R } from "../../../../../../proxy-0sbyKj-k.js";
 const S = ({
   className: s,
   calendarWidth: h = 550,

package/dist/components/DateRangePicker/components/DateTimeInputs/hooks/useDateTimeInputs.d.ts

@@ -6,7 +6,7 @@ type UseDateTimeInputsProps = {
     errorEndBeforeStart: string;
 };
 export declare const useDateTimeInputs: ({ errorInvalidDate, errorDateNotAvailable, errorStartAfterEnd, errorEndBeforeStart, }: UseDateTimeInputsProps) => {
-    timeFormat: "12" | "24";
+    timeFormat: "24" | "12";
     showTime: boolean;
     name: string | undefined;
     disabled: boolean;

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

@@ -1,5 +1,5 @@
 import { FilterComponentProps } from './Filter.types';
-import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown } from './components';
+import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, TextMultiSelect, TimeFilterDropdown } from './components';
 /**
  * A compound component for building filter interfaces.
  * Includes sub-components for badge multi-select, date filtering, and reset actions.
@@ -23,4 +23,4 @@ import { BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown } from '.
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-filter--docs Storybook}
  */
 declare const Filter: FilterComponentProps;
-export { Filter, BadgeMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, };
+export { Filter, BadgeMultiSelect, TextMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, TimeFilterDropdown, };

package/dist/components/Filter/Filter.js

@@ -1,23 +1,29 @@
 import { jsx as i } from "react/jsx-runtime";
 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 { DateRangeFilterDropdown as n } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { ResetButton as d } from "./components/ResetButton/ResetButton.js";
+import { filterVariants as l } from "./Filter.variants.js";
+import { BadgeMultiSelect as p } from "./components/BadgeDropdown/BadgeMultiSelect.js";
+import { TextMultiSelect as a } from "./components/TextMultiSelect/TextMultiSelect.js";
+import { DateFilterDropdown as n } from "./components/DateFilterDropdown/DateFilterDropdown.js";
+import { DateRangeFilterDropdown as d } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { TimeFilterDropdown as f } from "./components/TimeFilterDropdown/TimeFilterDropdown.js";
+import { ResetButton as D } from "./components/ResetButton/ResetButton.js";
 const t = ({
   className: e,
   theme: o = "civo",
   children: r
-}) => /* @__PURE__ */ i("div", { className: m(a({ className: e })), "data-theme": o, children: r });
+}) => /* @__PURE__ */ i("div", { className: m(l({ className: e })), "data-theme": o, children: r });
 t.displayName = "KonstructFilter";
-t.BadgeMultiSelect = l;
-t.DateFilterDropdown = p;
-t.DateRangeFilterDropdown = n;
-t.ResetButton = d;
+t.BadgeMultiSelect = p;
+t.TextMultiSelect = a;
+t.DateFilterDropdown = n;
+t.DateRangeFilterDropdown = d;
+t.TimeFilterDropdown = f;
+t.ResetButton = D;
 export {
-  l as BadgeMultiSelect,
-  p as DateFilterDropdown,
-  n as DateRangeFilterDropdown,
-  t as Filter
+  p as BadgeMultiSelect,
+  n as DateFilterDropdown,
+  d as DateRangeFilterDropdown,
+  t as Filter,
+  a as TextMultiSelect,
+  f as TimeFilterDropdown
 };

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

@@ -3,7 +3,7 @@ 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';
+import { BadgeMultiSelectProps, DateFilterDropdownProps, DateRangeFilterDropdownProps, ResetButtonProps, TextMultiSelectProps, TimeFilterDropdownProps } from './components';
 /**
  * Configuration for a filter option.
  */
@@ -47,7 +47,9 @@ export type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildre
  */
 export type FilterComponentProps = FC<FilterProps> & {
     BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+    TextMultiSelect: FC<TextMultiSelectProps>;
     DateFilterDropdown: FC<DateFilterDropdownProps>;
     DateRangeFilterDropdown: FC<DateRangeFilterDropdownProps>;
+    TimeFilterDropdown: FC<TimeFilterDropdownProps>;
     ResetButton: FC<ResetButtonProps>;
 };

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

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

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

@@ -0,0 +1,14 @@
+import { TimeFilterDropdownProps, TimePreset } from './TimeFilterDropdown.types';
+export declare const useTimeFilterDropdown: ({ onApply, format, }: Pick<TimeFilterDropdownProps, "onApply" | "format">) => {
+    id: string;
+    appliedLabel: string | undefined;
+    isOpen: boolean;
+    selectedTime: Date | undefined;
+    selectedPresetLabel: string | undefined;
+    wrapperRef: import('react').RefObject<HTMLDivElement | null>;
+    handleApply: () => void;
+    handleOpen: () => void;
+    handleSelectPreset: (preset: TimePreset) => void;
+    handleSelectCustom: (time: Date) => void;
+    handleReset: () => void;
+};

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

@@ -0,0 +1,74 @@
+import { useRef as R, useId as k, useState as o, useCallback as n, useEffect as g } from "react";
+import { getFormattedTime as I } from "../../../TimePicker/utils/index.js";
+import { sendOpenFilterEvent as x, FilterEvent as p } from "../../events/index.js";
+const q = ({
+  onApply: t,
+  format: h = "24"
+}) => {
+  const r = R(null), s = k(), [L, a] = o(!1), [i, l] = o(), [b, c] = o(), [u, d] = o(), [T, m] = o(), C = T ?? (b ? I(b, h) : void 0), O = n(
+    () => a((e) => (e || x(s), !e)),
+    [s]
+  ), P = n((e) => {
+    l(e.value), d(e.label);
+  }, []), S = n((e) => {
+    l(e), d(void 0);
+  }, []), w = n(() => {
+    c(i), m(u), t?.(i);
+  }, [t, i, u]), v = n(() => a(!1), []), F = n(() => {
+    l(void 0), c(void 0), d(void 0), m(void 0), t?.();
+  }, [t]);
+  return g(() => {
+    const e = new AbortController();
+    return document.addEventListener(
+      p.OPEN,
+      (f) => {
+        f.detail !== s && a(!1);
+      },
+      {
+        signal: e.signal
+      }
+    ), document.addEventListener(
+      p.RESET,
+      () => {
+        l(void 0), c(void 0), d(void 0), m(void 0), t?.();
+      },
+      {
+        signal: e.signal
+      }
+    ), () => {
+      e.abort();
+    };
+  }, [s, t]), g(() => {
+    const e = new AbortController(), f = (E) => {
+      r.current?.contains(E.target) || v();
+    };
+    return document.addEventListener("mousedown", f, {
+      signal: e.signal
+    }), document.addEventListener(
+      "visibilitychange",
+      () => {
+        document.hidden && v();
+      },
+      {
+        signal: e.signal
+      }
+    ), () => {
+      e.abort();
+    };
+  }, [v, r]), {
+    id: s,
+    appliedLabel: C,
+    isOpen: L,
+    selectedTime: i,
+    selectedPresetLabel: u,
+    wrapperRef: r,
+    handleApply: w,
+    handleOpen: O,
+    handleSelectPreset: P,
+    handleSelectCustom: S,
+    handleReset: F
+  };
+};
+export {
+  q as useTimeFilterDropdown
+};

package/dist/components/Filter/components/TimeFilterDropdown/TimeFilterDropdown.js

@@ -0,0 +1,155 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { Badge as N } from "../../../Badge/Badge.js";
+import { Button as p } from "../../../Button/Button.js";
+import { filterButtonIconVariants as w, filterButtonVariants as C } from "../../Filter.variants.js";
+import { TimePicker as B } from "../../../TimePicker/TimePicker.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useTimeFilterDropdown as j } from "./TimeFilterDropdown.hook.js";
+import { C as D } from "../../../../chevron-down-BBFYYzZq.js";
+const V = ({
+  label: b,
+  position: o = "left",
+  format: r = "24",
+  presets: n,
+  showTimePicker: d = !0,
+  onApply: h
+}) => {
+  const {
+    appliedLabel: c,
+    isOpen: i,
+    selectedTime: x,
+    selectedPresetLabel: m,
+    wrapperRef: g,
+    handleApply: f,
+    handleOpen: u,
+    handleSelectPreset: y,
+    handleSelectCustom: k,
+    handleReset: v
+  } = j({ onApply: h, format: r }), s = n && n.length > 0;
+  return /* @__PURE__ */ l("div", { ref: g, className: "relative", children: [
+    /* @__PURE__ */ l(
+      "button",
+      {
+        className: a(C(), {
+          "text-slate-700 dark:text-metal-100": i
+        }),
+        onClick: u,
+        children: [
+          b,
+          c && /* @__PURE__ */ e(N, { label: c }),
+          /* @__PURE__ */ e(
+            D,
+            {
+              className: a(w(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": i
+              })
+            }
+          )
+        ]
+      }
+    ),
+    i && /* @__PURE__ */ l(
+      "div",
+      {
+        className: a(
+          "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",
+          "dark:bg-metal-800",
+          "dark:border-metal-700",
+          {
+            "left-0": o === "left",
+            "right-0": o === "right"
+          }
+        ),
+        children: [
+          /* @__PURE__ */ l("div", { className: "flex", children: [
+            s && /* @__PURE__ */ e("div", { className: "flex flex-col gap-1 py-4 px-4 min-w-40", children: n.map((t) => /* @__PURE__ */ e(
+              "button",
+              {
+                type: "button",
+                className: a(
+                  "text-left",
+                  "px-3",
+                  "py-1.5",
+                  "rounded",
+                  "cursor-pointer",
+                  "text-sm",
+                  "whitespace-nowrap",
+                  "transition-colors",
+                  "hover:bg-gray-100",
+                  "dark:hover:bg-metal-700",
+                  {
+                    "bg-blue-50 text-blue-600 dark:bg-metal-700 dark:text-aurora-500": m === t.label,
+                    "text-gray-700 dark:text-gray-300": m !== t.label
+                  }
+                ),
+                onClick: () => y(t),
+                children: t.label
+              },
+              t.label
+            )) }),
+            s && d && /* @__PURE__ */ e("div", { className: "w-px bg-gray-200 dark:bg-metal-700" }),
+            d && /* @__PURE__ */ e("div", { className: "py-4 px-6", children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: a({
+                  "w-35.5": r === "24",
+                  "w-52": r === "12"
+                }),
+                children: /* @__PURE__ */ e(
+                  B,
+                  {
+                    format: r,
+                    time: x,
+                    onChange: k,
+                    mode: "input"
+                  }
+                )
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "h-px bg-gray-200 dark:bg-metal-700" }),
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: a(
+                "flex",
+                "justify-end",
+                "items-center",
+                "gap-4",
+                "px-6",
+                "py-3"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  p,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: v,
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ e(p, { appearance: "compact", onClick: f, children: "Apply" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  V as TimeFilterDropdown
+};

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

@@ -0,0 +1,13 @@
+export type TimePreset = {
+    label: string;
+    value: Date;
+};
+export type TimeFilterDropdownProps = {
+    label: string;
+    position?: 'left' | 'right';
+    format?: '12' | '24';
+    presets?: TimePreset[];
+    /** Whether to show the TimePicker for custom time selection (default: true) */
+    showTimePicker?: boolean;
+    onApply?: (time?: Date) => void;
+};

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

@@ -6,3 +6,7 @@ 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';
+export * from './TimeFilterDropdown/TimeFilterDropdown';
+export * from './TimeFilterDropdown/TimeFilterDropdown.types';

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

@@ -1,10 +1,14 @@
 import { BadgeMultiSelect as t } from "./BadgeDropdown/BadgeMultiSelect.js";
 import { DateFilterDropdown as p } from "./DateFilterDropdown/DateFilterDropdown.js";
-import { DateRangeFilterDropdown as f } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { ResetButton as m } from "./ResetButton/ResetButton.js";
+import { DateRangeFilterDropdown as m } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
+import { ResetButton as f } from "./ResetButton/ResetButton.js";
+import { TextMultiSelect as n } from "./TextMultiSelect/TextMultiSelect.js";
+import { TimeFilterDropdown as a } from "./TimeFilterDropdown/TimeFilterDropdown.js";
 export {
   t as BadgeMultiSelect,
   p as DateFilterDropdown,
-  f as DateRangeFilterDropdown,
-  m as ResetButton
+  m as DateRangeFilterDropdown,
+  f as ResetButton,
+  n as TextMultiSelect,
+  a as TimeFilterDropdown
 };

package/dist/components/LineChart/LineChart.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { LineChartProps } from './LineChart.types';
+/**
+ * A line chart component for time-series data visualization.
+ * Built on Chart.js with support for single and multi-line datasets.
+ *
+ * @example
+ * ```tsx
+ * <LineChart
+ *   title="Disk Usage %"
+ *   labels={['11:20', '11:25', '11:30']}
+ *   datasets={[{ label: 'Usage', data: [6, 3, 8, 5] }]}
+ *   yAxisFormatter={(v) => `${v}%`}
+ * />
+ * ```
+ */
+export declare const LineChart: FC<LineChartProps>;