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

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.types.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+import { ReactNode } from 'react';
+import { navigationOptionVariants } from './NavigationOption.variants';
+type NavigationOption = VariantProps<typeof navigationOptionVariants> & {
+    className?: string;
+    isVisible?: boolean;
+    isActive?: boolean;
+};
+export type NavigationOptionProps = NavigationOption & ({
+    role: 'button';
+    children: ReactNode;
+    onClick: VoidFunction;
+} | {
+    role?: never;
+    children: ReactNode;
+});
+export {};

package/dist/components/Sidebar/components/NavigationOption/NavigationOption.variants.d.ts

@@ -0,0 +1,3 @@
+export declare const navigationOptionVariants: (props?: ({
+    isActive?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NavigationSeparatorProps } from './NavigationSeparator.types';
+declare const NavigationSeparator: FC<NavigationSeparatorProps>;
+export { NavigationSeparator };

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.types.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
+import { navigationSeparatorVariant } from './NavigationSeparator.variants';
+export interface NavigationSeparatorProps extends Pick<HTMLAttributes<HTMLDivElement>, 'className' | 'style'>, VariantProps<typeof navigationSeparatorVariant> {
+}

package/dist/components/Sidebar/components/NavigationSeparator/NavigationSeparator.variants.d.ts

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

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { NavigationTitleProps } from './NavigationTitle.types';
+declare const NavigationTitle: FC<NavigationTitleProps>;
+export { NavigationTitle };

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.types.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import { HtmlHTMLAttributes } from 'react';
+import { navigationTitleVariants } from './NavigationTitle.variants';
+export interface NavigationTitleProps extends VariantProps<typeof navigationTitleVariants>, Pick<HtmlHTMLAttributes<HTMLHeadingElement>, 'className'> {
+    title: string;
+    className?: string;
+    isVisible?: boolean;
+}

package/dist/components/Sidebar/components/NavigationTitle/NavigationTitle.variants.d.ts

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

package/dist/components/Sidebar/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { SidebarProps } from '../../Sidebar.types';
+declare const Wrapper: FC<SidebarProps>;
+export { Wrapper };

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

@@ -0,0 +1,15 @@
+export * from './Footer/Footer';
+export type * from './Footer/Footer.types';
+export * from './Logo/Logo';
+export type * from './Logo/Logo.types';
+export * from './Navigation/Navigation';
+export type * from './Navigation/Navigation.types';
+export * from './NavigationGroup/NavigationGroup';
+export type * from './NavigationGroup/NavigationGroup.types';
+export * from './NavigationOption/NavigationOption';
+export type * from './NavigationOption/NavigationOption.types';
+export * from './NavigationSeparator/NavigationSeparator';
+export type * from './NavigationSeparator/NavigationSeparator.types';
+export * from './NavigationTitle/NavigationTitle';
+export type * from './NavigationTitle/NavigationTitle.types';
+export * from './Wrapper/Wrapper';

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,21 @@
+import { FC } from 'react';
+import { SliderProps } from './Slider.types';
+/**
+ * A single-thumb slider component for selecting a value.
+ * Built on Radix UI Slider for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   label="Brightness"
+ *   min={0}
+ *   max={100}
+ *   defaultValue={[75]}
+ *   showValue
+ *   name="brightness"
+ * />
+ * ```
+ *
+ * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-slider--docs Storybook}
+ */
+export declare const Slider: FC<SliderProps>;

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

@@ -0,0 +1,40 @@
+import { SliderProps as SliderPropsBase } from '@radix-ui/react-slider';
+import { VariantProps } from 'class-variance-authority';
+import { Theme } from '../../domain/theme';
+import { sliderVariants } from './Slider.variants';
+/**
+ * Props for the Slider component.
+ * A single-thumb slider for selecting a single value.
+ *
+ * @example
+ * ```tsx
+ * <Slider
+ *   label="Volume"
+ *   min={0}
+ *   max={100}
+ *   defaultValue={[50]}
+ *   showValue
+ *   size="md"
+ * />
+ * ```
+ */
+export interface SliderProps extends VariantProps<typeof sliderVariants> {
+    /** Additional CSS classes */
+    className?: string;
+    /** Initial value as single-element array */
+    defaultValue?: SliderPropsBase['defaultValue'];
+    /** Label displayed above the slider */
+    label?: string;
+    /** Maximum value for the slider */
+    max?: SliderPropsBase['max'];
+    /** Minimum value for the slider */
+    min?: SliderPropsBase['min'];
+    /** Form field name for the hidden input */
+    name?: string;
+    /** Whether to display the current value */
+    showValue?: boolean;
+    /** Size of the slider track and thumb */
+    size?: 'sm' | 'md' | 'lg';
+    /** Theme override for this component */
+    theme?: Theme;
+}

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

@@ -0,0 +1,7 @@
+export declare const sliderVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const trackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const thumbVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

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