@rdna/radiants 0.1.1 → 0.1.3

package/components/core/Checkbox/Checkbox.test.tsx

@@ -0,0 +1,132 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Checkbox, Radio, RadioGroup } from './Checkbox';
+
+describe('Checkbox', () => {
+  test('renders with label', () => {
+    render(<Checkbox label="Accept terms" checked={false} onChange={() => {}} />);
+    expect(screen.getByText('Accept terms')).toBeInTheDocument();
+  });
+
+  test('fires onChange on click', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox label="Toggle me" checked={false} onChange={onChange} />);
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText('Toggle me'));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  test('reflects checked state', () => {
+    const { rerender } = render(
+      <Checkbox label="Check" checked={false} onChange={() => {}} />,
+    );
+    const input = screen.getByRole('checkbox');
+    expect(input).not.toBeChecked();
+
+    rerender(<Checkbox label="Check" checked={true} onChange={() => {}} />);
+    expect(input).toBeChecked();
+  });
+
+  test('keyboard Space toggles checkbox', async () => {
+    const onChange = vi.fn();
+    render(<Checkbox label="Keyboard" checked={false} onChange={onChange} />);
+
+    const user = userEvent.setup();
+    const input = screen.getByRole('checkbox');
+    input.focus();
+    await user.keyboard(' ');
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  test('disabled checkbox does not fire onChange', async () => {
+    const onChange = vi.fn();
+    render(
+      <Checkbox label="Disabled" checked={false} onChange={onChange} disabled />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText('Disabled'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe('Checkbox extra contracts', () => {
+  test('supports indeterminate state', () => {
+    render(<Checkbox indeterminate label="Mixed" />);
+    expect(screen.getByRole('checkbox')).toHaveAttribute('aria-checked', 'mixed');
+  });
+
+  test('supports uncontrolled defaultChecked', async () => {
+    const user = userEvent.setup();
+    render(<Checkbox defaultChecked label="Default on" />);
+    const cb = screen.getByRole('checkbox');
+    expect(cb).toBeChecked();
+    await user.click(cb);
+    expect(cb).not.toBeChecked();
+  });
+
+  test('keepMounted keeps indicator in DOM when unchecked', () => {
+    const { container } = render(<Checkbox label="KM" />);
+    // Indicator element should remain in DOM even when unchecked
+    expect(container.querySelector('[data-slot="indicator"]')).toBeInTheDocument();
+  });
+});
+
+describe('RadioGroup', () => {
+  test('arrow-key navigation moves between radios in the same group', async () => {
+    const user = userEvent.setup();
+    render(
+      <RadioGroup value="one" onValueChange={vi.fn()}>
+        <Radio value="one" label="One" />
+        <Radio value="two" label="Two" />
+      </RadioGroup>,
+    );
+    const radios = screen.getAllByRole('radio');
+    await user.click(radios[0]);
+    await user.keyboard('{ArrowDown}');
+    expect(radios[1]).toHaveFocus();
+  });
+});
+
+describe('Radio', () => {
+  test('renders with label', () => {
+    render(<Radio label="Option A" name="group" value="a" checked={false} onChange={() => {}} />);
+    expect(screen.getByText('Option A')).toBeInTheDocument();
+  });
+
+  test('fires onChange on click', async () => {
+    const onChange = vi.fn();
+    render(
+      <Radio label="Option A" name="group" value="a" checked={false} onChange={onChange} />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText('Option A'));
+    expect(onChange).toHaveBeenCalled();
+  });
+
+  test('reflects checked state', () => {
+    const { rerender } = render(
+      <Radio label="Option" name="g" value="a" checked={false} onChange={() => {}} />,
+    );
+    const input = screen.getByRole('radio');
+    expect(input).not.toBeChecked();
+
+    rerender(
+      <Radio label="Option" name="g" value="a" checked={true} onChange={() => {}} />,
+    );
+    expect(input).toBeChecked();
+  });
+
+  test('disabled radio does not fire onChange', async () => {
+    const onChange = vi.fn();
+    render(
+      <Radio label="Disabled" name="g" value="a" checked={false} onChange={onChange} disabled />,
+    );
+
+    const user = userEvent.setup();
+    await user.click(screen.getByText('Disabled'));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});

package/components/core/Checkbox/Checkbox.tsx

@@ -0,0 +1,315 @@
+'use client';
+
+import React, { createContext, use } from 'react';
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface CheckboxProps {
+  /** Label text */
+  label?: string;
+  /** Additional classes for container */
+  className?: string;
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Uncontrolled initial checked state */
+  defaultChecked?: boolean;
+  /** Whether the checkbox is in an indeterminate (mixed) state */
+  indeterminate?: boolean;
+  /** Fires when checked state changes */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  name?: string;
+  value?: string;
+  id?: string;
+  ref?: React.Ref<HTMLInputElement>;
+}
+
+interface RadioProps {
+  /** Label text */
+  label?: string;
+  /** Additional classes for container */
+  className?: string;
+  /** Controlled checked state (standalone mode) */
+  checked?: boolean;
+  /** Value for use inside RadioGroup */
+  value?: string;
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  name?: string;
+  id?: string;
+  ref?: React.Ref<HTMLInputElement>;
+}
+
+interface RadioGroupProps {
+  value?: string;
+  onValueChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+  required?: boolean;
+  readOnly?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+// ============================================================================
+// RadioGroup context — lets Radio know it's inside a shared group
+// ============================================================================
+
+const RadioGroupContext = createContext(false);
+
+// ============================================================================
+// Pixel-art Checkmark Icon
+// ============================================================================
+
+function CheckmarkIcon({ className = '' }: { className?: string }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fill="currentColor"
+        d="M2,8H4V9H5V10H7V9H8V8H9V7H10V6H11V5H12V4H14V6H13V7H12V8H11V9H10V10H9V11H8V12H7V13H5V12H4V11H3V10H2V8Z"
+      />
+    </svg>
+  );
+}
+
+// ============================================================================
+// Checkbox Component
+// ============================================================================
+
+export function Checkbox({
+  ref,
+  label,
+  className = '',
+  disabled,
+  checked,
+  defaultChecked,
+  indeterminate,
+  onChange,
+  onCheckedChange,
+  required,
+  readOnly,
+  name,
+  value,
+  id,
+}: CheckboxProps) {
+  return (
+    <label
+      className={`
+        inline-flex items-center gap-2 cursor-pointer
+        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        ${className}
+      `}
+      data-rdna="checkbox"
+      data-variant="checkbox"
+    >
+      <BaseCheckbox.Root
+        checked={checked}
+        defaultChecked={defaultChecked}
+        indeterminate={indeterminate}
+        onCheckedChange={(newChecked) => {
+          onCheckedChange?.(newChecked);
+          if (onChange) {
+            const syntheticEvent = {
+              target: { checked: newChecked, name, value, type: 'checkbox' },
+              currentTarget: { checked: newChecked, name, value, type: 'checkbox' },
+              preventDefault: () => {},
+              stopPropagation: () => {},
+            } as React.ChangeEvent<HTMLInputElement>;
+            onChange(syntheticEvent);
+          }
+        }}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        name={name}
+        value={value}
+        inputRef={ref}
+        id={id}
+        render={(props, state) => (
+          <span
+            {...props}
+            className={`
+              relative w-5 h-5
+              pixel-rounded-xs
+              flex items-center justify-center
+              transition-colors
+              focus-visible:outline focus-visible:outline-2 focus-visible:outline-focus
+              cursor-pointer
+              ${state.checked || state.indeterminate
+                ? 'bg-accent'
+                : 'bg-page bg-card'
+              }
+            `}
+          />
+        )}
+      >
+        <BaseCheckbox.Indicator
+          keepMounted
+          data-slot="indicator"
+          className="absolute inset-0 flex items-center justify-center"
+        >
+          <CheckmarkIcon className="text-accent-inv" />
+        </BaseCheckbox.Indicator>
+      </BaseCheckbox.Root>
+      {label && (
+        <span className="font-sans text-base text-main select-none">
+          {label}
+        </span>
+      )}
+    </label>
+  );
+}
+
+// ============================================================================
+// RadioGroup Component
+// ============================================================================
+
+export function RadioGroup({
+  value,
+  onValueChange,
+  name,
+  disabled,
+  required,
+  readOnly,
+  children,
+  className = '',
+}: RadioGroupProps) {
+  return (
+    <RadioGroupContext value={true}>
+      <BaseRadioGroup
+        value={value}
+        onValueChange={onValueChange}
+        name={name}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+        className={className}
+      >
+        {children}
+      </BaseRadioGroup>
+    </RadioGroupContext>
+  );
+}
+
+// ============================================================================
+// Radio Component
+// ============================================================================
+
+export function Radio({
+  ref,
+  label,
+  className = '',
+  disabled,
+  checked,
+  onChange,
+  name,
+  value,
+  id,
+  required,
+  readOnly,
+}: RadioProps) {
+  const inGroup = use(RadioGroupContext);
+  const radioValue = value ?? '__rdna-radio__';
+
+  const radioRoot = (
+    <BaseRadio.Root
+      value={radioValue}
+      inputRef={ref}
+      id={id}
+      disabled={disabled}
+      render={(props, state) => (
+        <span
+          {...props}
+          className={`
+            w-5 h-5
+            border border-line
+            rounded-full
+            flex items-center justify-center
+            transition-colors
+            focus-visible:outline-none focus-visible:shadow-focused
+            cursor-pointer
+            ${state.checked
+              ? 'bg-accent'
+              : 'bg-page bg-card'
+            }
+            ${className}
+          `}
+        />
+      )}
+    >
+      <BaseRadio.Indicator className="flex items-center justify-center">
+        <div className="w-2 h-2 bg-accent-inv rounded-full" />
+      </BaseRadio.Indicator>
+    </BaseRadio.Root>
+  );
+
+  if (inGroup) {
+    return (
+      <label
+        className={`inline-flex items-center gap-2 cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+      >
+        {radioRoot}
+        {label && (
+          <span className="font-sans text-base text-main select-none">
+            {label}
+          </span>
+        )}
+      </label>
+    );
+  }
+
+  // Standalone mode — wrap in own group for backwards compat with checked/onChange API
+  const uncheckedValue = '__rdna-radio-unchecked__';
+  const isChecked = checked === true;
+
+  return (
+    <label
+      className={`inline-flex items-center gap-2 cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+    >
+      <BaseRadioGroup
+        value={isChecked ? radioValue : uncheckedValue}
+        onValueChange={() => {
+          if (onChange) {
+            const syntheticEvent = {
+              target: { checked: true, name, value, type: 'radio' },
+              currentTarget: { checked: true, name, value, type: 'radio' },
+              preventDefault: () => {},
+              stopPropagation: () => {},
+            } as React.ChangeEvent<HTMLInputElement>;
+            onChange(syntheticEvent);
+          }
+        }}
+        name={name}
+        disabled={disabled}
+        required={required}
+        readOnly={readOnly}
+      >
+        {radioRoot}
+      </BaseRadioGroup>
+      {label && (
+        <span className="font-sans text-base text-main select-none">
+          {label}
+        </span>
+      )}
+    </label>
+  );
+}
+
+export default Checkbox;

package/components/core/Checkbox/Radio.meta.ts

@@ -0,0 +1,51 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+interface RadioProps {
+  label?: string;
+  disabled?: boolean;
+  checked?: boolean;
+  name?: string;
+  value?: string;
+}
+
+export const RadioMeta = defineComponentMeta<RadioProps>()({
+  name: "Radio",
+  sourcePath: "packages/radiants/components/core/Checkbox/Checkbox.tsx",
+  description: "Retro-styled radio button with pixel-art dot indicator. Uses Base UI Radio internally for accessibility.",
+  props: {
+    label: { type: "string", description: "Label text displayed next to the radio" },
+    disabled: { type: "boolean", default: false, description: "Disable radio interactions" },
+    checked: { type: "boolean", description: "Controlled checked state" },
+    name: { type: "string", description: "Input name for form submission (groups radios together)" },
+    value: { type: "string", description: "Input value for form submission" },
+  },
+  slots: {},
+  tokenBindings: {
+    container: { gap: "spacing-xs" },
+    input: {
+      background: "page",
+      border: "line",
+      backgroundChecked: "accent",
+      focusRing: "focus",
+    },
+    dot: { background: "main" },
+    label: { text: "main", font: "mondwest" },
+  },
+  examples: [
+    { name: "Basic radio", code: '<Radio label="Option A" name="choice" value="a" />' },
+    {
+      name: "Radio group",
+      code: '<>\n  <Radio label="Small" name="size" value="sm" />\n  <Radio label="Medium" name="size" value="md" checked />\n  <Radio label="Large" name="size" value="lg" />\n</>',
+    },
+  ],
+  registry: {
+    category: "form",
+    tags: ["radio", "option", "choice"],
+    renderMode: "custom",
+    states: [
+      { name: "hover", driver: "wrapper" },
+      { name: "focus", driver: "wrapper" },
+      { name: "disabled", driver: "prop", prop: "disabled", value: true },
+    ],
+  },
+});

package/components/core/Checkbox/Radio.schema.json

@@ -0,0 +1,38 @@
+{
+  "name": "Radio",
+  "description": "Retro-styled radio button with pixel-art dot indicator. Uses Base UI Radio internally for accessibility.",
+  "props": {
+    "label": {
+      "type": "string",
+      "description": "Label text displayed next to the radio"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Disable radio interactions"
+    },
+    "checked": {
+      "type": "boolean",
+      "description": "Controlled checked state"
+    },
+    "name": {
+      "type": "string",
+      "description": "Input name for form submission (groups radios together)"
+    },
+    "value": {
+      "type": "string",
+      "description": "Input value for form submission"
+    }
+  },
+  "slots": {},
+  "examples": [
+    {
+      "name": "Basic radio",
+      "code": "<Radio label=\"Option A\" name=\"choice\" value=\"a\" />"
+    },
+    {
+      "name": "Radio group",
+      "code": "<>\n  <Radio label=\"Small\" name=\"size\" value=\"sm\" />\n  <Radio label=\"Medium\" name=\"size\" value=\"md\" checked />\n  <Radio label=\"Large\" name=\"size\" value=\"lg\" />\n</>"
+    }
+  ]
+}

package/components/core/Collapsible/Collapsible.meta.ts

@@ -0,0 +1,65 @@
+import { defineComponentMeta } from "@rdna/preview/define-component-meta";
+
+interface CollapsibleProps {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: string;
+  disabled?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const CollapsibleMeta = defineComponentMeta<CollapsibleProps>()({
+  name: "Collapsible",
+  description:
+    "Expandable content section with animated transition. Triggered by a designated trigger element.",
+  subcomponents: ["CollapsibleTrigger", "CollapsibleContent"],
+  props: {
+    defaultOpen: {
+      type: "boolean",
+      description: "Initial expanded state for uncontrolled usage",
+    },
+    open: {
+      type: "boolean",
+      description: "Controlled expanded state",
+    },
+    onOpenChange: {
+      type: "string",
+      description: "Callback when expanded state changes",
+    },
+    disabled: {
+      type: "boolean",
+      default: false,
+      description: "Prevent toggling",
+    },
+    className: {
+      type: "string",
+      description: "Additional CSS classes",
+    },
+  },
+  slots: {
+    children: {
+      description: "CollapsibleTrigger and CollapsibleContent elements",
+    },
+  },
+  examples: [
+    {
+      name: "Basic collapsible",
+      code: "<Collapsible>\n  <CollapsibleTrigger>Toggle section</CollapsibleTrigger>\n  <CollapsibleContent>\n    <p>Hidden content revealed on click</p>\n  </CollapsibleContent>\n</Collapsible>",
+    },
+  ],
+  replaces: [
+    { element: "details", import: "@rdna/radiants/components/core" },
+    {
+      element: "summary",
+      import: "@rdna/radiants/components/core",
+      note: "Use Collapsible.Trigger for the summary surface",
+    },
+  ],
+  wraps: "@base-ui/react/collapsible",
+  registry: {
+    category: "layout",
+    tags: ["collapse", "expand", "toggle"],
+    renderMode: "custom",
+  },
+});

package/components/core/Collapsible/Collapsible.schema.json

@@ -0,0 +1,42 @@
+{
+  "name": "Collapsible",
+  "description": "Expandable content section with animated transition. Triggered by a designated trigger element.",
+  "subcomponents": [
+    "CollapsibleTrigger",
+    "CollapsibleContent"
+  ],
+  "props": {
+    "defaultOpen": {
+      "type": "boolean",
+      "description": "Initial expanded state for uncontrolled usage"
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Controlled expanded state"
+    },
+    "onOpenChange": {
+      "type": "string",
+      "description": "Callback when expanded state changes"
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": false,
+      "description": "Prevent toggling"
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional CSS classes"
+    }
+  },
+  "slots": {
+    "children": {
+      "description": "CollapsibleTrigger and CollapsibleContent elements"
+    }
+  },
+  "examples": [
+    {
+      "name": "Basic collapsible",
+      "code": "<Collapsible>\n  <CollapsibleTrigger>Toggle section</CollapsibleTrigger>\n  <CollapsibleContent>\n    <p>Hidden content revealed on click</p>\n  </CollapsibleContent>\n</Collapsible>"
+    }
+  ]
+}