@viraui/react 2026.3.11 → 2026.4.0

package/dist/components/accordion/accordion.guide.json

@@ -1,69 +0,0 @@
-{
-  "name": "Accordion",
-  "baseUIApi": "https://base-ui.com/react/components/accordion#api-reference",
-  "structure": "<Accordion>\n  <Accordion.Item trigger=\"…\">…</Accordion.Item>\n</Accordion>",
-  "summary": "Collapsible sections grouped into open/closed blocks with optional Surface wrapping, shared corner radius, and optional Item color for open-block background.",
-  "whenToUse": [
-    "Progressive disclosure for related content sections in one surface",
-    "FAQ or settings groups where only one section may be open by default",
-    "Multiple open sections when `multiple` is enabled"
-  ],
-  "whenNotToUse": [
-    "Primary navigation that should use links, tabs, or routes directly",
-    "Expecting to compose public Header/Trigger/Panel parts; those are owned by `Accordion.Item`"
-  ],
-  "accessibility": [
-    "Provide meaningful `trigger` text so each section has an accessible name",
-    "Use `value` when controlling or identifying items programmatically",
-    "Disabled items cannot be expanded through pointer or keyboard"
-  ],
-  "antiPatterns": [
-    "Trying to compose separate public `Accordion.Header`, `Accordion.Trigger`, or `Accordion.Panel` exports",
-    "Rendering an item without trigger text and without an external aria-label strategy"
-  ],
-  "related": ["Surface", "Separator", "Stack", "Text", "Icon"],
-  "properties": {
-    "react": {
-      "islands": {
-        "description": "When `true`, open/closed blocks render as separated Surface islands with gap between them. When `false`, blocks stay attached with corner radius only on the first and last items. Applies only to items with `useSurface`."
-      },
-      "Item.border": {
-        "description": "Contrast border side(s) forwarded to the wrapping `Surface` when `useSurface` is `true`. Pass a single side or a list (e.g. `[\"bottom\", \"left\"]`). Omit for no border."
-      },
-      "Item.children": {
-        "description": "Panel content revealed when the item is open."
-      },
-      "Item.color": {
-        "description": "Resting background for the item card, forwarded to the wrapping `Surface` when `useSurface` is `true`. Omit for no background."
-      },
-      "Item.iconClosed": {
-        "description": "Decorative icon shown when the item is closed."
-      },
-      "Item.iconOpen": {
-        "description": "Decorative icon shown when the item is open."
-      },
-      "Item.iconPosition": {
-        "description": "Side of the trigger label where the expand/collapse icon is rendered."
-      },
-      "Item.radius": {
-        "description": "Corner radius token for the wrapping Surface island edges when useSurface is true.",
-        "refCss": "radius"
-      },
-      "Item.trigger": {
-        "description": "Visible trigger label rendered inside the accordion header button."
-      },
-      "Item.useSurface": {
-        "description": "When `true`, wraps the item in `Surface` (optional open-block background via `color`). When `false`, renders without `Surface` so consumers can insert `Separator` between items; island styling is skipped for that item."
-      }
-    },
-    "css": {
-      "island-gap": {
-        "description": "Gap between separated Surface islands when islands={true}."
-      },
-      "radius": {
-        "description": "Corner radius for Surface island block edges when useSurface is true.",
-        "refReact": "Item.radius"
-      }
-    }
-  }
-}

package/dist/components/annotate/annotate.guide.json

@@ -1,110 +0,0 @@
-{
-  "name": "Annotate",
-  "structure": "<Annotate note=\"…\">…</Annotate>",
-  "summary": "Decorative arrow and handwritten label that wraps inline content with optional highlighter mark, positioned via CSS anchor positioning.",
-  "whenToUse": [
-    "Call out a word or phrase in marketing, docs, or onboarding copy",
-    "Add a playful visual annotation without interactive chrome",
-    "Highlight a target with an optional mark while keeping children as the real content"
-  ],
-  "whenNotToUse": [
-    "Conveying critical instructions, status, or validation that assistive tech must announce",
-    "Interactive tooltips or popovers that need focus and keyboard behavior",
-    "Layouts that clip overflow and cannot leave room for the arrow and label"
-  ],
-  "accessibility": [
-    "Arrow and note are presentational spans with aria-hidden — decorative only and not exposed to assistive tech",
-    "Do not put critical information in note; keep real meaning in children or aria-describedby content",
-    "Children retain native semantics; Annotate itself is a presentational span wrap"
-  ],
-  "antiPatterns": [
-    "Using note as the only source of instructions or status",
-    "Nesting Annotate inside overflow-hidden parents without padding for the arrow",
-    "Expecting the label to participate in hit-testing or selection",
-    "Adding position:relative on Annotate — it breaks CSS anchor position-area placement"
-  ],
-  "related": ["Text", "Title", "Tooltip", "Chip"],
-  "properties": {
-    "react": {
-      "arrowOffsetX": {
-        "description": "Horizontal offset for the arrow pseudo (`--vui-annotate-arrow-x`)."
-      },
-      "arrowOffsetY": {
-        "description": "Vertical offset for the arrow pseudo (`--vui-annotate-arrow-y`)."
-      },
-      "color": {
-        "description": "Highlight token driving arrow, label, and optional mark color via `--vui-annotate-color`."
-      },
-      "labelGap": {
-        "description": "Gap between arrow and label on all sides via `--vui-annotate-label-gap`."
-      },
-      "labelMaxWidth": {
-        "description": "Max width for the label pseudo via `--vui-annotate-label-max-width`."
-      },
-      "mark": {
-        "description": "When true, applies a highlighter mark behind the wrapped content."
-      },
-      "note": {
-        "description": "Decorative label rendered in a presentational note span (not announced). Do not put critical information here — assistive tech does not announce the note."
-      },
-      "rotate": {
-        "description": "Rotation for the label (and composed transforms) via `--vui-annotate-rotate`.",
-        "refCss": "rotate"
-      },
-      "side": {
-        "description": "Places the decorative arrow and label relative to the wrapped content."
-      },
-      "targetGap": {
-        "description": "Gap between the target and the arrow via `--vui-annotate-target-gap`."
-      },
-      "textAlign": {
-        "description": "Text alignment for the note via `--vui-annotate-text-align`."
-      },
-      "textOffsetX": {
-        "description": "Horizontal nudge for the note part (translateX on the inner nudge wrapper)."
-      },
-      "textOffsetY": {
-        "description": "Vertical nudge for the note part (translateY on the inner nudge wrapper)."
-      },
-      "zIndex": {
-        "description": "Stacking order for arrow and note via `--vui-annotate-z-index`. Same value on both parts."
-      }
-    },
-    "css": {
-      "arrow-x": {
-        "description": "Horizontal arrow offset."
-      },
-      "arrow-y": {
-        "description": "Vertical arrow offset."
-      },
-      "color": {
-        "description": "Arrow, note, and mark accent color. Defaults to var(--global-foreground)."
-      },
-      "label-gap": {
-        "description": "Gap between arrow and note on all sides."
-      },
-      "label-max-width": {
-        "description": "Max width for the note part."
-      },
-      "rotate": {
-        "description": "Note rotation angle.",
-        "refReact": "rotate"
-      },
-      "target-gap": {
-        "description": "Gap between the target and the arrow."
-      },
-      "text-align": {
-        "description": "Text alignment for the note. Defaults to start."
-      },
-      "text-x": {
-        "description": "Legacy horizontal note offset custom property. Prefer textOffsetX from React."
-      },
-      "text-y": {
-        "description": "Legacy vertical note offset custom property. Prefer textOffsetY from React."
-      },
-      "z-index": {
-        "description": "Stacking order for arrow and note. Defaults to auto."
-      }
-    }
-  }
-}

package/dist/components/autocomplete/autocomplete.guide.json

@@ -1,103 +0,0 @@
-{
-  "name": "Autocomplete",
-  "baseUIApi": "https://base-ui.com/react/components/autocomplete#api-reference",
-  "structure": "<Autocomplete>\n  <Autocomplete.Item value=\"…\">…</Autocomplete.Item>\n  <Autocomplete.Group label=\"…\" items={[…]}>\n    <Autocomplete.Collection>\n      {(item) => <Autocomplete.Item value={item}>…</Autocomplete.Item>}\n    </Autocomplete.Collection>\n  </Autocomplete.Group>\n</Autocomplete>",
-  "summary": "Field-wrapped free-form suggest input with Textfield chrome and Select-like popup list.",
-  "whenToUse": [
-    "Suggest options while allowing free-form text in the input",
-    "Filterable tag, movie, or docs search with optional empty and status copy",
-    "Grouped suggestion lists via Autocomplete.Group and Collection",
-    "Async or limited result lists that need polite status announcements",
-    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
-  ],
-  "whenNotToUse": [
-    "Remembered selection from a closed list — use Select (or Combobox when available)",
-    "Command palette, grid picker, or virtualized lists — separate surfaces on Base UI Autocomplete",
-    "Wrapping a lone Autocomplete in Fieldset when its own label is sufficient"
-  ],
-  "accessibility": [
-    "Provide label or aria-label so the input has an accessible name",
-    "Wire description and error copy through the field pattern so assistive tech gets helper text",
-    "Keep empty and status slots mounted; update their children when messaging changes"
-  ],
-  "antiPatterns": [
-    "Expecting Select-like closed selection state",
-    "Leaving the input without label or aria-label",
-    "Conditionally unmounting Empty or Status instead of updating their children"
-  ],
-  "related": ["Textfield", "Select", "Fieldset", "Stack", "Surface", "Spinner"],
-  "properties": {
-    "react": {
-      "children": {
-        "description": "List content: static Item, Group, or Collection nodes, or a Base UI list render function."
-      },
-      "container": {
-        "description": "Portal mount node (iframe body, shadow root, or app overlay root). Omit for Base UI default (`document.body` from the module window — iframe hosts must pass the iframe document body explicitly)."
-      },
-      "description": {
-        "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
-      },
-      "empty": {
-        "description": "Content rendered inside baked `Autocomplete.Empty` when the filtered list has no items."
-      },
-      "endAddon": {
-        "description": "Trailing decoration (icon, button). Buttons must use `type=\"button\"`."
-      },
-      "error": {
-        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`. Replaces description while the field is invalid and dirty."
-      },
-      "fitContent": {
-        "description": "When `true`, sets `field-sizing: content` so the control grows inline with its value. Block chrome stays `var(--vui-autocomplete-input-height)`. Omitted / `false` keeps the browser fixed default.",
-        "refCss": "input-height"
-      },
-      "Group.label": {
-        "description": "Accessible group label rendered with `Autocomplete.GroupLabel`."
-      },
-      "Item.addon": {
-        "description": "Decorative leading node rendered before the item label."
-      },
-      "Item.addonAlign": {
-        "description": "Vertical alignment of the addon relative to the item label row."
-      },
-      "label": {
-        "description": "Visible label rendered with shared internal `FieldLabel`."
-      },
-      "placeholder": {
-        "description": "Placeholder text shown in the input when empty."
-      },
-      "ref": {
-        "description": "Ref forwarded to the autocomplete input."
-      },
-      "startAddon": {
-        "description": "Leading decoration (prefix text, icon). Not a second field control."
-      },
-      "status": {
-        "description": "Content rendered inside baked `Autocomplete.Status` (async / limit messaging). Keep the slot mounted; update children when status changes."
-      }
-    },
-    "css": {
-      "control-group-background": {
-        "description": "Autocomplete control group background."
-      },
-      "control-group-border-color": {
-        "description": "Autocomplete control group border color; invalid state overrides."
-      },
-      "control-group-border-radius": {
-        "description": "Autocomplete control group corner radius."
-      },
-      "control-group-color": {
-        "description": "Autocomplete control group foreground color."
-      },
-      "input-height": {
-        "description": "Autocomplete control group block size.",
-        "refReact": "fitContent"
-      },
-      "list-border-radius": {
-        "description": "Popup list border radius custom property on the popup root."
-      },
-      "list-padding": {
-        "description": "Popup list padding custom property used for scroll padding."
-      }
-    }
-  }
-}

package/dist/components/avatar/avatar.guide.json

@@ -1,53 +0,0 @@
-{
-  "name": "Avatar",
-  "baseUIApi": "https://base-ui.com/react/components/avatar#api-reference",
-  "structure": "<Avatar fallback=\"AB\" />",
-  "summary": "Circular identity image or fallback for users, entities, or profile chips.",
-  "whenToUse": [
-    "Show a user or entity photo with text or image fallback",
-    "Display profile chips from x-small through large sizes"
-  ],
-  "whenNotToUse": ["Interactive controls or navigation", "Non-identity imagery without a fallback plan"],
-  "accessibility": [
-    "Provide meaningful alt text when the image conveys identity",
-    "Use fallback text or initials when the image is unavailable"
-  ],
-  "antiPatterns": [
-    "Relying on Avatar children for layout sizing",
-    "Omitting meaningful alt text when the image conveys identity"
-  ],
-  "related": ["Skeleton"],
-  "properties": {
-    "react": {
-      "alt": {
-        "description": "Supplies alternative text for the avatar image."
-      },
-      "fallback": {
-        "description": "Supplies the content shown when the image is absent or fails to load."
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered avatar root element."
-      },
-      "size": {
-        "description": "Selects the rendered avatar footprint."
-      },
-      "src": {
-        "description": "Supplies the avatar image source URL."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Root background fill behind image or fallback."
-      },
-      "foreground": {
-        "description": "Root foreground color for fallback content."
-      },
-      "radius": {
-        "description": "Corner radius on the root; size presets also adjust this."
-      },
-      "size": {
-        "description": "Avatar inline and block size on the root."
-      }
-    }
-  }
-}

package/dist/components/avatar-group/avatar-group.guide.json

@@ -1,56 +0,0 @@
-{
-  "name": "AvatarGroup",
-  "structure": "<AvatarGroup avatars={[{ fallback: \"AB\" }]} />",
-  "summary": "Overlapping avatar stack with shared sizing, directional layout, and an optional overflow pill.",
-  "whenToUse": [
-    "Show a compact list of people or entities with consistent avatar sizing",
-    "Display overlapping identity clusters in horizontal or vertical layouts",
-    "Collapse long avatar lists into a final overflow pill such as +15 or +9938"
-  ],
-  "whenNotToUse": ["Interactive chip collections that need per-item actions", "Mixed avatar sizes inside one group"],
-  "accessibility": [
-    "Provide meaningful alt text on each avatar image when identity matters",
-    "Treat overflow content such as +3 or +9938 as summary text rather than an interactive affordance",
-    "Keep decorative avatars on empty alt text when the surrounding context already labels the group"
-  ],
-  "antiPatterns": [
-    "Passing per-avatar size values instead of using the group size prop",
-    "Expecting AvatarGroup to derive hidden-count labels instead of passing overflowText directly",
-    "Expecting grouped avatars to always render as circles — items keep theme radius/squircle via --vui-avatar-group-item-radius",
-    "Using non-positive maxVisible values expecting truncation"
-  ],
-  "related": ["Avatar"],
-  "properties": {
-    "react": {
-      "avatars": {
-        "description": "Supplies the avatar payloads rendered by the group in DOM order."
-      },
-      "direction": {
-        "description": "Chooses whether avatars overlap across the inline or block axis."
-      },
-      "maxVisible": {
-        "description": "Limits how many real avatars render before the optional overflow pill is appended. Omitted, zero, and negative values are ignored."
-      },
-      "overflowText": {
-        "description": "Supplies the content rendered inside the optional overflow pill when truncation is active."
-      },
-      "size": {
-        "description": "Selects the shared avatar footprint for every rendered avatar."
-      }
-    },
-    "css": {
-      "gap-size": {
-        "description": "Cutout gap used by overlap clip-path math."
-      },
-      "item-radius": {
-        "description": "Corner radius applied to grouped avatar items."
-      },
-      "overlap-distance": {
-        "description": "Negative margin overlap between adjacent avatars."
-      },
-      "size": {
-        "description": "Rendered avatar size used for overlap layout."
-      }
-    }
-  }
-}

package/dist/components/badge/badge.guide.json

@@ -1,59 +0,0 @@
-{
-  "name": "Badge",
-  "structure": "<Badge>{child}</Badge>",
-  "summary": "Decorative status-dot overlay that wraps a child, with optional radial mask cutout on the child around the corner dot.",
-  "whenToUse": [
-    "Show online/offline or presence on an Avatar or icon without changing the child component API",
-    "Mark a control as needing attention with a small corner indicator",
-    "Keep Chip for labeled text badges; use Badge only for the status-dot overlay"
-  ],
-  "whenNotToUse": [
-    "Conveying critical status that assistive tech must announce — put real meaning in the child name or nearby text",
-    "Labeled text badges or tags — use Chip",
-    "Count or text inside a pill — out of scope for v1"
-  ],
-  "accessibility": [
-    "The status dot is a decorative ::after pseudo — not exposed to assistive tech",
-    "Do not rely on the dot alone for status; keep real meaning in the child's accessible name or nearby text",
-    "Children retain native semantics; Badge itself is a presentational div wrap",
-    "Enter/exit motion (hole↔dot, reverse on hide) is suppressed under prefers-reduced-motion"
-  ],
-  "antiPatterns": [
-    "Using the visible dot as the only source of status for assistive tech",
-    "Wrapping multiple element children when only one should receive the radial mask cutout",
-    "Expecting the dot to participate in hit-testing"
-  ],
-  "related": ["Avatar", "AvatarGroup", "Chip", "Annotate"],
-  "properties": {
-    "react": {
-      "color": {
-        "description": "Highlight token driving the status-dot color via `--vui-badge-color`."
-      },
-      "position": {
-        "description": "Places the status dot on a corner of the wrapped content."
-      },
-      "show": {
-        "description": "When true, shows the decorative status dot and applies the radial mask cutout. Enter: hole expands, then the dot scales in. Exit: reverse (dot then hole)."
-      },
-      "size": {
-        "description": "Diameter of the status dot via `--vui-badge-size`.",
-        "refCss": "size"
-      }
-    },
-    "css": {
-      "color": {
-        "description": "Status-dot accent color. Defaults to var(--global-primary)."
-      },
-      "position-x": {
-        "description": "Horizontal status-dot anchor. Position presets set it to 0% for start or 100% for end."
-      },
-      "position-y": {
-        "description": "Vertical status-dot anchor. Position presets set it to 0% for top or 100% for bottom."
-      },
-      "size": {
-        "description": "Status-dot diameter. Defaults to 0.5rem.",
-        "refReact": "size"
-      }
-    }
-  }
-}

package/dist/components/beam/beam.guide.json

@@ -1,123 +0,0 @@
-{
-  "name": "Beam",
-  "structure": "<Beam>{children}</Beam>",
-  "summary": "Decorative animated border, line, or pulse glow on a transparent Surface shell (radius only). Put the visual card as children. CSS-module geometry plus shared ~30fps pulse rAF for pulse variants. Memory/CPU cost — use sparingly.",
-  "whenToUse": [
-    "Highlight a focal Surface with a traveling border beam",
-    "Bottom-edge line travel under a card or panel",
-    "Breathing pulse glow inside or outside a Surface",
-    "Token-colored or colorful multi-stop decorative emphasis"
-  ],
-  "whenNotToUse": [
-    "Default decoration on many cards — reserve for rare focal moments",
-    "Accessible status or focus indication — Beam is decorative only",
-    "As a replacement for Surface color/padding — compose Surface as children",
-    "Pointer-driven highlight — use Glow instead"
-  ],
-  "accessibility": [
-    "Root stays in the accessibility tree; bloom layer is empty div",
-    "Beam is not a focus or status indicator — consumer owns accessible names and state",
-    "Offscreen instances pause animations without firing activate/deactivate",
-    "prefers-reduced-motion disables motion and leaves a static resting look"
-  ],
-  "antiPatterns": [
-    "Relying on Beam for keyboard focus visibility",
-    "Treating Beam as the visual card instead of composing Surface children",
-    "Expecting theme light/dark auto-tuning — colors are token-driven and theme-agnostic",
-    "Using many pulse Beam instances on one page — shared rAF still paints per instance"
-  ],
-  "related": ["Surface", "Glow", "Shimmer"],
-  "properties": {
-    "react": {
-      "radius": {
-        "description": "Sets corner radius from the Vira radius token scale, a per-corner [top-left, top-right, bottom-right, bottom-left] tuple (0 for square corners), or auto for concentric radii from the nearest ancestor Surface."
-      },
-      "variant": {
-        "description": "Effect family: rotating border, bottom line travel, or pulse breathe (outside/inside)."
-      },
-      "size": {
-        "description": "Border-only size preset (small compact / medium card). Ignored for other variants."
-      },
-      "color": {
-        "description": "Beam color: primary → --global-primary, highlight token name → --highlight-*, colorful → upstream neon multi-stop RGB palette.",
-        "refCss": "color"
-      },
-      "animate": {
-        "description": "Whether the animation is logically on (fade in/out when toggled)."
-      },
-      "duration": {
-        "description": "CSS time string for spin / travel / pulse period scaling.",
-        "refCss": "duration"
-      },
-      "strength": {
-        "description": "Overall strength/opacity of beam layers (0–1). Does not affect children.",
-        "refCss": "strength"
-      },
-      "brightness": {
-        "description": "Brightness filter multiplier for glow layers. Defaults to 1.9 for pulse-outside, 0.75 for pulse-inside, otherwise 1.3.",
-        "refCss": "brightness"
-      },
-      "saturation": {
-        "description": "Saturation filter multiplier for glow layers.",
-        "refCss": "saturation"
-      },
-      "hueRange": {
-        "description": "Hue-rotate range for the CSS hue-shift animation (degrees). Line variant caps at 13.",
-        "refCss": "hue-range"
-      },
-      "staticColors": {
-        "description": "Disables hue-shift / pulse hue drift so token colors stay fixed. Defaults to true when color is not colorful; false for colorful."
-      },
-      "fitContent": {
-        "description": "Shrinks the root to fit its content (`max-width: fit-content`)."
-      },
-      "onActivate": {
-        "description": "Fired when the fade-in animation completes."
-      },
-      "onDeactivate": {
-        "description": "Fired when the fade-out animation completes."
-      }
-    },
-    "css": {
-      "angle": {
-        "description": "Conic / travel start angle animated by border and line variants."
-      },
-      "opacity": {
-        "description": "Fade opacity driven by fade-in / fade-out keyframes."
-      },
-      "duration": {
-        "description": "Spin / travel duration (and pulse period scale input).",
-        "refReact": "duration"
-      },
-      "strength": {
-        "description": "Overall beam layer strength multiplier.",
-        "refReact": "strength"
-      },
-      "brightness": {
-        "description": "Brightness filter multiplier.",
-        "refReact": "brightness"
-      },
-      "saturation": {
-        "description": "Saturation filter multiplier.",
-        "refReact": "saturation"
-      },
-      "hue-range": {
-        "description": "Hue-rotate oscillation range for non-static colors.",
-        "refReact": "hueRange"
-      },
-      "color": {
-        "description": "Resolved beam token color (primary or highlight). Colorful mode uses multi-stop internals.",
-        "refReact": "color"
-      },
-      "hue": {
-        "description": "Pulse hue drift angle written by the shared pulse driver."
-      },
-      "pulse-glow-sx": {
-        "description": "Per-axis X scale for pulse-outside glow geometry relative to a 350×140 reference."
-      },
-      "pulse-glow-sy": {
-        "description": "Per-axis Y scale for pulse-outside glow geometry relative to a 350×140 reference."
-      }
-    }
-  }
-}

package/dist/components/bleed/bleed.guide.json

@@ -1,43 +0,0 @@
-{
-  "name": "Bleed",
-  "structure": "<Bleed>…</Bleed>",
-  "summary": "Layout utility that pulls content past inline padding using negative margins or full viewport bleed.",
-  "whenToUse": [
-    "Edge-to-edge media or dividers inside padded Surface or Stack containers",
-    "Hero bands or callouts that should break out of card padding",
-    "Full-bleed sections that span the viewport width from a centered layout"
-  ],
-  "whenNotToUse": [
-    "Replacing Stack or Surface padding instead of composing with them",
-    "Interactive controls that need their own hit target sizing",
-    "Cases where overflow clipping on the parent should remain strict"
-  ],
-  "accessibility": [
-    "Bleed is a layout wrapper only — child content keeps native semantics",
-    "Parent containers should preserve readable line length for text content",
-    "Full bleed can introduce horizontal scroll when ancestors use overflow hidden incorrectly",
-    "Full bleed uses physical `margin-left: calc(50% - 50vw)` — known RTL limitation; verify mirroring in right-to-left layouts"
-  ],
-  "antiPatterns": [
-    "Nesting multiple full bleeds without checking ancestor overflow",
-    "Using Bleed to compensate for missing Stack padding instead of fixing layout composition",
-    "Applying full bleed inside narrow overflow-hidden cards without testing clipping",
-    "Expecting full bleed `margin-left` to flip automatically in RTL"
-  ],
-  "related": ["Stack", "Surface", "Separator"],
-  "properties": {
-    "react": {
-      "amount": {
-        "description": "Sets the inline bleed amount using a Vira space token."
-      },
-      "full": {
-        "description": "Bleeds content to the viewport edges and ignores `amount`."
-      }
-    },
-    "css": {
-      "amount": {
-        "description": "Bleed distance on the root via `margin: 0 calc(var(--vui-bleed-amount, 0) * -1)` (negative inline, zero block)."
-      }
-    }
-  }
-}

package/dist/components/breakpoints/breakpoints.guide.json

@@ -1,40 +0,0 @@
-{
-  "name": "BreakpointsProvider",
-  "structure": "<BreakpointsProvider>\n  {children}\n</BreakpointsProvider>",
-  "summary": "Client provider plus `useBreakpoints` for mobile-first viewport min-width matches. Defaults are hardcoded em thresholds, not theme tokens.",
-  "whenToUse": [
-    "Swap or hide React markup when the viewport crosses named breakpoints",
-    "Read one flag with `useBreakpoints('small')` so unrelated breakpoint flips skip work",
-    "Override the full map with the `breakpoints` prop for product-specific thresholds"
-  ],
-  "whenNotToUse": [
-    "Layout that CSS `@media` or container queries can own without branching markup",
-    "Calling `useBreakpoints` outside this provider",
-    "Reading design-token CSS variables for breakpoint widths"
-  ],
-  "accessibility": [
-    "Match state is not an APG widget. Keep the same accessible name and semantics when swapping chrome",
-    "Do not rely on breakpoint-only visibility as the only way to reach essential actions on small viewports"
-  ],
-  "antiPatterns": [
-    "Using `useBreakpoints` without wrapping the tree in `BreakpointsProvider`",
-    "Merging a sparse custom map onto defaults — the `breakpoints` prop replaces the whole map",
-    "Putting the provider in a Server Component module — wrap it in a Client Component (`'use client'`)"
-  ],
-  "related": ["Stack", "Grid"],
-  "usage": [
-    "Place `BreakpointsProvider` in a Client Component (Next.js: same client providers module as overlays, or a nested client wrapper). Server Components may compose around that boundary.",
-    "On the server and before measure, every named breakpoint is unmatched (mobile-first base). After hydration, flags follow the real viewport; first paint may differ on wide screens — prefer CSS for chrome that must not flash.",
-    "Nested providers isolate subtrees. The innermost map wins."
-  ],
-  "properties": {
-    "react": {
-      "breakpoints": {
-        "description": "Replaces the entire default map (extra-small 30em, small 48em, medium 60em, large 80em, extra-large 100em). Values are CSS lengths used as mobile-first min-width queries."
-      },
-      "children": {
-        "description": "Tree that may call `useBreakpoints`. The hook returns all match flags, or `useBreakpoints(name)` for one boolean."
-      }
-    }
-  }
-}