@create-ui/cli 0.5.9 → 0.6.1

package/dist/skills/createui/reference/social-login-button.md

@@ -1,130 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/social-login-button.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/social-login-button.md -->
-
-# social-login-button
-
-OAuth sign-in button for 13 brands like Google, Apple and GitHub plus custom; colorful/black/white appearance, iconOnly
-
-Install: `npx @create-ui/cli add social-login-button`
-
-## Import
-
-```tsx
-import { SocialLoginButton } from "@/components/ui/social-login-button"
-```
-
-Also exported: `socialLoginButtonVariants`
-
-## SocialLoginButton props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| size | `lg \| md` | `lg` |
-| shape | `rounded \| pill \| square` | `rounded` |
-| iconOnly | `boolean` (Removes the visible label, leaving no accessible name; always pass aria-label) | `false` |
-| appearance | `colorful \| black \| white` (Defaults to colorful (literal brand-colored background); the generated table misses this default) | - |
-| asChild | `boolean` (The slotted child's own children are REPLACED by the injected icon+label; slot an empty <a> carrying href/aria-label) | - |
-| brand | `apple \| behance \| discord \| dribbble \| facebook \| github \| gitlab \| google \| linkedin \| microsoft \| slack \| sso \| x \| custom` (Also fixes the copy: rendered text is always 'Continue with {label}'; custom wording only via brand=\"custom\" config.label, and only the brand-name part (the 'Continue with' prefix is hard-coded)) | - |
-| config | `{ icon: IconComponent label?: string color?: string }` (Only accepted with brand=\"custom\" (discriminated union). The icon gets no fill, just the appearance text color (white on colorful, theme text on black/white), so draw it with currentColor) | - |
-
-Extends `React.ComponentProps<"button">`.
-
-## Icons
-
-Icons go through icon props - never as children next to text, and never with sizing classes (the component sizes icons per `size`): `SocialLoginButton` (). Import icons from `@create-ui/assets/icons` (Remix `Ri*`).
-
-## Examples
-
-From `social-login-button-demo`:
-
-```tsx
-import { SocialLoginButton } from "@/components/ui/social-login-button"
-
-export default function SocialLoginButtonDemo() {
-  return (
-    <div className="flex w-full flex-col items-center justify-center gap-3">
-      <div className="flex flex-wrap items-center justify-center gap-2">
-        <SocialLoginButton brand="google" appearance="white" />
-        <SocialLoginButton brand="apple" appearance="white" />
-      </div>
-      <div className="flex flex-wrap items-center justify-center gap-2">
-        <SocialLoginButton brand="dribbble" shape="pill" />
-        <SocialLoginButton brand="x" shape="pill" />
-      </div>
-      <div className="flex flex-wrap items-center justify-center gap-2">
-        <SocialLoginButton
-          brand="google"
-          iconOnly
-          aria-label="Continue with Google"
-        />
-        <SocialLoginButton
-          brand="apple"
-          appearance="black"
-          iconOnly
-          aria-label="Continue with Apple"
-        />
-        <SocialLoginButton
-          brand="github"
-          appearance="white"
-          iconOnly
-          aria-label="Continue with Github"
-        />
-        <SocialLoginButton
-          brand="dribbble"
-          shape="pill"
-          iconOnly
-          aria-label="Continue with Dribbble"
-        />
-        <SocialLoginButton
-          brand="x"
-          shape="pill"
-          iconOnly
-          aria-label="Continue with X"
-        />
-      </div>
-    </div>
-  )
-}
-```
-
-From `social-login-button-as-child`:
-
-```tsx
-"use client"
-
-import { SocialLoginButton } from "@/components/ui/social-login-button"
-
-export default function SocialLoginButtonAsChild() {
-  return (
-    <div className="flex flex-wrap justify-center gap-2">
-      <SocialLoginButton asChild brand="google">
-        <a href="#" aria-label="Continue with Google" />
-      </SocialLoginButton>
-      <SocialLoginButton asChild brand="apple" appearance="black">
-        <a href="#" aria-label="Continue with Apple" />
-      </SocialLoginButton>
-      <SocialLoginButton asChild brand="github" appearance="white">
-        <a href="#" aria-label="Continue with Github" />
-      </SocialLoginButton>
-    </div>
-  )
-}
-```
-
-More: `npx @create-ui/cli view social-login-button` or MCP `get_item_examples_from_registries` with "social-login-button-demo" / "social-login-button-example".
-
-## When to use
-Branded "Continue with X" buttons for OAuth/SSO sign-in and sign-up flows: preset brands plus brand="custom" with a config object. Do NOT use it for generic CTAs (use Button), app/extension store links (use AppStoreBadge), or passive brand chips (use Badge).
-
-## Gotchas
-- Children are ignored unless asChild: `<SocialLoginButton brand="google">Sign in</SocialLoginButton>` silently drops "Sign in" (children are destructured out and never rendered); the label always comes from the brand config.
-- Ignore the generated Icons section: there are NO leadingIcon/trailingIcon/icon props. The glyph is auto-picked per brand AND appearance: white glyph on colorful; under black/white appearances most brands keep their full-color glyph, and only brands with a theme-aware mono asset (apple, github, x) swap. Custom icons go through config.icon only.
-- asChild is not shadcn-Button-style Slot passthrough: the component clones the slotted child and REPLACES its children with the icon+label content:
-
-```tsx
-<SocialLoginButton asChild brand="google">
-  <a href="/auth/google" aria-label="Continue with Google" />
-</SocialLoginButton>
-```
-
-- Non-iconOnly buttons have fixed widths (w-[300px] at lg, w-[250px] at md) so provider stacks align. For full-width auth forms pass className="w-full"; cn() merges it over the CVA width.
-- appearance="colorful" pins the literal brand color and static black/white tokens, so it does NOT flip in dark mode; only the sso preset defines a dark variant. black/white appearances use semantic tokens and do flip with the theme.

package/dist/skills/createui/reference/spinner.md

@@ -1,68 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/spinner.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/spinner.md -->
-
-# spinner
-
-Loading indicator with a conic-gradient arc; 12 color variants, solid/gradient appearance, spin/pulse/tick animations
-
-Install: `npx @create-ui/cli add spinner`
-
-## Import
-
-```tsx
-import { Spinner } from "@/components/ui/spinner"
-```
-
-Also exported: `spinnerVariants`
-
-## Spinner props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| variant | `primary \| info \| success \| warning \| danger \| away \| neutral \| neutral-static \| neutral-soft \| inverse \| inverse-static \| inverse-soft` | `primary` |
-| appearance | `solid \| gradient` | `gradient` |
-| cap | `sharp \| rounded` (Visual effect only with appearance=\"solid\" (rounded caps render as separate dot elements); with gradient appearance the prop only sets the data-cap attribute.) | `rounded` |
-| line | `short \| long` | `long` |
-| animation | `spin \| pulse \| tick` | `pulse` |
-| size | `xs \| sm \| md \| lg` (Also scales the arc stroke width via inline styles (1px at xs up to 2px at lg); the stroke cannot be restyled through className.) | `sm` |
-
-Extends `React.ComponentProps<"div">`.
-
-## Examples
-
-From `spinner-demo`:
-
-```tsx
-import { Spinner } from "@/components/ui/spinner"
-
-export default function SpinnerDemo() {
-  return <Spinner size="lg" />
-}
-```
-
-From `spinner-appearance`:
-
-```tsx
-import { Spinner } from "@/components/ui/spinner"
-
-export default function SpinnerAppearance() {
-  return (
-    <div className="flex flex-wrap items-center gap-6">
-      <Spinner appearance="gradient" animation="spin" size="lg" />
-      <Spinner appearance="solid" animation="spin" size="lg" />
-    </div>
-  )
-}
-```
-
-More: `npx @create-ui/cli view spinner` or MCP `get_item_examples_from_registries` with "spinner-demo" / "spinner-example".
-
-## When to use
-Indeterminate in-flight work: saves, network calls, slow validation, page bootstrapping. Do NOT use it when progress is measurable (use Progress) or for a loading button (use Button's `loading` prop, which renders the Spinner, blocks interaction, and sets `aria-busy` for you - never compose `<Spinner />` + `disabled` by hand).
-
-## Gotchas
-- This is NOT the shadcn `Loader2` + `animate-spin` pattern. It is a pure-CSS `<div>` (conic-gradient + mask, zero SVG). Never reach for lucide icons or `animate-spin` utilities; render `<Spinner />`.
-- `children` is excluded at the type level (`Omit<..., "children">`). It draws its own arc; put visible copy ("Saving...") next to it, not inside it.
-- The arc and caps track `currentColor`: `variant` applies a `text-*` token class, so `className="text-emerald-500"` (merged last via `cn()`) recolors them. The solid track ring does NOT follow `currentColor` - its `bg-*` color always comes from `variant`.
-- The background track ring only renders when `appearance="solid"`; the default `gradient` has no track and its arc tail fades to transparent.
-- Sets `role="status"` and `aria-label="Loading"` automatically; pass your own `aria-label` for specific operations.
-- The exported `spinnerVariants` CVA defaults `size` to `lg`, but the `Spinner` component prop defaults to `sm`. Calling `spinnerVariants()` directly yields a different size than `<Spinner />`.

package/dist/skills/createui/reference/status-badge.md

@@ -1,89 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/status-badge.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/status-badge.md -->
-
-# status-badge
-
-Tiny presence dot only, no built-in label; 12 status colors and xs/sm/md sizes, place text beside it yourself
-
-Install: `npx @create-ui/cli add status-badge`
-
-## Import
-
-```tsx
-import { StatusBadge } from "@/components/ui/status-badge"
-```
-
-Also exported: `statusBadgeVariants`
-
-## StatusBadge props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| variant | `primary \| danger \| success \| warning \| info \| highlighted \| away \| verified \| cyan \| lime \| neutral \| white` (Error tone is \"danger\" (there is no \"error\" or \"destructive\" key); \"white\" is the only variant that drops the built-in outline ring, for use on dark surfaces) | `primary` |
-| size | `xs \| sm \| md` (Fixed pixel diameters (xs 4px, sm 6px, md 8px); standalone, no Field/InputGroup size cascade) | `md` |
-
-Extends `React.ComponentProps<"span">`.
-
-## Examples
-
-From `status-badge-demo`:
-
-```tsx
-import { StatusBadge } from "@/components/ui/status-badge"
-
-export default function StatusBadgeDemo() {
-  return (
-    <div className="flex flex-wrap items-center gap-4">
-      <div className="flex items-center gap-2">
-        <StatusBadge variant="success" />
-        <span className="text-body text-sm">Online</span>
-      </div>
-      <div className="flex items-center gap-2">
-        <StatusBadge variant="away" />
-        <span className="text-body text-sm">Away</span>
-      </div>
-      <div className="flex items-center gap-2">
-        <StatusBadge variant="danger" />
-        <span className="text-body text-sm">Offline</span>
-      </div>
-    </div>
-  )
-}
-```
-
-From `status-badge-in-avatar`:
-
-```tsx
-import { StatusBadge } from "@/components/ui/status-badge"
-
-export default function StatusBadgeInAvatar() {
-  return (
-    <div className="flex flex-wrap items-center gap-6">
-      <div className="relative">
-        <div className="from-light to-weak size-10 rounded-full bg-gradient-to-br" />
-        <StatusBadge variant="success" className="absolute right-0 bottom-0" />
-      </div>
-      <div className="relative">
-        <div className="from-light to-weak size-10 rounded-full bg-gradient-to-br" />
-        <StatusBadge variant="away" className="absolute right-0 bottom-0" />
-      </div>
-      <div className="relative">
-        <div className="from-light to-weak size-10 rounded-full bg-gradient-to-br" />
-        <StatusBadge variant="neutral" className="absolute right-0 bottom-0" />
-      </div>
-    </div>
-  )
-}
-```
-
-More: `npx @create-ui/cli view status-badge` or MCP `get_item_examples_from_registries` with "status-badge-demo" / "status-badge-example".
-
-## When to use
-StatusBadge is a dot-only presence/state indicator (a single `<span role="status">` circle): online dots on avatars, live markers on rows, status legends. It carries no text; a sibling label or the host element gives it meaning. If the indicator needs a label or count use Badge, for transient events use Toast, and for loading use Spinner.
-
-## Gotchas
-- Do not pass children; the component renders a fixed-size dot (`size-1`/`1.5`/`2`, i.e. 4-8px) and any content would overflow the box. Render the label as a sibling in a flex row: `<StatusBadge variant="success" /> <span>Online</span>`.
-- A white outline ring (`outline-static-white outline`) is built into every variant so the dot stays legible layered over avatars; only the `white` variant removes it (`outline-0`). Do not re-add `ring-*` or borders to fake this.
-- Avatar pinning is manual composition: wrap the avatar in `relative` and position the badge with `className="absolute right-0 bottom-0"`. There is no `position`/anchor prop.
-- This is not shadcn's `Badge`: no text slot and no `asChild`.
-- `role="status"` is hardcoded, but the dot has no announced content, so pair it with a visible text label or put `aria-label` on the surrounding element.
-- No `data-variant`/`data-size` attributes are emitted; CSS targeting goes through `data-slot="status-badge"` plus classes. `shrink-0` is built in, so it will not squash in tight flex rows.

package/dist/skills/createui/reference/switch-group.md

@@ -1,122 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/switch-group.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/switch-group.md -->
-
-# switch-group
-
-Field wrapper that labels a Switch and cascades variant, size, shape, thumbType and ioTrigger; placement left or right
-
-Install: `npx @create-ui/cli add switch-group`
-
-## Import
-
-```tsx
-import { SwitchGroup } from "@/components/ui/switch-group"
-```
-
-Also exported: `switchGroupVariants`
-
-## SwitchGroup props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| variant | `SwitchVariant` | `primary` |
-| size | `xs \| sm \| md` (Sets the Field label scale and the child Switch size via context; Field's own size and orientation props are stripped from the API (orientation is locked horizontal)) | `md` |
-| shape | `SwitchShape` | `pill` |
-| thumbType | `SwitchThumbType` | `short` |
-| ioTrigger | `boolean` | `false` |
-| placement | `left \| right` (right is a CSS-only flip (flex-row-reverse); keep the Switch first in the DOM either way) | `left` |
-
-Extends `React.ComponentProps<typeof Field>`.
-
-## Examples
-
-From `switch-group-demo`:
-
-```tsx
-import { FieldContent } from "@/components/ui/field"
-import { Label, LabelDescription, LabelMain } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { SwitchGroup } from "@/components/ui/switch-group"
-
-export default function SwitchGroupDemo() {
-  return (
-    <SwitchGroup className="w-[340px]">
-      <Switch id="sw-demo" defaultChecked />
-      <FieldContent>
-        <LabelMain>
-          <Label htmlFor="sw-demo">Push notifications</Label>
-          <LabelDescription>
-            Get alerts the moment something happens on your account.
-          </LabelDescription>
-        </LabelMain>
-      </FieldContent>
-    </SwitchGroup>
-  )
-}
-```
-
-From `switch-group-disabled`:
-
-```tsx
-import { FieldContent } from "@/components/ui/field"
-import { Label, LabelDescription, LabelMain } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import { SwitchGroup } from "@/components/ui/switch-group"
-
-export default function SwitchGroupDisabled() {
-  return (
-    <div className="flex flex-col gap-6">
-      <SwitchGroup disabled className="w-[340px]">
-        <Switch id="sw-disabled-on" checked disabled />
-        <FieldContent>
-          <LabelMain>
-            <Label htmlFor="sw-disabled-on">Push notifications</Label>
-            <LabelDescription>
-              Disabled state cascades to label and description.
-            </LabelDescription>
-          </LabelMain>
-        </FieldContent>
-      </SwitchGroup>
-
-      <SwitchGroup disabled className="w-[340px]">
-        <Switch id="sw-disabled-off" checked={false} disabled />
-        <FieldContent>
-          <LabelMain>
-            <Label htmlFor="sw-disabled-off">Marketing emails</Label>
-            <LabelDescription>
-              The unchecked row reads muted too.
-            </LabelDescription>
-          </LabelMain>
-        </FieldContent>
-      </SwitchGroup>
-    </div>
-  )
-}
-```
-
-More: `npx @create-ui/cli view switch-group` or MCP `get_item_examples_from_registries` with "switch-group-demo" / "switch-group-example".
-
-## When to use
-One labelled switch row for settings that apply the moment they flip: notification preferences, feature flags, privacy toggles. Stack several SwitchGroups in a column for a settings panel. Do NOT use it inside a submit-to-save form (use CheckboxGroup), for one-of-many selection (use RadioGroup), or for a bare unlabelled toggle in a toolbar or table cell (use Switch directly).
-
-## Gotchas
-- Despite the name, SwitchGroup is a single row, not a multi-switch container, and it renders no Switch of its own. There is no SwitchGroupItem; you compose the anatomy yourself:
-
-```tsx
-<SwitchGroup>
-  <Switch id="x" />
-  <FieldContent>
-    <LabelMain>
-      <Label htmlFor="x">Title</Label>
-      <LabelDescription>Optional helper.</LabelDescription>
-    </LabelMain>
-    <FieldFooter>{/* optional, e.g. TextLink */}</FieldFooter>
-  </FieldContent>
-</SwitchGroup>
-```
-
-- The child Switch resolves each look prop as explicit prop ?? SwitchContext ?? default, so any prop set directly on the Switch silently overrides the group; configure looks on the group and keep the Switch bare except id/checked/disabled.
-- The context the group provides carries variant, size, shape, thumbType, ioTrigger only. SwitchGroup has no thumbIcon prop and never forwards one; set thumbIcon on the Switch itself.
-- Label association is manual: the Field root is a role="group" div, not a label, so always pair Switch id with Label htmlFor.
-- For a disabled row, set disabled on BOTH the group (label/description fade via Field) and the child Switch (the actual control), as in switch-group-disabled.
-- The label block must sit inside FieldContent: Field only top-aligns the switch when a direct [data-slot=field-content] child exists (has-[] selector), so loose Label siblings sit in a row and break the stacking.
-- SwitchGroup is a Field, so its root is full-width: placed inline (e.g. the right side of a justify-between header or toolbar) it wraps onto its own full-width line unless you constrain it with an explicit width (className="w-auto", max-w-*, or a fixed width).

package/dist/skills/createui/reference/switch.md

@@ -1,75 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/switch.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/switch.md -->
-
-# switch
-
-Toggle switch; variant primary/info/neutral/inverse/semantic, thumbType short/long, ioTrigger and thumbIcon options
-
-Install: `npx @create-ui/cli add switch`
-
-## Import
-
-```tsx
-import { Switch } from "@/components/ui/switch"
-```
-
-Also exported: `SwitchContext`, `switchVariants`
-
-## Switch props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| variant | `primary \| info \| neutral \| inverse \| semantic` (semantic = red when off, green when on (accept/reject patterns)) | `primary` |
-| size | `md \| sm \| xs` | `md` |
-| shape | `pill \| rounded` | `pill` |
-| thumbType | `short \| long` (long is a statically wider thumb and track; checked travel distance is unchanged) | `short` |
-| ioTrigger | `boolean` (aria-hidden I/O glyphs in the track: line when on, circle when off) | `false` |
-| thumbIcon | `boolean` (aria-hidden check/close icons inside the thumb) | `false` |
-
-Extends `React.ComponentProps<typeof SwitchPrimitive.Root>`.
-
-## Examples
-
-From `switch-demo`:
-
-```tsx
-import { Switch } from "@/components/ui/switch"
-
-export default function SwitchDemo() {
-  return (
-    <div className="flex items-center gap-3">
-      <Switch defaultChecked />
-      <Switch />
-    </div>
-  )
-}
-```
-
-From `switch-thumb-icon`:
-
-```tsx
-import { Switch } from "@/components/ui/switch"
-
-export default function SwitchThumbIcon() {
-  return (
-    <div className="flex items-center gap-4">
-      <Switch thumbIcon defaultChecked />
-      <Switch thumbIcon />
-    </div>
-  )
-}
-```
-
-More: `npx @create-ui/cli view switch` or MCP `get_item_examples_from_registries` with "switch-demo" / "switch-example".
-
-## When to use
-
-A single standalone on/off control. A boolean that only commits on form submit is `Checkbox`. A switch with a label and description in one apply-immediately row is `SwitchGroup` (it wraps `Field orientation="horizontal"` and feeds `SwitchContext`); do not hand-roll that row from `Field` + `Switch`. Exception: inside a submit-to-save form that deliberately uses toggles, `SwitchGroup` is wrong - compose `Field size="md" orientation="horizontal"` + `FieldContent` (`FieldLabel` + `FieldDescription`) + `Switch`, as in the field-composition example.
-
-## Gotchas
-
-- Every visual prop resolves `prop ?? SwitchContext ?? default`. `SwitchGroup` provides context for `variant`/`size`/`shape`/`thumbType`/`ioTrigger`, so set those on the group, not the inner Switch. `thumbIcon` is NOT in the group context; set it on the Switch itself. For an ad-hoc cluster, wrap in the exported `SwitchContext.Provider`.
-- `Field` size does NOT cascade here: Switch reads only `SwitchContext`, never Field's context. In a plain `Field` row, set `size` on the Switch itself.
-- Do not pass children to `<Switch>`; it renders its own thumb/icon internals and silently replaces anything you pass. The label lives outside (`Label htmlFor` + `id`, or `aria-label`).
-- Track width is a fixed pixel value per `size` x `thumbType`, and the checked `translate-x` is fixed per `size` (22/18/14px). Overriding width via `className` desyncs the thumb travel; change `size`/`thumbType` instead.
-- The clickable area is silently enlarged by an `after:` pseudo-element (12px horizontally, 8px vertically past the track); keep other clickable controls clear of that zone.
-- Error state comes from passing `aria-invalid` (persistent red outline), not from a variant.

package/dist/skills/createui/reference/tab-menu.md

@@ -1,165 +0,0 @@
-<!-- GENERATED FILE - do not edit. Source: registry/ui/tab-menu.tsx. Regenerate with `pnpm skill:build`. Curated notes: apps/v4/scripts/skill-reference/notes/tab-menu.md -->
-
-# tab-menu
-
-Navigation tab list with no content panels; vertical/horizontal button and line variants, leadingIcon/trailingIcon items
-
-Install: `npx @create-ui/cli add tab-menu`
-
-## Import
-
-```tsx
-import { TabMenu, TabMenuItem } from "@/components/ui/tab-menu"
-```
-
-Also exported: `tabMenuVariants`, `tabMenuItemVariants`
-
-## TabMenu props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| variant | `vertical-button \| vertical-line \| horizontal-line \| horizontal-button` | `vertical-button` |
-| size | `sm \| md \| lg` | `md` |
-| indicator | `left \| top \| bottom` (line variants render no active line without it; designed pairings: vertical-button+left, vertical-line/horizontal-line+top|bottom; horizontal-button takes none) | - |
-| value | `string` | - |
-| defaultValue | `string` | - |
-| onValueChange | `(value: string) => void` | - |
-
-Extends `React.ComponentProps<"div">`.
-
-## TabMenuItem props
-
-| Prop | Type | Default |
-| --- | --- | --- |
-| asChild | `boolean` | `false` |
-| value | `string` | - |
-| selected | `boolean` (overrides value matching; use for route-driven tabs where the pathname decides) | - |
-| leadingIcon | `ReactNode` | - |
-| trailingIcon | `ReactNode` | - |
-| label | `ReactNode` (the label slot; bare children are NOT the label (they render as extra content next to it, e.g. a Badge)) | - |
-
-Extends `React.ComponentProps<"button">`.
-
-## Icons
-
-Icons go through icon props - never as children next to text, and never with sizing classes (the component sizes icons per `size`): `TabMenuItem` (`leadingIcon` / `trailingIcon`). Import icons from `@create-ui/assets/icons` (Remix `Ri*`).
-
-## Examples
-
-From `tab-menu-demo`:
-
-```tsx
-import {
-  RiBankCardFill,
-  RiInboxLine,
-  RiInformationFill,
-  RiSettings6Fill,
-} from "@create-ui/assets/icons"
-
-import { TabMenu, TabMenuItem } from "@/components/ui/tab-menu"
-
-export default function TabMenuDemo() {
-  return (
-    <TabMenu
-      variant="horizontal-line"
-      indicator="bottom"
-      size="lg"
-      defaultValue="activity"
-    >
-      <TabMenuItem
-        value="overview"
-        leadingIcon={<RiInformationFill />}
-        label="Overview"
-      />
-      <TabMenuItem
-        value="activity"
-        leadingIcon={<RiInboxLine />}
-        label="Activity"
-      />
-      <TabMenuItem
-        value="billing"
-        leadingIcon={<RiBankCardFill />}
-        label="Billing"
-      />
-      <TabMenuItem
-        value="settings"
-        leadingIcon={<RiSettings6Fill />}
-        label="Settings"
-      />
-    </TabMenu>
-  )
-}
-```
-
-From `tab-menu-with-badge`:
-
-```tsx
-import {
-  RiBankCardFill,
-  RiInboxLine,
-  RiSettings6Fill,
-} from "@create-ui/assets/icons"
-
-import { Badge } from "@/components/ui/badge"
-import { StatusBadge } from "@/components/ui/status-badge"
-import { TabMenu, TabMenuItem } from "@/components/ui/tab-menu"
-
-export default function TabMenuWithBadge() {
-  return (
-    <TabMenu
-      className="w-[320px]"
-      variant="vertical-button"
-      size="lg"
-      defaultValue="activity"
-    >
-      <TabMenuItem
-        value="activity"
-        leadingIcon={<RiInboxLine />}
-        label="Activity"
-      >
-        <Badge variant="info" appearance="soft" size="sm">
-          12
-        </Badge>
-      </TabMenuItem>
-      <TabMenuItem
-        value="billing"
-        leadingIcon={<RiBankCardFill />}
-        label="Billing"
-      >
-        <Badge variant="success" appearance="soft" size="sm">
-          New
-        </Badge>
-      </TabMenuItem>
-      <TabMenuItem
-        value="settings"
-        leadingIcon={<RiSettings6Fill />}
-        label="Settings"
-      >
-        <StatusBadge variant="primary" size="md" />
-      </TabMenuItem>
-    </TabMenu>
-  )
-}
-```
-
-More: `npx @create-ui/cli view tab-menu` or MCP `get_item_examples_from_registries` with "tab-menu-demo" / "tab-menu-example".
-
-## When to use
-
-Tab-style navigation: settings sidebars, section switchers, routed nav as links. TabMenu renders the tab list only; there are no content-panel components, so render panels yourself keyed by the active value (`{tab === "billing" && <BillingPanel />}`). For 2-5 inline mutually exclusive options without rich item content, use SegmentedControl instead.
-
-## Gotchas
-
-- There is no shadcn-style `Tabs` / `TabsList` / `TabsTrigger` / `TabsContent` set; do not invent one. `TabMenu` itself owns the value (`defaultValue`, or controlled `value` + `onValueChange`) and that is the whole API.
-- Text goes in the `label` prop; bare children are NOT the label, they render as extra content beside it (the badge slot, see tab-menu-with-badge). Icons only via `leadingIcon` / `trailingIcon`, never as children.
-- `asChild` needs exactly one non-Fragment element child or it silently falls back to a plain `<button>`. The child's own text becomes the label (`label` is only a fallback when the child has no children) and the extra-children badge slot is unavailable; icons stay as props on `TabMenuItem`:
-
-```tsx
-<TabMenuItem asChild value="billing" leadingIcon={<RiBankCardFill />}>
-  <Link href="/billing">Billing</Link>
-</TabMenuItem>
-```
-
-- Line variants show no active marker beyond text color unless `indicator` is set; button variants (`vertical-button`, `horizontal-button`) get the sliding `bg-weak` pill automatically.
-- This is not ARIA tabs: a `role="group"` of `aria-pressed` buttons where every item is its own Tab stop; there is no arrow-key roving like Radix Tabs. asChild items get no `aria-pressed`; their `disabled` maps to `aria-disabled` + `tabIndex={-1}`.
-- An item `onClick` that calls `event.preventDefault()` blocks the value commit; `disabled` items skip both `onClick` and `onValueChange`.