@scalepad/ui 0.1.0

package/src/components/TableControlBar/useTableControlBar.tsx

@@ -0,0 +1,314 @@
+import { useCallback, useMemo, type ReactNode } from 'react';
+
+import {
+  AppliedFiltersManagerBar,
+  type AppliedFiltersManagerBarProps,
+  type FilterCategory,
+} from '../AppliedFiltersManagerBar';
+import { BulkActionBar, type BulkActionBarProps } from '../BulkActionBar';
+import { TableControlBar, type TableControlBarProps } from './TableControlBar';
+
+import type { useTableSelection } from '../../hooks/useTableSelection';
+
+export interface UseTableControlBarProps {
+  /**
+   * Placeholder text for the search input
+   */
+  searchPlaceholder: string;
+
+  /**
+   * Current search value
+   */
+  searchValue: string;
+
+  /**
+   * Callback when search value changes
+   */
+  onSearchChange: (value: string) => void;
+
+  /**
+   * Key to force reset/remount of search input
+   * REQUIRED: Pass the resetKey from useEntityTable's search.resetKey
+   * This ensures the search input properly clears when filters are reset
+   * @example searchKey: search.resetKey
+   */
+  searchKey: string | number;
+
+  /**
+   * Table selection state from useTableSelection hook
+   */
+  selection: ReturnType<typeof useTableSelection>;
+
+  /**
+   * Entity name for the selection button (e.g., "Apps", "Devices", "Users")
+   */
+  entityName: string;
+
+  /**
+   * Optional custom filter controls to display between search and selection button
+   */
+  customFilters?: ReactNode;
+
+  /**
+   * Optional bulk action buttons to show in the action bar when items are selected
+   */
+  bulkActions?: ReactNode;
+
+  /**
+   * Optional custom actions to display on the right side instead of default Download CSV button
+   */
+  rightActions?: ReactNode;
+
+  /**
+   * Whether to show the Download CSV button
+   * @default true
+   */
+  showDownloadButton?: boolean;
+
+  /**
+   * Optional callback when Download CSV button is clicked
+   */
+  onDownloadCSV?: () => void;
+
+  /**
+   * Whether to show the selection button
+   * @default true
+   */
+  canSelectItems?: boolean;
+
+  /**
+   * Whether there is no data in the table (from useEntityTable's hasNoData)
+   * Used to auto-disable right-side actions when appropriate
+   * Note: Search input always remains enabled
+   * @default false
+   */
+  hasNoData?: boolean;
+
+  /**
+   * Whether there are active filters applied (search query, filters, etc.)
+   * Used to determine if actions should be disabled
+   * When true, keeps actions enabled even if hasNoData is true
+   * @default false
+   */
+  hasActiveFilters?: boolean;
+
+  /**
+   * Optional filter state (from useFilters hook)
+   * When provided, automatically renders AppliedFiltersManagerBar
+   */
+  filters?: FilterCategory[];
+
+  /**
+   * Optional callback to update filter state
+   * Required when filters is provided
+   */
+  onFiltersChange?: (filters: FilterCategory[]) => void;
+
+  /**
+   * Optional callback when a category is removed
+   * If not provided, defaults to clearing items for that category
+   */
+  onCategoryRemove?: (categoryName: string) => void;
+}
+
+export interface UseTableControlBarReturn {
+  /**
+   * JSX for the controls section (search, filters, selection button)
+   * Convenience: Pre-composed JSX for common use case
+   */
+  controls: ReactNode;
+
+  /**
+   * JSX for the action bar (bulk actions when items are selected)
+   * Convenience: Pre-composed JSX for common use case
+   */
+  actionBar: ReactNode | undefined;
+
+  /**
+   * Optional JSX for the applied filters bar
+   * Only present when filters prop is provided and has active items
+   * Convenience: Pre-composed JSX for common use case
+   */
+  filtersBar?: ReactNode;
+
+  /**
+   * Raw props for custom composition (escape hatch)
+   * Use when you need full control over rendering or need to insert custom elements
+   *
+   * @example
+   * ```tsx
+   * const { props } = useTableControlBar({...});
+   *
+   * return (
+   *   <CustomWrapper>
+   *     <TableControlBar {...props.controls} />
+   *     <MyCustomThing />
+   *     {props.filtersBar && <AppliedFiltersManagerBar {...props.filtersBar} />}
+   *     {props.actionBar && <BulkActionBar {...props.actionBar} />}
+   *   </CustomWrapper>
+   * );
+   * ```
+   */
+  props: {
+    controls: TableControlBarProps;
+    actionBar?: BulkActionBarProps;
+    filtersBar?: AppliedFiltersManagerBarProps;
+  };
+}
+
+/**
+ * Hook to create standardized table control bar with search, filters, selection mode, and bulk actions
+ *
+ * Returns both pre-composed JSX (convenience) and raw props (flexibility).
+ *
+ * @example Common usage (pre-composed JSX)
+ * ```tsx
+ * const { controls, actionBar, filtersBar } = useTableControlBar({
+ *   searchPlaceholder: "Search by App Name or Category",
+ *   searchValue: search.query,
+ *   onSearchChange: search.setQuery,
+ *   searchKey: search.resetKey,
+ *   selection,
+ *   entityName: "Apps",
+ *   hasNoData,
+ *   hasActiveFilters,
+ *   filters,              // From useFilters hook
+ *   onFiltersChange,      // From useFilters hook
+ *   customFilters: (
+ *     <FilterMenu
+ *       filters={filters}
+ *       onFiltersChange={onFiltersChange}
+ *       filterSchemas={filterSchemas}
+ *     />
+ *   ),
+ *   bulkActions: (
+ *     <Button variant="secondary" size="sm">
+ *       Add to Favorites
+ *     </Button>
+ *   ),
+ * });
+ *
+ * <TableContainer controls={controls} actionBar={actionBar} filtersBar={filtersBar}>
+ *   <Table>...</Table>
+ * </TableContainer>
+ * ```
+ *
+ * @example Custom composition (raw props)
+ * ```tsx
+ * const { props } = useTableControlBar({...});
+ *
+ * return (
+ *   <CustomLayout>
+ *     <TableControlBar {...props.controls} />
+ *     <MyCustomElement />
+ *     {props.filtersBar && <AppliedFiltersManagerBar {...props.filtersBar} />}
+ *     {props.actionBar && <BulkActionBar {...props.actionBar} />}
+ *   </CustomLayout>
+ * );
+ * ```
+ */
+export function useTableControlBar({
+  searchPlaceholder,
+  searchValue,
+  onSearchChange,
+  searchKey,
+  selection,
+  entityName,
+  customFilters,
+  bulkActions,
+  rightActions,
+  showDownloadButton = true,
+  onDownloadCSV,
+  canSelectItems = true,
+  hasNoData = false,
+  hasActiveFilters = false,
+  filters,
+  onFiltersChange,
+  onCategoryRemove,
+}: UseTableControlBarProps): UseTableControlBarReturn {
+  // Auto-disable right-side actions when there's no data AND no active filters
+  // This represents a true "empty state" where actions don't make sense
+  // But keep actions enabled when user is filtering/searching (even with no results)
+  const shouldDisableActions = hasNoData && !hasActiveFilters;
+
+  // Memoize default onCategoryRemove handler
+  const defaultCategoryRemove = useCallback(
+    (categoryName: string) => {
+      if (!onFiltersChange) return;
+      const updatedFilters =
+        filters?.map(f =>
+          f.categoryName === categoryName ? { ...f, items: [] } : f,
+        ) || [];
+      onFiltersChange(updatedFilters);
+    },
+    [filters, onFiltersChange],
+  );
+
+  const handleCategoryRemove = onCategoryRemove || defaultCategoryRemove;
+
+  // Build raw props for components (escape hatch for custom composition)
+  const controlsProps: TableControlBarProps = {
+    searchPlaceholder,
+    searchValue,
+    onSearchChange,
+    searchKey,
+    isSelectionMode: selection.isSelectionMode,
+    entityName,
+    onToggleSelection: selection.toggleSelectionMode,
+    customFilters,
+    rightActions,
+    showDownloadButton,
+    onDownloadCSV,
+    canSelectItems,
+    disabled: shouldDisableActions,
+  };
+
+  const actionBarProps: BulkActionBarProps | undefined =
+    selection.isSelectionMode
+      ? {
+          selectedCount: selection.selectedCount,
+          actions: bulkActions,
+          actionsDisabled: selection.selectedCount === 0,
+        }
+      : undefined;
+
+  // Memoize clear-all handler for filters bar
+  const handleClearAll = useCallback(() => {
+    if (!onFiltersChange || !filters) return;
+    onFiltersChange(filters.map(f => ({ ...f, items: [] })));
+  }, [filters, onFiltersChange]);
+
+  const filtersBarProps: AppliedFiltersManagerBarProps | undefined = useMemo(
+    () =>
+      filters && filters.some(f => f.items.length > 0)
+        ? {
+            filterCategories: filters,
+            onCategoryRemove: handleCategoryRemove,
+            onClearAll: handleClearAll,
+          }
+        : undefined,
+    [filters, handleCategoryRemove, handleClearAll],
+  );
+
+  // Pre-composed JSX (convenience for common use case)
+  const controls = <TableControlBar {...controlsProps} />;
+  const actionBar = actionBarProps ? (
+    <BulkActionBar {...actionBarProps} />
+  ) : undefined;
+  const filtersBar = filtersBarProps ? (
+    <AppliedFiltersManagerBar {...filtersBarProps} />
+  ) : undefined;
+
+  return {
+    // Convenience: Pre-composed JSX
+    controls,
+    actionBar,
+    filtersBar,
+    // Flexibility: Raw props for custom composition
+    props: {
+      controls: controlsProps,
+      actionBar: actionBarProps,
+      filtersBar: filtersBarProps,
+    },
+  };
+}

package/src/components/TableSelection/TableSelection.tsx

@@ -0,0 +1,43 @@
+import { Checkbox } from '@mantine/core';
+
+export interface SelectionCheckboxProps {
+  checked: boolean;
+  onChange: () => void;
+  disabled?: boolean;
+}
+
+export function SelectionCheckbox({
+  checked,
+  onChange,
+  disabled,
+}: SelectionCheckboxProps) {
+  return (
+    <Checkbox
+      checked={checked}
+      onChange={onChange}
+      disabled={disabled}
+      aria-label="Select row"
+    />
+  );
+}
+
+export interface SelectAllCheckboxProps {
+  checked: boolean;
+  indeterminate?: boolean;
+  onChange: () => void;
+}
+
+export function SelectAllCheckbox({
+  checked,
+  indeterminate,
+  onChange,
+}: SelectAllCheckboxProps) {
+  return (
+    <Checkbox
+      checked={checked}
+      indeterminate={indeterminate}
+      onChange={onChange}
+      aria-label="Select all rows"
+    />
+  );
+}

package/src/components/TableSelection/index.ts

@@ -0,0 +1,5 @@
+export { SelectionCheckbox, SelectAllCheckbox } from './TableSelection';
+export type {
+  SelectionCheckboxProps,
+  SelectAllCheckboxProps,
+} from './TableSelection';

package/src/components/Tabs/README.md

@@ -0,0 +1,76 @@
+# Tabs Component
+
+Beautiful tabs matching Figma design specifications with smooth interactions and shadow effects.
+
+## Features
+
+- 🎨 Figma-spec design with semantic color tokens
+- 🌗 Automatic dark mode support
+- ✨ Smooth hover states and transitions
+- 📦 Simple, familiar Mantine API
+- 🎯 Perfect 6px icon-text gap alignment
+- 💅 Elevated shadow on active tab
+
+## Quick Start
+
+```tsx
+import { Tabs } from '@acme/ui';
+import { Monitor, Users } from 'lucide-react';
+
+<Tabs defaultValue="devices">
+  <Tabs.List>
+    <Tabs.Tab value="devices" leftSection={<Monitor size={17} />}>
+      Devices
+    </Tabs.Tab>
+    <Tabs.Tab value="users" leftSection={<Users size={17} />}>
+      Users
+    </Tabs.Tab>
+  </Tabs.List>
+</Tabs>;
+```
+
+## API
+
+### Tabs (Root)
+
+| Prop           | Type                              | Description                                                            |
+| -------------- | --------------------------------- | ---------------------------------------------------------------------- |
+| `value`        | `string \| null`                  | Controlled active tab                                                  |
+| `onChange`     | `(value: string \| null) => void` | Tab change callback                                                    |
+| `defaultValue` | `string`                          | Default active tab (uncontrolled)                                      |
+| `size`         | `'default' \| 'sm'`               | Tab size: default (standard) or sm (smaller label, icon, less padding) |
+| `children`     | `ReactNode`                       | Tabs.List and Tabs.Panel components                                    |
+
+### Tabs.Tab
+
+| Prop           | Type        | Description               |
+| -------------- | ----------- | ------------------------- |
+| `value`        | `string`    | Unique tab identifier     |
+| `leftSection`  | `ReactNode` | Icon/element before label |
+| `rightSection` | `ReactNode` | Icon/element after label  |
+| `disabled`     | `boolean`   | Disable the tab           |
+| `children`     | `ReactNode` | Tab label                 |
+
+## Design Specs
+
+- **Border radius**: 10px
+- **Icon-text gap**: 6px
+- **Min height**: 29px
+- **Font**: 14px / 600 / 21px line-height
+- **Shadow**: `0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1)`
+- **Transition**: 150ms ease
+
+## Best Practices
+
+- Use 16-17px icons for default size; use 14px icons for `size="sm"`
+- Keep 2-5 tabs maximum
+- Use concise labels (1-2 words)
+- Center tabs with Flex for balance
+
+## More Examples
+
+See **Storybook** for interactive examples and live demos.
+
+## Real-World Usage
+
+`apps/web/src/routes/_auth.deployment.tsx`

package/src/components/Tabs/Tabs.css.ts

@@ -0,0 +1,54 @@
+/**
+ * Tabs component styles – vanilla-extract with semantic design tokens
+ */
+
+import { style } from '@vanilla-extract/css';
+
+import { tokens } from '../../theme/themeContract.css';
+import { textStyleVariants } from '../../tokens/text-styles';
+
+export const tab = style({
+  selectors: {
+    '&[role="tab"]': {
+      fontWeight: 700,
+      lineHeight: 1.5,
+      paddingTop: tokens.spacing.xs,
+      paddingBottom: tokens.spacing.sm,
+      color: tokens.color.text.subduedStrong,
+    },
+    '&[role="tab"]:hover': {
+      color: tokens.color.text.primaryDefault,
+      backgroundColor: 'transparent',
+      fontWeight: 700,
+    },
+    '&[role="tab"][data-active="true"]': {
+      color: tokens.color.text.primaryDefault,
+      fontWeight: 700,
+    },
+    '&[role="tab"][data-active="true"]::before': { display: 'none' },
+    '&[role="tab"][data-active="true"]::after': { display: 'none' },
+    '&[role="tab"][data-active="true"]:hover': {
+      color: tokens.color.text.primaryDefault,
+    },
+  },
+});
+
+/** Small size: smaller label, icon, less padding/spacing */
+export const tabSm = style({
+  selectors: {
+    '&[role="tab"]': {
+      paddingTop: tokens.spacing['2xs'],
+      paddingBottom: tokens.spacing.xs,
+      paddingLeft: tokens.spacing.sm,
+      paddingRight: tokens.spacing.sm,
+      fontSize: textStyleVariants.caption2.fontSize,
+      lineHeight: 1.5,
+      gap: tokens.spacing['2xs'],
+    },
+  },
+});
+
+/** List spacing for small tabs */
+export const listSm = style({
+  gap: tokens.spacing.xs,
+});

package/src/components/Tabs/Tabs.figma.tsx

@@ -0,0 +1,47 @@
+import figma from '@figma/code-connect';
+
+import { Tabs } from './Tabs';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * None of your props could be automatically mapped to Figma properties.
+ * You should update the `props` object to include a mapping from your
+ * code props to Figma properties, and update the `example` function to
+ * return the code example you'd like to see in Figma
+ */
+
+figma.connect(
+  Tabs,
+  'https://www.figma.com/design/VCLfybgU3OaUUPrQdBaVmP/LM-Design-System?node-id=9%3A639',
+  {
+    props: {
+      // No matching props could be found for these Figma properties:
+      // "size": figma.enum('Size', {
+      //   "Regular": "regular",
+      //   "Large": "large",
+      //   "Small": "small"
+      // }),
+      // "content": figma.enum('Content', {
+      //   "Label": "label",
+      //   "Icon": "icon",
+      //   "Icon + Label": "icon---label"
+      // }),
+      // "parts": figma.enum('Parts', {
+      //   "2 Parts": "2-parts",
+      //   "3 Parts": "3-parts",
+      //   "4 Parts": "4-parts",
+      //   "5 Parts": "5-parts"
+      // })
+    },
+    example: _props => (
+      <Tabs defaultValue="first">
+        <Tabs.List>
+          <Tabs.Tab value="first">First</Tabs.Tab>
+          <Tabs.Tab value="second">Second</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="first">First content</Tabs.Panel>
+        <Tabs.Panel value="second">Second content</Tabs.Panel>
+      </Tabs>
+    ),
+  },
+);

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,96 @@
+import { forwardRef } from 'react';
+
+import {
+  Tabs as MantineTabs,
+  type TabsProps as MantineTabsProps,
+} from '@mantine/core';
+
+import * as classes from './Tabs.css';
+
+/**
+ * Enhanced Tabs component with Figma design specifications.
+ *
+ * Features:
+ * - Smooth, pill-style tabs with shadow on active state
+ * - Consistent with design system colors and spacing
+ * - 6px gap between icon and text
+ * - 29px minimum height for consistent alignment
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="devices">
+ *   <Tabs.List>
+ *     <Tabs.Tab value="devices" leftSection={<Monitor size={17} />}>
+ *       Devices
+ *     </Tabs.Tab>
+ *     <Tabs.Tab value="users" leftSection={<Users size={17} />}>
+ *       Users
+ *     </Tabs.Tab>
+ *   </Tabs.List>
+ *
+ *   <Tabs.Panel value="devices">
+ *     Devices content
+ *   </Tabs.Panel>
+ *   <Tabs.Panel value="users">
+ *     Users content
+ *   </Tabs.Panel>
+ * </Tabs>
+ * ```
+ */
+export type TabsSize = 'default' | 'sm';
+
+export interface TabsProps extends MantineTabsProps {
+  /** The active tab value */
+  value?: string | null;
+  /** Callback when tab changes */
+  onChange?: (value: string | null) => void;
+  /** Default active tab */
+  defaultValue?: string;
+  /** Tab size: default (standard label/icon/padding) or sm (smaller label, icon, less padding) */
+  size?: TabsSize;
+  /** Children (typically Tabs.List and Tabs.Panel components) */
+  children: React.ReactNode;
+}
+
+const TabsRoot = forwardRef<HTMLDivElement, TabsProps>(
+  (
+    { children, variant = 'default', size = 'default', className, ...props },
+    ref,
+  ) => {
+    const tabClassName =
+      size === 'sm' ? `${classes.tab} ${classes.tabSm}` : classes.tab;
+    return (
+      <MantineTabs
+        ref={ref}
+        variant={variant}
+        className={className}
+        classNames={{
+          list: size === 'sm' ? classes.listSm : undefined,
+          tab: tabClassName,
+        }}
+        {...props}
+      >
+        {children}
+      </MantineTabs>
+    );
+  },
+);
+
+TabsRoot.displayName = 'Tabs';
+
+/**
+ * Tabs component with sub-components.
+ *
+ * Use Tabs.List, Tabs.Tab, and Tabs.Panel for composition.
+ */
+export const Tabs = Object.assign(TabsRoot, {
+  List: MantineTabs.List,
+  Tab: MantineTabs.Tab,
+  Panel: MantineTabs.Panel,
+});
+
+export type {
+  TabsListProps,
+  TabsPanelProps,
+  TabsTabProps,
+} from '@mantine/core';

package/src/components/Tabs/index.ts

@@ -0,0 +1,8 @@
+export { Tabs } from './Tabs';
+export type {
+  TabsProps,
+  TabsSize,
+  TabsListProps,
+  TabsTabProps,
+  TabsPanelProps,
+} from './Tabs';