@soadtech/cli 0.1.0

package/registry/components/Sidebar/SidebarNavItem.tsx

@@ -0,0 +1,96 @@
+import { forwardRef, useState } from 'react';
+import { cn } from '../../utils/cn';
+import { useSidebar } from './SidebarContext';
+import type { SidebarNavItemProps } from './Sidebar.types';
+import styles from './SidebarNavItem.module.css';
+
+function ChevronRightIcon() {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+      <path
+        d="M6 4L10 8L6 12"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export const SidebarNavItem = forwardRef<HTMLDivElement, SidebarNavItemProps>(
+  (
+    {
+      icon,
+      label,
+      active = false,
+      disabled = false,
+      badge,
+      onSelect,
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const { collapsed } = useSidebar();
+    const [open, setOpen] = useState(false);
+    const hasSubmenu = !!children;
+
+    const handleClick = () => {
+      if (disabled) return;
+      if (hasSubmenu && !collapsed) {
+        setOpen((prev) => !prev);
+      }
+      onSelect?.();
+    };
+
+    if (collapsed) {
+      return (
+        <div ref={ref} className={cn(styles.wrapper, className)} {...rest}>
+          <button
+            type="button"
+            disabled={disabled}
+            className={cn(styles.iconButton, active && styles.active)}
+            onClick={onSelect}
+            title={label}
+          >
+            <span className={styles.iconSlot}>{icon}</span>
+            {badge != null && <span className={styles.badgeDot} />}
+          </button>
+        </div>
+      );
+    }
+
+    return (
+      <div ref={ref} className={cn(styles.wrapper, className)} {...rest}>
+        <button
+          type="button"
+          disabled={disabled}
+          className={cn(styles.trigger, active && styles.active)}
+          onClick={handleClick}
+          aria-expanded={hasSubmenu ? open : undefined}
+        >
+          <span className={styles.iconSlot}>{icon}</span>
+          <span className={styles.label}>{label}</span>
+          {badge != null && <span className={styles.badge}>{badge}</span>}
+          {hasSubmenu && (
+            <span className={cn(styles.chevron, open && styles.chevronOpen)}>
+              <ChevronRightIcon />
+            </span>
+          )}
+        </button>
+
+        {hasSubmenu && (
+          <div className={cn(styles.panel, open && styles.panelOpen)}>
+            <div className={styles.panelContent}>
+              <div className={styles.panelInner}>{children}</div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+SidebarNavItem.displayName = 'SidebarNavItem';

package/registry/components/Sidebar/index.ts

@@ -0,0 +1,16 @@
+export { Sidebar } from './Sidebar';
+export { SidebarHeader } from './SidebarHeader';
+export { SidebarContent } from './SidebarContent';
+export { SidebarFooter } from './SidebarFooter';
+export { SidebarGroup } from './SidebarGroup';
+export { SidebarNavItem } from './SidebarNavItem';
+export { SidebarDivider } from './SidebarDivider';
+export type {
+  SidebarProps,
+  SidebarHeaderProps,
+  SidebarContentProps,
+  SidebarFooterProps,
+  SidebarGroupProps,
+  SidebarNavItemProps,
+  SidebarDividerProps,
+} from './Sidebar.types';

package/registry/components/Stepper/Stepper.module.css

@@ -0,0 +1,11 @@
+.root {
+  display: flex;
+}
+
+.vertical {
+  flex-direction: column;
+}
+
+.horizontal {
+  flex-direction: row;
+}

package/registry/components/Stepper/Stepper.tsx

@@ -0,0 +1,47 @@
+import { Children, cloneElement, forwardRef, isValidElement } from 'react';
+import { cn } from '../../utils/cn';
+import { StepperContext } from './StepperContext';
+import type { StepperProps, StepperStepProps } from './Stepper.types';
+import styles from './Stepper.module.css';
+
+export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
+  (
+    {
+      orientation = 'vertical',
+      size = 'md',
+      className,
+      children,
+      ...rest
+    },
+    ref
+  ) => {
+    const childArray = Children.toArray(children).filter(isValidElement);
+
+    const enhanced = childArray.map((child, index) => {
+      const prevChild = childArray[index - 1] as
+        | React.ReactElement<StepperStepProps>
+        | undefined;
+
+      return cloneElement(child as React.ReactElement, {
+        _step: index + 1,
+        _isFirst: index === 0,
+        _isLast: index === childArray.length - 1,
+        _prevCompleted: prevChild?.props?.status === 'completed',
+      });
+    });
+
+    return (
+      <StepperContext.Provider value={{ orientation, size }}>
+        <div
+          ref={ref}
+          className={cn(styles.root, styles[orientation], className)}
+          {...rest}
+        >
+          {enhanced}
+        </div>
+      </StepperContext.Provider>
+    );
+  }
+);
+
+Stepper.displayName = 'Stepper';

package/registry/components/Stepper/Stepper.types.ts

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type StepperOrientation = 'vertical' | 'horizontal';
+export type StepperSize = 'md' | 'sm';
+export type StepStatus = 'default' | 'active' | 'completed' | 'disabled' | 'error';
+
+export interface StepperProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: StepperOrientation;
+  size?: StepperSize;
+}
+
+export interface StepperStepProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  status?: StepStatus;
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  children?: ReactNode;
+}
+
+export interface StepperStepInternalProps extends StepperStepProps {
+  _step?: number;
+  _isFirst?: boolean;
+  _isLast?: boolean;
+  _prevCompleted?: boolean;
+}

package/registry/components/Stepper/StepperContext.ts

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+import type { StepperOrientation, StepperSize } from './Stepper.types';
+
+export interface StepperContextValue {
+  orientation: StepperOrientation;
+  size: StepperSize;
+}
+
+export const StepperContext = createContext<StepperContextValue | null>(null);
+
+export function useStepper(): StepperContextValue {
+  const ctx = useContext(StepperContext);
+  if (!ctx) {
+    throw new Error('StepperStep must be used within a Stepper');
+  }
+  return ctx;
+}

package/registry/components/Stepper/StepperStep.module.css

@@ -0,0 +1,183 @@
+/* ── Step root ── */
+.step {
+  display: flex;
+}
+
+.vertical {
+  flex-direction: row;
+}
+
+.horizontal {
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+}
+
+/* ── Indicator column (vertical) ── */
+.indicatorCol {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* ── Indicator row (horizontal) ── */
+.indicatorRow {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+}
+
+/* ── Indicator circle ── */
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  font-weight: var(--st-font-weight-semibold);
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+.indicator.md {
+  width: 32px;
+  height: 32px;
+  font-size: var(--st-font-size-sm);
+}
+
+.indicator.sm {
+  width: 24px;
+  height: 24px;
+  font-size: var(--st-font-size-xs);
+}
+
+/* ── Indicator status ── */
+.indicatorDefault {
+  background: transparent;
+  border: 2px solid var(--st-color-border-strong);
+  color: var(--st-color-muted);
+}
+
+.indicatorActive {
+  background: var(--st-color-primary);
+  border: 2px solid var(--st-color-primary);
+  color: var(--st-color-primary-foreground);
+}
+
+.indicatorCompleted {
+  background: var(--st-color-success);
+  border: 2px solid var(--st-color-success);
+  color: var(--st-color-success-foreground);
+}
+
+.indicatorDisabled {
+  background: transparent;
+  border: 2px solid var(--st-color-border);
+  color: var(--st-color-muted);
+  opacity: 0.5;
+}
+
+.indicatorError {
+  background: var(--st-color-error);
+  border: 2px solid var(--st-color-error);
+  color: var(--st-color-error-foreground);
+}
+
+/* ── Connector lines ── */
+.connector {
+  background: var(--st-color-border);
+  transition: background-color 150ms ease;
+}
+
+.connectorCompleted {
+  background: var(--st-color-success);
+}
+
+.connectorHidden {
+  visibility: hidden;
+}
+
+/* Vertical connector (below indicator) */
+.connectorVertical {
+  width: 2px;
+  flex: 1;
+  min-height: var(--st-space-3);
+}
+
+/* Horizontal connector (before/after indicator) */
+.connectorHorizontal {
+  height: 2px;
+  flex: 1;
+}
+
+/* ── Body ── */
+.body {
+  display: flex;
+  flex-direction: column;
+}
+
+.bodyVertical {
+  flex: 1;
+  padding-bottom: var(--st-space-4);
+}
+
+.bodyVertical.md {
+  padding-left: var(--st-space-3);
+}
+
+.bodyVertical.sm {
+  padding-left: var(--st-space-2);
+}
+
+.bodyHorizontal {
+  align-items: center;
+  text-align: center;
+  padding-top: var(--st-space-2);
+}
+
+/* ── Title ── */
+.title {
+  font-weight: var(--st-font-weight-semibold);
+  color: var(--st-color-foreground);
+  line-height: 1.4;
+}
+
+.title.md {
+  font-size: var(--st-font-size-sm);
+}
+
+.title.sm {
+  font-size: var(--st-font-size-xs);
+}
+
+.titleError {
+  color: var(--st-color-error);
+}
+
+.titleDisabled {
+  opacity: 0.5;
+}
+
+/* ── Description ── */
+.description {
+  color: var(--st-color-muted);
+  line-height: 1.4;
+  font-size: var(--st-font-size-xs);
+}
+
+.descriptionDisabled {
+  opacity: 0.5;
+}
+
+/* ── Content slot ── */
+.content {
+  margin-top: var(--st-space-2);
+}
+
+/* ── Disabled step root ── */
+.disabled {
+  cursor: not-allowed;
+}

package/registry/components/Stepper/StepperStep.tsx

@@ -0,0 +1,204 @@
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn';
+import { useStepper } from './StepperContext';
+import type { StepperStepInternalProps } from './Stepper.types';
+import styles from './StepperStep.module.css';
+
+const CheckIcon = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M11.5 3.5L5.5 10L2.5 7"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+const XIcon = () => (
+  <svg
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export const StepperStep = forwardRef<HTMLDivElement, StepperStepInternalProps>(
+  (
+    {
+      status = 'default',
+      title,
+      description,
+      icon,
+      children,
+      className,
+      _step = 1,
+      _isFirst = true,
+      _isLast = false,
+      _prevCompleted = false,
+      ...rest
+    },
+    ref
+  ) => {
+    const { orientation, size } = useStepper();
+    const isVertical = orientation === 'vertical';
+
+    const indicatorStatusClass =
+      status === 'active'
+        ? styles.indicatorActive
+        : status === 'completed'
+          ? styles.indicatorCompleted
+          : status === 'disabled'
+            ? styles.indicatorDisabled
+            : status === 'error'
+              ? styles.indicatorError
+              : styles.indicatorDefault;
+
+    const indicatorContent =
+      status === 'completed' ? (
+        <CheckIcon />
+      ) : status === 'error' ? (
+        <XIcon />
+      ) : icon ? (
+        icon
+      ) : (
+        _step
+      );
+
+    const indicator = (
+      <div className={cn(styles.indicator, styles[size], indicatorStatusClass)}>
+        {indicatorContent}
+      </div>
+    );
+
+    const titleEl = (
+      <div
+        className={cn(
+          styles.title,
+          styles[size],
+          status === 'error' && styles.titleError,
+          status === 'disabled' && styles.titleDisabled
+        )}
+      >
+        {title}
+      </div>
+    );
+
+    const descriptionEl = description ? (
+      <div
+        className={cn(
+          styles.description,
+          status === 'disabled' && styles.descriptionDisabled
+        )}
+      >
+        {description}
+      </div>
+    ) : null;
+
+    const contentEl = children ? (
+      <div className={styles.content}>{children}</div>
+    ) : null;
+
+    if (isVertical) {
+      const connectorVertical = (
+        <div
+          className={cn(
+            styles.connector,
+            styles.connectorVertical,
+            status === 'completed' && styles.connectorCompleted,
+            _isLast && styles.connectorHidden
+          )}
+        />
+      );
+
+      return (
+        <div
+          ref={ref}
+          className={cn(
+            styles.step,
+            styles.vertical,
+            status === 'disabled' && styles.disabled,
+            className
+          )}
+          {...rest}
+        >
+          <div className={styles.indicatorCol}>
+            {indicator}
+            {connectorVertical}
+          </div>
+          <div className={cn(styles.body, styles.bodyVertical, styles[size])}>
+            {titleEl}
+            {descriptionEl}
+            {contentEl}
+          </div>
+        </div>
+      );
+    }
+
+    // Horizontal
+    const connectorBefore = (
+      <div
+        className={cn(
+          styles.connector,
+          styles.connectorHorizontal,
+          _prevCompleted && styles.connectorCompleted,
+          _isFirst && styles.connectorHidden
+        )}
+      />
+    );
+
+    const connectorAfter = (
+      <div
+        className={cn(
+          styles.connector,
+          styles.connectorHorizontal,
+          status === 'completed' && styles.connectorCompleted,
+          _isLast && styles.connectorHidden
+        )}
+      />
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          styles.step,
+          styles.horizontal,
+          status === 'disabled' && styles.disabled,
+          className
+        )}
+        {...rest}
+      >
+        <div className={styles.indicatorRow}>
+          {connectorBefore}
+          {indicator}
+          {connectorAfter}
+        </div>
+        <div className={cn(styles.body, styles.bodyHorizontal)}>
+          {titleEl}
+          {descriptionEl}
+          {contentEl}
+        </div>
+      </div>
+    );
+  }
+);
+
+StepperStep.displayName = 'StepperStep';

package/registry/components/Stepper/index.ts

@@ -0,0 +1,9 @@
+export { Stepper } from './Stepper';
+export { StepperStep } from './StepperStep';
+export type {
+  StepperProps,
+  StepperOrientation,
+  StepperSize,
+  StepperStepProps,
+  StepStatus,
+} from './Stepper.types';