@sixthshift/design-system 0.1.0

package/src/components/RadioButtonGroup/RadioButtonGroup.tsx

@@ -0,0 +1,193 @@
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { RadioButton } from "@sixthshift/design-system/radio-button";
+import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
+import { getRovingTargetIndex } from "../../internal/rovingFocus";
+import type { WritableRefObject } from "../../internal/types";
+
+export type RadioButtonGroupOption = {
+  /** Unique value for the option */
+  value: string;
+  /** Display label */
+  label: string;
+  /** Whether this option is disabled */
+  disabled?: boolean;
+};
+
+export type RadioButtonGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "onBlur"> & {
+  /** Controlled selected value */
+  value?: string;
+  /** Default selected value for uncontrolled mode */
+  defaultValue?: string;
+  /** Available options */
+  options: readonly RadioButtonGroupOption[];
+  /** Called when selection changes */
+  onValueChange?: (value: string) => void;
+  /** Layout orientation */
+  orientation?: "vertical" | "horizontal";
+  /** Visual variant */
+  variant?: "default" | "button";
+  /** Button appearance (only applies when variant="button") */
+  appearance?: "segmented" | "separate";
+  /** Input name for form submission */
+  name?: string;
+  /** Disable all options */
+  disabled?: boolean;
+  /** Called when focus leaves the group entirely */
+  onBlur?: () => void;
+};
+
+const RadioButtonGroup = React.forwardRef<HTMLDivElement, RadioButtonGroupProps>(
+  (
+    {
+      value: controlledValue,
+      defaultValue = "",
+      options,
+      onValueChange,
+      orientation = "vertical",
+      variant = "default",
+      appearance = "segmented",
+      name,
+      disabled,
+      onBlur,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const [value, setValue] = useControllableState({
+      value: controlledValue,
+      defaultValue,
+      onChange: onValueChange,
+    });
+
+    const groupRef = React.useRef<HTMLDivElement | null>(null);
+    const mergedRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        groupRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) (ref as WritableRefObject<HTMLDivElement | null>).current = node;
+      },
+      [ref]
+    );
+
+    const handleFocusOut = React.useCallback(
+      (e: React.FocusEvent) => {
+        if (!groupRef.current?.contains(e.relatedTarget as Node)) {
+          onBlur?.();
+        }
+      },
+      [onBlur]
+    );
+
+    const handleOptionSelect = (optionValue: string) => {
+      setValue(optionValue);
+    };
+
+    // A radiogroup is one tab stop with arrow-key navigation; without this each
+    // option is separately tabbable, which breaks the WAI-ARIA radio pattern.
+    const handleKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+      const enabled = Array.from(groupRef.current?.querySelectorAll<HTMLButtonElement>('[role="radio"]') ?? []).filter((radio) => !radio.disabled);
+      const focused = (event.target as HTMLElement | null)?.closest?.('[role="radio"]') as HTMLButtonElement | null;
+      const target = getRovingTargetIndex(event.key, focused ? enabled.indexOf(focused) : -1, enabled.length);
+      if (target === null) return;
+
+      event.preventDefault();
+      const next = enabled[target];
+      next?.focus();
+      // In the radio pattern, moving focus also moves the selection.
+      next?.click();
+    }, []);
+
+    // The tab stop is the checked option, or the first enabled one when nothing
+    // is checked yet, so the group is always reachable by keyboard.
+    const firstEnabledValue = options.find((option) => !(disabled || option.disabled))?.value;
+    const hasCheckedOption = options.some((option) => option.value === value);
+    const tabStopValue = hasCheckedOption ? value : firstEnabledValue;
+
+    if (variant === "button") {
+      const isVertical = orientation === "vertical";
+      const isSegmented = appearance === "segmented";
+
+      return (
+        <div
+          ref={mergedRef}
+          role="radiogroup"
+          onBlurCapture={handleFocusOut}
+          onKeyDown={handleKeyDown}
+          className={cn("inline-flex", isVertical ? "flex-col" : "flex-row", !isSegmented && (isVertical ? "gap-2" : "gap-2"), className)}
+          {...props}
+        >
+          {options.map((option, index) => {
+            const isChecked = value === option.value;
+            const isDisabled = disabled || option.disabled;
+            const isFirst = index === 0;
+            const isLast = index === options.length - 1;
+
+            return (
+              // biome-ignore lint/a11y/useSemanticElements: Custom radio button group with button role="radio" is WAI-ARIA best practice
+              <button
+                key={option.value}
+                type="button"
+                role="radio"
+                aria-checked={isChecked}
+                disabled={isDisabled}
+                tabIndex={option.value === tabStopValue ? 0 : -1}
+                onClick={() => handleOptionSelect(option.value)}
+                className={cn(
+                  "inline-flex items-center justify-center px-4 py-2 font-medium text-sm transition-colors",
+                  "focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+                  "disabled:cursor-not-allowed disabled:opacity-50",
+                  isSegmented
+                    ? cn(
+                        "border",
+                        isVertical
+                          ? cn(isFirst && "rounded-t-md", isLast && "rounded-b-md", !isFirst && "-mt-px")
+                          : cn(isFirst && "rounded-l-md", isLast && "rounded-r-md", !isFirst && "-ml-px")
+                      )
+                    : "rounded-md border",
+                  isChecked ? "border-border-brand bg-bg-brand text-fg-on-brand" : "border-border-normal bg-bg-normal text-fg-normal hover:bg-bg-subtle"
+                )}
+              >
+                {option.label}
+              </button>
+            );
+          })}
+          {name && <input type="hidden" name={name} value={value} />}
+        </div>
+      );
+    }
+
+    return (
+      <div
+        ref={mergedRef}
+        role="radiogroup"
+        onBlurCapture={handleFocusOut}
+        onKeyDown={handleKeyDown}
+        className={cn("flex", orientation === "vertical" ? "flex-col gap-3" : "flex-row gap-4", className)}
+        {...props}
+      >
+        {options.map((option) => {
+          const isChecked = value === option.value;
+          const isDisabled = disabled || option.disabled;
+
+          return (
+            <RadioButton
+              key={option.value}
+              {...(name ? { name } : {})}
+              value={option.value}
+              checked={isChecked}
+              onCheckedChange={() => handleOptionSelect(option.value)}
+              disabled={isDisabled}
+              tabIndex={option.value === tabStopValue ? 0 : -1}
+              label={option.label}
+            />
+          );
+        })}
+      </div>
+    );
+  }
+);
+RadioButtonGroup.displayName = "RadioButtonGroup";
+
+export { RadioButtonGroup };

package/src/components/RadioButtonGroup/index.ts

@@ -0,0 +1,5 @@
+export {
+  RadioButtonGroup,
+  type RadioButtonGroupOption,
+  type RadioButtonGroupProps,
+} from "./RadioButtonGroup";

package/src/components/SearchInput/SearchInput.tsx

@@ -0,0 +1,45 @@
+import { Input } from "@sixthshift/design-system/input";
+import { Search, X } from "lucide-react";
+import * as React from "react";
+
+export type SearchInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
+  value: string;
+  onChange: (value: string) => void;
+  onClear?: () => void;
+  /** Accessible name for the clear button — it is icon-only. */
+  clearLabel?: string;
+};
+
+const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ className, value, onChange, onClear, clearLabel = "Clear search", ...props }, ref) => {
+    const handleClear = () => {
+      if (onClear) {
+        onClear();
+      } else {
+        onChange("");
+      }
+    };
+
+    return (
+      <Input
+        ref={ref}
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        iconLeft={<Search />}
+        iconRight={
+          value ? (
+            <button type="button" onClick={handleClear} aria-label={clearLabel} className="rounded hover:bg-bg-subtle">
+              <X />
+            </button>
+          ) : undefined
+        }
+        className={className}
+        {...props}
+      />
+    );
+  }
+);
+SearchInput.displayName = "SearchInput";
+
+export { SearchInput };

package/src/components/SearchInput/index.ts

@@ -0,0 +1,2 @@
+export type { SearchInputProps } from "./SearchInput";
+export { SearchInput } from "./SearchInput";

package/src/components/Select/Select.tsx

@@ -0,0 +1,289 @@
+import { autoUpdate, flip, offset, shift, size, useFloating } from "@floating-ui/react";
+import { useControllableState } from "@sixthshift/design-system/hooks";
+import { type HTMLAttributes, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { SelectDropdown } from "./SelectDropdown";
+import { SelectTriggerButton, SelectTriggerSearch } from "./SelectTrigger";
+import { useSelectKeyboard } from "./useSelectKeyboard";
+
+export type SelectOption<T extends string = string> = {
+  value: T;
+  label: string;
+};
+
+type SelectBaseProps<T extends string = string> = Omit<HTMLAttributes<HTMLElement>, "onChange" | "value" | "defaultValue"> & {
+  options: readonly SelectOption<T>[];
+  onBlur?: () => void;
+  onFocus?: () => void;
+  collapsed?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  searchable?: boolean;
+  clearable?: boolean;
+};
+
+type SelectSingleProps<T extends string = string> = SelectBaseProps<T> & {
+  mode?: "single";
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+};
+
+type SelectMultipleProps<T extends string = string> = SelectBaseProps<T> & {
+  mode: "multiple";
+  value?: T[];
+  defaultValue?: T[];
+  onValueChange?: (value: T[]) => void;
+};
+
+export type SelectProps<T extends string = string> = SelectSingleProps<T> | SelectMultipleProps<T>;
+
+export const Select = <T extends string = string>(props: SelectProps<T>) => {
+  const {
+    options,
+    onBlur,
+    onFocus,
+    collapsed = false,
+    className,
+    disabled = false,
+    placeholder = "Select...",
+    searchable = false,
+    clearable = false,
+    ...restProps
+  } = props;
+
+  const isMultiple = props.mode === "multiple";
+
+  // Single-mode state
+  const [singleValue, setSingleValue] = useControllableState({
+    value: !isMultiple ? props.value : undefined,
+    defaultValue: (!isMultiple ? props.defaultValue : undefined) ?? ("" as T),
+    onChange: !isMultiple ? props.onValueChange : undefined,
+  });
+
+  // Multiple-mode state
+  const [multiValue, setMultiValue] = useControllableState({
+    value: isMultiple ? props.value : undefined,
+    defaultValue: (isMultiple ? props.defaultValue : undefined) ?? ([] as T[]),
+    onChange: isMultiple ? props.onValueChange : undefined,
+  });
+
+  const [open, setOpen] = useControllableState({ value: undefined, defaultValue: false });
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const [searchValue, setSearchValue] = useState("");
+  const listboxRef = useRef<HTMLDivElement | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const optionRefs = useRef<Map<number, HTMLButtonElement>>(new Map());
+  const wasOpenRef = useRef(false);
+
+  const selectedValues: Set<T> = useMemo(
+    () => (isMultiple ? new Set(multiValue) : singleValue ? new Set([singleValue]) : new Set()),
+    [isMultiple, multiValue, singleValue]
+  );
+
+  const displayLabel = useMemo(() => {
+    if (isMultiple) {
+      if (multiValue.length === 0) return placeholder;
+      if (multiValue.length === 1) return options.find((o) => o.value === multiValue[0])?.label ?? placeholder;
+      return `${multiValue.length} selected`;
+    }
+    return options.find((o) => o.value === singleValue)?.label ?? placeholder;
+  }, [isMultiple, multiValue, singleValue, options, placeholder]);
+
+  const filteredOptions = searchable && searchValue ? options.filter((opt) => opt.label.toLowerCase().includes(searchValue.toLowerCase())) : options;
+  const hasValue = isMultiple ? multiValue.length > 0 : Boolean(singleValue);
+  const showClearButton = clearable && hasValue && !disabled;
+
+  // Floating UI
+  const { refs, floatingStyles } = useFloating({
+    open,
+    onOpenChange: setOpen,
+    placement: "bottom-start",
+    middleware: [
+      offset(4),
+      flip(),
+      shift({ padding: 8 }),
+      size({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, { width: `${rects.reference.width}px` });
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  });
+
+  const focusTrigger = useCallback(() => {
+    (refs.reference.current as HTMLElement | null)?.focus();
+  }, [refs.reference]);
+
+  const handleSelect = useCallback(
+    (optionValue: T) => {
+      if (isMultiple) {
+        setMultiValue(selectedValues.has(optionValue) ? multiValue.filter((v) => v !== optionValue) : [...multiValue, optionValue]);
+      } else {
+        setSingleValue(optionValue);
+        setSearchValue("");
+        setOpen(false);
+        focusTrigger();
+      }
+    },
+    [isMultiple, selectedValues, multiValue, setMultiValue, setSingleValue, setOpen, focusTrigger]
+  );
+
+  const handleClear = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (isMultiple) {
+        setMultiValue([] as T[]);
+      } else {
+        setSingleValue("" as T);
+      }
+    },
+    [isMultiple, setMultiValue, setSingleValue]
+  );
+
+  const handleTriggerKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (disabled || collapsed) return;
+      if (!open && (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ")) {
+        event.preventDefault();
+        setOpen(true);
+      }
+      if (searchable && !open && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
+        setOpen(true);
+      }
+    },
+    [disabled, collapsed, open, setOpen, searchable]
+  );
+
+  const handleSearchChange = useCallback((val: string) => {
+    setSearchValue(val);
+    setHighlightedIndex(0);
+  }, []);
+
+  // Keep the latest callbacks in a ref. This effect must run when the open state
+  // (and derived option state) changes — not whenever a caller passes a fresh
+  // inline handler. Listing onFocus/onBlur as dependencies would re-run it on
+  // every parent render, resetting the highlighted option and clearing the
+  // search box mid-interaction.
+  const focusCallbacksRef = useRef({ onFocus, onBlur });
+  useEffect(() => {
+    focusCallbacksRef.current = { onFocus, onBlur };
+  });
+
+  // Focus/blur lifecycle
+  useEffect(() => {
+    if (open) {
+      const firstSelected = filteredOptions.findIndex((opt) => selectedValues.has(opt.value));
+      setHighlightedIndex(firstSelected >= 0 ? firstSelected : 0);
+      if (!wasOpenRef.current) focusCallbacksRef.current.onFocus?.();
+      if (searchable && inputRef.current) inputRef.current.focus();
+    } else {
+      setHighlightedIndex(-1);
+      setSearchValue("");
+      if (wasOpenRef.current) focusCallbacksRef.current.onBlur?.();
+    }
+    wasOpenRef.current = open;
+  }, [open, filteredOptions, searchable, selectedValues]);
+
+  // Scroll highlighted option into view
+  useEffect(() => {
+    if (open && highlightedIndex >= 0) {
+      const el = optionRefs.current.get(highlightedIndex);
+      if (el && listboxRef.current) {
+        const listbox = listboxRef.current;
+        const top = el.offsetTop;
+        const bottom = top + el.offsetHeight;
+        if (top < listbox.scrollTop) listbox.scrollTop = top;
+        else if (bottom > listbox.scrollTop + listbox.clientHeight) listbox.scrollTop = bottom - listbox.clientHeight;
+      }
+    }
+  }, [highlightedIndex, open]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const reference = refs.reference.current;
+      const floating = refs.floating.current;
+      if (reference && floating && !(reference as HTMLElement).contains(target) && !floating.contains(target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, setOpen, refs]);
+
+  useSelectKeyboard({
+    open,
+    searchable,
+    searchValue,
+    highlightedIndex,
+    displayOptions: filteredOptions,
+    setOpen,
+    setHighlightedIndex,
+    setSearchValue,
+    handleSelect,
+    focusTrigger,
+  });
+
+  // The listbox id must be unique per instance: it is referenced by
+  // aria-controls, and a hardcoded value meant two Selects on one page
+  // produced duplicate ids and cross-wired ARIA.
+  const listboxId = useId();
+
+  // Strip mode from DOM props
+  const { mode: _, value: _v, defaultValue: _dv, onValueChange: _oc, ...htmlProps } = restProps as Record<string, unknown>;
+
+  return (
+    <>
+      {searchable && open && !collapsed ? (
+        <SelectTriggerSearch
+          setReference={refs.setReference}
+          inputRef={inputRef}
+          searchValue={searchValue}
+          disabled={disabled}
+          displayLabel={displayLabel}
+          open={open}
+          className={className}
+          onSearchChange={handleSearchChange}
+          listboxId={listboxId}
+          props={htmlProps as React.InputHTMLAttributes<HTMLInputElement>}
+        />
+      ) : (
+        <SelectTriggerButton
+          setReference={refs.setReference}
+          open={open}
+          disabled={disabled}
+          collapsed={collapsed}
+          displayLabel={displayLabel}
+          showClearButton={Boolean(showClearButton)}
+          className={className}
+          onToggle={() => !disabled && !collapsed && setOpen(!open)}
+          onKeyDown={handleTriggerKeyDown}
+          onClear={handleClear}
+          listboxId={listboxId}
+          props={htmlProps as HTMLAttributes<HTMLElement>}
+        />
+      )}
+
+      {open && !collapsed && (
+        <SelectDropdown
+          setFloating={refs.setFloating}
+          listboxId={listboxId}
+          listboxRef={listboxRef}
+          floatingStyles={floatingStyles}
+          displayOptions={filteredOptions}
+          highlightedIndex={highlightedIndex}
+          selectedValues={selectedValues}
+          searchValue={searchValue}
+          optionRefs={optionRefs}
+          multiple={isMultiple}
+          onSelect={handleSelect}
+          onHighlight={setHighlightedIndex}
+        />
+      )}
+    </>
+  );
+};

package/src/components/Select/SelectDropdown.tsx

@@ -0,0 +1,90 @@
+import { FloatingPortal } from "@floating-ui/react";
+import { cn } from "@sixthshift/design-system/utils";
+import { Check } from "lucide-react";
+import type React from "react";
+import type { WritableRefObject } from "../../internal/types";
+
+interface SelectDropdownProps<T extends string> {
+  setFloating: (node: HTMLElement | null) => void;
+  listboxId: string;
+  listboxRef: WritableRefObject<HTMLDivElement | null>;
+  floatingStyles: React.CSSProperties;
+  displayOptions: readonly { value: T; label: string }[];
+  highlightedIndex: number;
+  selectedValues: Set<T>;
+  searchValue: string;
+  optionRefs: WritableRefObject<Map<number, HTMLButtonElement>>;
+  multiple: boolean;
+  onSelect: (value: T) => void;
+  onHighlight: (index: number) => void;
+}
+
+export const SelectDropdown = <T extends string>({
+  setFloating,
+  listboxId,
+  listboxRef,
+  floatingStyles,
+  displayOptions,
+  highlightedIndex,
+  selectedValues,
+  searchValue,
+  optionRefs,
+  multiple,
+  onSelect,
+  onHighlight,
+}: SelectDropdownProps<T>) => (
+  <FloatingPortal>
+    <div
+      ref={(node) => {
+        setFloating(node);
+        listboxRef.current = node;
+      }}
+      id={listboxId}
+      role="listbox"
+      aria-multiselectable={multiple || undefined}
+      tabIndex={-1}
+      style={floatingStyles}
+      className="z-popover max-h-60 overflow-y-auto rounded-md border border-border-normal bg-bg-normal shadow-lg"
+    >
+      {displayOptions.length === 0 ? (
+        <div className="px-3 py-2 text-center text-fg-subtle text-sm">{searchValue ? `No results for "${searchValue}"` : "No options available"}</div>
+      ) : (
+        displayOptions.map((option, index) => {
+          const isSelected = selectedValues.has(option.value);
+          return (
+            <button
+              key={option.value}
+              ref={(el) => {
+                if (el) optionRefs.current.set(index, el);
+                else optionRefs.current.delete(index);
+              }}
+              type="button"
+              role="option"
+              aria-selected={isSelected}
+              onClick={() => onSelect(option.value)}
+              onMouseEnter={() => onHighlight(index)}
+              className={cn(
+                `flex w-full cursor-pointer items-center px-3 py-2 text-fg-normal text-sm transition-colors`,
+                multiple && "gap-2",
+                highlightedIndex === index && "bg-bg-subtle",
+                isSelected ? "font-medium text-fg-normal" : "text-fg-subtle"
+              )}
+            >
+              {multiple && (
+                <span
+                  className={cn(
+                    "flex h-4 w-4 shrink-0 items-center justify-center rounded-xs border",
+                    isSelected ? "border-border-brand bg-bg-brand text-fg-on-brand" : "border-border-normal"
+                  )}
+                >
+                  {isSelected && <Check className="h-3 w-3" />}
+                </span>
+              )}
+              {option.label}
+            </button>
+          );
+        })
+      )}
+    </div>
+  </FloatingPortal>
+);