@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/checkbox-card.gts

@@ -0,0 +1,82 @@
+// Pretui — CheckboxCard: a many-of-N choice where each option is a card.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { fn } from '@ember/helper';
+import { emit, firstDefined } from '../pretui-primitives';
+import { ChoiceGrid, OptionCard } from '../internal/choice-cards';
+import type { ChoiceCardOption, ChoiceCardOrientation, ChoiceCardsSharedArgs } from '../internal/choice-cards';
+
+export interface CheckboxCardSignature {
+  Args: ChoiceCardsSharedArgs & {
+    value?: readonly string[];
+    defaultValue?: readonly string[];
+    onValueChange?: (values: string[]) => void;
+    /** alias */
+    onChange?: (values: string[]) => void;
+  };
+  Blocks: {
+    /** replaces the generated title and description of every card */
+    default: [option: ChoiceCardOption, selected: boolean];
+    /** an icon or thumbnail on the card's start edge */
+    media: [option: ChoiceCardOption];
+  };
+  Element: HTMLDivElement;
+}
+
+export class CheckboxCard extends Component<CheckboxCardSignature> {
+  @tracked internal: readonly string[] = this.args.defaultValue ?? [];
+  get options(): ChoiceCardOption[] {
+    return firstDefined(this.args.options, this.args.items) ?? [];
+  }
+  get value(): readonly string[] {
+    return this.args.value ?? this.internal;
+  }
+  get groupDisabled() {
+    return firstDefined(this.args.disabled, this.args.isDisabled) ?? false;
+  }
+  get orientation(): ChoiceCardOrientation {
+    return this.args.orientation ?? 'vertical';
+  }
+  toggle = (option: ChoiceCardOption, ev: Event) => {
+    let next = this.value.includes(option.value)
+      ? this.value.filter((v) => v !== option.value)
+      : [...this.value, option.value];
+    if (this.args.value === undefined) {
+      this.internal = next;
+    }
+    emit([this.args.onValueChange, this.args.onChange], next);
+    if (this.args.value !== undefined) {
+      // controlled: undo the platform's toggle until the owner moves @value
+      (ev.target as HTMLInputElement).checked = this.isOn(option);
+    }
+  };
+  isOn = (option: ChoiceCardOption) => this.value.includes(option.value);
+  isDisabled = (option: ChoiceCardOption) =>
+    this.groupDisabled || Boolean(option.disabled);
+  <template>
+    <ChoiceGrid
+      role='group'
+      aria-label={{@label}}
+      data-orientation={{this.orientation}}
+      data-columns={{@columns}}
+      data-test-pretui-checkbox-card
+      ...attributes
+    >
+      {{#each this.options as |option|}}
+        <OptionCard
+          @kind='checkbox'
+          @name={{@name}}
+          @option={{option}}
+          @selected={{this.isOn option}}
+          @disabled={{this.isDisabled option}}
+          @onChange={{fn this.toggle option}}
+          @custom={{has-block}}
+          @hasMedia={{has-block 'media'}}
+        >
+          <:default as |o selected|>{{yield o selected}}</:default>
+          <:media as |o|>{{yield o to='media'}}</:media>
+        </OptionCard>
+      {{/each}}
+    </ChoiceGrid>
+  </template>
+}

package/bundled-realms/pretui/components/checkbox-card.md

@@ -0,0 +1,73 @@
+## What it is
+
+Many-of-N where every option is a card. The card is the label and the whole hit target; a real checkbox sits inside it, visually hidden, and a small square mark in the card's corner shows the state. The value is the array of chosen values. Use it when each option carries a title, a description and a figure and several can be on at once — add-ons, notification channels, export targets. If the options are short words, a column of **Checkbox** is the same contract at a fraction of the size. If exactly one can be chosen, **RadioCard** is this component with a string value. If the card is content rather than a choice, **Card**.
+
+## The contract
+
+```
+@options?          — ChoiceCardOption[]: { value, title, description?, meta?, disabled? }
+@items?            — alias of @options
+@value?            — controlled selection, readonly string[]; omit for the uncontrolled half
+@defaultValue?     — uncontrolled seed
+@onValueChange?    — fires with the whole array after the toggle; @onChange is the alias
+@disabled?         — every card; @isDisabled is the alias
+@label?            — the group's accessible name when no label element points at it
+@name?             — the form field every checked box submits under
+@orientation?      — 'vertical' (default) | 'horizontal'
+@columns?          — 2 | 3 | 4, a fixed count for 'horizontal'
+<:default as |option selected|>   — replaces the generated title and description
+<:media as |option|>              — an icon or thumbnail on the card's start edge
+```
+
+**Hybrid state, array out.** With `@value` undefined the group keeps its own array, seeded by `@defaultValue`. With `@value` set the group never moves itself: it reports the toggled array through `@onValueChange` and waits for the parent to change the arg. The callback always receives a new array — the chosen values in the order they were chosen, minus the one toggled off — never a mutated one. A withheld toggle is undone on the native checkbox, so the checked input always matches the painted card.
+
+**`@name` makes it a form field.** A `<form>` around the group submits each checked value under `@name`, the usual repeated-key shape. Without it the checkboxes submit nothing.
+
+**One option is disabled through `disabled` on the option; the group through `@disabled`.** Either disables the real checkbox and stamps `data-disabled` on the card.
+
+**Selection is a hairline, not a border.** Each chosen card wears a 1px ring in `--primary` and a soft 4px halo of the same hue at 12%. The corner mark is the same 15px rounded square **Checkbox** draws, with the same clip-path tick, so a card group and a plain checkbox read as one family.
+
+**State attributes are strings both ways.** `data-selected='true' | 'false'` and `data-disabled='true' | 'false'` on every card; `data-orientation` and `data-columns` on the root.
+
+## Prior art
+
+**Chakra `CheckboxCard`** is a per-item component — `CheckboxCard.Root`, `Control`, `Label`, `Description`, `Indicator`, `Addon` and a `HiddenInput` — with `variant` and `size` axes; grouping is the caller's, usually a `CheckboxGroup` around several roots. The **origin-ui** recipes build it from shadcn `Checkbox` inside a styled `Label` with a `has-[[data-state=checked]]` ring.
+
+Where this is better: **the group is the component.** The array value, the toggling and the generated card come together, so the pattern cannot be assembled wrong — the checkbox is always inside its label, the indicator is always tied to the real input, and the value is one array rather than N booleans to fold. Nothing is reimplemented: Space toggles because the input is a checkbox.
+
+Where it is thinner: **one visual recipe, group-level only.** There is no per-card `variant` or `size`, no addon band under the body, and no way to address a single card as its own component — a lone CheckboxCard is a one-element group. Title and description are strings unless the default block takes over the body. There is no indeterminate state; that belongs to a parent **Checkbox** driving this group.
+
+## Accessibility
+
+Governing pattern: a group of native checkboxes. The root is `role="group"` and takes `@label` as `aria-label`; each card is a `<label>` wrapping a real `<input type="checkbox">`. The checkboxes are independent controls; `@name` is what gives them a form field.
+
+What that buys, without any script: **the platform keyboard model.** Every checkbox is its own tab stop, Space toggles the focused one, and clicking anywhere on the card is a click on its label.
+
+- **Focus stays visible.** The input is positioned off the card at 1px with zero opacity — in the tab order and in the accessibility tree — and the card paints the focus ring through `:has(.pretui-optioncard-input:focus-visible)`.
+- **The accessible name of each checkbox is the card's text**: title, description and meta, because all of it is inside the label. Keep the description short or the announcement is long.
+- **The mark is `aria-hidden`.** It repeats the checked state visually and contributes nothing to the tree.
+- **`data-selected` is a stamp, not a role.** Assistive tech reads the checkbox's own checked state.
+- **A media block's content is inside the label**, so an icon with a text alternative becomes part of the checkbox's name. Pass `aria-hidden` on decorative icons.
+- **One tab stop per card** is the cost of independent checkboxes; a long list is a long Tab sequence. That is correct for a many-of-N choice and is what every checkbox group does.
+
+The tests assert the group role, one checkbox per label, the click-to-toggle path and the array it reports, disabled propagation and the data stamps.
+
+## Theming
+
+From the host theme: `--card` and `--card-foreground` (the card surface and its ink), `--border` (the resting hairline), `--hover` (the hover fill), `--primary` (the selected ring, halo and mark fill), `--primary-foreground` (the tick), `--field` and `--input` (the resting mark), `--ring` (the focus outline), `--muted-foreground` (description and meta).
+
+Kit tokens, each named once on the card: `--space-4` (padding), `--space-3` (gap), `--text-ui-md` and `--text-ui-sm` (title and description), `--weight-strong` (title weight), `--radius-surface` (card radius), `--pretui-dur-snap` and `--pretui-ease-snap` (the ring and fill transitions), `--pretui-shadow-control` (the resting shadow), `--pretui-edge-highlight` (the inset highlight on a selected mark). The grid reads `--space-3` for its gap.
+
+A theme retunes the selected treatment entirely through `--primary`; the 12% halo mix, the 15px mark and the 11rem minimum card width in `horizontal` are fixed.
+
+## React ecosystem
+
+| React                            | Pretui                                                      |
+| -------------------------------- | ----------------------------------------------------------- |
+| value / onChange (`string[]`)    | `@value` / `@onValueChange` (`@onChange` accepted)          |
+| defaultValue                     | `@defaultValue`                                             |
+| items                            | `@items` (alias of `@options`)                              |
+| orientation                      | `@orientation`                                              |
+| disabled / isDisabled            | `@disabled` / `@isDisabled`                                 |
+| CheckboxCard.Label / Description | `title` / `description` on the option, or the default block |
+| Addon / Indicator                | not separate — `meta` on the option and the corner mark     |

package/bundled-realms/pretui/components/checkbox-card.usage.gts

@@ -0,0 +1,114 @@
+// Pretui — CheckboxCard usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { CheckboxCard } from './checkbox-card';
+import type { ChoiceCardOption } from '../internal/choice-cards';
+
+const ADDONS: ChoiceCardOption[] = [
+  {
+    value: 'backups',
+    title: 'Nightly backups',
+    description: 'Thirty days of restore points.',
+    meta: '+$4',
+  },
+  {
+    value: 'sso',
+    title: 'Single sign-on',
+    description: 'SAML and OIDC against your identity provider.',
+    meta: '+$8',
+  },
+  {
+    value: 'audit',
+    title: 'Audit log export',
+    description: 'Stream every event to your SIEM.',
+    meta: '+$6',
+  },
+  {
+    value: 'legacy',
+    title: 'Legacy API',
+    description: 'No longer offered on new plans.',
+    meta: '—',
+    disabled: true,
+  },
+];
+
+export class CheckboxCardUsage extends Component {
+  addons = ADDONS;
+  @tracked value: string[] = ['backups'];
+  @tracked disabled = false;
+  setValue = (v: string[]) => (this.value = v);
+  setDisabled = (v: boolean) => (this.disabled = v);
+  get usage() {
+    let bits = ['@options={{this.addons}}', '@value={{this.value}}'];
+    if (this.disabled) bits.push('@disabled={{true}}');
+    bits.push('@onValueChange={{this.setValue}}');
+    return `<CheckboxCard ${bits.join(' ')} />`;
+  }
+  <template>
+    <FreestyleUsage
+      @name='CheckboxCard'
+      @description='Many-of-N where every option is a card: the card is the label and the hit target, a real checkbox sits inside it, and each chosen card wears the primary hairline. The value is the array of chosen values. Use Checkbox for a single yes/no; use this when each option carries a title, a description and a figure.'
+      @source={{this.usage}}
+    >
+      <:example>
+        <CheckboxCard
+          @label='Add-ons'
+          @options={{this.addons}}
+          @value={{this.value}}
+          @disabled={{this.disabled}}
+          @onValueChange={{this.setValue}}
+        />
+      </:example>
+      <:api as |Args|>
+        <Args.Object
+          @name='options'
+          @description='The cards. Each has a unique value, a title, and optionally description, meta (a short trailing figure) and disabled. @items is accepted as an alias.'
+          @value={{this.addons}}
+        />
+        <Args.Array
+          @name='value'
+          @optional={{true}}
+          @value={{this.value}}
+          @description='The chosen values. Omit it and pass @defaultValue for an uncontrolled group.'
+        />
+        <Args.String
+          @name='orientation'
+          @optional={{true}}
+          @defaultValue='vertical'
+          @description='vertical stacks the cards; horizontal lays them side by side, with @columns fixing the count.'
+        />
+        <Args.String
+          @name='label'
+          @optional={{true}}
+          @value='Add-ons'
+          @description='The accessible name of the group when no label element points at it.'
+        />
+        <Args.Bool
+          @name='disabled'
+          @optional={{true}}
+          @defaultValue='false'
+          @value={{this.disabled}}
+          @description='Disables every card. A single option is disabled through option.disabled.'
+          @onInput={{this.setDisabled}}
+        />
+        <Args.Action
+          @name='onValueChange'
+          @description='Receives the full array of chosen values after the toggle. @onChange is an alias.'
+        />
+        <Args.Yield
+          @name='default'
+          @description='Replaces the generated title and description of every card. Yields the option and whether it is selected.'
+        />
+        <Args.Yield
+          @name='media'
+          @description="An icon or thumbnail on the card's start edge. Yields the option."
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_CHECKBOX_CARD: Record<string, unknown> = {
+  CheckboxCard: CheckboxCardUsage,
+};

package/bundled-realms/pretui/components/checkbox.examples.gts

@@ -0,0 +1,61 @@
+// Pretui — Checkbox example gallery.
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import {
+  Stack,
+  SUPPLIERS,
+  TASKS,
+  pick,
+  seedFrom,
+  take,
+} from '../examples-kit';
+import type { ExampleSpec } from '../examples-kit';
+import { Checkbox } from './checkbox';
+
+// ── Checkbox ─────────────────────────────────────────────────────────────
+const CHK = seedFrom('Checkbox');
+const chkTasks = take(CHK, 0, 3, TASKS);
+const chkTasks0 = chkTasks[0];
+const chkTasks1 = chkTasks[1];
+const chkTasks2 = chkTasks[2];
+const chkSupplier = pick(CHK, 1, SUPPLIERS);
+const chkAutoLabel = 'Auto-reorder from ' + chkSupplier;
+
+const CheckboxChecklist: TemplateOnlyComponent = <template>
+  <Stack>
+    <Checkbox @label={{chkTasks0}} @defaultChecked={{true}} />
+    <Checkbox @label={{chkTasks1}} @defaultChecked={{true}} />
+    <Checkbox @label={{chkTasks2}} />
+  </Stack>
+</template>;
+
+const CheckboxAutoReorder: TemplateOnlyComponent = <template>
+  <Checkbox @label={{chkAutoLabel}} @defaultChecked={{true}} />
+</template>;
+
+const CheckboxLocked: TemplateOnlyComponent = <template>
+  <Checkbox
+    @label='Organic certificate on file'
+    @checked={{true}}
+    @disabled={{true}}
+  />
+</template>;
+
+export const EXAMPLES_CHECKBOX: Record<string, ExampleSpec[]> = {
+  Checkbox: [
+    {
+      title: 'Intake checklist',
+      note: 'Work items tick off as the batch moves through the room.',
+      component: CheckboxChecklist,
+    },
+    {
+      title: 'Standing preference',
+      component: CheckboxAutoReorder,
+    },
+    {
+      title: 'Locked fact',
+      note: 'Checked and disabled — recorded upstream, not editable here.',
+      component: CheckboxLocked,
+    },
+  ],
+};
+

package/bundled-realms/pretui/components/checkbox.gts

@@ -0,0 +1,123 @@
+// Checkbox: a native binary choice in Pretui cloth.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { emit, firstDefined } from '../pretui-primitives';
+
+export interface CheckboxSignature {
+  Args: {
+    label?: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** aliases — see Switch */
+    isSelected?: boolean;
+    selected?: boolean;
+    isDisabled?: boolean;
+    onChange?: (checked: boolean) => void;
+  };
+  Element: HTMLLabelElement;
+}
+
+export class Checkbox extends Component<CheckboxSignature> {
+  @tracked internal = this.args.defaultChecked ?? false;
+  get controlled() {
+    return firstDefined(
+      this.args.checked,
+      this.args.isSelected,
+      this.args.selected,
+    );
+  }
+  get disabled() {
+    return firstDefined(this.args.disabled, this.args.isDisabled) ?? false;
+  }
+  get on() {
+    return this.controlled ?? this.internal;
+  }
+  handleChange = (ev: Event) => {
+    let next = (ev.target as HTMLInputElement).checked;
+    if (this.controlled === undefined) {
+      this.internal = next;
+    }
+    emit([this.args.onCheckedChange, this.args.onChange], next);
+    // a controlled parent that declines the change must not leave the box toggled
+    (ev.target as HTMLInputElement).checked = this.on;
+  };
+  <template>
+    <label class='pretui-choice' data-test-pretui-checkbox ...attributes>
+      <input
+        type='checkbox'
+        class='pretui-checkbox'
+        checked={{this.on}}
+        disabled={{this.disabled}}
+        {{on 'change' this.handleChange}}
+      />
+      {{#if @label}}{{@label}}{{/if}}
+    </label>
+    <style scoped>
+      @layer PretComponent {
+        .pretui-choice {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: var(--text-ui-md, 12.5px);
+          cursor: pointer;
+        }
+        .pretui-checkbox {
+          appearance: none;
+          width: 15px;
+          height: 15px;
+          margin: 0;
+          border-radius: 5px;
+          background: var(
+            --pretui-control-rest,
+            var(--field, var(--boxel-light))
+          );
+          box-shadow: 0 0 0 1px var(--pretui-control-border, var(--input));
+          cursor: pointer;
+          display: inline-grid;
+          place-content: center;
+          flex: none;
+          transition: background var(--pretui-dur-snap, 180ms)
+            var(--pretui-ease-snap, ease);
+        }
+        .pretui-checkbox:hover:not(:checked):not(:disabled) {
+          background: var(
+            --pretui-control-hover,
+            var(--hover, var(--boxel-100))
+          );
+        }
+        .pretui-checkbox:checked {
+          background: var(--primary);
+          box-shadow:
+            0 0 0 1px color-mix(in oklch, var(--primary) 70%, var(--border)),
+            var(--pretui-edge-highlight, inset 0 1px 0 rgb(255 255 255 / 0.14));
+        }
+        .pretui-checkbox:checked::before {
+          content: '';
+          width: 9px;
+          height: 9px;
+          background: var(--primary-foreground);
+          clip-path: polygon(
+            14% 47%,
+            38% 70%,
+            86% 18%,
+            96% 30%,
+            39% 89%,
+            4% 58%
+          );
+        }
+        .pretui-checkbox:disabled {
+          opacity: 0.45;
+          cursor: default;
+        }
+        /* appearance: none discards the UA focus ring with the native look */
+        .pretui-checkbox:focus-visible {
+          outline: 2px solid var(--ring);
+          outline-offset: 2px;
+        }
+      }
+    </style>
+  </template>
+}

package/bundled-realms/pretui/components/checkbox.md

@@ -0,0 +1,55 @@
+## What it is
+
+A single binary choice, rendered as a label-wrapped native checkbox with a custom face. Use it for opt-ins, "select this row", and any independent on/off that is _submitted with a form_ or read as part of a set. If the toggle takes effect immediately with no save step, use **Switch** — that is the real distinction between the two, not shape. For one-of-many use **RadioGroup**; for many-of-many from a list use **MultiSelect** or **DuelingPicklist**; for filter chips use **FilterChips**.
+
+## The contract
+
+```
+@label?, @checked?, @defaultChecked?, @disabled?
+@onCheckedChange?(checked: boolean)
+Element: HTMLLabelElement
+```
+
+**The root element is the `<label>`, not the input.** `...attributes` therefore land on the label. This is what makes `@label` optional and safe: the input is _inside_ its label, so the implicit association exists whether or not text is rendered, and clicking anywhere in the row toggles. It also means that if you want to put attributes on the input itself, you cannot — the API is deliberately closed there.
+
+**Hybrid controlled/uncontrolled**, the kit-wide idiom: `@checked ?? @internal`, with `@internal` written only when `@checked === undefined`. `@onCheckedChange` receives a boolean read off the event target, never the event.
+
+The face is `appearance: none` plus a `clip-path` polygon check mark on `::before` — no SVG, no icon dependency, and it inherits `--primary-foreground` so the tick recolors with the theme.
+
+## Prior art
+
+**Web Awesome `wa-checkbox`** is a form-associated custom element with `checked`, `indeterminate`, `required`, `value`, `size`, `hint`, and full constraint-validation participation. **Radix `Checkbox`** composes `Root` + `Indicator`, uses `checked` with the three-state value `'indeterminate'`, and renders a visually-hidden native input for form submission. **React Spectrum** exposes `isSelected`/`defaultSelected`/`isIndeterminate`/`isInvalid` and requires children as the label. **shadcn** wraps Radix.
+
+Where Pretui is better: it is a _real_ native input in a real label. Radix and Web Awesome both build a custom control and then reintroduce a hidden native input to get form participation back; Pretui never leaves the platform, so `form` association, `name`/`value` submission, `:checked` styling, and screen-reader semantics are free and cannot drift.
+
+Where Pretui is thinner, and it matters:
+
+- **No indeterminate state.** Every kit above has it, and it is the standard affordance for "select all" over a partially selected list — a pattern **DataGrid** and **Table** will want. This is the most conspicuous missing feature.
+- **No `@invalid`.** There is no error dress and no `aria-invalid`; a required unchecked checkbox cannot be shown as failing except by the surrounding **Field**.
+- No `name`/`value` args. You can pass them through `...attributes`, but they land on the _label_, not the input — so native form submission by name is not actually reachable through the public API. Worth knowing before you assume the "native input" advantage extends to uncontrolled form posts.
+- No size axis, unlike Button and the rest of the control family.
+
+## Accessibility
+
+Native `<input type="checkbox">`; no APG pattern required, and that is the right answer. Keyboard contract is the platform's: Tab to focus, Space to toggle. Implicit labelling comes from the wrapping `<label>`.
+
+Honest gaps:
+
+- **`@label` is optional and nothing enforces a name.** `<Checkbox />` with no `@label` and no `aria-label` on the label element produces an unnamed control. It is easy to reach for in a table row's select column and end up with a grid full of unlabelled checkboxes.
+- **`@disabled` uses the native attribute**, removing the control from the tab order — so a disabled checkbox cannot be discovered or read by a keyboard user scanning the form. Spectrum and Web Awesome behave the same way, so this is conventional, but `aria-disabled` would be kinder in a long form.
+- **`opacity: 0.45` for disabled** will fail text contrast against most themes' backgrounds.
+- **Focus-visible paints its own ring**: `outline: 2px solid var(--ring)` with a 2px offset, since `appearance: none` discards the UA ring.
+- The `clip-path` tick has no `forced-colors` treatment, so in Windows High Contrast mode the checked state may render as an empty box.
+
+## Theming
+
+`--pretui-control-rest` (falling back to `--field`), `--pretui-control-border` (falling back to `--input`), `--pretui-control-hover` (falling back to `--hover`), `--primary` (checked fill), `--primary-foreground` (the tick), `--border` (mixed into the checked hairline), `--pretui-edge-highlight` (the inset top highlight that gives the checked box its pressed-metal read), `--pretui-dur-snap` / `--pretui-ease-snap`, `--text-ui-md`.
+
+The 15px box, 5px radius and 9px tick are fixed; a theme cannot scale the control. If a theme sets `--primary` very light, the tick (painted `--primary-foreground`, usually white) disappears — define both together, as with Button's tone/on-tone pairs.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.
+
+## React ecosystem
+
+Accept `isSelected` / `indeterminate` / `isDisabled`. Card-shaped
+choices are **CheckboxCard**.

package/bundled-realms/pretui/components/checkbox.usage.gts

@@ -0,0 +1,31 @@
+// Pretui — Checkbox usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { FreestyleUsage } from './freestyle-usage';
+import { Checkbox } from './checkbox';
+
+export class CheckboxUsage extends Component {
+  @tracked checked = true;
+  setChecked = (value: boolean) => (this.checked = value);
+  <template>
+    <FreestyleUsage
+      @name='Checkbox'
+      @description='A native binary choice in Pretui cloth. The visible label and checked state travel together; disabled remains a legible state, never a dim surface.'
+      @source='<Checkbox @label="Include tasting notes" … />'
+    >
+      <:example>
+        <Checkbox @label='Include tasting notes' @checked={{this.checked}} @onCheckedChange={{this.setChecked}} />
+      </:example>
+      <:api as |Args|>
+        <Args.Bool @name='checked' @value={{this.checked}} @onInput={{this.setChecked}} />
+        <Args.String @name='label' @value='Include tasting notes' />
+        <Args.Bool @name='disabled' @defaultValue={{false}} />
+        <Args.Action @name='onCheckedChange' @description='Receives the next boolean value.' />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_CHECKBOX: Record<string, unknown> = {
+  Checkbox: CheckboxUsage,
+};