@motion-proto/live-tokens 0.1.1 → 0.3.1

package/src/component-editor/InlineEditActionsEditor.svelte

@@ -0,0 +1,83 @@
+<script context="module" lang="ts">
+  import type { Token } from './scaffolding/types';
+
+  export const component = 'inlineeditactions';
+
+  // Two objects (save button, cancel button), each with default/hover states.
+  // Within each button, link shape props (border-width, radius, padding, icon-size) across states.
+  // Save and cancel are different objects, so they don't link to each other by default.
+  const buttons = ['save', 'cancel'] as const;
+  type Button = typeof buttons[number];
+  function buttonStateTokens(btn: Button, state: 'default' | 'hover'): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'surface', variable: `--inlineeditactions-${btn}-${state}-surface` },
+      { label: 'text color', groupKey: 'text', variable: `--inlineeditactions-${btn}-${state}-text` },
+      { label: 'border color', groupKey: 'border', variable: `--inlineeditactions-${btn}-${state}-border` },
+      { label: 'border width', canBeLinked: true, groupKey: `${btn}-border-width`, variable: `--inlineeditactions-${btn}-${state}-border-width` },
+      { label: 'corner radius', canBeLinked: true, groupKey: `${btn}-radius`, variable: `--inlineeditactions-${btn}-${state}-radius` },
+      { label: 'padding', canBeLinked: true, groupKey: `${btn}-padding`, variable: `--inlineeditactions-${btn}-${state}-padding` },
+      { label: 'icon size', canBeLinked: true, groupKey: `${btn}-icon-size`, variable: `--inlineeditactions-${btn}-${state}-icon-size` },
+    ];
+  }
+
+  // Each button gets its own VariantGroup with its own default/hover states.
+  function buttonStates(btn: Button): Record<string, Token[]> {
+    return {
+      default: buttonStateTokens(btn, 'default'),
+      hover: buttonStateTokens(btn, 'hover'),
+    };
+  }
+  export const allTokens: Token[] = buttons.flatMap((b) => Object.values(buttonStates(b)).flat());
+
+  // Linked block surfaces shape props per button (linked across default/hover within same button).
+  const linkableContexts = new Map<string, string>(buttons.flatMap((btn) => [
+    [`--inlineeditactions-${btn}-default-border-width`, btn] as const,
+    [`--inlineeditactions-${btn}-default-radius`, btn] as const,
+    [`--inlineeditactions-${btn}-default-padding`, btn] as const,
+    [`--inlineeditactions-${btn}-default-icon-size`, btn] as const,
+  ]));
+</script>
+
+<script lang="ts">
+  import InlineEditActions from '../components/InlineEditActions.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+
+  $: visibleStatesByButton = (btn: Button) => Object.fromEntries(
+    Object.entries(buttonStates(btn)).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>;
+</script>
+
+<ComponentEditorBase {component} title="Inline Edit Actions" description="Confirm/cancel button pair for inline editing. Import from <code>components/InlineEditActions.svelte</code>" tokens={allTokens} {linked}>
+  {#each buttons as btn}
+    <VariantGroup
+      name={btn}
+      title={btn === 'save' ? 'Save button' : 'Cancel button'}
+      states={visibleStatesByButton(btn)}
+      {component}
+      let:activeState
+    >
+      {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+      <div class="inline-edit-demo-row">
+        <span style="color: var(--text-secondary);">Editing value...</span>
+        <InlineEditActions
+          onSave={() => {}}
+          onCancel={() => {}}
+          class={forceClass}
+        />
+      </div>
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+
+<style>
+  .inline-edit-demo-row {
+    display: flex;
+    align-items: center;
+    gap: var(--space-12);
+  }
+</style>

package/src/component-editor/NotificationEditor.svelte

@@ -0,0 +1,160 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'notification';
+  const variants = ['info', 'success', 'warning', 'danger'] as const;
+  type Variant = typeof variants[number];
+
+  // Per variant: notification frame (surface, border, border-width, radius, padding) + icon (color, size).
+  function variantTokens(v: Variant): Token[] {
+    return [
+      { label: 'surface color', groupKey: 'surface', variable: `--notification-${v}-surface` },
+      { label: 'border color', groupKey: 'border', variable: `--notification-${v}-border` },
+      { label: 'border width', canBeLinked: true, groupKey: 'border-width', variable: `--notification-${v}-border-width` },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--notification-${v}-radius` },
+      { label: 'padding', canBeLinked: true, groupKey: 'padding', variable: `--notification-${v}-padding` },
+      { label: 'icon color', groupKey: 'icon', variable: `--notification-${v}-icon` },
+      { label: 'icon size', canBeLinked: true, groupKey: 'icon-size', variable: `--notification-${v}-icon-size` },
+    ];
+  }
+
+  // Two type groups per variant: title and body text.
+  function variantTypeGroups(v: Variant): TypeGroupConfig[] {
+    return [
+      {
+        legend: 'title',
+        colorVariable: `--notification-${v}-title`,
+        familyVariable: `--notification-${v}-title-font-family`,
+        sizeVariable: `--notification-${v}-title-font-size`,
+        weightVariable: `--notification-${v}-title-font-weight`,
+        lineHeightVariable: `--notification-${v}-title-line-height`,
+      },
+      {
+        legend: 'body text',
+        colorVariable: `--notification-${v}-text`,
+        familyVariable: `--notification-${v}-text-font-family`,
+        sizeVariable: `--notification-${v}-text-font-size`,
+        weightVariable: `--notification-${v}-text-font-weight`,
+        lineHeightVariable: `--notification-${v}-text-line-height`,
+      },
+    ];
+  }
+  function variantTypeGroupTokens(v: Variant): Token[] {
+    return [
+      { label: 'font family', canBeLinked: true, groupKey: 'title-font-family', variable: `--notification-${v}-title-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'title-font-size', variable: `--notification-${v}-title-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'title-font-weight', variable: `--notification-${v}-title-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'title-line-height', variable: `--notification-${v}-title-line-height` },
+      { label: 'font family', canBeLinked: true, groupKey: 'text-font-family', variable: `--notification-${v}-text-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'text-font-size', variable: `--notification-${v}-text-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'text-font-weight', variable: `--notification-${v}-text-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'text-line-height', variable: `--notification-${v}-text-line-height` },
+    ];
+  }
+  export const allTokens: Token[] = variants.flatMap((v) => [
+    ...variantTokens(v),
+    ...buildTypeGroupColorTokens(variantTypeGroups(v)),
+    ...variantTypeGroupTokens(v),
+  ]);
+
+  // Linked block surfaces shape and font props that may be linked across variants.
+  const linkableContexts = new Map<string, string>(variants.flatMap((v) => [
+    [`--notification-${v}-border-width`, v] as const,
+    [`--notification-${v}-radius`, v] as const,
+    [`--notification-${v}-padding`, v] as const,
+    [`--notification-${v}-icon-size`, v] as const,
+    [`--notification-${v}-title-font-family`, v] as const,
+    [`--notification-${v}-title-font-size`, v] as const,
+    [`--notification-${v}-title-font-weight`, v] as const,
+    [`--notification-${v}-title-line-height`, v] as const,
+    [`--notification-${v}-text-font-family`, v] as const,
+    [`--notification-${v}-text-font-size`, v] as const,
+    [`--notification-${v}-text-font-weight`, v] as const,
+    [`--notification-${v}-text-line-height`, v] as const,
+  ]));
+
+  const BUTTON_VARIANT_OPTIONS = ['none', 'primary', 'secondary', 'outline', 'success', 'danger', 'warning'] as const;
+  type ButtonVariantOption = typeof BUTTON_VARIANT_OPTIONS[number];
+  type ButtonVariant = Exclude<ButtonVariantOption, 'none'>;
+  function variantLabel(v: ButtonVariantOption): string {
+    return v.charAt(0).toUpperCase() + v.slice(1);
+  }
+  function toVariant(v: ButtonVariantOption): ButtonVariant | null {
+    return v === 'none' ? null : v;
+  }
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import Notification from '../components/Notification.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import { buildSiblings } from './scaffolding/siblings';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+
+  import type { NotificationActions } from '../components/types';
+
+  let dismissible = false;
+  let rightOption: ButtonVariantOption = 'none';
+  let leftOption: ButtonVariantOption = 'none';
+  $: actions = ((): NotificationActions => {
+    const a: NotificationActions = {};
+    const right = toVariant(rightOption);
+    const left = toVariant(leftOption);
+    if (right) a.right = { label: 'Confirm', variant: right, onClick: () => {} };
+    if (left) a.left = { label: 'Cancel', variant: left, onClick: () => {} };
+    return a;
+  })();
+</script>
+
+<ComponentEditorBase {component} title="Notification" description="Contextual feedback notifications with multiple variants. Import from <code>components/Notification.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+  <svelte:fragment slot="config">
+    <label>
+      <input type="checkbox" bind:checked={dismissible} />
+      <span>Dismissible</span>
+    </label>
+    <label>
+      <span>Right button</span>
+      <select class="form-select" bind:value={rightOption}>
+        {#each BUTTON_VARIANT_OPTIONS as v}
+          <option value={v}>{variantLabel(v)}</option>
+        {/each}
+      </select>
+    </label>
+    <label>
+      <span>Left button</span>
+      <select class="form-select" bind:value={leftOption}>
+        {#each BUTTON_VARIANT_OPTIONS as v}
+          <option value={v}>{variantLabel(v)}</option>
+        {/each}
+      </select>
+    </label>
+  </svelte:fragment>
+  {#each variants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={{ [v]: visibleVariantTokens(v) }}
+      typeGroups={{ [v]: variantTypeGroups(v) }}
+      {component}
+      siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
+    >
+      {#if v === 'info'}
+        <Notification variant="info" title="Information" description="This is an informational message to keep you updated." {dismissible} {actions} />
+      {:else if v === 'success'}
+        <Notification variant="success" title="Success" description="Your action was completed successfully." {dismissible} {actions} />
+      {:else if v === 'warning'}
+        <Notification variant="warning" title="Warning" description="Caution: This action may have unintended consequences." {dismissible} {actions} />
+      {:else if v === 'danger'}
+        <Notification variant="danger" title="Danger" description="Critical error: Please address this issue immediately." {dismissible} {actions} />
+      {/if}
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+

package/src/component-editor/ProgressBarEditor.svelte

@@ -0,0 +1,124 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'progressbar';
+  const variants = ['primary', 'success', 'warning', 'danger', 'info'] as const;
+  type Variant = typeof variants[number];
+
+  // Per variant: track (surface, border, border-width, radius, height) + fill (color).
+  function variantTokens(v: Variant): Token[] {
+    return [
+      { label: 'fill color', groupKey: 'fill', variable: `--progressbar-${v}-fill` },
+      { label: 'track surface color', groupKey: 'surface', variable: `--progressbar-${v}-track-surface` },
+      { label: 'track border color', groupKey: 'border', variable: `--progressbar-${v}-track-border` },
+      { label: 'track border width', canBeLinked: true, groupKey: 'track-border-width', variable: `--progressbar-${v}-track-border-width` },
+      { label: 'corner radius', canBeLinked: true, groupKey: 'radius', variable: `--progressbar-${v}-radius` },
+      { label: 'track height', canBeLinked: true, groupKey: 'track-height', variable: `--progressbar-${v}-track-height` },
+    ];
+  }
+
+  // Two type groups per variant: label and value.
+  function variantTypeGroups(v: Variant): TypeGroupConfig[] {
+    return [
+      {
+        legend: 'label',
+        colorVariable: `--progressbar-${v}-label`,
+        familyVariable: `--progressbar-${v}-label-font-family`,
+        sizeVariable: `--progressbar-${v}-label-font-size`,
+        weightVariable: `--progressbar-${v}-label-font-weight`,
+        lineHeightVariable: `--progressbar-${v}-label-line-height`,
+      },
+      {
+        legend: 'value',
+        colorVariable: `--progressbar-${v}-value`,
+        familyVariable: `--progressbar-${v}-value-font-family`,
+        sizeVariable: `--progressbar-${v}-value-font-size`,
+        weightVariable: `--progressbar-${v}-value-font-weight`,
+        lineHeightVariable: `--progressbar-${v}-value-line-height`,
+      },
+    ];
+  }
+  function variantTypeGroupTokens(v: Variant): Token[] {
+    return [
+      { label: 'font family', canBeLinked: true, groupKey: 'label-font-family', variable: `--progressbar-${v}-label-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'label-font-size', variable: `--progressbar-${v}-label-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'label-font-weight', variable: `--progressbar-${v}-label-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'label-line-height', variable: `--progressbar-${v}-label-line-height` },
+      { label: 'font family', canBeLinked: true, groupKey: 'value-font-family', variable: `--progressbar-${v}-value-font-family` },
+      { label: 'font size', canBeLinked: true, groupKey: 'value-font-size', variable: `--progressbar-${v}-value-font-size` },
+      { label: 'font weight', canBeLinked: true, groupKey: 'value-font-weight', variable: `--progressbar-${v}-value-font-weight` },
+      { label: 'line height', canBeLinked: true, groupKey: 'value-line-height', variable: `--progressbar-${v}-value-line-height` },
+    ];
+  }
+  export const allTokens: Token[] = variants.flatMap((v) => [
+    ...variantTokens(v),
+    ...buildTypeGroupColorTokens(variantTypeGroups(v)),
+    ...variantTypeGroupTokens(v),
+  ]);
+
+  // Cross-variant linked block surfaces shape and font props that may be linked.
+  const linkableContexts = new Map<string, string>(variants.flatMap((v) => [
+    [`--progressbar-${v}-track-border-width`, v] as const,
+    [`--progressbar-${v}-radius`, v] as const,
+    [`--progressbar-${v}-track-height`, v] as const,
+    [`--progressbar-${v}-label-font-family`, v] as const,
+    [`--progressbar-${v}-label-font-size`, v] as const,
+    [`--progressbar-${v}-label-font-weight`, v] as const,
+    [`--progressbar-${v}-label-line-height`, v] as const,
+    [`--progressbar-${v}-value-font-family`, v] as const,
+    [`--progressbar-${v}-value-font-size`, v] as const,
+    [`--progressbar-${v}-value-font-weight`, v] as const,
+    [`--progressbar-${v}-value-line-height`, v] as const,
+  ]));
+
+  const variantOptions = variants.map((v) => ({ value: v, label: v.charAt(0).toUpperCase() + v.slice(1) }));
+</script>
+
+<script lang="ts">
+  import ProgressBar from '../components/ProgressBar.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+  import { buildSiblings } from './scaffolding/siblings';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+  $: visibleVariantTokens = (v: Variant) => withLinkedDisabled(variantTokens(v), linked.varSet);
+</script>
+
+<ComponentEditorBase {component} title="Progress Bar" description="Animated progress bar with variants. Import from <code>components/ProgressBar.svelte</code>" tokens={allTokens} {linked} variants={variantOptions}>
+  {#each variants as v}
+    <VariantGroup
+      name={v}
+      title={v.charAt(0).toUpperCase() + v.slice(1)}
+      states={{ [v]: visibleVariantTokens(v) }}
+      typeGroups={{ [v]: variantTypeGroups(v) }}
+      {component}
+      siblings={buildSiblings(variants, v, (sv) => ({ [sv]: variantTokens(sv) }), (sv) => ({ [sv]: variantTypeGroups(sv) }))}
+    >
+      <div class="progress-demo-stack">
+        {#if v === 'primary'}
+          <ProgressBar value={25} label="Getting Started" variant="primary" />
+          <ProgressBar value={60} variant="primary" size="compact" />
+        {:else if v === 'success'}
+          <ProgressBar value={100} label="Complete" variant="success" />
+        {:else if v === 'warning'}
+          <ProgressBar value={75} label="Almost Done" variant="warning" />
+        {:else if v === 'danger'}
+          <ProgressBar value={33} label="Danger Zone" variant="danger" />
+        {:else if v === 'info'}
+          <ProgressBar value={50} label="Halfway There" variant="info" />
+        {/if}
+      </div>
+    </VariantGroup>
+  {/each}
+</ComponentEditorBase>
+
+<style>
+  .progress-demo-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-12);
+  }
+</style>

package/src/component-editor/RadioButtonEditor.svelte

@@ -0,0 +1,140 @@
+<script context="module" lang="ts">
+  import { buildTypeGroupColorTokens } from './scaffolding/buildTypeGroupTokens';
+  import type { Token, TypeGroupConfig } from './scaffolding/types';
+
+  export const component = 'radiobutton';
+
+  const states: Record<string, Token[]> = {
+    default: [
+      { label: 'border color', groupKey: 'color', variable: '--radiobutton-default-dot-border-color' },
+      { label: 'border thickness', canBeLinked: true, groupKey: 'border-width', variable: '--radiobutton-default-dot-border-width' },
+      { label: 'dot fill', groupKey: 'fill', variable: '--radiobutton-default-dot-fill' },
+      { label: 'dot size', groupKey: 'size', variable: '--radiobutton-default-dot-size' },
+    ],
+    hover: [
+      { label: 'border color', groupKey: 'color', variable: '--radiobutton-hover-dot-border-color' },
+      { label: 'border thickness', canBeLinked: true, groupKey: 'border-width', variable: '--radiobutton-hover-dot-border-width' },
+      { label: 'dot fill', groupKey: 'fill', variable: '--radiobutton-hover-dot-fill' },
+      { label: 'dot size', groupKey: 'size', variable: '--radiobutton-hover-dot-size' },
+    ],
+    active: [
+      { label: 'border color', groupKey: 'color', variable: '--radiobutton-active-dot-border-color' },
+      { label: 'border thickness', canBeLinked: true, groupKey: 'border-width', variable: '--radiobutton-active-dot-border-width' },
+      { label: 'dot fill', groupKey: 'fill', variable: '--radiobutton-active-dot-fill' },
+      { label: 'dot size', groupKey: 'size', variable: '--radiobutton-active-dot-size' },
+    ],
+  };
+
+  const typeGroups: Record<string, TypeGroupConfig[]> = {
+    default: [{
+      legend: 'label',
+      colorVariable: '--radiobutton-default-label',
+      familyVariable: '--radiobutton-default-label-font-family',
+      sizeVariable: '--radiobutton-default-label-font-size',
+      weightVariable: '--radiobutton-default-label-font-weight',
+      lineHeightVariable: '--radiobutton-default-label-line-height',
+    }],
+    hover: [{
+      legend: 'label',
+      colorVariable: '--radiobutton-hover-label',
+      familyVariable: '--radiobutton-hover-label-font-family',
+      sizeVariable: '--radiobutton-hover-label-font-size',
+      weightVariable: '--radiobutton-hover-label-font-weight',
+      lineHeightVariable: '--radiobutton-hover-label-line-height',
+    }],
+    active: [{
+      legend: 'label',
+      colorVariable: '--radiobutton-active-label',
+      familyVariable: '--radiobutton-active-label-font-family',
+      sizeVariable: '--radiobutton-active-label-font-size',
+      weightVariable: '--radiobutton-active-label-font-weight',
+      lineHeightVariable: '--radiobutton-active-label-line-height',
+    }],
+  };
+  const typeGroupTokens: Token[] = (['default', 'hover', 'active'] as const).flatMap((s) => [
+    { label: 'font family', canBeLinked: true, groupKey: 'font-family', variable: `--radiobutton-${s}-label-font-family` },
+    { label: 'font size', canBeLinked: true, groupKey: 'font-size', variable: `--radiobutton-${s}-label-font-size` },
+    { label: 'font weight', canBeLinked: true, groupKey: 'font-weight', variable: `--radiobutton-${s}-label-font-weight` },
+    { label: 'line height', canBeLinked: true, groupKey: 'line-height', variable: `--radiobutton-${s}-label-line-height` },
+  ]);
+  const linkableContexts = new Map<string, string>([
+    ['--radiobutton-default-dot-border-width', 'default'],
+    ['--radiobutton-hover-dot-border-width', 'hover'],
+    ['--radiobutton-active-dot-border-width', 'active'],
+    ['--radiobutton-default-label-font-family', 'default'],
+    ['--radiobutton-hover-label-font-family', 'hover'],
+    ['--radiobutton-active-label-font-family', 'active'],
+    ['--radiobutton-default-label-font-size', 'default'],
+    ['--radiobutton-hover-label-font-size', 'hover'],
+    ['--radiobutton-active-label-font-size', 'active'],
+    ['--radiobutton-default-label-font-weight', 'default'],
+    ['--radiobutton-hover-label-font-weight', 'hover'],
+    ['--radiobutton-active-label-font-weight', 'active'],
+    ['--radiobutton-default-label-line-height', 'default'],
+    ['--radiobutton-hover-label-line-height', 'hover'],
+    ['--radiobutton-active-label-line-height', 'active'],
+  ]);
+  export const allTokens: Token[] = [
+    ...Object.values(states).flat(),
+    ...buildTypeGroupColorTokens(typeGroups),
+    ...typeGroupTokens,
+  ];
+</script>
+
+<script lang="ts">
+  import RadioButton from '../components/RadioButton.svelte';
+  import VariantGroup from './scaffolding/VariantGroup.svelte';
+  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
+  import { editorState } from '../lib/editorStore';
+  import { computeLinkedBlock, withLinkedDisabled } from './scaffolding/linkedBlock';
+
+  let selectedRadio = 'option-b';
+
+  $: linked = computeLinkedBlock(component, linkableContexts, allTokens, $editorState);
+
+  $: visibleStates = Object.fromEntries(
+    Object.entries(states).map(([name, list]) => [name, withLinkedDisabled(list, linked.varSet)]),
+  ) as Record<string, Token[]>;
+</script>
+
+<ComponentEditorBase {component} title="Radio Button" description="Styled radio buttons with icon and color support. Import from <code>components/RadioButton.svelte</code>" tokens={allTokens} {linked}>
+  <VariantGroup
+    name="radio"
+    title="Radio Button"
+    states={visibleStates}
+    {typeGroups}
+    {component}
+    let:activeState
+  >
+    {@const forceClass = activeState === 'hover' ? 'force-hover' : ''}
+    {@const forceActive = activeState === 'active'}
+    <div class="radio-demo-row">
+      <RadioButton
+        label="Defense"
+        active={forceActive || selectedRadio === 'option-a'}
+        class={forceClass}
+        on:click={() => (selectedRadio = 'option-a')}
+      />
+      <RadioButton
+        label="Economy"
+        active={forceActive || selectedRadio === 'option-b'}
+        class={forceClass}
+        on:click={() => (selectedRadio = 'option-b')}
+      />
+      <RadioButton
+        label="Loyalty"
+        active={forceActive || selectedRadio === 'option-c'}
+        class={forceClass}
+        on:click={() => (selectedRadio = 'option-c')}
+      />
+    </div>
+  </VariantGroup>
+</ComponentEditorBase>
+
+<style>
+  .radio-demo-row {
+    display: flex;
+    gap: var(--space-16);
+    flex-wrap: wrap;
+  }
+</style>