@fragments-sdk/ui 0.4.0 → 0.6.0

package/src/components/Combobox/Combobox.module.scss

@@ -0,0 +1,268 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// Multi-select container — stacks input and chips vertically
+.multiContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+// Input + trigger wrapper
+.inputWrapper {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--fui-space-1, $fui-space-1);
+  width: 100%;
+  min-width: 10rem;
+  min-height: var(--fui-input-height, $fui-input-height);
+  padding: var(--fui-space-1, $fui-space-1);
+  padding-right: 0;
+  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
+  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  transition:
+    border-color var(--fui-transition-fast, $fui-transition-fast),
+    box-shadow var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover:not(:has([data-disabled])) {
+    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &:focus-within {
+    @include focus-ring;
+    border-color: var(--fui-color-accent, $fui-color-accent);
+  }
+
+  &:has([data-disabled]) {
+    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+}
+
+// Text input
+.input {
+  @include text-base;
+
+  flex: 1;
+  min-width: 4rem;
+  height: calc(var(--fui-input-height, $fui-input-height) - var(--fui-space-2, $fui-space-2));
+  padding: 0 var(--fui-space-2, $fui-space-2);
+  background: transparent;
+  border: none;
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  outline: none;
+
+  &::placeholder {
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &:disabled,
+  &[data-disabled] {
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    cursor: not-allowed;
+  }
+}
+
+// Chips container (multi-select) — rendered below the input wrapper
+.chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fui-space-1, $fui-space-1);
+  width: 100%;
+  padding-top: var(--fui-space-1, $fui-space-1);
+}
+
+// Individual chip (multi-select)
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fui-space-1, $fui-space-1);
+  padding: 2px var(--fui-space-2, $fui-space-2);
+  background-color: var(--fui-bg-subtle, $fui-bg-subtle);
+  border: 1px solid var(--fui-border, $fui-border);
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  line-height: 1.4;
+  white-space: nowrap;
+  max-width: 12rem;
+}
+
+.chipLabel {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Chip remove button
+.chipRemove {
+  @include button-reset;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--fui-radius-xs, 2px);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  cursor: pointer;
+  transition: color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    color: var(--fui-text-primary, $fui-text-primary);
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+}
+
+// Chevron trigger button
+.trigger {
+  @include button-reset;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  align-self: stretch;
+  width: 2rem;
+  margin-left: auto;
+  color: var(--fui-text-secondary, $fui-text-secondary);
+  cursor: pointer;
+  border-radius: 0 var(--fui-radius-md, $fui-radius-md) var(--fui-radius-md, $fui-radius-md) 0;
+  transition: color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  &[data-disabled] {
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    cursor: not-allowed;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    transition: transform var(--fui-transition-fast, $fui-transition-fast);
+  }
+
+  &[data-popup-open] svg {
+    transform: rotate(180deg);
+  }
+}
+
+// Positioner
+.positioner {
+  z-index: 50;
+  outline: none;
+}
+
+// Popup container
+.popup {
+  @include surface-elevated;
+
+  min-width: var(--anchor-width);
+  max-height: 20rem;
+  overflow-y: auto;
+  padding: var(--fui-space-1, $fui-space-1);
+  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+
+  // Animation
+  opacity: 0;
+  transform: scale(0.95);
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity var(--fui-transition-fast, $fui-transition-fast),
+    transform var(--fui-transition-fast, $fui-transition-fast);
+
+  &[data-open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+// Individual option
+.item {
+  @include button-reset;
+  @include text-base;
+
+  display: flex;
+  align-items: center;
+  gap: var(--fui-space-2, $fui-space-2);
+  width: 100%;
+  padding: var(--fui-space-2, $fui-space-2) var(--fui-space-3, $fui-space-3);
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  cursor: pointer;
+  outline: none;
+
+  &[data-highlighted] {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &[data-selected] {
+    background-color: var(--fui-color-accent, $fui-color-accent);
+    color: var(--fui-text-inverse, $fui-text-inverse);
+
+    &[data-highlighted] {
+      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+    cursor: not-allowed;
+  }
+}
+
+// Selection indicator (checkmark)
+.itemIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  margin-left: auto;
+
+  svg {
+    width: 0.875rem;
+    height: 0.875rem;
+  }
+}
+
+// Empty state
+.empty {
+  @include text-base;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--fui-space-4, $fui-space-4) var(--fui-space-3, $fui-space-3);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+}
+
+// Group container
+.group {
+  &:not(:first-child) {
+    margin-top: var(--fui-space-1, $fui-space-1);
+    padding-top: var(--fui-space-1, $fui-space-1);
+    border-top: 1px solid var(--fui-border, $fui-border);
+  }
+}
+
+// Group label
+.groupLabel {
+  padding: var(--fui-space-1, $fui-space-1) var(--fui-space-3, $fui-space-3);
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}

package/src/components/Combobox/index.tsx

@@ -0,0 +1,398 @@
+import * as React from 'react';
+import { Combobox as BaseCombobox } from '@base-ui/react/combobox';
+import styles from './Combobox.module.scss';
+// Import globals to ensure CSS variables are defined
+import '../../styles/globals.scss';
+
+// ============================================
+// Types
+// ============================================
+
+export interface ComboboxProps {
+  children: React.ReactNode;
+  /** Controlled selected value (string for single, string[] for multiple) */
+  value?: string | string[] | null;
+  /** Default selected value (uncontrolled) */
+  defaultValue?: string | string[];
+  /** Called when selection changes */
+  onValueChange?: (value: string | string[] | null) => void;
+  /** Whether multiple items can be selected */
+  multiple?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  required?: boolean;
+  name?: string;
+  placeholder?: string;
+  /** Auto-highlight first matching item while filtering */
+  autoHighlight?: boolean;
+}
+
+export interface ComboboxInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  className?: string;
+}
+
+export interface ComboboxTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export interface ComboboxContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  sideOffset?: number;
+  align?: 'start' | 'center' | 'end';
+}
+
+export interface ComboboxItemProps {
+  children: React.ReactNode;
+  value: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export interface ComboboxEmptyProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface ComboboxGroupProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export interface ComboboxGroupLabelProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+// ============================================
+// Icons
+// ============================================
+
+function ChevronDownIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+function XIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="12"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <line x1="18" y1="6" x2="6" y2="18" />
+      <line x1="6" y1="6" x2="18" y2="18" />
+    </svg>
+  );
+}
+
+// ============================================
+// Context for Combobox state
+// ============================================
+
+interface ComboboxContextValue {
+  placeholder?: string;
+  multiple?: boolean;
+  selectedValues: string[];
+  itemsRef: React.MutableRefObject<Map<string, string>>;
+  itemsVersion: number;
+  incrementItemsVersion: () => void;
+}
+
+const ComboboxContext = React.createContext<ComboboxContextValue>({
+  selectedValues: [],
+  itemsRef: { current: new Map() },
+  itemsVersion: 0,
+  incrementItemsVersion: () => {},
+});
+
+// ============================================
+// Components
+// ============================================
+
+function ComboboxRoot({
+  children,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  open,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  required,
+  name,
+  placeholder,
+  autoHighlight = true,
+}: ComboboxProps) {
+  // Track selected values for chip rendering
+  const [internalValue, setInternalValue] = React.useState<string | string[] | null>(
+    value ?? defaultValue ?? (multiple ? [] : null)
+  );
+
+  // Sync with controlled value
+  React.useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+
+  // Registry for item value → label mapping
+  const itemsRef = React.useRef<Map<string, string>>(new Map());
+  const [itemsVersion, setItemsVersion] = React.useState(0);
+  const incrementItemsVersion = React.useCallback(() => {
+    setItemsVersion((v) => v + 1);
+  }, []);
+
+  const handleValueChange = React.useCallback(
+    (newValue: string | string[] | null) => {
+      if (value === undefined) {
+        setInternalValue(newValue);
+      }
+      onValueChange?.(newValue);
+    },
+    [value, onValueChange]
+  );
+
+  const handleOpenChange = React.useCallback(
+    (nextOpen: boolean) => {
+      onOpenChange?.(nextOpen);
+    },
+    [onOpenChange]
+  );
+
+  // Convert value → label for input display
+  const itemToStringLabel = React.useCallback(
+    (itemValue: string) => {
+      return itemsRef.current.get(itemValue) ?? itemValue;
+    },
+    []
+  );
+
+  // Derive selected values array for chip rendering
+  const currentValue = value !== undefined ? value : internalValue;
+  const selectedValues = React.useMemo(() => {
+    if (currentValue == null) return [];
+    if (Array.isArray(currentValue)) return currentValue;
+    return [currentValue];
+  }, [currentValue]);
+
+  const contextValue = React.useMemo(
+    () => ({ placeholder, multiple, selectedValues, itemsRef, itemsVersion, incrementItemsVersion }),
+    [placeholder, multiple, selectedValues, itemsVersion, incrementItemsVersion]
+  );
+
+  return (
+    <ComboboxContext.Provider value={contextValue}>
+      <BaseCombobox.Root
+        value={value as any}
+        defaultValue={defaultValue as any}
+        onValueChange={handleValueChange as any}
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={handleOpenChange as any}
+        disabled={disabled}
+        required={required}
+        name={name}
+        multiple={multiple as any}
+        autoHighlight={autoHighlight}
+        itemToStringLabel={itemToStringLabel}
+      >
+        {children}
+      </BaseCombobox.Root>
+    </ComboboxContext.Provider>
+  );
+}
+
+function ComboboxInput({ className, ...htmlProps }: ComboboxInputProps) {
+  const context = React.useContext(ComboboxContext);
+  const classes = [styles.input, className].filter(Boolean).join(' ');
+
+  if (context.multiple) {
+    return (
+      <div className={styles.multiContainer}>
+        <div className={styles.inputWrapper}>
+          <BaseCombobox.Input
+            placeholder={context.selectedValues.length === 0 ? context.placeholder : undefined}
+            {...htmlProps}
+            className={classes}
+          />
+          <BaseCombobox.Trigger className={styles.trigger}>
+            <ChevronDownIcon />
+          </BaseCombobox.Trigger>
+        </div>
+        {context.selectedValues.length > 0 && (
+          <BaseCombobox.Chips className={styles.chips}>
+            {context.selectedValues.map((chipValue) => (
+              <BaseCombobox.Chip key={chipValue} className={styles.chip}>
+                <span className={styles.chipLabel}>
+                  {context.itemsRef.current.get(chipValue) ?? chipValue}
+                </span>
+                <BaseCombobox.ChipRemove className={styles.chipRemove}>
+                  <XIcon />
+                </BaseCombobox.ChipRemove>
+              </BaseCombobox.Chip>
+            ))}
+          </BaseCombobox.Chips>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.inputWrapper}>
+      <BaseCombobox.Input
+        placeholder={context.placeholder}
+        {...htmlProps}
+        className={classes}
+      />
+      <BaseCombobox.Trigger className={styles.trigger}>
+        <ChevronDownIcon />
+      </BaseCombobox.Trigger>
+    </div>
+  );
+}
+
+function ComboboxTrigger({ children, className, ...htmlProps }: ComboboxTriggerProps) {
+  const classes = [styles.trigger, className].filter(Boolean).join(' ');
+
+  return (
+    <BaseCombobox.Trigger {...htmlProps} className={classes}>
+      {children ?? <ChevronDownIcon />}
+    </BaseCombobox.Trigger>
+  );
+}
+
+function ComboboxContent({
+  children,
+  className,
+  sideOffset = 4,
+  align = 'start',
+  ...htmlProps
+}: ComboboxContentProps) {
+  const popupClasses = [styles.popup, className].filter(Boolean).join(' ');
+
+  return (
+    <BaseCombobox.Portal>
+      <BaseCombobox.Positioner
+        side="bottom"
+        sideOffset={sideOffset}
+        align={align}
+        className={styles.positioner}
+      >
+        <BaseCombobox.Popup {...htmlProps} className={popupClasses}>
+          {children}
+        </BaseCombobox.Popup>
+      </BaseCombobox.Positioner>
+    </BaseCombobox.Portal>
+  );
+}
+
+function ComboboxItem({ children, value, disabled, className }: ComboboxItemProps) {
+  const { itemsRef, incrementItemsVersion } = React.useContext(ComboboxContext);
+  const classes = [styles.item, className].filter(Boolean).join(' ');
+
+  // Register this item's label in the registry so the input can display it
+  const label = typeof children === 'string' ? children : String(children);
+  React.useEffect(() => {
+    itemsRef.current.set(value, label);
+    incrementItemsVersion();
+    return () => {
+      itemsRef.current.delete(value);
+    };
+    // itemsRef is a stable ref, incrementItemsVersion is a stable callback
+  }, [itemsRef, incrementItemsVersion, value, label]);
+
+  return (
+    <BaseCombobox.Item value={value} disabled={disabled} className={classes}>
+      {children}
+      <BaseCombobox.ItemIndicator className={styles.itemIndicator}>
+        <CheckIcon />
+      </BaseCombobox.ItemIndicator>
+    </BaseCombobox.Item>
+  );
+}
+
+function ComboboxEmpty({ children, className }: ComboboxEmptyProps) {
+  const classes = [styles.empty, className].filter(Boolean).join(' ');
+  return <BaseCombobox.Empty className={classes}>{children}</BaseCombobox.Empty>;
+}
+
+function ComboboxGroup({ children, className }: ComboboxGroupProps) {
+  const classes = [styles.group, className].filter(Boolean).join(' ');
+  return <BaseCombobox.Group className={classes}>{children}</BaseCombobox.Group>;
+}
+
+function ComboboxGroupLabel({ children, className }: ComboboxGroupLabelProps) {
+  const classes = [styles.groupLabel, className].filter(Boolean).join(' ');
+  return <BaseCombobox.GroupLabel className={classes}>{children}</BaseCombobox.GroupLabel>;
+}
+
+// ============================================
+// Export compound component
+// ============================================
+
+export const Combobox = Object.assign(ComboboxRoot, {
+  Input: ComboboxInput,
+  Trigger: ComboboxTrigger,
+  Content: ComboboxContent,
+  Item: ComboboxItem,
+  ItemIndicator: BaseCombobox.ItemIndicator,
+  Empty: ComboboxEmpty,
+  Group: ComboboxGroup,
+  GroupLabel: ComboboxGroupLabel,
+});
+
+// Re-export individual components
+export {
+  ComboboxRoot,
+  ComboboxInput,
+  ComboboxTrigger,
+  ComboboxContent,
+  ComboboxItem,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxGroupLabel,
+};