@konstructio/ui 0.1.2-alpha.52 → 0.1.2-alpha.53

package/dist/components/Stepper/components/HorizontalStepItem/HorizontalStepItem.js

@@ -0,0 +1,195 @@
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import { S as w } from "../../../../index-BvoZGpli.js";
+import { cn as t } from "../../../../utils/index.js";
+import { stepIndicatorVariants as C, stepLabelVariants as g, stepDescriptionVariants as y, stepContentVariants as $, stepVariants as S } from "../../Stepper.variants.js";
+import { StepConnector as K } from "../StepConnector/StepConnector.js";
+import { StepIndicatorContent as x } from "../StepIndicatorContent/StepIndicatorContent.js";
+const L = ({
+  classNames: o,
+  clickable: D,
+  icons: h,
+  index: d,
+  isLast: f,
+  showConnector: u,
+  size: a,
+  step: r,
+  variant: i,
+  onClick: b
+}) => {
+  const e = r.status ?? "pending", I = i === "horizontal", p = r.disabled || e === "active", V = !!(r.onClick || b), l = D && !p && V, v = typeof r.label == "string" ? "span" : w, m = () => {
+    l && (r.onClick ? r.onClick() : b && b());
+  }, k = (s) => {
+    l && (s.key === "Enter" || s.key === " ") && (s.preventDefault(), m());
+  };
+  return I ? /* @__PURE__ */ c("div", { className: "flex items-center", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: t(
+          S({
+            orientation: "horizontal",
+            variant: i,
+            clickable: l
+          }),
+          o?.stepWrapper
+        ),
+        role: l ? "button" : void 0,
+        tabIndex: l ? 0 : void 0,
+        onClick: m,
+        onKeyDown: k,
+        "aria-current": e === "active" ? "step" : void 0,
+        "aria-disabled": p || void 0,
+        "aria-label": `Step ${d + 1}${typeof r.label == "string" ? `: ${r.label}` : ""}${e === "completed" ? ", completed" : e === "active" ? ", current" : e === "error" ? ", error" : ""}`,
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: t(
+                C({ status: e, size: a }),
+                o?.indicator
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n(
+                x,
+                {
+                  status: e,
+                  index: d,
+                  size: a,
+                  icons: h,
+                  className: o?.indicatorContent
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: t(
+                $({ variant: i }),
+                o?.content
+              ),
+              children: [
+                r.label && /* @__PURE__ */ n(
+                  v,
+                  {
+                    className: t(
+                      g({ status: e, size: a, variant: i }),
+                      o?.label
+                    ),
+                    children: r.label
+                  }
+                ),
+                r.description && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: t(
+                      y({ status: e, size: a, variant: i }),
+                      o?.description
+                    ),
+                    children: r.description
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !f && u && /* @__PURE__ */ n(
+      "div",
+      {
+        className: t(
+          "h-0.5 w-7.5 mx-2 transition-colors duration-200",
+          e === "completed" || e === "active" ? "bg-aurora-500" : e === "error" ? "bg-red-700 dark:bg-red-600" : "bg-slate-300 dark:bg-metal-400",
+          o?.connector
+        ),
+        role: "presentation",
+        "aria-hidden": "true"
+      }
+    )
+  ] }) : /* @__PURE__ */ c("div", { className: "flex flex-1 items-start", children: [
+    /* @__PURE__ */ c(
+      "div",
+      {
+        className: t(
+          S({
+            orientation: "horizontal",
+            variant: i,
+            clickable: l
+          }),
+          o?.stepWrapper
+        ),
+        role: l ? "button" : void 0,
+        tabIndex: l ? 0 : void 0,
+        onClick: m,
+        onKeyDown: k,
+        "aria-current": e === "active" ? "step" : void 0,
+        "aria-disabled": p || void 0,
+        "aria-label": `Step ${d + 1}${typeof r.label == "string" ? `: ${r.label}` : ""}${e === "completed" ? ", completed" : e === "active" ? ", current" : e === "error" ? ", error" : ""}`,
+        children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: t(
+                C({ status: e, size: a }),
+                o?.indicator
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ n(
+                x,
+                {
+                  status: e,
+                  index: d,
+                  size: a,
+                  icons: h,
+                  className: o?.indicatorContent
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ c(
+            "div",
+            {
+              className: t($({ variant: i }), o?.content),
+              children: [
+                r.label && /* @__PURE__ */ n(
+                  v,
+                  {
+                    className: t(
+                      g({ status: e, size: a, variant: i }),
+                      o?.label
+                    ),
+                    children: r.label
+                  }
+                ),
+                r.description && /* @__PURE__ */ n(
+                  "span",
+                  {
+                    className: t(
+                      y({ status: e, size: a, variant: i }),
+                      o?.description
+                    ),
+                    children: r.description
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !f && u && /* @__PURE__ */ n(
+      K,
+      {
+        orientation: "horizontal",
+        status: e,
+        size: a,
+        variant: i,
+        className: t("mt-6.5", o?.connector)
+      }
+    )
+  ] });
+};
+export {
+  L as HorizontalStepItem
+};

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

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

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

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

package/dist/components/Stepper/components/StepConnector/StepConnector.js

@@ -0,0 +1,28 @@
+import { jsx as i } from "react/jsx-runtime";
+import { cn as a } from "../../../../utils/index.js";
+import { stepConnectorVariants as m } from "../../Stepper.variants.js";
+const d = ({
+  className: o,
+  orientation: r,
+  size: t,
+  status: e,
+  variant: n
+}) => /* @__PURE__ */ i(
+  "div",
+  {
+    className: a(
+      m({
+        orientation: r,
+        size: t,
+        status: e,
+        variant: n
+      }),
+      o
+    ),
+    role: "presentation",
+    "aria-hidden": "true"
+  }
+);
+export {
+  d as StepConnector
+};

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

@@ -0,0 +1,13 @@
+import { StepSize, StepStatus, StepVariant } from '../../Stepper.types';
+export type Props = {
+    /** Additional CSS class */
+    className?: string;
+    /** Orientation of the connector */
+    orientation: 'vertical' | 'horizontal';
+    /** Size of the connector */
+    size: StepSize;
+    /** Status of the step */
+    status: StepStatus;
+    /** Layout variant */
+    variant: StepVariant;
+};

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

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

package/dist/components/Stepper/components/StepIndicatorContent/StepIndicatorContent.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as d } from "../../../../utils/index.js";
+import { c as p } from "../../../../createLucideIcon-CP-mMPfa.js";
+import { ExclamationIcon as m } from "../../../../assets/icons/components/Exclamation.js";
+const h = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]], a = p("check", h), M = ({
+  className: r,
+  icons: o,
+  index: c,
+  size: t,
+  status: n
+}) => n === "completed" ? o?.completed ? /* @__PURE__ */ e("span", { className: r, children: o.completed }) : /* @__PURE__ */ e(
+  a,
+  {
+    className: d({
+      sm: "h-3 w-3",
+      md: "h-4 w-4",
+      lg: "h-6 w-6"
+    }[t], r),
+    strokeWidth: 2.5,
+    "aria-hidden": "true"
+  }
+) : n === "error" ? o?.error ? /* @__PURE__ */ e("span", { className: r, children: o.error }) : /* @__PURE__ */ e(m, { size: {
+  sm: "sm",
+  md: "md",
+  lg: "lg"
+}[t], className: r }) : /* @__PURE__ */ e("span", { className: r, "aria-hidden": "true", children: c + 1 });
+export {
+  M as StepIndicatorContent
+};

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

@@ -0,0 +1,13 @@
+import { StepperIcons, StepSize, StepStatus } from '../../Stepper.types';
+export type Props = {
+    /** Additional CSS class for the content */
+    className?: string;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Step index (0-based) */
+    index: number;
+    /** Size of the indicator */
+    size: StepSize;
+    /** Status of the step */
+    status: StepStatus;
+};

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

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

package/dist/components/Stepper/components/StepItem/StepItem.js

@@ -0,0 +1,7 @@
+import { jsx as r } from "react/jsx-runtime";
+import { HorizontalStepItem as o } from "../HorizontalStepItem/HorizontalStepItem.js";
+import { VerticalStepItem as e } from "../VerticalStepItem/VerticalStepItem.js";
+const a = (t) => t.orientation === "horizontal" || t.variant === "horizontal" ? /* @__PURE__ */ r(o, { ...t }) : /* @__PURE__ */ r(e, { ...t });
+export {
+  a as StepItem
+};

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,3 @@
+import { FC } from 'react';
+import { Props } from './VerticalStepItem.types';
+export declare const VerticalStepItem: FC<Props>;

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

@@ -0,0 +1,109 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { S as y } from "../../../../index-BvoZGpli.js";
+import { cn as l } from "../../../../utils/index.js";
+import { stepIndicatorVariants as S, stepLabelVariants as V, stepDescriptionVariants as D, stepContentVariants as w, stepVariants as I } from "../../Stepper.variants.js";
+import { StepConnector as $ } from "../StepConnector/StepConnector.js";
+import { StepIndicatorContent as g } from "../StepIndicatorContent/StepIndicatorContent.js";
+const q = ({
+  classNames: r,
+  clickable: b,
+  icons: C,
+  index: p,
+  isLast: h,
+  showConnector: u,
+  size: o,
+  step: e,
+  variant: n,
+  onClick: c
+}) => {
+  const t = e.status ?? "pending", m = e.disabled || t === "active", k = !!(e.onClick || c), i = b && !m && k, v = typeof e.label == "string" ? "span" : y, f = () => {
+    i && (e.onClick ? e.onClick() : c && c());
+  }, x = (d) => {
+    i && (d.key === "Enter" || d.key === " ") && (d.preventDefault(), f());
+  };
+  return /* @__PURE__ */ s("div", { className: n === "stacked" ? "flex flex-col items-center" : "flex flex-col", children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        className: l(
+          I({
+            orientation: "vertical",
+            variant: n,
+            clickable: i
+          }),
+          r?.stepWrapper
+        ),
+        role: i ? "button" : void 0,
+        tabIndex: i ? 0 : void 0,
+        onClick: f,
+        onKeyDown: x,
+        "aria-current": t === "active" ? "step" : void 0,
+        "aria-disabled": m || void 0,
+        "aria-label": `Step ${p + 1}${typeof e.label == "string" ? `: ${e.label}` : ""}${t === "completed" ? ", completed" : t === "active" ? ", current" : t === "error" ? ", error" : ""}`,
+        children: [
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: l(
+                S({ status: t, size: o }),
+                r?.indicator
+              ),
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ a(
+                g,
+                {
+                  status: t,
+                  index: p,
+                  size: o,
+                  icons: C,
+                  className: r?.indicatorContent
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: l(w({ variant: n }), r?.content),
+              children: [
+                e.label && /* @__PURE__ */ a(
+                  v,
+                  {
+                    className: l(
+                      V({ status: t, size: o, variant: n }),
+                      r?.label
+                    ),
+                    children: e.label
+                  }
+                ),
+                e.description && /* @__PURE__ */ a(
+                  "span",
+                  {
+                    className: l(
+                      D({ status: t, size: o, variant: n }),
+                      r?.description
+                    ),
+                    children: e.description
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    !h && u && /* @__PURE__ */ a(
+      $,
+      {
+        orientation: "vertical",
+        status: t,
+        size: o,
+        variant: n,
+        className: r?.connector
+      }
+    )
+  ] });
+};
+export {
+  q 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/Switch/Switch.d.ts

@@ -0,0 +1,29 @@
+import { FC } from 'react';
+import { SwitchProps } 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<SwitchProps>;

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

@@ -0,0 +1,41 @@
+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;
+    /** 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/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';