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

package/dist/components/Stepper/Stepper.js

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

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,319 @@
+import { t } from "../../dist-DtEbXv47.js";
+var 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"
+  }
+}), l = t([
+  "flex",
+  "flex-col",
+  "gap-0.5"
+], {
+  variants: { variant: {
+    inline: ["items-start"],
+    stacked: ["items-center"],
+    horizontal: ["items-start"]
+  } },
+  defaultVariants: { variant: "inline" }
+}), o = 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: [
+    {
+      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"
+      ]
+    },
+    {
+      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,
+  l as stepContentVariants,
+  d as stepDescriptionVariants,
+  s as stepIndicatorVariants,
+  i as stepItemVariants,
+  o 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>;

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

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

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

@@ -0,0 +1,17 @@
+import { t as m } from "../../../../utils-DHuiYnx1.js";
+import { stepConnectorVariants as n } from "../../Stepper.variants.js";
+import { memo as i } from "react";
+import { jsx as p } from "react/jsx-runtime";
+var s = ({ className: r, orientation: o, size: t, status: e, variant: a }) => /* @__PURE__ */ p("div", {
+  className: m(n({
+    orientation: o,
+    size: t,
+    status: e,
+    variant: a
+  }), r),
+  role: "presentation",
+  "aria-hidden": "true"
+}), C = i(s);
+export {
+  C 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,2 @@
+import { Props } from './StepIndicatorContent.types';
+export declare const StepIndicatorContent: import('react').NamedExoticComponent<Props>;

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

@@ -0,0 +1,4 @@
+import { t as o } from "../../../../StepIndicatorContent-D5z1Ziqg.js";
+export {
+  o 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,2 @@
+import { Props } from './StepItem.types';
+export declare const StepItem: import('react').NamedExoticComponent<Props>;

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

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