@gradeui/ui 0.7.0 → 0.8.2

package/dist/index.d.mts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPicker, DayButton, DateRange } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -26,7 +27,7 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "destructive" | "success" | "warning" | "info" | "highlight" | "default" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
@@ -64,7 +65,7 @@ declare const navVariants: (props?: ({
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const mainVariants: (props?: ({
-    maxWidth?: "container" | "full" | null | undefined;
+    maxWidth?: "full" | "container" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof shellVariants> {
     /** Render as the single child element via Radix Slot — lets you stamp the
@@ -81,8 +82,12 @@ interface AppShellMainProps extends React$1.HTMLAttributes<HTMLElement>, Variant
 }
 declare const AppShellMain: React$1.ForwardRefExoticComponent<AppShellMainProps & React$1.RefAttributes<HTMLElement>>;
 
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "destructive" | "success" | "warning" | "info" | "highlight" | "default" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | "secondary" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
@@ -90,8 +95,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
-    size?: "lg" | "sm" | "default" | "icon" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -248,7 +253,7 @@ declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupP
  * etc.) and is a separate primitive.
  */
 declare const rowVariants: (props?: ({
-    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
@@ -261,6 +266,76 @@ interface RowProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<
 }
 declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Grid — 2D layout primitive. The partner to Stack and Row.
+ *
+ * Stack handles vertical, Row handles horizontal, Grid handles the
+ * responsive 2D case — most commonly a set of equal-width tiles (stat
+ * cards, feature cards, pricing columns) that needs to collapse
+ * gracefully on narrow viewports. Without this primitive, every
+ * vibe-coded dashboard reinvents `grid grid-cols-1 md:grid-cols-2
+ * lg:grid-cols-4` and the settings panel has nothing to mutate.
+ *
+ * `cols` names the DESIRED desktop column count. Each value is a
+ * baked-in responsive ladder that matches the standard pattern for that
+ * count (1→2→N for small counts, 2→3→N for denser grids) so the model
+ * just writes `<Grid cols="4">` and gets the same behaviour it would
+ * hand-roll. If you need bespoke breakpoints, override via `className`.
+ *
+ * Sharing the `gap` / `align` scale with Stack and Row is deliberate:
+ * when the Studio panel offers a "switch layout type" control between
+ * Stack / Row / Grid, those props transfer cleanly — only `cols`
+ * (Grid-only) and `justify` / `wrap` (Row-only) are lost.
+ */
+declare const gridVariants: (props?: ({
+    cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Grid's layout classes onto an existing semantic tag
+     *  without nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Flex — the unopinionated flexbox primitive.
+ *
+ * The CSS-aligned partner to Stack / Row / Grid. Where Stack and Row bake in
+ * a direction and a sensible gap/align default, Flex exposes the raw CSS
+ * knobs and ships with CSS's own defaults — direction=row, gap=none,
+ * justify=start, align=stretch, wrap=nowrap. Nothing is opinionated; you pay
+ * for exactly the props you set.
+ *
+ * Use Flex when:
+ *   - You need `direction="col-reverse"` or `"row-reverse"` — Stack and Row
+ *     can't express either without falling back to className.
+ *   - You want CSS defaults (stretch alignment, no baked-in gap) rather than
+ *     Row's "items-center gap-md" starting point.
+ *   - You're reaching for `className="flex …"` and want the settings-panel
+ *     editability you lose when hand-rolling utility classes.
+ *
+ * Otherwise prefer Stack (vertical) / Row (horizontal) / Grid (2D) —
+ * they're easier to read at a glance and have defaults tuned for the 95%
+ * case. Flex is the escape hatch, not the default.
+ */
+declare const flexVariants: (props?: ({
+    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FlexProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Flex's layout classes onto an existing semantic tag without
+     *  nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -318,7 +393,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
  * for a centred narrow column (auth cards, marketing copy).
  */
 declare const stackVariants: (props?: ({
-    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
@@ -1373,4 +1448,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AppShell, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AppShell, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, flexVariants, generateTheme, getTheme, gridVariants, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import * as React$1 from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPicker, DayButton, DateRange } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
@@ -26,7 +27,7 @@ declare const AccordionTrigger: React$1.ForwardRefExoticComponent<Omit<Accordion
 declare const AccordionContent: React$1.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
 declare const Alert: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "destructive" | "success" | "warning" | "info" | "highlight" | "default" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
@@ -64,7 +65,7 @@ declare const navVariants: (props?: ({
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const mainVariants: (props?: ({
-    maxWidth?: "container" | "full" | null | undefined;
+    maxWidth?: "full" | "container" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof shellVariants> {
     /** Render as the single child element via Radix Slot — lets you stamp the
@@ -81,8 +82,12 @@ interface AppShellMainProps extends React$1.HTMLAttributes<HTMLElement>, Variant
 }
 declare const AppShellMain: React$1.ForwardRefExoticComponent<AppShellMainProps & React$1.RefAttributes<HTMLElement>>;
 
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "destructive" | "success" | "warning" | "info" | "highlight" | "default" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "highlight" | "secondary" | "outline" | "success-soft" | "warning-soft" | "destructive-soft" | "info-soft" | "highlight-soft" | "success-outline" | "warning-outline" | "destructive-outline" | "info-outline" | null | undefined;
     rounded?: "default" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
@@ -90,8 +95,8 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProp
 declare function Badge({ className, variant, rounded, ...props }: BadgeProps): React$1.JSX.Element;
 
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "secondary" | "destructive" | "default" | "outline" | "ghost" | null | undefined;
-    size?: "lg" | "sm" | "default" | "icon" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     asChild?: boolean;
@@ -248,7 +253,7 @@ declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupP
  * etc.) and is a separate primitive.
  */
 declare const rowVariants: (props?: ({
-    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
@@ -261,6 +266,76 @@ interface RowProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<
 }
 declare const Row: React$1.ForwardRefExoticComponent<RowProps & React$1.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Grid — 2D layout primitive. The partner to Stack and Row.
+ *
+ * Stack handles vertical, Row handles horizontal, Grid handles the
+ * responsive 2D case — most commonly a set of equal-width tiles (stat
+ * cards, feature cards, pricing columns) that needs to collapse
+ * gracefully on narrow viewports. Without this primitive, every
+ * vibe-coded dashboard reinvents `grid grid-cols-1 md:grid-cols-2
+ * lg:grid-cols-4` and the settings panel has nothing to mutate.
+ *
+ * `cols` names the DESIRED desktop column count. Each value is a
+ * baked-in responsive ladder that matches the standard pattern for that
+ * count (1→2→N for small counts, 2→3→N for denser grids) so the model
+ * just writes `<Grid cols="4">` and gets the same behaviour it would
+ * hand-roll. If you need bespoke breakpoints, override via `className`.
+ *
+ * Sharing the `gap` / `align` scale with Stack and Row is deliberate:
+ * when the Studio panel offers a "switch layout type" control between
+ * Stack / Row / Grid, those props transfer cleanly — only `cols`
+ * (Grid-only) and `justify` / `wrap` (Row-only) are lost.
+ */
+declare const gridVariants: (props?: ({
+    cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Grid's layout classes onto an existing semantic tag
+     *  without nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Flex — the unopinionated flexbox primitive.
+ *
+ * The CSS-aligned partner to Stack / Row / Grid. Where Stack and Row bake in
+ * a direction and a sensible gap/align default, Flex exposes the raw CSS
+ * knobs and ships with CSS's own defaults — direction=row, gap=none,
+ * justify=start, align=stretch, wrap=nowrap. Nothing is opinionated; you pay
+ * for exactly the props you set.
+ *
+ * Use Flex when:
+ *   - You need `direction="col-reverse"` or `"row-reverse"` — Stack and Row
+ *     can't express either without falling back to className.
+ *   - You want CSS defaults (stretch alignment, no baked-in gap) rather than
+ *     Row's "items-center gap-md" starting point.
+ *   - You're reaching for `className="flex …"` and want the settings-panel
+ *     editability you lose when hand-rolling utility classes.
+ *
+ * Otherwise prefer Stack (vertical) / Row (horizontal) / Grid (2D) —
+ * they're easier to read at a glance and have defaults tuned for the 95%
+ * case. Flex is the escape hatch, not the default.
+ */
+declare const flexVariants: (props?: ({
+    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
+    align?: "center" | "end" | "start" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | null | undefined;
+    wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface FlexProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
+    /** When true, render as the single child element via Radix Slot — lets
+     *  you stamp Flex's layout classes onto an existing semantic tag without
+     *  nesting an extra `<div>`. */
+    asChild?: boolean;
+}
+declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<HTMLDivElement>>;
+
 declare const ScrollArea: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const ScrollBar: React$1.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
@@ -318,7 +393,7 @@ declare const Slider: React$1.ForwardRefExoticComponent<Omit<SliderPrimitive.Sli
  * for a centred narrow column (auth cards, marketing copy).
  */
 declare const stackVariants: (props?: ({
-    gap?: "lg" | "md" | "sm" | "none" | "xs" | "xl" | "2xl" | null | undefined;
+    gap?: "none" | "sm" | "lg" | "xs" | "md" | "xl" | "2xl" | null | undefined;
     align?: "center" | "end" | "start" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface StackProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
@@ -1373,4 +1448,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React$1.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AppShell, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, generateTheme, getTheme, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AppShell, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, BUILT_IN_INPUTS, Badge, type BaseMediaProps, type BreadcrumbItem, Button, type ButtonShape, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, type ChartPalette, Checkbox, type ColorIntensity, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FRAGMENT_HEADER, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, type MediaAspect, type MediaRadius, MediaSurface, type MediaSurfaceProps, type ModeName, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SideMenu, type SideMenuItem, type SideMenuProps, type SideMenuSection, type SimpleTab, SimpleTabs, SimpleTabsContent, SimpleTabsList, type SimpleTabsListProps, SimpleTabsPanel, type SimpleTabsPanelProps, type SimpleTabsProps, SimpleTabsRoot, type SimpleTabsRootProps, SimpleTabsTrigger, type SimpleTabsTriggerProps, Skeleton, Slider, type SpacingDensity, Stack, type StackProps, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopMenu, type TopMenuProps, TopMenuUser, TopMenuUserItem, type TopMenuUserItemProps, type TopMenuUserProps, TopMenuUserSection, type TypeScalePreset, VideoPlayer, type VideoPlayerProps, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calmInput, cn, defaultPostPreset, defaultThemeId, deleteUserTheme, duplicateTheme, energyInput, flexVariants, generateTheme, getTheme, gridVariants, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, shaderPresetById, shaderPresets, shellVariants, stackVariants, themeToCSSVars, useGradeTheme, useMaybeGradeTheme, usePrefersReducedMotion };