@viraui/react 2026.3.11 → 2026.4.0

package/dist/components/grid/grid.guide.json

@@ -1,120 +0,0 @@
-{
-  "name": "Grid",
-  "structure": "<Grid>\n  <Grid.Item>…</Grid.Item>\n</Grid>",
-  "summary": "CSS Grid layout primitive for auto-fill/fit or fixed track layouts with token gaps, Stack-aligned padding, and item placement (`fullWidth` / `fullHeight` / column / row).",
-  "whenToUse": [
-    "Responsive card or tile walls that need true CSS Grid tracks (auto-fill/fit or fixed columns)",
-    "Fixed-count columns that keep a given track breadth — pair `columns` with an explicit `colMinWidth` so a parent with `overflow: auto` can scroll",
-    "Layouts where items must span full row or full column tracks",
-    "Token-spaced grids with optional axis padding without custom grid CSS"
-  ],
-  "whenNotToUse": [
-    "Uneven-height presentational walls where reading order can follow columns — prefer Masonry",
-    "Simple one-axis flex spacing — prefer Stack",
-    "Expecting Masonry-style React column packing instead of CSS Grid tracks"
-  ],
-  "accessibility": [
-    "Grid is presentational — choose render roots that preserve correct semantics (section, list, article)",
-    "DOM order follows source order; keep reading and keyboard order aligned with visual placement",
-    "Prefer Grid.Item render when list or article semantics matter for children"
-  ],
-  "antiPatterns": [
-    "Using Masonry when you need explicit row/column placement or full-width/full-height spans",
-    "Re-declaring grid-template and gap in app CSS when Grid can own the layout",
-    "Setting both fullWidth and column (or fullHeight and row) and expecting the explicit placement to win — full-* data attrs override"
-  ],
-  "related": ["Stack", "Masonry", "Surface"],
-  "properties": {
-    "react": {
-      "colMinWidth": {
-        "description": "Minimum column track width for `filling` auto-fill/auto-fit tracks. When `columns` is also set, an explicit value opts into fixed-breadth tracks (`repeat(N, var(--vui-grid-column-min-w))`) and sets `data-grid-fixed-breadth`; omit this prop to keep fluid `1fr` tracks."
-      },
-      "columnGap": {
-        "description": "Sets the gap between grid columns using the Vira space token scale."
-      },
-      "columns": {
-        "description": "Fixes the number of column tracks. When set, `filling` is ignored and `data-grid-filling-type` is omitted. Bare `columns={N}` uses fluid `repeat(N, minmax(0, 1fr))` tracks. Pass an explicit `colMinWidth` as well for fixed-breadth tracks and `data-grid-fixed-breadth=\"true\"` (`inline-size: max-content`)."
-      },
-      "filling": {
-        "description": "Controls `repeat(auto-fill|auto-fit, …)` when `columns` is unset. Pass `false` to skip the filling data attribute."
-      },
-      "hPadding": {
-        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
-      },
-      "Item.column": {
-        "description": "Sets explicit `grid-column` placement via `--vui-grid-item-column`."
-      },
-      "Item.fullHeight": {
-        "description": "Spans the item across every row track (`grid-row: 1 / -1`). Wins over `row` when both are set."
-      },
-      "Item.fullWidth": {
-        "description": "Spans the item across every column track (`grid-column: 1 / -1`). Wins over `column` when both are set."
-      },
-      "Item.ref": {
-        "description": "Ref forwarded to the rendered item root element."
-      },
-      "Item.render": {
-        "description": "Replaces the default `div` item root using Base UI render semantics."
-      },
-      "Item.row": {
-        "description": "Sets explicit `grid-row` placement via `--vui-grid-item-row`."
-      },
-      "Item.subgrid": {
-        "description": "Opts the item into a nested CSS grid that inherits parent tracks via `subgrid`. Sets `display: grid` and `grid-template-columns` and/or `grid-template-rows` to `subgrid`. Pass `true` for both axes, or `'column'` / `'row'` for one axis. Pair with `fullWidth` / `fullHeight` or a `column` / `row` span so the item covers the tracks to inherit."
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered grid root element."
-      },
-      "render": {
-        "description": "Replaces the default `div` root using Base UI render semantics."
-      },
-      "rowGap": {
-        "description": "Sets the gap between grid rows using the Vira space token scale."
-      },
-      "rowMinHeight": {
-        "description": "Minimum row track size used when `rows` is set."
-      },
-      "rows": {
-        "description": "Fixes the number of row tracks via `--vui-grid-rows`."
-      },
-      "vPadding": {
-        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
-      }
-    },
-    "css": {
-      "column-gap": {
-        "description": "Grid column gap on the root."
-      },
-      "column-min-w": {
-        "description": "Minimum column track width for auto-fill/auto-fit track sizing, and the fixed track breadth when `columns` is set with an explicit `colMinWidth`."
-      },
-      "column-size": {
-        "description": "Resolved column track size (`minmax` formula) used by auto-fill/fit."
-      },
-      "columns": {
-        "description": "Fixed column track count when `columns` is set and filling is inactive; bare `columns` sizes tracks as `minmax(0, 1fr)`; with explicit `colMinWidth`, tracks use `var(--vui-grid-column-min-w)` under `data-grid-fixed-breadth`."
-      },
-      "padding-block-end": {
-        "description": "Block-end padding when padding is enabled."
-      },
-      "padding-block-start": {
-        "description": "Block-start padding when padding is enabled."
-      },
-      "padding-inline-end": {
-        "description": "Inline-end padding when padding is enabled."
-      },
-      "padding-inline-start": {
-        "description": "Inline-start padding when padding is enabled."
-      },
-      "row-gap": {
-        "description": "Grid row gap on the root."
-      },
-      "row-min-h": {
-        "description": "Minimum row track size when fixed rows are enabled."
-      },
-      "rows": {
-        "description": "Fixed row track count when `rows` is set."
-      }
-    }
-  }
-}

package/dist/components/icon-button/icon-button-link.guide.json

@@ -1,73 +0,0 @@
-{
-  "name": "IconButtonLink",
-  "structure": "<IconButtonLink href=\"#\" icon={<Plus />} aria-label=\"Add\" />",
-  "summary": "Icon-only navigation link that requires an accessible name; wraps ButtonLink.",
-  "whenToUse": [
-    "Compact toolbar or chrome navigation identified only by icon",
-    "Same size, variant, and loading model as IconButton without button semantics",
-    "Compose with framework Link via ButtonLink render prop"
-  ],
-  "whenNotToUse": [
-    "In-page icon actions that do not navigate — use IconButton",
-    "Labeled navigation — use ButtonLink",
-    "Missing both aria-label and aria-labelledby"
-  ],
-  "accessibility": [
-    "Provide aria-label or aria-labelledby on every IconButtonLink — icon alone is not a name",
-    "Renders a real link root so assistive tech get link role",
-    "loading sets aria-disabled / aria-busy for loading chrome; no disabled prop — native links stay activatable"
-  ],
-  "antiPatterns": [
-    "Passing children, addon, or addonPosition — not part of the public API",
-    "Using IconButton with render={<a />} instead of IconButtonLink"
-  ],
-  "related": ["IconButton", "ButtonLink", "Button", "Icon", "Spinner"],
-  "properties": {
-    "react": {
-      "icon": {
-        "description": "Icon rendered as the sole visible control content."
-      },
-      "loading": {
-        "description": "Shows a centered spinner overlay while preserving the original content width. Sets `aria-disabled` / `aria-busy` for loading chrome; link stays activatable."
-      },
-      "pill": {
-        "description": "Applies a fully rounded pill shape."
-      },
-      "render": {
-        "description": "Replaces the default `a` root using Base UI render semantics (e.g. Next.js `Link`)."
-      },
-      "size": {
-        "description": "Controls the visual button size."
-      },
-      "variant": {
-        "description": "Selects the visual treatment matching Button."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Button fill; variant and state selectors preset this."
-      },
-      "color": {
-        "description": "Button label and icon color."
-      },
-      "height": {
-        "description": "Button block size; size prop presets via data attributes."
-      },
-      "icon-size": {
-        "description": "Addon icon size inside the button."
-      },
-      "padding-block": {
-        "description": "Vertical padding inside the button."
-      },
-      "padding-inline": {
-        "description": "Horizontal padding inside the button."
-      },
-      "radius": {
-        "description": "Corner radius; pill sets infinite radius via data-pill."
-      },
-      "spinner-color": {
-        "description": "Loading spinner color on the root."
-      }
-    }
-  }
-}

package/dist/components/icon-button/icon-button.guide.json

@@ -1,72 +0,0 @@
-{
-  "name": "IconButton",
-  "structure": "<IconButton icon={<Plus />} aria-label=\"Add\" />",
-  "summary": "Icon-only button that shares Button visual chrome (--vui-button-* CSS) and requires an accessible name through aria-label or aria-labelledby.",
-  "whenToUse": [
-    "Compact toolbar or chrome actions identified only by icon",
-    "Same size, variant, and loading model as Button without visible label",
-    "Decorative glyph with explicit accessible naming on the root button"
-  ],
-  "whenNotToUse": [
-    "Actions that need visible text — use Button",
-    "Missing both aria-label and aria-labelledby",
-    "Navigation or non-button semantics — use IconButtonLink",
-    "Temporally swap icons after user interactions with temporal pressed state, like copy feedback. Use ToggleButton instead"
-  ],
-  "accessibility": [
-    "Provide aria-label or aria-labelledby on every IconButton — icon alone is not a name",
-    "Loading sets aria-busy on the control; Spinner is decorative",
-    "Keep the accessible name stable when loading state changes"
-  ],
-  "antiPatterns": [
-    "Passing children, addon, or addonPosition — not part of the public API",
-    "Using icon-only Button instead of IconButton",
-    "Using IconButton with render={<a />} for links — use IconButtonLink"
-  ],
-  "related": ["Button", "ButtonLink", "IconButtonLink", "Icon", "Spinner"],
-  "properties": {
-    "react": {
-      "icon": {
-        "description": "Icon rendered as the sole visible control content."
-      },
-      "loading": {
-        "description": "Shows a centered spinner overlay while preserving the original content width."
-      },
-      "pill": {
-        "description": "Applies a fully rounded pill shape to the button."
-      },
-      "size": {
-        "description": "Controls the visual button size."
-      },
-      "variant": {
-        "description": "Selects the visual treatment for the button."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Button fill; variant and state selectors preset this."
-      },
-      "color": {
-        "description": "Button label and icon color."
-      },
-      "height": {
-        "description": "Button block size; size prop presets via data attributes."
-      },
-      "icon-size": {
-        "description": "Addon icon size inside the button."
-      },
-      "padding-block": {
-        "description": "Vertical padding inside the button."
-      },
-      "padding-inline": {
-        "description": "Horizontal padding inside the button."
-      },
-      "radius": {
-        "description": "Corner radius; pill sets infinite radius via data-pill."
-      },
-      "spinner-color": {
-        "description": "Loading spinner color on the root."
-      }
-    }
-  }
-}

package/dist/components/linear-progress/linear-progress.guide.json

@@ -1,53 +0,0 @@
-{
-  "name": "LinearProgress",
-  "baseUIApi": "https://base-ui.com/react/components/progress#api-reference",
-  "structure": "<LinearProgress value={40} />",
-  "summary": "Shows determinate or indeterminate progress for a task in a compact horizontal track.",
-  "whenToUse": [
-    "Use for task completion with a known percentage or bounded numeric value.",
-    "Use with `value={null}` when progress is active but the amount complete is unknown.",
-    "Use with a label when the progress bar needs a visible task name."
-  ],
-  "whenNotToUse": [
-    "Use Spinner for a small standalone loading affordance without task context.",
-    "Use Skeleton when representing loading content layout.",
-    "Use Slider when the user needs to choose or adjust a value."
-  ],
-  "accessibility": [
-    "Provide a visible `label` or an accessible name through Base UI progress props when the task is not otherwise clear.",
-    "Use determinate numeric `value` when actual progress is known.",
-    "Use `value={null}` only for truly indeterminate work."
-  ],
-  "antiPatterns": [
-    "Do not use LinearProgress as an interactive value control.",
-    "Do not add fake percentages for work where progress is unknown.",
-    "Do not model invalid progress; Base UI Progress does not expose an invalid state.",
-    "Do not model disabled progress; Base UI Progress does not expose a disabled state.",
-    "Do not hide the task label when multiple progress indicators are visible."
-  ],
-  "related": ["Slider", "Spinner", "Skeleton", "Text", "Meter"],
-  "properties": {
-    "react": {
-      "description": {
-        "description": "Static helper copy rendered with `Text` below the progress track."
-      },
-      "label": {
-        "description": "Visible label rendered through `Progress.Label` with shared internal `FieldLabel`."
-      },
-      "renderValue": {
-        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Progress.Value` `children` to customize the printed label."
-      }
-    },
-    "css": {
-      "indicator-color": {
-        "description": "Progress indicator color for determinate fill and indeterminate sweep."
-      },
-      "track-background": {
-        "description": "Progress track background color."
-      },
-      "track-size": {
-        "description": "Progress track thickness on the root."
-      }
-    }
-  }
-}

package/dist/components/masonry/masonry.guide.json

@@ -1,50 +0,0 @@
-{
-  "name": "Masonry",
-  "structure": "<Masonry>\n  <Masonry.Item>…</Masonry.Item>\n</Masonry>",
-  "summary": "Responsive React-column layout primitive for read-only mixed-height content walls; root is a named CSS container query context (`masonry` / inline-size).",
-  "whenToUse": [
-    "Card walls, gallery-like collections, and editorial layouts with uneven item heights",
-    "Presentational walls where responsive column count matters more than source-order reading",
-    "Read-only collections composed from Surface, Stack, Text, and similar content primitives",
-    "Style descendants with @container masonry queries when layout should respond to the Masonry root's inline-size (peer Surface/Stack named containers)"
-  ],
-  "whenNotToUse": [
-    "Interactive collections where keyboard tab order must match source order",
-    "Layouts that need strict row alignment or item-to-item placement control",
-    "Cases where Stack or another linear layout already preserves the intended reading sequence"
-  ],
-  "accessibility": [
-    "Masonry distributes items round-robin into React column wrappers, so DOM, screen-reader, and keyboard order follow columns rather than original child order",
-    "Avoid interactive descendants when the visual arrangement could mislead keyboard users",
-    "Choose semantic item roots with Masonry.Item render when list or article semantics matter"
-  ],
-  "antiPatterns": [
-    "Treating React columns as a true interactive grid with predictable source-order keyboard traversal",
-    "Using arbitrary child margins instead of the gap contract (column flex gap + Stack rowGap)"
-  ],
-  "related": ["Stack", "Surface", "Text"],
-  "properties": {
-    "react": {
-      "breakpointCols": {
-        "description": "Sets the mobile-first column count at each CSS px container breakpoint. Each non-`default` key is a unitless `min-width` in px against the Masonry root's content-box inline size. Keys may be in any order; the largest matching breakpoint wins. Non-finite keys are ignored."
-      },
-      "gap": {
-        "description": "Sets the gap between columns (`--vui-masonry-gap`) and the `rowGap` on each column `Stack`."
-      },
-      "Item.ref": {
-        "description": "Ref forwarded to the rendered item root element."
-      },
-      "Item.render": {
-        "description": "Replaces the default `div` item root using Base UI render semantics."
-      },
-      "render": {
-        "description": "Replaces the default `div` root using Base UI render semantics."
-      }
-    },
-    "css": {
-      "gap": {
-        "description": "Column gap only (`--vui-masonry-gap` on the flex root). Within-column item spacing uses Stack `rowGap`, not this custom property."
-      }
-    }
-  }
-}

package/dist/components/menu/menu.guide.json

@@ -1,94 +0,0 @@
-{
-  "name": "Menu",
-  "baseUIApi": "https://base-ui.com/react/components/menu#api-reference",
-  "structure": "<Menu>\n  <Menu.Trigger />\n  <Menu.Popup>\n    <Menu.Item />\n    <Menu.LinkItem />\n    <Menu.CheckboxItem />\n    <Menu.Group label=\"…\">\n      <Menu.Item />\n    </Menu.Group>\n    <Menu.RadioGroup>\n      <Menu.RadioItem value=\"…\" />\n    </Menu.RadioGroup>\n    <Menu.Separator />\n    <Menu.Submenu>\n      <Menu.SubmenuTrigger />\n      <Menu.Popup>…</Menu.Popup>\n    </Menu.Submenu>\n  </Menu.Popup>\n</Menu>",
-  "summary": "Compound menu built on Base UI Menu with `Menu.Trigger`, `Menu.Popup`, unified item rows, groups, checkbox/radio items, nested submenus, destructive sentiment, and `Menu.createHandle` for detached triggers; `Popup` owns Portal + Positioner + Elevator/Surface Select-like list chrome.",
-  "whenToUse": [
-    "Action menus anchored to a button or icon button",
-    "Nested command lists with checkbox or radio options that stay open on toggle",
-    "Link rows mixed with actions in one menu surface",
-    "Detached or multi-trigger menus via `Menu.createHandle`",
-    "Account / user widgets: `Menu.Trigger` as a Surface chip (avatar + name + email) opening a Popup with a static profile header plus action items",
-    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
-  ],
-  "whenNotToUse": [
-    "Page-blocking modal flows (use Dialog)",
-    "Form field single-select from a long list (use Select)",
-    "Context menu or menubar chrome (not in this surface)",
-    "System-wide transient alerts (use Toast)",
-    "Rich non-menu panels with forms or free layout (use Popover / Dialog — do not wrap Menu in Popover)"
-  ],
-  "accessibility": [
-    "Give the trigger an accessible name (`Button` label, visible text in a Surface trigger rendered as `<button>`, or `aria-label` on IconButton)",
-    "Use `Menu.Group` `label` for grouped sections so assistive tech gets a group name",
-    "Prefer Base UI keyboard navigation; do not trap focus outside the menu pattern",
-    "`Menu.Popup` may include static non-item children (e.g. profile header); keep them non-interactive so focus roving stays on menu items"
-  ],
-  "antiPatterns": [
-    "Expecting `Menu.Arrow`, `Menu.Backdrop`, or public Portal/Positioner/Viewport exports",
-    "Closing checkbox/radio items on click by default when the menu should stay open for multi-toggle",
-    "Using physical left/right CSS that breaks RTL submenu chevrons",
-    "Expecting RTL item rows / left-opening submenus without Base UI `DirectionProvider direction=\"rtl\"` plus app `dir=\"rtl\"` on a portal ancestor (usually `<html>` / document root — a local wrapper alone does not reach body-mounted popups)",
-    "Nesting Menu inside Popover for an account menu — Menu already owns portal, positioning, and listbox keyboard behavior",
-    "Putting focusable controls (inputs, nested buttons) in `Menu.Popup` outside `Menu.Item` / `Menu.LinkItem` / checkbox / radio / submenu trigger parts"
-  ],
-  "related": ["Avatar", "Button", "IconButton", "Popover", "Select", "Stack", "Surface", "Text", "Tooltip"],
-  "properties": {
-    "react": {
-      "CheckboxItem.addon": {
-        "description": "Decorative leading node rendered before the item label."
-      },
-      "CheckboxItem.note": {
-        "description": "End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`."
-      },
-      "CheckboxItem.sentiment": {
-        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
-      },
-      "Group.label": {
-        "description": "Accessible group label rendered with `Menu.GroupLabel`."
-      },
-      "Item.addon": {
-        "description": "Decorative leading node rendered before the item label."
-      },
-      "Item.note": {
-        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`."
-      },
-      "Item.sentiment": {
-        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
-      },
-      "LinkItem.addon": {
-        "description": "Decorative leading node rendered before the item label."
-      },
-      "LinkItem.note": {
-        "description": "End-aligned secondary text (e.g. keyboard shortcut). Rendered muted `x-small`."
-      },
-      "LinkItem.sentiment": {
-        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
-      },
-      "Popup.children": {
-        "description": "Menu items and optional static, non-interactive content rendered inside the popup."
-      },
-      "Popup.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)."
-      },
-      "RadioGroup.label": {
-        "description": "Optional accessible group label rendered with `Menu.GroupLabel`."
-      },
-      "RadioItem.addon": {
-        "description": "Decorative leading node rendered before the item label."
-      },
-      "RadioItem.note": {
-        "description": "End-aligned secondary text (e.g. keyboard shortcut) before the check indicator. Rendered muted `x-small`."
-      },
-      "RadioItem.sentiment": {
-        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
-      },
-      "SubmenuTrigger.addon": {
-        "description": "Decorative leading node rendered before the item label."
-      },
-      "SubmenuTrigger.sentiment": {
-        "description": "Visual sentiment. `destructive` uses highlight-red wash + text."
-      }
-    }
-  }
-}

package/dist/components/meter/meter.guide.json

@@ -1,52 +0,0 @@
-{
-  "name": "Meter",
-  "baseUIApi": "https://base-ui.com/react/components/meter#api-reference",
-  "structure": "<Meter value={40} />",
-  "summary": "Shows a determinate metric in a compact horizontal track for static capacity, level, or score values.",
-  "whenToUse": [
-    "Use for storage usage, battery level, capacity, or score within a known range.",
-    "Use with a label when the metric needs a visible name.",
-    "Use with `renderValue` when the formatted value should appear beside the label."
-  ],
-  "whenNotToUse": [
-    "Use LinearProgress for in-progress tasks or indeterminate work.",
-    "Use Slider when the user needs to choose or adjust a value.",
-    "Use Spinner for a small standalone loading affordance without metric context."
-  ],
-  "accessibility": [
-    "Provide a visible `label` or an accessible name through `aria-label` / `aria-labelledby` when the metric is not otherwise clear.",
-    "Keep `value` numeric and within `min` / `max` for accurate `aria-valuenow` semantics.",
-    "Use `description` for supplementary context that should not replace the accessible name."
-  ],
-  "antiPatterns": [
-    "Do not use Meter as an interactive value control.",
-    "Do not use Meter for indeterminate or in-progress work.",
-    "Do not hide the metric label when multiple meters are visible.",
-    "Do not model invalid or disabled meter state; Base UI Meter does not expose those states."
-  ],
-  "related": ["LinearProgress", "Slider", "Text"],
-  "properties": {
-    "react": {
-      "description": {
-        "description": "Static helper copy rendered with `Text` below the meter track."
-      },
-      "label": {
-        "description": "Visible label rendered through `Meter.Label` with shared internal `FieldLabel`."
-      },
-      "renderValue": {
-        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting, or a function matching `Meter.Value` `children` to customize the printed label."
-      }
-    },
-    "css": {
-      "indicator-color": {
-        "description": "Determinate meter indicator color."
-      },
-      "track-background": {
-        "description": "Meter track background color."
-      },
-      "track-size": {
-        "description": "Meter track thickness on the root."
-      }
-    }
-  }
-}

package/dist/components/popover/popover.guide.json

@@ -1,58 +0,0 @@
-{
-  "name": "Popover",
-  "baseUIApi": "https://base-ui.com/react/components/popover#api-reference",
-  "structure": "<Popover>\n  <Popover.Trigger />\n  <Popover.Sheet unstyled>\n    <Popover.Title>…</Popover.Title>\n    <Popover.Description>…</Popover.Description>\n    …\n    <Popover.Close />\n  </Popover.Sheet>\n</Popover>",
-  "summary": "Compound popover built on Base UI Popover with `Popover.Trigger`, `Popover.Sheet`, `Popover.Close`, `Popover.Title`, `Popover.Description`, and `Popover.createHandle` for detached and multiple triggers; `Sheet` encapsulates Portal + Positioner + Popup + Viewport + Title + Description and animates position, size, and content between triggers; `Sheet` with `unstyled` skips the built-in Surface and header so the consumer composes the popup chrome, including `Popover.Title` and `Popover.Description`.",
-  "whenToUse": [
-    "Anchored quick actions or contextual hints next to a triggering control",
-    "Lightweight forms or confirmations that float beside the trigger without blocking the page",
-    "Multi-trigger panels that swap content with direction-aware animations using `Popover.createHandle` and trigger `payload`",
-    "Hover-revealed hints via `openOnHover` with `delay` and `closeDelay`",
-    "Fully custom popup chrome via `Sheet` `unstyled` composed with `Popover.Title` and `Popover.Description`",
-    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
-  ],
-  "whenNotToUse": [
-    "Modal tasks that must block the page and demand focused attention (use Dialog)",
-    "Nested drill-down sheet flows (use Dialog)",
-    "System-wide transient alerts and confirmations (use Toast)"
-  ],
-  "accessibility": [
-    "Always pass `title`; add `description` when the heading alone is not enough context",
-    "With `unstyled`, render `Popover.Title` inside `children` (and `Popover.Description` when needed) so the popup keeps an accessible name",
-    "Compose `Popover.Close` with an accessible name when a visible close control is needed, or set `showCloseButton` for the built-in one",
-    "Use `modal` to control focus trap and outside interaction; render a `Popover.Close` inside the popup when `modal` is `true` or `'trap-focus'` so touch screen readers can escape"
-  ],
-  "antiPatterns": [
-    "Opening a popover without `title` copy for assistive technologies",
-    "Rendering heavy or scroll-bound content that belongs in a Dialog",
-    "Expecting `Popover.Arrow` (it is intentionally not exported or rendered)"
-  ],
-  "related": ["Surface", "Button", "IconButton", "Stack", "Dialog", "Tabs"],
-  "properties": {
-    "react": {
-      "Sheet.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)."
-      },
-      "Sheet.description": {
-        "description": "Supporting copy announced with the title."
-      },
-      "Sheet.headerAlign": {
-        "description": "Aligns the header content."
-      },
-      "Sheet.showCloseButton": {
-        "description": "Whether to show the built-in flat IconButton close control."
-      },
-      "Sheet.title": {
-        "description": "Accessible popover title rendered as the popup heading."
-      },
-      "Sheet.unstyled": {
-        "description": "Whether to skip the built-in Surface, header, and close chrome and render only the positioning/animation shell (Portal + Positioner + Popup + Viewport)."
-      }
-    },
-    "css": {
-      "content-fade-duration": {
-        "description": "content fade duration custom property on the component root."
-      }
-    }
-  }
-}

package/dist/components/progressive-blur/progressive-blur.guide.json

@@ -1,50 +0,0 @@
-{
-  "name": "ProgressiveBlur",
-  "structure": "<ProgressiveBlur />",
-  "summary": "Decorative stacked backdrop-filter overlay that ramps blur from one edge toward the opposite edge.",
-  "whenToUse": [
-    "Edge scrims on cards, sheets, heroes, or scroll regions where content should fade into blur",
-    "Glass or vibrant surfaces that need directional legibility without a hard blur cutoff",
-    "Decorative atmosphere where the parent owns semantics and layout positioning"
-  ],
-  "whenNotToUse": [
-    "Standalone loading or status feedback without a labeled parent region",
-    "Large full-viewport stacks with many simultaneous high-radius blur layers",
-    "Cases where a single uniform backdrop blur is sufficient"
-  ],
-  "accessibility": [
-    "ProgressiveBlur is decorative — the root hardcodes `aria-hidden=\"true\"` (not overridable via props)",
-    "Parent surface or region must expose any meaningful label or busy state",
-    "Consumer must position the root non-static (for example `position: relative`/`absolute`/`fixed`) and own inset, z-index, and sizing — ProgressiveBlur does not create a containing block"
-  ],
-  "antiPatterns": [
-    "Stacking many full-viewport ProgressiveBlur instances on one screen",
-    "Driving layout size or scroll behavior from inside the overlay component",
-    "Embedding layout positioning rules inside the component stylesheet",
-    "Leaving the ProgressiveBlur root `position: static` so absolute layers escape the intended overlay box"
-  ],
-  "related": ["Surface", "StaticNoise"],
-  "properties": {
-    "react": {
-      "blur": {
-        "description": "Sets the maximum blur radius applied to the first layer at the selected edge.",
-        "refCss": "amount"
-      },
-      "direction": {
-        "description": "Selects the edge where maximum blur starts and fades toward the opposite edge."
-      },
-      "easing": {
-        "description": "Selects the easing curve used to distribute blur factors across internal layers."
-      },
-      "steps": {
-        "description": "Sets the number of internal blur layers. Values are clamped to `2..16`."
-      }
-    },
-    "css": {
-      "amount": {
-        "description": "Sets the maximum blur radius applied to the first layer at the selected edge.",
-        "refReact": "blur"
-      }
-    }
-  }
-}