tharaday 0.1.1

package/src/components/Stepper/Stepper.tsx

@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import { Step } from './Step.tsx';
+import styles from './Stepper.module.css';
+import type { StepperProps } from './Stepper.types.ts';
+import { getStepStatus, resolveCurrentIndex } from './stepper.utils.ts';
+
+export const Stepper = ({
+  steps,
+  currentStep,
+  orientation = 'horizontal',
+  size = 'md',
+  onStepClick,
+  ariaLabel,
+  className,
+  id,
+  ...props
+}: StepperProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-stepper-${baseId}`;
+  const currentIndex = resolveCurrentIndex(currentStep, steps);
+  const listLabel = ariaLabel ?? 'Progress';
+
+  return (
+    <ol
+      id={componentId}
+      className={clsx(styles.root, styles[orientation], styles[size], className)}
+      aria-label={listLabel}
+      data-orientation={orientation}
+      {...props}
+    >
+      {steps.map((step, index) => (
+        <Step
+          key={step.id}
+          id={`${componentId}-step-${step.id}`}
+          step={step}
+          index={index}
+          status={getStepStatus(index, currentIndex, step.status)}
+          isInteractive={Boolean(onStepClick)}
+          onStepClick={onStepClick}
+          isLast={index === steps.length - 1}
+        />
+      ))}
+    </ol>
+  );
+};

package/src/components/Stepper/Stepper.types.ts

@@ -0,0 +1,16 @@
+import type { HTMLAttributes } from 'react';
+
+import type { StepOptions } from './Step.types.ts';
+
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperSize = 'sm' | 'md' | 'lg';
+
+export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+  steps: StepOptions[];
+  currentStep?: number | string;
+  orientation?: StepperOrientation;
+  size?: StepperSize;
+  onStepClick?: (step: StepOptions, index: number) => void;
+  ariaLabel?: string;
+  id?: string;
+}

package/src/components/Stepper/stepper.utils.ts

@@ -0,0 +1,41 @@
+import type { StepperStatus, StepOptions } from './Step.types.ts';
+
+const clampIndex = (index: number, length: number) => {
+  if (Number.isNaN(index) || length <= 0) {
+    return -1;
+  }
+  return Math.min(Math.max(index, 0), length - 1);
+};
+
+export const resolveCurrentIndex = (
+  currentStep: number | string | undefined,
+  steps: StepOptions[]
+) => {
+  if (typeof currentStep === 'number') {
+    return clampIndex(currentStep, steps.length);
+  }
+  if (typeof currentStep === 'string') {
+    return steps.findIndex((step) => step.id === currentStep);
+  }
+  return steps.findIndex((step) => step.status === 'current');
+};
+
+export const getStepStatus = (
+  index: number,
+  currentIndex: number,
+  stepStatus?: StepperStatus
+): StepperStatus => {
+  if (stepStatus) {
+    return stepStatus;
+  }
+  if (currentIndex === -1) {
+    return 'upcoming';
+  }
+  if (index < currentIndex) {
+    return 'completed';
+  }
+  if (index === currentIndex) {
+    return 'current';
+  }
+  return 'upcoming';
+};

package/src/components/Switch/Switch.module.css

@@ -0,0 +1,74 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--ds-space-3);
+  cursor: pointer;
+  user-select: none;
+}
+
+.container.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.track {
+  position: relative;
+  width: 2.5rem;
+  height: 1.25rem;
+  background-color: var(--ds-border-1);
+  border-radius: var(--ds-radius-full);
+  transition: background-color var(--ds-transition-fast);
+}
+
+.input:checked ~ .track {
+  background-color: var(--ds-info);
+}
+
+.input:focus-visible ~ .track {
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.thumb {
+  position: absolute;
+  top: 0.125rem;
+  left: 0.125rem;
+  width: 1rem;
+  height: 1rem;
+  background-color: white;
+  border-radius: var(--ds-radius-full);
+  transition: transform var(--ds-transition-fast);
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.input:checked ~ .track .thumb {
+  transform: translateX(1.25rem);
+}
+
+.label {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-1);
+  font-weight: var(--ds-font-weight-medium);
+}
+
+.helperText {
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+  margin-left: calc(2.5rem + var(--ds-space-3));
+}

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Switch } from './Switch.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Switch',
+  component: Switch,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Dark Mode',
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    label: 'Enable push notifications',
+    defaultChecked: true,
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Public Profile',
+    helperText: 'Making your profile public allows others to find you.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled setting',
+    disabled: true,
+  },
+};
+
+export const All: Story = {
+  name: 'Gallery',
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={6}>
+      <Switch label="Default" />
+      <Switch label="Checked" defaultChecked />
+      <Switch label="With Helper Text" helperText="Additional information here" />
+      <Switch label="Disabled" disabled />
+      <Switch label="Disabled Checked" disabled defaultChecked />
+    </Box>
+  ),
+};

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import styles from './Switch.module.css';
+import type { SwitchProps } from './Switch.types.ts';
+
+export const Switch = ({ label, helperText, className, disabled, id, ...props }: SwitchProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-switch-${baseId}`;
+  const helperId = helperText ? `${componentId}-help` : undefined;
+
+  return (
+    <div className={clsx(styles.wrapper, className)}>
+      <label htmlFor={componentId} className={clsx(styles.container, disabled && styles.disabled)}>
+        <input
+          type="checkbox"
+          id={componentId}
+          role="switch"
+          disabled={disabled}
+          className={styles.input}
+          aria-describedby={helperId}
+          {...props}
+        />
+        <span className={styles.track}>
+          <span className={styles.thumb} />
+        </span>
+        {label && <span className={styles.label}>{label}</span>}
+      </label>
+      {helperText && (
+        <span id={helperId} className={styles.helperText}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/Switch/Switch.types.ts

@@ -0,0 +1,6 @@
+import type { InputHTMLAttributes } from 'react';
+
+export interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  helperText?: string;
+}

package/src/components/Table/Table.module.css

@@ -0,0 +1,78 @@
+.wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+}
+
+.table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-1);
+  background-color: var(--ds-surface-0);
+}
+
+.thead {
+  background-color: var(--ds-surface-1);
+  border-bottom: 0.125rem solid var(--ds-border-1);
+}
+
+.tbody .tr {
+  border-bottom: 1px solid var(--ds-border-1);
+}
+
+.tbody .tr:last-child {
+  border-bottom: none;
+}
+
+.th {
+  padding: var(--ds-space-3) var(--ds-space-4);
+  font-weight: var(--ds-font-weight-bold);
+  text-align: left;
+  color: var(--ds-text-2);
+  text-transform: uppercase;
+  font-size: var(--ds-font-size-xs);
+  letter-spacing: 0.05em;
+}
+
+.td {
+  padding: var(--ds-space-4);
+  vertical-align: middle;
+}
+
+/* Modifiers */
+.striped .tbody .tr:nth-child(even) {
+  background-color: var(--ds-surface-1);
+}
+
+.hoverable .tbody .tr:hover {
+  background-color: var(--ds-surface-1);
+}
+
+.dense .th {
+  padding: var(--ds-space-2) var(--ds-space-4);
+}
+
+.dense .td {
+  padding: var(--ds-space-2) var(--ds-space-4);
+}
+
+.align-left {
+  text-align: left;
+}
+.align-center {
+  text-align: center;
+}
+.align-right {
+  text-align: right;
+}
+.align-justify {
+  text-align: justify;
+}
+
+.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from './Table.tsx';
+import { Badge } from '../Badge/Badge.tsx';
+import { Button } from '../Button/Button.tsx';
+
+const meta = {
+  title: 'Components/Table',
+  component: Table,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    striped: { control: 'boolean' },
+    hoverable: { control: 'boolean' },
+    dense: { control: 'boolean' },
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const data = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', role: 'Editor', status: 'Active' },
+  { id: 3, name: 'Bob Johnson', email: 'bob@example.com', role: 'Viewer', status: 'Inactive' },
+  { id: 4, name: 'Alice Williams', email: 'alice@example.com', role: 'Admin', status: 'Active' },
+];
+
+export const Default: Story = {
+  render: (args) => (
+    <Table {...args}>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Name</TableHead>
+          <TableHead>Email</TableHead>
+          <TableHead>Role</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead align="right">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {data.map((row) => (
+          <TableRow key={row.id}>
+            <TableCell>{row.name}</TableCell>
+            <TableCell>{row.email}</TableCell>
+            <TableCell>{row.role}</TableCell>
+            <TableCell>
+              <Badge
+                intent={row.status === 'Active' ? 'success' : 'neutral'}
+                variant="subtle"
+                size="sm"
+              >
+                {row.status}
+              </Badge>
+            </TableCell>
+            <TableCell align="right">
+              <Button variant="subtle" size="xs">
+                Edit
+              </Button>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  ),
+};
+
+export const Striped: Story = {
+  ...Default,
+  args: {
+    striped: true,
+  },
+};
+
+export const Hoverable: Story = {
+  ...Default,
+  args: {
+    hoverable: true,
+  },
+};
+
+export const Dense: Story = {
+  ...Default,
+  args: {
+    dense: true,
+  },
+};
+
+export const TanStackTableExample: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'This example shows how you could wrap TanStack Table using our Table components. (Simulated integration)',
+      },
+    },
+  },
+  render: (args) => {
+    // This is a simplified example of how TanStack table would render.
+    // In a real scenario, you'd use flexRender, getHeaderGroups, getRowModel, etc.
+    return (
+      <Table {...args}>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Column A</TableHead>
+            <TableHead>Column B</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Data A1</TableCell>
+            <TableCell>Data B1</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Data A2</TableCell>
+            <TableCell>Data B2</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+  },
+};

package/src/components/Table/Table.tsx

@@ -0,0 +1,75 @@
+import clsx from 'clsx';
+
+import styles from './Table.module.css';
+import type {
+  TableProps,
+  TableHeaderProps,
+  TableBodyProps,
+  TableFooterProps,
+  TableRowProps,
+  TableHeadProps,
+  TableCellProps,
+} from './Table.types.ts';
+
+export const Table = ({
+  children,
+  className,
+  striped,
+  hoverable,
+  dense,
+  isLoading,
+  ...props
+}: TableProps) => {
+  return (
+    <div className={clsx(styles.wrapper, isLoading && styles.loading, className)}>
+      <table
+        className={clsx(
+          styles.table,
+          striped && styles.striped,
+          hoverable && styles.hoverable,
+          dense && styles.dense
+        )}
+        aria-busy={isLoading || undefined}
+        {...props}
+      >
+        {children}
+      </table>
+    </div>
+  );
+};
+
+export const TableHeader = ({ children, className, ...props }: TableHeaderProps) => (
+  <thead className={clsx(styles.thead, className)} {...props}>
+    {children}
+  </thead>
+);
+
+export const TableBody = ({ children, className, ...props }: TableBodyProps) => (
+  <tbody className={clsx(styles.tbody, className)} {...props}>
+    {children}
+  </tbody>
+);
+
+export const TableFooter = ({ children, className, ...props }: TableFooterProps) => (
+  <tfoot className={clsx(styles.tfoot, className)} {...props}>
+    {children}
+  </tfoot>
+);
+
+export const TableRow = ({ children, className, ...props }: TableRowProps) => (
+  <tr className={clsx(styles.tr, className)} {...props}>
+    {children}
+  </tr>
+);
+
+export const TableHead = ({ children, className, align, ...props }: TableHeadProps) => (
+  <th className={clsx(styles.th, align && styles[`align-${align}`], className)} {...props}>
+    {children}
+  </th>
+);
+
+export const TableCell = ({ children, className, align, ...props }: TableCellProps) => (
+  <td className={clsx(styles.td, align && styles[`align-${align}`], className)} {...props}>
+    {children}
+  </td>
+);

package/src/components/Table/Table.types.ts

@@ -0,0 +1,29 @@
+import type {
+  HTMLAttributes,
+  TableHTMLAttributes,
+  TdHTMLAttributes,
+  ThHTMLAttributes,
+} from 'react';
+
+export interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
+  striped?: boolean;
+  hoverable?: boolean;
+  dense?: boolean;
+  isLoading?: boolean;
+}
+
+export type TableHeaderProps = HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableBodyProps = HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableFooterProps = HTMLAttributes<HTMLTableSectionElement>;
+
+export type TableRowProps = HTMLAttributes<HTMLTableRowElement>;
+
+export interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+  align?: 'left' | 'center' | 'right' | 'justify' | 'char';
+}
+
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+  align?: 'left' | 'center' | 'right' | 'justify' | 'char';
+}

package/src/components/Tabs/Tabs.module.css

@@ -0,0 +1,74 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  font-family: var(--ds-font-family-base);
+}
+
+.tabList {
+  display: flex;
+  gap: var(--ds-space-4);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tabItem {
+  all: unset;
+  cursor: pointer;
+  padding: var(--ds-space-2) var(--ds-space-1);
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-2);
+  transition: all var(--ds-transition-fast);
+  border-bottom: 0.125rem solid transparent;
+}
+
+.tabItem:hover:not(.disabled):not(.active) {
+  color: var(--ds-text-1);
+  border-bottom-color: var(--ds-border-1);
+}
+
+.tabItem:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+  border-radius: var(--ds-radius-sm);
+  z-index: 1;
+}
+
+.tabItem.active {
+  color: var(--ds-info);
+  border-bottom-color: var(--ds-info);
+}
+
+.tabItem.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Pill variant */
+.pillList {
+  gap: var(--ds-space-2);
+  background-color: var(--ds-surface-1);
+  padding: var(--ds-space-1);
+  border-radius: var(--ds-radius-md);
+  width: fit-content;
+}
+
+.pillItem {
+  padding: var(--ds-space-1) var(--ds-space-4);
+  border-radius: var(--ds-radius-sm);
+  border-bottom: none;
+}
+
+.pillItem.active {
+  background-color: var(--ds-surface-0);
+  color: var(--ds-text-1);
+  box-shadow: var(--ds-shadow-sm);
+}
+
+.tabPanel {
+  padding-top: var(--ds-space-4);
+}