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

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

@@ -0,0 +1,51 @@
+import { FC } from 'react';
+import { StepperProps } from './Stepper.types';
+/**
+ * A stepper component for displaying multi-step processes.
+ * Supports vertical and horizontal orientations with various step states.
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical stepper (inline variant - text beside indicator)
+ * <Stepper
+ *   steps={[
+ *     { id: 1, label: 'Select platform', status: 'completed' },
+ *     { id: 2, label: 'Set up cluster', status: 'active' },
+ *     { id: 3, label: 'Preparing', status: 'pending' },
+ *   ]}
+ * />
+ *
+ * // Stacked variant (text below indicator, larger circles)
+ * <Stepper
+ *   variant="stacked"
+ *   steps={[
+ *     { id: 1, label: 'Step 1', status: 'completed' },
+ *     { id: 2, label: 'Step 2', status: 'active' },
+ *     { id: 3, label: 'Step 3', status: 'pending' },
+ *   ]}
+ * />
+ *
+ * // Horizontal stepper
+ * <Stepper
+ *   orientation="horizontal"
+ *   steps={[
+ *     { id: 1, label: 'Step 1', status: 'completed' },
+ *     { id: 2, label: 'Step 2', status: 'active' },
+ *     { id: 3, label: 'Step 3', status: 'pending' },
+ *   ]}
+ * />
+ *
+ * // Auto-calculated statuses with currentStep
+ * <Stepper
+ *   steps={[
+ *     { id: 1, label: 'Step 1' },
+ *     { id: 2, label: 'Step 2' },
+ *     { id: 3, label: 'Step 3' },
+ *   ]}
+ *   currentStep={1}
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-stepper--docs Storybook}
+ */
+export declare const Stepper: FC<StepperProps>;

package/dist/components/Stepper/Stepper.js

@@ -0,0 +1,75 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useMemo as S } from "react";
+import { cn as s } from "../../utils/index.js";
+import { StepItem as b } from "./components/StepItem/StepItem.js";
+import { stepItemVariants as k, stepListVariants as C, stepperVariants as I } from "./Stepper.variants.js";
+const P = ({
+  className: c,
+  classNames: r,
+  clickable: u = !1,
+  currentStep: o,
+  icons: f,
+  orientation: p = "vertical",
+  showConnector: h = !0,
+  size: v = "sm",
+  steps: l,
+  theme: d,
+  variant: g = "inline",
+  onStepClick: z
+}) => {
+  const m = g ?? "inline", e = m === "horizontal" ? "horizontal" : p ?? "vertical", V = v ?? "sm", n = S(
+    () => l.map((t, i) => t.status ? t : o !== void 0 ? i < o ? { ...t, status: "completed" } : i === o ? { ...t, status: "active" } : { ...t, status: "pending" } : { ...t, status: "pending" }),
+    [l, o]
+  );
+  return /* @__PURE__ */ a(
+    "nav",
+    {
+      className: s(
+        I({ orientation: e }),
+        c,
+        r?.root
+      ),
+      "data-theme": d,
+      "aria-label": "Progress steps",
+      children: /* @__PURE__ */ a(
+        "ol",
+        {
+          className: s(
+            C({ orientation: e }),
+            r?.list
+          ),
+          children: n.map((t, i) => /* @__PURE__ */ a(
+            "li",
+            {
+              className: s(
+                k({ orientation: e }),
+                r?.item
+              ),
+              children: /* @__PURE__ */ a(
+                b,
+                {
+                  step: t,
+                  index: i,
+                  isLast: i === n.length - 1,
+                  orientation: e,
+                  clickable: u ?? !1,
+                  onClick: () => z?.(t, i),
+                  size: V,
+                  showConnector: h ?? !0,
+                  nextStepStatus: n[i + 1]?.status,
+                  variant: m,
+                  classNames: r,
+                  icons: f
+                }
+              )
+            },
+            t.id
+          ))
+        }
+      )
+    }
+  );
+};
+export {
+  P as Stepper
+};

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

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { stepperVariants } from './Stepper.variants';
+export type StepStatus = 'completed' | 'active' | 'pending' | 'error';
+export type StepSize = 'sm' | 'md' | 'lg';
+export type StepVariant = 'inline' | 'stacked' | 'horizontal';
+export type Step = {
+    /** Optional description for the step */
+    description?: string;
+    /** Whether this step is disabled (not clickable) */
+    disabled?: boolean;
+    /** Unique identifier for the step */
+    id: string | number;
+    /** Label displayed for the step (can be a string or ReactNode) */
+    label?: ReactNode;
+    /** Callback when this specific step is clicked */
+    onClick?: () => void;
+    /** Status of the step */
+    status?: StepStatus;
+};
+export type StepperClassNames = {
+    /** Class for the connector line */
+    connector?: string;
+    /** Class for the step content wrapper (contains label + description) */
+    content?: string;
+    /** Class for the step description */
+    description?: string;
+    /** Class for the step indicator circle */
+    indicator?: string;
+    /** Class for the content inside the indicator (number, icon) */
+    indicatorContent?: string;
+    /** Class for each li item element */
+    item?: string;
+    /** Class for the step label */
+    label?: string;
+    /** Class for the ol list element */
+    list?: string;
+    /** Class for the root nav element */
+    root?: string;
+    /** Class for the step wrapper (contains indicator + content) */
+    stepWrapper?: string;
+};
+export type StepperIcons = {
+    /** Custom icon for completed status */
+    completed?: ReactNode;
+    /** Custom icon for error status */
+    error?: ReactNode;
+};
+export type StepperProps = VariantProps<typeof stepperVariants> & {
+    /** Additional CSS classes for the wrapper */
+    className?: string;
+    /** Custom class names for each element */
+    classNames?: StepperClassNames;
+    /** Whether steps are clickable */
+    clickable?: boolean;
+    /** Index of the current active step (0-based). When provided, step statuses are auto-calculated. */
+    currentStep?: number;
+    /** Custom icons for step statuses */
+    icons?: StepperIcons;
+    /** Show connector lines between steps */
+    showConnector?: boolean;
+    /** Size of the step indicators */
+    size?: StepSize;
+    /** Array of steps to display */
+    steps: Step[];
+    /** Theme override for this component */
+    theme?: Theme;
+    /** Layout variant: 'inline' (text beside indicator) or 'stacked' (text below indicator) */
+    variant?: StepVariant;
+    /** Callback when a step is clicked */
+    onStepClick?: (step: Step, index: number) => void;
+};

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

@@ -0,0 +1,40 @@
+export declare const stepperVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepListVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepItemVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+    clickable?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepIndicatorVariants: (props?: ({
+    status?: "error" | "completed" | "active" | "pending" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepContentVariants: (props?: ({
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepLabelVariants: (props?: ({
+    status?: "error" | "completed" | "active" | "pending" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepDescriptionVariants: (props?: ({
+    status?: "error" | "completed" | "active" | "pending" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const stepConnectorVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    status?: "error" | "completed" | "active" | "pending" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const horizontalConnectorWrapperVariants: (props?: ({
+    variant?: "inline" | "horizontal" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Stepper/Stepper.variants.js

@@ -0,0 +1,278 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const e = t(["flex"], {
+  variants: {
+    orientation: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row", "items-start"]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+}), r = t(["flex", "list-none", "p-0", "m-0"], {
+  variants: {
+    orientation: {
+      vertical: ["flex-col"],
+      horizontal: ["flex-row"]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+}), i = t(["list-none"], {
+  variants: {
+    orientation: {
+      vertical: [],
+      horizontal: []
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+}), n = t(["flex", "group", "relative"], {
+  variants: {
+    orientation: {
+      vertical: [],
+      horizontal: ["min-w-0"]
+    },
+    variant: {
+      inline: ["flex-row", "items-center", "gap-4"],
+      stacked: ["flex-col", "items-center", "gap-2"],
+      horizontal: ["flex-row", "items-center", "gap-4"]
+    },
+    clickable: {
+      true: ["cursor-pointer"],
+      false: ["cursor-default"]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    variant: "inline",
+    clickable: !1
+  }
+}), s = t(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "shrink-0",
+    "font-medium",
+    "transition-all",
+    "duration-200"
+  ],
+  {
+    variants: {
+      status: {
+        completed: [
+          "bg-transparent",
+          "border-2",
+          "border-aurora-500",
+          "text-aurora-500",
+          "dark:border-aurora-500",
+          "dark:text-aurora-500"
+        ],
+        active: [
+          "bg-aurora-500",
+          "text-slate-700",
+          "border-0",
+          "dark:bg-aurora-500",
+          "dark:text-metal-900"
+        ],
+        pending: [
+          "border-2",
+          "border-slate-300",
+          "text-slate-600",
+          "bg-transparent",
+          "dark:border-metal-200",
+          "dark:text-metal-200"
+        ],
+        error: [
+          "bg-red-600",
+          "text-white",
+          "border-0",
+          "dark:bg-red-600",
+          "dark:text-white"
+        ]
+      },
+      size: {
+        sm: ["w-5", "h-5", "text-xs", "uppercase", "tracking-wide"],
+        md: ["w-[37px]", "h-[37px]", "text-sm", "font-semibold"],
+        lg: ["w-[54px]", "h-[54px]", "text-lg", "font-semibold"]
+      }
+    },
+    defaultVariants: {
+      status: "pending",
+      size: "sm"
+    }
+  }
+), o = t(["flex", "flex-col", "gap-0.5"], {
+  variants: {
+    variant: {
+      inline: ["items-start"],
+      stacked: ["items-center"],
+      horizontal: ["items-start"]
+    }
+  },
+  defaultVariants: {
+    variant: "inline"
+  }
+}), l = t(
+  [
+    "font-medium",
+    "transition-colors",
+    "duration-200",
+    "leading-tight",
+    "select-none"
+  ],
+  {
+    variants: {
+      status: {
+        completed: ["text-slate-700", "dark:text-metal-200"],
+        active: ["text-slate-700", "dark:text-metal-50"],
+        pending: ["text-slate-600", "dark:text-metal-50"],
+        error: ["text-red-700", "dark:text-red-500"]
+      },
+      size: {
+        sm: ["text-sm"],
+        md: ["text-sm"],
+        lg: ["text-base"]
+      },
+      variant: {
+        inline: ["text-left"],
+        stacked: ["text-center"],
+        horizontal: ["text-left"]
+      }
+    },
+    defaultVariants: {
+      status: "pending",
+      size: "sm",
+      variant: "inline"
+    }
+  }
+), d = t(
+  ["transition-colors", "duration-200", "leading-tight", "select-none"],
+  {
+    variants: {
+      status: {
+        completed: ["text-slate-500", "dark:text-slate-400"],
+        active: ["text-slate-600", "dark:text-slate-300"],
+        pending: ["text-slate-400", "dark:text-slate-500"],
+        error: ["text-red-500", "dark:text-red-400"]
+      },
+      size: {
+        sm: ["text-xs"],
+        md: ["text-xs"],
+        lg: ["text-sm"]
+      },
+      variant: {
+        inline: ["text-left"],
+        stacked: ["text-center"],
+        horizontal: ["text-left"]
+      }
+    },
+    defaultVariants: {
+      status: "pending",
+      size: "sm",
+      variant: "inline"
+    }
+  }
+), c = t(
+  ["transition-colors", "duration-200"],
+  {
+    variants: {
+      orientation: {
+        vertical: ["w-0.5"],
+        horizontal: ["h-0.5", "flex-1", "min-w-4"]
+      },
+      status: {
+        completed: ["bg-aurora-500", "dark:bg-aurora-500"],
+        active: ["bg-aurora-500", "dark:bg-aurora-500"],
+        pending: ["bg-slate-300", "dark:bg-metal-400"],
+        error: ["bg-red-700", "dark:bg-red-600"]
+      },
+      size: {
+        sm: [],
+        md: [],
+        lg: []
+      },
+      variant: {
+        inline: [],
+        stacked: [],
+        horizontal: []
+      }
+    },
+    compoundVariants: [
+      // Vertical inline connectors by size
+      {
+        orientation: "vertical",
+        variant: "inline",
+        size: "sm",
+        class: ["h-6", "ml-[9px]", "my-1"]
+      },
+      {
+        orientation: "vertical",
+        variant: "inline",
+        size: "md",
+        class: ["h-6", "ml-[17px]", "my-1"]
+      },
+      {
+        orientation: "vertical",
+        variant: "inline",
+        size: "lg",
+        class: ["h-6", "ml-[26px]", "my-1"]
+      },
+      // Vertical stacked connectors by size
+      {
+        orientation: "vertical",
+        variant: "stacked",
+        size: "sm",
+        class: ["h-6", "mx-auto", "my-1"]
+      },
+      {
+        orientation: "vertical",
+        variant: "stacked",
+        size: "md",
+        class: ["h-7", "mx-auto", "my-2"]
+      },
+      {
+        orientation: "vertical",
+        variant: "stacked",
+        size: "lg",
+        class: ["h-8", "mx-auto", "my-2"]
+      }
+    ],
+    defaultVariants: {
+      orientation: "vertical",
+      status: "pending",
+      size: "sm",
+      variant: "inline"
+    }
+  }
+), x = t(
+  ["flex", "items-center", "flex-1"],
+  {
+    variants: {
+      variant: {
+        inline: ["mt-2.5"],
+        stacked: ["mt-[26px]"],
+        horizontal: ["mt-0"]
+      }
+    },
+    defaultVariants: {
+      variant: "inline"
+    }
+  }
+);
+export {
+  x as horizontalConnectorWrapperVariants,
+  c as stepConnectorVariants,
+  o as stepContentVariants,
+  d as stepDescriptionVariants,
+  s as stepIndicatorVariants,
+  i as stepItemVariants,
+  l as stepLabelVariants,
+  r as stepListVariants,
+  n as stepVariants,
+  e as stepperVariants
+};

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

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