@sixthshift/design-system 0.1.0

package/src/components/Select/SelectTrigger.tsx

@@ -0,0 +1,130 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { ChevronDown, X } from "lucide-react";
+import type { HTMLAttributes } from "react";
+
+interface SelectTriggerButtonProps {
+  setReference: (node: HTMLElement | null) => void;
+  listboxId: string;
+  open: boolean;
+  disabled: boolean;
+  collapsed: boolean;
+  displayLabel: string;
+  showClearButton: boolean;
+  className: string | undefined;
+  onToggle: () => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onClear: (e: React.MouseEvent) => void;
+  props: HTMLAttributes<HTMLElement>;
+}
+
+export const SelectTriggerButton = ({
+  setReference,
+  listboxId,
+  open,
+  disabled,
+  collapsed,
+  displayLabel,
+  showClearButton,
+  className,
+  onToggle,
+  onKeyDown,
+  onClear,
+  props,
+}: SelectTriggerButtonProps) => {
+  // The clear button must be a sibling of the trigger, not a descendant: nesting
+  // one interactive control inside another is invalid HTML and leaves assistive
+  // tech unable to reach the inner control (axe: nested-interactive).
+  const showClear = showClearButton && !collapsed;
+
+  return (
+    <div className="relative w-full">
+      <button
+        ref={setReference}
+        type="button"
+        onClick={onToggle}
+        onKeyDown={onKeyDown}
+        disabled={disabled}
+        className={cn(
+          `flex w-full cursor-pointer items-center gap-2 rounded-md border border-border-normal bg-bg-normal px-3 py-2 font-medium text-fg-normal text-sm transition-colors hover:bg-bg-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`,
+          collapsed ? "justify-center" : "justify-between",
+          showClear && "pr-9",
+          className
+        )}
+        title={collapsed ? displayLabel : undefined}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        // The listbox unmounts when closed, so only reference it while it exists.
+        aria-controls={open ? listboxId : undefined}
+        {...props}
+      >
+        {collapsed ? (
+          <span className="font-bold text-xs">{displayLabel.charAt(0)}</span>
+        ) : (
+          <>
+            <span className="truncate">{displayLabel}</span>
+            <span className="flex shrink-0 items-center gap-1">
+              <ChevronDown className={cn("h-4 w-4 text-fg-subtle transition-transform", open && "rotate-180")} />
+            </span>
+          </>
+        )}
+      </button>
+      {showClear && (
+        <button
+          type="button"
+          onClick={onClear}
+          disabled={disabled}
+          className="absolute top-1/2 right-8 -translate-y-1/2 rounded-sm p-0.5 text-fg-subtle hover:bg-bg-subtle hover:text-fg-normal focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring"
+          aria-label="Clear selection"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
+    </div>
+  );
+};
+
+interface SelectTriggerSearchProps {
+  setReference: (node: HTMLElement | null) => void;
+  listboxId: string;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+  searchValue: string;
+  disabled: boolean;
+  displayLabel: string;
+  open: boolean;
+  className: string | undefined;
+  onSearchChange: (value: string) => void;
+  props: React.InputHTMLAttributes<HTMLInputElement>;
+}
+
+export const SelectTriggerSearch = ({
+  setReference,
+  listboxId,
+  inputRef,
+  searchValue,
+  disabled,
+  displayLabel,
+  open,
+  className,
+  onSearchChange,
+  props,
+}: SelectTriggerSearchProps) => (
+  <div ref={setReference} className={cn("relative flex w-full items-center", className)}>
+    <input
+      ref={inputRef as React.RefObject<HTMLInputElement>}
+      type="text"
+      value={searchValue}
+      onChange={(e) => onSearchChange(e.target.value)}
+      placeholder={displayLabel}
+      disabled={disabled}
+      className={cn(
+        `flex-1 rounded-md border border-border-normal bg-bg-normal px-3 py-2 font-medium text-fg-normal text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50`
+      )}
+      role="combobox"
+      aria-expanded={open}
+      aria-controls={listboxId}
+      aria-autocomplete="list"
+      {...props}
+    />
+    <ChevronDown className="pointer-events-none absolute right-3 h-4 w-4 text-fg-subtle" />
+  </div>
+);

package/src/components/Select/index.ts

@@ -0,0 +1,3 @@
+export { Select, type SelectOption, type SelectProps } from "./Select";
+export { SelectDropdown } from "./SelectDropdown";
+export { SelectTriggerButton, SelectTriggerSearch } from "./SelectTrigger";

package/src/components/Select/useSelectKeyboard.ts

@@ -0,0 +1,111 @@
+import { useEffect } from "react";
+import type { SelectOption } from "./Select";
+
+interface UseSelectKeyboardOptions<T extends string> {
+  open: boolean;
+  searchable: boolean;
+  searchValue: string;
+  highlightedIndex: number;
+  displayOptions: readonly SelectOption<T>[];
+  setOpen: (open: boolean) => void;
+  setHighlightedIndex: React.Dispatch<React.SetStateAction<number>>;
+  setSearchValue: (value: string) => void;
+  handleSelect: (value: T) => void;
+  focusTrigger: () => void;
+}
+
+export function useSelectKeyboard<T extends string>({
+  open,
+  searchable,
+  searchValue,
+  highlightedIndex,
+  displayOptions,
+  setOpen,
+  setHighlightedIndex,
+  setSearchValue,
+  handleSelect,
+  focusTrigger,
+}: UseSelectKeyboardOptions<T>) {
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!open) return;
+
+      const isTyping = searchable && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+      if (isTyping) return;
+
+      switch (event.key) {
+        case "Escape":
+          event.preventDefault();
+          if (searchable && searchValue) {
+            setSearchValue("");
+            setHighlightedIndex(0);
+          } else {
+            setOpen(false);
+            focusTrigger();
+          }
+          break;
+
+        case "ArrowDown":
+          event.preventDefault();
+          setHighlightedIndex((prev) => (prev < displayOptions.length - 1 ? prev + 1 : prev));
+          break;
+
+        case "ArrowUp":
+          event.preventDefault();
+          setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : prev));
+          break;
+
+        case "Home":
+          event.preventDefault();
+          setHighlightedIndex(0);
+          break;
+
+        case "End":
+          event.preventDefault();
+          setHighlightedIndex(displayOptions.length - 1);
+          break;
+
+        case "Enter":
+          event.preventDefault();
+          if (highlightedIndex >= 0 && highlightedIndex < displayOptions.length) {
+            handleSelect(displayOptions[highlightedIndex]!.value);
+          }
+          break;
+
+        case " ":
+          if (!searchable) {
+            event.preventDefault();
+            if (highlightedIndex >= 0 && highlightedIndex < displayOptions.length) {
+              handleSelect(displayOptions[highlightedIndex]!.value);
+            }
+          }
+          break;
+
+        case "Tab":
+          setOpen(false);
+          break;
+
+        default:
+          if (!searchable && event.key.length === 1) {
+            const letter = event.key.toLowerCase();
+            const startIndex = highlightedIndex + 1;
+            const matchIndex = displayOptions.findIndex((opt, idx) => idx >= startIndex && opt.label.toLowerCase().startsWith(letter));
+
+            if (matchIndex >= 0) {
+              setHighlightedIndex(matchIndex);
+            } else {
+              const wrapMatchIndex = displayOptions.findIndex((opt) => opt.label.toLowerCase().startsWith(letter));
+              if (wrapMatchIndex >= 0) {
+                setHighlightedIndex(wrapMatchIndex);
+              }
+            }
+          }
+      }
+    };
+
+    if (open) {
+      document.addEventListener("keydown", handleKeyDown);
+      return () => document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [open, searchable, searchValue, highlightedIndex, displayOptions, setOpen, setHighlightedIndex, setSearchValue, handleSelect, focusTrigger]);
+}

package/src/components/Separator/Separator.tsx

@@ -0,0 +1,20 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+};
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <div
+    ref={ref}
+    role={decorative ? "none" : "separator"}
+    {...(!decorative && { "aria-orientation": orientation })}
+    className={cn("shrink-0 bg-border-normal", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className)}
+    {...props}
+  />
+));
+Separator.displayName = "Separator";
+
+export { Separator };

package/src/components/Separator/index.ts

@@ -0,0 +1 @@
+export { Separator, type SeparatorProps } from "./Separator";

package/src/components/Sheet/Sheet.tsx

@@ -0,0 +1,136 @@
+import { FloatingFocusManager, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { useMergedFloatingRef, usePresence } from "@sixthshift/design-system/hooks";
+import { cn } from "@sixthshift/design-system/utils";
+import { type HTMLAttributes, type ReactNode, useCallback, useEffect, useMemo } from "react";
+import { SheetBody, SheetContext, SheetFooter, SheetHeader } from "./components";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type SheetProps = Pick<HTMLAttributes<HTMLDivElement>, "className" | "style"> & {
+  /** Whether the sheet is open. Sheet owns its own mount lifecycle so exit animations can play. */
+  open: boolean;
+  /** Called when the sheet requests a state change (Esc, outside press, X button). */
+  onOpenChange: (open: boolean) => void;
+  /** Which edge the sheet slides in from */
+  side?: "right" | "left";
+  /** Sheet width on desktop — mobile is always full width */
+  size?: "sm" | "md" | "lg";
+  /** When true (default), Esc closes the sheet. */
+  dismissable?: boolean;
+  /** When true, clicking outside the sheet closes it. Defaults to false — Sheet is a persistent workspace, not a transient popover. */
+  dismissOnOutsidePress?: boolean;
+  /** When true, shows a close (X) button in the header */
+  closable?: boolean;
+  /** Children — use Sheet.Header, Sheet.Body, Sheet.Footer */
+  children: ReactNode;
+};
+
+// =============================================================================
+// Size classes
+// =============================================================================
+
+const sizeClasses = {
+  sm: "sm:w-[22rem]",
+  md: "sm:w-[30rem]",
+  lg: "sm:w-[40rem]",
+};
+
+// =============================================================================
+// Sheet
+// =============================================================================
+
+const SheetRoot = ({
+  open,
+  onOpenChange,
+  side = "right",
+  size = "md",
+  dismissable = true,
+  dismissOnOutsidePress = false,
+  closable,
+  className,
+  style,
+  children,
+}: SheetProps) => {
+  const { ref: presenceRef, state, isMounted, show, hide } = usePresence();
+
+  // Drive presence from the controlled `open` prop.
+  // When `open` flips to false, we play the exit animation, then unmount.
+  useEffect(() => {
+    if (open) {
+      show();
+    } else if (isMounted) {
+      hide();
+    }
+  }, [open, isMounted, show, hide]);
+
+  const requestClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const { refs, context } = useFloating({
+    open,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) requestClose();
+    },
+  });
+
+  const mergedRef = useMergedFloatingRef(refs, presenceRef);
+
+  const dismiss = useDismiss(context, {
+    enabled: dismissable,
+    escapeKey: true,
+    outsidePress: dismissOnOutsidePress,
+    outsidePressEvent: "mousedown",
+  });
+
+  const role = useRole(context, { role: "dialog" });
+
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const sheetContextValue = useMemo(() => ({ onClose: requestClose, closable }), [requestClose, closable]);
+
+  if (!isMounted) return null;
+
+  const isEntering = state === "entering";
+  const isExiting = state === "exiting";
+
+  return (
+    <FloatingFocusManager context={context} modal={false}>
+      <div
+        ref={mergedRef}
+        tabIndex={-1}
+        data-state={state}
+        data-side={side}
+        className={cn(
+          "fixed top-0 bottom-0 z-sheet flex flex-col overflow-hidden bg-bg-normal outline-hidden",
+          "border-border-normal shadow-lg",
+          side === "right" ? "right-0 border-l" : "left-0 border-r",
+          sizeClasses[size],
+          "max-sm:inset-x-0",
+          isEntering && side === "right" && "animate-slide-right-in",
+          isExiting && side === "right" && "animate-slide-right-out",
+          isEntering && side === "left" && "animate-slide-left-in",
+          isExiting && side === "left" && "animate-slide-left-out",
+          className
+        )}
+        style={style}
+        {...getFloatingProps({})}
+      >
+        <SheetContext.Provider value={sheetContextValue}>{children}</SheetContext.Provider>
+      </div>
+    </FloatingFocusManager>
+  );
+};
+SheetRoot.displayName = "Sheet";
+
+// =============================================================================
+// Compound Component Export
+// =============================================================================
+
+export const Sheet = Object.assign(SheetRoot, {
+  Header: SheetHeader,
+  Body: SheetBody,
+  Footer: SheetFooter,
+});

package/src/components/Sheet/components/SheetBody.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type SheetBodyProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const SheetBody = React.forwardRef<HTMLDivElement, SheetBodyProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex-1 overflow-y-auto p-6", className)} {...props} />
+));
+SheetBody.displayName = "SheetBody";

package/src/components/Sheet/components/SheetContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, type KeyboardEvent, type MouseEvent, type PropsWithChildren, useContext, useMemo } from "react";
+
+export type OnClose = (event?: MouseEvent<Element> | KeyboardEvent<Element>) => void;
+
+interface SheetContextValue {
+  onClose: OnClose;
+  closable?: boolean | undefined;
+}
+
+export const SheetContext = createContext<SheetContextValue | null>(null);
+
+export function useSheetContext() {
+  const context = useContext(SheetContext);
+  if (!context) {
+    throw new Error("useSheetContext must be used within a Sheet");
+  }
+  return context;
+}
+
+export const SheetContextProvider = ({ onClose, closable, children }: PropsWithChildren<{ onClose: OnClose; closable?: boolean }>) => {
+  const value = useMemo(() => ({ onClose, closable }), [onClose, closable]);
+  return <SheetContext.Provider value={value}>{children}</SheetContext.Provider>;
+};

package/src/components/Sheet/components/SheetFooter.tsx

@@ -0,0 +1,9 @@
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+
+export type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const SheetFooter = React.forwardRef<HTMLDivElement, SheetFooterProps>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("flex items-center border-border-normal border-t p-4", className)} {...props} />
+));
+SheetFooter.displayName = "SheetFooter";

package/src/components/Sheet/components/SheetHeader.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { X } from "lucide-react";
+import * as React from "react";
+import { SheetContext } from "./SheetContext";
+
+export type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const SheetHeader = React.forwardRef<HTMLDivElement, SheetHeaderProps>(({ className, children, ...props }, ref) => {
+  const context = React.useContext(SheetContext);
+  const closable = context?.closable;
+  const onClose = context?.onClose;
+
+  return (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 border-border-normal border-b p-6", closable && "pr-12", className)} {...props}>
+      {children}
+      {closable && (
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label="Close"
+          className="absolute top-4 right-4 cursor-pointer rounded-md p-1 text-fg-subtle transition-colors hover:bg-bg-subtle hover:text-fg-normal"
+        >
+          <X size={16} />
+        </button>
+      )}
+    </div>
+  );
+});
+SheetHeader.displayName = "SheetHeader";

package/src/components/Sheet/components/index.ts

@@ -0,0 +1,9 @@
+export { SheetBody, type SheetBodyProps } from "./SheetBody";
+export {
+  type OnClose,
+  SheetContext,
+  SheetContextProvider,
+  useSheetContext,
+} from "./SheetContext";
+export { SheetFooter, type SheetFooterProps } from "./SheetFooter";
+export { SheetHeader, type SheetHeaderProps } from "./SheetHeader";

package/src/components/Sheet/index.ts

@@ -0,0 +1,13 @@
+export {
+  type OnClose,
+  SheetBody,
+  type SheetBodyProps,
+  SheetContext,
+  SheetContextProvider,
+  SheetFooter,
+  type SheetFooterProps,
+  SheetHeader,
+  type SheetHeaderProps,
+  useSheetContext,
+} from "./components";
+export { Sheet, type SheetProps } from "./Sheet";

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from "@sixthshift/design-system/utils";
+
+const Skeleton = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => {
+  return <div className={cn("animate-pulse rounded-md bg-bg-strong/10", className)} {...props} />;
+};
+
+export { Skeleton };

package/src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from "./Skeleton";

package/src/components/Sparkline/Sparkline.tsx

@@ -0,0 +1,93 @@
+import type { Interpolation } from "@sixthshift/design-system/line-chart";
+import { cn } from "@sixthshift/design-system/utils";
+import type * as React from "react";
+
+export type SparklineProps = React.HTMLAttributes<HTMLSpanElement> & {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+  fillArea?: boolean;
+  interpolation?: Interpolation;
+  strokeWidth?: number;
+};
+
+function buildPath(points: { x: number; y: number }[], interpolation: Interpolation): string {
+  if (points.length === 0) return "";
+  const parts = [`M ${points[0]!.x} ${points[0]!.y}`];
+
+  switch (interpolation) {
+    case "monotone":
+      for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1]!;
+        const curr = points[i]!;
+        const cpx = (prev.x + curr.x) / 2;
+        parts.push(`C ${cpx} ${prev.y}, ${cpx} ${curr.y}, ${curr.x} ${curr.y}`);
+      }
+      break;
+    case "stepAfter":
+      for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1]!;
+        const curr = points[i]!;
+        parts.push(`L ${curr.x} ${prev.y}`);
+        parts.push(`L ${curr.x} ${curr.y}`);
+      }
+      break;
+    case "stepBefore":
+      for (let i = 1; i < points.length; i++) {
+        const prev = points[i - 1]!;
+        const curr = points[i]!;
+        parts.push(`L ${prev.x} ${curr.y}`);
+        parts.push(`L ${curr.x} ${curr.y}`);
+      }
+      break;
+    default:
+      for (let i = 1; i < points.length; i++) {
+        parts.push(`L ${points[i]!.x} ${points[i]!.y}`);
+      }
+      break;
+  }
+
+  return parts.join(" ");
+}
+
+export const Sparkline = ({
+  data,
+  width = 80,
+  height = 24,
+  color = "var(--fg-brand)",
+  fillArea = false,
+  interpolation = "monotone",
+  strokeWidth = 1.5,
+  className,
+  ...rest
+}: SparklineProps) => {
+  if (data.length < 2) return null;
+
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const range = max - min || 1;
+
+  const padY = 2;
+  const padX = 1;
+  const innerW = width - padX * 2;
+  const innerH = height - padY * 2;
+
+  const points = data.map((v, i) => ({
+    x: padX + (i / (data.length - 1)) * innerW,
+    y: padY + innerH - ((v - min) / range) * innerH,
+  }));
+
+  const path = buildPath(points, interpolation);
+
+  return (
+    <span {...rest} className={cn("inline-block align-middle", className)}>
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} role="img" aria-label="Trend line">
+        {fillArea && path && (
+          <path d={`${path} L ${points[points.length - 1]!.x} ${height - padY} L ${points[0]!.x} ${height - padY} Z`} fill={color} opacity={0.12} />
+        )}
+        <path d={path} fill="none" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    </span>
+  );
+};

package/src/components/Sparkline/index.ts

@@ -0,0 +1 @@
+export { Sparkline, type SparklineProps } from "./Sparkline";

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,41 @@
+import { cn } from "@sixthshift/design-system/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+const spinnerVariants = cva("animate-spin text-fg-subtle", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      default: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+export type SpinnerProps = React.SVGAttributes<SVGElement> & VariantProps<typeof spinnerVariants>;
+
+const Spinner = React.forwardRef<SVGSVGElement, SpinnerProps>(({ className, size, ...props }, ref) => (
+  <svg
+    ref={ref}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    className={cn(spinnerVariants({ size, className }))}
+    aria-hidden="true"
+    {...props}
+  >
+    <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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+));
+Spinner.displayName = "Spinner";
+
+export { Spinner, spinnerVariants };

package/src/components/Spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps, spinnerVariants } from "./Spinner";