{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "visually-hidden",
  "type": "registry:ui",
  "title": "Visually Hidden",
  "description": "A `<span>` that is invisible on screen but still read by assistive tech — the component form of the `sr-only` utility.",
  "author": "ofri-peretz <https://github.com/ofri-peretz>",
  "categories": [
    "a11y",
    "primitive"
  ],
  "dependencies": [],
  "registryDependencies": [
    "https://ds.interlace.tools/r/theme.json",
    "https://ds.interlace.tools/r/cn.json"
  ],
  "files": [
    {
      "path": "registry/interlace-ui/visually-hidden.tsx",
      "target": "components/ui/visually-hidden.tsx",
      "type": "registry:ui",
      "content": "import * as React from 'react';\n\n// @interlace/visually-hidden v1.1.0 — Interlace design system.\n// Docs, props and live preview: https://ds.interlace.tools/c/visually-hidden\n// What changed since: https://ds.interlace.tools/c/visually-hidden#history\n// Generated banner — keep it, the upgrade diff reads this version.\n\n/**\n * @interlace/ui — VisuallyHidden\n *\n * A `<span>` that is invisible on screen but still read by assistive tech —\n * the component form of the `sr-only` utility.\n *\n * Use it for the labels and inline context a sighted reader gets from layout\n * and a screen-reader user does not, like \"(opens in a new tab)\" beside an\n * external-link icon.\n *\n * Different from `display: none` and `visibility: hidden` — those remove\n * the node from the accessibility tree. This uses the canonical \"sr-only\"\n * positioning hack (1px × 1px clipped, off-screen) so the screen reader\n * still reaches the text.\n *\n * This is the component form of Tailwind's `sr-only` utility. Use the\n * component when you want a named, slot-aware element you can target in\n * stories / tests; use the utility when you're tweaking an existing\n * element's children inline.\n *\n * ## Anatomy\n *\n *   VisuallyHidden                    (span — data-min-viewport=320)\n *     └─ children                     (the screen-reader-only text)\n *\n * One part, and always a `<span>`. There is no `as` prop and no `render`\n * seam: to hide a different element, put `className=\"sr-only\"` on it.\n *\n * ## MIN_VIEWPORT — 320\n *\n * Screen-reader contract has no viewport constraint; we declare 320 because\n * the primitive may render inside narrow layouts and the contract should\n * still hold there.\n *\n * | Rule | Concept                          | Where in this file                                          |\n * | ---- | -------------------------------- | ----------------------------------------------------------- |\n * | R4   | Extends native el                | `VisuallyHiddenProps = React.ComponentProps<'span'>`        |\n * | R6   | data-slot on root                | `data-slot=\"visually-hidden\"`                               |\n * | R7   | className merged + ...rest       | `cn('sr-only', className)` + `{...props}`                   |\n * | R14  | Declares min viewport            | `data-min-viewport={String(MIN_VIEWPORT)}` + exported const |\n * | R18  | Tailwind only                    | Zero inline `style`; `sr-only` class only                   |\n * | R19  | Tokens only                      | No color tokens — invisible primitive                        |\n * | R25  | Server component                 | No hooks → no `'use client'`                                |\n * | R26  | A11y from native el              | sr-only contract = canonical 1px-clip positioning           |\n */\n\nimport { cn } from '@/lib/utils';\n\nexport const MIN_VIEWPORT = 320 as const;\n\ntype VisuallyHiddenProps = React.ComponentProps<'span'>;\n\n/**\n * Default `<span>` element. To label a form control with a visually-hidden\n * string, wrap your `<label htmlFor>` content with VisuallyHidden — the\n * outer span doesn't break label semantics; the inner text is still read.\n * For paragraph-level hidden content, wrap in a `<p className=\"sr-only\">`\n * directly (the utility is part of the DS preflight).\n */\nexport const VisuallyHidden = React.forwardRef<\n  HTMLSpanElement,\n  VisuallyHiddenProps\n>(({ className, children, ...props }, ref) => (\n  <span\n    ref={ref}\n    data-slot=\"visually-hidden\"\n    data-min-viewport={String(MIN_VIEWPORT)}\n    className={cn('sr-only', className)}\n    {...props}\n  >\n    {children}\n  </span>\n));\nVisuallyHidden.displayName = 'VisuallyHidden';\n"
    }
  ],
  "meta": {
    "tier": "primitive",
    "client": false,
    "minViewport": 320,
    "loading": false,
    "version": "1.1.0",
    "since": "1.0.0"
  },
  "docs": "## @interlace/visually-hidden\n\nInstalled to `components/ui/visually-hidden.tsx`.\n\n```tsx\nimport { /* … */ } from '@/components/ui/visually-hidden';\n```\n\nProps, a11y contract, live preview and source: https://ds.interlace.tools/c/visually-hidden\n\nRequires the `@interlace/theme` CSS baseline (installed automatically as a registry dependency)."
}