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

package/dist/components/Switch/Switch.js

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

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

@@ -0,0 +1,43 @@
+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 SwitchProps 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;
+}

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]",
+const 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.types.d.ts

@@ -0,0 +1,57 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+import { Theme } from '../../domain/theme';
+import { bodyVariants, headVariants, rowVariants, tableVariants } from './Table.variants';
+/**
+ * Props for the Table component.
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <Table.Head>
+ *     <Table.Row>
+ *       <th>Name</th>
+ *       <th>Email</th>
+ *     </Table.Row>
+ *   </Table.Head>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <td>John Doe</td>
+ *       <td>john@example.com</td>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement>, PropsWithChildren, VariantProps<typeof tableVariants> {
+    /** Theme override for this component */
+    theme?: Theme;
+}
+/**
+ * Props for Table.Row component.
+ */
+export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
+    /** Width of the row */
+    width?: string;
+    /** Whether the row is selected */
+    isSelected?: boolean;
+    /** Callback when row is selected */
+    onSelect?: () => void;
+}
+/**
+ * Props for Table.Head component.
+ */
+export interface HeadProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof headVariants> {
+}
+/**
+ * Props for Table.Body component.
+ */
+export interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof bodyVariants> {
+}
+/**
+ * Props for Table.Filter component.
+ */
+export interface FilterProps extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
+    /** Placeholder text for the filter input */
+    placeholder?: string;
+}

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

@@ -0,0 +1,6 @@
+export declare const tableVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const rowVariants: (props?: ({
+    isSelected?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const headVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const bodyVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,4 @@
+export * from './Body';
+export * from './Filter';
+export * from './Head';
+export * from './Row';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { ListProps, TabsProps, TriggerProps } from './Tabs.types';
+import { Content, List, Trigger } from './components';
+import * as ReactTabs from '@radix-ui/react-tabs';
+/**
+ * A tabs component built on Radix UI primitives.
+ * Supports horizontal and vertical orientations with List, Trigger, and Content sub-components.
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List orientation="horizontal">
+ *     <Tabs.Trigger tab="overview" label="Overview" isActive />
+ *     <Tabs.Trigger tab="settings" label="Settings" isActive={false} />
+ *     <Tabs.Trigger tab="billing" label="Billing" isActive={false} />
+ *   </Tabs.List>
+ *
+ *   <Tabs.Content value="overview">
+ *     Overview content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="settings">
+ *     Settings content here
+ *   </Tabs.Content>
+ *   <Tabs.Content value="billing">
+ *     Billing content here
+ *   </Tabs.Content>
+ * </Tabs>
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-tabs--docs Storybook}
+ */
+declare const Tabs: FC<TabsProps> & {
+    List: FC<ListProps>;
+    Trigger: FC<TriggerProps>;
+    Content: FC<ReactTabs.TabsContentProps>;
+};
+export { Content, List, Tabs, Trigger };

package/dist/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { R as e } from "../../index-DQJhMz8c.js";
+import { R as e } from "../../index-Cmf-IG4l.js";
 import { cn as n } from "../../utils/index.js";
 import { rootVariants as p } from "./Tabs.variants.js";
 import { Content as f } from "./components/Content.js";