@reactberry/system 2.0.0-beta

package/src/blocks/Steps/types.ts

@@ -0,0 +1,71 @@
+export interface StepConfig {
+  /** The label text for the step */
+  label: string;
+  /** Optional path for navigation */
+  path?: string;
+  /** Whether this step can be navigated to */
+  canNavigate?: boolean;
+  /** Additional props to pass to the step */
+  [key: string]: any;
+}
+
+export interface StepThemeConfig {
+  /** Base color for active elements */
+  baseColor: string;
+  /** Text color for labels */
+  textColor: string;
+  /** Border color for step indicators */
+  borderColor: string;
+  /** Background color for the progress track */
+  trackColor: string;
+  /** Background color for the completed progress track */
+  completedTrackColor: string;
+  /** Size of the progress track */
+  size: string;
+  /** Unit for the size (rem, px, etc.) */
+  unit: string;
+  /** Font size for step labels and indicators */
+  fontSize: string;
+  /** Preset styles for different step states */
+  presets: {
+    active: {
+      bg: string;
+      color: string;
+    };
+    completed: {
+      bg: string;
+      color: string;
+    };
+    default: {
+      bg: string;
+      color: string;
+    };
+  };
+}
+
+export type StepVariant = 'light' | 'dark';
+
+export interface BaseStepProps {
+  /** Array of step configurations */
+  config: StepConfig[];
+  /** Index of the currently active step (0-based) */
+  active: number;
+  /** Custom theme configuration */
+  skin?: StepThemeConfig;
+  /** Theme variant to use */
+  variant?: StepVariant;
+  /** Whether to show step labels */
+  showLabels?: boolean;
+  /** Whether to show edge circles */
+  showEdges?: boolean;
+  /** Whether to show tooltips on hover */
+  showTooltip?: boolean;
+  /** Whether to use simple mode (no numbers/icons) */
+  simple?: boolean;
+  /** Additional props to pass to child components */
+  childProps?: Record<string, any>;
+  /** Callback when a step is clicked */
+  setActive?: (index: number) => void;
+  /** Additional props for the container */
+  [key: string]: any;
+}

package/src/blocks/StickySectionStack/index.tsx

@@ -0,0 +1,136 @@
+"use client";
+
+import { Children, type ReactNode, useMemo, useRef } from "react";
+import { motion, type MotionValue, useScroll, useTransform } from "motion/react";
+
+import { Box, type BoxProps } from "@/design-system/elements";
+import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+
+export interface StickySectionStackProps extends BoxProps {
+  children: ReactNode;
+  topPadding?: string;
+  stickyTop?: string;
+  stackOffsetBase?: number;
+  stickyStep?: number;
+  scaleStep?: number;
+  minScale?: number;
+  sectionMinHeight?: string;
+  bottomPadding?: string;
+  sectionProps?: BoxProps;
+}
+
+interface StickySectionItemProps {
+  children: ReactNode;
+  index: number;
+  total: number;
+  progress: MotionValue<number>;
+  stickyTop: string;
+  stackOffsetBase: number;
+  stickyStep: number;
+  scaleStep: number;
+  minScale: number;
+  sectionMinHeight: string;
+  sectionProps?: BoxProps;
+}
+
+function StickySectionItem({
+  children,
+  index,
+  total,
+  progress,
+  stickyTop,
+  stackOffsetBase,
+  stickyStep,
+  scaleStep,
+  minScale,
+  sectionMinHeight,
+  sectionProps,
+}: StickySectionItemProps) {
+  const rangeStart = total <= 1 ? 0 : index / total;
+  const targetScale = Math.max(minScale, 1 - (total - index - 1) * scaleStep);
+  const scale = useTransform(progress, [rangeStart, 1], [1, targetScale]);
+
+  return (
+    <Box
+      position="sticky"
+      top={stickyTop}
+      zIndex={index + 1}
+      minHeight={sectionMinHeight}
+      display="flex"
+      justifyContent="center"
+      alignItems="flex-start"
+    >
+      <Box
+        as={motion.div}
+        style={{
+          scale,
+          transformOrigin: "top center",
+          position: "relative",
+          top: `${stackOffsetBase + index * stickyStep}px`,
+        }}
+        width="100%"
+      >
+        <Box width="100%" {...sectionProps}>
+          {children}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default function StickySectionStack({
+  children,
+  topPadding = "10vh",
+  stickyTop = "4vh",
+  stackOffsetBase = 0,
+  stickyStep = 24,
+  scaleStep = 0.06,
+  minScale = 0.82,
+  sectionMinHeight = "auto",
+  bottomPadding = "30vh",
+  sectionProps,
+  ...props
+}: StickySectionStackProps) {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const prefersReducedMotion = useReducedMotion();
+  const sections = useMemo(() => Children.toArray(children).filter(Boolean), [children]);
+
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ["start start", "end end"],
+  });
+
+  if (prefersReducedMotion) {
+    return (
+      <Box {...props}>
+        {sections.map((section, index) => (
+          <Box key={index} width="100%" {...sectionProps}>
+            {section}
+          </Box>
+        ))}
+      </Box>
+    );
+  }
+
+  return (
+    <Box ref={containerRef} position="relative" pt={topPadding} pb={bottomPadding} {...props}>
+      {sections.map((section, index) => (
+        <StickySectionItem
+          key={index}
+          index={index}
+          total={sections.length}
+          progress={scrollYProgress}
+          stickyTop={stickyTop}
+          stackOffsetBase={stackOffsetBase}
+          stickyStep={stickyStep}
+          scaleStep={scaleStep}
+          minScale={minScale}
+          sectionMinHeight={sectionMinHeight}
+          sectionProps={sectionProps}
+        >
+          {section}
+        </StickySectionItem>
+      ))}
+    </Box>
+  );
+}

package/src/blocks/Switch/index.tsx

@@ -0,0 +1,85 @@
+import { Box, Text } from "@/design-system/elements";
+import { Switch as HeadlessSwitch } from "@headlessui/react";
+import { motion } from "motion/react";
+
+const Switch: React.FC<{
+  value?: boolean;
+  onChange?: (newValue: boolean) => void;
+  label?: string;
+  help?: string;
+  [key: string]: any; // Allow any additional props
+}> = ({ value = false, onChange, label = "", help, ...props }) => {
+  const handleToggle = () => {
+    onChange?.(!value);
+  };
+
+  const showLabel = Boolean(label);
+  const showHelp = Boolean(help);
+
+  return (
+    <Text
+      as="div"
+      display="flex"
+      gap="small"
+      alignItems="center"
+      width="100%"
+      justifyContent="space-between"
+      cursor="pointer"
+      onClick={handleToggle}
+      {...props}
+    >
+      {(showLabel || showHelp) && (
+        <Box display="flex" flexDirection={"column"} gap="mini">
+          {showLabel && (
+            <Text fontSize={"inherit"} color="primary" fontWeight="600">
+              {label}
+            </Text>
+          )}
+          {showHelp && (
+            <Text fontSize={"xsmall"} color="secondary">
+              {help}
+            </Text>
+          )}
+        </Box>
+      )}
+      <input
+        type="checkbox"
+        checked={value}
+        onChange={handleToggle}
+        style={{ display: "none" }}
+      />
+      <Box
+        as={HeadlessSwitch}
+        checked={value}
+        shape="pill"
+        bg={value ? "brand" : "palette.neutrals.8"}
+        position="relative"
+        display="inline-flex"
+        alignItems="center"
+        width="2.5rem"
+        aspect={"2.5/1"}
+        // height="1.5rem"
+        cursor="pointer"
+        border="none"
+        p="0"
+        role="checkbox"
+        aria-checked={value}
+        tabIndex={0}
+      >
+        <Box
+          as={motion.div}
+          animate={{ x: value ? "1.125rem" : "0" }}
+          height="100%"
+          aspect="1.5/1"
+          bg="white"
+          border="1px solid"
+          borderColor={value ? "brand" : "palette.neutrals.9"}
+          shape="pill"
+          $shadow="medium"
+          position="absolute"
+        />
+      </Box>
+    </Text>
+  );
+};
+export default Switch;

package/src/blocks/SystemNotice/index.tsx

@@ -0,0 +1,81 @@
+"use client";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import Text from "@/design-system/elements/text";
+import Divider from "../Divider";
+import React from "react";
+import { IconDotsAnim } from "@/design-system/icons";
+
+interface SystemNoticeProps extends BoxProps {
+  message: React.ReactNode;
+  loading?: boolean;
+  showBreaks?: boolean;
+  colorSchema?: "default" | "warning" | "success" | "error" | "info" | string;
+  icon?: React.ReactNode;
+  [key: string]: any; // Allow any additional props
+}
+
+export default function SystemNotice({
+  message,
+  loading = false,
+  showBreaks = false,
+  colorSchema = "default",
+  icon,
+  ...props
+}: SystemNoticeProps) {
+  const schemaStyles = {
+    default: {
+      skin: "panel",
+      color: "secondary",
+    },
+    success: {
+      skin: "success.subtle",
+      color: "primary",
+    },
+    error: {
+      skin: "error.subtle",
+      color: "primary",
+    },
+    info: {
+      skin: "info.subtle",
+      color: "primary",
+    },
+    warning: {
+      skin: "warning.subtle",
+      color: "palette.yellows.10",
+    },
+  };
+
+  const currentSchema =
+    schemaStyles[colorSchema as keyof typeof schemaStyles] ||
+    schemaStyles.default;
+
+  return (
+    <>
+      {showBreaks && <Divider />}
+      <Text
+        as="div"
+        p="s"
+        my="xs"
+        shape="rounded"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        flex="none"
+        fontSize="s"
+        textAlign="center"
+        fontWeight="medium"
+        {...currentSchema}
+        {...props}
+      >
+        {loading && <IconDotsAnim width="1rem" height="1rem" />}
+        {icon && !loading && (
+          <Box as="span" mr="xs" display="flex" alignItems="center">
+            {icon}
+          </Box>
+        )}
+        <Text color="inherit">{message}</Text>
+      </Text>
+      {showBreaks && <Divider />}
+    </>
+  );
+}

package/src/blocks/Table/README.md

@@ -0,0 +1,251 @@
+# Table Component
+
+A flexible, accessible, and themeable table component built with the design system's Box and Text components. It provides a complete solution for displaying tabular data with support for sorting, pagination, and various styling options.
+
+## Components
+
+### Core Components
+
+- **Table** - Main container component with theming support
+- **TableHeader** - Container for header rows (`<thead>`)
+- **TableBody** - Container for body rows (`<tbody>`)
+- **TableFooter** - Container for footer rows (`<tfoot>`)
+- **TableRow** - Individual table row (`<tr>`)
+- **TableCell** - Table cell that can be either `<td>` or `<th>`
+
+### Advanced Components
+
+- **SortableTableHeader** - Header cell with built-in sorting functionality
+- **TablePagination** - Pagination controls for large datasets
+
+### Utility Hooks
+
+- **useTableControls** - Manages sorting and pagination state
+- **useTableFilters** - Handles filtering logic
+- **useFilteredTableControls** - Combines filtering with table controls
+
+## Installation
+
+The Table component is part of the design system blocks:
+
+```tsx
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableRow,
+  TableCell,
+  SortableTableHeader,
+  TablePagination,
+  useTableControls
+} from '@/design-system/blocks';
+```
+
+## Basic Usage
+
+### Simple Table
+
+```tsx
+<Table>
+  <TableHeader>
+    <TableRow>
+      <TableCell header>Name</TableCell>
+      <TableCell header>Email</TableCell>
+      <TableCell header>Role</TableCell>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>John Doe</TableCell>
+      <TableCell>john@example.com</TableCell>
+      <TableCell>Developer</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+### Styled Table
+
+```tsx
+<Table striped hoverable stickyHeader>
+  <TableHeader>
+    <TableRow>
+      <TableCell header>Product</TableCell>
+      <TableCell header align="center">Quantity</TableCell>
+      <TableCell header align="right">Price</TableCell>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell>Widget A</TableCell>
+      <TableCell align="center">10</TableCell>
+      <TableCell align="right">$99.99</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```
+
+## Advanced Usage
+
+### Table with Sorting and Pagination
+
+```tsx
+function DataTable() {
+  const {
+    currentData,
+    sortKey,
+    sortDirection,
+    handleSort,
+    currentPage,
+    totalPages,
+    totalItems,
+    itemsPerPage,
+    handlePageChange,
+    handlePageSizeChange,
+  } = useTableControls({
+    data: users,
+    initialItemsPerPage: 10,
+  });
+
+  return (
+    <>
+      <Table striped hoverable>
+        <TableHeader>
+          <TableRow>
+            <SortableTableHeader
+              sortKey="name"
+              currentSortKey={sortKey}
+              currentSortDirection={sortDirection}
+              onSort={handleSort}
+            >
+              Name
+            </SortableTableHeader>
+            <SortableTableHeader
+              sortKey="email"
+              currentSortKey={sortKey}
+              currentSortDirection={sortDirection}
+              onSort={handleSort}
+            >
+              Email
+            </SortableTableHeader>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {currentData.map((user) => (
+            <TableRow key={user.id}>
+              <TableCell>{user.name}</TableCell>
+              <TableCell>{user.email}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      
+      <TablePagination
+        currentPage={currentPage}
+        totalPages={totalPages}
+        totalItems={totalItems}
+        itemsPerPage={itemsPerPage}
+        onPageChange={handlePageChange}
+        showPageSize
+        onPageSizeChange={handlePageSizeChange}
+      />
+    </>
+  );
+}
+```
+
+## Props
+
+### Table Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `striped` | `boolean` | `false` | Apply alternating row colors |
+| `hoverable` | `boolean` | `false` | Enable hover effects on rows |
+| `compact` | `boolean` | `false` | Reduce padding for a condensed layout |
+| `bordered` | `boolean` | `true` | Add borders to all cells |
+| `stickyHeader` | `boolean` | `false` | Make the header sticky on scroll |
+| `skin` | `'base' \| 'surface' \| 'card'` | `'surface'` | Apply predefined styling |
+
+### TableCell Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `header` | `boolean` | `false` | Render as header cell (th) |
+| `align` | `'left' \| 'center' \| 'right'` | `'left'` | Text alignment |
+| `colSpan` | `number` | - | Column span |
+| `rowSpan` | `number` | - | Row span |
+
+### TableRow Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `selected` | `boolean` | `false` | Highlight the row as selected |
+| `clickable` | `boolean` | `false` | Apply clickable styling |
+
+### SortableTableHeader Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `sortKey` | `string` | - | Column key for sorting |
+| `currentSortKey` | `string` | - | Currently active sort key |
+| `currentSortDirection` | `'asc' \| 'desc' \| null` | - | Current sort direction |
+| `onSort` | `(key: string, direction: SortDirection) => void` | - | Sort handler |
+| `sortable` | `boolean` | `true` | Enable/disable sorting |
+
+### TablePagination Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `currentPage` | `number` | - | Current page (0-based) |
+| `totalPages` | `number` | - | Total number of pages |
+| `totalItems` | `number` | - | Total number of items |
+| `itemsPerPage` | `number` | - | Items per page |
+| `onPageChange` | `(page: number) => void` | - | Page change handler |
+| `showPageSize` | `boolean` | `false` | Show page size selector |
+| `pageSizeOptions` | `number[]` | `[10, 25, 50, 100]` | Page size options |
+| `onPageSizeChange` | `(size: number) => void` | - | Page size change handler |
+
+## Styling
+
+The Table component integrates seamlessly with the design system theme:
+
+- Uses theme tokens for colors, spacing, and typography
+- Supports all Box component props for custom styling
+- Maintains semantic HTML structure
+- Fully responsive with horizontal scrolling
+
+### Custom Styling Example
+
+```tsx
+<Table
+  striped
+  style={{
+    '--table-header-bg': 'var(--colors-palette-blue-100)',
+    '--table-header-color': 'var(--colors-palette-blue-900)',
+  }}
+>
+  {/* Table content */}
+</Table>
+```
+
+## Accessibility
+
+- Semantic HTML with proper table structure
+- ARIA labels and roles where appropriate
+- Keyboard navigation support
+- Screen reader friendly
+- Proper focus management
+
+## Best Practices
+
+1. **Always use semantic structure** - Include TableHeader, TableBody, and optionally TableFooter
+2. **Provide descriptive headers** - Every column should have a clear header
+3. **Use appropriate alignment** - Numbers right, text left, actions center
+4. **Consider mobile** - Use horizontal scrolling or compact mode for responsive tables
+5. **Limit visible rows** - Use pagination for large datasets
+6. **Provide feedback** - Show loading, empty, and error states appropriately
+
+## Examples
+
+See the [Table Patterns documentation](../../docs/examples/tables/table-patterns.md) for more examples and use cases.