@scalepad/ui 0.1.0

package/src/components/LookupSelect/LookupSelect.tsx

@@ -0,0 +1,325 @@
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type KeyboardEvent,
+} from 'react';
+
+import { ChevronDown, Search } from 'lucide-react';
+
+import { Combobox, useCombobox } from '@mantine/core';
+
+import { useDebouncedValue } from '@scalepad/ui-utils/hooks';
+
+import { Avatar, Loader } from '../DesignSystemPrimitives';
+import { Text } from '../Typography';
+import * as styles from './LookupSelect.css';
+
+import type { BackgroundColor } from '../../tokens/color-types';
+import type { SearchableListSearchMode } from '../SearchableList/types';
+
+/**
+ * Semantic background tokens usable as avatar fill colors. Cycled through to give each
+ * option a stable, differentiated accent derived from its label.
+ */
+const AVATAR_PALETTE: readonly BackgroundColor[] = [
+  'background.primary.filled',
+  'background.information.filled',
+  'background.success.filled',
+  'background.warning.filled',
+  'background.danger.filled',
+  'background.subdued.filled',
+];
+
+function hashString(value: string): number {
+  let hash = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash * 31 + value.charCodeAt(index)) | 0;
+  }
+  return Math.abs(hash);
+}
+
+function getAvatarColor(label: string): BackgroundColor {
+  return AVATAR_PALETTE[hashString(label) % AVATAR_PALETTE.length]!;
+}
+
+function getInitial(label: string): string {
+  const trimmed = label.trim();
+  return trimmed.length > 0 ? trimmed[0]!.toUpperCase() : '?';
+}
+
+export interface LookupSelectOption {
+  value: string;
+  label: string;
+  description?: string;
+}
+
+export interface LookupSelectProps {
+  /** Options to display. When `searchMode` is `server`, this is expected to be pre-filtered. */
+  data: LookupSelectOption[];
+  /** Current selected value. */
+  value?: string | null;
+  /**
+   * Callback fired when the selected value changes. The second argument is the full option
+   * that was selected, which lets consumers persist fields (like `label`) that may not be
+   * present in `data` after a subsequent server-side search.
+   */
+  onChange?: (value: string | null, option: LookupSelectOption | null) => void;
+  /** Trigger placeholder shown when no option is selected. */
+  placeholder?: string;
+  /** Placeholder shown in the dropdown search input. */
+  searchPlaceholder?: string;
+  /** Disables the trigger and prevents opening the dropdown. */
+  disabled?: boolean;
+  /**
+   * `client` filters `data` locally by the search text. `server` treats `data` as already-filtered
+   * and invokes `onSearchChange` with a debounced query whenever the user types.
+   *
+   * @default 'client'
+   */
+  searchMode?: SearchableListSearchMode;
+  /** Called with the trimmed, debounced search query. Primarily for `searchMode="server"`. */
+  onSearchChange?: (query: string) => void;
+  /**
+   * Debounce delay (ms) applied to `onSearchChange`.
+   *
+   * @default 250
+   */
+  searchDebounceMs?: number;
+  /** Shows a spinner next to the search input when true. */
+  isLoading?: boolean;
+  /** Message shown when there are no options to display. */
+  nothingFoundMessage?: string;
+  /** Persistent message rendered at the bottom of the dropdown (e.g. validation hint). */
+  footerMessage?: string;
+  /** Width of the trigger. */
+  w?: string | number;
+}
+
+/**
+ * Searchable lookup picker that displays a colored avatar for each option and renders a
+ * search-driven dropdown panel separate from the trigger.
+ *
+ * @example
+ * ```tsx
+ * <LookupSelect
+ *   data={clients.map((c) => ({ value: c.id, label: c.name }))}
+ *   value={clientId}
+ *   onChange={setClientId}
+ *   searchMode="server"
+ *   onSearchChange={setSearch}
+ *   isLoading={query.isFetching}
+ *   footerMessage="Client is required to save an initiative"
+ * />
+ * ```
+ */
+export const LookupSelect = forwardRef<HTMLButtonElement, LookupSelectProps>(
+  (
+    {
+      data,
+      value,
+      onChange,
+      placeholder = 'Select',
+      searchPlaceholder = 'Search',
+      disabled = false,
+      searchMode = 'client',
+      onSearchChange,
+      searchDebounceMs = 250,
+      isLoading = false,
+      nothingFoundMessage,
+      footerMessage,
+      w,
+    },
+    ref,
+  ) => {
+    const [search, setSearch] = useState('');
+    const searchInputRef = useRef<HTMLInputElement | null>(null);
+
+    const combobox = useCombobox({
+      onDropdownClose: () => {
+        combobox.resetSelectedOption();
+        setSearch('');
+      },
+      onDropdownOpen: () => {
+        combobox.updateSelectedOptionIndex('active');
+        window.setTimeout(() => searchInputRef.current?.focus(), 0);
+      },
+    });
+
+    // Cache the last option whose value matched so the trigger keeps showing the selection
+    // even when the consumer replaces `data` (e.g. server-side search results that filter
+    // the selected option out of the visible list).
+    const selectedOptionRef = useRef<LookupSelectOption | null>(null);
+    const matchedOption = data.find(option => option.value === value) ?? null;
+    if (matchedOption) {
+      selectedOptionRef.current = matchedOption;
+    } else if (value == null) {
+      selectedOptionRef.current = null;
+    }
+    const selectedOption = matchedOption ?? selectedOptionRef.current;
+
+    const filteredData = useMemo(() => {
+      if (searchMode === 'server') return data;
+      const query = search.trim().toLowerCase();
+      if (!query) return data;
+      return data.filter(item => item.label.toLowerCase().includes(query));
+    }, [data, search, searchMode]);
+
+    const [debouncedSearch] = useDebouncedValue(search, searchDebounceMs);
+    useEffect(() => {
+      if (searchMode !== 'server') return;
+      onSearchChange?.(debouncedSearch.trim());
+    }, [debouncedSearch, onSearchChange, searchMode]);
+
+    const handleOptionSubmit = (submittedValue: string) => {
+      const submittedOption =
+        data.find(option => option.value === submittedValue) ?? null;
+      onChange?.(submittedValue, submittedOption);
+      combobox.closeDropdown();
+    };
+
+    const handleSearchKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.nativeEvent.isComposing) {
+        return;
+      }
+      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+        event.preventDefault();
+        if (event.key === 'ArrowDown') {
+          combobox.selectNextOption();
+        } else {
+          combobox.selectPreviousOption();
+        }
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        combobox.clickSelectedOption();
+      } else if (event.key === 'Escape') {
+        event.preventDefault();
+        combobox.closeDropdown();
+      }
+    };
+
+    const triggerStyle = w
+      ? { width: typeof w === 'number' ? `${w}px` : w }
+      : undefined;
+
+    return (
+      <Combobox store={combobox} onOptionSubmit={handleOptionSubmit}>
+        <Combobox.Target>
+          <button
+            ref={ref}
+            type="button"
+            className={styles.trigger}
+            onClick={() => {
+              if (!disabled) combobox.toggleDropdown();
+            }}
+            disabled={disabled}
+            aria-haspopup="listbox"
+            aria-expanded={combobox.dropdownOpened}
+            style={triggerStyle}
+          >
+            <span className={styles.triggerValue}>
+              {selectedOption ? (
+                <>
+                  <Avatar
+                    size="sm"
+                    radius="sm"
+                    color={getAvatarColor(selectedOption.label)}
+                  >
+                    {getInitial(selectedOption.label)}
+                  </Avatar>
+                  <Text
+                    variant="body1.strong"
+                    c="text.default"
+                    className={styles.triggerLabel}
+                  >
+                    {selectedOption.label}
+                  </Text>
+                </>
+              ) : (
+                <Text
+                  variant="body1"
+                  c="text.subdued.default"
+                  className={styles.triggerLabel}
+                >
+                  {placeholder}
+                </Text>
+              )}
+            </span>
+            <ChevronDown className={styles.chevron} aria-hidden />
+          </button>
+        </Combobox.Target>
+
+        <Combobox.Dropdown p={0}>
+          <div className={styles.searchRow}>
+            <Search className={styles.searchIcon} aria-hidden />
+            <input
+              ref={searchInputRef}
+              type="text"
+              className={styles.searchInput}
+              value={search}
+              onChange={event => setSearch(event.currentTarget.value)}
+              onKeyDown={handleSearchKeyDown}
+              placeholder={searchPlaceholder}
+              aria-label={searchPlaceholder}
+              autoComplete="off"
+            />
+            {isLoading && <Loader size="xs" />}
+          </div>
+
+          <Combobox.Options className={styles.options}>
+            {filteredData.map(item => (
+              <Combobox.Option
+                value={item.value}
+                key={item.value}
+                className={styles.optionRoot}
+              >
+                <div className={styles.option}>
+                  <Avatar
+                    size="sm"
+                    radius="sm"
+                    color={getAvatarColor(item.label)}
+                  >
+                    {getInitial(item.label)}
+                  </Avatar>
+                  <div className={styles.optionText}>
+                    <Text
+                      variant="body1.strong"
+                      c="text.default"
+                      className={styles.optionLabel}
+                    >
+                      {item.label}
+                    </Text>
+                    {item.description && (
+                      <Text
+                        variant="caption2"
+                        c="text.subdued.default"
+                        className={styles.optionLabel}
+                      >
+                        {item.description}
+                      </Text>
+                    )}
+                  </div>
+                </div>
+              </Combobox.Option>
+            ))}
+            {filteredData.length === 0 && !isLoading && nothingFoundMessage && (
+              <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>
+            )}
+          </Combobox.Options>
+
+          {footerMessage && (
+            <div className={styles.footer}>
+              <Text variant="caption2" c="text.subdued.default">
+                {footerMessage}
+              </Text>
+            </div>
+          )}
+        </Combobox.Dropdown>
+      </Combobox>
+    );
+  },
+);
+
+LookupSelect.displayName = 'LookupSelect';

package/src/components/LookupSelect/index.ts

@@ -0,0 +1,2 @@
+export { LookupSelect } from './LookupSelect';
+export type { LookupSelectOption, LookupSelectProps } from './LookupSelect';

package/src/components/Menu/Menu.css.ts

@@ -0,0 +1,89 @@
+/**
+ * Menu component styles – vanilla-extract with semantic design tokens.
+ * Matches Figma design system: Menu, Menu.Item, Menu.Label, submenu triggers (itemSection), divider.
+ */
+
+import { style } from '@vanilla-extract/css';
+
+import { mantineVars } from '../../theme/mantineVars';
+import { tokens } from '../../theme/themeContract.css';
+
+/** Dropdown container (root and Menu.Sub.Dropdown) */
+export const dropdown = style({
+  backgroundColor: tokens.color.background.default,
+  border: `1px solid ${tokens.color.stroke.default}`,
+  borderRadius: tokens.radius.lg,
+  boxShadow: tokens.shadow.md,
+  padding: tokens.spacing['2xs'],
+  gap: 0,
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+/** Menu item and submenu trigger (Menu.Item, Menu.Sub.Item) */
+export const item = style({
+  borderRadius: tokens.radius.md,
+  minHeight: 32,
+  padding: `${tokens.spacing.xs} ${tokens.spacing.xs}`,
+  fontSize: 14,
+  lineHeight: 1,
+  color: tokens.color.text.default,
+  transition: 'background-color 150ms ease',
+  selectors: {
+    '&:hover:not([data-disabled])': {
+      backgroundColor: tokens.color.background.primaryLight,
+    },
+    '&[data-disabled]': {
+      color: tokens.color.text.disabledDefault,
+      cursor: 'not-allowed',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      color: tokens.color.text.default,
+    },
+    [`${mantineVars.darkSelector} &:hover:not([data-disabled])`]: {
+      backgroundColor: tokens.color.background.primaryLight,
+    },
+  },
+});
+
+/**
+ * Applied when Menu.Item receives a theme-token color prop.
+ * Reads --lm-menu-item-color (set inline by MenuItemWrapper) so design-system
+ * item colors do not conflict with Mantine's internal menu variables.
+ */
+export const itemWithColor = style({
+  color: 'var(--lm-menu-item-color)',
+});
+
+/** Group label (Menu.Label, optgroup-style) – Caption 2 */
+export const label = style({
+  fontSize: 12,
+  lineHeight: 1,
+  color: tokens.color.text.subduedDefault,
+  padding: `5.5px ${tokens.spacing.xs}`,
+  minHeight: 32,
+  fontWeight: 400,
+});
+
+/** Visible text label inside Menu.Item. Inherit row color so semantic item variants color the text. */
+export const itemLabel = style({
+  color: 'inherit',
+});
+
+/** Left/right sections of Menu.Item (e.g. submenu chevron). Use inherit so item token color flows through. */
+export const itemSection = style({
+  color: 'inherit',
+  flexShrink: 0,
+  width: 20,
+  height: 20,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+});
+
+/** Divider between groups */
+export const divider = style({
+  borderTop: `1px solid ${tokens.color.stroke.subduedDefault}`,
+  marginTop: 0,
+  marginBottom: 0,
+});

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,105 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+} from 'react';
+
+import { clsx } from 'clsx';
+
+import {
+  Menu as MantineMenu,
+  type MenuItemProps as MantineMenuItemProps,
+} from '@mantine/core';
+
+import * as classes from './Menu.css';
+import { resolveColorToken } from '../../utils/color-props';
+import { withStaticComponents } from '../../utils/withStaticComponents';
+
+type MantineMenuProps = ComponentPropsWithoutRef<typeof MantineMenu>;
+type BaseMenuItemProps = ComponentPropsWithoutRef<'button'> &
+  Omit<MantineMenuItemProps, 'color' | 'c' | 'onClick'>;
+
+export type MenuItemVariant = 'destructive';
+
+export interface MenuItemProps extends BaseMenuItemProps {
+  /** Semantic menu row styling. */
+  variant?: MenuItemVariant;
+}
+
+function resolveMenuItemColor(variant?: MenuItemVariant) {
+  if (variant === 'destructive') {
+    return resolveColorToken('text.danger.default');
+  }
+
+  return undefined;
+}
+
+const MenuItemWrapper = forwardRef<HTMLButtonElement, MenuItemProps>(
+  ({ variant, style: styleProp, className, ...rest }, ref) => {
+    const resolvedColor = resolveMenuItemColor(variant);
+    const baseStyle: CSSProperties =
+      styleProp != null &&
+      typeof styleProp === 'object' &&
+      !Array.isArray(styleProp)
+        ? { ...styleProp }
+        : {};
+
+    const resolvedStyle: CSSProperties =
+      resolvedColor != null
+        ? { ...baseStyle, ['--lm-menu-item-color' as string]: resolvedColor }
+        : baseStyle;
+
+    const resolvedClassName =
+      resolvedColor != null
+        ? clsx(classes.itemWithColor, className)
+        : className;
+
+    return (
+      <MantineMenu.Item
+        ref={ref}
+        style={resolvedStyle}
+        className={resolvedClassName}
+        data-variant={variant}
+        {...rest}
+      />
+    );
+  },
+);
+MenuItemWrapper.displayName = 'MenuItem';
+
+/**
+ * Design-system Menu: Mantine Menu with vanilla-extract styles from the theme contract.
+ * Preserves full API: Menu.Target, Menu.Dropdown, Menu.Item, Menu.Label, Menu.Divider, Menu.Sub, etc.
+ * Menu.Item exposes only safe semantic variants instead of raw color props.
+ */
+function MenuWrapper(props: MantineMenuProps) {
+  return (
+    <MantineMenu
+      classNames={{
+        dropdown: classes.dropdown,
+        item: classes.item,
+        label: classes.label,
+        itemLabel: classes.itemLabel,
+        itemSection: classes.itemSection,
+        divider: classes.divider,
+      }}
+      {...props}
+    />
+  );
+}
+
+type MenuComponent = typeof MenuWrapper &
+  Omit<typeof MantineMenu, 'Item'> & {
+    Item: typeof MenuItemWrapper;
+  };
+
+const menuStaticComponents: Omit<typeof MantineMenu, 'Item'> & {
+  Item: typeof MenuItemWrapper;
+} = { ...MantineMenu, Item: MenuItemWrapper };
+
+export const Menu: MenuComponent = withStaticComponents(
+  MenuWrapper,
+  menuStaticComponents,
+);
+
+export type { MenuProps } from '@mantine/core';

package/src/components/Menu/index.ts

@@ -0,0 +1,2 @@
+export { Menu } from './Menu';
+export type { MenuItemProps, MenuItemVariant, MenuProps } from './Menu';

package/src/components/MessageBox/MessageBox.tsx

@@ -0,0 +1,168 @@
+import { useMemo } from 'react';
+
+import { AlertCircle, AlertTriangle, CheckCircle, Info } from 'lucide-react';
+
+import { Flex, Stack } from '@mantine/core';
+
+import {
+  resolveColorToken,
+  type BackgroundColor,
+  type IconColor,
+  type TextColor,
+} from '../../utils/color-props';
+import { Button } from '../Button';
+import { Text } from '../Typography';
+
+export interface MessageBoxProps {
+  /**
+   * Visual variant of the message box
+   * @default 'default'
+   */
+  variant?: 'default' | 'danger' | 'success' | 'warning' | 'info';
+  /**
+   * Action button label (if provided, renders a button)
+   */
+  actionButton?: string;
+  /**
+   * Action button variant
+   */
+  actionButtonVariant?:
+    | 'primary'
+    | 'secondary'
+    | 'outline'
+    | 'ghost'
+    | 'ghost-muted'
+    | 'destructive';
+  /**
+   * Whether the action button is in loading state
+   */
+  actionLoading?: boolean;
+  /**
+   * Whether to show the icon
+   * @default true
+   */
+  showIcon?: boolean;
+  /**
+   * Main content of the message box
+   */
+  children: React.ReactNode;
+  /**
+   * Callback when action button is clicked
+   */
+  onActionClick?: () => void;
+}
+
+interface VariantStyles {
+  backgroundColor: BackgroundColor;
+  iconColor: IconColor;
+  textColor: TextColor;
+}
+
+function resolveCssColor(token: BackgroundColor | IconColor | TextColor) {
+  return resolveColorToken(token) as string | undefined;
+}
+
+/**
+ * MessageBox component
+ * Displays a message with optional icon and action button, with color-coded variants
+ */
+export function MessageBox({
+  variant = 'default',
+  actionButton,
+  actionButtonVariant,
+  actionLoading = false,
+  showIcon = true,
+  children,
+  onActionClick,
+}: MessageBoxProps) {
+  // Get variant-specific styles
+  const styles = useMemo((): VariantStyles => {
+    switch (variant) {
+      case 'danger':
+        return {
+          backgroundColor: 'background.danger.light',
+          iconColor: 'icon.danger.default',
+          textColor: 'text.danger.default',
+        };
+      case 'success':
+        return {
+          backgroundColor: 'background.success.light',
+          iconColor: 'icon.success.default',
+          textColor: 'text.success.default',
+        };
+      case 'warning':
+        return {
+          backgroundColor: 'background.warning.light',
+          iconColor: 'icon.warning.default',
+          textColor: 'text.warning.default',
+        };
+      case 'info':
+        return {
+          backgroundColor: 'background.information.light',
+          iconColor: 'icon.information.default',
+          textColor: 'text.information.default',
+        };
+      case 'default':
+      default:
+        return {
+          backgroundColor: 'background.subdued.light',
+          iconColor: 'icon.default',
+          textColor: 'text.subdued.default',
+        };
+    }
+  }, [variant]);
+
+  // Get icon for variant
+  const icon = useMemo(() => {
+    if (!showIcon) return null;
+
+    const iconSize = 16;
+    const iconColor = resolveCssColor(styles.iconColor);
+
+    switch (variant) {
+      case 'danger':
+        return <AlertCircle size={iconSize} color={iconColor} />;
+      case 'success':
+        return <CheckCircle size={iconSize} color={iconColor} />;
+      case 'warning':
+        return <AlertTriangle size={iconSize} color={iconColor} />;
+      case 'info':
+        return <Info size={iconSize} color={iconColor} />;
+      case 'default':
+      default:
+        return <Info size={iconSize} color={iconColor} />;
+    }
+  }, [variant, showIcon, styles.iconColor]);
+
+  return (
+    <Flex
+      direction="column"
+      gap="md"
+      p="md"
+      style={{
+        backgroundColor: resolveCssColor(styles.backgroundColor),
+        borderRadius: 'var(--radius-md)',
+      }}
+    >
+      <Flex direction="row" gap="xs" align="flex-start">
+        {icon && <Flex flex="none">{icon}</Flex>}
+        <Stack justify="start">
+          <Text variant="caption1.stronger" c={styles.textColor}>
+            {children}
+          </Text>
+          {actionButton && (
+            <Button
+              variant={actionButtonVariant}
+              size="sm"
+              w="fit-content"
+              onClick={onActionClick}
+              loading={actionLoading}
+            >
+              {actionButton}
+            </Button>
+          )}
+        </Stack>
+      </Flex>
+    </Flex>
+  );
+}

package/src/components/MessageBox/index.ts

@@ -0,0 +1,2 @@
+export { MessageBox } from './MessageBox';
+export type { MessageBoxProps } from './MessageBox';