@weave-design-system/react 0.1.0

package/src/primitives/input/InputGroup.types.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface InputGroupProps extends Omit<ComponentPropsWithoutRef<'input'>, 'size'> {
+  /** Label text displayed above the input */
+  label: string;
+  /** Helper text displayed below the input */
+  helperText?: string;
+  /** Error message — sets the input to error state */
+  error?: string;
+  /** Success message — sets the input to success state */
+  success?: string;
+}

package/src/primitives/input/index.ts

@@ -0,0 +1,2 @@
+export { InputGroup } from './InputGroup';
+export type { InputGroupProps } from './InputGroup.types';

package/src/primitives/link/Link.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Link } from './Link';
+
+const meta: Meta<typeof Link> = {
+  title: 'Primitives/Link',
+  component: Link,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Link>;
+
+export const Inline: Story = {
+  args: { children: 'Learn more about Weave', href: '#', variant: 'inline' },
+};
+
+export const WithIcon: Story = {
+  args: { children: 'Documentation', href: '#', variant: 'withIcon' },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <p className="text-text-primary" style={{ fontSize: 'var(--text-body)' }}>
+      Read our <Link href="#">getting started guide</Link> to learn how to set up Weave
+      in your project, or visit the <Link href="#" variant="withIcon">full docs</Link>.
+    </p>
+  ),
+};

package/src/primitives/link/Link.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Link } from './Link';
+
+describe('Link', () => {
+  it('renders as an anchor', () => {
+    render(<Link href="/docs">Docs</Link>);
+    const link = screen.getByRole('link', { name: 'Docs' });
+    expect(link).toHaveAttribute('href', '/docs');
+  });
+
+  it('shows external icon for withIcon variant', () => {
+    render(<Link variant="withIcon" href="#">Docs</Link>);
+    const link = screen.getByRole('link');
+    expect(link.querySelector('svg')).toBeInTheDocument();
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(<Link ref={ref} href="#">Test</Link>);
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLAnchorElement));
+  });
+});

package/src/primitives/link/Link.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { ExternalLink } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { LinkProps } from './Link.types';
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ variant = 'inline', className, children, ...props }, ref) => {
+    return (
+      <a
+        ref={ref}
+        className={cn(
+          'text-rust transition-colors hover:text-rust-dark',
+          'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rust',
+          variant === 'inline' && 'underline underline-offset-2',
+          variant === 'withIcon' && 'inline-flex items-center gap-1 no-underline',
+          className,
+        )}
+        style={{ transitionDuration: 'var(--duration-micro)' }}
+        {...props}
+      >
+        {children}
+        {variant === 'withIcon' && <ExternalLink size={14} />}
+      </a>
+    );
+  },
+);
+
+Link.displayName = 'Link';

package/src/primitives/link/Link.types.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export type LinkVariant = 'inline' | 'withIcon';
+
+export interface LinkProps extends ComponentPropsWithoutRef<'a'> {
+  /** Visual variant */
+  variant?: LinkVariant;
+}

package/src/primitives/link/index.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link';
+export type { LinkProps, LinkVariant } from './Link.types';

package/src/primitives/radio/Radio.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Radio } from './Radio';
+
+const meta: Meta<typeof Radio> = {
+  title: 'Primitives/Radio',
+  component: Radio,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Radio>;
+
+export const Default: Story = {
+  args: { label: 'Option A', name: 'demo' },
+};
+
+export const Group: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      <Radio label="Small" name="size" value="sm" defaultChecked />
+      <Radio label="Medium" name="size" value="md" />
+      <Radio label="Large" name="size" value="lg" />
+    </div>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { label: 'Disabled', disabled: true },
+};

package/src/primitives/radio/Radio.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+import { Radio } from './Radio';
+
+describe('Radio', () => {
+  it('renders with label', () => {
+    render(<Radio label="Option A" name="test" />);
+    expect(screen.getByLabelText('Option A')).toBeInTheDocument();
+  });
+
+  it('selects on click', async () => {
+    render(<Radio label="Option A" name="test" />);
+    const radio = screen.getByLabelText('Option A');
+    await userEvent.click(radio);
+    expect(radio).toBeChecked();
+  });
+
+  it('works as a group', async () => {
+    render(
+      <>
+        <Radio label="A" name="group" value="a" />
+        <Radio label="B" name="group" value="b" />
+      </>,
+    );
+    await userEvent.click(screen.getByLabelText('A'));
+    expect(screen.getByLabelText('A')).toBeChecked();
+    await userEvent.click(screen.getByLabelText('B'));
+    expect(screen.getByLabelText('B')).toBeChecked();
+    expect(screen.getByLabelText('A')).not.toBeChecked();
+  });
+});

package/src/primitives/radio/Radio.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, useId } from 'react';
+import { cn } from '../../utils/cn';
+import type { RadioProps } from './Radio.types';
+
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(
+  ({ label, className, disabled, id: idProp, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+
+    return (
+      <label
+        htmlFor={id}
+        className={cn(
+          'inline-flex items-center gap-2 cursor-pointer select-none',
+          disabled && 'opacity-40 cursor-not-allowed',
+          className,
+        )}
+      >
+        <div className="relative flex items-center justify-center">
+          <input
+            ref={ref}
+            id={id}
+            type="radio"
+            disabled={disabled}
+            className="peer sr-only"
+            {...props}
+          />
+          <div
+            className={cn(
+              'h-5 w-5 rounded-full border-2 transition-all flex items-center justify-center',
+              'peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-rust',
+              'peer-checked:border-rust border-border',
+            )}
+            style={{ transitionDuration: 'var(--duration-fast)' }}
+          >
+            <div
+              className={cn(
+                'h-2.5 w-2.5 rounded-full bg-rust transition-all',
+                'peer-checked:scale-100 scale-0',
+              )}
+              style={{
+                transitionDuration: 'var(--duration-fast)',
+                transitionTimingFunction: 'var(--ease-spring)',
+              }}
+            />
+          </div>
+        </div>
+        <span
+          className="text-text-primary"
+          style={{ fontSize: 'var(--text-body)', lineHeight: 'var(--leading-body)' }}
+        >
+          {label}
+        </span>
+      </label>
+    );
+  },
+);
+
+Radio.displayName = 'Radio';

package/src/primitives/radio/Radio.types.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface RadioProps extends Omit<ComponentPropsWithoutRef<'input'>, 'type' | 'size'> {
+  /** Label text displayed next to the radio button */
+  label: string;
+}

package/src/primitives/radio/index.ts

@@ -0,0 +1,2 @@
+export { Radio } from './Radio';
+export type { RadioProps } from './Radio.types';

package/src/primitives/select/SelectGroup.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SelectGroup } from './SelectGroup';
+
+const meta: Meta<typeof SelectGroup> = {
+  title: 'Primitives/SelectGroup',
+  component: SelectGroup,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof SelectGroup>;
+
+export const Default: Story = {
+  args: { label: 'Status', placeholder: 'Select a status' },
+  render: (args) => (
+    <SelectGroup {...args}>
+      <option value="active">Active</option>
+      <option value="paused">Paused</option>
+      <option value="archived">Archived</option>
+    </SelectGroup>
+  ),
+};
+
+export const ErrorState: Story = {
+  args: { label: 'Priority', error: 'Please select a priority' },
+  render: (args) => (
+    <SelectGroup {...args}>
+      <option value="high">High</option>
+      <option value="medium">Medium</option>
+      <option value="low">Low</option>
+    </SelectGroup>
+  ),
+};

package/src/primitives/select/SelectGroup.test.tsx

@@ -0,0 +1,34 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { SelectGroup } from './SelectGroup';
+
+describe('SelectGroup', () => {
+  it('renders label and select', () => {
+    render(
+      <SelectGroup label="Status">
+        <option value="active">Active</option>
+      </SelectGroup>,
+    );
+    expect(screen.getByLabelText('Status')).toBeInTheDocument();
+  });
+
+  it('shows error state', () => {
+    render(
+      <SelectGroup label="Status" error="Required">
+        <option value="active">Active</option>
+      </SelectGroup>,
+    );
+    expect(screen.getByText('Required')).toBeInTheDocument();
+    expect(screen.getByLabelText('Status')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('forwards ref', () => {
+    const ref = vi.fn();
+    render(
+      <SelectGroup label="Status" ref={ref}>
+        <option value="active">Active</option>
+      </SelectGroup>,
+    );
+    expect(ref).toHaveBeenCalledWith(expect.any(HTMLSelectElement));
+  });
+});

package/src/primitives/select/SelectGroup.tsx

@@ -0,0 +1,72 @@
+import { forwardRef, useId } from 'react';
+import { AlertCircle, ChevronDown } from 'lucide-react';
+import { cn } from '../../utils/cn';
+import type { SelectGroupProps } from './SelectGroup.types';
+
+export const SelectGroup = forwardRef<HTMLSelectElement, SelectGroupProps>(
+  ({ label, helperText, error, placeholder, className, disabled, children, id: idProp, ...props }, ref) => {
+    const autoId = useId();
+    const id = idProp ?? autoId;
+    const messageId = `${id}-message`;
+
+    return (
+      <div className={cn('flex flex-col gap-1.5', className)}>
+        <label
+          htmlFor={id}
+          className="text-text-primary font-medium"
+          style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+        >
+          {label}
+        </label>
+        <div className="relative">
+          <select
+            ref={ref}
+            id={id}
+            disabled={disabled}
+            aria-invalid={!!error}
+            aria-describedby={error || helperText ? messageId : undefined}
+            className={cn(
+              'w-full appearance-none rounded-md bg-white px-3 py-2 pr-10 text-text-primary',
+              'border outline-none transition-all',
+              'focus:border-rust focus:ring-2 focus:ring-rust-light',
+              error ? 'border-error' : 'border-border',
+              disabled && 'bg-surface opacity-50 cursor-not-allowed',
+            )}
+            style={{
+              fontSize: 'var(--text-body)',
+              lineHeight: 'var(--leading-body)',
+              transitionDuration: 'var(--duration-fast)',
+            }}
+            {...props}
+          >
+            {placeholder && (
+              <option value="" disabled>
+                {placeholder}
+              </option>
+            )}
+            {children}
+          </select>
+          <ChevronDown
+            size={16}
+            className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-text-secondary"
+          />
+        </div>
+        {(error || helperText) && (
+          <p
+            id={messageId}
+            className={cn(
+              'flex items-center gap-1',
+              error ? 'text-error' : 'text-text-secondary',
+            )}
+            style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+          >
+            {error && <AlertCircle size={14} />}
+            {error || helperText}
+          </p>
+        )}
+      </div>
+    );
+  },
+);
+
+SelectGroup.displayName = 'SelectGroup';

package/src/primitives/select/SelectGroup.types.ts

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+export interface SelectGroupProps extends ComponentPropsWithoutRef<'select'> {
+  /** Label text displayed above the select */
+  label: string;
+  /** Helper text displayed below the select */
+  helperText?: string;
+  /** Error message — sets the select to error state */
+  error?: string;
+  /** Placeholder option text */
+  placeholder?: string;
+}

package/src/primitives/select/index.ts

@@ -0,0 +1,2 @@
+export { SelectGroup } from './SelectGroup';
+export type { SelectGroupProps } from './SelectGroup.types';

package/src/primitives/slider/Slider.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Slider } from './Slider';
+
+const meta: Meta<typeof Slider> = {
+  title: 'Primitives/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: { label: 'Volume', defaultValue: 60 },
+};
+
+export const WithRange: Story = {
+  args: { label: 'Price', min: 0, max: 500, step: 10, defaultValue: 200 },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Brightness', defaultValue: 75, disabled: true },
+};

package/src/primitives/slider/Slider.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Slider } from './Slider';
+
+describe('Slider', () => {
+  it('renders label and value', () => {
+    render(<Slider label="Volume" defaultValue={60} />);
+    expect(screen.getByText('Volume')).toBeInTheDocument();
+    expect(screen.getByText('60')).toBeInTheDocument();
+  });
+
+  it('renders range input', () => {
+    render(<Slider label="Volume" />);
+    expect(screen.getByRole('slider')).toBeInTheDocument();
+  });
+
+  it('reflects controlled value', () => {
+    render(<Slider label="Volume" value={42} />);
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('respects min and max', () => {
+    render(<Slider label="Volume" min={10} max={90} />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAttribute('min', '10');
+    expect(slider).toHaveAttribute('max', '90');
+  });
+});

package/src/primitives/slider/Slider.tsx

@@ -0,0 +1,80 @@
+import { useId } from 'react';
+import { cn } from '../../utils/cn';
+import { useControllableState } from '../../hooks/use-controllable-state';
+import type { SliderProps } from './Slider.types';
+
+export function Slider({
+  label,
+  value: controlledValue,
+  defaultValue = 50,
+  min = 0,
+  max = 100,
+  step = 1,
+  onChange,
+  disabled = false,
+  showValue = true,
+  className,
+}: SliderProps) {
+  const id = useId();
+  const [value, setValue] = useControllableState({
+    value: controlledValue,
+    defaultValue,
+    onChange,
+  });
+
+  const percent = ((value - min) / (max - min)) * 100;
+
+  return (
+    <div className={cn('flex flex-col gap-2', disabled && 'opacity-50', className)}>
+      <div className="flex items-center justify-between">
+        <label
+          htmlFor={id}
+          className="text-text-primary font-medium"
+          style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+        >
+          {label}
+        </label>
+        {showValue && (
+          <span
+            className="text-text-secondary font-mono tabular-nums"
+            style={{ fontSize: 'var(--text-body-sm)', lineHeight: 'var(--leading-body-sm)' }}
+          >
+            {value}
+          </span>
+        )}
+      </div>
+      <div className="relative flex items-center h-5">
+        <div className="absolute w-full h-1.5 rounded-full bg-border">
+          <div
+            className="absolute h-full rounded-full bg-rust"
+            style={{ width: `${percent}%` }}
+          />
+        </div>
+        <input
+          id={id}
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={value}
+          disabled={disabled}
+          onChange={(e) => setValue(Number(e.target.value))}
+          className={cn(
+            'absolute w-full h-5 appearance-none bg-transparent cursor-pointer',
+            'focus-visible:outline-none',
+            '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-5 [&::-webkit-slider-thumb]:h-5',
+            '[&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-rust [&::-webkit-slider-thumb]:shadow-2',
+            '[&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-white',
+            '[&::-webkit-slider-thumb]:transition-transform',
+            '[&::-webkit-slider-thumb]:hover:scale-110',
+            '[&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:w-5 [&::-moz-range-thumb]:h-5',
+            '[&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-rust [&::-moz-range-thumb]:shadow-2',
+            '[&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-white',
+            disabled && 'cursor-not-allowed',
+          )}
+          aria-label={label}
+        />
+      </div>
+    </div>
+  );
+}

package/src/primitives/slider/Slider.types.ts

@@ -0,0 +1,22 @@
+export interface SliderProps {
+  /** Label text */
+  label: string;
+  /** Current value (controlled) */
+  value?: number;
+  /** Default value (uncontrolled) */
+  defaultValue?: number;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Change handler */
+  onChange?: (value: number) => void;
+  /** Whether the slider is disabled */
+  disabled?: boolean;
+  /** Show value label next to the slider */
+  showValue?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}

package/src/primitives/slider/index.ts

@@ -0,0 +1,2 @@
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider.types';

package/src/primitives/textarea/TextareaGroup.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextareaGroup } from './TextareaGroup';
+
+const meta: Meta<typeof TextareaGroup> = {
+  title: 'Primitives/TextareaGroup',
+  component: TextareaGroup,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof TextareaGroup>;
+
+export const Default: Story = {
+  args: { label: 'Description', placeholder: 'Enter a description...' },
+};
+
+export const WithHelperText: Story = {
+  args: { label: 'Notes', helperText: 'Markdown supported', placeholder: 'Write your notes...' },
+};
+
+export const ErrorState: Story = {
+  args: { label: 'Bio', error: 'Bio is required' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Description', value: 'Locked content', disabled: true },
+};

package/src/primitives/textarea/TextareaGroup.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { TextareaGroup } from './TextareaGroup';
+
+describe('TextareaGroup', () => {
+  it('renders label and textarea', () => {
+    render(<TextareaGroup label="Description" />);
+    expect(screen.getByLabelText('Description')).toBeInTheDocument();
+  });
+
+  it('shows error state', () => {
+    render(<TextareaGroup label="Bio" error="Required" />);
+    expect(screen.getByText('Required')).toBeInTheDocument();
+    expect(screen.getByLabelText('Bio')).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('handles user input', async () => {
+    const onChange = vi.fn();
+    render(<TextareaGroup label="Notes" onChange={onChange} />);
+    await userEvent.type(screen.getByLabelText('Notes'), 'hello');
+    expect(onChange).toHaveBeenCalled();
+  });
+});