aplance-ui 1.0.1

package/registry/components/ui/loader/loader.tsx

@@ -0,0 +1,102 @@
+import clsx from "clsx";
+import type { CSSProperties } from "react";
+import s from "./loader.module.css";
+
+export type LoaderVariant = "spinner" | "dots" | "skeleton";
+export type LoaderMode = "inline" | "page" | "overlay";
+export type LoaderSize = "sm" | "md" | "lg" | number;
+
+export type LoaderProps = {
+  variant?: LoaderVariant;
+  mode?: LoaderMode;
+  size?: LoaderSize;
+  color?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+
+const SIZE_MAP: Record<Exclude<LoaderSize, number>, string> = {
+  sm: "1rem",
+  md: "1.5rem",
+  lg: "2.5rem",
+};
+
+const getSize = (size: LoaderSize): string => {
+  if (typeof size === "number") return `${size}rem`;
+  return SIZE_MAP[size];
+};
+
+export const Loader = ({
+  variant = "spinner",
+  mode = "inline",
+  size = "md",
+  color = "var(--color-primary)",
+  className,
+  style,
+}: LoaderProps) => {
+  const indicatorStyle: CSSProperties = {
+    "--loader-size": getSize(size),
+    "--loader-color": color,
+  } as CSSProperties;
+
+  const renderIndicator = (indicatorClassName?: string, indicatorStyleOverride?: CSSProperties) => {
+    if (variant === "skeleton") {
+      return (
+        <div
+          className={clsx(s.skeleton_shape, indicatorClassName)}
+          style={indicatorStyleOverride}
+          role="status"
+          aria-live="polite"
+          aria-label="Loading"
+        />
+      );
+    }
+
+    if (variant === "dots") {
+      return (
+        <div
+          className={clsx(s.dots_loader, indicatorClassName)}
+          style={indicatorStyleOverride}
+          role="status"
+          aria-live="polite"
+          aria-label="Loading"
+        >
+          <span />
+          <span />
+          <span />
+        </div>
+      );
+    }
+
+    return (
+      <div
+        className={clsx(s.spinner_loader, indicatorClassName)}
+        style={indicatorStyleOverride}
+        role="status"
+        aria-live="polite"
+        aria-label="Loading"
+      >
+        <svg className={s.loading_spinner} viewBox="0 0 50 50">
+          <circle className={s.loading_path} cx="25" cy="25" r="20" fill="none" />
+        </svg>
+      </div>
+    );
+  };
+
+  if (mode === "inline") {
+    return renderIndicator(
+      className,
+      variant === "skeleton" ? style : { ...indicatorStyle, ...style },
+    );
+  }
+
+  return (
+    <div
+      className={clsx(mode === "overlay" ? s.overlay_loader : s.page_loader, className)}
+      style={style}
+      aria-busy="true"
+    >
+      {renderIndicator(undefined, variant === "skeleton" ? undefined : indicatorStyle)}
+    </div>
+  );
+};

package/registry/components/ui/stepper/stepper.module.css

@@ -0,0 +1,294 @@
+/* --------------------------------------------------------------------------
+   Stepper – root + token contract
+-------------------------------------------------------------------------- */
+.root {
+  --stepper-gap-h: var(--spacing-3);
+  --stepper-gap-v: var(--spacing-8);
+  --stepper-indicator-size: var(--spacing-10);
+  --stepper-indicator-font-size: var(--font-size-sm);
+  --stepper-line-thickness: var(--border-2);
+  --stepper-line-inset: var(--spacing-2);
+
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+
+  &.root_lg {
+    --stepper-indicator-size: var(--spacing-11);
+    --stepper-indicator-font-size: var(--font-size-base);
+    --stepper-gap-h: var(--spacing-4);
+    --stepper-gap-v: var(--spacing-9);
+    --stepper-line-inset: var(--spacing-3);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   List
+-------------------------------------------------------------------------- */
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  width: 100%;
+
+  &.list_horizontal {
+    flex-direction: row;
+    align-items: stretch;
+    gap: var(--stepper-gap-h);
+  }
+
+  &.list_vertical {
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--stepper-gap-v);
+  }
+
+  /* style2 horizontal items must touch so the connector spans cleanly */
+  &.list_style2.list_horizontal {
+    gap: 0;
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Step (list item) – holds the connector pseudo-element for style2
+-------------------------------------------------------------------------- */
+.step {
+  --stepper-line: var(--color-border);
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+
+  &.step_vertical {
+    flex: 0 0 auto;
+  }
+
+  &[data-disabled] {
+    opacity: 0.55;
+  }
+
+  /* Filled accent for both active and complete */
+  &[data-status="active"],
+  &[data-status="complete"] {
+    --stepper-line: var(--color-primary);
+
+    .indicator {
+      background: var(--color-primary);
+      border-color: var(--color-primary);
+      color: var(--color-primary-foreground);
+    }
+  }
+
+  /* Active focus ring - only on the line variant's dot, since
+     style1 surfaces the same ring on the surrounding card. */
+  &[data-status="active"] .indicator_style2 {
+    box-shadow: var(--shadow-ring);
+  }
+
+  &[data-status="error"] {
+    --stepper-line: var(--color-error-foreground);
+
+    .indicator {
+      background: var(--color-error-subtle);
+      border-color: color-mix(
+        in oklch,
+        var(--color-error-foreground) 35%,
+        var(--color-border)
+      );
+      color: var(--color-error-foreground);
+    }
+
+    .label {
+      color: var(--color-error-foreground);
+    }
+  }
+
+  &[data-status="upcoming"] .label {
+    color: var(--color-muted-foreground);
+    font-weight: var(--font-weight-normal);
+  }
+}
+
+/* style2 connector – horizontal */
+.step_style2.step_horizontal:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  top: calc(var(--stepper-indicator-size) / 2);
+  left: calc(50% + var(--stepper-indicator-size) / 2 + var(--stepper-line-inset));
+  width: calc(
+    100% - var(--stepper-indicator-size) - var(--stepper-line-inset) * 2
+  );
+  height: var(--stepper-line-thickness);
+  background: var(--stepper-line);
+  border-radius: var(--radius-full);
+  transform: translateY(-50%);
+  transition: background var(--transition-base);
+  z-index: 0;
+}
+
+/* style2 connector – vertical */
+.step_style2.step_vertical:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--stepper-indicator-size) / 2);
+  top: calc(var(--stepper-indicator-size) + var(--stepper-line-inset));
+  bottom: calc(-1 * var(--stepper-gap-v) + var(--stepper-line-inset));
+  width: var(--stepper-line-thickness);
+  background: var(--stepper-line);
+  border-radius: var(--radius-full);
+  transform: translateX(-50%);
+  transition: background var(--transition-base);
+  z-index: 0;
+}
+
+/* --------------------------------------------------------------------------
+   Step button (shared base)
+-------------------------------------------------------------------------- */
+.button {
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  text-align: left;
+  font-family: var(--font-family-1);
+  color: var(--color-foreground);
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  transition:
+    background var(--transition-base),
+    border-color var(--transition-base),
+    color var(--transition-base),
+    box-shadow var(--transition-base);
+
+  &.button_interactive {
+    cursor: pointer;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    box-shadow: var(--shadow-ring);
+  }
+
+  /* Style1 - boxed/card */
+  &.button_style1 {
+    padding: var(--spacing-4) var(--spacing-5);
+    border-radius: var(--radius-md);
+    border: var(--border-1) solid var(--color-border);
+    background: var(--color-background);
+
+    &.button_interactive:hover:not(:disabled):not(.button_active) {
+      background: var(--color-muted);
+    }
+
+    &.button_active {
+      background: var(--color-muted);
+      border-color: var(--color-ring);
+      box-shadow: var(--shadow-ring);
+    }
+  }
+
+  /* Style2 - line/dot */
+  &.button_style2 {
+    padding: var(--spacing-1) var(--spacing-2);
+    border-radius: var(--radius-sm);
+
+    &.button_horizontal {
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--spacing-3);
+      padding-block: 0;
+    }
+
+    &.button_vertical {
+      align-items: flex-start;
+      padding: 0;
+    }
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Indicator – shared shape + status colors
+-------------------------------------------------------------------------- */
+.indicator {
+  width: var(--stepper-indicator-size);
+  height: var(--stepper-indicator-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  border: var(--border-1) solid var(--color-border);
+  background: var(--color-muted);
+  color: var(--color-muted-foreground);
+  font-size: var(--stepper-indicator-font-size);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+  flex-shrink: 0;
+  transition:
+    background var(--transition-base),
+    border-color var(--transition-base),
+    color var(--transition-base),
+    box-shadow var(--transition-base);
+
+  &.indicator_style2 {
+    background: var(--color-background);
+  }
+}
+
+/* --------------------------------------------------------------------------
+   Step text (label + description)
+-------------------------------------------------------------------------- */
+.text {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+.button_style2.button_horizontal .text {
+  align-items: center;
+}
+
+.label {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-foreground);
+  overflow-wrap: anywhere;
+}
+
+.description {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-sm);
+  color: var(--color-muted-foreground);
+  overflow-wrap: anywhere;
+}
+
+/* --------------------------------------------------------------------------
+   Panel
+-------------------------------------------------------------------------- */
+.panel {
+  outline: none;
+  animation: panel_fade_in var(--transition-base) ease both;
+}
+
+@keyframes panel_fade_in {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/registry/components/ui/stepper/stepper.tsx

@@ -0,0 +1,197 @@
+import {
+  useId,
+  useState,
+  type CSSProperties,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
+import clsx from "clsx";
+import { IconAlertTriangle, IconCheck } from "@tabler/icons-react";
+import s from "./stepper.module.css";
+
+export const variants = ["style1", "style2"] as const;
+export const sizes = ["sm", "lg"] as const;
+export const orientations = ["horizontal", "vertical"] as const;
+export const statuses = ["upcoming", "active", "complete", "error"] as const;
+
+export type StepperVariant = (typeof variants)[number];
+export type StepperSize = (typeof sizes)[number];
+export type StepperOrientation = (typeof orientations)[number];
+export type StepStatus = (typeof statuses)[number];
+
+export type StepItem = {
+  id: string;
+  label: ReactNode;
+  description?: ReactNode;
+  content?: ReactNode;
+  disabled?: boolean;
+  status?: StepStatus;
+  indicator?: ReactNode;
+};
+
+export type StepperProps = {
+  steps: StepItem[];
+  defaultStep?: string;
+  activeStep?: string;
+  onStepChange?: (id: string) => void;
+  variant?: StepperVariant;
+  size?: StepperSize;
+  orientation?: StepperOrientation;
+  allowStepClick?: boolean;
+  verticalGap?: string;
+  ariaLabel?: string;
+  className?: string;
+} & Omit<ComponentProps<"div">, "onChange">;
+
+const iconSizes: Record<StepperSize, number> = {
+  sm: 14,
+  lg: 18,
+};
+
+const resolveStatus = (
+  step: StepItem,
+  index: number,
+  activeIndex: number,
+): StepStatus => {
+  if (step.status) return step.status;
+  if (index < activeIndex) return "complete";
+  if (index === activeIndex) return "active";
+  return "upcoming";
+};
+
+const renderIndicator = (
+  step: StepItem,
+  status: StepStatus,
+  index: number,
+  size: StepperSize,
+): ReactNode => {
+  if (step.indicator) return step.indicator;
+  if (status === "complete") return <IconCheck size={iconSizes[size]} />;
+  if (status === "error") return <IconAlertTriangle size={iconSizes[size]} />;
+  return index + 1;
+};
+
+export const Stepper = ({
+  steps,
+  defaultStep,
+  activeStep: controlledActive,
+  onStepChange,
+  variant = "style1",
+  size = "sm",
+  orientation = "horizontal",
+  allowStepClick = true,
+  verticalGap,
+  ariaLabel = "Progress",
+  className,
+  style,
+  ...rest
+}: StepperProps) => {
+  const uid = useId();
+  const isControlled = controlledActive !== undefined;
+  const [internalActive, setInternalActive] = useState(
+    () =>
+      defaultStep ??
+      steps.find((step) => !step.disabled)?.id ??
+      steps[0]?.id ??
+      "",
+  );
+
+  if (steps.length === 0) return null;
+
+  const activeId = isControlled ? controlledActive : internalActive;
+  const foundIndex = steps.findIndex((step) => step.id === activeId);
+  const activeIndex = foundIndex >= 0 ? foundIndex : 0;
+  const activeStepDomId = `${uid}-step-${activeIndex}`;
+  const activePanelDomId = `${uid}-panel-${activeIndex}`;
+  const activeContent = steps[activeIndex]?.content;
+
+  const handleStepClick = (id: string, disabled?: boolean) => {
+    if (!allowStepClick || disabled) return;
+    if (!isControlled) setInternalActive(id);
+    onStepChange?.(id);
+  };
+
+  const rootStyle: CSSProperties | undefined =
+    verticalGap !== undefined
+      ? ({ ...style, "--stepper-gap-v": verticalGap } as CSSProperties)
+      : style;
+
+  return (
+    <div
+      className={clsx(s.root, s[`root_${size}`], className)}
+      style={rootStyle}
+      {...rest}
+    >
+      <ol
+        className={clsx(s.list, s[`list_${variant}`], s[`list_${orientation}`])}
+        aria-label={ariaLabel}
+        aria-orientation={orientation}
+      >
+        {steps.map((step, index) => {
+          const status = resolveStatus(step, index, activeIndex);
+          const isActive = index === activeIndex;
+          const isDisabled = Boolean(step.disabled);
+          const stepDomId = `${uid}-step-${index}`;
+          const panelDomId = `${uid}-panel-${index}`;
+
+          return (
+            <li
+              key={step.id}
+              className={clsx(
+                s.step,
+                s[`step_${variant}`],
+                s[`step_${orientation}`],
+              )}
+              data-status={status}
+              data-disabled={isDisabled || undefined}
+            >
+              <button
+                type="button"
+                id={stepDomId}
+                aria-current={isActive ? "step" : undefined}
+                aria-controls={
+                  isActive && step.content !== undefined
+                    ? panelDomId
+                    : undefined
+                }
+                aria-disabled={isDisabled || !allowStepClick}
+                disabled={isDisabled}
+                tabIndex={allowStepClick ? undefined : -1}
+                onClick={() => handleStepClick(step.id, isDisabled)}
+                className={clsx(
+                  s.button,
+                  s[`button_${variant}`],
+                  s[`button_${orientation}`],
+                  isActive && s.button_active,
+                  allowStepClick && !isDisabled && s.button_interactive,
+                )}
+              >
+                <span className={clsx(s.indicator, s[`indicator_${variant}`])}>
+                  {renderIndicator(step, status, index, size)}
+                </span>
+                <span className={s.text}>
+                  <span className={s.label}>{step.label}</span>
+                  {step.description && (
+                    <span className={s.description}>{step.description}</span>
+                  )}
+                </span>
+              </button>
+            </li>
+          );
+        })}
+      </ol>
+
+      {activeContent !== undefined && (
+        <div
+          key={activeId}
+          id={activePanelDomId}
+          role="region"
+          aria-labelledby={activeStepDomId}
+          className={s.panel}
+        >
+          {activeContent}
+        </div>
+      )}
+    </div>
+  );
+};