@scalepad/ui 0.1.0

package/src/components/Schedule/Schedule.tsx

@@ -0,0 +1,35 @@
+// Thin re-export wrapper around `@mantine/schedule` so consumers can import the
+// Schedule component and its helpers from the design system surface
+// (`@scalepad/ui`) instead of reaching into Mantine directly. Keep this file
+// intentionally shallow — any future DS-specific styling or wrapping should
+// live alongside.
+
+export {
+  DEFAULT_SCHEDULE_LABELS,
+  DayView,
+  MobileMonthView,
+  MonthView,
+  Schedule,
+  ScheduleEvent,
+  ScheduleHeader,
+  WeekView,
+  YearView,
+  getLabel,
+} from '@mantine/schedule';
+export type {
+  DateStringValue,
+  DateTimeStringValue,
+  DayViewProps,
+  MonthViewProps,
+  RenderEventBody,
+  ScheduleEventData,
+  ScheduleLabels,
+  ScheduleLabelsOverride,
+  ScheduleLayout,
+  ScheduleMode,
+  ScheduleProps,
+  ScheduleRecurrenceData,
+  ScheduleViewLevel,
+  WeekViewProps,
+  YearViewProps,
+} from '@mantine/schedule';

package/src/components/SchedulePicker/SchedulePicker.css.ts

@@ -0,0 +1,42 @@
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+
+export const quarterGrid = style({
+  display: 'grid',
+  gridTemplateColumns: 'repeat(4, 1fr)',
+  gap: tokens.spacing['2xs'],
+});
+
+export const quarterButton = style({
+  padding: `${tokens.spacing['2xs']} 0`,
+  border: `1px solid ${tokens.color.stroke.subduedDefault}`,
+  backgroundColor: tokens.color.background.default,
+  borderRadius: tokens.radius.sm,
+  cursor: 'pointer',
+  color: tokens.color.text.default,
+
+  ':hover': {
+    backgroundColor: tokens.color.background.subduedLight,
+  },
+  ':focus-visible': {
+    outline: 'none',
+    borderColor: tokens.color.stroke.focusDefault,
+  },
+});
+
+export const quarterButtonSelected = style({
+  backgroundColor: tokens.color.background.subduedLight,
+  borderColor: tokens.color.stroke.default,
+});
+
+export const yearRow = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: tokens.spacing['2xs'],
+});
+
+export const yearValue = style({
+  flex: 1,
+  textAlign: 'center',
+});

package/src/components/SchedulePicker/SchedulePicker.tsx

@@ -0,0 +1,130 @@
+import { useMemo, type KeyboardEvent as ReactKeyboardEvent } from 'react';
+
+import { Minus, Plus } from 'lucide-react';
+
+import { IconButton } from '../IconButton';
+import { Text } from '../Typography';
+import * as classes from './SchedulePicker.css';
+
+type RadioOrientation = 'vertical' | 'horizontal';
+
+function handleRadioGroupKeyDown(
+  event: ReactKeyboardEvent<HTMLDivElement>,
+  orientation: RadioOrientation,
+) {
+  const forwardKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+  const backwardKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+  const { key } = event;
+
+  if (
+    key !== forwardKey &&
+    key !== backwardKey &&
+    key !== 'Home' &&
+    key !== 'End'
+  ) {
+    return;
+  }
+
+  const container = event.currentTarget;
+  const options = Array.from(
+    container.querySelectorAll<HTMLElement>('[data-picker-option]'),
+  );
+  if (options.length === 0) return;
+
+  event.preventDefault();
+  event.stopPropagation();
+
+  const active = document.activeElement as HTMLElement | null;
+  const currentIndex = active ? options.indexOf(active) : -1;
+
+  let nextIndex: number;
+  if (key === 'Home') {
+    nextIndex = 0;
+  } else if (key === 'End') {
+    nextIndex = options.length - 1;
+  } else if (currentIndex === -1) {
+    nextIndex = 0;
+  } else if (key === forwardKey) {
+    nextIndex = (currentIndex + 1) % options.length;
+  } else {
+    nextIndex = (currentIndex - 1 + options.length) % options.length;
+  }
+
+  options[nextIndex]?.focus();
+}
+
+const YEAR_MIN = 2000;
+const YEAR_MAX = 2100;
+
+export interface FiscalQuarterValue {
+  year: number;
+  quarter: number;
+}
+
+export interface SchedulePickerProps {
+  value: FiscalQuarterValue;
+  onChange: (value: FiscalQuarterValue) => void;
+}
+
+export function SchedulePicker({ value, onChange }: SchedulePickerProps) {
+  const quarters = useMemo(() => [1, 2, 3, 4] as const, []);
+  const clampYear = (year: number) =>
+    Math.min(YEAR_MAX, Math.max(YEAR_MIN, year));
+
+  return (
+    <>
+      <div
+        className={classes.quarterGrid}
+        role="radiogroup"
+        aria-label="Quarter"
+        tabIndex={-1}
+        onKeyDown={event => handleRadioGroupKeyDown(event, 'horizontal')}
+      >
+        {quarters.map(q => {
+          const selected = value.quarter === q;
+          return (
+            <button
+              key={q}
+              type="button"
+              role="radio"
+              aria-checked={selected}
+              data-picker-option
+              data-autofocus={selected ? true : undefined}
+              className={`${classes.quarterButton} ${
+                selected ? classes.quarterButtonSelected : ''
+              }`.trim()}
+              onClick={() => onChange({ ...value, quarter: q })}
+            >
+              <Text variant="caption1.strong">Q{q}</Text>
+            </button>
+          );
+        })}
+      </div>
+      <div className={classes.yearRow}>
+        <IconButton
+          aria-label="Previous year"
+          variant="ghost-muted"
+          size="xs"
+          onClick={() =>
+            onChange({ ...value, year: clampYear(value.year - 1) })
+          }
+        >
+          <Minus size={14} />
+        </IconButton>
+        <span className={classes.yearValue}>
+          <Text variant="body1.strong">{value.year}</Text>
+        </span>
+        <IconButton
+          aria-label="Next year"
+          variant="ghost-muted"
+          size="xs"
+          onClick={() =>
+            onChange({ ...value, year: clampYear(value.year + 1) })
+          }
+        >
+          <Plus size={14} />
+        </IconButton>
+      </div>
+    </>
+  );
+}

package/src/components/SchedulePicker/index.ts

@@ -0,0 +1,2 @@
+export { SchedulePicker } from './SchedulePicker';
+export type { FiscalQuarterValue, SchedulePickerProps } from './SchedulePicker';

package/src/components/SearchableList/types.ts

@@ -0,0 +1,30 @@
+export type SearchableListSearchMode = 'client' | 'server';
+
+/**
+ * Generic contract for searchable lists that may be backed by an API.
+ * Supports initial loading, error + retry, and infinite scroll pagination.
+ *
+ * This is intentionally UI-library-agnostic so it can be reused by multiple components.
+ */
+export interface SearchableListAsyncProps {
+  /** Whether options are currently loading (initial load). */
+  isLoading?: boolean;
+  /** Whether loading options failed. */
+  isError?: boolean;
+  /** Optional error message to display when `isError` is true. */
+  errorMessage?: string;
+  /** Retry loading options (shown when `isError` is true). */
+  onRetry?: () => void;
+  /** Whether more options are available to load (enables infinite scroll). */
+  hasMore?: boolean;
+  /** Loads the next page of options (triggered by infinite scroll). */
+  onLoadMore?: () => void;
+  /** Whether the next page is currently loading. */
+  isLoadingMore?: boolean;
+  /** Search behavior: client filters loaded items; server calls `onSearchChange`. */
+  searchMode?: SearchableListSearchMode;
+  /** Called when search query changes (primarily for server-side search). */
+  onSearchChange?: (query: string) => void;
+  /** Debounce time for `onSearchChange` (defaults to 250ms in the UI component). */
+  searchDebounceMs?: number;
+}

package/src/components/SearchableSubMenu/SearchableSubMenu.css.ts

@@ -0,0 +1,25 @@
+import { style } from '@vanilla-extract/css';
+
+import { mantineVars } from '../../theme/mantineVars';
+
+export const menuSearchInput = style({
+  border: 'none !important',
+  boxShadow: 'none !important',
+  backgroundColor: 'transparent !important',
+  selectors: {
+    '&:focus': {
+      border: 'none !important',
+      boxShadow: 'none !important',
+      outline: 'none !important',
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      border: 'none !important',
+      backgroundColor: 'transparent !important',
+    },
+    [`${mantineVars.darkSelector} &:focus`]: {
+      border: 'none !important',
+      boxShadow: 'none !important',
+      outline: 'none !important',
+    },
+  },
+});

package/src/components/SearchableSubMenu/SearchableSubMenu.tsx

@@ -0,0 +1,139 @@
+import { useCallback, useRef, type ReactNode } from 'react';
+
+import { Box } from '@mantine/core';
+
+import { Menu } from '../Menu';
+import { SearchTextInput } from '../TextInput';
+import * as classes from './SearchableSubMenu.css';
+
+export interface SearchableSubMenuProps {
+  /** Label shown in the parent menu item */
+  label: string;
+  /** Search query state */
+  search: string;
+  /** Search query change handler */
+  onSearchChange: (value: string) => void;
+  /** Placeholder shown in the search input */
+  placeholder?: string;
+  /** Submenu dropdown width */
+  width?: string | number;
+  /** Whether to show the search input (defaults to true) */
+  showSearch?: boolean;
+  /** Main submenu content (items, empty states, etc.) */
+  children: ReactNode;
+  /** Optional footer render prop (e.g. "Create {search}") */
+  renderFooter?: (ctx: { search: string }) => ReactNode;
+  /** When set, debounces onSearchChange calls by this many ms while keeping the input responsive */
+  debounceMs?: number;
+}
+
+export function SearchableSubMenu({
+  label,
+  search,
+  onSearchChange,
+  placeholder = 'Filter',
+  width = '300px',
+  showSearch = true,
+  children,
+  renderFooter,
+  debounceMs,
+}: SearchableSubMenuProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const setInputNode = useCallback((node: HTMLInputElement | null) => {
+    inputRef.current = node;
+
+    if (!node) {
+      return;
+    }
+
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        node.focus();
+      });
+    });
+  }, []);
+
+  const focusFirstMenuItem = () => {
+    if (!dropdownRef.current) return;
+    const menuItems = Array.from(
+      dropdownRef.current.querySelectorAll<HTMLButtonElement>(
+        '[role="menuitem"]',
+      ),
+    );
+    if (menuItems.length > 0) {
+      menuItems[0].focus();
+    }
+  };
+
+  return (
+    <Menu.Sub>
+      <Menu.Sub.Target>
+        <Menu.Sub.Item>{label}</Menu.Sub.Item>
+      </Menu.Sub.Target>
+      <Menu.Sub.Dropdown w={width}>
+        <Box
+          ref={dropdownRef}
+          onClick={e => e.stopPropagation()}
+          onMouseDown={e => e.stopPropagation()}
+        >
+          {showSearch && (
+            <>
+              <Box
+                p={0}
+                onClick={e => e.stopPropagation()}
+                onMouseDown={e => e.stopPropagation()}
+              >
+                <SearchTextInput
+                  ref={setInputNode}
+                  placeholder={placeholder}
+                  value={search}
+                  onChange={e => onSearchChange(e.currentTarget.value)}
+                  debounceMs={debounceMs}
+                  size="sm"
+                  onClick={e => {
+                    e.stopPropagation();
+                  }}
+                  onMouseDown={e => {
+                    e.stopPropagation();
+                  }}
+                  onKeyDown={e => {
+                    if (e.key === 'ArrowDown') {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      inputRef.current?.blur();
+                      requestAnimationFrame(() => {
+                        focusFirstMenuItem();
+                      });
+                      return;
+                    }
+
+                    if (e.key === 'Escape') {
+                      return;
+                    }
+
+                    e.stopPropagation();
+                  }}
+                  onKeyUp={e => {
+                    if (e.key !== 'Escape') {
+                      e.stopPropagation();
+                    }
+                  }}
+                  onFocus={e => {
+                    e.stopPropagation();
+                  }}
+                  classNames={{ input: classes.menuSearchInput }}
+                />
+              </Box>
+              <Menu.Divider />
+            </>
+          )}
+
+          {children}
+          {renderFooter?.({ search })}
+        </Box>
+      </Menu.Sub.Dropdown>
+    </Menu.Sub>
+  );
+}

package/src/components/SearchableSubMenu/index.ts

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

package/src/components/Select/README.md

@@ -0,0 +1,114 @@
+# Select Component
+
+A custom select/dropdown component matching Figma design specifications. Supports displaying a label prefix in muted color before the selected value.
+
+## Design Tokens
+
+The Select component uses the following Figma design tokens:
+
+- **Padding**: `5.5px` vertical, `var(--semantic-xs)` (8px) horizontal
+- **Border Radius**: `var(--semantic-rounded-lg)` (8px)
+- **Border**: `1px solid var(--color-unofficial-border-3)`
+- **Background**: `var(--color-general-input)`
+- **Shadow**: `var(--mantine-shadow-xs)`
+- **Typography**: Paragraph Small (14px, 21px line-height, 0.07px letter-spacing)
+- **Colors**:
+  - Label prefix: `var(--color-neutral-500)` (#737373)
+  - Selected value: `var(--color-general-foreground)` (#020617)
+  - Chevron icon: `var(--color-neutral-500)`
+
+## Usage
+
+### With Label Prefix (Recommended)
+
+The label prefix appears in gray color before the selected value, matching the Figma design:
+
+```tsx
+import { Select } from '@acme/ui';
+
+function DepartmentFilter() {
+  const [department, setDepartment] = useState('All');
+
+  return (
+    <Select
+      labelPrefix="Department"
+      data={[
+        { value: 'All', label: 'All' },
+        { value: 'Sales', label: 'Sales' },
+        { value: 'Marketing', label: 'Marketing' },
+      ]}
+      value={department}
+      onChange={setDepartment}
+    />
+  );
+}
+```
+
+### Without Label Prefix
+
+Standard dropdown without the label prefix:
+
+```tsx
+<Select
+  data={[
+    { value: 'all', label: 'All Departments' },
+    { value: 'sales', label: 'Sales' },
+  ]}
+  value={value}
+  onChange={setValue}
+  placeholder="Select a department"
+/>
+```
+
+## Props
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `labelPrefix` | `string` | No | Label text to display in gray before the selected value (e.g., "Department") |
+| `data` | `Array<{ value: string; label: string }>` | Yes | Array of options with value and label |
+| `value` | `string \| null` | No | Currently selected value |
+| `onChange` | `(value: string \| null) => void` | No | Callback when selection changes |
+| `placeholder` | `string` | No | Placeholder text when no value is selected |
+
+## Figma Reference
+
+This component is based on the Figma design:
+- **Component**: Select & Combobox
+- **Node ID**: 108:16040
+- **Design File**: AMM
+
+## Design Specifications
+
+### Layout
+- Height: 36px
+- Padding: 5.5px (top/bottom), 8px (left/right)
+- Gap between label prefix and value: 6px
+
+### Typography
+- Font family: Inter (from design system)
+- Font size: 14px (Paragraph Small)
+- Line height: 21px
+- Letter spacing: 0.07px
+- Font weight: Normal (400)
+
+### Colors
+- Label prefix: Neutral/500 (#737373)
+- Selected value: General/Foreground (#020617)
+- Border: Unofficial/Border-3 (#cbd5e1)
+- Background: General/Input (white)
+- Chevron: Neutral/500 (#737373)
+
+### Effects
+- Shadow: xs (0px 1px 2px 0px rgba(0,0,0,0.05))
+- Border radius: lg (8px)
+
+## Implementation Notes
+
+- Built on Mantine's Combobox primitive for flexible rendering
+- Uses `InputBase` as the trigger for custom content display
+- Supports keyboard navigation and accessibility
+- Chevron icon from `lucide-react`
+
+## Examples
+
+See `Select.story.tsx` for interactive examples in Storybook.

package/src/components/Select/Select.css.ts

@@ -0,0 +1,110 @@
+/**
+ * Select component styles – vanilla-extract with semantic design tokens
+ */
+
+import { style } from '@vanilla-extract/css';
+
+import { mantineVars } from '../../theme/mantineVars';
+import { tokens } from '../../theme/themeContract.css';
+
+const focusRing = {
+  outline: `2px solid ${tokens.color.stroke.focusStrong}`,
+  outlineOffset: 2,
+};
+
+export const selectButton = style({
+  all: 'unset',
+  boxSizing: 'border-box',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  width: '100%',
+  minHeight: 36,
+  height: 36,
+  padding: '5.5px 8px',
+  gap: 6,
+  borderRadius: 8,
+  border: `1px solid ${tokens.color.stroke.default}`,
+  background: tokens.color.background.input,
+  boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.05)',
+  fontFamily: 'inherit',
+  fontSize: 14,
+  lineHeight: '21px',
+  fontWeight: 400,
+  letterSpacing: '0.07px',
+  cursor: 'pointer',
+  overflow: 'hidden',
+  transition: 'border-color 0.15s ease',
+  selectors: {
+    '&:hover': {
+      borderColor: tokens.color.stroke.subduedStrong,
+    },
+    '&:focus': focusRing,
+    '&:active': {
+      borderColor: tokens.color.stroke.strong,
+    },
+    [`${mantineVars.darkSelector} &`]: {
+      borderColor: tokens.color.stroke.default,
+      backgroundColor: tokens.color.background.default,
+    },
+  },
+});
+
+export const valueContainer = style({
+  display: 'flex',
+  gap: 6,
+  alignItems: 'center',
+  flex: 1,
+  minWidth: 0,
+  overflow: 'hidden',
+});
+
+export const labelPrefix = style({
+  color: tokens.color.text.subduedDefault,
+  fontSize: 14,
+  lineHeight: '21px',
+  fontWeight: 400,
+  letterSpacing: '0.07px',
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+  selectors: {
+    [`${mantineVars.darkSelector} &`]: {
+      color: tokens.color.text.default,
+    },
+  },
+});
+
+export const selectedValue = style({
+  color: tokens.color.text.default,
+  fontSize: 14,
+  lineHeight: '21px',
+  fontWeight: 400,
+  letterSpacing: '0.07px',
+  whiteSpace: 'nowrap',
+  flexShrink: 0,
+  selectors: {
+    [`${mantineVars.darkSelector} &`]: {
+      color: tokens.color.text.default,
+    },
+  },
+});
+
+export const chevron = style({
+  color: tokens.color.text.subduedDefault,
+  flexShrink: 0,
+  width: 16,
+  height: 16,
+  selectors: {
+    [`${mantineVars.darkSelector} &`]: {
+      color: tokens.color.text.default,
+    },
+  },
+});
+
+export const errorText = style({
+  color: tokens.color.text.dangerDefault,
+  fontSize: 12,
+  lineHeight: '18px',
+  fontWeight: 400,
+  marginTop: 4,
+});