@scalepad/ui 0.1.0

package/src/components/Select/Select.tsx

@@ -0,0 +1,133 @@
+import { forwardRef, useId } from 'react';
+
+import { ChevronDown } from 'lucide-react';
+
+import { Combobox, useCombobox } from '@mantine/core';
+
+import * as styles from './Select.css';
+
+export interface SelectProps {
+  /**
+   * The label prefix to display before the selected value (e.g., "Department")
+   */
+  labelPrefix?: string;
+  /**
+   * Select options with value and label
+   */
+  data: Array<{ value: string; label: string }>;
+  /**
+   * Current selected value
+   */
+  value?: string | null;
+  /**
+   * Callback when value changes
+   */
+  onChange?: (value: string | null) => void;
+  /**
+   * Placeholder text when no value is selected
+   */
+  placeholder?: string;
+  /**
+   * Width of the select
+   */
+  w?: string | number;
+  /**
+   * Validation error message displayed below the select
+   */
+  error?: string;
+}
+
+/**
+ * Custom Select component matching Figma design specifications.
+ * Displays a label prefix in muted color before the selected value.
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   labelPrefix="Department"
+ *   data={[
+ *     { value: 'all', label: 'All' },
+ *     { value: 'sales', label: 'Sales' },
+ *   ]}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ * ```
+ */
+export const Select = forwardRef<HTMLButtonElement, SelectProps>(
+  ({ labelPrefix, data, value, onChange, placeholder, w, error }, ref) => {
+    const id = useId();
+    const errorId = error ? `${id}-error` : undefined;
+    const combobox = useCombobox({
+      onDropdownClose: () => combobox.resetSelectedOption(),
+    });
+
+    // Find the selected option label
+    const selectedOption = data.find(option => option.value === value);
+    const selectedLabel = selectedOption?.label || '';
+
+    const options = data.map(item => (
+      <Combobox.Option value={item.value} key={item.value}>
+        {item.label}
+      </Combobox.Option>
+    ));
+
+    return (
+      <div>
+        <Combobox
+          store={combobox}
+          width="max-content"
+          position="bottom-start"
+          withinPortal
+          onOptionSubmit={val => {
+            onChange?.(val);
+            combobox.closeDropdown();
+          }}
+        >
+          <Combobox.Target>
+            <button
+              ref={ref}
+              type="button"
+              className={styles.selectButton}
+              onClick={() => combobox.toggleDropdown()}
+              aria-haspopup="listbox"
+              aria-expanded={combobox.dropdownOpened}
+              aria-invalid={!!error}
+              aria-describedby={errorId}
+              style={
+                w ? { width: typeof w === 'number' ? `${w}px` : w } : undefined
+              }
+            >
+              <div className={styles.valueContainer}>
+                {labelPrefix && selectedLabel ? (
+                  <>
+                    <span className={styles.labelPrefix}>{labelPrefix}</span>
+                    <span className={styles.selectedValue}>
+                      {selectedLabel}
+                    </span>
+                  </>
+                ) : (
+                  <span className={styles.selectedValue}>
+                    {selectedLabel || placeholder}
+                  </span>
+                )}
+              </div>
+              <ChevronDown size={16} className={styles.chevron} />
+            </button>
+          </Combobox.Target>
+
+          <Combobox.Dropdown>
+            <Combobox.Options>{options}</Combobox.Options>
+          </Combobox.Dropdown>
+        </Combobox>
+        {error && (
+          <p id={errorId} className={styles.errorText} role="alert">
+            {error}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+Select.displayName = 'Select';

package/src/components/Select/index.ts

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

package/src/components/SelectCreatable/SelectCreatable.css.ts

@@ -0,0 +1,16 @@
+/**
+ * SelectCreatable component styles – vanilla-extract with semantic design tokens
+ */
+
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export const placeholderInput = style({
+  selectors: {
+    '&::placeholder': {
+      color: tokens.color.text.subduedDefault,
+      fontStyle: 'italic',
+    },
+  },
+});

package/src/components/SelectCreatable/SelectCreatable.tsx

@@ -0,0 +1,203 @@
+import { forwardRef, useMemo, useState } from 'react';
+
+import { Combobox, Divider, InputBase, useCombobox } from '@mantine/core';
+
+import * as styles from './SelectCreatable.css';
+
+const CREATE_OPTION_VALUE = '$create';
+
+export interface SelectCreatableProps {
+  /**
+   * Select options with value and label
+   */
+  data: Array<{ value: string; label: string }>;
+  /**
+   * Current selected value
+   */
+  value?: string | null;
+  /**
+   * Callback when value changes
+   */
+  onChange?: (value: string | null) => void;
+  /**
+   * Placeholder text when no value is selected
+   */
+  placeholder?: string;
+  /**
+   * Width of the select
+   */
+  w?: string | number;
+  /**
+   * When true, show "Create {searchText}" option when search doesn't match; on submit call onCreate(searchText).
+   * If onCreate returns Promise<string>, the resolved id is passed to onChange.
+   */
+  creatable?: boolean;
+  /**
+   * Called when user chooses to create a new option. If returns string or Promise<string>, that id is passed to onChange.
+   */
+  onCreate?: (searchValue: string) => void | string | Promise<string | void>;
+  /**
+   * Whether the trigger is disabled (e.g. while loading)
+   */
+  disabled?: boolean;
+}
+
+/**
+ * Searchable select with optional "Create" option.
+ * Uses InputBase as target: type to search, input shows selected label when closed.
+ * When creatable, shows "+ Create {searchText}" when search is non-empty and not an exact match.
+ *
+ * @example
+ * ```tsx
+ * <SelectCreatable
+ *   data={departments.map((d) => ({ value: d.id, label: d.name }))}
+ *   value={value}
+ *   onChange={setValue}
+ *   creatable
+ *   onCreate={async (name) => {
+ *     const newDept = await createDepartment(name);
+ *     return newDept.id;
+ *   }}
+ * />
+ * ```
+ */
+export const SelectCreatable = forwardRef<
+  HTMLInputElement,
+  SelectCreatableProps
+>(
+  (
+    {
+      data,
+      value,
+      onChange,
+      placeholder,
+      w,
+      creatable = false,
+      onCreate,
+      disabled = false,
+    },
+    ref,
+  ) => {
+    const [search, setSearch] = useState('');
+
+    const combobox = useCombobox({
+      onDropdownClose: () => {
+        combobox.resetSelectedOption();
+      },
+    });
+
+    const selectedOption = data.find(option => option.value === value);
+    const selectedLabel = selectedOption?.label ?? '';
+
+    const exactOptionMatch = data.some(
+      item => item.label.toLowerCase() === search.trim().toLowerCase(),
+    );
+    const filteredData = useMemo(() => {
+      if (exactOptionMatch) return data;
+      const q = search.trim().toLowerCase();
+      if (!q) return data;
+      return data.filter(item => item.label.toLowerCase().includes(q));
+    }, [data, search, exactOptionMatch]);
+
+    const searchTrimmed = search.trim();
+    const showCreateOption =
+      creatable &&
+      Boolean(onCreate) &&
+      searchTrimmed.length > 0 &&
+      !exactOptionMatch;
+
+    const handleOptionSubmit = (val: string) => {
+      if (val === CREATE_OPTION_VALUE) {
+        const runCreate = async () => {
+          const result = await onCreate?.(searchTrimmed);
+          if (typeof result === 'string') {
+            onChange?.(result);
+            const newLabel =
+              data.find(o => o.value === result)?.label ?? searchTrimmed;
+            setSearch(newLabel);
+          } else {
+            setSearch(selectedLabel);
+          }
+          combobox.closeDropdown();
+        };
+        void runCreate();
+        return;
+      }
+      const option = data.find(item => item.value === val);
+      onChange?.(val);
+      setSearch(option?.label ?? '');
+      combobox.closeDropdown();
+    };
+
+    const inputValue = combobox.dropdownOpened ? search : selectedLabel;
+    const hasValue = Boolean(value && selectedLabel);
+
+    const openDropdown = () => {
+      if (value && search !== selectedLabel) {
+        setSearch(selectedLabel);
+      }
+      combobox.openDropdown();
+    };
+
+    return (
+      <Combobox store={combobox} onOptionSubmit={handleOptionSubmit}>
+        <Combobox.Target>
+          <InputBase
+            ref={ref}
+            value={inputValue}
+            onChange={event => {
+              openDropdown();
+              combobox.updateSelectedOptionIndex();
+              setSearch(event.currentTarget.value);
+            }}
+            onClick={openDropdown}
+            onFocus={openDropdown}
+            onBlur={() => {
+              combobox.closeDropdown();
+              setSearch(selectedLabel);
+            }}
+            placeholder={placeholder}
+            disabled={disabled}
+            rightSection={<Combobox.Chevron />}
+            rightSectionPointerEvents="none"
+            w={w}
+            aria-expanded={combobox.dropdownOpened}
+            aria-haspopup="listbox"
+            classNames={{
+              input: !hasValue ? styles.placeholderInput : undefined,
+            }}
+          />
+        </Combobox.Target>
+
+        <Combobox.Dropdown>
+          <Combobox.Options
+            style={{
+              maxHeight: '300px',
+              overflowY: 'auto',
+            }}
+          >
+            {filteredData.map(item => (
+              <Combobox.Option value={item.value} key={item.value}>
+                {item.label}
+              </Combobox.Option>
+            ))}
+            {showCreateOption && (
+              <>
+                {filteredData.length > 0 && <Divider />}
+
+                <Combobox.Option
+                  value={CREATE_OPTION_VALUE}
+                  key={CREATE_OPTION_VALUE}
+                >
+                  + Create {searchTrimmed}
+                </Combobox.Option>
+              </>
+            )}
+          </Combobox.Options>
+        </Combobox.Dropdown>
+      </Combobox>
+    );
+  },
+);
+
+SelectCreatable.displayName = 'SelectCreatable';

package/src/components/SelectCreatable/index.ts

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

package/src/components/SettingsCard/SettingsCard.tsx

@@ -0,0 +1,98 @@
+import type { ReactNode } from 'react';
+
+import { ChevronRight } from 'lucide-react';
+
+import { Card, Flex, UnstyledButton } from '@mantine/core';
+
+import { tokens } from '../../theme/themeContract.css';
+import { Text } from '../Typography';
+
+export interface SettingsCardProps {
+  icon?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  onClick?: () => void;
+  rightSection?: ReactNode;
+  disabled?: boolean;
+}
+
+function SettingsCardContent({
+  icon,
+  title,
+  description,
+  rightSection,
+}: Omit<SettingsCardProps, 'onClick' | 'disabled'>) {
+  const resolvedRightSection =
+    rightSection === undefined ? (
+      <Flex align="center" c={tokens.color.icon.default}>
+        <ChevronRight size={20} data-testid="settings-card-chevron-right" />
+      </Flex>
+    ) : (
+      rightSection
+    );
+
+  return (
+    <Card withBorder radius="lg" p="md">
+      <Flex align="center" gap="xs">
+        {icon ? (
+          <Flex align="center" c={tokens.color.icon.default}>
+            {icon}
+          </Flex>
+        ) : null}
+        <Flex direction="column" style={{ minWidth: 0, flex: 1 }}>
+          <Text variant="caption1.strong" c="text.default">
+            {title}
+          </Text>
+          {description ? (
+            <Text variant="caption1" c="text.subdued.default">
+              {description}
+            </Text>
+          ) : null}
+        </Flex>
+        {resolvedRightSection}
+      </Flex>
+    </Card>
+  );
+}
+
+/**
+ * Shared settings row card used in account settings screens.
+ */
+export function SettingsCard({
+  icon,
+  title,
+  description,
+  onClick,
+  rightSection,
+  disabled = false,
+}: SettingsCardProps) {
+  if (!onClick) {
+    return (
+      <SettingsCardContent
+        icon={icon}
+        title={title}
+        description={description}
+        rightSection={rightSection}
+      />
+    );
+  }
+
+  return (
+    <UnstyledButton
+      w="100%"
+      onClick={onClick}
+      disabled={disabled}
+      style={{
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        borderRadius: tokens.radius.lg,
+      }}
+    >
+      <SettingsCardContent
+        icon={icon}
+        title={title}
+        description={description}
+        rightSection={rightSection}
+      />
+    </UnstyledButton>
+  );
+}

package/src/components/SettingsCard/index.ts

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

package/src/components/Sidebar/Sidebar.css.ts

@@ -0,0 +1,91 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+import { textStyleVariants } from '../../tokens/text-styles';
+
+export const item = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing.xs,
+  height: tokens.spacing['2xl'],
+  paddingInline: tokens.spacing.sm,
+  paddingBlock: tokens.spacing['2xs'],
+  borderRadius: tokens.radius.md,
+  textDecoration: 'none',
+  border: 'none',
+  background: 'transparent',
+  cursor: 'pointer',
+  color: tokens.color.text.subduedStrong,
+  ...textStyleVariants.caption1,
+  fontFamily: 'inherit',
+  transition: 'background-color 120ms ease, color 120ms ease',
+  selectors: {
+    '&:hover': {
+      backgroundColor: tokens.color.background.subduedLightHover,
+    },
+  },
+});
+
+export const itemActive = style({
+  backgroundColor: tokens.color.background.primaryLight,
+  color: tokens.color.text.primaryDefault,
+  ...textStyleVariants['body1.stronger'],
+  fontFamily: 'inherit',
+  selectors: {
+    '&:hover': {
+      backgroundColor: tokens.color.background.primaryLightHover,
+    },
+  },
+});
+
+export const itemDisabled = style({
+  cursor: 'default',
+  color: tokens.color.text.subduedDefault,
+  opacity: 0.5,
+  selectors: {
+    '&:hover': {
+      backgroundColor: 'transparent',
+    },
+  },
+});
+
+export const itemCollapsed = style({
+  width: '100%',
+  justifyContent: 'center',
+  paddingInline: tokens.spacing['2xs'],
+});
+
+export const itemIcon = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: 16,
+  height: 16,
+});
+
+export const itemLabelCollapsed = style({
+  display: 'none',
+});
+
+export const tooltipTarget = style({
+  display: 'block',
+  width: '100%',
+});
+
+export const groupLabel = style({
+  display: 'flex',
+  alignItems: 'center',
+  paddingInline: tokens.spacing.sm,
+  paddingBlock: tokens.spacing['2xs'],
+  color: tokens.color.text.subduedDefault,
+  ...textStyleVariants['caption2.strong'],
+  fontFamily: 'inherit',
+});
+
+export const divider = style({
+  height: 1,
+  width: '100%',
+  backgroundColor: tokens.color.stroke.subduedDefault,
+  flexShrink: 0,
+});

package/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,129 @@
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ReactNode,
+} from 'react';
+
+import { Tooltip } from '@mantine/core';
+
+import * as classes from './Sidebar.css';
+
+// ---------------------------------------------------------------------------
+// Sidebar.Item – polymorphic nav item (renders as <button> by default,
+// accepts `component` to render as a TanStack Router Link, <a>, etc.)
+// ---------------------------------------------------------------------------
+
+type SidebarItemOwnProps = {
+  icon?: ReactNode;
+  label: string;
+  active?: boolean;
+  disabled?: boolean;
+  collapsed?: boolean;
+};
+
+type PolymorphicProps<C extends ElementType> = SidebarItemOwnProps &
+  Omit<ComponentPropsWithoutRef<C>, keyof SidebarItemOwnProps | 'component'> & {
+    component?: C;
+  };
+
+function SidebarItemInner<C extends ElementType = 'button'>({
+  component,
+  icon,
+  label,
+  active = false,
+  disabled = false,
+  collapsed = false,
+  className,
+  ...rest
+}: PolymorphicProps<C>) {
+  const hasNavigationTarget =
+    'href' in rest || 'to' in rest || 'onClick' in rest;
+  const Component: ElementType = hasNavigationTarget
+    ? (component ?? 'button')
+    : 'button';
+  const isDisabled = disabled || !hasNavigationTarget;
+  const isButtonComponent = Component === 'button';
+  const combinedClassName = [
+    classes.item,
+    active && classes.itemActive,
+    isDisabled && classes.itemDisabled,
+    collapsed && classes.itemCollapsed,
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const itemNode = (
+    <Component
+      aria-disabled={isDisabled && !isButtonComponent ? true : undefined}
+      aria-label={collapsed ? label : undefined}
+      className={combinedClassName}
+      disabled={isDisabled && isButtonComponent ? true : undefined}
+      type={isButtonComponent ? 'button' : undefined}
+      {...rest}
+    >
+      {icon && (
+        <span aria-hidden="true" className={classes.itemIcon}>
+          {icon}
+        </span>
+      )}
+      <span className={collapsed ? classes.itemLabelCollapsed : undefined}>
+        {label}
+      </span>
+    </Component>
+  );
+
+  if (!collapsed) {
+    return itemNode;
+  }
+
+  return (
+    <Tooltip label={label} position="right">
+      <div className={classes.tooltipTarget}>{itemNode}</div>
+    </Tooltip>
+  );
+}
+
+const SidebarItem = SidebarItemInner as <C extends ElementType = 'button'>(
+  props: PolymorphicProps<C>,
+) => ReactNode;
+
+// ---------------------------------------------------------------------------
+// Sidebar.GroupLabel – section header (e.g. "Workflow", "Portfolio")
+// ---------------------------------------------------------------------------
+
+interface SidebarGroupLabelProps {
+  children: ReactNode;
+  className?: string;
+}
+
+function SidebarGroupLabel({ children, className }: SidebarGroupLabelProps) {
+  return (
+    <div className={`${classes.groupLabel}${className ? ` ${className}` : ''}`}>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Sidebar.Divider – thin horizontal separator between groups
+// ---------------------------------------------------------------------------
+
+function SidebarDivider({ className }: { className?: string }) {
+  return (
+    <div className={`${classes.divider}${className ? ` ${className}` : ''}`} />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Compound export
+// ---------------------------------------------------------------------------
+
+export type { SidebarItemOwnProps as SidebarItemProps };
+export type { SidebarGroupLabelProps };
+
+export const Sidebar = {
+  Item: SidebarItem,
+  GroupLabel: SidebarGroupLabel,
+  Divider: SidebarDivider,
+};

package/src/components/Sidebar/index.ts

@@ -0,0 +1,5 @@
+export {
+  Sidebar,
+  type SidebarItemProps,
+  type SidebarGroupLabelProps,
+} from './Sidebar';

package/src/components/SimpleList/SimpleList.css.ts

@@ -0,0 +1,12 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export const list = style({
+  margin: 0,
+  paddingLeft: tokens.spacing.md,
+});
+
+export const item = style({
+  margin: 0,
+});