tharaday 0.1.1

package/src/components/Select/Select.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Select } from './Select.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    error: {
+      control: 'boolean',
+    },
+    disabled: {
+      control: 'boolean',
+    },
+  },
+} satisfies Meta<typeof Select>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const options = [
+  { value: 'option1', label: 'Option 1' },
+  { value: 'option2', label: 'Option 2' },
+  { value: 'option3', label: 'Option 3', disabled: true },
+  { value: 'option4', label: 'Option 4' },
+];
+
+export const Default: Story = {
+  args: {
+    label: 'Select option',
+    options,
+    helperText: 'Please select an option from the list.',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Select option',
+    options,
+    error: true,
+    helperText: 'This field is required.',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Select option',
+    options,
+    disabled: true,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    label: 'Small Select',
+    options,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    label: 'Large Select',
+    options,
+  },
+};
+
+export const Gallery: Story = {
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={8} width="400px">
+      {(['sm', 'md', 'lg'] as const).map((size) => (
+        <Box key={size} display="flex" flexDirection="column" gap={4}>
+          <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
+            Size: {size}
+          </Box>
+          <Select size={size} label="Default" options={options} />
+          <Select
+            size={size}
+            label="With Error"
+            options={options}
+            error
+            helperText="This field is required"
+          />
+          <Select size={size} label="Disabled" options={options} disabled />
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/src/components/Select/Select.tsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx';
+import { useId } from 'react';
+
+import styles from './Select.module.css';
+import type { SelectProps } from './Select.types.ts';
+
+export const Select = ({
+  size = 'md',
+  error,
+  label,
+  helperText,
+  className,
+  id,
+  options,
+  children,
+  ...props
+}: SelectProps) => {
+  const baseId = useId();
+  const componentId = id ?? `ds-select-${baseId}`;
+  const helperId = helperText ? `${componentId}-help` : undefined;
+
+  return (
+    <div className={clsx(styles.wrapper, className)}>
+      {label && (
+        <label htmlFor={componentId} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <select
+        id={componentId}
+        className={clsx(styles.selectRoot, styles[size], error && styles.error)}
+        aria-describedby={helperId}
+        aria-invalid={error || undefined}
+        {...props}
+      >
+        {options
+          ? options.map((option) => (
+              <option key={option.value} value={option.value} disabled={option.disabled}>
+                {option.label}
+              </option>
+            ))
+          : children}
+      </select>
+      {helperText && (
+        <span id={helperId} className={clsx(styles.helperText, error && styles.errorText)}>
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+};

package/src/components/Select/Select.types.ts

@@ -0,0 +1,18 @@
+import type { SelectHTMLAttributes, ReactNode } from 'react';
+
+export type SelectSize = 'sm' | 'md' | 'lg';
+
+export interface SelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+  size?: SelectSize;
+  error?: boolean;
+  label?: string;
+  helperText?: string;
+  options?: SelectOption[];
+  children?: ReactNode;
+}

package/src/components/Skeleton/Skeleton.module.css

@@ -0,0 +1,71 @@
+.root {
+  background-color: var(--ds-skeleton);
+  display: block;
+}
+
+.text {
+  height: 1em;
+  margin-top: 0.1em;
+  margin-bottom: 0.1em;
+  transform: scale(1, 0.6);
+  transform-origin: 0 0;
+  border-radius: var(--ds-radius-sm);
+}
+
+.rectangular {
+  height: 1.25rem;
+}
+
+.rounded {
+  border-radius: var(--ds-radius-md);
+}
+
+.circular {
+  border-radius: var(--ds-radius-full);
+}
+
+/* Animations */
+.pulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.wave {
+  position: relative;
+  overflow: hidden;
+}
+
+.wave::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(90deg, transparent, var(--ds-skeleton-highlight), transparent);
+  animation: wave 1.6s linear infinite;
+  transform: translateX(-100%);
+}
+
+@keyframes wave {
+  0% {
+    transform: translateX(-100%);
+  }
+  50% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/components/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Skeleton } from './Skeleton.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Rectangular: Story = {
+  args: {
+    variant: 'rectangular',
+    width: 300,
+    height: 150,
+  },
+};
+
+export const Circular: Story = {
+  args: {
+    variant: 'circular',
+    width: 60,
+    height: 60,
+  },
+};
+
+export const Text: Story = {
+  render: () => (
+    <Box width="300px">
+      <Skeleton variant="text" width="100%" />
+      <Skeleton variant="text" width="80%" />
+      <Skeleton variant="text" width="60%" />
+    </Box>
+  ),
+};
+
+export const Combined: Story = {
+  render: () => (
+    <Box display="flex" gap={4} width="300px">
+      <Skeleton variant="circular" width={40} height={40} />
+      <Box flex={1}>
+        <Skeleton variant="text" width="100%" />
+        <Skeleton variant="text" width="70%" />
+      </Box>
+    </Box>
+  ),
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,32 @@
+import clsx from 'clsx';
+
+import styles from './Skeleton.module.css';
+import type { SkeletonProps } from './Skeleton.types.ts';
+import { Box } from '../Box/Box.tsx';
+
+export const Skeleton = ({
+  variant = 'rectangular',
+  width,
+  height,
+  animation = 'pulse',
+  className,
+  style,
+  'aria-hidden': ariaHidden,
+  ...props
+}: SkeletonProps) => {
+  return (
+    <Box
+      className={clsx(
+        styles.root,
+        styles[variant],
+        animation !== 'none' && styles[animation],
+        className
+      )}
+      width={width}
+      height={height}
+      style={style}
+      aria-hidden={ariaHidden ?? true}
+      {...props}
+    />
+  );
+};

package/src/components/Skeleton/Skeleton.types.ts

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: SkeletonVariant;
+  width?: string | number;
+  height?: string | number;
+  animation?: 'pulse' | 'wave' | 'none';
+}

package/src/components/Stepper/Step.module.css

@@ -0,0 +1,162 @@
+.step {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-width: 0;
+}
+
+[data-orientation='horizontal'] .step {
+  flex: 1;
+}
+
+[data-orientation='vertical'] .step {
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.stepRow {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stepper-gap);
+}
+
+[data-orientation='horizontal'] .stepRow {
+  min-width: 0;
+}
+
+.interactive {
+  all: unset;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--stepper-gap);
+}
+
+.interactive: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-md);
+}
+
+.interactive:disabled {
+  cursor: not-allowed;
+}
+
+.marker {
+  width: var(--stepper-marker-size);
+  height: var(--stepper-marker-size);
+  border-radius: var(--ds-radius-full);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--stepper-font-size);
+  font-weight: var(--ds-font-weight-medium);
+  border: 1px solid var(--ds-border-1);
+  background-color: var(--ds-surface-0);
+  color: var(--ds-text-2);
+  flex-shrink: 0;
+  transition:
+    background-color var(--ds-transition-fast),
+    color var(--ds-transition-fast),
+    border-color var(--ds-transition-fast);
+}
+
+.text {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ds-space-1);
+  min-width: 0;
+}
+
+.label {
+  font-size: var(--stepper-font-size);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.description {
+  font-size: var(--stepper-description-size);
+  color: var(--ds-text-2);
+  line-height: var(--ds-line-height-tight);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.connector {
+  background-color: var(--ds-border-1);
+  border-radius: var(--ds-radius-full);
+}
+
+[data-orientation='horizontal'] .connector {
+  height: 2px;
+  flex: 1;
+  margin-left: var(--ds-space-3);
+}
+
+[data-orientation='vertical'] .connector {
+  width: 2px;
+  height: var(--ds-space-8);
+  margin-left: calc(var(--stepper-marker-size) / 2 - 1px);
+  margin-top: var(--ds-space-2);
+}
+
+.completed .marker {
+  background-color: var(--ds-success);
+  border-color: var(--ds-success);
+  color: var(--ds-text-on-brand);
+}
+
+.completed .label {
+  color: var(--ds-text-1);
+}
+
+.connector-completed {
+  background-color: var(--ds-success);
+}
+
+.current .marker {
+  background-color: var(--ds-info-subtle);
+  border-color: var(--ds-info);
+  color: var(--ds-info);
+}
+
+.current .label {
+  color: var(--ds-text-1);
+}
+
+.connector-current {
+  background-color: var(--ds-info);
+}
+
+.error .marker {
+  background-color: var(--ds-danger);
+  border-color: var(--ds-danger);
+  color: var(--ds-text-on-brand);
+}
+
+.error .label {
+  color: var(--ds-danger);
+}
+
+.connector-error {
+  background-color: var(--ds-danger);
+}
+
+.upcoming .label {
+  color: var(--ds-text-2);
+}
+
+.disabled {
+  opacity: 0.5;
+}
+
+.disabled .interactive {
+  cursor: not-allowed;
+}

package/src/components/Stepper/Step.tsx

@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+import type { ElementType, KeyboardEvent } from 'react';
+
+import styles from './Step.module.css';
+import type { StepProps } from './Step.types.ts';
+
+export const Step = ({
+  step,
+  index,
+  status,
+  isInteractive,
+  onStepClick,
+  isLast,
+  id,
+}: StepProps) => {
+  const isDisabled = Boolean(step.disabled);
+  const StepContent: ElementType = isInteractive ? 'button' : 'div';
+  const markerContent = status === 'error' ? '!' : String(index + 1);
+
+  const handleClick = () => {
+    if (isInteractive && !isDisabled) {
+      onStepClick?.(step, index);
+    }
+  };
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (isInteractive && !isDisabled && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onStepClick?.(step, index);
+    }
+  };
+
+  return (
+    <li className={clsx(styles.step, styles[status], isDisabled && styles.disabled)}>
+      <StepContent
+        id={id}
+        type={isInteractive ? 'button' : undefined}
+        className={clsx(styles.stepRow, isInteractive && styles.interactive)}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        aria-current={status === 'current' ? 'step' : undefined}
+        aria-disabled={isDisabled ? true : undefined}
+        disabled={isInteractive && isDisabled ? true : undefined}
+        tabIndex={isInteractive && !isDisabled ? 0 : undefined}
+      >
+        <span className={styles.marker} aria-hidden="true">
+          {markerContent}
+        </span>
+        <span className={styles.text}>
+          <span className={styles.label}>{step.label}</span>
+          {step.description && <span className={styles.description}>{step.description}</span>}
+        </span>
+      </StepContent>
+      {!isLast && (
+        <span
+          className={clsx(styles.connector, styles[`connector-${status}`])}
+          aria-hidden="true"
+        />
+      )}
+    </li>
+  );
+};

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

@@ -0,0 +1,19 @@
+export type StepperStatus = 'completed' | 'current' | 'upcoming' | 'error';
+
+export interface StepOptions {
+  id: string;
+  label: string;
+  description?: string;
+  status?: StepperStatus;
+  disabled?: boolean;
+}
+
+export interface StepProps {
+  step: StepOptions;
+  index: number;
+  status: StepperStatus;
+  isInteractive: boolean;
+  onStepClick?: (step: StepOptions, index: number) => void;
+  isLast: boolean;
+  id?: string;
+}

package/src/components/Stepper/Stepper.module.css

@@ -0,0 +1,39 @@
+.root {
+  --stepper-marker-size: var(--ds-space-8);
+  --stepper-font-size: var(--ds-font-size-sm);
+  --stepper-description-size: var(--ds-font-size-xs);
+  --stepper-gap: var(--ds-space-3);
+
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  font-family: var(--ds-font-family-base);
+  color: var(--ds-text-1);
+}
+
+.sm {
+  --stepper-marker-size: var(--ds-space-6);
+  --stepper-font-size: var(--ds-font-size-xs);
+  --stepper-description-size: var(--ds-font-size-xs);
+  --stepper-gap: var(--ds-space-2);
+}
+
+.lg {
+  --stepper-marker-size: var(--ds-space-10);
+  --stepper-font-size: var(--ds-font-size-base);
+  --stepper-description-size: var(--ds-font-size-sm);
+  --stepper-gap: var(--ds-space-4);
+}
+
+.horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ds-space-3);
+}
+
+.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--ds-space-4);
+}

package/src/components/Stepper/Stepper.stories.tsx

@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import type { StepOptions } from './Step.types.ts';
+import { Stepper } from './Stepper.tsx';
+import { Box } from '../Box/Box.tsx';
+
+const meta = {
+  title: 'Components/Stepper',
+  component: Stepper,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof Stepper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const steps: StepOptions[] = [
+  {
+    id: 'account',
+    label: 'Account',
+    description: 'Create login details',
+  },
+  {
+    id: 'profile',
+    label: 'Profile',
+    description: 'Add personal information',
+  },
+  {
+    id: 'billing',
+    label: 'Billing',
+    description: 'Choose a plan',
+  },
+  {
+    id: 'review',
+    label: 'Review',
+    description: 'Confirm and submit',
+  },
+];
+
+export const Default: Story = {
+  args: {
+    steps,
+    currentStep: 1,
+  },
+};
+
+export const Vertical: Story = {
+  args: {
+    steps,
+    currentStep: 2,
+    orientation: 'vertical',
+  },
+  render: (args) => (
+    <Box width="360px">
+      <Stepper {...args} />
+    </Box>
+  ),
+};
+
+export const WithStatuses: Story = {
+  args: {
+    steps: [
+      { id: 'done', label: 'Done', description: 'Completed step', status: 'completed' },
+      { id: 'current', label: 'Current', description: 'In progress', status: 'current' },
+      { id: 'error', label: 'Error', description: 'Needs attention', status: 'error' },
+      { id: 'upcoming', label: 'Upcoming', description: 'Not started', status: 'upcoming' },
+    ],
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    steps,
+    currentStep: 0,
+  },
+  render: (args) => (
+    <Box width="520px">
+      <Stepper
+        {...args}
+        onStepClick={(step) => {
+          console.log('Clicked step:', step.id);
+        }}
+      />
+    </Box>
+  ),
+};