@dxlbnl/ui 0.1.0

package/dist/components/forms/InputWrap.composition.stories.svelte

@@ -0,0 +1,32 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import InputWrap from "./InputWrap.svelte";
+  import Input from "./Input.svelte";
+
+  const { Story } = defineMeta({
+    title: "Forms/InputWrap/Composition",
+    component: InputWrap,
+    tags: ["autodocs"],
+  });
+</script>
+
+{#snippet mailIcon()}
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256" aria-hidden="true">
+    <path d="M224,48H32a8,8,0,0,0-8,8V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A8,8,0,0,0,224,48ZM98.71,128,40,181.81V74.19Zm11.84,10.85,12,11.05a8,8,0,0,0,10.82,0l12-11.05,58.22,53.15H52.27ZM157.29,128,216,74.19V181.81Z"/>
+  </svg>
+{/snippet}
+
+<Story name="Icon Prefix"
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("textbox")).toBeVisible();
+    // icon-pre span is aria-hidden so the input is still accessible
+    const iconPre = canvasElement.querySelector(".icon-pre");
+    await expect(iconPre).not.toBeNull();
+    await expect(iconPre!.getAttribute("aria-hidden")).toBe("true");
+  }}>
+  <InputWrap iconPre={mailIcon}>
+    <Input type="email" placeholder="you@domain.com" />
+  </InputWrap>
+</Story>

package/dist/components/forms/InputWrap.composition.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import InputWrap from "./InputWrap.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputWrap: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputWrap = InstanceType<typeof InputWrap>;
+export default InputWrap;

package/dist/components/forms/InputWrap.stories.svelte

@@ -0,0 +1,53 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import InputWrap from "./InputWrap.svelte";
+  import Input from "./Input.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Forms/InputWrap",
+    component: InputWrap,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- addonPre: slot holds the Input child; InputWrap wraps it with the addon -->
+<Story name="Addon Prefix" args={{ addonPre: "+12V" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const addonEl = canvas.getByText("+12V");
+    await expect(addonEl).toBeVisible();
+    const bgElev = resolveTokenColor("--bg-elev");
+    await expect(getComputedStyle(addonEl).backgroundColor).toBe(bgElev);
+    await expect(canvas.getByRole("spinbutton")).toBeVisible();
+  }}>
+  <Input type="number" value="75" />
+</Story>
+
+<Story name="Addon Suffix" args={{ addonSuf: "mA" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const addonEl = canvas.getByText("mA");
+    await expect(addonEl).toBeVisible();
+  }}>
+  <Input type="number" value="62" />
+</Story>
+
+<Story name="Clearable — No Value" args={{ clearable: true, value: "" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const clearBtn = canvas.getByRole("button", { name: "Clear" });
+    await expect(clearBtn).not.toBeVisible();
+  }}>
+  <Input type="text" />
+</Story>
+
+<Story name="Clearable — With Value" args={{ clearable: true, value: "DISTRANS-AR1" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const clearBtn = canvas.getByRole("button", { name: "Clear" });
+    await expect(clearBtn).toBeVisible();
+  }}>
+  <Input type="text" value="DISTRANS-AR1" />
+</Story>

package/dist/components/forms/InputWrap.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import InputWrap from "./InputWrap.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const InputWrap: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type InputWrap = InstanceType<typeof InputWrap>;
+export default InputWrap;

package/dist/components/forms/InputWrap.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+  import Button from '../primitives/Button.svelte'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Snippet rendered as an icon before the input (aria-hidden). */
+    iconPre?: Snippet
+    /** Text prefix rendered before the input in a pill. */
+    addonPre?: string
+    /** Text suffix rendered after the input in a pill. */
+    addonSuf?: string
+    /** Show a clear (×) button when the input has a value. @default false */
+    clearable?: boolean
+    /** Current input value — used to show/hide the clear button. @default '' */
+    value?: string
+    /** Called when the clear button is clicked. */
+    onclear?: () => void
+    children: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    iconPre,
+    addonPre,
+    addonSuf,
+    clearable = false,
+    value = '',
+    onclear,
+    children,
+    ...rest
+  }: Props = $props()
+
+  let showClear = $derived(clearable && (value?.length ?? 0) > 0)
+</script>
+
+<div class="input-wrap" {...rest}>
+  {#if iconPre}
+    <span class="icon-pre" aria-hidden="true">
+      {@render iconPre()}
+    </span>
+  {/if}
+  {#if addonPre}
+    <span class="addon addon-pre">{addonPre}</span>
+  {/if}
+  {@render children()}
+  {#if addonSuf}
+    <span class="addon addon-suf">{addonSuf}</span>
+  {/if}
+  {#if clearable}
+    <Button
+      variant="ghost"
+      type="button"
+      class={showClear ? 'wrap-clear visible' : 'wrap-clear'}
+      aria-label="Clear"
+      tabindex={showClear ? 0 : -1}
+      onclick={onclear}
+    >×</Button>
+  {/if}
+</div>
+
+<style>
+  .input-wrap {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+  }
+
+  .icon-pre {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    flex-shrink: 0;
+    background: var(--bg-elev);
+    border: 1px solid var(--rule-strong);
+    border-right: none;
+    color: var(--ink-faint);
+  }
+
+  .addon {
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    background: var(--bg-elev);
+    border: 1px solid var(--rule-strong);
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--ink-faint);
+    white-space: nowrap;
+    letter-spacing: 0.04em;
+  }
+
+  .addon-pre {
+    border-right: none;
+  }
+
+  .addon-suf {
+    border-left: none;
+  }
+
+  :global(.wrap-clear) {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    font-family: var(--mono);
+    font-size: 14px;
+    line-height: 1;
+    color: var(--ink-faint);
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 2px 4px;
+    transition: color var(--transition);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :global(.wrap-clear.visible) {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  :global(.wrap-clear:hover) {
+    color: var(--ink);
+  }
+</style>

package/dist/components/forms/InputWrap.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Snippet rendered as an icon before the input (aria-hidden). */
+    iconPre?: Snippet;
+    /** Text prefix rendered before the input in a pill. */
+    addonPre?: string;
+    /** Text suffix rendered after the input in a pill. */
+    addonSuf?: string;
+    /** Show a clear (×) button when the input has a value. @default false */
+    clearable?: boolean;
+    /** Current input value — used to show/hide the clear button. @default '' */
+    value?: string;
+    /** Called when the clear button is clicked. */
+    onclear?: () => void;
+    children: Snippet;
+    [key: string]: unknown;
+}
+declare const InputWrap: import("svelte").Component<Props, {}, "">;
+type InputWrap = ReturnType<typeof InputWrap>;
+export default InputWrap;

package/dist/components/forms/Radio.stories.svelte

@@ -0,0 +1,70 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import { resolveTokenColor, resolveTokenFgColor } from "../../storybook-utils.js";
+  import Radio from "./Radio.svelte";
+
+  const { Story } = defineMeta({
+    title: "Forms/Radio",
+    component: Radio,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-25: unchecked by default -->
+<Story name="Default (Unchecked)"
+  args={{ label: "Option A", name: "demo", value: "a", checked: false }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("radio");
+    await expect(input).toBeVisible();
+    await expect(input).not.toBeChecked();
+    // AC-28: name and value attributes forwarded via ...rest
+    await expect(input.getAttribute("name")).toBe("demo");
+    await expect(input.getAttribute("value")).toBe("a");
+    // indicator border colour matches var(--rule-strong)
+    const indicator = canvasElement.querySelector(".radio-indicator");
+    const ruleStrongColor = resolveTokenFgColor("--rule-strong");
+    await expect(getComputedStyle(indicator!).borderColor).toBe(ruleStrongColor);
+  }} />
+
+<!-- AC-26: checked state -->
+<Story name="Checked"
+  args={{ label: "Option A", name: "demo", value: "a", checked: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("radio");
+    await expect(input).toBeChecked();
+    // AC-28: attributes still forwarded in checked state
+    await expect(input.getAttribute("name")).toBe("demo");
+    await expect(input.getAttribute("value")).toBe("a");
+    // indicator ::before pseudo-element colour resolves (amber dot present)
+    const indicator = canvasElement.querySelector(".radio-indicator");
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(indicator!, "::before").backgroundColor).toBe(amberColor);
+  }} />
+
+<!-- AC-27: disabled — toBeDisabled and wrap opacity 0.4 -->
+<Story name="Disabled"
+  args={{ label: "Locked", name: "demo", value: "x", disabled: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("radio");
+    await expect(input).toBeDisabled();
+    // AC-27: wrap opacity 0.4
+    const wrap = canvasElement.querySelector(".radio-wrap");
+    await expect(getComputedStyle(wrap!).opacity).toBe("0.4");
+  }} />
+
+<!-- AC-29: focus styles — keyboard focus reaches the radio input -->
+<Story name="Focus Styles"
+  args={{ label: "Focus me", name: "demo", value: "f" }}
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("radio");
+    await userEvent.tab();
+    await expect(input).toHaveFocus();
+    // indicator receives the delegated focus outline — it exists in DOM
+    const indicator = canvasElement.querySelector(".radio-indicator");
+    await expect(indicator).toBeVisible();
+  }} />

package/dist/components/forms/Radio.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Radio from "./Radio.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Radio: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Radio = InstanceType<typeof Radio>;
+export default Radio;

package/dist/components/forms/Radio.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+  import { getContext } from 'svelte'
+  import type { FieldContext } from './field-context.js'
+  import { FIELD_CONTEXT_KEY } from './field-context.js'
+
+  interface Props extends HTMLInputAttributes {
+    /** Visible label text rendered next to the radio button. */
+    label: string
+    [key: string]: unknown
+  }
+
+  let {
+    label,
+    checked = false,
+    disabled,
+    tabindex,
+    ...rest
+  }: Props = $props()
+
+  const fieldCtx = getContext<FieldContext | undefined>(FIELD_CONTEXT_KEY)
+
+  let resolvedId = $derived(fieldCtx ? fieldCtx.inputId : (rest.id as string | undefined))
+  let resolvedAriaInvalid: boolean | 'true' | 'false' | 'grammar' | 'spelling' | null | undefined = $derived(
+    fieldCtx?.hasError ? 'true' : undefined
+  )
+  let resolvedAriaDescribedby = $derived(fieldCtx?.hasHint ? fieldCtx.hintId : undefined)
+</script>
+
+<label class="radio-wrap" class:disabled={disabled}>
+  <input
+    type="radio"
+    class="radio-input"
+    {checked}
+    {disabled}
+    {tabindex}
+    id={resolvedId}
+    aria-invalid={resolvedAriaInvalid}
+    aria-describedby={resolvedAriaDescribedby}
+    {...rest}
+  />
+  <span class="radio-indicator" aria-hidden="true"></span>
+  <span class="radio-label">{label}</span>
+</label>
+
+<style>
+  .radio-wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--ink);
+    position: relative;
+  }
+
+  .radio-wrap.disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  .radio-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  .radio-indicator {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0;
+    border: 1px solid var(--rule-strong);
+    border-radius: 50%;
+    background: transparent;
+    transition: border-color var(--transition);
+    position: relative;
+  }
+
+  /* Checked state — amber inner dot via ::before */
+  .radio-input:checked + .radio-indicator::before {
+    content: '';
+    display: block;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--amber);
+  }
+
+  /* Focus-visible delegated to indicator */
+  .radio-input:focus-visible + .radio-indicator {
+    outline: 2px solid var(--amber);
+    outline-offset: 2px;
+  }
+
+  .radio-label {
+    color: var(--ink);
+  }
+</style>

package/dist/components/forms/Radio.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+interface Props extends HTMLInputAttributes {
+    /** Visible label text rendered next to the radio button. */
+    label: string;
+    [key: string]: unknown;
+}
+declare const Radio: import("svelte").Component<Props, {}, "">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;

package/dist/components/forms/RadioGroup.stories.svelte

@@ -0,0 +1,115 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import RadioGroup from "./RadioGroup.svelte";
+
+  const { Story } = defineMeta({
+    title: "Forms/RadioGroup",
+    component: RadioGroup,
+    tags: ["autodocs"],
+  });
+
+  const baseOptions = [
+    { value: "osc", label: "Oscillator" },
+    { value: "env", label: "Envelope" },
+    { value: "util", label: "Utility" },
+  ];
+
+  const partiallyDisabledOptions = [
+    { value: "osc", label: "Oscillator" },
+    { value: "env", label: "Envelope" },
+    { value: "util", label: "Utility", disabled: true },
+  ];
+</script>
+
+<!-- AC-31, AC-32, AC-33, AC-36: fieldset, legend, radios, no selection -->
+<Story name="Default — No Selection"
+  args={{ legend: "Module type", name: "mod", options: baseOptions }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // AC-32: getByRole('group') returns the fieldset with the legend text as accessible name
+    const group = canvas.getByRole("group", { name: "Module type" });
+    await expect(group).toBeVisible();
+    // AC-31: fieldset contains a legend with the legend prop text
+    const legend = canvasElement.querySelector("legend");
+    await expect(legend).not.toBeNull();
+    await expect(legend!.textContent!.trim()).toBe("Module type");
+    // AC-33: one radio per option
+    const radios = canvas.getAllByRole("radio");
+    await expect(radios.length).toBe(3);
+    // AC-36: no radio is checked when value is unset
+    for (const radio of radios) {
+      await expect(radio).not.toBeChecked();
+    }
+  }} />
+
+<!-- AC-34, AC-35: name attribute shared, correct radio checked -->
+<Story name="With Selection"
+  args={{ legend: "Module type", name: "mod", options: baseOptions, value: "env" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    // AC-35: the radio matching value is checked
+    const envRadio = canvas.getByRole("radio", { name: "Envelope" });
+    await expect(envRadio).toBeChecked();
+    // AC-35: all other radios are unchecked
+    const oscRadio = canvas.getByRole("radio", { name: "Oscillator" });
+    const utilRadio = canvas.getByRole("radio", { name: "Utility" });
+    await expect(oscRadio).not.toBeChecked();
+    await expect(utilRadio).not.toBeChecked();
+    // AC-34: all radios share the same name attribute
+    const radios = canvas.getAllByRole("radio");
+    for (const radio of radios) {
+      await expect(radio.getAttribute("name")).toBe("mod");
+    }
+    // AC-42: selected radio has tabindex="0", others have tabindex="-1"
+    await expect(envRadio.getAttribute("tabindex")).toBe("0");
+    await expect(oscRadio.getAttribute("tabindex")).toBe("-1");
+    await expect(utilRadio.getAttribute("tabindex")).toBe("-1");
+  }} />
+
+<!-- AC-37: disabled group — all radios disabled -->
+<Story name="Disabled Group"
+  args={{ legend: "Module type", name: "mod", options: baseOptions, disabled: true }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radios = canvas.getAllByRole("radio");
+    await expect(radios.length).toBe(3);
+    // AC-37: all radios are disabled when group disabled=true
+    for (const radio of radios) {
+      await expect(radio).toBeDisabled();
+    }
+  }} />
+
+<!-- AC-38: individual option disabled, others enabled -->
+<Story name="Partially Disabled"
+  args={{ legend: "Module type", name: "mod", options: partiallyDisabledOptions }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const oscRadio = canvas.getByRole("radio", { name: "Oscillator" });
+    const envRadio = canvas.getByRole("radio", { name: "Envelope" });
+    const utilRadio = canvas.getByRole("radio", { name: "Utility" });
+    // AC-38: only the individually-disabled option is disabled
+    await expect(utilRadio).toBeDisabled();
+    await expect(oscRadio).not.toBeDisabled();
+    await expect(envRadio).not.toBeDisabled();
+  }} />
+
+<!-- AC-39, AC-42: ArrowDown moves focus to next radio; roving tabindex -->
+<Story name="Keyboard Navigation"
+  args={{ legend: "Module type", name: "mod", options: baseOptions, value: "osc" }}
+  play={async ({ canvasElement, userEvent }) => {
+    const canvas = within(canvasElement);
+    const oscRadio = canvas.getByRole("radio", { name: "Oscillator" });
+    const envRadio = canvas.getByRole("radio", { name: "Envelope" });
+    // AC-42: selected radio ("osc") has tabindex="0"
+    await expect(oscRadio.getAttribute("tabindex")).toBe("0");
+    // Tab into the group — the selected (tabindex=0) radio receives focus
+    await userEvent.tab();
+    await expect(oscRadio).toHaveFocus();
+    // AC-39: ArrowDown moves DOM focus to the next enabled radio
+    await userEvent.keyboard("{ArrowDown}");
+    await expect(document.activeElement).toBe(envRadio);
+    // AC-40: ArrowUp from second radio returns focus to first
+    await userEvent.keyboard("{ArrowUp}");
+    await expect(document.activeElement).toBe(oscRadio);
+  }} />

package/dist/components/forms/RadioGroup.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import RadioGroup from "./RadioGroup.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const RadioGroup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type RadioGroup = InstanceType<typeof RadioGroup>;
+export default RadioGroup;