@aleph-front/ds 0.0.0

package/src/components/select/select.tsx

@@ -0,0 +1,145 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Select as SelectPrimitive } from "radix-ui";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const triggerVariants = cva(
+  [
+    "inline-flex items-center justify-between",
+    "w-full font-sans text-foreground bg-surface dark:bg-base-800",
+    "border-0 shadow-brand rounded-full",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "ring-0 transition-[color,box-shadow]",
+    "data-[placeholder]:text-muted-foreground",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-4 text-sm",
+        md: "py-2 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type SelectOption = {
+  value: string;
+  label: string;
+  disabled?: boolean;
+};
+
+type SelectProps = Omit<
+  ComponentPropsWithoutRef<typeof SelectPrimitive.Root>,
+  "children"
+> &
+  VariantProps<typeof triggerVariants> & {
+    options: SelectOption[];
+    placeholder?: string;
+    error?: boolean;
+    className?: string;
+    id?: string;
+    "aria-describedby"?: string;
+  };
+
+const Select = forwardRef<HTMLButtonElement, SelectProps>(
+  (
+    {
+      options,
+      placeholder,
+      size,
+      error = false,
+      className,
+      id,
+      "aria-describedby": ariaDescribedBy,
+      ...rest
+    },
+    ref,
+  ) => {
+    return (
+      <SelectPrimitive.Root {...rest}>
+        <SelectPrimitive.Trigger
+          ref={ref}
+          id={id}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={error || undefined}
+          className={cn(
+            triggerVariants({ size }),
+            error && "border-3 border-error-400 hover:border-error-500",
+            className,
+          )}
+        >
+          <SelectPrimitive.Value placeholder={placeholder} />
+          <SelectPrimitive.Icon className="ml-2 shrink-0 text-muted-foreground">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="size-4"
+            >
+              <polyline points="6 9 12 15 18 9" />
+            </svg>
+          </SelectPrimitive.Icon>
+        </SelectPrimitive.Trigger>
+        <SelectPrimitive.Portal>
+          <SelectPrimitive.Content
+            className={cn(
+              "z-50 overflow-hidden rounded-2xl",
+              "bg-surface border border-edge shadow-brand",
+            )}
+            position="popper"
+            sideOffset={4}
+          >
+            <SelectPrimitive.Viewport className="p-1">
+              {options.map((option) => (
+                <SelectPrimitive.Item
+                  key={option.value}
+                  value={option.value}
+                  disabled={option.disabled ?? false}
+                  className={cn(
+                    "relative flex items-center rounded-xl px-4 py-2",
+                    "text-sm text-foreground cursor-pointer select-none",
+                    "outline-none",
+                    "data-[highlighted]:bg-muted",
+                    "data-[disabled]:opacity-50",
+                    "data-[disabled]:pointer-events-none",
+                  )}
+                >
+                  <SelectPrimitive.ItemText>
+                    {option.label}
+                  </SelectPrimitive.ItemText>
+                  <SelectPrimitive.ItemIndicator className="ml-auto">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth={2.5}
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      className="size-4"
+                    >
+                      <polyline points="20 6 9 17 4 12" />
+                    </svg>
+                  </SelectPrimitive.ItemIndicator>
+                </SelectPrimitive.Item>
+              ))}
+            </SelectPrimitive.Viewport>
+          </SelectPrimitive.Content>
+        </SelectPrimitive.Portal>
+      </SelectPrimitive.Root>
+    );
+  },
+);
+
+Select.displayName = "Select";
+
+export { Select, triggerVariants, type SelectProps, type SelectOption };

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/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,208 @@
+"use client";
+
+import { useState, type KeyboardEvent, type ReactNode } from "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;
+};
+
+function ChevronIcon({
+  direction,
+}: {
+  direction: SortDirection | null;
+}) {
+  return (
+    <svg
+      className={cn(
+        "ml-1 inline size-3 transition-transform motion-reduce:transition-none",
+        direction === "desc" && "rotate-180",
+        direction === null && "opacity-0",
+      )}
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      strokeWidth={2.5}
+      aria-hidden="true"
+    >
+      <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
+    </svg>
+  );
+}
+
+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,
+}: TableProps<T>) {
+  const [sortCol, setSortCol] = useState<number | null>(null);
+  const [sortDir, setSortDir] = useState<SortDirection>("asc");
+
+  function handleSort(colIndex: number) {
+    if (sortCol === colIndex) {
+      setSortDir((d) => (d === "asc" ? "desc" : "asc"));
+    } else {
+      setSortCol(colIndex);
+      setSortDir("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;
+  const activeCol = sortCol !== null ? columns[sortCol] : undefined;
+  if (activeCol?.sortValue) {
+    const getValue = activeCol.sortValue;
+    const dir = sortDir === "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, sortCol, sortDir)
+                    : undefined
+                }
+                onClick={col.sortable ? () => handleSort(i) : undefined}
+                onKeyDown={
+                  col.sortable
+                    ? (e) => handleHeaderKeyDown(e, i)
+                    : undefined
+                }
+              >
+                {col.header}
+                {col.sortable && (
+                  <ChevronIcon
+                    direction={sortCol === i ? sortDir : null}
+                  />
+                )}
+              </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>
+  );
+}

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,56 @@
+import { forwardRef, type TextareaHTMLAttributes } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@ac/lib/cn";
+
+const textareaVariants = cva(
+  [
+    "w-full font-sans text-foreground bg-surface dark:bg-base-800",
+    "border-0 shadow-brand rounded-2xl",
+    "placeholder:text-muted-foreground",
+    "focus-visible:outline-none focus-visible:ring-3",
+    "focus-visible:ring-primary-500",
+    "disabled:opacity-50 disabled:pointer-events-none",
+    "ring-0 resize-y transition-[color,box-shadow]",
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "py-1.5 px-4 text-sm",
+        md: "py-2 px-5 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+type TextareaProps = Omit<
+  TextareaHTMLAttributes<HTMLTextAreaElement>,
+  "size"
+> &
+  VariantProps<typeof textareaVariants> & {
+    error?: boolean;
+  };
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ size, error = false, rows = 4, className, ...rest }, ref) => {
+    return (
+      <textarea
+        ref={ref}
+        rows={rows}
+        className={cn(
+          textareaVariants({ size }),
+          error && "border-3 border-error-400 hover:border-error-500",
+          className,
+        )}
+        aria-invalid={error || undefined}
+        {...rest}
+      />
+    );
+  },
+);
+
+Textarea.displayName = "Textarea";
+
+export { Textarea, textareaVariants, type TextareaProps };

package/src/components/tooltip/tooltip.tsx

@@ -0,0 +1,35 @@
+import { forwardRef, type ComponentPropsWithoutRef } from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "@ac/lib/cn";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 6, ...rest }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        [
+          "z-50 rounded-lg bg-neutral-900 dark:bg-base-700 px-3 py-1.5",
+          "text-sm text-white shadow-brand-sm",
+          "animate-in fade-in-0 zoom-in-95",
+          "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+          "data-[state=closed]:zoom-out-95",
+          "motion-reduce:animate-none",
+        ].join(" "),
+        className,
+      )}
+      {...rest}
+    />
+  </TooltipPrimitive.Portal>
+));
+
+TooltipContent.displayName = "TooltipContent";
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, type HTMLAttributes } from "react";
+import { cn } from "@ac/lib/cn";
+
+type SkeletonProps = HTMLAttributes<HTMLDivElement>;
+
+const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <div
+        ref={ref}
+        aria-hidden="true"
+        className={cn("animate-pulse motion-reduce:animate-none rounded-md bg-muted", className)}
+        {...rest}
+      />
+    );
+  },
+);
+
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton, type SkeletonProps };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@ac/lib/cn";
+
+export function Spinner({ className }: { className?: string }) {
+  return (
+    <svg
+      className={cn("animate-spin motion-reduce:animate-none", className)}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  );
+}

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}