@gradeui/ui 4.0.0 → 4.1.0

package/dist/index.d.ts

@@ -191,14 +191,14 @@ declare const MediaSurfaceContract: _gradeui_contracts.ComponentContract<{
             description: z.ZodOptional<z.ZodString>;
         }, "strip", z.ZodTypeAny, {
             kind: "book";
-            description?: string | undefined;
             title?: string | undefined;
+            description?: string | undefined;
             author?: string | undefined;
             isbn?: string | undefined;
         }, {
             kind: "book";
-            description?: string | undefined;
             title?: string | undefined;
+            description?: string | undefined;
             author?: string | undefined;
             isbn?: string | undefined;
         }>, z.ZodObject<{
@@ -443,7 +443,7 @@ declare const CalloutDescription: React.ForwardRefExoticComponent<React.HTMLAttr
 declare const shellVariants: (props?: ({
     nav?: "none" | "top" | "side" | "three-pane" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare const headerVariants: (props?: ({
+declare const headerVariants$1: (props?: ({
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const navVariants: (props?: ({
@@ -463,7 +463,7 @@ interface AppShellProps extends React.HTMLAttributes<HTMLDivElement>, VariantPro
     asChild?: boolean;
 }
 declare const AppShell: React.ForwardRefExoticComponent<AppShellProps & React.RefAttributes<HTMLDivElement>>;
-interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants> {
+interface AppShellHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof headerVariants$1> {
     asChild?: boolean;
 }
 declare const AppShellHeader: React.ForwardRefExoticComponent<AppShellHeaderProps & React.RefAttributes<HTMLElement>>;
@@ -585,7 +585,7 @@ type Surface = "solid" | "translucent" | "glass" | "glass-strong" | "frosted";
  */
 declare const bannerVariants: (props?: ({
     variant?: "default" | "destructive" | "success" | "warning" | "info" | "announcement" | null | undefined;
-    align?: "between" | "start" | "center" | null | undefined;
+    align?: "center" | "between" | "start" | null | undefined;
     sticky?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BannerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof bannerVariants> {
@@ -647,8 +647,8 @@ declare const Banner: React.ForwardRefExoticComponent<BannerProps & React.RefAtt
  * consistent across primitives.
  */
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | "raised" | null | undefined;
-    size?: "2xs" | "xs" | "sm" | "md" | "lg" | "default" | null | undefined;
+    variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | "raised" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "md" | "lg" | null | undefined;
     iconOnly?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -676,7 +676,7 @@ declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAtt
  * Title / Subtitle / Description / Actions / Media) give the common shape
  * design intent without constraining it.
  */
-type SectionScope = "default" | "inverse" | "brand" | "accent" | "muted" | "card";
+type SectionScope$1 = "default" | "inverse" | "brand" | "accent" | "muted" | "card";
 type ContainerMaxW = "sm" | "md" | "lg" | "xl" | "prose" | "full";
 declare const bandVariants: (props?: ({
     pad?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
@@ -684,7 +684,7 @@ declare const bandVariants: (props?: ({
 interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof bandVariants> {
     /** Colour subtheme — applies the `scope-*` class (STUDIO-COLOR.md). Unset =
      *  the page surface (transparent). */
-    scope?: SectionScope;
+    scope?: SectionScope$1;
     /** Visual band background — image / video / gradient / shader (e.g.
      *  `<BackgroundFill>`). Renders BEHIND the content; Section owns the
      *  relative + overflow-hidden + z-layering. Works with `scope`, which
@@ -694,11 +694,11 @@ interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<t
     as?: "section" | "header" | "footer" | "div";
 }
 declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
-declare const containerVariants: (props?: ({
+declare const containerVariants$1: (props?: ({
     maxW?: "sm" | "md" | "lg" | "xl" | "full" | "prose" | null | undefined;
     grid?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants$1> {
     as?: "div" | "section";
 }
 declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
@@ -712,6 +712,66 @@ declare const SectionActions: React.ForwardRefExoticComponent<React.HTMLAttribut
  *  doesn't care what's inside; the media frames itself. */
 declare const SectionMedia: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 
+/** Named colour SCOPES (STUDIO-COLOR.md). A `scope` makes the section a local
+ *  colour mode — like light/dark, but scoped to this element and focused on
+ *  surfaces. It applies the matching `scope-*` class, which re-points the
+ *  surface tokens (--background / --card / --muted / --foreground / --border)
+ *  at the named pair, so every descendant re-tones while still using the
+ *  ordinary tokens. `inverse` is the dark-band / light-text marketing scope. */
+declare const SECTION_SCOPES: readonly ["default", "inverse", "brand", "accent", "muted", "card"];
+type SectionScope = (typeof SECTION_SCOPES)[number];
+declare const sectionBlockVariants: (props?: ({
+    padding?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    background?: "muted" | "primary" | "gradient" | "card" | "transparent" | "scoped" | null | undefined;
+    fullBleed?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const containerVariants: (props?: ({
+    container?: "default" | "full" | "wide" | "narrow" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const headerVariants: (props?: ({
+    alignment?: "center" | "right" | "left" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const titleVariants: (props?: ({
+    titleSize?: "sm" | "md" | "lg" | "xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+interface CTAConfig {
+    text: string;
+    variant?: ButtonVariant;
+    href?: string;
+    onClick?: () => void;
+}
+interface SectionBlockProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionBlockVariants>, VariantProps<typeof containerVariants>, VariantProps<typeof headerVariants>, VariantProps<typeof titleVariants> {
+    /**
+     * What the section surface is *made of*. Orthogonal to `background`
+     * (which picks the tonal direction): `surface` picks the material
+     * applied on top.
+     *
+     * - `solid` (default): the `background` tint is opaque.
+     * - `translucent`: ~82% opacity, no blur — picks up the page underneath.
+     * - `glass`: ~58% opacity + 14px blur + edge highlight. Sections that
+     *   sit over a hero image / generative backdrop and need to read as
+     *   floating chrome.
+     * - `glass-strong`: 42% + 24px blur — for full-page-overlay sections.
+     *
+     * When `surface !== "solid"`, the `background` Tailwind classes still
+     * apply but get overlaid with the glass class so the alpha shows
+     * through the tint.
+     */
+    surface?: Surface;
+    /** Make the section a named colour scope (a local surface mode): applies the
+     *  `scope-*` class so the whole subtree re-tones. Overrides `background`. */
+    scope?: SectionScope;
+    title?: string;
+    subtitle?: string;
+    cta1?: string | CTAConfig;
+    cta2?: string | CTAConfig;
+    backgroundImage?: string;
+    children?: React.ReactNode;
+    as?: "section" | "div" | "article";
+}
+declare const SectionBlock: React.ForwardRefExoticComponent<SectionBlockProps & React.RefAttributes<HTMLElement>>;
+
 declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
     buttonVariant?: React.ComponentProps<typeof Button>["variant"];
 }): React.JSX.Element;
@@ -1753,7 +1813,7 @@ declare const DropdownMenuShortcut: {
  * rationale.
  */
 declare const inputVariants: (props?: ({
-    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
     variant?: "default" | "ghost" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
@@ -1774,7 +1834,7 @@ type InputProps = Omit<React.ComponentProps<"input">, "size"> & {
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: ({
-    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
 
 declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
@@ -2142,7 +2202,7 @@ declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPri
  *   </ResizablePanelGroup>
  */
 declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React.JSX.Element;
-declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLSelectElement | HTMLTextAreaElement | HTMLMapElement | HTMLTitleElement | HTMLVideoElement | HTMLButtonElement | HTMLLinkElement | HTMLLabelElement | HTMLStyleElement | HTMLSourceElement | HTMLHtmlElement | HTMLDataElement | HTMLOptionElement | HTMLTableColElement | HTMLAudioElement | HTMLEmbedElement | HTMLProgressElement | HTMLHRElement | HTMLTableElement | HTMLAnchorElement | HTMLFormElement | HTMLHeadingElement | HTMLImageElement | HTMLInputElement | HTMLLIElement | HTMLOListElement | HTMLParagraphElement | HTMLSpanElement | HTMLUListElement | HTMLAreaElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLFieldSetElement | HTMLHeadElement | HTMLIFrameElement | HTMLLegendElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOutputElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLHeadElement | HTMLElement | HTMLLinkElement | HTMLDivElement | HTMLObjectElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLButtonElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLInputElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string | undefined;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -2182,8 +2242,8 @@ declare const ResizableHandle: ({ withHandle, className, ...props }: React.Compo
  */
 declare const rowVariants: (props?: ({
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
     wrap?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface RowProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowVariants> {
@@ -2218,7 +2278,7 @@ declare const Row: React.ForwardRefExoticComponent<RowProps & React.RefAttribute
 declare const gridVariants: (props?: ({
     cols?: "1" | "2" | "3" | "4" | "5" | "6" | "12" | null | undefined;
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "start" | "center" | "end" | "stretch" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
     /** When true, render as the single child element via Radix Slot — lets
@@ -2250,10 +2310,10 @@ declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttribu
  * case. Flex is the escape hatch, not the default.
  */
 declare const flexVariants: (props?: ({
-    direction?: "row" | "col" | "row-reverse" | "col-reverse" | null | undefined;
+    direction?: "col" | "row" | "row-reverse" | "col-reverse" | null | undefined;
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "start" | "center" | "end" | "stretch" | "baseline" | null | undefined;
-    justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
+    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FlexProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
@@ -2287,7 +2347,7 @@ type SelectMenuSize = "default" | "sm" | "xs" | "2xs";
  * existing call site.
  */
 declare const selectTriggerVariants: (props?: ({
-    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SelectTriggerSize = NonNullable<VariantProps<typeof selectTriggerVariants>["size"]>;
 declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
@@ -2399,7 +2459,7 @@ declare const SheetClose: React.ForwardRefExoticComponent<DialogPrimitive.Dialog
 declare const SheetPortal: React.FC<DialogPrimitive.DialogPortalProps>;
 declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const sheetVariants: (props?: ({
-    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+    side?: "bottom" | "top" | "right" | "left" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
     /** Extra classes for the backdrop overlay. e.g. `bg-transparent`
@@ -2555,8 +2615,8 @@ declare const Sortable: SortableRootComponent;
  */
 declare const stackVariants: (props?: ({
     gap?: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
-    align?: "start" | "center" | "end" | "stretch" | null | undefined;
-    justify?: "between" | "start" | "center" | "end" | "around" | "evenly" | null | undefined;
+    align?: "center" | "start" | "end" | "stretch" | null | undefined;
+    justify?: "center" | "between" | "start" | "end" | "around" | "evenly" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface StackProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
     /** When true, render as the single child element via Radix Slot — lets
@@ -2574,7 +2634,7 @@ declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttri
  * dense tool-panel sizes (the Studio inspector).
  */
 declare const switchTrackVariants: (props?: ({
-    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type SwitchSize = NonNullable<VariantProps<typeof switchTrackVariants>["size"]>;
 declare const Switch: React.ForwardRefExoticComponent<Omit<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref">, "size"> & {
@@ -2762,7 +2822,7 @@ declare const ChartLegendContent: React.ForwardRefExoticComponent<Omit<React.Cla
  * px-3 / text-sm; `sm` and `xs` are for dense tool panels.
  */
 declare const textareaVariants: (props?: ({
-    size?: "2xs" | "xs" | "sm" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
 type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
@@ -2772,11 +2832,11 @@ declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 
 declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
@@ -2786,11 +2846,11 @@ declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimit
 
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "default" | "outline" | "segmented" | null | undefined;
-    size?: "2xs" | "xs" | "sm" | "lg" | "default" | null | undefined;
+    size?: "default" | "2xs" | "xs" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     tooltip?: React.ReactNode;
     tooltipSide?: React.ComponentPropsWithoutRef<typeof TooltipContent>["side"];
@@ -2845,7 +2905,7 @@ declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupP
  * persistent footer toolbars on mobile-style layouts.
  */
 declare const toolbarVariants: (props?: ({
-    position?: "top" | "inline" | "bottom" | null | undefined;
+    position?: "bottom" | "top" | "inline" | null | undefined;
     variant?: "default" | "transparent" | "subtle" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
     sticky?: boolean | null | undefined;
@@ -4921,6 +4981,16 @@ interface GeneratedTheme {
         info: Ramp;
         highlight: Ramp;
         destructive: Ramp;
+        /**
+         * Expressive accent ramps — default = the primary hue rotated +60°·k in
+         * OKLCH (k = 1..5). Optional so partially-constructed themes stay valid;
+         * generator output always includes them. Emitted as `--gds-accent{1..5}-<step>`.
+         */
+        accent1?: Ramp;
+        accent2?: Ramp;
+        accent3?: Ramp;
+        accent4?: Ramp;
+        accent5?: Ramp;
     };
     /** Semantic tokens for all four modes. */
     colors: Record<ModeName, GeneratedColorsMode>;
@@ -5116,4 +5186,4 @@ declare function GradeModeSwitcher({ className, variant }: GradeModeSwitcherProp
  */
 declare function ThemeToggle(): React.JSX.Element;
 
-export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, TRANSPARENT as COLOR_PICKER_TRANSPARENT, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, ColorPicker, type ColorPickerProps, type ColorTokenGroup, Combobox, type ComboboxOption, type ComboboxProps, Container, type ContainerMaxW, type ContainerProps, DEFAULT_COLOR_TOKEN_GROUPS, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DemoSpeed, DemoStage, type DemoStageProps, DemoTrigger, 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, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, FillSection, type FillSectionProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, GradientEditor, type GradientEditorProps, type GradientStop, type GradientType, type GradientValue, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Section, SectionActions, SectionDescription, SectionEyebrow, SectionMedia, type SectionProps, type SectionScope, SectionSubtitle, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, containerVariants, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gradientToCss, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, bandVariants as sectionBandVariants, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };
+export { ALL_MODES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AppShell, AppShellAside, type AppShellAsideProps, AppShellFooter, type AppShellFooterProps, AppShellHeader, type AppShellHeaderProps, AppShellMain, type AppShellMainProps, AppShellNav, type AppShellNavProps, type AppShellProps, Avatar, AvatarFallback, AvatarImage, type AvatarTone, BUILT_IN_INPUTS, BackgroundFill, type BackgroundFillFit, type BackgroundFillProps, type BackgroundFillType, Badge, Banner, type BannerProps, type BaseMediaProps, BlinkingCursor, type BlinkingCursorProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, type BreadcrumbMenuItem, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator, Button, type ButtonShape, TRANSPARENT as COLOR_PICKER_TRANSPARENT, COMPONENT_CONTRACTS, Calendar, CalendarDayButton, Callout, CalloutDescription, CalloutTitle, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardStyle, CardTitle, Carousel, CarouselArrows, type CarouselArrowsProps, type AutoplayConfig as CarouselAutoplayConfig, CarouselDots, type CarouselDotsProps, type CarouselNavButtonProps, CarouselNext, CarouselPrev, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselVideoSlide, type CarouselVideoSlideProps, type ChartConfig, ChartContainer, ChartLegend, ChartLegendContent, type ChartPalette, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, CheckboxCard, type CheckboxCardProps, Code, type CodeDiff, type CodeLanguage, type CodeProps, type CodeReveal, type CodeTrigger, type ColorIntensity, ColorPicker, type ColorPickerProps, type ColorTokenGroup, Combobox, type ComboboxOption, type ComboboxProps, Container, type ContainerMaxW, type ContainerProps, DEFAULT_COLOR_TOKEN_GROUPS, DEMO_SPEED_PRESETS, DataView, type DataViewBadgeOption, type DataViewCellType, type DataViewColumn, DataViewColumns, type DataViewColumnsProps, type DataViewMode, type DataViewProps, type DataViewState, DataViewToggle, type DataViewToggleProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DemoSpeed, DemoStage, type DemoStageProps, DemoTrigger, 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, FILL_TOKENS, FRAGMENT_HEADER, Field, FieldDescription, FieldLabel, type FieldProps, FieldTrailing, FillPicker, type FillPickerProps, FillSection, type FillSectionProps, type FillValue, Flex, type FlexProps, type FontKey, GRADE_PRE_HYDRATION_SCRIPT, type GeneratedTheme, GradeLoader, type GradeLoaderProps, type GradeLoaderSize, GradeModeSwitcher, GradeThemeProvider, type GradeThemeProviderProps, GradeThemeSwitcher, GradientEditor, type GradientEditorProps, type GradientStop, type GradientType, type GradientValue, Grid, type GridProps, Input, type InputStyle, Label, LenisProvider, Logo, type LogoLockup, type LogoMode, type LogoProps, type LogoSize, type LogoSources, type LogoVariant, MOTION_ATTR, Map, MapHandle, MapMarker, MapMarkerProps, MapProps, type MediaAspect, type MediaRadius, MediaSurface, MediaSurfaceContract, type MediaSurfaceProps, Message, type MessageProps, type ModeName, Motion, MotionOverlay, type MotionOverlayProps, type MotionOverlayZone, type MotionProps, MotionScene, type MotionSceneProps, type MotionSceneRegistration, type MotionSceneTransition, MotionScreen, type MotionScreenAnimate, type MotionScreenProps, MotionText, type MotionTextProps, type MotionTextTemplate, MultiSelect, type MultiSelectOption, type MultiSelectProps, type OKLCHTriplet, type Palette, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PostPreset, Progress, PropertyList, type PropertyListProps, PropertyListRow, type PropertyListRowProps, RadioCard, type RadioCardProps, RadioGroup, RadioGroupItem, type RadiusStyle, type Ramp, ResizableHandle, ResizablePanel, ResizablePanelGroup, Reveal, type RevealAnimation, type RevealProps, type RevealStep, RivePlayer, type RivePlayerProps, Row, type RowProps, type SceneContext, type SceneFactory, type SceneHandle, ScreenAnimator, type ScreenAnimatorProps, type ScreenAnimatorShot, type ScriptedDemoContext, type ScriptedDemoState, ScrollArea, ScrollBar, Section, SectionActions, SectionBlock, type SectionBlockProps, SectionDescription, SectionEyebrow, SectionMedia, type SectionProps, type SectionScope$1 as SectionScope, SectionSubtitle, SectionTitle, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, ShaderCompileError, ShaderControls, type ShaderControlsProps, type ShaderPreset, ShaderPresetPicker, type ShaderPresetPickerProps, ShaderPresetPreview, type ShaderPresetPreviewProps, type ShadowIntensity, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContentProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, SidebarTreeItem, type SidebarTreeItemProps, Skeleton, Slider, Sortable, SortableGroup, type SortableGroupProps, SortableHandle, type SortableHandleProps, SortableItem, type SortableItemProps, type SortableProps, type SpacingDensity, Stack, type StackProps, Swatch, SwatchGroup, type SwatchGroupProps, type SwatchProps, Switch, SwitchCard, type SwitchCardProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type ThemeInput, ThemeToggle, ThreeScene, type ThreeSceneProps, Toggle, ToggleGroup, ToggleGroupItem, Toolbar, type ToolbarProps, ToolbarSlot, type ToolbarSlotProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TypeScalePreset, type UseDataViewOptions, type UseScriptedDemoOptions, VideoPlayer, type VideoPlayerProps, asideVariants as appShellAsideVariants, footerVariants as appShellFooterVariants, headerVariants$1 as appShellHeaderVariants, mainVariants as appShellMainVariants, navVariants as appShellNavVariants, applyThemeToRoot, badgeVariants, bannerVariants, buildFragmentShaderScene, builtInThemes, buttonVariants, calloutVariants, calmInput, cn, containerVariants$1 as containerVariants, defaultPostPreset, defaultThemeId, deleteUserTheme, sleep as demoSleep, typeText as demoTypeText, duplicateTheme, energyInput, flexVariants, generateTheme, getComponentContract, getTheme, gradientToCss, gridVariants, listContractedComponents, listThemes, listUserThemes, loadUserThemeInput, postPresets, rowVariants, saveUserTheme, sceneRegistry, bandVariants as sectionBandVariants, sectionBlockVariants, setMotion, shaderPresetById, shaderPresets, shellVariants, stackVariants, swatchVariants, themeToCSSVars, toggleVariants, useCarouselApi, useDataView, useGradeTheme, useMaybeGradeTheme, useMotionScene, usePageActive, usePrefersReducedMotion, useReducedMotion, useScriptedDemo };