{ "$schema": "https://ui.shadcn.com/schema/registry.json", "name": "astryx", "homepage": "https://astryx.atmeta.com", "items": [ { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-alert-dialog", "type": "registry:component", "title": "Alert Dialog", "description": "A modal dialog that asks the user to confirm a destructive action.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-alert-dialog/AlertDialog.ts", "type": "registry:component", "target": "components/astryx/AlertDialog.ts" } ], "astryx": { "kind": "component", "path": "components/alert-dialog", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/AlertDialog", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-app-shell", "type": "registry:component", "title": "App Shell", "description": "AppShell is the page shell for an application. It provides slots for top navigation, side navigation, banners, and main content. Use it as the root wrapper for every page. It handles responsive mobile navigation and skip-to-content automatically. Configure side nav collapse on SideNav with its collapsible prop.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-app-shell/AppShell.ts", "type": "registry:component", "target": "components/astryx/AppShell.ts" } ], "astryx": { "kind": "component", "path": "components/app-shell", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/AppShell", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-aspect-ratio", "type": "registry:component", "title": "Aspect Ratio", "description": "Maintains a fixed width-to-height ratio for its children as its container resizes. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions. It takes its width from the container and derives its height from the ratio, so it needs an ancestor with a definite width.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-aspect-ratio/AspectRatio.ts", "type": "registry:component", "target": "components/astryx/AspectRatio.ts" } ], "astryx": { "kind": "component", "path": "components/aspect-ratio", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/AspectRatio", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-avatar", "type": "registry:component", "title": "Avatar", "description": "Displays a user avatar with image, initials fallback, and optional status indicator.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-avatar/Avatar.ts", "type": "registry:component", "target": "components/astryx/Avatar.ts" } ], "astryx": { "kind": "component", "path": "components/avatar", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/Avatar", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-avatar-group", "type": "registry:component", "title": "Avatar Group", "description": "Stacked avatar display with overlapping layout and optional overflow indicator. Children are Avatar elements.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-avatar-group/AvatarGroup.ts", "type": "registry:component", "target": "components/astryx/AvatarGroup.ts" } ], "astryx": { "kind": "component", "path": "components/avatar-group", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/AvatarGroup", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-avatar-group-overflow", "type": "registry:component", "title": "Avatar Group Overflow", "description": "Overflow indicator for AvatarGroup. Shows a compact count for hidden avatars and can render custom count text or act as a button.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-avatar-group-overflow/AvatarGroupOverflow.ts", "type": "registry:component", "target": "components/astryx/AvatarGroupOverflow.ts" } ], "astryx": { "kind": "component", "path": "components/avatar-group-overflow", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/AvatarGroup", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-avatar-status-dot", "type": "registry:component", "title": "Avatar Status Dot", "description": "Size-aware status indicator dot that reads avatar size from context and scales proportionally. Each variant pairs a colour with a distinct built-in shape (filled, ring, minus) so status is never conveyed by colour alone (WCAG 1.4.1).", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-avatar-status-dot/AvatarStatusDot.ts", "type": "registry:component", "target": "components/astryx/AvatarStatusDot.ts" } ], "astryx": { "kind": "component", "path": "components/avatar-status-dot", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/Avatar", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-badge", "type": "registry:component", "title": "Badge", "description": "Badge highlights a status or category at a glance. Use it sparingly: only when a value represents a distinct state (Active, Failed) or a grouping tag (Engineering, Design). Most metadata (dates, durations, counts, descriptions) should be plain description text, not badges.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-badge/Badge.ts", "type": "registry:component", "target": "components/astryx/Badge.ts" } ], "astryx": { "kind": "component", "path": "components/badge", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/Badge", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-banner", "type": "registry:component", "title": "Banner", "description": "Banner shows a persistent message at the top of a page or section. Use it for form errors, system updates, maintenance notices, or success confirmations that the user needs to see until they act on it.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-banner/Banner.ts", "type": "registry:component", "target": "components/astryx/Banner.ts" } ], "astryx": { "kind": "component", "path": "components/banner", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/Banner", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-base-typeahead", "type": "registry:component", "title": "Base Typeahead", "description": "Composable combobox engine providing a bare input, search, keyboard navigation, and a styled result dropdown. It renders no input wrapper, border, or selected-value token. Typeahead and Tokenizer compose it for standard fields.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-base-typeahead/BaseTypeahead.ts", "type": "registry:component", "target": "components/astryx/BaseTypeahead.ts" } ], "astryx": { "kind": "component", "path": "components/base-typeahead", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/Typeahead", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-blockquote", "type": "registry:component", "title": "Blockquote", "description": "A quotation block with a rule on its inline-start edge and secondary text color. Use to highlight quoted content, testimonials, or excerpts. The rule and padding are logical, so they move to the right edge in right-to-left locales.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-blockquote/Blockquote.ts", "type": "registry:component", "target": "components/astryx/Blockquote.ts" } ], "astryx": { "kind": "component", "path": "components/blockquote", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/Blockquote", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-bottom-sheet", "type": "registry:component", "title": "Bottom Sheet", "description": "A mobile touch surface for filters, actions, forms, and detail views that should rise from the bottom of the viewport. For a multi-step flow, give each step its own sheet and one state value that names the open step (see Replacing a sheet); open a second sheet over the first when a step should stay visible beneath it.\n\nStacking. Every sheet keeps its own isOpen. Open a sheet while another scrim sheet is open and it stacks on top: the sheet beneath stays mounted with its scroll position and inputs, recedes behind the new one (the nearest covered sheet shrinks to 0.96 and lifts 8px, deeper ones to 0.92 and 16px), and is blocked from pointer, keyboard, and assistive technology by the top sheet's modal dialog. The sheets can be siblings, live in separate components, sit inside another sheet's content, or sit inside a BottomSheetSwitcher step; a whole switcher is one level, and switching its step in place does not change its position. Nothing moves in the DOM: each sheet's dialog stays where it is written, and no wrapper component is needed.\n\nOrder is open order. The top sheet is the one presented most recently that is still open; a sheet that closes and reopens comes back on top. When several sheets open in one update (a deep link into a flow), there is no open order between them, so tree order decides: a sheet below the sheets rendered in its content, siblings in the order they are written. That order is right in the first painted frame.\n\nOne scrim. Only the bottom sheet's backdrop dims the page; the backdrops of the sheets above it are transparent, so a stack never darkens per level. The dim holds steady while sheets push and pop, and if the bottom sheet closes while sheets remain above it, the next sheet's backdrop takes over in the same frame.\n\nDismissal. Escape, a tap on the scrim, a downward swipe, and a platform close request (Android back, a close watcher) reach only the top sheet, through that sheet's own onOpenChange, and that sheet's purpose applies: required blocks all of them, form blocks the scrim and the swipe. Nothing closes a whole stack at once; set every sheet closed in one update when a flow is done and they leave together.\n\nClosing a covered sheet from code. Sheets rendered inside the closing sheet's content are part of it: they are presented only while it is open and leave with it. Their isOpen stays yours, as with a Dialog rendered in a closed Dialog: nothing is written to it, and a nested sheet that is still open when its host reopens is presented again, on top. Set it closed yourself when the flow is done. Sheets above the closing sheet that are not in its content stay open and keep their order; the closing sheet slides out from beneath them, and if it owned the scrim, the sheet above takes it over.\n\nReplacing a sheet. Close the top sheet and open another in the same update (one state value that names the open step does this) and the new sheet replaces it instead of stacking on it: the new sheet rises above the one it replaces; if the replaced sheet is taller it moves down to meet the new sheet's top edge at the same time; the replaced sheet fades only after both motions finish, and is inert and hidden from assistive technology from the start. The scrim holds steady throughout, with no dip; focus moves into the new sheet; and when the flow closes, focus returns to the element that opened its first sheet, whichever sheet closed last. This is the handoff the deprecated BottomSheetSwitcher ran between its steps; a multi-step flow needs no switcher: give each step its own BottomSheet and one state value. A replace happens only when exactly one sheet closes and one opens in the update, the closing sheet was the top sheet of its stack, and the move was made from inside it (the control last pressed, or with no recent press the focused element, was in the closing sheet, as a step's own Continue or Back button is); a covered sheet closing while a sheet opens, a close and an open in different updates, or a close and an open driven from a control outside the closing sheet (two unrelated owners acting at once) keep the ordinary push and pop motion and their own focus return. A replace over an open stack runs one level up and leaves the sheets beneath covered. Non-modal sheets (hasScrim={false}) replace each other the same way, with no scrim: they are hosted in the browser top layer as manual popovers, so the entering step orders above the retained one with no page-level z-index, and toasts raised before or while the sheet is open stay above it. Below the Popover API support floor (Tier 2 in the browser support guide) the sheet falls back to show() in page stacking order: usable, but with no promise over later page content. A non-modal sheet returns focus to its opener on close only while focus is still inside it; focus taken elsewhere on the live page stays there.\n\nFocus. Opening a sheet, modal or not, focuses its data-autofocus field (a TextInput with hasAutoFocus) in every browser. Without one, focus goes wherever the engine's native dialog focusing steps land: the panel in Chromium, the first focusable control in Firefox. A step entering as a replacement also focuses a data-autofocus descendant first, so a flow that opens on a field keeps the keyboard on it. Closing the top sheet returns focus into the sheet it reveals: to the control that opened it when that control is still there, otherwise to the revealed sheet's panel. When the last sheet closes, the standalone rules apply: finalFocusRef, else the element that opened the sheet, with a focus ring only after keyboard input. When every sheet of a stack closes in one update, focus returns once, to the bottom sheet's finalFocusRef or opener, after the last dialog has closed.\n\nCaveats. A Dialog, AlertDialog, or Popover opened from a sheet paints above the sheet and does not make it recede; a sheet opened from inside that Dialog paints above the Dialog and stacks over the sheet beneath. Sheets with hasScrim={false} stay out of the stack entirely (they replace each other, but never stack, recede, or take the scrim). A sheet React hides (a suspended Suspense boundary, Activity mode=\"hidden\") leaves the stack and closes its dialog; when it is shown again it is presented again, on top. Only sheets rendered in the same document stack; a sheet inside an iframe is its own stack.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-bottom-sheet/BottomSheet.ts", "type": "registry:component", "target": "components/astryx/BottomSheet.ts" } ], "astryx": { "kind": "component", "path": "components/bottom-sheet", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/BottomSheet", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-bottom-sheet-switcher", "type": "registry:component", "title": "Bottom Sheet Switcher", "description": "Deprecated: write each step as its own BottomSheet with isOpen, controlled by one state value that names the open step. Closing the top sheet and opening the next in the same update, from a control inside the open step, runs the same replace handoff (see BottomSheet, Replacing a sheet), with no sheetId and no switcher; a step changed from a control outside the flow (a page control, or code after focus left the step) closes and opens with ordinary push and pop motion. BottomSheetSwitcher keeps working until a future minor release removes it: a flow used on its own behaves as released (with three fixes: a toast raised from a step renders above the flow and can be pressed, under reduced motion its steps follow the reduced-motion rule, and a step with a hasAutoFocus field opens on that field in every browser), and a flow stacked with other sheets is one level of the stack (it recedes and is blocked when covered, shares the one scrim, and stands down from dismissal while covered). Modal and hasScrim={false} flows migrate the same way. Set activeSheet to a nested BottomSheet's sheetId to open or switch steps, and to null to close.\n\nStacking. A scrim flow is one level in the stack of open sheets (see BottomSheet, Stacking). Open it while a standalone sheet is open and the flow sits on top of that sheet, which recedes and is blocked; open a standalone sheet while the flow is open, from a step's content or from anywhere else, and that sheet sits on top while the whole flow recedes as one. Switching the step in place never changes the flow's position. Escape, the scrim, a swipe, and a platform close request reach only the top level: the flow's onActiveSheetChange(null) when the flow is on top, the standalone sheet's onOpenChange(false) when that sheet is. A standalone sheet rendered inside a step's content is presented only while that step is the active one: it leaves when the flow switches step or closes, its isOpen stays yours, and it is presented again, on top, if the step returns while it is still open. Only the bottom level's backdrop dims the page. A no-scrim flow stays out of the stack.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-bottom-sheet-switcher/BottomSheetSwitcher.ts", "type": "registry:component", "target": "components/astryx/BottomSheetSwitcher.ts" } ], "astryx": { "kind": "component", "path": "components/bottom-sheet-switcher", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/BottomSheet", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-breadcrumb-item", "type": "registry:component", "title": "Breadcrumb Item", "description": "Individual breadcrumb item that renders as a link when href is provided, or as plain text for the current page.", "author": "Astryx", "dependencies": [ "@astryxdesign/core@0.7.11", "@stylexjs/stylex@0.19.0" ], "css": { "@import \"@astryxdesign/core/reset.css\"": {}, "@import \"@astryxdesign/core/astryx.css\"": {} }, "files": [ { "path": "registry/component-breadcrumb-item/BreadcrumbItem.ts", "type": "registry:component", "target": "components/astryx/BreadcrumbItem.ts" } ], "astryx": { "kind": "component", "path": "components/breadcrumb-item", "aliases": [], "packageName": "@astryxdesign/core", "importPath": "@astryxdesign/core/Breadcrumbs", "hidden": false } }, { "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "component-breadcrumbs", "type": "registry:component", "title": "Breadcrumbs", "description": "Navigation container that renders a