@viraui/react 2026.3.10 → 2026.4.0

package/dist/components/radio/radio.guide.json

@@ -1,65 +0,0 @@
-{
-  "name": "Radio",
-  "baseUIApi": "https://base-ui.com/react/components/radio#api-reference",
-  "structure": "<RadioGroup>\n  <Radio value=\"…\" label=\"…\" />\n</RadioGroup>",
-  "summary": "Mutually exclusive choice within a RadioGroup, with optional per-option label and helper text.",
-  "whenToUse": [
-    "Single selection from a small set of related options inside RadioGroup",
-    "RadioGroup alone inside Field.Root when each Radio has its own label and no shared group legend is needed",
-    "Field.Root > Fieldset render={<RadioGroup<Value> />} when the group needs a shared legend, description, or error",
-    "Card-style or custom layouts where each option is wrapped in Surface or consumer markup",
-    "Typed option unions with RadioGroup<'ssd' | 'hdd'> for value, defaultValue, and onValueChange safety"
-  ],
-  "whenNotToUse": [
-    "Independent boolean toggles (use Checkbox or Switch)",
-    "Multi-select sets (use CheckboxGroup)",
-    "Options rendered outside a RadioGroup wrapper",
-    "Assuming Fieldset is mandatory for every RadioGroup — add Fieldset only for shared legend or group copy",
-    "Group legend, description, or validation on RadioGroup props — use Field.Root and Fieldset instead"
-  ],
-  "accessibility": [
-    "Wrap options in RadioGroup so the group exposes a shared name",
-    "Provide visible label or aria-label on each option so radios have accessible names",
-    "Surface group invalid state and error copy through Field.Root and Fieldset, not individual Radio options"
-  ],
-  "antiPatterns": [
-    "Rendering Radio outside RadioGroup",
-    "Putting invalid or error on a single Radio instead of the enclosing Field.Root and Fieldset",
-    "Omitting the RadioGroup generic when option value props form a restricted union",
-    "Importing @viraui/react/radio/radio.css or other component CSS subpaths in consumer bootstrap"
-  ],
-  "related": ["Fieldset", "Checkbox", "Surface", "Stack"],
-  "properties": {
-    "react": {
-      "description": {
-        "description": "Helper copy rendered with `Field.Description` and `Text` for this option."
-      },
-      "hPadding": {
-        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
-      },
-      "label": {
-        "description": "Visible label rendered with shared internal `FieldLabel`."
-      },
-      "size": {
-        "description": "Controls the visual radio size."
-      },
-      "vPadding": {
-        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Radio control background color."
-      },
-      "border-color": {
-        "description": "Radio control border color; resting default is transparent (same as Checkbox); checked, invalid, and disabled states override."
-      },
-      "indicator-color": {
-        "description": "Radio selected-disk indicator color."
-      },
-      "size": {
-        "description": "Radio control size; size presets adjust footprint."
-      }
-    }
-  }
-}

package/dist/components/select/select.guide.json

@@ -1,105 +0,0 @@
-{
-  "name": "Select",
-  "baseUIApi": "https://base-ui.com/react/components/select#api-reference",
-  "structure": "<Select>\n  <Select.Option value=\"…\">…</Select.Option>\n  <Select.Group label=\"…\">\n    <Select.Option value=\"…\">…</Select.Option>\n  </Select.Group>\n  <Select.Separator />\n</Select>",
-  "summary": "Field-wrapped single-select dropdown with grouped options and field copy.",
-  "whenToUse": [
-    "Choose one value from a predefined list with label and helper copy",
-    "Grouped or separated option lists",
-    "Rich option rows with a leading decorative addon and multi-line label content",
-    "Trigger chrome aligned with Textfield control shell",
-    "Select fields inside Fieldset when they share a section legend with other inputs",
-    "Custom portal host (iframe preview, shadow root, or app overlay root) via `container` on the portal-owning public part"
-  ],
-  "whenNotToUse": [
-    "Multiple selection",
-    "Free-form filterable suggestions — use Autocomplete",
-    "Combobox selection state, or custom anchor positioning",
-    "Wrapping a lone Select in Fieldset when its own label is sufficient"
-  ],
-  "accessibility": [
-    "Provide label or aria-label on the trigger so the field has an accessible name",
-    "Wire description and error copy through the field pattern so assistive tech gets helper text",
-    "Keep list options keyboard reachable; do not trap focus outside the popup pattern"
-  ],
-  "antiPatterns": [
-    "Expecting multi-select or combobox behavior",
-    "Leaving the trigger without label or aria-label",
-    "Never set the size prop (if present) of Buttons, IconButtons or other interactive elements passed as addon other than small",
-    "Using the Select component as a combobox, use Autocomplete instead.",
-    "Leaving alignListWithTrigger enabled when options have a leading addon"
-  ],
-  "related": ["Autocomplete", "Fieldset", "Textfield", "Stack", "Surface", "Icon"],
-  "properties": {
-    "react": {
-      "addon": {
-        "description": "Trigger addon rendered inside `Select.Icon`. Pass any React node; use a named icon from `@viraui/icons/react` for content icons."
-      },
-      "alignListWithTrigger": {
-        "description": "When `true`, aligns the list popup width with the trigger via Base UI `alignItemWithTrigger`. Prefer `false` when options use a leading `addon`."
-      },
-      "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."
-      },
-      "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."
-      },
-      "Group.label": {
-        "description": "Accessible group label rendered with `Select.GroupLabel`."
-      },
-      "label": {
-        "description": "Visible label rendered with shared internal `FieldLabel`."
-      },
-      "modal": {
-        "description": "When `true`, open select locks page scroll and blocks outside pointer interaction (Base UI modal). Vira defaults to non-modal so the page stays scrollable."
-      },
-      "Option.addon": {
-        "description": "Decorative leading node rendered before the option label."
-      },
-      "Option.addonAlign": {
-        "description": "Vertical alignment of the addon relative to the option label row."
-      },
-      "Option.indicator": {
-        "description": "Custom indicator node rendered when the option is selected."
-      },
-      "placeholder": {
-        "description": "Placeholder text shown in the trigger when no value is selected."
-      },
-      "ref": {
-        "description": "Ref forwarded to the select trigger button."
-      }
-    },
-    "css": {
-      "control-group-background": {
-        "description": "Trigger background fill."
-      },
-      "control-group-border-color": {
-        "description": "Trigger border color; invalid state overrides."
-      },
-      "control-group-border-radius": {
-        "description": "Trigger corner radius."
-      },
-      "control-group-color": {
-        "description": "Trigger text and icon color."
-      },
-      "input-height": {
-        "description": "Select trigger block size."
-      },
-      "list-border-radius": {
-        "description": "list border radius custom property on the component root."
-      },
-      "list-padding": {
-        "description": "list padding custom property on the component root."
-      },
-      "trigger-padding-inline-end": {
-        "description": "Trigger inline-end padding."
-      },
-      "trigger-padding-inline-start": {
-        "description": "Trigger inline-start padding."
-      }
-    }
-  }
-}

package/dist/components/separator/separator.guide.json

@@ -1,58 +0,0 @@
-{
-  "name": "Separator",
-  "structure": "<Separator />",
-  "summary": "Thematic or content divider with horizontal or vertical orientation, token padding, and preset line thickness.",
-  "whenToUse": [
-    "Dividing sections within a page or panel",
-    "Vertical dividers in toolbars, menus, or button groups",
-    "Separating list items or stacked content blocks"
-  ],
-  "whenNotToUse": [
-    "Select dropdown option dividers — use Select.Separator",
-    "Surface borders or card outlines — use Surface border props"
-  ],
-  "accessibility": [
-    "Standalone line is a native hr (implicit separator); orientation is visual via data-separator-orientation and Stack direction",
-    "Menu.Separator / Select.Separator own a11y through Base UI (Menu: role separator + aria-orientation; Select listbox: role presentation)",
-    "Use render to swap the line root element when needed"
-  ],
-  "antiPatterns": [
-    "Using Select.Separator for general layout dividers",
-    "Replacing Surface borders with Separator for container chrome"
-  ],
-  "related": ["Stack", "Surface", "Select"],
-  "properties": {
-    "react": {
-      "borderStyle": {
-        "description": "Sets the separator line border style through `--vui-separator-border-style`.",
-        "refCss": "border-style"
-      },
-      "hPadding": {
-        "description": "Sets inline padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
-      },
-      "orientation": {
-        "description": "Sets the separator line direction."
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered line root element."
-      },
-      "render": {
-        "description": "Replaces the default `hr` line root using Base UI render semantics."
-      },
-      "size": {
-        "description": "Sets the line thickness preset."
-      },
-      "vPadding": {
-        "description": "Sets block padding on the Stack wrapper using one token for both sides or a `[start, end]` tuple."
-      }
-    },
-    "css": {
-      "border-style": {
-        "description": "Separator line border style."
-      },
-      "size": {
-        "description": "Separator line thickness."
-      }
-    }
-  }
-}

package/dist/components/shimmer/shimmer.guide.json

@@ -1,67 +0,0 @@
-{
-  "name": "Shimmer",
-  "structure": "<Shimmer>…</Shimmer>",
-  "summary": "Decorative inline text shimmer that inherits typography and color from a parent text primitive.",
-  "whenToUse": [
-    "Loading placeholder copy inside Text or Title",
-    "Animated text shimmer while awaiting async content",
-    "Muted loading labels that keep the final text dimensions"
-  ],
-  "whenNotToUse": [
-    "Block or fixed-dimension placeholders without text content",
-    "Standalone accessible loading status without a surrounding aria-busy region",
-    "Replacing Skeleton for non-text layout placeholders"
-  ],
-  "accessibility": [
-    "Shimmer renders real text content — do not mark it aria-hidden",
-    "Announce loading on the surrounding region with aria-busy or live text",
-    "Reduced motion disables the sweep and restores normal text rendering"
-  ],
-  "antiPatterns": [
-    "Putting aria-busy on Shimmer instead of the surrounding loading region",
-    "Using Shimmer without children text content",
-    "Using Shimmer for block placeholders better served by Skeleton"
-  ],
-  "related": ["Text", "Title", "Skeleton"],
-  "properties": {
-    "react": {
-      "angle": {
-        "description": "Sets the shimmer gradient angle offset using any valid CSS angle string.",
-        "refCss": "angle"
-      },
-      "duration": {
-        "description": "Sets the shimmer sweep duration using any valid CSS time string.",
-        "refCss": "duration"
-      },
-      "highlightColor": {
-        "description": "Overrides the shimmer highlight color when relative base lightness tuning is not used.",
-        "refCss": "highlight"
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered shimmer root element."
-      },
-      "spread": {
-        "description": "Sets the shimmer highlight spread using any valid CSS length string.",
-        "refCss": "spread"
-      }
-    },
-    "css": {
-      "angle": {
-        "description": "Shimmer gradient angle offset.",
-        "refReact": "angle"
-      },
-      "duration": {
-        "description": "Shimmer animation duration.",
-        "refReact": "duration"
-      },
-      "highlight": {
-        "description": "Shimmer highlight color.",
-        "refReact": "highlightColor"
-      },
-      "spread": {
-        "description": "Shimmer highlight spread width.",
-        "refReact": "spread"
-      }
-    }
-  }
-}

package/dist/components/skeleton/skeleton.guide.json

@@ -1,98 +0,0 @@
-{
-  "name": "Skeleton",
-  "structure": "<Skeleton />\n<Skeleton.Overlay>…</Skeleton.Overlay>",
-  "summary": "Decorative opacity pulse block sized by props, or Overlay sized by hidden child content.",
-  "whenToUse": [
-    "Fixed-dimension pulse blocks while content loads",
-    "Avatar or media placeholders with explicit width and height",
-    "Skeleton.Overlay when placeholder layout should match incoming typography without layout shift",
-    "View-transition wipe reveal for `Skeleton.Overlay`, with `viewTransitionName: 'skeleton-overlay'` on the wrapper around skeleton+loaded content (prefer CSS class, not inline style)"
-  ],
-  "whenNotToUse": [
-    "Inline text shimmer effects (use Shimmer)",
-    "Standalone accessible loading status without a surrounding aria-busy region"
-  ],
-  "accessibility": [
-    "Skeleton and Skeleton.Overlay are decorative (aria-hidden) — announce loading on the surrounding region with aria-busy or live text",
-    "Overlay children stay aria-hidden; the parent loading region owns busy state",
-    "Do not put aria-busy on Skeleton itself",
-    "Replace skeleton with real content as soon as data is ready",
-    "prefers-reduced-motion disables the pulse animation and keeps a static surface"
-  ],
-  "antiPatterns": [
-    "Using Skeleton.Overlay without real content structure to size against",
-    "Putting aria-busy on Skeleton instead of the surrounding loading region",
-    "Expecting view-transition wipe without wrapper `viewTransitionName: 'skeleton-overlay'` (prefer CSS class, not inline style)"
-  ],
-  "related": ["Avatar", "Shimmer"],
-  "properties": {
-    "react": {
-      "animate": {
-        "description": "Enables the opacity pulse animation."
-      },
-      "radius": {
-        "description": "Sets the corner radius from the Vira radius token scale.",
-        "refCss": "border-radius"
-      },
-      "duration": {
-        "description": "Sets the pulse duration from the Vira duration token scale.",
-        "refCss": "duration"
-      },
-      "height": {
-        "description": "Sets the skeleton block size using any valid CSS size string."
-      },
-      "minHeight": {
-        "description": "Sets the skeleton minimum block size using any valid CSS size string."
-      },
-      "minWidth": {
-        "description": "Sets the skeleton minimum inline size using any valid CSS size string."
-      },
-      "Overlay.animate": {
-        "description": "Enables the opacity pulse animation on the overlay root."
-      },
-      "Overlay.radius": {
-        "description": "Sets the overlay corner radius from the Vira radius token scale.",
-        "refCss": "border-radius"
-      },
-      "Overlay.children": {
-        "description": "Content whose layout and dimensions define the overlay bounding box."
-      },
-      "Overlay.duration": {
-        "description": "Sets the pulse duration from the Vira duration token scale.",
-        "refCss": "duration"
-      },
-      "Overlay.ref": {
-        "description": "Ref forwarded to the rendered overlay root element."
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered skeleton root element."
-      },
-      "width": {
-        "description": "Sets the skeleton inline size using any valid CSS size string."
-      }
-    },
-    "css": {
-      "background": {
-        "description": "Skeleton placeholder background color."
-      },
-      "block-size": {
-        "description": "Skeleton block size."
-      },
-      "border-radius": {
-        "description": "Skeleton corner radius."
-      },
-      "duration": {
-        "description": "Pulse duration."
-      },
-      "inline-size": {
-        "description": "Skeleton inline size."
-      },
-      "min-block-size": {
-        "description": "Skeleton minimum block size."
-      },
-      "min-inline-size": {
-        "description": "Skeleton minimum inline size."
-      }
-    }
-  }
-}

package/dist/components/slider/slider.guide.json

@@ -1,64 +0,0 @@
-{
-  "name": "Slider",
-  "baseUIApi": "https://base-ui.com/react/components/slider#api-reference",
-  "structure": "<Slider />",
-  "summary": "Field-wrapped range input supporting single-thumb or two-thumb range selection.",
-  "whenToUse": [
-    "Numeric value selection on a horizontal or vertical axis",
-    "Range selection with two thumbs",
-    "Field label, description, and error copy like Textfield"
-  ],
-  "whenNotToUse": [
-    "Fixed pixel track lengths — Slider fills its container",
-    "Custom size or variant props — single medium treatment"
-  ],
-  "accessibility": [
-    "Provide label or aria-label; when label is omitted, name thumbs with thumbLabel",
-    "Range sliders need distinct accessible names for each thumb",
-    "Keep keyboard adjustment and value feedback available through native slider semantics"
-  ],
-  "antiPatterns": [
-    "Wrapping Slider.Control and Slider.Value in extra layout inside Slider.Root",
-    "Overriding Slider.Indicator position in CSS"
-  ],
-  "related": ["Textfield", "Stack", "Text"],
-  "properties": {
-    "react": {
-      "description": {
-        "description": "Helper copy rendered with `Field.Description` and `Text` while the field is valid."
-      },
-      "error": {
-        "description": "Error copy rendered with `Field.Error` and `Text` in the same slot as `description`."
-      },
-      "label": {
-        "description": "Visible label rendered with shared internal `FieldLabel`."
-      },
-      "required": {
-        "description": "Marks the slider as required and shows a required indicator on the label."
-      },
-      "renderValue": {
-        "description": "Shows the current value beside the label. Pass `true` for Base UI default formatting inside styled `Text`, or a function matching `Slider.Value` `children` to own the value slot (no `Text`)."
-      },
-      "thumbAriaLabel": {
-        "description": "Accessible name for the thumb when `label` is omitted. Pass a string to name the first thumb (single-thumb slider, or the minimum thumb on a range). Pass a two-element tuple to name each range thumb in order; on a single-thumb slider only the first tuple value is applied."
-      }
-    },
-    "css": {
-      "progress-background": {
-        "description": "Slider filled progress color."
-      },
-      "thumb-background": {
-        "description": "Slider thumb fill color."
-      },
-      "thumb-size": {
-        "description": "Slider thumb size."
-      },
-      "track-background": {
-        "description": "Slider track background color."
-      },
-      "track-size": {
-        "description": "Slider track thickness."
-      }
-    }
-  }
-}

package/dist/components/spinner/spinner.guide.json

@@ -1,43 +0,0 @@
-{
-  "name": "Spinner",
-  "structure": "<Spinner aria-hidden />",
-  "summary": "Decorative SVG pulsing loading indicator used inside interactive components.",
-  "whenToUse": [
-    "Inline loading overlay inside Button or IconButton",
-    "Decorative in-progress indicator explicitly hidden from assistive technology",
-    "Loading feedback where the parent exposes the accessible status"
-  ],
-  "whenNotToUse": [
-    "Standalone accessible loading status without explicit labeling on a parent",
-    "Page-level loading when a labeled region is not provided"
-  ],
-  "accessibility": [
-    "Set aria-hidden on decorative Spinner instances; the component does not hide itself by default",
-    "Parent control or region must expose loading with aria-busy or visible status text",
-    "Do not use Spinner alone as the only page-level loading announcement",
-    "Keep the control label stable while loading overlays appear"
-  ],
-  "antiPatterns": [
-    "Using Spinner alone as the only loading announcement for a page",
-    "Embedding animation rules outside the component stylesheet"
-  ],
-  "related": ["Button", "IconButton"],
-  "properties": {
-    "react": {
-      "color": {
-        "description": "Overrides the spinner fill color."
-      },
-      "size": {
-        "description": "Sets the rendered spinner size."
-      },
-      "variant": {
-        "description": "Visual animation style."
-      }
-    },
-    "css": {
-      "size": {
-        "description": "Spinner glyph size on the root."
-      }
-    }
-  }
-}

package/dist/components/stack/stack.guide.json

@@ -1,116 +0,0 @@
-{
-  "name": "Stack",
-  "structure": "<Stack>…</Stack>",
-  "summary": "Flex layout primitive for arranging children with token spacing, alignment, and padding; optionally enables a named CSS container query context (`stack`) via `enableContainer`.",
-  "whenToUse": [
-    "Column or row layouts with token gap and alignment",
-    "Composing screens and component internals without custom flex CSS",
-    "Custom native root through render while keeping data-stack hooks",
-    "Style descendants with `@container stack` queries when layout, gap, or typography should respond to the Stack's own inline-size instead of the viewport (set `enableContainer` on the Stack you're querying)",
-    "Centered max-width shells: parent `hAlign=\"center\"` + child `fullWidth` + `maxWidth`"
-  ],
-  "whenNotToUse": [
-    "Cases where a single component already owns required flex chrome",
-    "Expecting direct children to grow on the main axis without setting `expandChildren`",
-    "Expecting this stack to fill parent inline size under non-stretch alignment without `fullWidth` (or an explicit `inlineSize`)",
-    "Using `enableContainer` inside complex masonry-like layouts when you don't need container queries (inline-size containment can change nested layout)"
-  ],
-  "accessibility": [
-    "Stack is presentational — choose render roots that preserve correct semantics (button, list, heading)",
-    "Keep reading order aligned with visual order when using direction and wrap",
-    "Do not use Stack alone to imply grouping; use landmarks or headings where needed"
-  ],
-  "antiPatterns": [
-    "Assuming Stack expands direct children by default — pass `expandChildren` when children should grow along the flex main axis",
-    "Using `expandChildren` to fill parent width under `hAlign=\"center\"` — that is `fullWidth` on the child stack (self `inline-size`), not child flex-grow",
-    "Putting `data-grow=\"false\"` on an ancestor to control nested expandChildren — set it on the child that should not grow",
-    "Re-declaring primitive flex container rules in app CSS when Stack can own the layout",
-    "Using viewport media queries when @container stack queries against the rendered Stack inline-size would match the design intent",
-    "Combining `fullWidth` with `inline` — prefer block flex when the root must fill parent inline size"
-  ],
-  "related": ["Surface", "Text", "Button"],
-  "properties": {
-    "react": {
-      "columnGap": {
-        "description": "Sets the gap between flex columns using the Vira space token scale."
-      },
-      "enableContainer": {
-        "description": "Opt-in named CSS container query context for this Stack (enables `container: stack / inline-size` on the root via `data-stack-container`). Required for `@container stack (min-width: ...)` rules to react to this Stack inline-size. Warning: inline-size containment can affect nested layout (e.g. cards inside Masonry). Use only when you need container queries against this specific Stack."
-      },
-      "direction": {
-        "description": "Renders children across rows or columns using the chosen flex direction."
-      },
-      "expandChildren": {
-        "description": "Makes direct children grow along the flex main axis (`flex-grow`). Default `false`. Orthogonal to `fullWidth` (children grow vs this root's inline size). A child opts out with its own `data-grow=\"false\"`; ancestor `data-grow` does not inherit into nested stacks."
-      },
-      "fullWidth": {
-        "description": "Sets `inline-size: 100%` on the stack root so it fills the parent's inline size. Default `false`. Use with `maxWidth` under a parent `hAlign=\"center\"` for a fluid capped centered shell. Does not grow children — use `expandChildren` for that."
-      },
-      "hAlign": {
-        "description": "Aligns content on the horizontal axis from the consumer point of view."
-      },
-      "hPadding": {
-        "description": "Sets inline padding using one token for both sides or a `[start, end]` tuple."
-      },
-      "inline": {
-        "description": "Displays the stack as `inline-flex` instead of `flex`."
-      },
-      "maxWidth": {
-        "description": "Applies a maximum width value to the stack root."
-      },
-      "minWidth": {
-        "description": "Applies a minimum width value to the stack root."
-      },
-      "ref": {
-        "description": "Ref forwarded to the rendered stack root element."
-      },
-      "render": {
-        "description": "Replaces the default `div` root using Base UI render semantics."
-      },
-      "rowGap": {
-        "description": "Sets the gap between flex rows using the Vira space token scale."
-      },
-      "vAlign": {
-        "description": "Aligns content on the vertical axis from the consumer point of view."
-      },
-      "vPadding": {
-        "description": "Sets block padding using one token for both sides or a `[start, end]` tuple."
-      },
-      "wrap": {
-        "description": "Allows direct children to wrap onto additional lines when space is constrained."
-      }
-    },
-    "css": {
-      "column-gap": {
-        "description": "Flex column gap on the root."
-      },
-      "h-align": {
-        "description": "Logical horizontal flex alignment hook."
-      },
-      "max-width": {
-        "description": "Max inline size of the stack root."
-      },
-      "min-width": {
-        "description": "Min inline size of the stack root."
-      },
-      "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": "Flex row gap on the root."
-      },
-      "v-align": {
-        "description": "Logical vertical flex alignment hook."
-      }
-    }
-  }
-}

package/dist/components/static-noise/static-noise.guide.json

@@ -1,44 +0,0 @@
-{
-  "name": "StaticNoise",
-  "structure": "<StaticNoise />",
-  "summary": "Decorative SVG turbulence noise overlay for textured surfaces and hero sections. Memory-heavy — use sparingly (rarely).",
-  "whenToUse": [
-    "Subtle grain or texture overlay on cards, panels, or hero sections",
-    "Glass or vibrant surfaces that need visual depth without extra content",
-    "Decorative atmosphere where the parent owns semantics and layout positioning"
-  ],
-  "whenNotToUse": [
-    "Default decoration on many surfaces — memory cost is high; reserve for rare focal moments",
-    "Standalone loading or status feedback without a labeled parent region",
-    "Critical readable content where contrast has not been verified",
-    "Large numbers of simultaneous full-viewport overlays on the same page"
-  ],
-  "accessibility": [
-    "StaticNoise 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 owns position, inset, z-index, and sizing for the overlay placement"
-  ],
-  "antiPatterns": [
-    "Treating StaticNoise as cheap wallpaper — it is memory-heavy; prefer few instances",
-    "Stacking many full-viewport StaticNoise instances on one screen",
-    "Using StaticNoise as the only loading announcement for a page",
-    "Embedding layout positioning rules inside the component stylesheet"
-  ],
-  "related": ["Surface", "Skeleton"],
-  "properties": {
-    "react": {
-      "animate": {
-        "description": "Animates the internal turbulence filter by cycling `feTurbulence` seed values."
-      },
-      "baseFrequency": {
-        "description": "Sets the SVG turbulence `baseFrequency` for the internal noise filter."
-      },
-      "mixBlendMode": {
-        "description": "Sets the rendered overlay mix blend mode."
-      },
-      "opacity": {
-        "description": "Sets the rendered overlay opacity."
-      }
-    }
-  }
-}