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

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -4,7 +4,7 @@ import { cn as n } from "../../utils/index.js";
 import { buttonGroupPillVariants as z, buttonGroupVariants as A, buttonGroupWrapperVariants as E } from "./ButtonGroup.variants.js";
 import { useButtonGroup as H } from "./hooks/useButtonGroup.js";
 import { ButtonGroupLabel as J } from "./components/ButtonGroupLabel/ButtonGroupLabel.js";
-import { m as Q } from "../../proxy-CngVm5qA.js";
+import { m as Q } from "../../proxy-0sbyKj-k.js";
 import { ButtonGroupItem as T } from "./components/ButtonGroupItem/ButtonGroupItem.js";
 import { ButtonGroupMessage as U } from "./components/ButtonGroupMessage/ButtonGroupMessage.js";
 const X = ({

package/dist/components/ButtonGroup/components/ButtonGroupItem/ButtonGroupItem.js

@@ -2,7 +2,7 @@ import { jsx as s, jsxs as a } from "react/jsx-runtime";
 import { memo as L } from "react";
 import { cn as t } from "../../../../utils/index.js";
 import { buttonGroupLabelVariants as u, buttonGroupDescriptionVariants as V, buttonGroupItemContentVariants as g, buttonGroupItemVariants as w } from "./ButtonGroupItem.variants.js";
-import { m as j } from "../../../../proxy-CngVm5qA.js";
+import { m as j } from "../../../../proxy-0sbyKj-k.js";
 const k = (r, n) => n === "none" ? r ? "inset(0 0 0 0)" : "inset(0 100% 0 0)" : r ? "inset(0 0 0 0)" : n === "right" ? "inset(0 0 0 100%)" : "inset(0 100% 0 0)", B = L(
   ({
     animationDirection: r,

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

@@ -7,7 +7,7 @@ import { CalendarDivider as tt } from "../CalendarDivider/CalendarDivider.js";
 import { CalendarMonth as d } from "../CalendarMonth/CalendarMonth.js";
 import { NavigationButton as g } from "../NavigationButton/NavigationButton.js";
 import { useIndependentCarousel as nt } from "../../hooks/useIndependentCarousel.js";
-import { m as et } from "../../../../../../proxy-CngVm5qA.js";
+import { m as et } from "../../../../../../proxy-0sbyKj-k.js";
 const at = ({
   className: b,
   calendarWidth: x = 550,

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, TextMultiSelect } 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, TextMult
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-filter--docs Storybook}
  */
 declare const Filter: FilterComponentProps;
-export { Filter, BadgeMultiSelect, TextMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, };
+export { Filter, BadgeMultiSelect, TextMultiSelect, DateFilterDropdown, DateRangeFilterDropdown, TimeFilterDropdown, };

package/dist/components/Filter/Filter.js

@@ -1,26 +1,29 @@
 import { jsx as i } from "react/jsx-runtime";
 import { cn as m } from "../../utils/index.js";
 import { filterVariants as l } from "./Filter.variants.js";
-import { BadgeMultiSelect as a } from "./components/BadgeDropdown/BadgeMultiSelect.js";
-import { TextMultiSelect as p } from "./components/TextMultiSelect/TextMultiSelect.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 c } from "./components/DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { ResetButton as d } from "./components/ResetButton/ResetButton.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(l({ className: e })), "data-theme": o, children: r });
 t.displayName = "KonstructFilter";
-t.BadgeMultiSelect = a;
-t.TextMultiSelect = p;
+t.BadgeMultiSelect = p;
+t.TextMultiSelect = a;
 t.DateFilterDropdown = n;
-t.DateRangeFilterDropdown = c;
-t.ResetButton = d;
+t.DateRangeFilterDropdown = d;
+t.TimeFilterDropdown = f;
+t.ResetButton = D;
 export {
-  a as BadgeMultiSelect,
+  p as BadgeMultiSelect,
   n as DateFilterDropdown,
-  c as DateRangeFilterDropdown,
+  d as DateRangeFilterDropdown,
   t as Filter,
-  p as TextMultiSelect
+  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, TextMultiSelectProps } from './components';
+import { BadgeMultiSelectProps, DateFilterDropdownProps, DateRangeFilterDropdownProps, ResetButtonProps, TextMultiSelectProps, TimeFilterDropdownProps } from './components';
 /**
  * Configuration for a filter option.
  */
@@ -50,5 +50,6 @@ export type FilterComponentProps = FC<FilterProps> & {
     TextMultiSelect: FC<TextMultiSelectProps>;
     DateFilterDropdown: FC<DateFilterDropdownProps>;
     DateRangeFilterDropdown: FC<DateRangeFilterDropdownProps>;
+    TimeFilterDropdown: FC<TimeFilterDropdownProps>;
     ResetButton: FC<ResetButtonProps>;
 };

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

@@ -8,3 +8,5 @@ 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,12 +1,14 @@
-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 { DateRangeFilterDropdown as x } from "./DateRangeFilterDropdown/DateRangeFilterDropdown.js";
-import { ResetButton as m } from "./ResetButton/ResetButton.js";
-import { TextMultiSelect as i } from "./TextMultiSelect/TextMultiSelect.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 {
-  o as BadgeMultiSelect,
+  t as BadgeMultiSelect,
   p as DateFilterDropdown,
-  x as DateRangeFilterDropdown,
-  m as ResetButton,
-  i as TextMultiSelect
+  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>;

package/dist/components/LineChart/LineChart.js

@@ -0,0 +1,154 @@
+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(
+  _,
+  z,
+  j,
+  x,
+  D,
+  E,
+  F
+);
+const l = [
+  "--color-aurora-500",
+  "--color-rose-500",
+  "--color-violet-500",
+  "--color-emerald-500",
+  "--color-sky-500",
+  "--color-teal-500",
+  "--color-amber-500",
+  "--color-fuchsia-500",
+  "--color-indigo-500",
+  "--color-cyan-500"
+], A = ({
+  title: a,
+  titleProps: h,
+  labels: p,
+  datasets: n,
+  yAxisFormatter: t,
+  showLegend: u,
+  height: C = 300,
+  smooth: b = !0,
+  axisColor: i = "#9F9FA9",
+  gridColor: e = "#45556C",
+  showGrid: g = !0,
+  lineWidth: m = 2,
+  showAxisBorder: c = !1,
+  className: k
+}) => {
+  const f = u !== void 0 ? u : n.length > 1, L = y(
+    () => ({
+      labels: p,
+      datasets: n.map((o, r) => ({
+        label: o.label,
+        data: o.data,
+        borderColor: o.color ?? d(l[r % l.length]),
+        backgroundColor: o.color ?? d(l[r % l.length]),
+        borderDash: o.borderDash,
+        borderWidth: m,
+        pointRadius: 0,
+        pointHoverRadius: 4,
+        tension: b ? 0.3 : 0,
+        fill: !1
+      }))
+    }),
+    [p, n, b, m]
+  ), S = y(
+    () => ({
+      responsive: !0,
+      maintainAspectRatio: !1,
+      onHover: (o, r) => {
+        const v = o.native?.target;
+        v && (v.style.cursor = r.length > 0 ? "pointer" : "default");
+      },
+      interaction: {
+        mode: "index",
+        intersect: !1
+      },
+      plugins: {
+        legend: {
+          display: f,
+          position: "top",
+          align: "end",
+          labels: {
+            color: "#9FAFBC",
+            font: {
+              size: 12,
+              weight: 500
+            },
+            usePointStyle: !0,
+            pointStyle: "line",
+            boxWidth: 24,
+            padding: 16
+          }
+        },
+        tooltip: {
+          enabled: !0,
+          backgroundColor: d("--color-metal-700"),
+          boxPadding: 6,
+          callbacks: {
+            labelTextColor: (o) => o.dataset.borderColor
+          }
+        }
+      },
+      scales: {
+        x: {
+          grid: {
+            color: "transparent"
+          },
+          ticks: {
+            color: i,
+            font: {
+              size: 12
+            }
+          },
+          border: {
+            display: c,
+            color: e
+          }
+        },
+        y: {
+          grid: {
+            color: g ? e : "transparent"
+          },
+          ticks: {
+            color: i,
+            font: {
+              size: 12
+            },
+            callback: t ? (o) => t(o) : void 0
+          },
+          border: {
+            display: c,
+            color: e
+          }
+        }
+      }
+    }),
+    [
+      f,
+      t,
+      i,
+      e,
+      g,
+      c
+    ]
+  );
+  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,
+      {
+        "aria-label": a ?? "Line chart",
+        data: L,
+        options: S
+      }
+    ) })
+  ] });
+};
+export {
+  A as LineChart
+};

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

@@ -0,0 +1,54 @@
+import { TypographyProps } from '../Typography/Typography.types';
+export interface LineChartDataset {
+    /** Dataset label (used in legend) */
+    label: string;
+    /** Array of numeric values */
+    data: number[];
+    /** Line/point color (defaults to palette color) */
+    color?: string;
+    /** Dashed line pattern (e.g. [5, 5]) */
+    borderDash?: number[];
+}
+/**
+ * Props for the LineChart component.
+ *
+ * @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 interface LineChartProps {
+    /** Chart title text */
+    title?: string;
+    /** Props passed to the Typography component used for the title */
+    titleProps?: Partial<Omit<TypographyProps, 'children' | 'ref'>>;
+    /** X-axis labels (e.g. time values) */
+    labels: string[];
+    /** One or more datasets (lines) */
+    datasets: LineChartDataset[];
+    /** Y-axis tick formatter (e.g. value => `${value}%`) */
+    yAxisFormatter?: (value: number) => string;
+    /** Show legend (auto-shown when datasets > 1) */
+    showLegend?: boolean;
+    /** Chart height in px (default: 300) */
+    height?: number;
+    /** Smooth lines (default: true). Set to false for straight/rigid lines */
+    smooth?: boolean;
+    /** Color for axis tick labels (default: '#9F9FA9') */
+    axisColor?: string;
+    /** Color for grid lines (default: '#45556C') */
+    gridColor?: string;
+    /** Show horizontal grid lines (default: true) */
+    showGrid?: boolean;
+    /** Line thickness in px (default: 2) */
+    lineWidth?: number;
+    /** Show axis border lines (default: false) */
+    showAxisBorder?: boolean;
+    /** Additional className for wrapper */
+    className?: string;
+}

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "react-dom";
-import { M as d } from "../../Modal-BGcucTHv.js";
+import { M as d } from "../../Modal-CXRo8f-h.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -2,10 +2,10 @@ import "react/jsx-runtime";
 import "../../../../index-BKjcReYh.js";
 import "react";
 import "../../../../Combination-BtmnusWq.js";
-import { W as s } from "../../../../Modal-BGcucTHv.js";
+import { W as s } from "../../../../Modal-CXRo8f-h.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../proxy-CngVm5qA.js";
+import "../../../../proxy-0sbyKj-k.js";
 import "../../../../x-Eoa9FJjA.js";
 export {
   s as Wrapper