@gradeui/ui 2.1.0 → 3.0.0

package/README.md

@@ -27,23 +27,16 @@ export default function Example() {
 }
 ```
 
-### Tailwind preset
+### Styles
 
-If you're using Tailwind in your consuming app, extend the Grade preset so brand tokens and OKLCH semantic colors resolve correctly:
+Import the compiled stylesheet once (e.g. in your root layout). It is fully self-contained — design tokens, the native Tailwind v4 `@theme` bridge, and every utility the components use are baked in; there is no JS Tailwind config to extend (the old `@gradeui/ui/tailwind-preset` export was retired with the v4 native-@theme migration):
 
 ```ts
-// tailwind.config.ts
-import gradePreset from "@gradeui/ui/tailwind-preset";
-
-export default {
-  presets: [gradePreset],
-  content: [
-    "./app/**/*.{ts,tsx,mdx}",
-    "./node_modules/@gradeui/ui/dist/**/*.{js,mjs}",
-  ],
-};
+import "@gradeui/ui/styles.css";
 ```
 
+If your app runs its own Tailwind v4 build alongside Grade, add a `@source` for `node_modules/@gradeui/ui/dist` so your scan picks up the library's class names — the brand and semantic tokens themselves already ship in the stylesheet as CSS variables (`--gds-*`, OKLCH role triplets).
+
 ## Theme engine
 
 `@gradeui/ui` ships an OKLCH-based theme generator. Wrap your app in `GradeThemeProvider` (currently still named `GradeThemeProvider` pending rename — see upstream TODO) to get runtime theme switching.

package/dist/contracts.js

@@ -75,7 +75,7 @@ already covers the trigger-with-badges shape.
 
 Use \`<Select>\` instead for SINGLE selection. Use \`<Command>\` directly
 (no MultiSelect wrapper) when the option set is unbounded or async
-(users to @-mention, email recipients, search-as-you-type API results).`,import:"@gradeui/ui",composesWith:["Popover","Command","Badge","Checkbox-style row indicator","Separator"],styleDefaults:{MultiSelect:"mr-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary"},props:{options:{schema:zod.z.unknown(),design:"plumbing"},value:{schema:zod.z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:zod.z.string().optional(),design:"content",description:"uncontrolled initial selection"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},placeholder:{schema:zod.z.string().optional(),design:"content",default:"Select\u2026"},searchPlaceholder:{schema:zod.z.string().optional(),design:"content",default:"Search\u2026"},emptyMessage:{schema:zod.z.string().optional(),design:"content",default:"Nothing matches."},maxCount:{schema:zod.z.number().optional(),design:"knob",description:'badges shown on the trigger before collapsing to "+N more"'},searchable:{schema:zod.z.boolean().optional(),design:"knob",description:"hide for short option lists",default:true},badgeDismissible:{schema:zod.z.boolean().optional(),design:"knob",description:"show \xD7 on each selected badge",default:true},disabled:{schema:zod.z.boolean().optional(),design:"knob"},modalPopover:{schema:zod.z.boolean().optional(),design:"knob",description:"Popover modal mode",default:false},className:{schema:zod.z.string().optional(),design:"plumbing"}}};var Ke={name:"Popover",description:'A floating panel anchored to a trigger that contains interactive content \u2014 date pickers, color pickers, filter pickers, "more info" panels, inline forms. Differs from Tooltip (hover-only, no focusable content) and Dialog (modal, blocks the page). DatePicker, DateRangePicker, and the Combobox pattern all compose Popover internally.',import:"@gradeui/ui",aliases:["popover","dropdown panel","floating panel","inline editor","attached panel","filter pop","popover view","popoverpresentation","attached popover","glass popover","frosted popover","inspector popover"],subcomponents:["PopoverTrigger","PopoverContent","PopoverAnchor"],composesWith:["Button (as trigger)","Calendar (date picker)","Command (combobox)","Form controls (inline edit popover)","Code (code-detail popovers)"],styleDefaults:{PopoverContent:"z-50 w-72 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]"},props:{open:{schema:zod.z.unknown().optional(),design:"plumbing"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"usually a Button"},side:{schema:zod.z.enum(["top","right","bottom","left","start","center","end"]).optional(),design:"knob"},surface:{schema:zod.z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the popover surface is *made of*. `solid` is the default opaque `bg-popover`. `translucent` is the Apple HIG menu-sheet feel. `glass` for floating panels over rich canvases (Studio inspector, image-tool palette)."}}};var Ye={name:"Progress",description:"Determinate progress \u2014 file uploads, multi-step forms, quota meters. Indeterminate state \u2192 use Skeleton or animated Loader icon.",import:"@gradeui/ui",aliases:["progress","progress view","progress indicator","progress bar","determinate progress","loading bar","completion bar"],composesWith:["Card (as a section)","Badge (showing % next to it)","Label (describing what's loading)"],styleDefaults:{Progress:"relative h-4 w-full overflow-hidden rounded-full bg-secondary"},props:{value:{schema:zod.z.number().optional(),design:"knob",description:"percent complete"},max:{schema:zod.z.number().optional(),design:"knob"},className:{schema:zod.z.string().optional(),design:"plumbing"}}};var Xe={name:"RadioCard",description:"Single-select where each option is a whole selectable card (shipping options, plan picker, onboarding choices). The whole card is the control, so focus and the checked state live on the card surface and the entire card is clickable. MUST sit inside a RadioGroup (keeps roving focus + single-select). Static content only \u2014 never nest an interactive control (Slider/Input/Button/link) inside. For a plain radio + label row use Field instead.",import:"@gradeui/ui",aliases:["radio card","selectable card","option card","plan picker","choice card","pricing tier","segmented choice card"],composesWith:["RadioGroup (required parent)","Badge (in aside)","MediaSurface (custom children)"],props:{value:{schema:zod.z.string(),design:"content",description:"the radio value"},label:{schema:zod.z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:zod.z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:zod.z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:zod.z.boolean().optional(),design:"knob",description:"hide the dot; selection shown by the card border + background"},indicatorPosition:{schema:zod.z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:zod.z.unknown().optional(),design:"plumbing",description:"arbitrary static content (image, custom layout) instead of label/description"}}};var Je={name:"RadioGroup",description:"A small set of mutually-exclusive options where the user needs to SEE all of them at once \u2014 pricing tiers (3-4 options), shipping speed, payment method radio cards. When each option should be a whole clickable card (label + description, selected state on the card), use RadioCard inside the RadioGroup instead of a Card with a radio in the corner. For a plain label + description row, wrap RadioGroupItem in Field. For 5+ options use Select. For a segmented control as part of a toolbar use ToggleGroup. For yes/no use Switch.",import:"@gradeui/ui",aliases:["radio group","radio buttons","single-choice","pricing options","payment method","radio buttons","radio control","single-select"],subcomponents:["RadioGroupItem"],composesWith:["Label (paired with each item via htmlFor)","Field (label + description row)","RadioCard (whole-card selectable option)","Stack (vertical list)"],styleDefaults:{RadioGroup:"grid gap-2",RadioGroupItem:"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"},props:{value:{schema:zod.z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:zod.z.string().optional(),design:"content",description:"uncontrolled initial"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},orientation:{schema:zod.z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"vertical"},name:{schema:zod.z.string().optional(),design:"content",description:"form name when posting natively"},id:{schema:zod.z.string().optional(),design:"plumbing",description:"pair with a <Label htmlFor> for click-on-label"}}};var Qe={name:"Resizable",description:`A multi-pane layout where the user wants to drag the divider \u2014 Slack/Mail-style list+detail, IDE editor+terminal, side-by-side compare view. Static layouts shouldn't use this \u2014 reach for AppShell with nav="three-pane" (fixed widths) or Grid (responsive ladder). Built on react-resizable-panels under the hood.`,import:"@gradeui/ui",aliases:["resizable","splitter","split pane","drag divider","adjustable panels","resizer","split view","draggable divider","split pane resizer","ns split view"],subcomponents:["ResizablePanelGroup","ResizablePanel","ResizableHandle"],composesWith:["AppShellMain (host the splitter inside main)","ScrollArea (each panel's content)","Card"],styleDefaults:{ResizablePanelGroup:"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",ResizableHandle:"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90"},props:{direction:{schema:zod.z.enum(["horizontal","vertical"]),design:"knob",description:"required; sets the axis the user drags along"},autoSaveId:{schema:zod.z.string().optional(),design:"content",description:"persists user-adjusted sizes to localStorage under this id"},onLayout:{schema:zod.z.unknown().optional(),design:"event"},defaultSize:{schema:zod.z.number().optional(),design:"knob",description:"percent of group (0-100); siblings should sum to ~100"},minSize:{schema:zod.z.unknown().optional(),design:"plumbing",description:"percent bounds"},collapsible:{schema:zod.z.boolean().optional(),design:"knob",description:"allow this panel to collapse to zero"},collapsedSize:{schema:zod.z.unknown().optional(),design:"plumbing",description:"collapse behaviour controls"},withHandle:{schema:zod.z.boolean().optional(),design:"knob",description:"show a visible drag affordance (default just a hit-zone)"}}};var Ze={name:"RivePlayer",description:"Rive runtime wrapped in the shared media surface. Reach for Rive when you need interactive state-machine animations driven by scroll/hover/input. For non-interactive looping video, use VideoPlayer; for shader-driven backgrounds, use ThreeScene.",import:"@gradeui/ui",aliases:["rive","riv","animation","animated","lottie"],composesWith:["MediaSurface (internal)","Card","any container"],styleDefaults:{RiveInner:"absolute inset-0 flex items-end justify-end p-2"},props:{src:{schema:zod.z.string(),design:"content",description:"URL or path to the .riv file"},stateMachines:{schema:zod.z.union([zod.z.string(),zod.z.array(zod.z.string())]).optional(),design:"knob",description:"state machine(s) to run"},artboard:{schema:zod.z.string().optional(),design:"content",description:"artboard name; omit to use default"},controls:{schema:zod.z.boolean().optional(),design:"knob",description:"viewer mode by default; set true for play/pause overlay",default:false},autoPlay:{schema:zod.z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},loop:{schema:zod.z.boolean().optional(),design:"knob",default:true},pauseOffscreen:{schema:zod.z.boolean().optional(),design:"knob",default:true},fit:{schema:zod.z.enum(["contain","cover","fill","fitWidth","fitHeight","none"]).optional(),design:"knob",default:"contain"},stateMachineInputs:{schema:zod.z.unknown().optional(),design:"plumbing"},aspect:{schema:zod.z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"square"},radius:{schema:zod.z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"},poster:{schema:zod.z.string().optional(),design:"content",description:"image shown while the runtime loads"}}};var $e={name:"Row",description:"Horizontal composition \u2014 button groups, inline form rows, logo + nav rows, anything on one line. Reach for Row instead of `flex items-center gap-*` so the alignment and spacing are editable through the settings panel. For two-pane layouts with an explicit ratio (sidebar + content, 1/3 + 2/3) use Split instead \u2014 Row evenly flows whatever children it holds.",import:"@gradeui/ui",aliases:["row","hstack","horizontal","inline","horizontal layout","hstack","h-stack","horizontal stack","lazyhstack"],composesWith:["Button","Input","NavItem","Stack (can wrap a Row)","any content component"],styleDefaults:{Row:"gds-row flex flex-row gap-4 items-center justify-start"},variantDefaults:{gap:"md",align:"center",justify:"start"},props:{gap:{schema:zod.z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between children",default:"md"},align:{schema:zod.z.enum(["start","center","end","stretch","baseline"]).optional(),design:"knob",description:"cross-axis (vertical) alignment",default:"center"},justify:{schema:zod.z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:"main-axis distribution",default:"start"},wrap:{schema:zod.z.boolean().optional(),design:"knob",description:"allow children to wrap onto additional lines when they overflow",default:false},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:zod.z.string().optional(),design:"plumbing"},children:{schema:zod.z.unknown(),design:"plumbing"}}};var et={name:"ScreenAnimator",description:'Wrap ANY screen or section in a directed camera \u2014 a "live demo',import:"@gradeui/ui",aliases:["screen animator","camera","camera tour","director","demo","product demo","zoom pan","spotlight","ken burns","presenter"],composesWith:["AppShell","ThreeScene","Card","Grid","the whole component set (it wraps a screen)"],styleDefaults:{ScreenAnimator:"gds-screen-animator"},props:{shots:{schema:zod.z.unknown().optional(),design:"plumbing",description:"the tour. Each"}}};var tt={name:"ScrollArea",description:"Bounded content that needs custom scroll chrome \u2014 sidebars with long item lists, chat transcripts, table panels inside a dashboard, anywhere the OS scrollbar would feel out of place against the design tokens. The wrapping element has to have a height constraint (`h-`, `max-h-`, or grid row sizing) or nothing scrolls \u2014 scroll-area can't infer a bound on its own. For body-level scrolling, leave the document to the browser.",import:"@gradeui/ui",aliases:["scroll area","scroll container","custom scrollbar","sidebar scroll","panel scroll","scroll view","scrollview","react native scrollview"],subcomponents:["ScrollBar"],composesWith:["Card (long card body)","AppShellNav (long sidebar)","Sheet (long modal body)","Table (sticky-header scrolling list)"],styleDefaults:{ScrollArea:"relative overflow-hidden",ScrollBar:"flex touch-none select-none transition-colors"},props:{type:{schema:zod.z.enum(["auto","always","scroll","hover"]).optional(),design:"knob",description:"when the scrollbar shows"},scrollHideDelay:{schema:zod.z.number().optional(),design:"knob",description:'ms before "scroll"/"hover" scrollbars fade'},dir:{schema:zod.z.enum(["ltr","rtl"]).optional(),design:"plumbing"},className:{schema:zod.z.string().optional(),design:"plumbing",description:"set a height/max-height here, otherwise nothing scrolls"},orientation:{schema:zod.z.enum(["vertical","horizontal"]).optional(),design:"knob",default:"vertical"}}};var ot={name:"SectionBlock",description:'The top-level container for a marketing page section \u2014 hero, feature row, pricing table, testimonial strip, FAQ section. Always reach for SectionBlock over a hand-rolled `<section>` so vertical rhythm, container width, and tonal background stay consistent across the page. Pair `background="gradient"` + `surface="glass"` inner Cards for the "modern marketing hero" pattern.',import:"@gradeui/ui",aliases:["section","section block","hero section","marketing section","page section","content section","container section","feature section","hero","page hero","marketing hero","glass section","gradient section","mesh hero"],composesWith:['Card (the most common child \u2014 especially with surface="glass")',"Grid (feature rows)","Stack (hero column)","MediaSurface (hero imagery)","Code (developer hero)","Carousel (logo strips)"],styleDefaults:{SectionBlock:"relative w-full py-16 md:py-24 bg-transparent"},variantDefaults:{padding:"lg",background:"transparent"},props:{padding:{schema:zod.z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"vertical rhythm. Defaults to `lg`."},background:{schema:zod.z.enum(["transparent","muted","card","primary","gradient"]).optional(),design:"knob",description:"tonal direction of the section bg."},surface:{schema:zod.z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the section is *made of*. Orthogonal to `background`. Use `glass` for hero sections that float over a generative backdrop / image / dot grid."},container:{schema:zod.z.enum(["default","wide","narrow","full"]).optional(),design:"knob",description:"max-width of the inner content."},alignment:{schema:zod.z.enum(["left","center","right"]).optional(),design:"knob",description:"header / CTA alignment."},titleSize:{schema:zod.z.enum(["sm","md","lg","xl"]).optional(),design:"knob"},title:{schema:zod.z.string().optional(),design:"plumbing"},subtitle:{schema:zod.z.string().optional(),design:"content"},cta1:{schema:zod.z.unknown().optional(),design:"plumbing",description:"string or `{ text, variant, href, onClick }` config"},backgroundImage:{schema:zod.z.string().optional(),design:"content",description:"direct CSS background image url"},as:{schema:zod.z.enum(["section","div","article"]).optional(),design:"knob",description:"semantic root"},fullBleed:{schema:zod.z.boolean().optional(),design:"knob"}}};var nt={name:"Select",description:'Single-choice from 3+ known options. Fewer than 3 \u2192 RadioGroup. Huge list with search \u2192 use a Combobox (not in DS yet). Multi-select \u2192 not supported by this primitive. In dense tool panels, set size="xs" on BOTH the trigger and the content so the closed control and open menu match.',import:"@gradeui/ui",aliases:["dropdown","combobox","picker","select","pop-up button","popup button","popup picker","picker view","rnpickerselect","react native picker","native picker"],subcomponents:["SelectTrigger","SelectValue","SelectContent","SelectItem","SelectGroup","SelectLabel","SelectSeparator"],composesWith:["Label (above SelectTrigger)","Form","Card"],styleDefaults:{SelectTrigger:"flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 h-10 px-3 py-2 text-sm",SelectScrollUpButton:"flex cursor-default items-center justify-center py-1",SelectScrollDownButton:"flex cursor-default items-center justify-center py-1",SelectContent:"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",SelectLabel:"py-1.5 pl-8 pr-2 text-sm font-semibold",SelectItem:"relative flex w-full cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 py-1.5 pl-8 pr-2 text-sm",SelectSeparator:"-mx-1 my-1 h-px bg-muted"},props:{value:{schema:zod.z.unknown().optional(),design:"plumbing",description:"Radix root"},size:{schema:zod.z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density; wraps the clickable control, nest SelectValue inside"},placeholder:{schema:zod.z.string().optional(),design:"content",description:"text when nothing is selected"}}};var it={name:"Separator",description:"Light divider between sibling blocks in a Card, list, or header. For section-level partition use extra spacing instead.",import:"@gradeui/ui",aliases:["divider","rule","hr","line","horizontal rule"],composesWith:["Card (between CardHeader/Content/Footer)","navigation menus","any vertical stacks"],styleDefaults:{Separator:"shrink-0 bg-border"},props:{orientation:{schema:zod.z.enum(["horizontal","vertical"]).optional(),design:"knob",description:'default "horizontal"'},decorative:{schema:zod.z.boolean().optional(),design:"knob",description:"hide from a11y tree",default:true},className:{schema:zod.z.string().optional(),design:"plumbing"}}};var at={name:"ShaderPresetPicker",description:"Runtime gallery of shader presets \u2014 click to select. Use with ThreeScene as a controlled input so the user can pick a background shader. For a single preview card, use ShaderPresetPreview directly.",import:"@gradeui/ui",aliases:["shader picker","preset picker","shader gallery","preset gallery"],composesWith:["ShaderPresetPreview (internal)","ThreeScene (the typical downstream consumer)"],styleDefaults:{ShaderPresetPicker:"grid grid-cols-2 gap-3"},props:{value:{schema:zod.z.string().optional(),design:"content",description:"currently selected preset id (controlled)"},onChange:{schema:zod.z.unknown().optional(),design:"event",description:"called when the user clicks a preset card"},filterTags:{schema:zod.z.string().optional(),design:"content",description:'only show presets matching at least one tag ("space" | "retro" | "motion" | "hero" | "background" \u2026)'},live:{schema:zod.z.enum(["never","hover","always"]).optional(),design:"knob",description:"thumbnail render mode",default:"hover"},postPreset:{schema:zod.z.string().optional(),design:"content",description:"shared post-FX preset applied to every thumbnail"},palette:{schema:zod.z.unknown().optional(),design:"plumbing",description:"shared palette applied to every thumbnail"},columns:{schema:zod.z.unknown().optional(),design:"plumbing",description:"grid columns at md+ breakpoint"}}};var rt={name:"ShaderPresetPreview",description:"Thumbnail-sized preview card for a shader preset. Defaults to a cheap static placeholder until hovered, at which point the live WebGL render kicks in. Use directly when you want a single preset card; use ShaderPresetPicker for a filterable grid.",import:"@gradeui/ui",aliases:["shader preview","preset preview","shader card"],composesWith:["ThreeScene (internal)","ShaderPresetPicker (wraps this)"],styleDefaults:{ShaderPresetPreview:"group cursor-pointer flex flex-col gap-2"},props:{preset:{schema:zod.z.string(),design:"content",description:"shader preset id from the registry"},live:{schema:zod.z.enum(["never","hover","always"]).optional(),design:"knob",description:"when to run the live WebGL render",default:"hover"},postPreset:{schema:zod.z.string().optional(),design:"content",description:"override the preset's default post-FX"},palette:{schema:zod.z.unknown().optional(),design:"plumbing",description:"palette overrides for the preview"},aspect:{schema:zod.z.enum(["video","square","portrait","wide"]).optional(),design:"knob",default:"video"},hideLabel:{schema:zod.z.boolean().optional(),design:"knob",description:"hide the label strip under the preview",default:false},onClick:{schema:zod.z.unknown().optional(),design:"event"}}};var st={name:"Sheet",description:"A panel that slides in from a screen edge \u2014 mobile nav drawers, side panels for editing a single record without leaving the list, filter trays on small viewports, Studio-style inspector panels. For a centered focus modal use Dialog. For a transient announcement use Toast (Sonner). For inline reveals use Collapsible.",import:"@gradeui/ui",aliases:["sheet","drawer","side panel","slide-in","nav drawer","mobile drawer","slide-over","action sheet","modal sheet","bottom sheet","side sheet","react native modal sheet","bottom-sheet","ios action sheet","inspector panel","glass sheet","frosted drawer"],subcomponents:["SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetDescription","SheetFooter","SheetClose"],composesWith:["Form controls (an inline edit sheet)","Button (trigger + close)","AppShellNav (mobile-only swap)","Code (changelog drawers)","MediaSurface (image-detail sheets)"],styleDefaults:{SheetOverlay:"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",SheetContent:"fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",SheetHeader:"flex flex-col space-y-2 text-center sm:text-left",SheetFooter:"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",SheetTitle:"text-lg font-semibold text-foreground",SheetDescription:"text-sm text-muted-foreground"},props:{open:{schema:zod.z.unknown().optional(),design:"plumbing"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing"},side:{schema:zod.z.enum(["top","right","bottom","left"]).optional(),design:"knob",default:"right"},surface:{schema:zod.z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the sheet panel is *made of*. `solid` is the default opaque `bg-background`. Reach for `glass` whenever the canvas behind the sheet (a layout in progress, a media gallery, a dashboard) should remain visible."},className:{schema:zod.z.string().optional(),design:"plumbing",description:"usually set a width (right/left) or height (top/bottom)"},SheetTitle:{schema:zod.z.unknown(),design:"plumbing"}}};var lt={name:"Sidebar",description:'Vertical app navigation. Drop inside `<AppShellNav placement="side">` for full-page layouts. Compound API \u2014 `<SidebarHeader>` for brand, `<SidebarContent>` for the scrollable body of `<SidebarSection>` + `<SidebarItem>` rows, `<SidebarFooter>` for user / settings chrome. For top nav reach for TopMenu; for command-palette style search reach for Command.',import:"@gradeui/ui",aliases:["sidebar","side menu","sidemenu","navigation sidebar","app sidebar","side nav","side nav rail","master pane","sidebarmenu","navigation rail","react native drawer"],subcomponents:["SidebarHeader","SidebarContent","SidebarFooter","SidebarSection","SidebarItem"],composesWith:["AppShell (inside AppShellNav)","Avatar (in Footer)","Tooltip (auto-wrapped on collapsed items)","Button (asChild for custom routing)"],styleDefaults:{Sidebar:"relative flex h-full flex-col bg-card text-card-foreground",SidebarHeader:"flex shrink-0 items-center border-b border-border",SidebarContent:"flex-1 overflow-y-auto overflow-x-hidden",SidebarFooter:"shrink-0 border-t border-border",SidebarSection:"px-[var(--gds-sidebar-section-px,0.5rem)] space-y-[var(--gds-sidebar-section-gap,0.125rem)]",SidebarItem:"group flex items-center gap-2.5 rounded-md transition-colors",SidebarTreeItem:"group flex w-full items-center gap-1.5 rounded-md py-1 text-sm font-medium transition-colors"},props:{collapsed:{schema:zod.z.boolean().optional(),design:"knob",description:"controlled collapsed state (wire onCollapsedChange when set)"},defaultCollapsed:{schema:zod.z.boolean().optional(),design:"knob",description:"uncontrolled initial value (default false)"},onCollapsedChange:{schema:zod.z.unknown().optional(),design:"event"},collapsible:{schema:zod.z.boolean().optional(),design:"knob",description:"show the affordance for the user to collapse (default true)"},variant:{schema:zod.z.enum(["rail","panel"]).optional(),design:"knob",description:'outer chrome treatment. `rail` (default) is the classic nav rail with a single right-border + tracked width via `--gds-sidebar-width`; drops cleanly into `<AppShellNav placement="side">`. `panel` is a card-style floating sidebar with full border + rounded corners + parent-controlled width; use when the sidebar is one of several adjacent panes in a body row (e.g. Projects | Canvas | Settings). The compound children (Header/Content/Footer/Section/Item) are identical in both treatments.'},any:{schema:zod.z.unknown(),design:"plumbing",description:"brand / logo / org switcher; hides nothing when collapsed (centred)"},title:{schema:zod.z.unknown().optional(),design:"plumbing",description:'group label; **uppercase tracking-wide muted** styling auto-applied (Notion / Linear / Slack-style "GAMES", "FAVORITES", "WORKSPACE" headers); hidden when sidebar is collapsed'},icon:{schema:zod.z.unknown().optional(),design:"plumbing",description:"optional icon beside the title"},trailing:{schema:zod.z.unknown().optional(),design:"plumbing",description:`**action(s) on the right edge of the header** \u2014 the canonical "+" / "..." slot (Notion's "+ Add page" next to Pages, Linear's "+" next to Favorites, Slack's "+" next to Channels). Pointer events isolated so a Button here doesn't toggle collapse.`},defaultExpanded:{schema:zod.z.boolean().optional(),design:"knob",description:"initial open state (default true)"},badge:{schema:zod.z.unknown().optional(),design:"plumbing",description:"trailing count / label (hidden when collapsed)"},active:{schema:zod.z.boolean().optional(),design:"knob",description:'current route; adds aria-current="page"'},href:{schema:zod.z.string().optional(),design:"content",description:"renders as <a>; for routing use `asChild` with your link component"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"wrap a custom link (<Link href> from Next.js etc.) via Radix Slot"},asButton:{schema:zod.z.boolean().optional(),design:"knob",description:"render as <button> for action rows (open dialog, log out)"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},collapsedLabel:{schema:zod.z.unknown().optional(),design:"plumbing",description:"tooltip override when sidebar is collapsed (defaults to children text)"},size:{schema:zod.z.enum(["sm","md"]).optional(),design:"knob",description:"row size. `md` (default) is the standard `text-sm font-medium` nav row; `sm` is `text-xs` + lighter weight + tighter padding for visually subordinate rows (nested screens under a project, sub-pages under a section). Active state still wins on color + weight so the current row pops at either size."},description:{schema:zod.z.unknown().optional(),design:"plumbing",description:"secondary line beneath the label (metadata like 'Edited 2m ago', '12 items', a brief description). Row layout adapts: label + description stacked vertically; icon vertically-centered against the stack; badge stays on trailing edge. Hidden when sidebar collapsed."}}};var dt={name:"Skeleton",description:'Loading placeholder for content whose shape you know. Set width/height via className to mimic the real content (e.g. "h-4 w-32"). Not a spinner \u2014 use it where the real thing will drop in.',import:"@gradeui/ui",aliases:["placeholder","shimmer","loader","loading state","redacted","redacted placeholder","shimmer placeholder","content placeholder","lottie placeholder"],composesWith:["Card","Avatar (inside a Skeleton for avatar loading)","any layout"],styleDefaults:{Skeleton:"animate-pulse rounded-md bg-muted"},props:{className:{schema:zod.z.string().optional(),design:"plumbing",description:"required in practice; supply width/height utilities"}}};var ct={name:"Slider",description:'A continuous-ish numeric pick \u2014 volume, opacity, font size, price-range filters. Use a single-thumb slider for one value, two-thumb for a range. For a small set of discrete options (1-5 stars, sm/md/lg) prefer ToggleGroup. For free-text numeric entry use an Input type="number".',import:"@gradeui/ui",aliases:["slider","range slider","range input","volume","opacity slider","scrub","drag value","slider control","value slider","react native slider"],composesWith:["Label (mandatory above)","Row (label + current value display)","Card (settings rows)"],styleDefaults:{Slider:"relative flex w-full touch-none select-none items-center"},props:{value:{schema:zod.z.number().optional(),design:"knob",description:"controlled value; ALWAYS an array even for a single-thumb slider (`[50]`)"},defaultValue:{schema:zod.z.number().optional(),design:"knob",description:"uncontrolled initial; `[20, 80]` for a two-thumb range"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},min:{schema:zod.z.number().optional(),design:"knob"},max:{schema:zod.z.number().optional(),design:"knob"},step:{schema:zod.z.number().optional(),design:"knob"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},orientation:{schema:zod.z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"horizontal"},dir:{schema:zod.z.enum(["ltr","rtl"]).optional(),design:"plumbing"},inverted:{schema:zod.z.boolean().optional(),design:"knob",description:"flip the visual direction"},name:{schema:zod.z.string().optional(),design:"content",description:"form name when posting natively"}}};var pt={name:"Sortable",description:"Drag-to-reorder lists, kanban-column reordering, sortable shelves, tab strips the user can rearrange. Pairs with any layout primitive \u2014 Stack for vertical lists, Row for horizontal strips, Grid for 2D card walls. For cross-container drag (drag a card from one column to another) hand-roll DndContext at the page level \u2014 Sortable v1 covers single-list reorder; Sortable.Group for cross-container is a planned follow-up. Reach for raw `@dnd-kit/core` if you need custom collision detection, drag overlays with arbitrary chrome, or non-list use cases (kanban swimlanes, draggable canvas nodes).",import:"@gradeui/ui",aliases:["sortable","reorder","drag and drop","dnd","draggable list","sortable list","kanban","drag to reorder","drag-drop","dragdroplist","drag handle","react native draggable flatlist"],subcomponents:["Sortable.Item","Sortable.Handle"],composesWith:["Stack (vertical lists)","Row (horizontal strips)","Grid (2D card walls)","Card (typical item content)","Button (as Sortable.Handle asChild)"],styleDefaults:{SortableHandle:"cursor-grab touch-none select-none"},props:{values:{schema:zod.z.unknown(),design:"plumbing",description:"ordered list of unique ids; the source of truth for the order"},onReorder:{schema:zod.z.unknown().optional(),design:"event",description:"fires with the new order after a drag that changed it"},strategy:{schema:zod.z.enum(["vertical","horizontal","grid"]).optional(),design:"knob",description:"match the layout your items render in",default:"vertical"},disabled:{schema:zod.z.boolean().optional(),design:"knob",description:"disable drag on every item"},Sortable:{schema:zod.z.unknown(),design:"plumbing",description:"must match one entry in the parent `values` array (identity, not React key)"}}};var mt={name:"Stack",description:"Default top-level layout inside the main slot when composing two or more stacked regions (hero + content + footer, auth card + subtext, etc.). Prefer Stack over hand-rolled `flex flex-col gap-*` so the vertical rhythm is editable through the settings panel.",import:"@gradeui/ui",aliases:["stack","vstack","vertical","column","vertical layout","v-stack","vertical stack","lazyvstack"],composesWith:["Section","Row","Split","Hero","any content component"],props:{gap:{schema:zod.z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"vertical gap between children",default:"md"},align:{schema:zod.z.enum(["start","center","end","stretch"]).optional(),design:"knob",description:"cross-axis (horizontal) alignment of children",default:"stretch"},justify:{schema:zod.z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:'main-axis (vertical) distribution. Reach for this on absolute-positioned overlays (`justify="end"` pins children to the bottom) and split footers (`justify="between"`).',default:"start"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot, so `<Stack asChild><section>\u2026</section></Stack>` stamps Stack's classes onto the `<section>` rather than nesting a wrapper div",default:false},className:{schema:zod.z.string().optional(),design:"plumbing"},children:{schema:zod.z.unknown(),design:"plumbing"}}};var ut={name:"Switch",description:'Instant on/off setting ("Enable notifications", "Dark mode"). Commits on toggle \u2014 no submit button needed. For selecting-from-a-list use Checkbox. For a settings row (label + description on the left, Switch on the right) use Field layout="setting". For a prominent on/off presented as a whole selectable card, use SwitchCard.',import:"@gradeui/ui",aliases:["toggle","switch","on/off switch","ios toggle","toggle switch","switch control","react native switch"],composesWith:["Label (via htmlFor)",'Field (layout="setting" settings row)',"SwitchCard (whole-card toggle)","Card (settings rows)"],styleDefaults:{Switch:"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-6 w-11"},variantDefaults:{size:"default"},props:{checked:{schema:zod.z.boolean().optional(),design:"knob"},onCheckedChange:{schema:zod.z.unknown().optional(),design:"event"},defaultChecked:{schema:zod.z.boolean().optional(),design:"knob"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},id:{schema:zod.z.string().optional(),design:"plumbing"}}};var ht={name:"SwitchCard",description:'A prominent on/off setting presented as a whole selectable card. The whole card is the switch, so the toggled state lives on the card surface. Standalone. For a row of compact settings (label left, small Switch right) use Field layout="setting" instead \u2014 SwitchCard is for the heavier, card-sized toggle.',import:"@gradeui/ui",aliases:["switch card","toggle card","setting card","feature toggle card"],composesWith:["Badge (in aside)","Stack (stacking several)"],props:{checked:{schema:zod.z.unknown().optional(),design:"plumbing",description:"standard switch state"},label:{schema:zod.z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:zod.z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:zod.z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:zod.z.boolean().optional(),design:"knob",description:"hide the switch glyph; state shown by the card border + background"},indicatorPosition:{schema:zod.z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:zod.z.unknown().optional(),design:"plumbing",description:"arbitrary static content instead of label/description"}}};var bt={name:"Table",description:"Structured tabular data \u2014 rows \xD7 columns with alignment requirements. NOT a layout grid \u2014 for that use div+Tailwind grid utilities. Keep to <100 rows; larger datasets need virtualisation (not in DS).",import:"@gradeui/ui",aliases:["table","table view","data table","datatable","grid view","data grid","rows and columns"],subcomponents:["TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],composesWith:["Card (wrap the table)","Badge (inside TableCell for status)","Checkbox (row selection)","Button (row actions)"],styleDefaults:{Table:"w-full caption-bottom text-sm",TableHeader:"[&_tr]:border-b",TableBody:"[&_tr:last-child]:border-0",TableFooter:"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",TableRow:"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",TableHead:"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCell:"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCaption:"mt-4 text-sm text-muted-foreground"},props:{Each:{schema:zod.z.unknown(),design:"plumbing"},No:{schema:zod.z.unknown(),design:"plumbing",description:"styling follows the active theme tokens"}}};var ft={name:"Tabs",description:'A small set of peer views within one surface (2\u20135 tabs). For primary nav use Side Menu/routing. For filters use a filter control, not tabs. Pick `variant="pill"` for app chrome (settings panels, in-card tab strips). Pick `variant="underlined"` for marketing/docs pages and browser-tab-style treatments.',import:"@gradeui/ui",aliases:["tabs","tab strip","tab bar","tab view","tabbed interface","pageviewcontroller","react native tab view","underlined tabs","page tabs","segment switcher","simple tabs"],subcomponents:["TabsList","TabsTrigger","TabsContent"],composesWith:["Card (tabs inside a card body)","Dialog","TooltipProvider (required for tooltip prop)"],styleDefaults:{TabsList:"inline-flex items-center text-muted-foreground justify-center rounded-lg bg-muted",TabsContent:"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"},props:{defaultValue:{schema:zod.z.unknown().optional(),design:"plumbing"},size:{schema:zod.z.enum(["sm","md","lg, default md"]).optional(),design:"knob",description:"t-shirt scale aligned with Button/ToggleGroup heights; cascades to every TabsTrigger via context so set it once on the list"},variant:{schema:zod.z.enum(["pill","underlined, default pill"]).optional(),design:"knob",description:"`pill` is the shadcn chip-on-muted look; `underlined` is the minimal text + bottom-border treatment (formerly the separate SimpleTabs component, collapsed into Tabs in May 2026). Cascades to triggers."},value:{schema:zod.z.string(),design:"content",description:"matches a TabsContent value; tooltip?: string \u2014 when set, wraps the trigger in the design-system Tooltip and auto-applies aria-label (useful for icon-only triggers); requires a TooltipProvider somewhere above the tabs"}}};var wt={name:"Textarea",description:'Multi-line text entry (descriptions, messages, comments). Pair with a Label. Single-line input \u2192 use Input instead. Use size="sm"/"xs" in dense tool panels.',import:"@gradeui/ui",aliases:["text area","multiline","comment box","message field","text editor","multi-line text","multiline input","multiline text field","comments box","multiline textinput"],composesWith:["Label","Form","Card (in CardContent)"],styleDefaults:{Textarea:"flex w-full rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px] px-3 py-2 text-sm"},variantDefaults:{size:"default"},props:{size:{schema:zod.z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density, mirrors Input. default = min-h-80 / text-sm; sm and xs shrink the min-height + padding for dense panels."}}};var vt={name:"ThreeScene",description:"WebGL primitive for shader backgrounds, generative visuals, and bespoke three.js scenes. Three authoring paths, in order of preference \u2014 (1) pick a `preset` id; (2) if nothing in the registry fits, write a `fragmentShader` against the fixed uniform contract; (3) only as a last resort, pass a full `createScene` factory. For looping video, use VideoPlayer; for interactive animations, use RivePlayer.",import:"@gradeui/ui",aliases:["three","threejs","webgl","shader","scene","3d","generative","hero background","fragment shader","glsl"],composesWith:["MediaSurface (internal)","foreground content stacked above with `position: absolute/relative z-10`"],styleDefaults:{ThreeScene:"absolute inset-0 flex items-end justify-end p-2"},props:{preset:{schema:zod.z.enum(["mesh","waves","space","plasma","voronoi","synthwave"]).optional(),design:"knob",description:"shader preset id from the registry"},fragmentShader:{schema:zod.z.string().optional(),design:"content",description:"user-authored GLSL body; takes precedence over preset"},onShaderError:{schema:zod.z.unknown().optional(),design:"event",description:'fires on compile failure; scene falls back to `preset="space"`'},postPreset:{schema:zod.z.enum(["none","vhs","cinematic","synthwave","crt"]).optional(),design:"knob",description:"post-processing pass",default:"vhs"},palette:{schema:zod.z.unknown().optional(),design:"plumbing",description:"any CSS-legal colour string per slot. Re-tints automatically when the theme changes. Unset slots fall back to defaults."},createScene:{schema:zod.z.unknown().optional(),design:"plumbing",description:"custom full scene factory; takes precedence over preset AND fragmentShader"},controls:{schema:zod.z.boolean().optional(),design:"knob",description:"play/pause overlay",default:false},autoPlay:{schema:zod.z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},pauseOffscreen:{schema:zod.z.boolean().optional(),design:"knob",description:"big win for WebGL battery life",default:true},aspect:{schema:zod.z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"video"},maxDpr:{schema:zod.z.number().optional(),design:"knob",description:"lower for thumbnails / low-end devices"},radius:{schema:zod.z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"}}};var kt={name:"Toast",description:'Transient, non-blocking feedback that confirms or warns about an action \u2014 "Saved", "Failed to upload", "Copied to clipboard", "Invitation sent". For permanent inline messages reach for Callout. For confirmations that block until acknowledged use Dialog. Mount <Toaster /> ONCE at the root of the app; everywhere else, call the `toast` helper.',import:"@gradeui/ui",aliases:["toast","toaster","sonner","notification","snackbar","alert toast","transient alert","transient banner","banner notification","toastandroid"],composesWith:["App root layout (single <Toaster /> mount)","Form submit handlers (success/error toasts)","Async actions"],props:{position:{schema:zod.z.enum(["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"]).optional(),design:"knob",default:"bottom-right"},theme:{schema:zod.z.enum(["light","dark","system"]).optional(),design:"knob"},richColors:{schema:zod.z.boolean().optional(),design:"knob",description:"colored variants for success/error/warning/info"},expand:{schema:zod.z.boolean().optional(),design:"knob",description:"keep multiple toasts visually separated rather than stacked"},visibleToasts:{schema:zod.z.number().optional(),design:"knob",description:"max concurrent toasts on screen (default 3)"},duration:{schema:zod.z.number().optional(),design:"knob",description:"default ms before auto-dismiss"}}};var yt={name:"Toggle",description:`A standalone on/off button \u2014 Bold/Italic in a toolbar, "Show grid" in a header, single binary toggle that doesn't belong inside a Switch row. For two-or-more mutually-exclusive options use ToggleGroup. For a labeled settings switch ("Active: on/off") use Switch.`,import:"@gradeui/ui",aliases:["toggle","toggle button","press button","bold button","italic button"],composesWith:["Tooltip (wrap an icon-only Toggle)","Row","TabsList (sibling)"],styleDefaults:{Toggle:"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-transparent h-9 px-2 min-w-9"},variantDefaults:{variant:"default",size:"default"},props:{variant:{schema:zod.z.enum(["default","outline"]).optional(),design:"knob",description:"outline adds a border, default is borderless and ghost-like"},size:{schema:zod.z.enum(["default","sm","lg"]).optional(),design:"knob"},pressed:{schema:zod.z.boolean().optional(),design:"knob",description:"controlled pressed state"},defaultPressed:{schema:zod.z.boolean().optional(),design:"knob",description:"uncontrolled initial state"},onPressedChange:{schema:zod.z.unknown().optional(),design:"event"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},children:{schema:zod.z.unknown(),design:"plumbing",description:"usually an icon or short label"}}};var Ct={name:"ToggleGroup",description:'A small set of mutually-exclusive (`type="single"`) or independent (`type="multiple"`) binary options that live side-by-side as a segmented control \u2014 viewport size picker (Mobile/Tablet/Desktop), text alignment, view density. Reads identically to a TabsList of the same size; reach for ToggleGroup when each option emits a value (like a form input) rather than swapping panels. Use Tabs for panel switching, Toggle for a single on/off.',import:"@gradeui/ui",aliases:["toggle group","segmented control","segmented buttons","button group","pill group","view selector","segmented picker","segmentedcontrolios","segmented buttons group","rn segmented control"],subcomponents:["ToggleGroupItem"],composesWith:["Card (header controls)","Row","AppShellHeader chrome","settings panels"],styleDefaults:{ToggleGroup:"inline-flex items-center justify-center rounded-lg bg-muted text-muted-foreground h-8 p-0.5",ToggleGroupItem:"inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[state=on]:bg-background data-[state=on]:text-foreground h-7 px-2 text-xs gap-1.5 [&_svg]:size-3.5"},variantDefaults:{size:"md"},props:{type:{schema:zod.z.enum(["single","multiple"]),design:"knob",description:"single picks one, multiple picks any number"},value:{schema:zod.z.union([zod.z.string(),zod.z.array(zod.z.string())]).optional(),design:"knob",description:"controlled; matches `type` (string for single, string[] for multiple)"},defaultValue:{schema:zod.z.union([zod.z.string(),zod.z.array(zod.z.string())]).optional(),design:"knob",description:"uncontrolled initial"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},size:{schema:zod.z.enum(["sm","md","lg, default md"]).optional(),design:"knob",description:"cascades to every ToggleGroupItem via context, matches Tabs/Button heights"},variant:{schema:zod.z.enum(["default","outline"]).optional(),design:"knob"},tooltip:{schema:zod.z.unknown().optional(),design:"plumbing",description:"when set, wraps the item in a Tooltip; required for icon-only items where the visible chrome doesn't carry a label"},tooltipSide:{schema:zod.z.enum(["top","right","bottom",'left", default "top']).optional(),design:"knob",description:"side the tooltip renders on"},tooltipDelay:{schema:zod.z.number().optional(),design:"knob",description:"per-item delay override; falls back to the upstream TooltipProvider's delayDuration"}}};var xt={name:"Toolbar",description:`ANY three-region chrome bar \u2014 the leading/center/trailing pattern Apple HIG
+(users to @-mention, email recipients, search-as-you-type API results).`,import:"@gradeui/ui",composesWith:["Popover","Command","Badge","Checkbox-style row indicator","Separator"],styleDefaults:{MultiSelect:"mr-2 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary"},props:{options:{schema:zod.z.unknown(),design:"plumbing"},value:{schema:zod.z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:zod.z.string().optional(),design:"content",description:"uncontrolled initial selection"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},placeholder:{schema:zod.z.string().optional(),design:"content",default:"Select\u2026"},searchPlaceholder:{schema:zod.z.string().optional(),design:"content",default:"Search\u2026"},emptyMessage:{schema:zod.z.string().optional(),design:"content",default:"Nothing matches."},maxCount:{schema:zod.z.number().optional(),design:"knob",description:'badges shown on the trigger before collapsing to "+N more"'},searchable:{schema:zod.z.boolean().optional(),design:"knob",description:"hide for short option lists",default:true},badgeDismissible:{schema:zod.z.boolean().optional(),design:"knob",description:"show \xD7 on each selected badge",default:true},disabled:{schema:zod.z.boolean().optional(),design:"knob"},modalPopover:{schema:zod.z.boolean().optional(),design:"knob",description:"Popover modal mode",default:false},className:{schema:zod.z.string().optional(),design:"plumbing"}}};var Ke={name:"Popover",description:'A floating panel anchored to a trigger that contains interactive content \u2014 date pickers, color pickers, filter pickers, "more info" panels, inline forms. Differs from Tooltip (hover-only, no focusable content) and Dialog (modal, blocks the page). DatePicker, DateRangePicker, and the Combobox pattern all compose Popover internally.',import:"@gradeui/ui",aliases:["popover","dropdown panel","floating panel","inline editor","attached panel","filter pop","popover view","popoverpresentation","attached popover","glass popover","frosted popover","inspector popover"],subcomponents:["PopoverTrigger","PopoverContent","PopoverAnchor"],composesWith:["Button (as trigger)","Calendar (date picker)","Command (combobox)","Form controls (inline edit popover)","Code (code-detail popovers)"],styleDefaults:{PopoverContent:"z-50 w-72 rounded-md border p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-popover-content-transform-origin]"},props:{open:{schema:zod.z.unknown().optional(),design:"plumbing"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"usually a Button"},side:{schema:zod.z.enum(["top","right","bottom","left","start","center","end"]).optional(),design:"knob"},surface:{schema:zod.z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the popover surface is *made of*. `solid` is the default opaque `bg-popover`. `translucent` is the Apple HIG menu-sheet feel. `glass` for floating panels over rich canvases (Studio inspector, image-tool palette)."}}};var Ye={name:"Progress",description:"Determinate progress \u2014 file uploads, multi-step forms, quota meters. Indeterminate state \u2192 use Skeleton or animated Loader icon.",import:"@gradeui/ui",aliases:["progress","progress view","progress indicator","progress bar","determinate progress","loading bar","completion bar"],composesWith:["Card (as a section)","Badge (showing % next to it)","Label (describing what's loading)"],styleDefaults:{Progress:"relative h-4 w-full overflow-hidden rounded-full bg-secondary"},props:{value:{schema:zod.z.number().optional(),design:"knob",description:"percent complete"},max:{schema:zod.z.number().optional(),design:"knob"},className:{schema:zod.z.string().optional(),design:"plumbing"}}};var Xe={name:"RadioCard",description:"Single-select where each option is a whole selectable card (shipping options, plan picker, onboarding choices). The whole card is the control, so focus and the checked state live on the card surface and the entire card is clickable. MUST sit inside a RadioGroup (keeps roving focus + single-select). Static content only \u2014 never nest an interactive control (Slider/Input/Button/link) inside. For a plain radio + label row use Field instead.",import:"@gradeui/ui",aliases:["radio card","selectable card","option card","plan picker","choice card","pricing tier","segmented choice card"],composesWith:["RadioGroup (required parent)","Badge (in aside)","MediaSurface (custom children)"],props:{value:{schema:zod.z.string(),design:"content",description:"the radio value"},label:{schema:zod.z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:zod.z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:zod.z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:zod.z.boolean().optional(),design:"knob",description:"hide the dot; selection shown by the card border + background"},indicatorPosition:{schema:zod.z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:zod.z.unknown().optional(),design:"plumbing",description:"arbitrary static content (image, custom layout) instead of label/description"}}};var Je={name:"RadioGroup",description:"A small set of mutually-exclusive options where the user needs to SEE all of them at once \u2014 pricing tiers (3-4 options), shipping speed, payment method radio cards. When each option should be a whole clickable card (label + description, selected state on the card), use RadioCard inside the RadioGroup instead of a Card with a radio in the corner. For a plain label + description row, wrap RadioGroupItem in Field. For 5+ options use Select. For a segmented control as part of a toolbar use ToggleGroup. For yes/no use Switch.",import:"@gradeui/ui",aliases:["radio group","radio buttons","single-choice","pricing options","payment method","radio buttons","radio control","single-select"],subcomponents:["RadioGroupItem"],composesWith:["Label (paired with each item via htmlFor)","Field (label + description row)","RadioCard (whole-card selectable option)","Stack (vertical list)"],styleDefaults:{RadioGroup:"grid gap-2",RadioGroupItem:"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"},props:{value:{schema:zod.z.string().optional(),design:"content",description:"controlled selection"},defaultValue:{schema:zod.z.string().optional(),design:"content",description:"uncontrolled initial"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},orientation:{schema:zod.z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"vertical"},name:{schema:zod.z.string().optional(),design:"content",description:"form name when posting natively"},id:{schema:zod.z.string().optional(),design:"plumbing",description:"pair with a <Label htmlFor> for click-on-label"}}};var Qe={name:"Resizable",description:`A multi-pane layout where the user wants to drag the divider \u2014 Slack/Mail-style list+detail, IDE editor+terminal, side-by-side compare view. Static layouts shouldn't use this \u2014 reach for AppShell with nav="three-pane" (fixed widths) or Grid (responsive ladder). Built on react-resizable-panels under the hood.`,import:"@gradeui/ui",aliases:["resizable","splitter","split pane","drag divider","adjustable panels","resizer","split view","draggable divider","split pane resizer","ns split view"],subcomponents:["ResizablePanelGroup","ResizablePanel","ResizableHandle"],composesWith:["AppShellMain (host the splitter inside main)","ScrollArea (each panel's content)","Card"],styleDefaults:{ResizablePanelGroup:"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",ResizableHandle:"relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90"},props:{direction:{schema:zod.z.enum(["horizontal","vertical"]),design:"knob",description:"required; sets the axis the user drags along"},autoSaveId:{schema:zod.z.string().optional(),design:"content",description:"persists user-adjusted sizes to localStorage under this id"},onLayout:{schema:zod.z.unknown().optional(),design:"event"},defaultSize:{schema:zod.z.number().optional(),design:"knob",description:"percent of group (0-100); siblings should sum to ~100"},minSize:{schema:zod.z.unknown().optional(),design:"plumbing",description:"percent bounds"},collapsible:{schema:zod.z.boolean().optional(),design:"knob",description:"allow this panel to collapse to zero"},collapsedSize:{schema:zod.z.unknown().optional(),design:"plumbing",description:"collapse behaviour controls"},withHandle:{schema:zod.z.boolean().optional(),design:"knob",description:"show a visible drag affordance (default just a hit-zone)"}}};var Ze={name:"RivePlayer",description:"Rive runtime wrapped in the shared media surface. Reach for Rive when you need interactive state-machine animations driven by scroll/hover/input. For non-interactive looping video, use VideoPlayer; for shader-driven backgrounds, use ThreeScene.",import:"@gradeui/ui",aliases:["rive","riv","animation","animated","lottie"],composesWith:["MediaSurface (internal)","Card","any container"],styleDefaults:{RiveInner:"absolute inset-0 flex items-end justify-end p-2"},props:{src:{schema:zod.z.string(),design:"content",description:"URL or path to the .riv file"},stateMachines:{schema:zod.z.union([zod.z.string(),zod.z.array(zod.z.string())]).optional(),design:"knob",description:"state machine(s) to run"},artboard:{schema:zod.z.string().optional(),design:"content",description:"artboard name; omit to use default"},controls:{schema:zod.z.boolean().optional(),design:"knob",description:"viewer mode by default; set true for play/pause overlay",default:false},autoPlay:{schema:zod.z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},loop:{schema:zod.z.boolean().optional(),design:"knob",default:true},pauseOffscreen:{schema:zod.z.boolean().optional(),design:"knob",default:true},fit:{schema:zod.z.enum(["contain","cover","fill","fitWidth","fitHeight","none"]).optional(),design:"knob",default:"contain"},stateMachineInputs:{schema:zod.z.unknown().optional(),design:"plumbing"},aspect:{schema:zod.z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"square"},radius:{schema:zod.z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"},poster:{schema:zod.z.string().optional(),design:"content",description:"image shown while the runtime loads"}}};var $e={name:"Row",description:"Horizontal composition \u2014 button groups, inline form rows, logo + nav rows, anything on one line. Reach for Row instead of `flex items-center gap-*` so the alignment and spacing are editable through the settings panel. For two-pane layouts with an explicit ratio (sidebar + content, 1/3 + 2/3) use Split instead \u2014 Row evenly flows whatever children it holds.",import:"@gradeui/ui",aliases:["row","hstack","horizontal","inline","horizontal layout","hstack","h-stack","horizontal stack","lazyhstack"],composesWith:["Button","Input","NavItem","Stack (can wrap a Row)","any content component"],styleDefaults:{Row:"gds-row flex flex-row gap-4 items-center justify-start"},variantDefaults:{gap:"md",align:"center",justify:"start"},props:{gap:{schema:zod.z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"gap between children",default:"md"},align:{schema:zod.z.enum(["start","center","end","stretch","baseline"]).optional(),design:"knob",description:"cross-axis (vertical) alignment",default:"center"},justify:{schema:zod.z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:"main-axis distribution",default:"start"},wrap:{schema:zod.z.boolean().optional(),design:"knob",description:"allow children to wrap onto additional lines when they overflow",default:false},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot",default:false},className:{schema:zod.z.string().optional(),design:"plumbing"},children:{schema:zod.z.unknown(),design:"plumbing"}}};var et={name:"ScreenAnimator",description:'Wrap ANY screen or section in a directed camera \u2014 a "live demo',import:"@gradeui/ui",aliases:["screen animator","camera","camera tour","director","demo","product demo","zoom pan","spotlight","ken burns","presenter"],composesWith:["AppShell","ThreeScene","Card","Grid","the whole component set (it wraps a screen)"],styleDefaults:{ScreenAnimator:"gds-screen-animator"},props:{shots:{schema:zod.z.unknown().optional(),design:"plumbing",description:"the tour. Each"}}};var tt={name:"ScrollArea",description:"Bounded content that needs custom scroll chrome \u2014 sidebars with long item lists, chat transcripts, table panels inside a dashboard, anywhere the OS scrollbar would feel out of place against the design tokens. The wrapping element has to have a height constraint (`h-`, `max-h-`, or grid row sizing) or nothing scrolls \u2014 scroll-area can't infer a bound on its own. For body-level scrolling, leave the document to the browser.",import:"@gradeui/ui",aliases:["scroll area","scroll container","custom scrollbar","sidebar scroll","panel scroll","scroll view","scrollview","react native scrollview"],subcomponents:["ScrollBar"],composesWith:["Card (long card body)","AppShellNav (long sidebar)","Sheet (long modal body)","Table (sticky-header scrolling list)"],styleDefaults:{ScrollArea:"relative overflow-hidden",ScrollBar:"flex touch-none select-none transition-colors"},props:{type:{schema:zod.z.enum(["auto","always","scroll","hover"]).optional(),design:"knob",description:"when the scrollbar shows"},scrollHideDelay:{schema:zod.z.number().optional(),design:"knob",description:'ms before "scroll"/"hover" scrollbars fade'},dir:{schema:zod.z.enum(["ltr","rtl"]).optional(),design:"plumbing"},className:{schema:zod.z.string().optional(),design:"plumbing",description:"set a height/max-height here, otherwise nothing scrolls"},orientation:{schema:zod.z.enum(["vertical","horizontal"]).optional(),design:"knob",default:"vertical"}}};var ot={name:"SectionBlock",description:'The top-level container for a marketing page section \u2014 hero, feature row, pricing table, testimonial strip, FAQ section. Always reach for SectionBlock over a hand-rolled `<section>` so vertical rhythm, container width, and tonal background stay consistent across the page. Pair `background="gradient"` + `surface="glass"` inner Cards for the "modern marketing hero" pattern.',import:"@gradeui/ui",aliases:["section","section block","hero section","marketing section","page section","content section","container section","feature section","hero","page hero","marketing hero","glass section","gradient section","mesh hero"],composesWith:['Card (the most common child \u2014 especially with surface="glass")',"Grid (feature rows)","Stack (hero column)","MediaSurface (hero imagery)","Code (developer hero)","Carousel (logo strips)"],styleDefaults:{SectionBlock:"relative w-full py-16 md:py-24 bg-transparent"},variantDefaults:{padding:"lg",background:"transparent"},props:{padding:{schema:zod.z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",description:"vertical rhythm. Defaults to `lg`."},background:{schema:zod.z.enum(["transparent","muted","card","primary","gradient"]).optional(),design:"knob",description:"tonal direction of the section bg."},surface:{schema:zod.z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the section is *made of*. Orthogonal to `background`. Use `glass` for hero sections that float over a generative backdrop / image / dot grid."},container:{schema:zod.z.enum(["default","wide","narrow","full"]).optional(),design:"knob",description:"max-width of the inner content."},alignment:{schema:zod.z.enum(["left","center","right"]).optional(),design:"knob",description:"header / CTA alignment."},titleSize:{schema:zod.z.enum(["sm","md","lg","xl"]).optional(),design:"knob"},title:{schema:zod.z.string().optional(),design:"plumbing"},subtitle:{schema:zod.z.string().optional(),design:"content"},cta1:{schema:zod.z.unknown().optional(),design:"plumbing",description:"string or `{ text, variant, href, onClick }` config"},backgroundImage:{schema:zod.z.string().optional(),design:"content",description:"direct CSS background image url"},as:{schema:zod.z.enum(["section","div","article"]).optional(),design:"knob",description:"semantic root"},fullBleed:{schema:zod.z.boolean().optional(),design:"knob"}}};var nt={name:"Select",description:'Single-choice from 3+ known options. Fewer than 3 \u2192 RadioGroup. Huge list with search \u2192 use a Combobox (not in DS yet). Multi-select \u2192 not supported by this primitive. In dense tool panels, set size="xs" on BOTH the trigger and the content so the closed control and open menu match.',import:"@gradeui/ui",aliases:["dropdown","combobox","picker","select","pop-up button","popup button","popup picker","picker view","rnpickerselect","react native picker","native picker"],subcomponents:["SelectTrigger","SelectValue","SelectContent","SelectItem","SelectGroup","SelectLabel","SelectSeparator"],composesWith:["Label (above SelectTrigger)","Form","Card"],styleDefaults:{SelectTrigger:"flex w-full items-center justify-between rounded-md border border-input bg-background ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 h-10 px-3 py-2 text-sm",SelectScrollUpButton:"flex cursor-default items-center justify-center py-1",SelectScrollDownButton:"flex cursor-default items-center justify-center py-1",SelectContent:"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",SelectItem:"relative flex w-full cursor-default select-none items-center rounded-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 py-1.5 pl-8 pr-2 text-sm",SelectSeparator:"-mx-1 my-1 h-px bg-muted"},props:{value:{schema:zod.z.unknown().optional(),design:"plumbing",description:"Radix root"},size:{schema:zod.z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density; wraps the clickable control, nest SelectValue inside"},placeholder:{schema:zod.z.string().optional(),design:"content",description:"text when nothing is selected"}}};var it={name:"Separator",description:"Light divider between sibling blocks in a Card, list, or header. For section-level partition use extra spacing instead.",import:"@gradeui/ui",aliases:["divider","rule","hr","line","horizontal rule"],composesWith:["Card (between CardHeader/Content/Footer)","navigation menus","any vertical stacks"],styleDefaults:{Separator:"shrink-0 bg-border"},props:{orientation:{schema:zod.z.enum(["horizontal","vertical"]).optional(),design:"knob",description:'default "horizontal"'},decorative:{schema:zod.z.boolean().optional(),design:"knob",description:"hide from a11y tree",default:true},className:{schema:zod.z.string().optional(),design:"plumbing"}}};var at={name:"ShaderPresetPicker",description:"Runtime gallery of shader presets \u2014 click to select. Use with ThreeScene as a controlled input so the user can pick a background shader. For a single preview card, use ShaderPresetPreview directly.",import:"@gradeui/ui",aliases:["shader picker","preset picker","shader gallery","preset gallery"],composesWith:["ShaderPresetPreview (internal)","ThreeScene (the typical downstream consumer)"],styleDefaults:{ShaderPresetPicker:"grid grid-cols-2 gap-3"},props:{value:{schema:zod.z.string().optional(),design:"content",description:"currently selected preset id (controlled)"},onChange:{schema:zod.z.unknown().optional(),design:"event",description:"called when the user clicks a preset card"},filterTags:{schema:zod.z.string().optional(),design:"content",description:'only show presets matching at least one tag ("space" | "retro" | "motion" | "hero" | "background" \u2026)'},live:{schema:zod.z.enum(["never","hover","always"]).optional(),design:"knob",description:"thumbnail render mode",default:"hover"},postPreset:{schema:zod.z.string().optional(),design:"content",description:"shared post-FX preset applied to every thumbnail"},palette:{schema:zod.z.unknown().optional(),design:"plumbing",description:"shared palette applied to every thumbnail"},columns:{schema:zod.z.unknown().optional(),design:"plumbing",description:"grid columns at md+ breakpoint"}}};var rt={name:"ShaderPresetPreview",description:"Thumbnail-sized preview card for a shader preset. Defaults to a cheap static placeholder until hovered, at which point the live WebGL render kicks in. Use directly when you want a single preset card; use ShaderPresetPicker for a filterable grid.",import:"@gradeui/ui",aliases:["shader preview","preset preview","shader card"],composesWith:["ThreeScene (internal)","ShaderPresetPicker (wraps this)"],styleDefaults:{ShaderPresetPreview:"group cursor-pointer flex flex-col gap-2"},props:{preset:{schema:zod.z.string(),design:"content",description:"shader preset id from the registry"},live:{schema:zod.z.enum(["never","hover","always"]).optional(),design:"knob",description:"when to run the live WebGL render",default:"hover"},postPreset:{schema:zod.z.string().optional(),design:"content",description:"override the preset's default post-FX"},palette:{schema:zod.z.unknown().optional(),design:"plumbing",description:"palette overrides for the preview"},aspect:{schema:zod.z.enum(["video","square","portrait","wide"]).optional(),design:"knob",default:"video"},hideLabel:{schema:zod.z.boolean().optional(),design:"knob",description:"hide the label strip under the preview",default:false},onClick:{schema:zod.z.unknown().optional(),design:"event"}}};var st={name:"Sheet",description:"A panel that slides in from a screen edge \u2014 mobile nav drawers, side panels for editing a single record without leaving the list, filter trays on small viewports, Studio-style inspector panels. For a centered focus modal use Dialog. For a transient announcement use Toast (Sonner). For inline reveals use Collapsible.",import:"@gradeui/ui",aliases:["sheet","drawer","side panel","slide-in","nav drawer","mobile drawer","slide-over","action sheet","modal sheet","bottom sheet","side sheet","react native modal sheet","bottom-sheet","ios action sheet","inspector panel","glass sheet","frosted drawer"],subcomponents:["SheetTrigger","SheetContent","SheetHeader","SheetTitle","SheetDescription","SheetFooter","SheetClose"],composesWith:["Form controls (an inline edit sheet)","Button (trigger + close)","AppShellNav (mobile-only swap)","Code (changelog drawers)","MediaSurface (image-detail sheets)"],styleDefaults:{SheetOverlay:"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",SheetContent:"fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",SheetHeader:"flex flex-col space-y-2 text-center sm:text-left",SheetFooter:"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",SheetTitle:"text-lg font-semibold text-foreground",SheetDescription:"text-sm text-muted-foreground"},props:{open:{schema:zod.z.unknown().optional(),design:"plumbing"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing"},side:{schema:zod.z.enum(["top","right","bottom","left"]).optional(),design:"knob",default:"right"},surface:{schema:zod.z.enum(["solid","translucent","glass","glass-strong"]).optional(),design:"knob",description:"what the sheet panel is *made of*. `solid` is the default opaque `bg-background`. Reach for `glass` whenever the canvas behind the sheet (a layout in progress, a media gallery, a dashboard) should remain visible."},className:{schema:zod.z.string().optional(),design:"plumbing",description:"usually set a width (right/left) or height (top/bottom)"},SheetTitle:{schema:zod.z.unknown(),design:"plumbing"}}};var lt={name:"Sidebar",description:'Vertical app navigation. Drop inside `<AppShellNav placement="side">` for full-page layouts. Compound API \u2014 `<SidebarHeader>` for brand, `<SidebarContent>` for the scrollable body of `<SidebarSection>` + `<SidebarItem>` rows, `<SidebarFooter>` for user / settings chrome. For top nav reach for TopMenu; for command-palette style search reach for Command.',import:"@gradeui/ui",aliases:["sidebar","side menu","sidemenu","navigation sidebar","app sidebar","side nav","side nav rail","master pane","sidebarmenu","navigation rail","react native drawer"],subcomponents:["SidebarHeader","SidebarContent","SidebarFooter","SidebarSection","SidebarItem"],composesWith:["AppShell (inside AppShellNav)","Avatar (in Footer)","Tooltip (auto-wrapped on collapsed items)","Button (asChild for custom routing)"],styleDefaults:{Sidebar:"relative flex h-full flex-col bg-card text-card-foreground",SidebarHeader:"flex shrink-0 items-center border-b border-border",SidebarContent:"flex-1 overflow-y-auto overflow-x-hidden",SidebarFooter:"shrink-0 border-t border-border",SidebarSection:"px-[var(--gds-sidebar-section-px,0.5rem)] space-y-[var(--gds-sidebar-section-gap,0.125rem)]",SidebarItem:"group flex items-center gap-2.5 rounded-md transition-colors",SidebarTreeItem:"group flex w-full items-center gap-1.5 rounded-md py-1 text-sm font-medium transition-colors"},props:{collapsed:{schema:zod.z.boolean().optional(),design:"knob",description:"controlled collapsed state (wire onCollapsedChange when set)"},defaultCollapsed:{schema:zod.z.boolean().optional(),design:"knob",description:"uncontrolled initial value (default false)"},onCollapsedChange:{schema:zod.z.unknown().optional(),design:"event"},collapsible:{schema:zod.z.boolean().optional(),design:"knob",description:"show the affordance for the user to collapse (default true)"},variant:{schema:zod.z.enum(["rail","panel"]).optional(),design:"knob",description:'outer chrome treatment. `rail` (default) is the classic nav rail with a single right-border + tracked width via `--gds-sidebar-width`; drops cleanly into `<AppShellNav placement="side">`. `panel` is a card-style floating sidebar with full border + rounded corners + parent-controlled width; use when the sidebar is one of several adjacent panes in a body row (e.g. Projects | Canvas | Settings). The compound children (Header/Content/Footer/Section/Item) are identical in both treatments.'},any:{schema:zod.z.unknown(),design:"plumbing",description:"brand / logo / org switcher; hides nothing when collapsed (centred)"},title:{schema:zod.z.unknown().optional(),design:"plumbing",description:'group label; **uppercase tracking-wide muted** styling auto-applied (Notion / Linear / Slack-style "GAMES", "FAVORITES", "WORKSPACE" headers); hidden when sidebar is collapsed'},icon:{schema:zod.z.unknown().optional(),design:"plumbing",description:"optional icon beside the title"},trailing:{schema:zod.z.unknown().optional(),design:"plumbing",description:`**action(s) on the right edge of the header** \u2014 the canonical "+" / "..." slot (Notion's "+ Add page" next to Pages, Linear's "+" next to Favorites, Slack's "+" next to Channels). Pointer events isolated so a Button here doesn't toggle collapse.`},defaultExpanded:{schema:zod.z.boolean().optional(),design:"knob",description:"initial open state (default true)"},badge:{schema:zod.z.unknown().optional(),design:"plumbing",description:"trailing count / label (hidden when collapsed)"},active:{schema:zod.z.boolean().optional(),design:"knob",description:'current route; adds aria-current="page"'},href:{schema:zod.z.string().optional(),design:"content",description:"renders as <a>; for routing use `asChild` with your link component"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"wrap a custom link (<Link href> from Next.js etc.) via Radix Slot"},asButton:{schema:zod.z.boolean().optional(),design:"knob",description:"render as <button> for action rows (open dialog, log out)"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},collapsedLabel:{schema:zod.z.unknown().optional(),design:"plumbing",description:"tooltip override when sidebar is collapsed (defaults to children text)"},size:{schema:zod.z.enum(["sm","md"]).optional(),design:"knob",description:"row size. `md` (default) is the standard `text-sm font-medium` nav row; `sm` is `text-xs` + lighter weight + tighter padding for visually subordinate rows (nested screens under a project, sub-pages under a section). Active state still wins on color + weight so the current row pops at either size."},description:{schema:zod.z.unknown().optional(),design:"plumbing",description:"secondary line beneath the label (metadata like 'Edited 2m ago', '12 items', a brief description). Row layout adapts: label + description stacked vertically; icon vertically-centered against the stack; badge stays on trailing edge. Hidden when sidebar collapsed."}}};var dt={name:"Skeleton",description:'Loading placeholder for content whose shape you know. Set width/height via className to mimic the real content (e.g. "h-4 w-32"). Not a spinner \u2014 use it where the real thing will drop in.',import:"@gradeui/ui",aliases:["placeholder","shimmer","loader","loading state","redacted","redacted placeholder","shimmer placeholder","content placeholder","lottie placeholder"],composesWith:["Card","Avatar (inside a Skeleton for avatar loading)","any layout"],styleDefaults:{Skeleton:"animate-pulse rounded-md bg-muted"},props:{className:{schema:zod.z.string().optional(),design:"plumbing",description:"required in practice; supply width/height utilities"}}};var ct={name:"Slider",description:'A continuous-ish numeric pick \u2014 volume, opacity, font size, price-range filters. Use a single-thumb slider for one value, two-thumb for a range. For a small set of discrete options (1-5 stars, sm/md/lg) prefer ToggleGroup. For free-text numeric entry use an Input type="number".',import:"@gradeui/ui",aliases:["slider","range slider","range input","volume","opacity slider","scrub","drag value","slider control","value slider","react native slider"],composesWith:["Label (mandatory above)","Row (label + current value display)","Card (settings rows)"],styleDefaults:{Slider:"relative flex w-full touch-none select-none items-center"},props:{value:{schema:zod.z.number().optional(),design:"knob",description:"controlled value; ALWAYS an array even for a single-thumb slider (`[50]`)"},defaultValue:{schema:zod.z.number().optional(),design:"knob",description:"uncontrolled initial; `[20, 80]` for a two-thumb range"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},min:{schema:zod.z.number().optional(),design:"knob"},max:{schema:zod.z.number().optional(),design:"knob"},step:{schema:zod.z.number().optional(),design:"knob"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},orientation:{schema:zod.z.enum(["horizontal","vertical"]).optional(),design:"knob",default:"horizontal"},dir:{schema:zod.z.enum(["ltr","rtl"]).optional(),design:"plumbing"},inverted:{schema:zod.z.boolean().optional(),design:"knob",description:"flip the visual direction"},name:{schema:zod.z.string().optional(),design:"content",description:"form name when posting natively"}}};var pt={name:"Sortable",description:"Drag-to-reorder lists, kanban-column reordering, sortable shelves, tab strips the user can rearrange. Pairs with any layout primitive \u2014 Stack for vertical lists, Row for horizontal strips, Grid for 2D card walls. For cross-container drag (drag a card from one column to another) hand-roll DndContext at the page level \u2014 Sortable v1 covers single-list reorder; Sortable.Group for cross-container is a planned follow-up. Reach for raw `@dnd-kit/core` if you need custom collision detection, drag overlays with arbitrary chrome, or non-list use cases (kanban swimlanes, draggable canvas nodes).",import:"@gradeui/ui",aliases:["sortable","reorder","drag and drop","dnd","draggable list","sortable list","kanban","drag to reorder","drag-drop","dragdroplist","drag handle","react native draggable flatlist"],subcomponents:["Sortable.Item","Sortable.Handle"],composesWith:["Stack (vertical lists)","Row (horizontal strips)","Grid (2D card walls)","Card (typical item content)","Button (as Sortable.Handle asChild)"],styleDefaults:{SortableHandle:"cursor-grab touch-none select-none"},props:{values:{schema:zod.z.unknown(),design:"plumbing",description:"ordered list of unique ids; the source of truth for the order"},onReorder:{schema:zod.z.unknown().optional(),design:"event",description:"fires with the new order after a drag that changed it"},strategy:{schema:zod.z.enum(["vertical","horizontal","grid"]).optional(),design:"knob",description:"match the layout your items render in",default:"vertical"},disabled:{schema:zod.z.boolean().optional(),design:"knob",description:"disable drag on every item"},Sortable:{schema:zod.z.unknown(),design:"plumbing",description:"must match one entry in the parent `values` array (identity, not React key)"}}};var mt={name:"Stack",description:"Default top-level layout inside the main slot when composing two or more stacked regions (hero + content + footer, auth card + subtext, etc.). Prefer Stack over hand-rolled `flex flex-col gap-*` so the vertical rhythm is editable through the settings panel.",import:"@gradeui/ui",aliases:["stack","vstack","vertical","column","vertical layout","v-stack","vertical stack","lazyvstack"],composesWith:["Section","Row","Split","Hero","any content component"],props:{gap:{schema:zod.z.enum(["none","xs","sm","md","lg","xl","2xl"]).optional(),design:"knob",description:"vertical gap between children",default:"md"},align:{schema:zod.z.enum(["start","center","end","stretch"]).optional(),design:"knob",description:"cross-axis (horizontal) alignment of children",default:"stretch"},justify:{schema:zod.z.enum(["start","center","end","between","around","evenly"]).optional(),design:"knob",description:'main-axis (vertical) distribution. Reach for this on absolute-positioned overlays (`justify="end"` pins children to the bottom) and split footers (`justify="between"`).',default:"start"},asChild:{schema:zod.z.boolean().optional(),design:"plumbing",description:"render as the child element via Slot, so `<Stack asChild><section>\u2026</section></Stack>` stamps Stack's classes onto the `<section>` rather than nesting a wrapper div",default:false},className:{schema:zod.z.string().optional(),design:"plumbing"},children:{schema:zod.z.unknown(),design:"plumbing"}}};var ut={name:"Switch",description:'Instant on/off setting ("Enable notifications", "Dark mode"). Commits on toggle \u2014 no submit button needed. For selecting-from-a-list use Checkbox. For a settings row (label + description on the left, Switch on the right) use Field layout="setting". For a prominent on/off presented as a whole selectable card, use SwitchCard.',import:"@gradeui/ui",aliases:["toggle","switch","on/off switch","ios toggle","toggle switch","switch control","react native switch"],composesWith:["Label (via htmlFor)",'Field (layout="setting" settings row)',"SwitchCard (whole-card toggle)","Card (settings rows)"],styleDefaults:{Switch:"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input h-6 w-11"},variantDefaults:{size:"default"},props:{checked:{schema:zod.z.boolean().optional(),design:"knob"},onCheckedChange:{schema:zod.z.unknown().optional(),design:"event"},defaultChecked:{schema:zod.z.boolean().optional(),design:"knob"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},id:{schema:zod.z.string().optional(),design:"plumbing"}}};var ht={name:"SwitchCard",description:'A prominent on/off setting presented as a whole selectable card. The whole card is the switch, so the toggled state lives on the card surface. Standalone. For a row of compact settings (label left, small Switch right) use Field layout="setting" instead \u2014 SwitchCard is for the heavier, card-sized toggle.',import:"@gradeui/ui",aliases:["switch card","toggle card","setting card","feature toggle card"],composesWith:["Badge (in aside)","Stack (stacking several)"],props:{checked:{schema:zod.z.unknown().optional(),design:"plumbing",description:"standard switch state"},label:{schema:zod.z.unknown().optional(),design:"plumbing",description:"title line"},description:{schema:zod.z.unknown().optional(),design:"plumbing",description:"secondary line"},aside:{schema:zod.z.unknown().optional(),design:"plumbing",description:"slot before the indicator (a Badge, price, hint)"},hideIndicator:{schema:zod.z.boolean().optional(),design:"knob",description:"hide the switch glyph; state shown by the card border + background"},indicatorPosition:{schema:zod.z.enum(["leading","trailing"]).optional(),design:"knob",description:"default trailing"},children:{schema:zod.z.unknown().optional(),design:"plumbing",description:"arbitrary static content instead of label/description"}}};var bt={name:"Table",description:"Structured tabular data \u2014 rows \xD7 columns with alignment requirements. NOT a layout grid \u2014 for that use div+Tailwind grid utilities. Keep to <100 rows; larger datasets need virtualisation (not in DS).",import:"@gradeui/ui",aliases:["table","table view","data table","datatable","grid view","data grid","rows and columns"],subcomponents:["TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"],composesWith:["Card (wrap the table)","Badge (inside TableCell for status)","Checkbox (row selection)","Button (row actions)"],styleDefaults:{Table:"w-full caption-bottom text-sm",TableHeader:"[&_tr]:border-b",TableBody:"[&_tr:last-child]:border-0",TableFooter:"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",TableRow:"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",TableHead:"h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCell:"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",TableCaption:"mt-4 text-sm text-muted-foreground"},props:{Each:{schema:zod.z.unknown(),design:"plumbing"},No:{schema:zod.z.unknown(),design:"plumbing",description:"styling follows the active theme tokens"}}};var ft={name:"Tabs",description:'A small set of peer views within one surface (2\u20135 tabs). For primary nav use Side Menu/routing. For filters use a filter control, not tabs. Pick `variant="pill"` for app chrome (settings panels, in-card tab strips). Pick `variant="underlined"` for marketing/docs pages and browser-tab-style treatments.',import:"@gradeui/ui",aliases:["tabs","tab strip","tab bar","tab view","tabbed interface","pageviewcontroller","react native tab view","underlined tabs","page tabs","segment switcher","simple tabs"],subcomponents:["TabsList","TabsTrigger","TabsContent"],composesWith:["Card (tabs inside a card body)","Dialog","TooltipProvider (required for tooltip prop)"],styleDefaults:{TabsList:"inline-flex items-center text-muted-foreground justify-center rounded-lg bg-muted",TabsContent:"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"},props:{defaultValue:{schema:zod.z.unknown().optional(),design:"plumbing"},size:{schema:zod.z.enum(["sm","md","lg, default md"]).optional(),design:"knob",description:"t-shirt scale aligned with Button/ToggleGroup heights; cascades to every TabsTrigger via context so set it once on the list"},variant:{schema:zod.z.enum(["pill","underlined, default pill"]).optional(),design:"knob",description:"`pill` is the shadcn chip-on-muted look; `underlined` is the minimal text + bottom-border treatment (formerly the separate SimpleTabs component, collapsed into Tabs in May 2026). Cascades to triggers."},value:{schema:zod.z.string(),design:"content",description:"matches a TabsContent value; tooltip?: string \u2014 when set, wraps the trigger in the design-system Tooltip and auto-applies aria-label (useful for icon-only triggers); requires a TooltipProvider somewhere above the tabs"}}};var wt={name:"Textarea",description:'Multi-line text entry (descriptions, messages, comments). Pair with a Label. Single-line input \u2192 use Input instead. Use size="sm"/"xs" in dense tool panels.',import:"@gradeui/ui",aliases:["text area","multiline","comment box","message field","text editor","multi-line text","multiline input","multiline text field","comments box","multiline textinput"],composesWith:["Label","Form","Card (in CardContent)"],styleDefaults:{Textarea:"flex w-full rounded-md border border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px] px-3 py-2 text-sm"},variantDefaults:{size:"default"},props:{size:{schema:zod.z.enum(["default","sm","xs"]).optional(),design:"knob",description:"control density, mirrors Input. default = min-h-80 / text-sm; sm and xs shrink the min-height + padding for dense panels."}}};var vt={name:"ThreeScene",description:"WebGL primitive for shader backgrounds, generative visuals, and bespoke three.js scenes. Three authoring paths, in order of preference \u2014 (1) pick a `preset` id; (2) if nothing in the registry fits, write a `fragmentShader` against the fixed uniform contract; (3) only as a last resort, pass a full `createScene` factory. For looping video, use VideoPlayer; for interactive animations, use RivePlayer.",import:"@gradeui/ui",aliases:["three","threejs","webgl","shader","scene","3d","generative","hero background","fragment shader","glsl"],composesWith:["MediaSurface (internal)","foreground content stacked above with `position: absolute/relative z-10`"],styleDefaults:{ThreeScene:"absolute inset-0 flex items-end justify-end p-2"},props:{preset:{schema:zod.z.enum(["mesh","waves","space","plasma","voronoi","synthwave"]).optional(),design:"knob",description:"shader preset id from the registry"},fragmentShader:{schema:zod.z.string().optional(),design:"content",description:"user-authored GLSL body; takes precedence over preset"},onShaderError:{schema:zod.z.unknown().optional(),design:"event",description:'fires on compile failure; scene falls back to `preset="space"`'},postPreset:{schema:zod.z.enum(["none","vhs","cinematic","synthwave","crt"]).optional(),design:"knob",description:"post-processing pass",default:"vhs"},palette:{schema:zod.z.unknown().optional(),design:"plumbing",description:"any CSS-legal colour string per slot. Re-tints automatically when the theme changes. Unset slots fall back to defaults."},createScene:{schema:zod.z.unknown().optional(),design:"plumbing",description:"custom full scene factory; takes precedence over preset AND fragmentShader"},controls:{schema:zod.z.boolean().optional(),design:"knob",description:"play/pause overlay",default:false},autoPlay:{schema:zod.z.boolean().optional(),design:"knob",description:"respects reduced-motion",default:true},pauseOffscreen:{schema:zod.z.boolean().optional(),design:"knob",description:"big win for WebGL battery life",default:true},aspect:{schema:zod.z.enum(["video","square","portrait","wide","auto"]).optional(),design:"knob",default:"video"},maxDpr:{schema:zod.z.number().optional(),design:"knob",description:"lower for thumbnails / low-end devices"},radius:{schema:zod.z.enum(["none","sm","md","lg","xl"]).optional(),design:"knob",default:"lg"}}};var kt={name:"Toast",description:'Transient, non-blocking feedback that confirms or warns about an action \u2014 "Saved", "Failed to upload", "Copied to clipboard", "Invitation sent". For permanent inline messages reach for Callout. For confirmations that block until acknowledged use Dialog. Mount <Toaster /> ONCE at the root of the app; everywhere else, call the `toast` helper.',import:"@gradeui/ui",aliases:["toast","toaster","sonner","notification","snackbar","alert toast","transient alert","transient banner","banner notification","toastandroid"],composesWith:["App root layout (single <Toaster /> mount)","Form submit handlers (success/error toasts)","Async actions"],props:{position:{schema:zod.z.enum(["top-left","top-center","top-right","bottom-left","bottom-center","bottom-right"]).optional(),design:"knob",default:"bottom-right"},theme:{schema:zod.z.enum(["light","dark","system"]).optional(),design:"knob"},richColors:{schema:zod.z.boolean().optional(),design:"knob",description:"colored variants for success/error/warning/info"},expand:{schema:zod.z.boolean().optional(),design:"knob",description:"keep multiple toasts visually separated rather than stacked"},visibleToasts:{schema:zod.z.number().optional(),design:"knob",description:"max concurrent toasts on screen (default 3)"},duration:{schema:zod.z.number().optional(),design:"knob",description:"default ms before auto-dismiss"}}};var yt={name:"Toggle",description:`A standalone on/off button \u2014 Bold/Italic in a toolbar, "Show grid" in a header, single binary toggle that doesn't belong inside a Switch row. For two-or-more mutually-exclusive options use ToggleGroup. For a labeled settings switch ("Active: on/off") use Switch.`,import:"@gradeui/ui",aliases:["toggle","toggle button","press button","bold button","italic button"],composesWith:["Tooltip (wrap an icon-only Toggle)","Row","TabsList (sibling)"],styleDefaults:{Toggle:"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-transparent h-9 px-2 min-w-9"},variantDefaults:{variant:"default",size:"default"},props:{variant:{schema:zod.z.enum(["default","outline"]).optional(),design:"knob",description:"outline adds a border, default is borderless and ghost-like"},size:{schema:zod.z.enum(["default","sm","lg"]).optional(),design:"knob"},pressed:{schema:zod.z.boolean().optional(),design:"knob",description:"controlled pressed state"},defaultPressed:{schema:zod.z.boolean().optional(),design:"knob",description:"uncontrolled initial state"},onPressedChange:{schema:zod.z.unknown().optional(),design:"event"},disabled:{schema:zod.z.boolean().optional(),design:"knob"},children:{schema:zod.z.unknown(),design:"plumbing",description:"usually an icon or short label"}}};var Ct={name:"ToggleGroup",description:'A small set of mutually-exclusive (`type="single"`) or independent (`type="multiple"`) binary options that live side-by-side as a segmented control \u2014 viewport size picker (Mobile/Tablet/Desktop), text alignment, view density. Reads identically to a TabsList of the same size; reach for ToggleGroup when each option emits a value (like a form input) rather than swapping panels. Use Tabs for panel switching, Toggle for a single on/off.',import:"@gradeui/ui",aliases:["toggle group","segmented control","segmented buttons","button group","pill group","view selector","segmented picker","segmentedcontrolios","segmented buttons group","rn segmented control"],subcomponents:["ToggleGroupItem"],composesWith:["Card (header controls)","Row","AppShellHeader chrome","settings panels"],styleDefaults:{ToggleGroup:"inline-flex items-center justify-center rounded-lg bg-muted text-muted-foreground h-8 p-0.5",ToggleGroupItem:"inline-flex items-center justify-center whitespace-nowrap rounded-md font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[state=on]:bg-background data-[state=on]:text-foreground h-7 px-2 text-xs gap-1.5 [&_svg]:size-3.5"},variantDefaults:{size:"md"},props:{type:{schema:zod.z.enum(["single","multiple"]),design:"knob",description:"single picks one, multiple picks any number"},value:{schema:zod.z.union([zod.z.string(),zod.z.array(zod.z.string())]).optional(),design:"knob",description:"controlled; matches `type` (string for single, string[] for multiple)"},defaultValue:{schema:zod.z.union([zod.z.string(),zod.z.array(zod.z.string())]).optional(),design:"knob",description:"uncontrolled initial"},onValueChange:{schema:zod.z.unknown().optional(),design:"event"},size:{schema:zod.z.enum(["sm","md","lg, default md"]).optional(),design:"knob",description:"cascades to every ToggleGroupItem via context, matches Tabs/Button heights"},variant:{schema:zod.z.enum(["default","outline"]).optional(),design:"knob"},tooltip:{schema:zod.z.unknown().optional(),design:"plumbing",description:"when set, wraps the item in a Tooltip; required for icon-only items where the visible chrome doesn't carry a label"},tooltipSide:{schema:zod.z.enum(["top","right","bottom",'left", default "top']).optional(),design:"knob",description:"side the tooltip renders on"},tooltipDelay:{schema:zod.z.number().optional(),design:"knob",description:"per-item delay override; falls back to the upstream TooltipProvider's delayDuration"}}};var xt={name:"Toolbar",description:`ANY three-region chrome bar \u2014 the leading/center/trailing pattern Apple HIG
 describes as a "Toolbar." App window chrome (Reddit, Twitter, GitHub, Linear,
 most desktop apps), section toolbars inside Cards or panels, bottom action
 bars on mobile layouts, persistent footer toolbars.