@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.80

package/dist/components/Stepper/components/StepItem/StepItem.types.d.ts

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../../../domain/theme';
+import { Step, StepperClassNames, StepperIcons, StepSize, StepStatus, StepVariant } from '../../Stepper.types';
+import { stepIndicatorVariants } from '../../Stepper.variants';
+export type Props = VariantProps<typeof stepIndicatorVariants> & {
+    /** Custom class names */
+    classNames?: StepperClassNames;
+    /** Whether the step is clickable */
+    clickable: boolean;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Step index (0-based) */
+    index: number;
+    /** Whether this is the last step */
+    isLast: boolean;
+    /** Status of the next step (for connector coloring) */
+    nextStepStatus?: StepStatus;
+    /** Orientation of the stepper */
+    orientation: 'vertical' | 'horizontal';
+    /** Show connector lines */
+    showConnector: boolean;
+    /** Size of the step indicator */
+    size: StepSize;
+    /** Step data */
+    step: Step;
+    /** Theme override */
+    theme?: Theme;
+    /** Layout variant */
+    variant: StepVariant;
+    /** Callback when step is clicked */
+    onClick?: () => void;
+};

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.d.ts

@@ -0,0 +1,2 @@
+import { Props } from './VerticalStepItem.types';
+export declare const VerticalStepItem: import('react').NamedExoticComponent<Props>;

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.js

@@ -0,0 +1,72 @@
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { t as x } from "../../../../StepIndicatorContent-D5z1Ziqg.js";
+import { useStepItemLogic as V } from "../../hooks/useStepItemLogic.js";
+import { stepContentVariants as I, stepDescriptionVariants as S, stepIndicatorVariants as k, stepLabelVariants as D, stepVariants as L } from "../../Stepper.variants.js";
+import { getStepAriaLabel as g } from "../../utils/index.js";
+import { StepConnector as j } from "../StepConnector/StepConnector.js";
+import { memo as w } from "react";
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+var y = ({ classNames: e, clickable: m, icons: p, index: d, isLast: s, showConnector: b, size: o, step: r, variant: i, onClick: f }) => {
+  const { isClickable: l, isDisabled: h, LabelComponent: C, status: t, handleClick: u, handleKeyDown: v } = V({
+    clickable: m,
+    step: r,
+    onClick: f
+  });
+  return /* @__PURE__ */ c("div", {
+    className: i === "stacked" ? "flex flex-col items-center" : "flex flex-col",
+    children: [/* @__PURE__ */ c("div", {
+      className: a(L({
+        orientation: "vertical",
+        variant: i,
+        clickable: l
+      }), e?.stepWrapper),
+      role: l ? "button" : void 0,
+      tabIndex: l ? 0 : void 0,
+      onClick: u,
+      onKeyDown: v,
+      "aria-current": t === "active" ? "step" : void 0,
+      ...h && { "aria-disabled": !0 },
+      "aria-label": g(d, r.label, t),
+      children: [/* @__PURE__ */ n("div", {
+        className: a(k({
+          status: t,
+          size: o
+        }), e?.indicator),
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ n(x, {
+          status: t,
+          index: d,
+          size: o,
+          icons: p,
+          className: e?.indicatorContent
+        })
+      }), /* @__PURE__ */ c("div", {
+        className: a(I({ variant: i }), e?.content),
+        children: [r.label && /* @__PURE__ */ n(C, {
+          className: a(D({
+            status: t,
+            size: o,
+            variant: i
+          }), e?.label),
+          children: r.label
+        }), r.description && /* @__PURE__ */ n("span", {
+          className: a(S({
+            status: t,
+            size: o,
+            variant: i
+          }), e?.description),
+          children: r.description
+        })]
+      })]
+    }), !s && b && /* @__PURE__ */ n(j, {
+      orientation: "vertical",
+      status: t,
+      size: o,
+      variant: i,
+      className: e?.connector
+    })]
+  });
+}, G = w(y);
+export {
+  G as VerticalStepItem
+};

package/dist/components/Stepper/components/VerticalStepItem/VerticalStepItem.types.d.ts

@@ -0,0 +1 @@
+export type { Props } from '../StepItem/StepItem.types';

package/dist/components/Stepper/constants/index.d.ts

@@ -0,0 +1,3 @@
+import { StepSize } from '../Stepper.types';
+export declare const ICON_SIZE_MAP: Record<StepSize, number>;
+export declare const CHECK_ICON_SIZE_MAP: Record<StepSize, string>;

package/dist/components/Stepper/constants/index.js

@@ -0,0 +1,13 @@
+var _ = {
+  sm: 12,
+  md: 16,
+  lg: 24
+}, m = {
+  sm: "h-3 w-3",
+  md: "h-4 w-4",
+  lg: "h-6 w-6"
+};
+export {
+  m as CHECK_ICON_SIZE_MAP,
+  _ as ICON_SIZE_MAP
+};

package/dist/components/Stepper/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useStepItemLogic } from './useStepItemLogic';

package/dist/components/Stepper/hooks/index.js

@@ -0,0 +1,4 @@
+import { useStepItemLogic as o } from "./useStepItemLogic.js";
+export {
+  o as useStepItemLogic
+};

package/dist/components/Stepper/hooks/useStepItemLogic.d.ts

@@ -0,0 +1,2 @@
+import { UseStepItemLogicProps, UseStepItemLogicReturn } from './useStepItemLogic.types';
+export declare function useStepItemLogic({ clickable, onClick, step, }: UseStepItemLogicProps): UseStepItemLogicReturn;

package/dist/components/Stepper/hooks/useStepItemLogic.js

@@ -0,0 +1,24 @@
+import { t as u } from "../../../dist-DXJSck4j.js";
+import { useCallback as s } from "react";
+function d({ clickable: c, onClick: e, step: n }) {
+  const i = n.status ?? "pending", l = n.disabled || i === "active", r = !!(n.onClick || e), t = c && !l && r, f = typeof n.label == "string" ? "span" : u, o = s(() => {
+    t && (n.onClick ? n.onClick() : e && e());
+  }, [
+    t,
+    n.onClick,
+    e
+  ]);
+  return {
+    isClickable: t,
+    isDisabled: l,
+    LabelComponent: f,
+    status: i,
+    handleClick: o,
+    handleKeyDown: s((a) => {
+      t && (a.key === "Enter" || a.key === " ") && (a.preventDefault(), o());
+    }, [t, o])
+  };
+}
+export {
+  d as useStepItemLogic
+};

package/dist/components/Stepper/hooks/useStepItemLogic.types.d.ts

@@ -0,0 +1,16 @@
+import { Slot } from '@radix-ui/react-slot';
+import { KeyboardEvent } from 'react';
+import { Step, StepStatus } from '../Stepper.types';
+export type UseStepItemLogicProps = {
+    clickable: boolean;
+    step: Step;
+    onClick?: () => void;
+};
+export type UseStepItemLogicReturn = {
+    isClickable: boolean;
+    isDisabled: boolean;
+    LabelComponent: typeof Slot | 'span';
+    status: StepStatus;
+    handleClick: () => void;
+    handleKeyDown: (e: KeyboardEvent<HTMLDivElement>) => void;
+};

package/dist/components/Stepper/utils/index.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react';
+import { StepStatus } from '../Stepper.types';
+export declare function getStepAriaLabel(index: number, label: ReactNode, status: StepStatus): string;

package/dist/components/Stepper/utils/index.js

@@ -0,0 +1,12 @@
+var n = {
+  completed: ", completed",
+  active: ", current",
+  error: ", error",
+  pending: ""
+};
+function o(r, e, t) {
+  return `${`Step ${r + 1}`}${typeof e == "string" ? `: ${e}` : ""}${n[t]}`;
+}
+export {
+  o as getStepAriaLabel
+};

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { Props } from './Switch.types';
+/**
+ * A toggle switch component built on Radix UI primitives.
+ * Supports horizontal and vertical layouts with label and helper text.
+ *
+ * @example
+ * ```tsx
+ * // Basic switch
+ * <Switch label="Enable feature" />
+ *
+ * // Controlled switch
+ * <Switch
+ *   label="Dark mode"
+ *   value={isDarkMode}
+ *   onChange={(enabled) => setIsDarkMode(enabled)}
+ * />
+ *
+ * // Vertical layout with helper text
+ * <Switch
+ *   label="Notifications"
+ *   helperText="Receive email notifications"
+ *   alignment="vertical"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-switch--docs Storybook}
+ */
+export declare const Switch: FC<Props>;

package/dist/components/Switch/Switch.js

@@ -1,201 +1,4 @@
-import { jsxs as C, jsx as i } from "react/jsx-runtime";
-import * as h from "react";
-import { forwardRef as H, useRef as M, useId as $, useImperativeHandle as j, useEffect as z } from "react";
-import { a as A, c as U, b as q } from "../../index-BfXxHr_2.js";
-import { u as N } from "../../index-DQH6odE9.js";
-import { u as F } from "../../index-BZPx6jYI.js";
-import { u as L } from "../../index-BAEWsOG1.js";
-import { P } from "../../index-BVRIAMfe.js";
-import { cn as R } from "../../utils/index.js";
-import { thumbVariants as O, switchVariants as V } from "./Switch.variants.js";
-var b = "Switch", [D, ce] = U(b), [W, X] = D(b), y = h.forwardRef(
-  (e, l) => {
-    const {
-      __scopeSwitch: t,
-      name: s,
-      checked: o,
-      defaultChecked: d,
-      required: u,
-      disabled: r,
-      value: c = "on",
-      onCheckedChange: m,
-      form: n,
-      ...a
-    } = e, [p, f] = h.useState(null), w = N(l, (v) => f(v)), x = h.useRef(!1), k = p ? n || !!p.closest("form") : !0, [S, B] = A({
-      prop: o,
-      defaultProp: d ?? !1,
-      onChange: m,
-      caller: b
-    });
-    return /* @__PURE__ */ C(W, { scope: t, checked: S, disabled: r, children: [
-      /* @__PURE__ */ i(
-        P.button,
-        {
-          type: "button",
-          role: "switch",
-          "aria-checked": S,
-          "aria-required": u,
-          "data-state": I(S),
-          "data-disabled": r ? "" : void 0,
-          disabled: r,
-          value: c,
-          ...a,
-          ref: w,
-          onClick: q(e.onClick, (v) => {
-            B((T) => !T), k && (x.current = v.isPropagationStopped(), x.current || v.stopPropagation());
-          })
-        }
-      ),
-      k && /* @__PURE__ */ i(
-        _,
-        {
-          control: p,
-          bubbles: !x.current,
-          name: s,
-          value: c,
-          checked: S,
-          required: u,
-          disabled: r,
-          form: n,
-          style: { transform: "translateX(-100%)" }
-        }
-      )
-    ] });
-  }
-);
-y.displayName = b;
-var g = "SwitchThumb", E = h.forwardRef(
-  (e, l) => {
-    const { __scopeSwitch: t, ...s } = e, o = X(g, t);
-    return /* @__PURE__ */ i(
-      P.span,
-      {
-        "data-state": I(o.checked),
-        "data-disabled": o.disabled ? "" : void 0,
-        ...s,
-        ref: l
-      }
-    );
-  }
-);
-E.displayName = g;
-var G = "SwitchBubbleInput", _ = h.forwardRef(
-  ({
-    __scopeSwitch: e,
-    control: l,
-    checked: t,
-    bubbles: s = !0,
-    ...o
-  }, d) => {
-    const u = h.useRef(null), r = N(u, d), c = F(t), m = L(l);
-    return h.useEffect(() => {
-      const n = u.current;
-      if (!n) return;
-      const a = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(
-        a,
-        "checked"
-      ).set;
-      if (c !== t && f) {
-        const w = new Event("click", { bubbles: s });
-        f.call(n, t), n.dispatchEvent(w);
-      }
-    }, [c, t, s]), /* @__PURE__ */ i(
-      "input",
-      {
-        type: "checkbox",
-        "aria-hidden": !0,
-        defaultChecked: t,
-        ...o,
-        tabIndex: -1,
-        ref: r,
-        style: {
-          ...o.style,
-          ...m,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0
-        }
-      }
-    );
-  }
-);
-_.displayName = G;
-function I(e) {
-  return e ? "checked" : "unchecked";
-}
-var J = y, K = E;
-const ne = H(
-  ({
-    name: e,
-    alignment: l = "horizontal",
-    theme: t,
-    thumbClassName: s,
-    className: o,
-    label: d,
-    defaultChecked: u,
-    value: r,
-    helperText: c,
-    onChange: m
-  }, n) => {
-    const a = M(null), p = $(), f = e ? `${p}-${e}` : p;
-    return j(n, () => a.current, [a]), z(() => {
-      a.current && (a.current.value = `${r}`);
-    }, [r]), /* @__PURE__ */ C(
-      "div",
-      {
-        className: R(
-          "w-full flex gap-3",
-          l === "vertical" ? "flex-col" : "flex-row"
-        ),
-        "data-theme": t,
-        children: [
-          /* @__PURE__ */ i(
-            J,
-            {
-              id: f,
-              defaultChecked: u,
-              checked: r,
-              onCheckedChange: (w) => m?.(w),
-              className: R(V({ className: o })),
-              "aria-label": d,
-              children: /* @__PURE__ */ i(
-                K,
-                {
-                  className: O({
-                    className: s
-                  })
-                }
-              )
-            }
-          ),
-          d ? /* @__PURE__ */ C(
-            "label",
-            {
-              className: "flex flex-col text-slate-800 dark:text-white text-sm",
-              htmlFor: f,
-              style: { paddingRight: 15 },
-              children: [
-                d,
-                c ? /* @__PURE__ */ i("span", { className: "text-slate-600 dark:text-slate-400 text-xs", children: c }) : null
-              ]
-            }
-          ) : null,
-          /* @__PURE__ */ i(
-            "input",
-            {
-              ref: a,
-              name: e,
-              type: "text",
-              className: "hidden",
-              "aria-hidden": "true"
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+import { t as o } from "../../Switch-DjbC0A8y.js";
 export {
-  ne as Switch
+  o as Switch
 };

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

@@ -0,0 +1,45 @@
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { switchVariants } from './Switch.variants';
+/**
+ * Props for the Switch component.
+ *
+ * @example
+ * ```tsx
+ * <Switch label="Enable notifications" onChange={(enabled) => setEnabled(enabled)} />
+ * <Switch label="Dark mode" value={isDark} onChange={setIsDark} />
+ * <Switch label="Feature" helperText="Enable experimental features" alignment="vertical" />
+ * ```
+ */
+export interface Props extends VariantProps<typeof switchVariants> {
+    /** Layout direction: horizontal (default) or vertical */
+    alignment?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial checked state */
+    defaultChecked?: boolean;
+    /** Whether the switch is disabled */
+    disabled?: boolean;
+    /** Helper text displayed below the label */
+    helperText?: string;
+    /** CSS classes for helper text */
+    helperTextClassName?: string;
+    /** Label text displayed next to switch */
+    label?: string;
+    /** CSS classes for the label */
+    labelClassName?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClassName?: string;
+    /** Form field name */
+    name?: string;
+    /** Theme override for this component */
+    theme?: Theme;
+    /** CSS classes for the thumb element */
+    thumbClassName?: string;
+    /** Controlled checked state */
+    value?: boolean;
+    /** Callback when checked state changes */
+    onChange?: (e: boolean) => void;
+}
+/** @deprecated Use Props instead */
+export type SwitchProps = Props;

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

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

package/dist/components/Switch/Switch.variants.js

@@ -1,24 +1,33 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const r = a([
-  "w-[40px]",
-  "h-[20px]",
+import { t as a } from "../../dist-DtEbXv47.js";
+var t = a([
+  "w-10",
+  "h-5",
   "flex",
   "items-center",
   "rounded-full",
   "shadow",
   "focus:shadow-md",
   "data-[state=unchecked]:bg-gray-300",
-  "dark:data-[state=unchecked]:bg-gray-600",
+  "dark:data-[state=unchecked]:bg-metal-600",
   "transition-all",
   "delay-10",
   "duration-250",
   "cursor-pointer",
   "bg-aurora-500",
-  "kubefirst:bg-kubefirst-primary"
-]), e = a([
+  "kubefirst:bg-kubefirst-primary",
+  "[&+label,&+span]:cursor-pointer",
+  "disabled:[&+label,&+span,&]:cursor-not-allowed",
+  "disabled:bg-gray-200",
+  "disabled:data-[state=unchecked]:[&>span]:bg-white",
+  "disabled:data-[state=unchecked]:bg-gray-200",
+  "dark:disabled:bg-metal-700",
+  "dark:disabled:data-[state=unchecked]:[&>span]:bg-metal-600",
+  "dark:disabled:data-[state=unchecked]:bg-metal-700",
+  "dark:disabled:[&>span]:bg-metal-600"
+]), d = a([
   "block",
-  "w-[16px]",
-  "h-[16px]",
+  "w-4",
+  "h-4",
   "bg-white",
   "dark:bg-gray-400",
   "dark:data-[state=checked]:bg-white",
@@ -31,6 +40,6 @@ const r = a([
   "duration-300"
 ]);
 export {
-  r as switchVariants,
-  e as thumbVariants
+  t as switchVariants,
+  d as thumbVariants
 };

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { BodyProps, FilterProps, HeadProps, RowProps, TableProps } from './Table.types';
+/**
+ * A composable table component with Head, Body, Row, and Filter sub-components.
+ * For large datasets, consider using VirtualizedTable instead.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <Table.Filter placeholder="Search..." />
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <th>Name</th>
+ *       <th>Email</th>
+ *       <th>Role</th>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     {users.map((user) => (
+ *       <Table.Row key={user.id}>
+ *         <td>{user.name}</td>
+ *         <td>{user.email}</td>
+ *         <td>{user.role}</td>
+ *       </Table.Row>
+ *     ))}
+ *   </Table.Body>
+ * </Table>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-table--docs Storybook}
+ */
+declare const Table: FC<TableProps> & {
+    Head: FC<HeadProps>;
+    Row: FC<RowProps>;
+    Filter: FC<FilterProps>;
+    Body: FC<BodyProps>;
+};
+export { Table };

package/dist/components/Table/Table.js

@@ -1,27 +1,20 @@
-import { jsx as e } from "react/jsx-runtime";
-import { cn as i } from "../../utils/index.js";
-import { tableVariants as p } from "./Table.variants.js";
-import { Body as f } from "./components/Body.js";
-import { Filter as l } from "./components/Filter.js";
-import { Head as d } from "./components/Head.js";
-import { Row as s } from "./components/Row.js";
-const o = ({ children: r, className: m, theme: t, ...a }) => /* @__PURE__ */ e(
-  "table",
-  {
-    className: i(
-      p({
-        className: m
-      })
-    ),
-    "data-theme": t,
-    ...a,
-    children: r
-  }
-);
-o.Body = f;
-o.Filter = l;
-o.Head = d;
-o.Row = s;
+import { t as e } from "../../utils-DHuiYnx1.js";
+import { tableVariants as i } from "./Table.variants.js";
+import { Body as p } from "./components/Body.js";
+import { Filter as f } from "./components/Filter.js";
+import { Head as l } from "./components/Head.js";
+import { Row as d } from "./components/Row.js";
+import { jsx as s } from "react/jsx-runtime";
+var o = ({ children: r, className: m, theme: t, ...a }) => /* @__PURE__ */ s("table", {
+  className: e(i({ className: m })),
+  "data-theme": t,
+  ...a,
+  children: r
+});
+o.Body = p;
+o.Filter = f;
+o.Head = l;
+o.Row = d;
 export {
   o as Table
 };