@stasho/ds 0.1.0

package/src/components/status-dot/status-dot.tsx

@@ -0,0 +1,53 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const statusDotVariants = cva("inline-block rounded-full shrink-0", {
+  variants: {
+    status: {
+      healthy: "bg-success-500 animate-pulse motion-reduce:animate-none",
+      degraded: "bg-warning-500",
+      error: "bg-error-500",
+      offline: "bg-neutral-400",
+      unknown: "bg-neutral-300",
+    },
+    size: {
+      sm: "size-2",
+      md: "size-3",
+    },
+  },
+  defaultVariants: {
+    status: "unknown",
+    size: "md",
+  },
+});
+
+type StatusDotProps = HTMLAttributes<HTMLSpanElement> &
+  VariantProps<typeof statusDotVariants>;
+
+const statusLabels: Record<NonNullable<StatusDotProps["status"]>, string> = {
+  healthy: "Healthy",
+  degraded: "Degraded",
+  error: "Error",
+  offline: "Offline",
+  unknown: "Unknown",
+};
+
+const StatusDot = forwardRef<HTMLSpanElement, StatusDotProps>(
+  ({ status, size, className, ...rest }, ref) => {
+    const resolvedStatus = status ?? "unknown";
+    return (
+      <span
+        ref={ref}
+        role="status"
+        aria-label={statusLabels[resolvedStatus]}
+        className={cn(statusDotVariants({ status, size }), className)}
+        {...rest}
+      />
+    );
+  },
+);
+
+StatusDot.displayName = "StatusDot";
+
+export { StatusDot, statusDotVariants, type StatusDotProps };

package/src/components/stepper/stepper.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  type HTMLAttributes,
+} from "react";
+import { cn } from "@ac/lib/cn";
+
+/* ── Stepper context (orientation) ─────────────── */
+
+type StepperContextValue = { orientation: "horizontal" | "vertical" };
+
+const StepperContext = createContext<StepperContextValue>({
+  orientation: "horizontal",
+});
+
+function useStepperContext(): StepperContextValue {
+  return useContext(StepperContext);
+}
+
+/* ── StepperItem context (state propagation) ───── */
+
+type StepperItemState = "completed" | "active" | "inactive";
+
+type StepperItemContextValue = { state: StepperItemState };
+
+const StepperItemContext = createContext<StepperItemContextValue>({
+  state: "inactive",
+});
+
+function useStepperItemContext(): StepperItemContextValue {
+  return useContext(StepperItemContext);
+}
+
+/* ── Stepper (nav root) ────────────────────────── */
+
+type StepperProps = HTMLAttributes<HTMLElement> & {
+  /** Layout direction. Default "horizontal". */
+  orientation?: "horizontal" | "vertical";
+};
+
+const Stepper = forwardRef<HTMLElement, StepperProps>(
+  ({ orientation = "horizontal", className, ...rest }, ref) => (
+    <StepperContext.Provider value={{ orientation }}>
+      <nav
+        ref={ref}
+        data-orientation={orientation}
+        className={cn(className)}
+        {...rest}
+      />
+    </StepperContext.Provider>
+  ),
+);
+
+Stepper.displayName = "Stepper";
+
+/* ── StepperList (ol container) ────────────────── */
+
+type StepperListProps = HTMLAttributes<HTMLOListElement>;
+
+const StepperList = forwardRef<HTMLOListElement, StepperListProps>(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useStepperContext();
+    return (
+      <ol
+        ref={ref}
+        className={cn(
+          "flex gap-2",
+          orientation === "horizontal" ? "items-center" : "flex-col",
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+
+StepperList.displayName = "StepperList";
+
+/* ── StepperItem (li, carries state) ───────────── */
+
+type StepperItemProps = HTMLAttributes<HTMLLIElement> & {
+  /** Step state. Propagated as data-state to children. */
+  state?: StepperItemState;
+};
+
+const StepperItem = forwardRef<HTMLLIElement, StepperItemProps>(
+  ({ state = "inactive", className, ...rest }, ref) => (
+    <StepperItemContext.Provider value={{ state }}>
+      <li
+        ref={ref}
+        data-state={state}
+        aria-current={state === "active" ? "step" : undefined}
+        className={cn("flex items-center gap-2", className)}
+        {...rest}
+      />
+    </StepperItemContext.Provider>
+  ),
+);
+
+StepperItem.displayName = "StepperItem";
+
+/* ── StepperIndicator (div slot) ───────────────── */
+
+type StepperIndicatorProps = HTMLAttributes<HTMLDivElement>;
+
+const StepperIndicator = forwardRef<HTMLDivElement, StepperIndicatorProps>(
+  ({ className, children, ...rest }, ref) => {
+    const { state } = useStepperItemContext();
+    return (
+      <div
+        ref={ref}
+        data-state={state}
+        className={cn(
+          "relative flex size-8 items-center justify-center rounded-full",
+          "font-heading text-sm font-bold",
+          "border-2 border-edge text-muted-foreground",
+          "data-[state=active]:border-primary-500 data-[state=active]:bg-primary-500 data-[state=active]:text-white",
+          "data-[state=completed]:border-primary-500 data-[state=completed]:bg-primary-500 data-[state=completed]:text-white",
+          "transition-all duration-300 motion-reduce:transition-colors",
+          className,
+        )}
+        {...rest}
+      >
+        {state === "active" && (
+          <>
+            <span className="absolute -inset-1 rounded-full border-2 border-primary-400/35 animate-[ring-wave_2.4s_ease-in-out_infinite] motion-reduce:animate-none" />
+            <span className="absolute -inset-1.5 rounded-full border border-primary-300/25 animate-[ring-wave_2.4s_ease-in-out_-1.2s_infinite] motion-reduce:animate-none" />
+          </>
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+StepperIndicator.displayName = "StepperIndicator";
+
+/* ── StepperLabel (span) ───────────────────────── */
+
+type StepperLabelProps = HTMLAttributes<HTMLSpanElement>;
+
+const StepperLabel = forwardRef<HTMLSpanElement, StepperLabelProps>(
+  ({ className, ...rest }, ref) => {
+    const { state } = useStepperItemContext();
+    return (
+      <span
+        ref={ref}
+        data-state={state}
+        className={cn(
+          "block text-sm text-muted-foreground transition-colors",
+          "data-[state=active]:text-foreground data-[state=active]:font-medium",
+          "data-[state=completed]:text-foreground",
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+
+StepperLabel.displayName = "StepperLabel";
+
+/* ── StepperDescription (span) ─────────────────── */
+
+type StepperDescriptionProps = HTMLAttributes<HTMLSpanElement>;
+
+const StepperDescription = forwardRef<
+  HTMLSpanElement,
+  StepperDescriptionProps
+>(({ className, ...rest }, ref) => {
+  const { state } = useStepperItemContext();
+  return (
+    <span
+      ref={ref}
+      data-state={state}
+      className={cn("block text-xs text-muted-foreground mt-0.5", className)}
+      {...rest}
+    />
+  );
+});
+
+StepperDescription.displayName = "StepperDescription";
+
+/* ── StepperConnector (li, visual line) ────────── */
+
+type StepperConnectorProps = HTMLAttributes<HTMLLIElement>;
+
+const StepperConnector = forwardRef<HTMLLIElement, StepperConnectorProps>(
+  ({ className, ...rest }, ref) => {
+    const { orientation } = useStepperContext();
+    return (
+      <li
+        ref={ref}
+        aria-hidden="true"
+        data-orientation={orientation}
+        className={cn(
+          "relative overflow-hidden rounded-full bg-edge/50 flex-1",
+          orientation === "horizontal" ? "h-1" : "w-1",
+          className,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+
+StepperConnector.displayName = "StepperConnector";
+
+/* ── Exports ───────────────────────────────────── */
+
+export {
+  Stepper,
+  StepperConnector,
+  StepperDescription,
+  StepperIndicator,
+  StepperItem,
+  StepperLabel,
+  StepperList,
+  type StepperConnectorProps,
+  type StepperDescriptionProps,
+  type StepperIndicatorProps,
+  type StepperItemProps,
+  type StepperLabelProps,
+  type StepperListProps,
+  type StepperProps,
+};

package/src/components/switch/switch.tsx

@@ -0,0 +1,74 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const switchVariants = cva(
+  [
+    "peer inline-flex shrink-0 cursor-pointer",
+    "items-center rounded-full",
+    "border-3 border-edge bg-muted",
+    "hover:border-edge-hover",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "data-[state=checked]:bg-primary data-[state=checked]:border-primary",
+    "transition-colors",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "h-5 w-9",
+        sm: "h-[26px] w-12",
+        md: "h-8 w-[60px]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+const thumbVariants = cva(
+  [
+    "pointer-events-none block rounded-full bg-white",
+    "shadow-sm transition-transform motion-reduce:transition-none",
+    "data-[state=unchecked]:translate-x-0.5",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        xs: "size-3 data-[state=checked]:translate-x-[18px]",
+        sm: "size-[18px] data-[state=checked]:translate-x-[24px]",
+        md: "size-6 data-[state=checked]:translate-x-[30px]",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type SwitchProps = Omit<
+  ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>,
+  "size"
+> &
+  VariantProps<typeof switchVariants>;
+
+const Switch = forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ size, className, ...rest }, ref) => {
+    return (
+      <SwitchPrimitive.Root
+        ref={ref}
+        className={cn(switchVariants({ size }), className)}
+        {...rest}
+      >
+        <SwitchPrimitive.Thumb className={thumbVariants({ size })} />
+      </SwitchPrimitive.Root>
+    );
+  },
+);
+
+Switch.displayName = "Switch";
+
+export { Switch, switchVariants, type SwitchProps };

package/src/components/table/table.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import { useState, type KeyboardEvent, type ReactNode } from "react";
+import { CaretUp } from "@phosphor-icons/react";
+import { cn } from "@ac/lib/cn";
+
+type SortDirection = "asc" | "desc";
+
+export type Column<T> = {
+  header: string;
+  accessor: (row: T) => ReactNode;
+  sortable?: boolean;
+  sortValue?: (row: T) => string | number;
+  width?: string;
+  align?: "left" | "center" | "right";
+};
+
+type TableProps<T> = {
+  columns: Column<T>[];
+  data: T[];
+  keyExtractor: (row: T) => string;
+  onRowClick?: (row: T) => void;
+  activeKey?: string | undefined;
+  emptyState?: ReactNode;
+  className?: string;
+  /**
+   * Header of the column to indicate as sorted.
+   * When provided alongside `onSortChange`, the table operates in
+   * controlled mode: it does not sort `data` internally and assumes
+   * the parent passes pre-sorted rows. Use this when sorting must
+   * apply to a larger dataset than the rows currently rendered
+   * (e.g. when paginating outside the table).
+   */
+  sortColumn?: string;
+  sortDirection?: SortDirection;
+  onSortChange?: (column: string, direction: SortDirection) => void;
+};
+
+function SortIcon({
+  direction,
+}: {
+  direction: SortDirection | null;
+}) {
+  return (
+    <CaretUp
+      weight="bold"
+      className={cn(
+        "inline size-3 transition-transform motion-reduce:transition-none",
+        direction === "desc" && "rotate-180",
+        direction === null && "opacity-0",
+      )}
+      aria-hidden="true"
+    />
+  );
+}
+
+function ariaSortValue(
+  colIndex: number,
+  sortCol: number | null,
+  sortDir: SortDirection,
+): "ascending" | "descending" | "none" {
+  if (colIndex !== sortCol) return "none";
+  return sortDir === "asc" ? "ascending" : "descending";
+}
+
+export function Table<T>({
+  columns,
+  data,
+  keyExtractor,
+  onRowClick,
+  activeKey,
+  emptyState,
+  className,
+  sortColumn,
+  sortDirection,
+  onSortChange,
+}: TableProps<T>) {
+  const isControlled = onSortChange != null;
+
+  const [internalSortCol, setInternalSortCol] = useState<number | null>(
+    null,
+  );
+  const [internalSortDir, setInternalSortDir] =
+    useState<SortDirection>("asc");
+
+  const controlledSortCol =
+    sortColumn != null
+      ? columns.findIndex((c) => c.header === sortColumn)
+      : -1;
+  const activeSortCol = isControlled
+    ? controlledSortCol >= 0
+      ? controlledSortCol
+      : null
+    : internalSortCol;
+  const activeSortDir = isControlled
+    ? (sortDirection ?? "asc")
+    : internalSortDir;
+
+  function handleSort(colIndex: number) {
+    const col = columns[colIndex];
+    if (!col?.sortable) return;
+    if (isControlled) {
+      const isCurrent = activeSortCol === colIndex;
+      const nextDir: SortDirection = isCurrent
+        ? activeSortDir === "asc"
+          ? "desc"
+          : "asc"
+        : "asc";
+      onSortChange(col.header, nextDir);
+    } else if (internalSortCol === colIndex) {
+      setInternalSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setInternalSortCol(colIndex);
+      setInternalSortDir("asc");
+    }
+  }
+
+  function handleHeaderKeyDown(
+    e: KeyboardEvent,
+    colIndex: number,
+  ) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleSort(colIndex);
+    }
+  }
+
+  function handleRowKeyDown(e: KeyboardEvent, row: T) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onRowClick?.(row);
+    }
+  }
+
+  let sortedData = data;
+  if (!isControlled) {
+    const activeCol =
+      activeSortCol !== null ? columns[activeSortCol] : undefined;
+    if (activeCol?.sortValue) {
+      const getValue = activeCol.sortValue;
+      const dir = activeSortDir === "asc" ? 1 : -1;
+      sortedData = [...data].sort((a, b) => {
+        const aVal = getValue(a);
+        const bVal = getValue(b);
+        if (typeof aVal === "number" && typeof bVal === "number") {
+          return (aVal - bVal) * dir;
+        }
+        return String(aVal).localeCompare(String(bVal)) * dir;
+      });
+    }
+  }
+
+  const alignClass = {
+    left: "text-left",
+    center: "text-center",
+    right: "text-right",
+  } as const;
+
+  return (
+    <div className={cn("w-full overflow-x-auto", className)}>
+      <table className="w-full border-collapse">
+        <thead>
+          <tr className="bg-muted/50">
+            {columns.map((col, i) => (
+              <th
+                key={col.header}
+                className={cn(
+                  "px-4 py-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground",
+                  alignClass[col.align ?? "left"],
+                  col.sortable && "cursor-pointer select-none",
+                )}
+                style={col.width ? { width: col.width } : undefined}
+                tabIndex={col.sortable ? 0 : undefined}
+                aria-sort={
+                  col.sortable
+                    ? ariaSortValue(i, activeSortCol, activeSortDir)
+                    : undefined
+                }
+                onClick={col.sortable ? () => handleSort(i) : undefined}
+                onKeyDown={
+                  col.sortable
+                    ? (e) => handleHeaderKeyDown(e, i)
+                    : undefined
+                }
+              >
+                {col.sortable ? (
+                  <span
+                    className={cn(
+                      "inline-flex items-center gap-1",
+                      col.align === "right" && "flex-row-reverse",
+                    )}
+                  >
+                    {col.header}
+                    <SortIcon
+                      direction={
+                        activeSortCol === i ? activeSortDir : null
+                      }
+                    />
+                  </span>
+                ) : (
+                  col.header
+                )}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {sortedData.length === 0 && emptyState ? (
+            <tr>
+              <td
+                colSpan={columns.length}
+                className="px-4 py-8 text-center text-sm text-muted-foreground"
+              >
+                {emptyState}
+              </td>
+            </tr>
+          ) : (
+            sortedData.map((row) => (
+              <tr
+                key={keyExtractor(row)}
+                className={cn(
+                  "border-b border-edge transition-all",
+                  activeKey === keyExtractor(row)
+                    ? "bg-primary-600/10 shadow-[inset_3px_0_0_var(--color-primary-500)]"
+                    : "even:bg-muted/30",
+                  "hover:bg-muted/50",
+                  onRowClick &&
+                    "cursor-pointer hover:shadow-[inset_3px_0_0_var(--color-primary-500)]",
+                )}
+                aria-current={
+                  activeKey === keyExtractor(row) ? "true" : undefined
+                }
+                style={{ transitionDuration: "var(--duration-fast)" }}
+                tabIndex={onRowClick ? 0 : undefined}
+                onClick={onRowClick ? () => onRowClick(row) : undefined}
+                onKeyDown={
+                  onRowClick
+                    ? (e) => handleRowKeyDown(e, row)
+                    : undefined
+                }
+              >
+                {columns.map((col) => (
+                  <td
+                    key={col.header}
+                    className={cn(
+                      "px-4 py-3 text-sm",
+                      alignClass[col.align ?? "left"],
+                    )}
+                  >
+                    {col.accessor(row)}
+                  </td>
+                ))}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}