@scalepad/ui 0.1.0

package/src/components/DataTable/RowExpandToggle.tsx

@@ -0,0 +1,105 @@
+import type { MouseEvent, ReactNode } from 'react';
+
+import { ChevronRight } from 'lucide-react';
+
+import { Box, Flex } from '@mantine/core';
+
+import { IconButton } from '../IconButton';
+
+import type { Row } from '@tanstack/react-table';
+
+export interface RowExpandToggleProps<TData> {
+  /**
+   * The TanStack Table row this toggle represents.
+   */
+  row: Row<TData>;
+  /**
+   * Optional content rendered after the chevron (typically the cell's label).
+   */
+  children?: ReactNode;
+  /**
+   * Pixels of inline-start indentation multiplied by `row.depth`.
+   * @default 16
+   */
+  indentPx?: number;
+  /**
+   * aria-label for the button when the row is collapsed.
+   * @default "Expand row"
+   */
+  expandAriaLabel?: string;
+  /**
+   * aria-label for the button when the row is expanded.
+   * @default "Collapse row"
+   */
+  collapseAriaLabel?: string;
+}
+
+/**
+ * Cell helper for composing an expand/collapse chevron + children inside a
+ * consumer-owned `DataTable` column. Use this when `renderExpandToggle` is
+ * set to `"custom"` on the table.
+ *
+ * Renders:
+ * - depth-based inline-start padding (`row.depth * indentPx`),
+ * - a chevron button when `row.getCanExpand()` is true (clicking it toggles
+ *   expansion and stops propagation so the containing row's click handler is
+ *   not triggered),
+ * - a same-width spacer when the row cannot expand so sibling cells align
+ *   vertically,
+ * - then `children`.
+ *
+ * @example
+ * ```tsx
+ * columnHelper.accessor('label', {
+ *   cell: (info) => (
+ *     <RowExpandToggle row={info.row}>
+ *       <Text variant="caption1.stronger">{info.getValue()}</Text>
+ *     </RowExpandToggle>
+ *   ),
+ * });
+ * ```
+ */
+export function RowExpandToggle<TData>({
+  row,
+  children,
+  indentPx = 16,
+  expandAriaLabel = 'Expand row',
+  collapseAriaLabel = 'Collapse row',
+}: RowExpandToggleProps<TData>) {
+  const canExpand = row.getCanExpand();
+  const isExpanded = row.getIsExpanded();
+
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    row.getToggleExpandedHandler()();
+  };
+
+  return (
+    <Flex
+      align="center"
+      gap={4}
+      style={{ paddingInlineStart: row.depth * indentPx }}
+    >
+      {canExpand ? (
+        <IconButton
+          variant="ghost"
+          size="xs"
+          aria-label={isExpanded ? collapseAriaLabel : expandAriaLabel}
+          aria-expanded={isExpanded}
+          onClick={handleClick}
+        >
+          <ChevronRight
+            size={14}
+            style={{
+              transition: 'transform 120ms',
+              transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+            }}
+          />
+        </IconButton>
+      ) : (
+        <Box w={22} h={22} aria-hidden />
+      )}
+      {children}
+    </Flex>
+  );
+}

package/src/components/DataTable/RowGroupHeader.tsx

@@ -0,0 +1,190 @@
+import type { MouseEvent, ReactNode } from 'react';
+
+import { ChevronRight } from 'lucide-react';
+
+import { Box, Flex } from '@mantine/core';
+
+import { tokens } from '../../theme/themeContract.css';
+import { IconButton } from '../IconButton';
+import { Text } from '../Typography';
+
+import type { Row } from '@tanstack/react-table';
+
+export interface RowGroupHeaderAggregate {
+  /**
+   * Secondary label shown before the value, e.g. "Subtotal".
+   * Rendered in a subdued text color.
+   */
+  label?: ReactNode;
+  /**
+   * The aggregate value itself (formatted), e.g. "$492,800".
+   */
+  value: ReactNode;
+}
+
+export interface RowGroupHeaderProps<TData> {
+  /**
+   * The TanStack Table row this group header represents. Used for the
+   * chevron expand/collapse state and to derive `aria-expanded`.
+   */
+  row: Row<TData>;
+  /**
+   * Main label text for the group.
+   */
+  label: ReactNode;
+  /**
+   * Optional colored accent square (10×10, 2px radius) rendered between
+   * chevron and label. Accepts any CSS color value — pass a design-system
+   * token value, not a class name.
+   */
+  accentColor?: string;
+  /**
+   * Optional count/metadata pill shown after the label, e.g. "3 items".
+   */
+  count?: ReactNode;
+  /**
+   * Optional right-aligned aggregate (e.g. subtotal).
+   */
+  aggregate?: RowGroupHeaderAggregate;
+  /**
+   * Optional extra content rendered at the far right, after the aggregate.
+   * Use for kebab menus, "edit" buttons, etc.
+   */
+  actions?: ReactNode;
+  /**
+   * Background color applied to the primitive's outer flex. Pass `null` to
+   * render transparently (e.g. when the container already paints its own
+   * background and you don't want a colour strip from this component).
+   *
+   * When used inside a `DataTable` via `renderGroupRow`, the `<tr>` itself
+   * also paints `groupRowBackground` (which defaults to the same token), so
+   * this background and the row background line up seamlessly — including
+   * the `<td>`'s horizontal padding strip, which the `<tr>` background fills.
+   *
+   * @default tokens.color.background.subduedUltralight
+   */
+  background?: string | null;
+  /**
+   * aria-label for the chevron when the group is collapsed.
+   * @default "Expand row"
+   */
+  expandAriaLabel?: string;
+  /**
+   * aria-label for the chevron when the group is expanded.
+   * @default "Collapse row"
+   */
+  collapseAriaLabel?: string;
+}
+
+/**
+ * Group header content for use inside a `DataTable`'s `renderGroupRow` prop.
+ *
+ * Implements the standard group-row layout from the design system:
+ *
+ * ```
+ * [chevron] [accent] [label] [count]                      [aggregate] [actions]
+ * ```
+ *
+ * The chevron is driven by TanStack's expansion API; clicking it toggles
+ * expansion and stops propagation so that if the row body is also wired up
+ * to toggle, the button doesn't double-fire.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   renderGroupRow={(row) => (
+ *     <RowGroupHeader
+ *       row={row}
+ *       accentColor="#017854"
+ *       label={row.original.name}
+ *       count={`${row.subRows.length} items`}
+ *       aggregate={{ label: 'Subtotal', value: formatCurrency(sum) }}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export function RowGroupHeader<TData>({
+  row,
+  label,
+  accentColor,
+  count,
+  aggregate,
+  actions,
+  background = tokens.color.background.subduedUltralight,
+  expandAriaLabel = 'Expand row',
+  collapseAriaLabel = 'Collapse row',
+}: RowGroupHeaderProps<TData>) {
+  const canExpand = row.getCanExpand();
+  const isExpanded = row.getIsExpanded();
+
+  const handleChevronClick = (event: MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    row.getToggleExpandedHandler()();
+  };
+
+  return (
+    <Flex align="center" gap={8} w="100%" h="100%" bg={background ?? undefined}>
+      <Flex align="center" gap={8} style={{ flex: '1 0 0', minWidth: 0 }}>
+        {canExpand ? (
+          <IconButton
+            variant="ghost"
+            size="xs"
+            aria-label={isExpanded ? collapseAriaLabel : expandAriaLabel}
+            aria-expanded={isExpanded}
+            onClick={handleChevronClick}
+          >
+            <ChevronRight
+              size={14}
+              style={{
+                transition: 'transform 120ms',
+                transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+              }}
+            />
+          </IconButton>
+        ) : (
+          <Box w={22} h={22} aria-hidden />
+        )}
+        {accentColor && (
+          <Box
+            w={10}
+            h={10}
+            style={{
+              backgroundColor: accentColor,
+              borderRadius: 2,
+              flexShrink: 0,
+            }}
+            aria-hidden
+          />
+        )}
+        <Text variant="body1.stronger">{label}</Text>
+        {count != null && (
+          <Flex
+            align="center"
+            style={{
+              backgroundColor: '#eef0f3',
+              borderRadius: 10,
+              padding: '1px 6px',
+              flexShrink: 0,
+            }}
+          >
+            <Text variant="caption3.stronger" c="text.subdued.default">
+              {count}
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+      {aggregate && (
+        <Flex align="center" gap={4} style={{ flexShrink: 0 }}>
+          {aggregate.label != null && (
+            <Text variant="caption3" c="text.subdued.default">
+              {aggregate.label}
+            </Text>
+          )}
+          <Text variant="body1.stronger">{aggregate.value}</Text>
+        </Flex>
+      )}
+      {actions}
+    </Flex>
+  );
+}

package/src/components/DataTable/createActionsColumn.tsx

@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+
+import { createColumnHelper, type CellContext } from '@tanstack/react-table';
+
+/**
+ * Options for creating an actions column
+ */
+export interface CreateActionsColumnOptions<TData> {
+  /**
+   * Render function for the cell content (receives TanStack Table cell context)
+   */
+  cell: (context: CellContext<TData, unknown>) => ReactNode;
+  /**
+   * Column ID
+   * @default 'actions'
+   */
+  id?: string;
+  /**
+   * Column width in pixels
+   * @default 60
+   */
+  size?: number;
+  /**
+   * Pin column to left or right so it stays in view when scrolling.
+   * Pass null to leave the column unpinned.
+   * @default 'right'
+   */
+  pinned?: 'left' | 'right' | null;
+}
+
+/**
+ * Helper function to create a right-aligned actions column with consistent behavior
+ *
+ * Automatically:
+ * - Sets right alignment via meta.align
+ * - Wraps cell content with stopPropagation to prevent row clicks
+ * - Uses display column (non-sortable)
+ * - Sets sensible defaults for size and id
+ *
+ * @example
+ * ```tsx
+ * import { createActionsColumn } from '@scalepad/ui';
+ *
+ * const columns = [
+ *   // ... other columns
+ *   createActionsColumn<UserData>({
+ *     cell: ({ row }) => (
+ *       <Menu>
+ *         <Menu.Target>
+ *           <IconButton><MoreVertical /></IconButton>
+ *         </Menu.Target>
+ *         <Menu.Dropdown>
+ *           <Menu.Item>Edit</Menu.Item>
+ *         </Menu.Dropdown>
+ *       </Menu>
+ *     ),
+ *   }),
+ * ];
+ * ```
+ */
+export function createActionsColumn<TData>({
+  cell,
+  id = 'actions',
+  size = 60,
+  pinned = 'right',
+}: CreateActionsColumnOptions<TData>) {
+  const col = createColumnHelper<TData>();
+
+  return col.display({
+    id,
+    size,
+    meta: {
+      align: 'right',
+      ...(pinned !== null && { pinned }),
+    },
+    cell: context => (
+      <div
+        role="presentation"
+        onClick={e => e.stopPropagation()}
+        onKeyDown={e => e.stopPropagation()}
+      >
+        {cell(context)}
+      </div>
+    ),
+  });
+}

package/src/components/DataTable/index.ts

@@ -0,0 +1,25 @@
+export {
+  createActionsColumn,
+  type CreateActionsColumnOptions,
+} from './createActionsColumn';
+export {
+  DataTable,
+  type DataTableColumnConfigurator,
+  type DataTableColumnConfiguratorItem,
+  type DataTableProps,
+} from './DataTable';
+export { RowExpandToggle, type RowExpandToggleProps } from './RowExpandToggle';
+export {
+  RowGroupHeader,
+  type RowGroupHeaderAggregate,
+  type RowGroupHeaderProps,
+} from './RowGroupHeader';
+
+/**
+ * Column meta supported by DataTable / useServerTable.
+ * Use when defining columns to get typed meta (e.g. pinned).
+ */
+export type DataTableColumnMeta = {
+  pinned?: 'left' | 'right' | null;
+  align?: string;
+};

package/src/components/DatePicker/CustomRangePicker.tsx

@@ -0,0 +1,59 @@
+import { Flex } from '@mantine/core';
+import {
+  DatePicker,
+  type DatesRangeValue,
+  type DateValue,
+} from '@mantine/dates';
+
+import type { DateRange } from './types';
+
+interface CustomRangePickerProps {
+  startDate: DateValue;
+  endDate: DateValue;
+  minDate?: DateValue;
+  maxDate: DateValue;
+  onChange?: (range: DateRange) => void;
+}
+
+export function CustomRangePicker({
+  startDate,
+  endDate,
+  minDate,
+  maxDate,
+  onChange,
+}: CustomRangePickerProps) {
+  const value: DatesRangeValue | undefined =
+    startDate && endDate ? [startDate, endDate] : undefined;
+
+  const handleDateChange = (dates: DatesRangeValue) => {
+    if (dates) {
+      const [start, end] = dates;
+      onChange?.({
+        startDate: start ?? null,
+        endDate: end ?? null,
+      });
+    } else {
+      onChange?.({
+        startDate: null,
+        endDate: null,
+      });
+    }
+  };
+
+  // Convert DateValue to Date | string | undefined for Mantine DatePicker
+  const minDateValue = minDate === null ? undefined : minDate;
+  const maxDateValue = maxDate === null ? undefined : maxDate;
+
+  return (
+    <Flex gap="md" align="flex-start" justify="center">
+      <DatePicker
+        type="range"
+        value={value}
+        onChange={handleDateChange}
+        minDate={minDateValue}
+        maxDate={maxDateValue}
+        numberOfColumns={2}
+      />
+    </Flex>
+  );
+}