@konstructio/ui 0.1.2-alpha.74 → 0.1.2-alpha.76

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

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

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

@@ -4,4 +4,6 @@ export type TextMultiSelectProps = {
     options: Option[];
     position?: 'left' | 'right';
     onApply?: (selectedOptions: Option[]) => void;
+    showSelectAll?: boolean;
+    selectAllLabel?: string;
 };

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

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

package/dist/components/Filter/contexts/filter.context.d.ts

@@ -0,0 +1,4 @@
+export type FilterContextType = {
+    closeOnApply: boolean;
+};
+export declare const FilterContext: import('react').Context<FilterContextType>;

package/dist/components/Filter/contexts/filter.context.js

@@ -0,0 +1,7 @@
+import { createContext as t } from "react";
+const o = t({
+  closeOnApply: !0
+});
+export {
+  o as FilterContext
+};

package/dist/components/Filter/contexts/filter.hook.d.ts

@@ -0,0 +1,2 @@
+import { FilterContextType } from './filter.context';
+export declare const useFilterContext: () => FilterContextType;

package/dist/components/Filter/contexts/filter.hook.js

@@ -0,0 +1,11 @@
+import { useContext as e } from "react";
+import { FilterContext as r } from "./filter.context.js";
+const n = () => {
+  const t = e(r);
+  if (!t)
+    throw new Error("useFilterContext must be used within a FilterProvider");
+  return t;
+};
+export {
+  n as useFilterContext
+};

package/dist/components/Filter/contexts/filter.provider.d.ts

@@ -0,0 +1,5 @@
+import { FC, PropsWithChildren } from 'react';
+import { FilterContextType } from './filter.context';
+type Props = PropsWithChildren<FilterContextType>;
+export declare const FilterProvider: FC<Props>;
+export {};

package/dist/components/Filter/contexts/filter.provider.js

@@ -0,0 +1,6 @@
+import { jsx as t } from "react/jsx-runtime";
+import { FilterContext as e } from "./filter.context.js";
+const l = ({ children: r, closeOnApply: o }) => /* @__PURE__ */ t(e.Provider, { value: { closeOnApply: o }, children: r });
+export {
+  l as FilterProvider
+};

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

@@ -0,0 +1,3 @@
+export * from './filter.context';
+export * from './filter.hook';
+export * from './filter.provider';

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

@@ -0,0 +1,8 @@
+import { FilterContext as t } from "./filter.context.js";
+import { useFilterContext as x } from "./filter.hook.js";
+import { FilterProvider as f } from "./filter.provider.js";
+export {
+  t as FilterContext,
+  f as FilterProvider,
+  x as useFilterContext
+};

package/dist/components/ImageUpload/ImageUpload.d.ts

@@ -1,4 +1,4 @@
-import { ImageUploadProps } from './ImageUpload.types';
+import { Props } from './ImageUpload.types';
 /**
  * A file input component for uploading images with preview and validation.
  * Supports drag states, file type validation, size limits, and upload progress.
@@ -19,7 +19,7 @@ import { ImageUploadProps } from './ImageUpload.types';
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-imageupload--docs Storybook}
  */
 declare const ImageUpload: {
-    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, error, fileName, fileSize, fileUrl, helperText, isRequired, label, labelClassName, labelWrapperClassName, name, onChange, onRemove, status, theme, uploadButtonText, accept, maxSize, }: Props): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { ImageUpload };

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

@@ -29,7 +29,7 @@ export type ImageUploadStatusType = ImageUploadStatus;
  * />
  * ```
  */
-export interface ImageUploadProps extends Omit<VariantProps<typeof imageUploadVariants>, 'status'> {
+export interface Props extends Omit<VariantProps<typeof imageUploadVariants>, 'status'> {
     /** Additional CSS classes */
     className?: string;
     /** Error message to display */
@@ -67,3 +67,5 @@ export interface ImageUploadProps extends Omit<VariantProps<typeof imageUploadVa
     /** Maximum file size in bytes */
     maxSize?: number;
 }
+/** @deprecated Use Props instead */
+export type ImageUploadProps = Props;

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import { InputProps } from './Input.types';
+import { Props } from './Input.types';
 /**
  * A text input component with label, error handling, and helper text support.
  * Includes built-in password visibility toggle and search icon variant.
@@ -31,5 +31,5 @@ import { InputProps } from './Input.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-input--docs Storybook}
  */
-declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+declare const Input: import('react').ForwardRefExoticComponent<Props & import('react').RefAttributes<HTMLInputElement>>;
 export { Input };

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

@@ -12,7 +12,7 @@ import { inputVariants } from './Input.variants';
  * <Input error="Invalid email" helperText="We'll never share your email" />
  * ```
  */
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
+export interface Props extends InputHTMLAttributes<HTMLInputElement>, VariantProps<typeof inputVariants> {
     /** Error message to display below the input */
     error?: string;
     /** Helper text displayed below the input when no error */
@@ -34,3 +34,5 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, Varia
     /** Theme override for this component */
     theme?: Theme;
 }
+/** @deprecated Use Props instead */
+export type InputProps = Props;

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

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LineChartProps } from './LineChart.types';
+import { Props } from './LineChart.types';
 /**
  * A line chart component for time-series data visualization.
  * Built on Chart.js with support for single and multi-line datasets.
@@ -14,4 +14,4 @@ import { LineChartProps } from './LineChart.types';
  * />
  * ```
  */
-export declare const LineChart: FC<LineChartProps>;
+export declare const LineChart: FC<Props>;

package/dist/components/LineChart/LineChart.js

@@ -1,18 +1,18 @@
-import { jsxs as R, jsx as s } from "react/jsx-runtime";
-import { C as P, a as _, i as z, p as j, L as x, b as D, P as E, c as F, d as H } from "../../index-qDQP8rW4.js";
-import { useMemo as y } from "react";
-import { Typography as N } from "../Typography/Typography.js";
-import { resolveColor as d, cn as O } from "../../utils/index.js";
-P.register(
-  _,
+import { jsxs as P, jsx as p } from "react/jsx-runtime";
+import { C as _, a as z, i as j, p as D, L as E, b as F, P as H, c as N, d as O } from "../../index-qDQP8rW4.js";
+import { useMemo as h } from "react";
+import { Typography as M } from "../Typography/Typography.js";
+import { resolveColor as r, cn as V } from "../../utils/index.js";
+_.register(
   z,
   j,
-  x,
   D,
   E,
-  F
+  F,
+  H,
+  N
 );
-const l = [
+const a = [
   "--color-aurora-500",
   "--color-rose-500",
   "--color-violet-500",
@@ -23,46 +23,47 @@ const l = [
   "--color-fuchsia-500",
   "--color-indigo-500",
   "--color-cyan-500"
-], A = ({
-  title: a,
-  titleProps: h,
-  labels: p,
-  datasets: n,
-  yAxisFormatter: t,
+], J = ({
+  title: n,
+  titleProps: C,
+  labels: b,
+  datasets: t,
+  yAxisFormatter: i,
   showLegend: u,
-  height: C = 300,
-  smooth: b = !0,
-  axisColor: i = "#9F9FA9",
+  height: k = 300,
+  smooth: m = !0,
+  axisColor: c = "#9F9FA9",
   gridColor: e = "#45556C",
   showGrid: g = !0,
-  lineWidth: m = 2,
-  showAxisBorder: c = !1,
-  className: k
+  lineWidth: f = 2,
+  showAxisBorder: s = !1,
+  tooltipTextColor: d = r("--color-metal-100"),
+  className: L
 }) => {
-  const f = u !== void 0 ? u : n.length > 1, L = y(
+  const y = u !== void 0 ? u : t.length > 1, S = h(
     () => ({
-      labels: p,
-      datasets: n.map((o, r) => ({
+      labels: b,
+      datasets: t.map((o, l) => ({
         label: o.label,
         data: o.data,
-        borderColor: o.color ?? d(l[r % l.length]),
-        backgroundColor: o.color ?? d(l[r % l.length]),
+        borderColor: o.color ?? r(a[l % a.length]),
+        backgroundColor: o.color ?? r(a[l % a.length]),
         borderDash: o.borderDash,
-        borderWidth: m,
+        borderWidth: f,
         pointRadius: 0,
         pointHoverRadius: 4,
-        tension: b ? 0.3 : 0,
+        tension: m ? 0.3 : 0,
         fill: !1
       }))
     }),
-    [p, n, b, m]
-  ), S = y(
+    [b, t, m, f]
+  ), R = h(
     () => ({
       responsive: !0,
       maintainAspectRatio: !1,
-      onHover: (o, r) => {
+      onHover: (o, l) => {
         const v = o.native?.target;
-        v && (v.style.cursor = r.length > 0 ? "pointer" : "default");
+        v && (v.style.cursor = l.length > 0 ? "pointer" : "default");
       },
       interaction: {
         mode: "index",
@@ -70,7 +71,7 @@ const l = [
       },
       plugins: {
         legend: {
-          display: f,
+          display: y,
           position: "top",
           align: "end",
           labels: {
@@ -87,10 +88,12 @@ const l = [
         },
         tooltip: {
           enabled: !0,
-          backgroundColor: d("--color-metal-700"),
+          backgroundColor: r("--color-metal-700"),
+          titleColor: d,
+          bodyColor: d,
           boxPadding: 6,
           callbacks: {
-            labelTextColor: (o) => o.dataset.borderColor
+            labelTextColor: () => d
           }
         }
       },
@@ -100,13 +103,13 @@ const l = [
             color: "transparent"
           },
           ticks: {
-            color: i,
+            color: c,
             font: {
               size: 12
             }
           },
           border: {
-            display: c,
+            display: s,
             color: e
           }
         },
@@ -115,40 +118,40 @@ const l = [
             color: g ? e : "transparent"
           },
           ticks: {
-            color: i,
+            color: c,
             font: {
               size: 12
             },
-            callback: t ? (o) => t(o) : void 0
+            callback: i ? (o) => i(o) : void 0
           },
           border: {
-            display: c,
+            display: s,
             color: e
           }
         }
       }
     }),
     [
-      f,
-      t,
+      y,
       i,
+      c,
       e,
       g,
-      c
+      s
     ]
   );
-  return /* @__PURE__ */ R("div", { className: O("w-full", k), children: [
-    a && /* @__PURE__ */ s(N, { variant: "subtitle2", className: "mb-6", ...h, children: a }),
-    /* @__PURE__ */ s("div", { style: { height: C }, children: /* @__PURE__ */ s(
-      H,
+  return /* @__PURE__ */ P("div", { className: V("w-full", L), children: [
+    n && /* @__PURE__ */ p(M, { variant: "subtitle2", className: "mb-6", ...C, children: n }),
+    /* @__PURE__ */ p("div", { style: { height: k }, children: /* @__PURE__ */ p(
+      O,
       {
-        "aria-label": a ?? "Line chart",
-        data: L,
-        options: S
+        "aria-label": n ?? "Line chart",
+        data: S,
+        options: R
       }
     ) })
   ] });
 };
 export {
-  A as LineChart
+  J as LineChart
 };

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

@@ -1,4 +1,4 @@
-import { TypographyProps } from '../Typography/Typography.types';
+import { Props as TypographyProps } from '../Typography/Typography.types';
 export interface LineChartDataset {
     /** Dataset label (used in legend) */
     label: string;
@@ -22,7 +22,7 @@ export interface LineChartDataset {
  * />
  * ```
  */
-export interface LineChartProps {
+export interface Props {
     /** Chart title text */
     title?: string;
     /** Props passed to the Typography component used for the title */
@@ -49,6 +49,10 @@ export interface LineChartProps {
     lineWidth?: number;
     /** Show axis border lines (default: false) */
     showAxisBorder?: boolean;
+    /** Tooltip text color (default: metal-100) */
+    tooltipTextColor?: string;
     /** Additional className for wrapper */
     className?: string;
 }
+/** @deprecated Use Props instead */
+export type LineChartProps = Props;

package/dist/components/Loading/Loading.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LoadingProps } from './Loading.types';
+import { Props } from './Loading.types';
 /**
  * A spinning loading indicator.
  *
@@ -20,5 +20,5 @@ import { LoadingProps } from './Loading.types';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-loading--docs Storybook}
  */
-declare const Loading: FC<LoadingProps>;
+declare const Loading: FC<Props>;
 export { Loading };

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

@@ -11,7 +11,9 @@ import { loadingVariants } from './Loading.variants';
  * <Loading className="w-8 h-8" />
  * ```
  */
-export type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
+export type Props = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
     /** Theme override for this component */
     theme?: Theme;
 };
+/** @deprecated Use Props instead */
+export type LoadingProps = Props;