[ { "name": "Button", "package": "@wizeworks/silicaui-react", "category": "Actions", "sourceFile": "silicaui-react/src/button.tsx", "description": "Silica Button — a thin wrapper that applies Silica's `btn` classes. It's a presentational component, so it doesn't pull in a headless primitive; the `render` prop covers polymorphism.", "props": [ { "name": "ButtonProps", "extends": "extends React.ButtonHTMLAttributes", "members": [ { "name": "color", "optional": true, "type": "ButtonColor", "doc": "Semantic or custom color; maps to `btn-`." }, { "name": "variant", "optional": true, "type": "ButtonVariant", "doc": "How the color is applied. Default `solid`." }, { "name": "size", "optional": true, "type": "ButtonSize", "doc": "Default `md`." }, { "name": "shape", "optional": true, "type": "\"square\" | \"circle\"", "doc": "Icon-only button shape." }, { "name": "block", "optional": true, "type": "boolean", "doc": "Full-width." }, { "name": "wide", "optional": true, "type": "boolean", "doc": "Extra-wide." }, { "name": "active", "optional": true, "type": "boolean", "doc": "Force the pressed look." }, { "name": "loading", "optional": true, "type": "boolean", "doc": "Show a spinner, set `aria-busy`, and make the button non-interactive." }, { "name": "iconStart", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "iconEnd", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "render", "optional": true, "type": "React.ReactElement", "doc": "Render as a different element (e.g. an anchor or router link) while keeping Silica's classes and behavior. Mirrors Base UI's `render` composition model. CLIENT COMPONENTS ONLY. This package is a `\"use client\"` module, so an element passed from a React Server Component is serialized across the boundary and arrives without its props — the link renders styled but without its `href`, or throws outright. From a Server Component, style the element directly instead of composing it: import { buttonClasses } from \"@wizeworks/silicaui-react/server\"; Docs" } ] } ], "usageExample": "import { useState } from \"react\";\nimport { Button } from \"@wizeworks/silicaui-react\";\nimport { Section, Row, Stack } from \"../lib/Section\";\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\nimport { PlusIcon } from \"../lib/icons\";\nimport { VARIANTS } from \"../lib/data\";\n\nexport function ButtonDemo() {\n const [loading, setLoading] = useState(false);\n\n function fakeSave() {\n setLoading(true);\n setTimeout(() => setLoading(false), 1800);\n }\n\n return (\n <>\n v !== \"solid\")}\n />\n\n
\n \n \n \n \n \n \n
\n\n
\n \n \n \n \n \n
\n\n
\">\n \n }\n >\n Anchor · link style\n \n \n \n
\n\n
\n \n \n \n \n
\n \n );\n}" }, { "name": "DropdownMenu", "package": "@wizeworks/silicaui-react", "category": "Actions", "sourceFile": "silicaui-react/src/dropdown-menu.tsx", "description": "Silica Dropdown Menu — a command menu (Base UI: roving focus, typeahead, dismissal). Distinct from the static `Menu` nav-list. Actions Edit Duplicate Archive ", "props": [ { "name": "DropdownMenuProps", "members": [] }, { "name": "DropdownMenuContentProps", "extends": "extends Omit, \"children\">,\n PositioningProps", "members": [ { "name": "children", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "side", "optional": true, "type": "DropdownMenuSide", "doc": "" }, { "name": "align", "optional": true, "type": "DropdownMenuAlign", "doc": "" }, { "name": "sideOffset", "optional": true, "type": "number", "doc": "" }, { "name": "anchor", "optional": true, "type": "BasePositionerProps[\"anchor\"]", "doc": "What to position against. Defaults to the component's own trigger. Accepts an element, a ref, a function returning either, or a VIRTUAL element — anything with `getBoundingClientRect()` — which is how you pin a popup to a pointer, a text caret, or a spot on a canvas that has no DOM node. new DOMRect(x, y, 0, 0) }} />", "inheritedFrom": "PositioningProps" }, { "name": "positionMethod", "optional": true, "type": "BasePositionerProps[\"positionMethod\"]", "doc": "`absolute` (default) or `fixed`. Use `fixed` to escape a clipping ancestor.", "inheritedFrom": "PositioningProps" }, { "name": "alignOffset", "optional": true, "type": "BasePositionerProps[\"alignOffset\"]", "doc": "Offset along the alignment axis, in px. Pairs with `align`.", "inheritedFrom": "PositioningProps" }, { "name": "collisionBoundary", "optional": true, "type": "BasePositionerProps[\"collisionBoundary\"]", "doc": "The element the popup must stay inside. Defaults to the viewport — set it to a scroll container so the popup collides with the panel, not the window.", "inheritedFrom": "PositioningProps" }, { "name": "collisionPadding", "optional": true, "type": "BasePositionerProps[\"collisionPadding\"]", "doc": "Inset from the collision boundary, in px.", "inheritedFrom": "PositioningProps" }, { "name": "collisionAvoidance", "optional": true, "type": "BasePositionerProps[\"collisionAvoidance\"]", "doc": "Which collision strategy runs per axis (`flip`, `shift`, `none`).", "inheritedFrom": "PositioningProps" }, { "name": "sticky", "optional": true, "type": "BasePositionerProps[\"sticky\"]", "doc": "Keep the popup glued to the anchor while it scrolls out of view.", "inheritedFrom": "PositioningProps" }, { "name": "arrowPadding", "optional": true, "type": "BasePositionerProps[\"arrowPadding\"]", "doc": "Minimum distance from the popup's corner to the arrow, in px.", "inheritedFrom": "PositioningProps" }, { "name": "disableAnchorTracking", "optional": true, "type": "BasePositionerProps[\"disableAnchorTracking\"]", "doc": "Stop re-measuring when the anchor moves. Cheaper, but goes stale.", "inheritedFrom": "PositioningProps" } ] } ], "usageExample": null }, { "name": "Swap", "package": "@wizeworks/silicaui-react", "category": "Actions", "sourceFile": "silicaui-react/src/swap.tsx", "description": "Silica Swap — cross-fades (or rotates/flips) between two icons on toggle. } off={} label=\"Menu\" />", "props": [ { "name": "SwapProps", "extends": "extends Omit, \"onChange\">", "members": [ { "name": "on", "optional": false, "type": "React.ReactNode", "doc": "Shown when active (checked)." }, { "name": "off", "optional": false, "type": "React.ReactNode", "doc": "Shown when inactive." }, { "name": "active", "optional": true, "type": "boolean", "doc": "Controlled active state." }, { "name": "defaultActive", "optional": true, "type": "boolean", "doc": "Initial state when uncontrolled." }, { "name": "onActiveChange", "optional": true, "type": "(active: boolean) => void", "doc": "Called when toggled." }, { "name": "variant", "optional": true, "type": "SwapVariant", "doc": "Transition style. `fade` (default), `rotate`, or `flip`." }, { "name": "label", "optional": true, "type": "string", "doc": "Accessible label." } ] } ], "usageExample": "import { useState } from \"react\";\nimport { Swap } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nfunction MenuIcon() {\n return (\n \n \n \n );\n}\nfunction CloseIcon() {\n return (\n \n \n \n );\n}\nfunction SunIcon() {\n return (\n \n \n \n \n );\n}\nfunction MoonIcon() {\n return (\n \n \n \n );\n}\n\nexport function SwapDemo() {\n const [menuOpen, setMenuOpen] = useState(false);\n\n return (\n <>\n
\n \n } off={} label=\"Fade\" />\n } off={} label=\"Rotate\" />\n } off={} label=\"Flip\" />\n \n
\n\n
\n
\n }\n off={}\n label=\"Toggle menu\"\n />\n \n Menu is {menuOpen ? \"open\" : \"closed\"}\n \n
\n
\n \n );\n}" }, { "name": "Accordion", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/accordion.tsx", "description": "Silica Accordion — collapsible sections (Base UI behavior, animated height). What is Silica? A design system on one token model. Is it themeable? Yes — every color is a token. ", "props": [ { "name": "AccordionTriggerProps", "extends": "extends Styled", "members": [ { "name": "chevron", "optional": true, "type": "boolean", "doc": "Set false to omit the built-in chevron." } ] } ], "usageExample": "import {\n Accordion,\n AccordionItem,\n AccordionTrigger,\n AccordionPanel,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function AccordionDemo() {\n return (\n <>\n
\n \n \n What is Silica?\n \n A component library and design system built on one CSS-first\n token model.\n \n \n \n Is it themeable?\n \n Yes — every color, radius, and size is a CSS variable you can\n override per theme.\n \n \n \n Does it work with any framework?\n \n The core is a Tailwind plugin; React components are a thin\n typed layer on top.\n \n \n \n
\n\n
\n \n \n Section one\n Both of these can be open together.\n \n \n Section two\n Set the `multiple` prop to allow it.\n \n \n
\n \n );\n}" }, { "name": "Avatar", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/avatar.tsx", "description": "Silica Avatar — a photo, or an initials/icon fallback on a colored chip. JD // photo, falls back to \"JD\" AL // initials chip // icon fallback `children` are the fallback shown when there's no `src` or the image errors. When falling back to initials with an `alt`, the container is exposed as an `img` with that label so assistive tech announces the person, not \"JD\".", "props": [ { "name": "AvatarProps", "extends": "extends Omit, \"color\">", "members": [ { "name": "color", "optional": true, "type": "AvatarColor", "doc": "Fallback-chip + ring color; maps to `avatar-`." }, { "name": "size", "optional": true, "type": "AvatarSize", "doc": "Default `md`." }, { "name": "shape", "optional": true, "type": "AvatarShape", "doc": "`circle` (default) or a `rounded` square." }, { "name": "ring", "optional": true, "type": "boolean", "doc": "Draw an accent ring with a base-100 gap." }, { "name": "status", "optional": true, "type": "AvatarStatus", "doc": "Presence dot in the corner." }, { "name": "src", "optional": true, "type": "string", "doc": "Photo URL. If it fails to load, the fallback `children` show instead." }, { "name": "alt", "optional": true, "type": "string", "doc": "Accessible label for the photo / the initials fallback." } ] } ], "usageExample": "import { Avatar, AvatarGroup } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\nimport { COLORS, SIZES } from \"../lib/data\";\n\n// A stand-in \"photo\" (data URI, always loads offline): a head-and-shoulders\n// silhouette on a gradient, so the image path — object-fit cover + rounding —\n// is demonstrated without a network request.\nconst PHOTO = `data:image/svg+xml,${encodeURIComponent(\n `` +\n `` +\n `` +\n `` +\n `` +\n `` +\n `` +\n ``,\n)}`;\n\nexport function AvatarDemo() {\n return (\n <>\n
\n \n {COLORS.map((color) => (\n \n {color.slice(0, 2).toUpperCase()}\n \n ))}\n \n
\n\n
\n \n {SIZES.map((size) => (\n \n {size.toUpperCase()}\n \n ))}\n \n
\n\n
\n \n \n \n GH\n \n \n AT\n \n \n KJ\n \n \n \n Overlapping group —\n \n \n \n GH\n \n \n AT\n \n \n +3\n \n \n \n
\n \n );\n}" }, { "name": "Badge", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/badge.tsx", "description": "Silica Badge — a small pill for labels, counts, and statuses. Presentational; `render` covers polymorphism (e.g. wrap a link).", "props": [ { "name": "BadgeProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "color", "optional": true, "type": "BadgeColor", "doc": "Semantic or custom color; maps to `badge-`." }, { "name": "variant", "optional": true, "type": "BadgeVariant", "doc": "How the color is applied. Default `solid`." }, { "name": "size", "optional": true, "type": "BadgeSize", "doc": "Default `md`." }, { "name": "render", "optional": true, "type": "React.ReactElement", "doc": "Render as a different element while keeping Silica's classes. CLIENT COMPONENTS ONLY — from a React Server Component the element loses its props crossing the `\"use client\"` boundary. Style the element directly instead: `badgeClasses()` from `@wizeworks/silicaui-react/server`." } ] } ], "usageExample": "import { Badge } from \"@wizeworks/silicaui-react\";\nimport { ColorVariantSizeGrid } from \"../lib/ColorGrid\";\n\nexport function BadgeDemo() {\n return (\n \n );\n}" }, { "name": "Card", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/card.tsx", "description": "Silica Card — a surface container. Compose it from parts:
\"\"
Heading

Body copy…

 ", "props": [ { "name": "CardProps", "members": [] }, { "name": "ClickableCardProps", "extends": "extends Omit, \"type\">", "members": [ { "name": "render", "optional": true, "type": "React.ReactElement", "doc": "Render as a different element (e.g. an anchor) while keeping Card's classes and interaction styles. Mirrors Base UI's `render` composition. }>… CLIENT COMPONENTS ONLY — from a React Server Component the element loses its props crossing the `\"use client\"` boundary. Style the element directly instead: `clickableCardClasses()` from `@wizeworks/silicaui-react/server`." } ] }, { "name": "SelectableCardProps", "extends": "extends Omit, \"type\" | \"size\">", "members": [ { "name": "type", "optional": true, "type": "\"radio\" | \"checkbox\"", "doc": "`\"radio\"` for a single-select group (shared `name`), `\"checkbox\"` for multi-select. Default `\"radio\"`." } ] } ], "usageExample": "import {\n Card,\n CardBody,\n CardTitle,\n CardActions,\n ClickableCard,\n SelectableCard,\n Button,\n Badge,\n Input,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function CardDemo() {\n return (\n <>\n
\n
\n \n \n
\n Project Silica\n \n Active\n \n
\n

\n A card sits on the base-100 surface, rounds\n with --radius-box, and lifts with{\" \"}\n --depth.\n

\n \n \n \n \n \n \n\n \n \n Newsletter\n

\n Inputs and buttons share the field tier, so they line up.\n

\n
\n \n \n
\n \n \n
\n
\n\n
\n
\n console.log(\"open repo\")}>\n \n Repository\n

Click anywhere on this card.

\n \n \n }>\n \n As a link\n

Renders an <a>, same styling.

\n \n \n \n \n Disabled\n

Not interactive.

\n \n \n
\n
\n\n
\n
\n {([\"Starter\", \"Pro\", \"Enterprise\"] as const).map((plan, i) => (\n \n \n {plan}\n

\n {i === 0 ? \"For side projects.\" : i === 1 ? \"For growing teams.\" : \"For scale.\"}\n

\n \n \n ))}\n
\n
\n {([\"Email alerts\", \"SMS alerts\", \"Push alerts\"] as const).map((opt) => (\n \n \n {opt}\n \n \n ))}\n
\n
\n\n
\n \n
\n \n \n Neutral frost\n

\n Plain glass — no color declared, so it\n frosts the neutral base-100 surface.\n

\n \n \n\n \n \n Tinted frost\n

\n bg-primary glass — same{\" \"}\n --u-accent hook soft uses,\n so the frost picks up primary for colored depth.\n

\n \n \n
\n\n
\n console.log(\"open repo\")}\n >\n \n Clickable + glass\n

\n Hover still lifts — the rim sheen lives on its own\n pseudo-element, not the hover shadow.\n

\n \n \n\n {([\"Starter\", \"Pro\"] as const).map((plan, i) => (\n \n \n {plan}\n

\n Checked ring still reads through the frost.\n

\n \n \n ))}\n
\n \n
\n \n );\n}" }, { "name": "Carousel", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/carousel.tsx", "description": "Silica Carousel — a scroll-snap strip driven by real prev/next controls and dot indicators (with optional loop + autoplay), not just a scrollable list. ", "props": [ { "name": "CarouselProps", "extends": "extends Omit, \"onChange\">", "members": [ { "name": "snap", "optional": true, "type": "CarouselSnap", "doc": "Snap alignment of items. `start` (default), `center`, or `end`." }, { "name": "orientation", "optional": true, "type": "CarouselOrientation", "doc": "`horizontal` (default) or `vertical`." }, { "name": "controls", "optional": true, "type": "boolean", "doc": "Show prev/next controls. Default `true`." }, { "name": "indicators", "optional": true, "type": "boolean | \"dots\" | \"numbers\"", "doc": "Bottom indicators: `dots` (default), `numbers` (paged), or `false` to hide." }, { "name": "loop", "optional": true, "type": "boolean", "doc": "Wrap around past the first/last slide. Default `false`." }, { "name": "autoplay", "optional": true, "type": "number", "doc": "Auto-advance every N ms (pauses on hover/focus). Off by default." }, { "name": "onValueChange", "optional": true, "type": "(index: number) => void", "doc": "Called with the active slide index whenever it changes." }, { "name": "onChange", "optional": true, "type": "(index: number) => void", "doc": "@deprecated Use `onValueChange`. `onChange` is reserved for the native DOM handler on components that wrap a real form element; still honored here so this isn't a breaking change." }, { "name": "className", "optional": true, "type": "string", "doc": "Extra class, applied to BOTH the outer root (so e.g. a width constraint like `max-w-lg` actually shrinks the carousel — the prev/next controls are positioned relative to the root, not the scroll surface) and the scroll surface itself (so e.g. `gap-4`/`rounded-box` still style the strip/items as before). A plain single-target `className` would have to pick one, and picking the scroll surface silently breaks control positioning for the single most common use — constraining overall width." } ] }, { "name": "CarouselItemProps", "members": [] } ], "usageExample": "import type { CSSProperties } from \"react\";\nimport { Carousel, CarouselItem } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst SLIDES = [\"primary\", \"secondary\", \"accent\", \"info\", \"success\"] as const;\n\nfunction slideStyle(color: string): CSSProperties {\n return {\n backgroundColor: `var(--color-${color})`,\n color: `var(--color-${color}-content, #fff)`,\n };\n}\n\nexport function CarouselDemo() {\n return (\n <>\n
\n \n {SLIDES.map((color) => (\n \n {color}\n \n ))}\n \n
\n\n
\n \n {SLIDES.slice(0, 3).map((color) => (\n \n {color}\n \n ))}\n \n
\n \n );\n}" }, { "name": "Chat", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/chat.tsx", "description": "Silica Chat — a message row: avatar, header, bubble, footer. OW Obi-Wan You were the chosen one! Seen I hate you! ", "props": [ { "name": "ChatProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "`start` (incoming, avatar left) or `end` (outgoing, avatar right)." } ] }, { "name": "ChatImageProps", "members": [] }, { "name": "ChatHeaderProps", "members": [] }, { "name": "ChatFooterProps", "members": [] }, { "name": "ChatBubbleProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "color", "optional": true, "type": "ChatBubbleColor", "doc": "Bubble color; maps to `chat-bubble-`. Default neutral base-200." } ] } ], "usageExample": "import {\n Chat,\n ChatImage,\n ChatHeader,\n ChatBubble,\n ChatFooter,\n Avatar,\n} from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS } from \"../lib/data\";\n\nexport function ChatDemo() {\n return (\n <>\n
\n
\n {COLORS.slice(0, 6).map((color) => (\n \n {color} bubble\n \n ))}\n
\n
\n\n
\n
\n \n \n \n OW\n \n \n \n Obi-Wan \n \n You were the chosen one!\n \n \n \n \n OW\n \n \n \n It was said that you would destroy the Sith, not join them.\n \n \n \n I hate you!\n Delivered\n \n
\n
\n \n );\n}" }, { "name": "ChatComposer", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/chat-composer.tsx", "description": "Silica ChatComposer — an auto-growing message input + send button. Enter submits; Shift+Enter inserts a newline. Uncontrolled by default (manages its own draft text and clears on send); pass `value`/`onValueChange` to control it (e.g. to persist an in-progress draft). sendMessage(text)} placeholder=\"Message…\" />", "props": [ { "name": "ChatComposerProps", "members": [ { "name": "value", "optional": true, "type": "string", "doc": "Controlled draft text." }, { "name": "defaultValue", "optional": true, "type": "string", "doc": "Uncontrolled initial draft text." }, { "name": "onValueChange", "optional": true, "type": "(value: string) => void", "doc": "" }, { "name": "onSend", "optional": true, "type": "(value: string) => void", "doc": "Fires with the trimmed text on submit (Enter, or the send button); the field then clears." }, { "name": "placeholder", "optional": true, "type": "string", "doc": "" }, { "name": "disabled", "optional": true, "type": "boolean", "doc": "" }, { "name": "actions", "optional": true, "type": "React.ReactNode", "doc": "Extra leading controls (e.g. an attach button), placed before the field." }, { "name": "sendLabel", "optional": true, "type": "React.ReactNode", "doc": "Override the send button's content. Default a paper-plane icon." }, { "name": "className", "optional": true, "type": "string", "doc": "" }, { "name": "\"aria-label\"", "optional": true, "type": "string", "doc": "" } ] } ], "usageExample": null }, { "name": "ChatLayout", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/chat-layout.tsx", "description": "Silica ChatLayout — the outer flex column for a conversation screen: give it a height (or let it fill a flex/grid parent), put `ChatLayoutMessages` first and a `ChatComposer` (or anything) last. {messages.map((m) => )} ", "props": [ { "name": "ChatLayoutProps", "members": [] }, { "name": "ChatLayoutMessagesProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "stickToBottom", "optional": true, "type": "boolean", "doc": "Auto-scroll to the newest message on update — but only while the user is already near the bottom, so scrolling up to read history isn't yanked away by an incoming message. Default `true`." } ] } ], "usageExample": null }, { "name": "ChatMessage", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/chat-message.tsx", "description": "Silica ChatMessage — a friendlier entry point over the `Chat`/`ChatImage`/ `ChatBubble`/`ChatFooter` primitives, for the common case of \"one message, maybe with an avatar and metadata\" without composing four parts by hand each time. Reach for the primitives directly when you need more control (e.g. a Slack-style name/time row ABOVE the bubble via `ChatHeader` — `ChatMessage` itself puts name/time in the footer, after the bubble, to match a modern messaging-app read: the message is the point, the timestamp is a quiet trailing detail). OW} name=\"Obi-Wan\" time=\"12:45\"> You were the chosen one! I hate you! ", "props": [ { "name": "ChatMessageProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "`\"start\"` (incoming, avatar left, default) or `\"end\"` (outgoing, avatar right)." }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "time", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "color", "optional": true, "type": "ChatBubbleColor", "doc": "Bubble color; maps to `chat-bubble-`." }, { "name": "metadata", "optional": true, "type": "React.ReactNode", "doc": "An extra trailing line after the name/time row, e.g. \"Delivered\"." }, { "name": "compact", "optional": true, "type": "boolean", "doc": "Suppress the avatar + name/time row — for a consecutive message from the same sender, grouped right under the previous one." }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "" }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatMessageMetadataProps", "members": [] }, { "name": "ChatTypingIndicatorProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "" }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "Announced to screen readers, e.g. `\"Silica Assistant is typing\"`." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatSystemMessageProps", "members": [] }, { "name": "ChatToolCallsProps", "members": [ { "name": "label", "optional": false, "type": "React.ReactNode", "doc": "The always-visible summary, e.g. \"Called search_web(query)\"." }, { "name": "defaultOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "open", "optional": true, "type": "boolean", "doc": "" }, { "name": "onOpenChange", "optional": true, "type": "(open: boolean) => void", "doc": "" }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "The detail — arguments, results, etc. Rendered in a monospace block." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] } ], "usageExample": null }, { "name": "ChatSystemMessage", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/chat-message.tsx", "description": "A centered system notice / divider within the conversation — \"Today\", \"Ada joined the conversation\", etc. Not attributed to either side.", "props": [ { "name": "ChatMessageProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "`\"start\"` (incoming, avatar left, default) or `\"end\"` (outgoing, avatar right)." }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "time", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "color", "optional": true, "type": "ChatBubbleColor", "doc": "Bubble color; maps to `chat-bubble-`." }, { "name": "metadata", "optional": true, "type": "React.ReactNode", "doc": "An extra trailing line after the name/time row, e.g. \"Delivered\"." }, { "name": "compact", "optional": true, "type": "boolean", "doc": "Suppress the avatar + name/time row — for a consecutive message from the same sender, grouped right under the previous one." }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "" }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatMessageMetadataProps", "members": [] }, { "name": "ChatTypingIndicatorProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "" }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "Announced to screen readers, e.g. `\"Silica Assistant is typing\"`." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatSystemMessageProps", "members": [] }, { "name": "ChatToolCallsProps", "members": [ { "name": "label", "optional": false, "type": "React.ReactNode", "doc": "The always-visible summary, e.g. \"Called search_web(query)\"." }, { "name": "defaultOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "open", "optional": true, "type": "boolean", "doc": "" }, { "name": "onOpenChange", "optional": true, "type": "(open: boolean) => void", "doc": "" }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "The detail — arguments, results, etc. Rendered in a monospace block." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] } ], "usageExample": null }, { "name": "ChatToolCalls", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/chat-message.tsx", "description": "Silica ChatToolCalls — a collapsible detail for an assistant's tool/function call (wraps the existing `Collapsible`, not a bespoke disclosure), so a long tool-call trace doesn't dominate the conversation by default. {JSON.stringify(result, null, 2)} ", "props": [ { "name": "ChatMessageProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "`\"start\"` (incoming, avatar left, default) or `\"end\"` (outgoing, avatar right)." }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "time", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "color", "optional": true, "type": "ChatBubbleColor", "doc": "Bubble color; maps to `chat-bubble-`." }, { "name": "metadata", "optional": true, "type": "React.ReactNode", "doc": "An extra trailing line after the name/time row, e.g. \"Delivered\"." }, { "name": "compact", "optional": true, "type": "boolean", "doc": "Suppress the avatar + name/time row — for a consecutive message from the same sender, grouped right under the previous one." }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "" }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatMessageMetadataProps", "members": [] }, { "name": "ChatTypingIndicatorProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "" }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "Announced to screen readers, e.g. `\"Silica Assistant is typing\"`." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatSystemMessageProps", "members": [] }, { "name": "ChatToolCallsProps", "members": [ { "name": "label", "optional": false, "type": "React.ReactNode", "doc": "The always-visible summary, e.g. \"Called search_web(query)\"." }, { "name": "defaultOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "open", "optional": true, "type": "boolean", "doc": "" }, { "name": "onOpenChange", "optional": true, "type": "(open: boolean) => void", "doc": "" }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "The detail — arguments, results, etc. Rendered in a monospace block." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] } ], "usageExample": null }, { "name": "ChatTypingIndicator", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/chat-message.tsx", "description": "Silica ChatTypingIndicator — three animated dots inside a real `.chat-bubble`, so it sits exactly where the next message will land instead of reading as a stray line of muted text. S} name=\"Silica Assistant\" />", "props": [ { "name": "ChatMessageProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "`\"start\"` (incoming, avatar left, default) or `\"end\"` (outgoing, avatar right)." }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "time", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "color", "optional": true, "type": "ChatBubbleColor", "doc": "Bubble color; maps to `chat-bubble-`." }, { "name": "metadata", "optional": true, "type": "React.ReactNode", "doc": "An extra trailing line after the name/time row, e.g. \"Delivered\"." }, { "name": "compact", "optional": true, "type": "boolean", "doc": "Suppress the avatar + name/time row — for a consecutive message from the same sender, grouped right under the previous one." }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "" }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatMessageMetadataProps", "members": [] }, { "name": "ChatTypingIndicatorProps", "members": [ { "name": "side", "optional": true, "type": "ChatSide", "doc": "" }, { "name": "avatar", "optional": true, "type": "React.ReactNode", "doc": "" }, { "name": "name", "optional": true, "type": "React.ReactNode", "doc": "Announced to screen readers, e.g. `\"Silica Assistant is typing\"`." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] }, { "name": "ChatSystemMessageProps", "members": [] }, { "name": "ChatToolCallsProps", "members": [ { "name": "label", "optional": false, "type": "React.ReactNode", "doc": "The always-visible summary, e.g. \"Called search_web(query)\"." }, { "name": "defaultOpen", "optional": true, "type": "boolean", "doc": "" }, { "name": "open", "optional": true, "type": "boolean", "doc": "" }, { "name": "onOpenChange", "optional": true, "type": "(open: boolean) => void", "doc": "" }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "The detail — arguments, results, etc. Rendered in a monospace block." }, { "name": "className", "optional": true, "type": "string", "doc": "" } ] } ], "usageExample": null }, { "name": "ClickableCard", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/card.tsx", "description": "A `Card` that's a whole clickable surface — a ` ", "props": [ { "name": "ListProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "hover", "optional": true, "type": "boolean", "doc": "Add a hover highlight to rows (for interactive lists)." } ] }, { "name": "ListRowProps", "members": [] }, { "name": "ListColGrowProps", "members": [] }, { "name": "ListTitleProps", "members": [] } ], "usageExample": "import { List, ListRow, ListColGrow, ListTitle, Avatar, Button } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst MEMBERS = [\n { initials: \"AL\", name: \"Ada Lovelace\", role: \"Owner\" },\n { initials: \"GH\", name: \"Grace Hopper\", role: \"Admin\" },\n { initials: \"AT\", name: \"Alan Turing\", role: \"Member\" },\n];\n\nexport function ListDemo() {\n return (\n
\n \n Team\n {MEMBERS.map((m) => (\n \n \n {m.initials}\n \n \n
{m.name}
\n
{m.role}
\n \n \n \n ))}\n \n
\n );\n}" }, { "name": "Marquee", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/marquee.tsx", "description": "Silica Marquee — an infinitely-looping ticker. {logos} {quotes} {cards} The children are rendered `repeat` times so the loop has something to hand over to at the seam; every copy after the first is `aria-hidden`, so a screen reader hears the list once. Motion is CSS-only and collapses to a plain scroller under `prefers-reduced-motion`.", "props": [ { "name": "MarqueeProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "direction", "optional": true, "type": "MarqueeDirection", "doc": "Travel direction. `left` (default) and `right` are horizontal; `up`/`down` are vertical and need a height on the marquee or its parent." }, { "name": "speed", "optional": true, "type": "MarqueeSpeed", "doc": "Loop speed — `slow` 80s, `normal` (default) 40s, `fast` 20s per cycle. For anything else set `--marquee-duration` via `style`." }, { "name": "pauseOnHover", "optional": true, "type": "boolean", "doc": "Freeze the strip while the pointer is over it, or while something inside it has keyboard focus. Default `true`." }, { "name": "fade", "optional": true, "type": "boolean", "doc": "Soften both ends so items dissolve rather than getting guillotined at the edge. Default `true`; width is `--marquee-fade` (4rem)." }, { "name": "repeat", "optional": true, "type": "2 | 3 | 4 | 5 | 6", "doc": "How many times the content is repeated to build the loop, 2–6. Two is enough whenever one pass already overflows the container; raise it when it doesn't (three short logos in a wide strip) rather than padding the list by hand. Default `2`." } ] } ], "usageExample": "import { Badge, Card, Marquee } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nconst LOGOS = [\"Northwind\", \"Acme\", \"Contoso\", \"Fabrikam\", \"Globex\", \"Initech\", \"Umbrella\"];\n\nconst QUOTES = [\n \"Shipped in a weekend.\",\n \"Our whole design system, one dependency.\",\n \"The theme editor alone paid for it.\",\n \"Finally, a marquee that doesn't hitch.\",\n];\n\nexport function MarqueeDemo() {\n return (\n <>\n
\n \n {LOGOS.map((name) => (\n \n {name}\n \n ))}\n \n
\n\n
\n \n {QUOTES.map((quote) => (\n \n

{quote}

\n \n ))}\n \n
\n\n
\n \n {LOGOS.map((name) => (\n \n {name}\n \n ))}\n \n
\n\n
\n {/* Three items can't overflow a wide strip, so two copies would\n leave a visible blank. More copies, not a padded list. */}\n \n {[\"Design\", \"Build\", \"Ship\"].map((word) => (\n \n {word}\n \n ))}\n \n
\n\n
\n \n {LOGOS.map((name) => (\n \n {name}\n \n ))}\n \n
\n \n );\n}" }, { "name": "MetadataList", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/metadata-list.tsx", "description": "Silica MetadataList — a key/value property list (a real `
`). Compose it from `MetadataItem`s, which each render a `
`/`
` pair as direct grid children of the list. Jan 1, 2026 Ada Lovelace Active ", "props": [ { "name": "MetadataListProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "layout", "optional": true, "type": "MetadataListLayout", "doc": "`\"row\"` (default): label left, value right. `\"stack\"`: label above value." } ] }, { "name": "MetadataItemProps", "members": [ { "name": "label", "optional": false, "type": "React.ReactNode", "doc": "" }, { "name": "children", "optional": false, "type": "React.ReactNode", "doc": "" }, { "name": "labelClassName", "optional": true, "type": "string", "doc": "Class for the `
`." }, { "name": "className", "optional": true, "type": "string", "doc": "Class for the `
`." } ] } ], "usageExample": "import { MetadataList, MetadataItem, Badge, Avatar } from \"@wizeworks/silicaui-react\";\nimport { Section, Row } from \"../lib/Section\";\n\nexport function MetadataListDemo() {\n return (\n <>\n
\n
\n \n \n \n Active\n \n \n \n
\n \n AL\n \n Ada Lovelace\n
\n \n Jan 1, 2026\n 2 hours ago\n wizeworks/silicaui\n \n
\n
\n\n
\n \n
\n \n Pro\n 12 / 20\n Aug 1, 2026\n \n
\n \n
\n \n );\n}" }, { "name": "Meter", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/meter.tsx", "description": "Silica Meter — a static measurement within a known range (disk usage, score, capacity). Behavior/accessibility from Base UI's Meter; look from Silica. ", "props": [ { "name": "MeterProps", "extends": "extends Omit, \"color\">", "members": [ { "name": "value", "optional": false, "type": "number", "doc": "The current reading." }, { "name": "min", "optional": true, "type": "number", "doc": "Range floor. Default `0`." }, { "name": "max", "optional": true, "type": "number", "doc": "Range ceiling. Default `100`." }, { "name": "color", "optional": true, "type": "MeterColor", "doc": "Fill color; maps to `meter-`." }, { "name": "size", "optional": true, "type": "MeterSize", "doc": "Track height; default `md`." }, { "name": "label", "optional": true, "type": "React.ReactNode", "doc": "Optional label shown in the header row." }, { "name": "showValue", "optional": true, "type": "boolean", "doc": "Show the formatted value in the header row. Default `false`." }, { "name": "format", "optional": true, "type": "Intl.NumberFormatOptions", "doc": "`Intl.NumberFormat` options for the displayed value." } ] } ], "usageExample": "import { Meter } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\nimport { COLORS, SIZES } from \"../lib/data\";\n\nexport function MeterDemo() {\n return (\n <>\n
\n
\n {COLORS.slice(0, 6).map((color) => (\n \n ))}\n
\n
\n\n
\n
\n {SIZES.map((size) => (\n \n ))}\n
\n
\n\n
\n
\n \n \n \n
\n
\n \n );\n}" }, { "name": "MockupBrowser", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/mockup.tsx", "description": "Silica MockupBrowser — a browser frame with a toolbar and faux address bar.
Your page
 The traffic-light dots are themed (error / warning / success), so they track whatever theme is in scope. Add `mockup-plain` for neutral, colorless dots.", "props": [ { "name": "MockupWindowProps", "members": [] }, { "name": "MockupBrowserProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "url", "optional": true, "type": "string", "doc": "Text shown in the faux address bar." }, { "name": "toolbar", "optional": true, "type": "React.ReactNode", "doc": "Replace the address bar with custom toolbar content." } ] }, { "name": "MockupCodeProps", "members": [] }, { "name": "MockupCodeLineProps", "extends": "extends React.HTMLAttributes", "members": [ { "name": "prefix", "optional": true, "type": "string", "doc": "Gutter prefix rendered before the line (e.g. `$`, `>`, a line number)." } ] }, { "name": "MockupPhoneProps", "members": [] } ], "usageExample": null }, { "name": "MockupCode", "package": "@wizeworks/silicaui-react", "category": "Data display", "sourceFile": "silicaui-react/src/mockup.tsx", "description": "Silica MockupCode — a dark terminal / code block. Compose it from `` rows (each renders a `
`).  npm i @wizeworks/silicaui \" className=\"text-success\">done ",
    "props": [
      {
        "name": "MockupWindowProps",
        "members": []
      },
      {
        "name": "MockupBrowserProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "url",
            "optional": true,
            "type": "string",
            "doc": "Text shown in the faux address bar."
          },
          {
            "name": "toolbar",
            "optional": true,
            "type": "React.ReactNode",
            "doc": "Replace the address bar with custom toolbar content."
          }
        ]
      },
      {
        "name": "MockupCodeProps",
        "members": []
      },
      {
        "name": "MockupCodeLineProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "prefix",
            "optional": true,
            "type": "string",
            "doc": "Gutter prefix rendered before the line (e.g. `$`, `>`, a line number)."
          }
        ]
      },
      {
        "name": "MockupPhoneProps",
        "members": []
      }
    ],
    "usageExample": null
  },
  {
    "name": "MockupCodeLine",
    "package": "@wizeworks/silicaui-react",
    "category": "Data display",
    "sourceFile": "silicaui-react/src/mockup.tsx",
    "description": "A single line inside ``. Renders `
`.",
    "props": [
      {
        "name": "MockupWindowProps",
        "members": []
      },
      {
        "name": "MockupBrowserProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "url",
            "optional": true,
            "type": "string",
            "doc": "Text shown in the faux address bar."
          },
          {
            "name": "toolbar",
            "optional": true,
            "type": "React.ReactNode",
            "doc": "Replace the address bar with custom toolbar content."
          }
        ]
      },
      {
        "name": "MockupCodeProps",
        "members": []
      },
      {
        "name": "MockupCodeLineProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "prefix",
            "optional": true,
            "type": "string",
            "doc": "Gutter prefix rendered before the line (e.g. `$`, `>`, a line number)."
          }
        ]
      },
      {
        "name": "MockupPhoneProps",
        "members": []
      }
    ],
    "usageExample": null
  },
  {
    "name": "MockupPhone",
    "package": "@wizeworks/silicaui-react",
    "category": "Data display",
    "sourceFile": "silicaui-react/src/mockup.tsx",
    "description": "Silica MockupPhone — a phone frame with a camera notch.  
Your app screen
  Children render inside the display; the bezel and notch are supplied by the frame. Give top content some `pt` so it clears the notch.",
    "props": [
      {
        "name": "MockupWindowProps",
        "members": []
      },
      {
        "name": "MockupBrowserProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "url",
            "optional": true,
            "type": "string",
            "doc": "Text shown in the faux address bar."
          },
          {
            "name": "toolbar",
            "optional": true,
            "type": "React.ReactNode",
            "doc": "Replace the address bar with custom toolbar content."
          }
        ]
      },
      {
        "name": "MockupCodeProps",
        "members": []
      },
      {
        "name": "MockupCodeLineProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "prefix",
            "optional": true,
            "type": "string",
            "doc": "Gutter prefix rendered before the line (e.g. `$`, `>`, a line number)."
          }
        ]
      },
      {
        "name": "MockupPhoneProps",
        "members": []
      }
    ],
    "usageExample": null
  },
  {
    "name": "MockupWindow",
    "package": "@wizeworks/silicaui-react",
    "category": "Data display",
    "sourceFile": "silicaui-react/src/mockup.tsx",
    "description": "Silica MockupWindow — an app window frame with faux traffic-light dots.  
Hello!
  The dots are themed (error / warning / success). Add `mockup-plain` for neutral, colorless dots.",
    "props": [
      {
        "name": "MockupWindowProps",
        "members": []
      },
      {
        "name": "MockupBrowserProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "url",
            "optional": true,
            "type": "string",
            "doc": "Text shown in the faux address bar."
          },
          {
            "name": "toolbar",
            "optional": true,
            "type": "React.ReactNode",
            "doc": "Replace the address bar with custom toolbar content."
          }
        ]
      },
      {
        "name": "MockupCodeProps",
        "members": []
      },
      {
        "name": "MockupCodeLineProps",
        "extends": "extends React.HTMLAttributes",
        "members": [
          {
            "name": "prefix",
            "optional": true,
            "type": "string",
            "doc": "Gutter prefix rendered before the line (e.g. `$`, `>`, a line number)."
          }
        ]
      },
      {
        "name": "MockupPhoneProps",
        "members": []
      }
    ],
    "usageExample": null
  },
  {
    "name": "PreviewCard",
    "package": "@wizeworks/silicaui-react",
    "category": "Data display",
    "sourceFile": "silicaui-react/src/preview-card.tsx",
    "description": "Silica PreviewCard — a hover/focus link preview (hovercard). Behavior from Base UI, look from Silica's `.preview-card` CSS. }> @{u.handle} ",
    "props": [
      {
        "name": "PreviewCardProps",
        "extends": "extends PositioningProps",
        "members": [
          {
            "name": "children",
            "optional": false,
            "type": "React.ReactElement",
            "doc": "The trigger (usually a link). Base UI merges hover/focus behavior onto it."
          },
          {
            "name": "content",
            "optional": false,
            "type": "React.ReactNode",
            "doc": "The card body shown on hover/focus."
          },
          {
            "name": "side",
            "optional": true,
            "type": "PreviewCardSide",
            "doc": "Preferred side. Default `bottom` (flips to avoid collisions)."
          },
          {
            "name": "align",
            "optional": true,
            "type": "PreviewCardAlign",
            "doc": "Alignment along that side. Default `center`."
          },
          {
            "name": "sideOffset",
            "optional": true,
            "type": "number",
            "doc": "Gap between trigger and card, in px. Default `8`."
          },
          {
            "name": "delay",
            "optional": true,
            "type": "number",
            "doc": "Hover-open delay in ms."
          },
          {
            "name": "closeDelay",
            "optional": true,
            "type": "number",
            "doc": "Close delay in ms."
          },
          {
            "name": "open",
            "optional": true,
            "type": "boolean",
            "doc": "Controlled open state."
          },
          {
            "name": "defaultOpen",
            "optional": true,
            "type": "boolean",
            "doc": "Uncontrolled initial open state."
          },
          {
            "name": "onOpenChange",
            "optional": true,
            "type": "(open: boolean) => void",
            "doc": ""
          },
          {
            "name": "arrow",
            "optional": true,
            "type": "boolean",
            "doc": "Show the little arrow. Default `false`."
          },
          {
            "name": "className",
            "optional": true,
            "type": "string",
            "doc": "Extra class on the card surface."
          },
          {
            "name": "anchor",
            "optional": true,
            "type": "BasePositionerProps[\"anchor\"]",
            "doc": "What to position against. Defaults to the component's own trigger. Accepts an element, a ref, a function returning either, or a VIRTUAL element — anything with `getBoundingClientRect()` — which is how you pin a popup to a pointer, a text caret, or a spot on a canvas that has no DOM node.   new DOMRect(x, y, 0, 0) }} />",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "positionMethod",
            "optional": true,
            "type": "BasePositionerProps[\"positionMethod\"]",
            "doc": "`absolute` (default) or `fixed`. Use `fixed` to escape a clipping ancestor.",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "alignOffset",
            "optional": true,
            "type": "BasePositionerProps[\"alignOffset\"]",
            "doc": "Offset along the alignment axis, in px. Pairs with `align`.",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "collisionBoundary",
            "optional": true,
            "type": "BasePositionerProps[\"collisionBoundary\"]",
            "doc": "The element the popup must stay inside. Defaults to the viewport — set it to a scroll container so the popup collides with the panel, not the window.",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "collisionPadding",
            "optional": true,
            "type": "BasePositionerProps[\"collisionPadding\"]",
            "doc": "Inset from the collision boundary, in px.",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "collisionAvoidance",
            "optional": true,
            "type": "BasePositionerProps[\"collisionAvoidance\"]",
            "doc": "Which collision strategy runs per axis (`flip`, `shift`, `none`).",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "sticky",
            "optional": true,
            "type": "BasePositionerProps[\"sticky\"]",
            "doc": "Keep the popup glued to the anchor while it scrolls out of view.",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "arrowPadding",
            "optional": true,
            "type": "BasePositionerProps[\"arrowPadding\"]",
            "doc": "Minimum distance from the popup's corner to the arrow, in px.",
            "inheritedFrom": "PositioningProps"
          },
          {
            "name": "disableAnchorTracking",
            "optional": true,
            "type": "BasePositionerProps[\"disableAnchorTracking\"]",
            "doc": "Stop re-measuring when the anchor moves. Cheaper, but goes stale.",
            "inheritedFrom": "PositioningProps"
          }
        ]
      }
    ],
    "usageExample": "import { PreviewCard, Link, Avatar } from \"@wizeworks/silicaui-react\";\nimport { Section } from \"../lib/Section\";\n\nexport function PreviewCardDemo() {\n    return (\n        
\n            
\n                Reviewed by{\" \"}\n                \n                            \n                                AL\n                            \n                            
\n                                
Ada Lovelace
\n                                
\n                                    Founding engineer · @ada\n                                
\n                            
\n                        \n                    }\n                    arrow\n                >\n                    \n                        @ada\n                    \n                {\" \"}\n                on the pull request.\n            
\n        
\n    );\n}"
  },
  {
    "name": "SelectableCard",
    "package": "@wizeworks/silicaui-react",
    "category": "Data display",
    "sourceFile": "silicaui-react/src/card.tsx",
    "description": "A `Card` that's a selectable option tile — a real `` / ``, visually hidden, wrapped in a `