Storybook stories for the `CheckboxBlock` UI component, covering all interactive states, variants, and theming options for visual testing and documentation. ## Key Components ### Stories | Story | Description | |---|---| | `Default` | Unchecked checkbox block with basic label | | `RepeatScriptRun` | Matches the Figma design reference label | | `Checked` | Pre-checked via `defaultChecked` | | `Disabled` / `DisabledChecked` | Non-interactive disabled states | | `Controlled` | Fully controlled with `useState`, displays live checked value | | `LongLabel` | Demonstrates text wrapping behavior | | `WithDescription` | Two-line variant (`label` + `description`) | | `WithTrailingAction` | Appends a `Button` via the `trailing` prop; uses `e.preventDefault()` to prevent label toggle | | `Error` | Red border validation failure state | | `FlamingoError` / `FlamingoChecked` | Pink accent theme via `data-app-type="flamingo"` | | `AllVariants` | Side-by-side comparison of all states | ### Configured `argTypes` - `label` — primary checkbox label text - `checked` / `defaultChecked` — controlled vs. uncontrolled state - `description` — optional secondary text (renders taller `h-16` variant) - `disabled` — disables interaction - `onCheckedChange` — change callback (Storybook action logged) ## Usage Example ```typescript // Controlled usage with trailing action e.preventDefault()}> Edit Default Guardrails } /> // Error state ``` > **Note:** When using a `trailing` interactive element, always call `e.preventDefault()` on its click handler to prevent the wrapping `` from toggling the checkbox — as used in the OpenFrame customer guardrails tab. ## Source [`CheckboxBlock.stories.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/CheckboxBlock.stories.tsx)