@arolariu/components 0.5.0 → 1.0.0

package/src/components/ui/spinner.module.css

@@ -0,0 +1,25 @@
+.spinner {
+  width: 1rem;
+  height: 1rem;
+  color: var(--ac-foreground);
+  animation: spin 0.8s linear infinite;
+  transform-origin: center;
+}
+
+.track {
+  opacity: 0.2;
+}
+
+.indicator {
+  stroke-linecap: round;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/src/components/ui/spinner.tsx

@@ -1,18 +1,57 @@
-"use client";
+import * as React from "react";
 
 import {cn} from "@/lib/utilities";
-import {Loader2Icon} from "lucide-react";
-import * as React from "react";
+import styles from "./spinner.module.css";
 
-function Spinner({className, ...props}: React.ComponentProps<"svg">) {
-  return (
-    <Loader2Icon
+/**
+ * Props for the {@link Spinner} component.
+ */
+export type SpinnerProps = React.ComponentPropsWithoutRef<"svg">;
+
+/**
+ * Renders an animated loading indicator.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders an `<svg>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <Spinner aria-label='Loading data' />
+ * ```
+ *
+ * @see {@link SpinnerProps} for available props
+ */
+const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(
+  ({children, className, ...props}: Readonly<SpinnerProps>, ref): React.JSX.Element => (
+    <svg
+      ref={ref}
       role='status'
-      aria-label='Loading'
-      className={cn("size-4 animate-spin", className)}
-      {...props}
-    />
-  );
-}
+      aria-label={props["aria-label"] ?? "Loading"}
+      viewBox='0 0 24 24'
+      fill='none'
+      className={cn(styles.spinner, className)}
+      {...props}>
+      {children}
+      <circle
+        className={styles.track}
+        cx='12'
+        cy='12'
+        r='9'
+        stroke='currentColor'
+        strokeWidth='3'
+      />
+      <path
+        className={styles.indicator}
+        d='M21 12a9 9 0 0 0-9-9'
+        stroke='currentColor'
+        strokeWidth='3'
+      />
+    </svg>
+  ),
+);
+
+Spinner.displayName = "Spinner";
 
 export {Spinner};

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

@@ -0,0 +1,72 @@
+.stepper {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ac-space-2);
+}
+
+.vertical {
+  flex-direction: column;
+}
+
+.step {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--ac-space-2);
+}
+
+.indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid var(--ac-border);
+  border-radius: 50%;
+  font-size: var(--ac-text-sm);
+  font-weight: 600;
+  flex-shrink: 0;
+  transition: background-color var(--ac-transition-fast), border-color var(--ac-transition-fast),
+    color var(--ac-transition-fast);
+}
+
+.step[data-state="completed"] .indicator {
+  background-color: var(--ac-primary);
+  border-color: var(--ac-primary);
+  color: var(--ac-primary-foreground);
+}
+
+.step[data-state="active"] .indicator {
+  border-color: var(--ac-primary);
+  color: var(--ac-primary);
+}
+
+.step[data-state="upcoming"] .indicator {
+  color: var(--ac-muted-foreground);
+}
+
+.connector {
+  flex: 1;
+  min-width: var(--ac-space-4);
+  height: 2px;
+  background-color: var(--ac-border);
+}
+
+.step[data-state="completed"] .connector {
+  background-color: var(--ac-primary);
+}
+
+.vertical .connector {
+  width: 2px;
+  height: var(--ac-space-4);
+  min-width: unset;
+}
+
+.label {
+  font-size: var(--ac-text-sm);
+  color: var(--ac-foreground);
+}
+
+.step[data-state="upcoming"] .label {
+  color: var(--ac-muted-foreground);
+}

package/src/components/ui/stepper.tsx

@@ -0,0 +1,95 @@
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+import styles from "./stepper.module.css";
+
+/**
+ * Represents the configurable props for the {@link Stepper} component.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so step progress indicators can expose data
+ * attributes, testing hooks, and ARIA metadata while remaining layout-flexible.
+ */
+interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Labels for each step in the progress sequence.
+   */
+  steps: ReadonlyArray<string>;
+  /**
+   * Zero-based index of the currently active step.
+   */
+  activeStep: number;
+  /**
+   * Visual orientation of the stepper layout.
+   *
+   * @default "horizontal"
+   */
+  orientation?: "horizontal" | "vertical";
+}
+
+/**
+ * Displays a multi-step progress indicator for wizard-like workflows.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Renders a semantic list of steps and marks each item as completed, active, or upcoming
+ * based on the supplied zero-based active index. Use it to communicate progress across
+ * onboarding flows, checkout funnels, or multi-step forms.
+ *
+ * @example
+ * ```tsx
+ * <Stepper
+ *   steps={["Account", "Profile", "Review"]}
+ *   activeStep={1}
+ * />
+ * ```
+ *
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/progressbar/progressbar.html | WAI progress indicator guidance}
+ */
+const Stepper = React.forwardRef<HTMLDivElement, StepperProps>(
+  ({steps, activeStep, orientation = "horizontal", className, ...props}, ref) => (
+    <div
+      ref={ref}
+      role='list'
+      aria-label='Progress'
+      data-orientation={orientation}
+      className={cn(styles.stepper, orientation === "vertical" && styles.vertical, className)}
+      {...props}>
+      {steps.map((label, index) => {
+        let state: "completed" | "active" | "upcoming" = "upcoming";
+
+        if (index < activeStep) {
+          state = "completed";
+        } else if (index === activeStep) {
+          state = "active";
+        }
+
+        return (
+          <div
+            key={`${label}-${index}`}
+            role='listitem'
+            className={styles.step}
+            data-state={state}>
+            <div
+              className={styles.indicator}
+              aria-hidden='true'>
+              {state === "completed" ? "✓" : index + 1}
+            </div>
+            {index < steps.length - 1 ? (
+              <div
+                className={styles.connector}
+                aria-hidden='true'
+              />
+            ) : null}
+            <span className={styles.label}>{label}</span>
+          </div>
+        );
+      })}
+    </div>
+  ),
+);
+Stepper.displayName = "Stepper";
+
+export {Stepper};
+export type {StepperProps};

package/src/components/ui/switch.module.css

@@ -0,0 +1,42 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 2rem;
+  height: 1.125rem;
+  padding: 0.125rem;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background-color: color-mix(in oklch, var(--ac-foreground), transparent 84%);
+  cursor: pointer;
+  outline: none;
+  transition: background-color var(--ac-transition-fast);
+}
+
+.root[data-checked] {
+  background-color: var(--ac-primary);
+}
+
+.root[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.root:focus-visible {
+  outline: 2px solid var(--ac-ring);
+  outline-offset: 2px;
+}
+
+.thumb {
+  display: block;
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 999px;
+  background-color: var(--ac-background);
+  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
+  transition: transform var(--ac-transition-fast);
+}
+
+.root[data-checked] .thumb {
+  transform: translateX(0.875rem);
+}

package/src/components/ui/switch.tsx

@@ -1,28 +1,61 @@
 "use client";
 
-import * as SwitchPrimitives from "@radix-ui/react-switch";
+import {mergeProps} from "@base-ui/react/merge-props";
+import {Switch as BaseSwitch} from "@base-ui/react/switch";
+import {useRender} from "@base-ui/react/use-render";
 import * as React from "react";
 
 import {cn} from "@/lib/utilities";
+import styles from "./switch.module.css";
 
-const Switch = React.forwardRef<
-  React.ComponentRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({className, ...props}, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-neutral-900 data-[state=unchecked]:bg-neutral-200 dark:focus-visible:ring-neutral-300 dark:focus-visible:ring-offset-neutral-950 dark:data-[state=checked]:bg-neutral-50 dark:data-[state=unchecked]:bg-neutral-800",
-      className,
-    )}
-    {...props}
-    ref={ref}>
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:bg-neutral-950",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+/**
+ * Props for the shared switch wrapper.
+ */
+interface SwitchProps extends Omit<React.ComponentPropsWithRef<typeof BaseSwitch.Root>, "className"> {
+  /** Additional CSS classes merged with the switch root styles. @default undefined */
+  className?: string;
+}
+
+/**
+ * Toggles between on and off states with a styled thumb control.
+ *
+ * @remarks
+ * - Renders a `<button>` element by default
+ * - Built on {@link https://base-ui.com/react/components/switch | Base UI Switch}
+ * - Supports the `render` prop for element composition
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Switch defaultChecked />
+ * ```
+ *
+ * @see {@link https://base-ui.com/react/components/switch | Base UI Documentation}
+ */
+const Switch = React.forwardRef<React.ComponentRef<typeof BaseSwitch.Root>, Switch.Props>(
+  (props: Readonly<Switch.Props>, ref): React.ReactElement => {
+    const {className, render, ...otherProps} = props;
+
+    return (
+      <BaseSwitch.Root
+        ref={ref}
+        {...otherProps}
+        render={useRender({
+          defaultTagName: "button",
+          render: render as never,
+          props: mergeProps({className: cn(styles.root, className)}, {}),
+        })}>
+        <BaseSwitch.Thumb className={styles.thumb} />
+      </BaseSwitch.Root>
+    );
+  },
+);
+Switch.displayName = "Switch";
+
+// eslint-disable-next-line no-redeclare -- required for the canonical component namespace typing API
+namespace Switch {
+  export type Props = SwitchProps;
+  export type State = BaseSwitch.Root.State;
+}
 
 export {Switch};

package/src/components/ui/table-skeleton.module.css

@@ -0,0 +1,29 @@
+.container {
+  overflow: hidden;
+  border: 1px solid var(--ac-border);
+  border-radius: var(--ac-radius-lg);
+}
+
+.header {
+  display: flex;
+  gap: var(--ac-space-4);
+  padding: var(--ac-space-3) var(--ac-space-4);
+  background-color: var(--ac-muted);
+}
+
+.headerCell {
+  flex: 1;
+  height: 0.875rem;
+}
+
+.row {
+  display: flex;
+  gap: var(--ac-space-4);
+  border-top: 1px solid var(--ac-border);
+  padding: var(--ac-space-3) var(--ac-space-4);
+}
+
+.cell {
+  flex: 1;
+  height: 0.875rem;
+}

package/src/components/ui/table-skeleton.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+
+import {cn} from "@/lib/utilities";
+
+import {Skeleton} from "./skeleton";
+import styles from "./table-skeleton.module.css";
+
+/**
+ * Represents the configurable props for the {@link TableSkeleton} component.
+ *
+ * @remarks
+ * Extends native `<div>` attributes so table loading placeholders can be embedded in
+ * semantic sections, receive accessibility metadata, and accept layout overrides.
+ */
+interface TableSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of body rows rendered beneath the table header placeholders.
+   *
+   * @default 5
+   */
+  rows?: number;
+  /**
+   * Number of columns rendered for both the header and body rows.
+   *
+   * @default 4
+   */
+  columns?: number;
+}
+
+/**
+ * Renders a skeleton placeholder shaped like a data table.
+ *
+ * @remarks
+ * **Rendering Context**: Server- and client-compatible presentational component.
+ *
+ * Simulates a tabular layout with a muted header row and repeated body rows so pages can
+ * preserve data-table rhythm while async records are loading.
+ *
+ * @example
+ * ```tsx
+ * <TableSkeleton rows={8} columns={5} aria-label="Loading invoices table" />
+ * ```
+ *
+ * @see {@link TableSkeletonProps} for available props
+ */
+const TableSkeleton = React.forwardRef<HTMLDivElement, TableSkeletonProps>(
+  ({rows = 5, columns = 4, className, ...props}: Readonly<TableSkeletonProps>, ref): React.JSX.Element => (
+    <div
+      ref={ref}
+      className={cn(styles.container, className)}
+      {...props}>
+      <div className={styles.header}>
+        {Array.from({length: columns}, (_, index) => (
+          <Skeleton
+            key={index}
+            className={styles.headerCell}
+          />
+        ))}
+      </div>
+      {Array.from({length: rows}, (_, rowIndex) => (
+        <div
+          key={rowIndex}
+          className={styles.row}>
+          {Array.from({length: columns}, (_, columnIndex) => (
+            <Skeleton
+              key={columnIndex}
+              className={styles.cell}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  ),
+);
+
+TableSkeleton.displayName = "TableSkeleton";
+
+export {TableSkeleton};
+export type {TableSkeletonProps};

package/src/components/ui/table.module.css

@@ -0,0 +1,66 @@
+.container {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  caption-side: bottom;
+  font-size: var(--ac-text-sm);
+}
+
+.header :where(tr) {
+  border-bottom: 1px solid var(--ac-border);
+}
+
+.body :where(tr:last-child) {
+  border-bottom: 0;
+}
+
+.footer {
+  border-top: 1px solid var(--ac-border);
+  background-color: color-mix(in oklch, var(--ac-muted), transparent 35%);
+  font-weight: 500;
+}
+
+.footer > tr:last-child {
+  border-bottom: 0;
+}
+
+.row {
+  border-bottom: 1px solid var(--ac-border);
+  transition: background-color var(--ac-transition-fast);
+}
+
+@media (hover: hover) {
+  .row:hover {
+    background-color: color-mix(in oklch, var(--ac-muted), transparent 45%);
+  }
+}
+
+.row[data-state="selected"] {
+  background-color: color-mix(in oklch, var(--ac-muted), transparent 30%);
+}
+
+.head {
+  height: var(--ac-size-default);
+  padding: 0 var(--ac-space-2);
+  text-align: left;
+  vertical-align: middle;
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+  font-weight: 500;
+}
+
+.cell {
+  padding: var(--ac-space-2);
+  vertical-align: middle;
+}
+
+.caption {
+  margin-top: var(--ac-space-4);
+  color: var(--ac-muted-foreground);
+  font-size: var(--ac-text-sm);
+}