@sckyzo/cosmos-react 0.0.3 → 0.2.0

package/dist/index.d.ts

@@ -53,7 +53,13 @@ declare const Divider: (({ inset, align, emphasis, insetBg, className, ...rest }
 type MediaObjectAlign = 'start' | 'center' | 'bottom' | 'stretch';
 type MediaObjectPosition = 'left' | 'right';
 type MediaObjectProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Where the media sits against the body: `start` (top), `center`, `bottom`,
+     * or `stretch` (the media slot takes the body's height; size the media
+     * `h-full`). Default `start`.
+     */
     align?: MediaObjectAlign;
+    /** Side of the body the media sits on. `right` reverses the row. Default `left`. */
     mediaPosition?: MediaObjectPosition;
     /** Gap between the media and the body. Default `gap-x-4` (16px). */
     gapClassName?: string;
@@ -61,7 +67,13 @@ type MediaObjectProps = HTMLAttributes<HTMLDivElement> & {
 type MediaObjectImageProps = HTMLAttributes<HTMLDivElement>;
 type MediaObjectBodyProps = HTMLAttributes<HTMLDivElement>;
 declare const MediaObject: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Where the media sits against the body: `start` (top), `center`, `bottom`,
+     * or `stretch` (the media slot takes the body's height; size the media
+     * `h-full`). Default `start`.
+     */
     align?: MediaObjectAlign;
+    /** Side of the body the media sits on. `right` reverses the row. Default `left`. */
     mediaPosition?: MediaObjectPosition;
     /** Gap between the media and the body. Default `gap-x-4` (16px). */
     gapClassName?: string;
@@ -121,6 +133,12 @@ type SidebarProps = {
     children: ReactNode;
     /** Footer content (sticks to bottom — e.g. user profile + collapse btn). */
     footer?: ReactNode;
+    /**
+     * Renders a collapse button at the very bottom, under `footer`, and fires
+     * with the next state when it is clicked. Leave it out when the control
+     * lives elsewhere (e.g. the Topbar hamburger).
+     */
+    onCollapsedChange?: (collapsed: boolean) => void;
     /** Optional className override. */
     className?: string;
 };
@@ -132,7 +150,7 @@ type SidebarProps = {
  * is automatically threaded to every subcomponent via React context, so
  * children don't need to receive it as a prop.
  */
-declare const SidebarRoot: ({ collapsed, width, collapsedWidth, children, footer, className, }: SidebarProps) => react.JSX.Element;
+declare const SidebarRoot: ({ collapsed, width, collapsedWidth, children, footer, onCollapsedChange, className, }: SidebarProps) => react.JSX.Element;
 type SidebarBrandProps = {
     /** Logo node — typically a small icon, lucide component, or img. */
     logo?: ReactNode;
@@ -157,7 +175,7 @@ type SidebarItemProps = {
     label: string;
     /** Whether the item is active (highlighted). */
     active?: boolean;
-    /** Link target — renders an <a> if set, otherwise a <button>. */
+    /** Link target — renders an `<a>` if set, otherwise a `<button>`. */
     href?: string;
     /** Click handler (if not using href). */
     onClick?: () => void;
@@ -165,10 +183,13 @@ type SidebarItemProps = {
     badge?: ReactNode;
     /** Override the inherited collapsed state. */
     collapsed?: boolean;
-    /** Indentation depth (for nested items inside groups). Default: 0. */
+    /**
+     * Indentation depth. Defaults to the nesting level: 0 at the top, one more
+     * inside each Sidebar.SubMenu.
+     */
     depth?: number;
 };
-declare const SidebarItem: ({ icon: Icon, label, active, href, onClick, badge, collapsed: collapsedProp, depth, }: SidebarItemProps) => react.JSX.Element;
+declare const SidebarItem: ({ icon: Icon, label, active, href, onClick, badge, collapsed: collapsedProp, depth: depthProp, }: SidebarItemProps) => react.JSX.Element;
 type SidebarSubMenuProps = {
     icon: ComponentType<{
         className?: string;
@@ -182,7 +203,7 @@ type SidebarSubMenuProps = {
     active?: boolean;
     /** Optional badge shown right of label (hidden when collapsed). */
     badge?: ReactNode;
-    /** Nested items — typically `Sidebar.Item` with `depth={1}`. */
+    /** Nested items: Sidebar.Item, or another Sidebar.SubMenu for a deeper level. */
     children: ReactNode;
 };
 declare const SidebarSubMenu: ({ icon: Icon, label, defaultOpen, collapsed: collapsedProp, active, badge, children, }: SidebarSubMenuProps) => react.JSX.Element;
@@ -233,6 +254,12 @@ type ShellProps = {
     sidebarCollapsed?: boolean;
     /** Fired whenever the collapsed state toggles. */
     onSidebarToggle?: (collapsed: boolean) => void;
+    /**
+     * Where the collapse control lives. `topbar` (default): the Topbar's
+     * hamburger. `sidebar`: a button at the bottom of the Sidebar, and the
+     * Topbar shows no hamburger.
+     */
+    collapseControl?: 'topbar' | 'sidebar';
     /** Optional className override on the root element. */
     className?: string;
 };
@@ -252,7 +279,7 @@ type ShellProps = {
  *       …
  *     </Shell>
  */
-declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onSidebarToggle, className, }: ShellProps) => react.JSX.Element;
+declare const Shell: ({ topbar, sidebar, children, secondary, secondaryWidthClassName, defaultSidebarCollapsed, sidebarCollapsed: controlledCollapsed, onSidebarToggle, collapseControl, className, }: ShellProps) => react.JSX.Element;
 
 type PageBreadcrumbItem = {
     label: string;
@@ -331,21 +358,6 @@ type SectionCardProps = {
  */
 declare const SectionCard: ({ title, desc, icon: Icon, iconTone, iconColor, iconBg, children, className, }: SectionCardProps) => react.JSX.Element;
 
-type PageCardProps = {
-    children: ReactNode;
-    className?: string;
-};
-/**
- * PageCard — full-page outer card.
- *
- * Replaces multiple SectionCards stacked: a single rounded-2xl bordered card
- * that wraps ALL page content. Use for settings, profiles, forms — anything
- * that's hard to read full-width.
- *
- * Combine with `<ContentNarrow>` inside for a centered constrained column.
- */
-declare const PageCard: ({ children, className }: PageCardProps) => react.JSX.Element;
-
 type ContentNarrowProps = {
     children: ReactNode;
     /** Max width in px. Default: 680 */
@@ -355,7 +367,7 @@ type ContentNarrowProps = {
 /**
  * ContentNarrow — centered constrained-width wrapper.
  *
- * Use inside PageCard or anywhere you want a readable column of content
+ * Use inside a Card or anywhere you want a readable column of content
  * (settings forms, prose, profile pages…). Default width is 680px.
  */
 declare const ContentNarrow: ({ children, maxWidth, className }: ContentNarrowProps) => react.JSX.Element;
@@ -520,7 +532,8 @@ type StackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
     /**
      * If set, the entire row becomes a navigable link via a full-row overlay
      * (TUI pattern: `<a><span class="absolute inset-x-0 -top-px bottom-0"></span></a>`).
-     * The overlay sits above the title text — other inner anchors stay on top via z-index.
+     * `trailing` is lifted above the overlay so its actions stay clickable; give
+     * any other interactive element (in `subtitle` or `meta`) `position: relative`.
      */
     href?: string;
     /** When `href` is set, also append a chevron-right icon to indicate navigation. */
@@ -543,7 +556,8 @@ declare const StackedList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<H
         /**
          * If set, the entire row becomes a navigable link via a full-row overlay
          * (TUI pattern: `<a><span class="absolute inset-x-0 -top-px bottom-0"></span></a>`).
-         * The overlay sits above the title text — other inner anchors stay on top via z-index.
+         * `trailing` is lifted above the overlay so its actions stay clickable; give
+         * any other interactive element (in `subtitle` or `meta`) `position: relative`.
          */
         href?: string;
         /** When `href` is set, also append a chevron-right icon to indicate navigation. */
@@ -561,7 +575,10 @@ type ContentStackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
     href?: string;
     /** Optional inline badge rendered next to the title (pattern 5). */
     badge?: ReactNode;
-    /** Inline meta items separated by a dot. Pass an array of ReactNodes. */
+    /**
+     * Inline meta items separated by a dot. Pass an array of ReactNodes. Each item
+     * stays on one line; the last one truncates when the row runs out of room.
+     */
     meta?: ReactNode[];
     /** Right-aligned slot — typically an AvatarGroup (pattern 3) or a button + actions menu (pattern 5). */
     trailing?: ReactNode;
@@ -576,7 +593,10 @@ declare const ContentStackedList: react.ForwardRefExoticComponent<Omit<HTMLAttri
         href?: string;
         /** Optional inline badge rendered next to the title (pattern 5). */
         badge?: ReactNode;
-        /** Inline meta items separated by a dot. Pass an array of ReactNodes. */
+        /**
+         * Inline meta items separated by a dot. Pass an array of ReactNodes. Each item
+         * stays on one line; the last one truncates when the row runs out of room.
+         */
         meta?: ReactNode[];
         /** Right-aligned slot — typically an AvatarGroup (pattern 3) or a button + actions menu (pattern 5). */
         trailing?: ReactNode;
@@ -587,6 +607,11 @@ type StackedListInCardProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
     /** Children must be `<StackedList.Item>` elements. */
     children: ReactNode;
 };
+/**
+ * A `StackedList` on a card surface (ring, shadow, rounded from `sm` up). Each
+ * `StackedList.Item` child gets horizontal padding so its content clears the
+ * card edge; other children render unchanged.
+ */
 declare const StackedListInCard: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
     /** Children must be `<StackedList.Item>` elements. */
     children: ReactNode;
@@ -609,7 +634,7 @@ type NarrowStackedListItemProps = LiHTMLAttributes<HTMLLIElement> & {
     subtitle?: ReactNode;
     /** Optional right-of-title timestamp (Pattern 13). When set, an extra layout row is used. */
     timestamp?: ReactNode;
-    /** Optional second body line (Pattern 13). Auto line-clamped to 2. */
+    /** Optional second body line (Pattern 13). Auto line-clamped to 2. Replaces `subtitle`. */
     description?: ReactNode;
     /** Optional right-aligned trailing slot — action button, link (Pattern 12). */
     trailing?: ReactNode;
@@ -631,7 +656,7 @@ declare const NarrowStackedList: react.ForwardRefExoticComponent<Omit<HTMLAttrib
         subtitle?: ReactNode;
         /** Optional right-of-title timestamp (Pattern 13). When set, an extra layout row is used. */
         timestamp?: ReactNode;
-        /** Optional second body line (Pattern 13). Auto line-clamped to 2. */
+        /** Optional second body line (Pattern 13). Auto line-clamped to 2. Replaces `subtitle`. */
         description?: ReactNode;
         /** Optional right-aligned trailing slot — action button, link (Pattern 12). */
         trailing?: ReactNode;
@@ -652,12 +677,12 @@ type SimpleRowProps = {
  *
  * Use inside a SectionCard with `divide-y` for visually separated rows:
  *
- *   <SectionCard title="Metadata">
- *     <div className="divide-y divide-[var(--color-border)]">
- *       <SimpleRow label="ID" value="rack-01-a" mono />
- *       <SimpleRow label="Status" value={<StatusBadge status="OK" />} />
- *     </div>
- *   </SectionCard>
+ *     <SectionCard title="Metadata">
+ *       <div className="divide-y divide-[var(--color-border)]">
+ *         <SimpleRow label="ID" value="rack-01-a" mono />
+ *         <SimpleRow label="Status" value={<StatusBadge status="OK" />} />
+ *       </div>
+ *     </SectionCard>
  */
 declare const SimpleRow: ({ label, value, mono, className }: SimpleRowProps) => react.JSX.Element;
 
@@ -672,7 +697,7 @@ type ClickableRowProps = {
     subtitle?: string;
     /** Click handler — renders a button */
     onClick?: () => void;
-    /** Or provide an href to render an <a> instead */
+    /** Or provide an href to render an `<a>` instead */
     href?: string;
     className?: string;
 };
@@ -741,7 +766,10 @@ declare const ActivityFeed: react.ForwardRefExoticComponent<Omit<HTMLAttributes<
 
 type GridListCols = 1 | 2 | 3 | 4;
 type GridListProps = Omit<HTMLAttributes<HTMLUListElement>, 'children'> & {
-    /** Number of columns at the widest viewport. Responsive defaults below. */
+    /**
+     * Maximum number of columns. The grid starts at one column on phones and adds
+     * one at `sm`, `lg` and `xl` until it reaches this count.
+     */
     cols?: GridListCols;
     /** Gap class (Tailwind). Default `gap-6` (24px). */
     gapClassName?: string;
@@ -754,7 +782,10 @@ type GridListFooterActionProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     index?: number;
 };
 declare const GridList: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLUListElement>, "children"> & {
-    /** Number of columns at the widest viewport. Responsive defaults below. */
+    /**
+     * Maximum number of columns. The grid starts at one column on phones and adds
+     * one at `sm`, `lg` and `xl` until it reaches this count.
+     */
     cols?: GridListCols;
     /** Gap class (Tailwind). Default `gap-6` (24px). */
     gapClassName?: string;
@@ -800,6 +831,11 @@ declare const Breadcrumb: ({ items, separator, className }: BreadcrumbProps) =>
 
 type NavbarTheme = 'light' | 'dark';
 type NavbarProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * `light` follows the page theme (white, gray-800 in the dark themes);
+     * `dark` stays dark in every theme. Also the default theme of the parts.
+     * Default `light`.
+     */
     theme?: NavbarTheme;
     /** Constrain inner content to a max width container. Default `7xl`. */
     maxWidth?: 'none' | '7xl';
@@ -809,13 +845,19 @@ type NavbarProps = HTMLAttributes<HTMLElement> & {
 };
 type NavbarItemProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
     active?: boolean;
-    /** Resolve theme from the parent `<Navbar>` data attribute. Defaults to `light`. */
+    /** Defaults to the theme of the parent `<Navbar>`. */
     theme?: NavbarTheme;
 };
 type NavbarMobileMenuButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Defaults to the theme of the parent `<Navbar>`. */
     theme?: NavbarTheme;
 };
 declare const Navbar: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    /**
+     * `light` follows the page theme (white, gray-800 in the dark themes);
+     * `dark` stays dark in every theme. Also the default theme of the parts.
+     * Default `light`.
+     */
     theme?: NavbarTheme;
     /** Constrain inner content to a max width container. Default `7xl`. */
     maxWidth?: "none" | "7xl";
@@ -1027,7 +1069,7 @@ type AvatarProps = {
 declare const Avatar: ({ src, alt, name, size, className }: AvatarProps) => react.JSX.Element;
 
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
-type TooltipVariant = 'dark' | 'white' | 'brand';
+type TooltipVariant = 'dark' | 'white' | 'brand' | 'success' | 'warning' | 'danger';
 type TooltipProps = {
     content: ReactNode;
     children: ReactNode;
@@ -1035,8 +1077,21 @@ type TooltipProps = {
     variant?: TooltipVariant;
     /** Tailwind max-width class — default `max-w-xs` (320px) */
     maxWidth?: string;
+    /** Keys shown after the content, e.g. `['⌘', 'S']`. */
+    shortcut?: string[];
+    /** Bold first line; `content` then reads as its explanation. */
+    title?: ReactNode;
+    /** Draw the small arrow pointing at the trigger. Default `true`. */
+    arrow?: boolean;
+    /** Milliseconds to wait before showing on hover or focus. Default `0`. */
+    delay?: number;
 };
-declare const Tooltip: ({ content, children, position, variant, maxWidth, }: TooltipProps) => react.JSX.Element;
+/**
+ * Tooltip — shows `content` next to its trigger on hover and on keyboard
+ * focus; Escape hides it. When the trigger is an element (a button, a link),
+ * it gets `aria-describedby` pointing at the tooltip.
+ */
+declare const Tooltip: ({ content, children, position, variant, maxWidth, shortcut, title, arrow, delay, }: TooltipProps) => react.JSX.Element;
 declare const TooltipHelp: ({ text, position, variant, }: {
     text: string;
     position?: TooltipPosition;
@@ -1183,11 +1238,26 @@ declare const Drawer: (({ open, onClose, side, size, withBackdrop, closeOutside,
 };
 
 type TabsOrientation = 'horizontal' | 'vertical';
+type TabsVariant = 
+/** Accent line under the active tab, on a thin line under the list. */
+'underline'
+/**
+ * File-folder tabs. The active tab is raised and joins the panel, which is
+ * drawn as a bordered surface; inactive tabs sit recessed behind it, on the
+ * panel's edge. Works in both orientations.
+ */
+ | 'folder';
 type TabsProps = {
     value: string;
     onChange: (value: string) => void;
     /** Layout direction. `horizontal` (default) puts the tab list on top; `vertical` puts it on the left. */
     orientation?: TabsOrientation;
+    /**
+     * Visual style. `underline` (default) marks the active tab with an accent
+     * line. `folder` draws file-folder tabs attached to their panel, which then
+     * gets its own border, background and padding.
+     */
+    variant?: TabsVariant;
     children: ReactNode;
     className?: string;
 };
@@ -1199,7 +1269,7 @@ type TabProps = {
     disabled?: boolean;
     className?: string;
 };
-declare const Tabs: (({ value, onChange, orientation, children, className }: TabsProps) => react.JSX.Element) & {
+declare const Tabs: (({ value, onChange, orientation, variant, children, className, }: TabsProps) => react.JSX.Element) & {
     List: ({ children, className }: {
         children: ReactNode;
         className?: string;
@@ -1215,11 +1285,18 @@ declare const Tabs: (({ value, onChange, orientation, children, className }: Tab
 type CodeBlockProps = {
     code: string;
     language?: string;
+    /**
+     * Turns `code` into highlighted nodes, rendered inside the block's `<code>`.
+     * Cosmos ships no highlighter: plug one in (the story wires Shiki to the
+     * `--color-code-*` theme tokens). Without it the code is plain text. The
+     * copy button always copies `code`.
+     */
+    highlight?: (code: string, language?: string) => ReactNode;
     /** Show the copy button (top-right, hover-revealed). Default `true`. */
     showCopy?: boolean;
     className?: string;
 };
-declare const CodeBlock: ({ code, language, showCopy, className }: CodeBlockProps) => react.JSX.Element;
+declare const CodeBlock: ({ code, language, highlight, showCopy, className, }: CodeBlockProps) => react.JSX.Element;
 
 type PageActionVariant = 'outline' | 'primary' | 'brand-outline' | 'danger-outline';
 type PageActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -1613,11 +1690,11 @@ declare const ThemeToggle: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttrib
 } & react.RefAttributes<HTMLButtonElement>>;
 
 type ThemeToggleTriSize = 'sm' | 'md';
-type ThemeMode = 'light' | 'dark' | 'oled';
+type ThemeMode = 'light' | 'dark' | 'deep-blue';
 type ThemeToggleTriProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'onChange'> & {
     /** Current theme. */
     theme: ThemeMode;
-    /** Called with the next theme in the cycle (light → dark → oled → light). */
+    /** Called with the next theme in the cycle (light → dark → deep-blue → light). */
     onChange: (next: ThemeMode) => void;
     /** Visual size. `md` (default) = 40px, `sm` = 32px. */
     size?: ThemeToggleTriSize;
@@ -1625,13 +1702,19 @@ type ThemeToggleTriProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClic
     lightLabel?: string;
     /** Label used when the next click will switch to dark mode. */
     darkLabel?: string;
-    /** Label used when the next click will switch to OLED mode. */
-    oledLabel?: string;
+    /** Label used when the next click will switch to deep blue mode. */
+    deepBlueLabel?: string;
 };
+/**
+ * ThemeToggleTri — icon button that cycles light → dark → deep-blue. It is
+ * controlled: a click calls `onChange` with the next mode and changes nothing
+ * else, so apply the theme there (for example with `applyAppearance`). To
+ * offer all four themes, sand included, use `AppearanceSettings`.
+ */
 declare const ThemeToggleTri: react.ForwardRefExoticComponent<Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange" | "onClick"> & {
     /** Current theme. */
     theme: ThemeMode;
-    /** Called with the next theme in the cycle (light → dark → oled → light). */
+    /** Called with the next theme in the cycle (light → dark → deep-blue → light). */
     onChange: (next: ThemeMode) => void;
     /** Visual size. `md` (default) = 40px, `sm` = 32px. */
     size?: ThemeToggleTriSize;
@@ -1639,8 +1722,8 @@ declare const ThemeToggleTri: react.ForwardRefExoticComponent<Omit<ButtonHTMLAtt
     lightLabel?: string;
     /** Label used when the next click will switch to dark mode. */
     darkLabel?: string;
-    /** Label used when the next click will switch to OLED mode. */
-    oledLabel?: string;
+    /** Label used when the next click will switch to deep blue mode. */
+    deepBlueLabel?: string;
 } & react.RefAttributes<HTMLButtonElement>>;
 
 type ButtonGroupOrientation = 'horizontal' | 'vertical';
@@ -1704,6 +1787,8 @@ declare const Carousel: (({ options, autoplay, stopOnInteraction, className, chi
 };
 
 type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+/** Horizontal alignment with the trigger, for `top` / `bottom` positions. */
+type PopoverAlign = 'center' | 'end';
 type PopoverProps = {
     open?: boolean;
     defaultOpen?: boolean;
@@ -1713,6 +1798,15 @@ type PopoverProps = {
 type PopoverTriggerProps = ButtonHTMLAttributes<HTMLButtonElement>;
 type PopoverContentProps = {
     position?: PopoverPosition;
+    /**
+     * Horizontal alignment with the trigger for `top` / `bottom`: `center`
+     * (default) or `end`, flush with its right edge — for triggers near the
+     * right of the screen. `end` also caps the width so the panel keeps 16px
+     * from the left of the screen. Ignored for `left` / `right`.
+     */
+    align?: PopoverAlign;
+    /** Accessible name of the dialog. */
+    'aria-label'?: string;
     /** Distance from the trigger edge in px. Default 8. */
     offset?: number;
     /** Show a small arrow pointing to the trigger. Default false. */
@@ -1724,7 +1818,7 @@ type PopoverContentProps = {
 };
 declare const Popover: (({ open: openProp, defaultOpen, onOpenChange, children, }: PopoverProps) => react.JSX.Element) & {
     Trigger: react.ForwardRefExoticComponent<PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-    Content: ({ position, offset, arrow, width, className, children, }: PopoverContentProps) => react.ReactPortal | null;
+    Content: ({ position, align, "aria-label": ariaLabel, offset, arrow, width, className, children, }: PopoverContentProps) => react.ReactPortal | null;
 };
 
 type ProgressBarSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -2803,17 +2897,24 @@ type TimelineItem = {
     description?: ReactNode;
     /** Time label — e.g. "5m ago", "2026-05-07 14:32". */
     time?: ReactNode;
-    /** Lucide icon — used by `dot` and `stepper` variants. */
+    /** Lucide icon — used by `dot`, `stepper` and `alternating` variants. */
     icon?: ElementType;
     /** Initials/name for `avatar` variant. */
     avatarName?: string;
     /** Optional image URL for `avatar` variant. */
     avatarSrc?: string;
     /**
-     * Visual tone for `stepper` variant (icon circle background).
-     * Defaults to `brand`.
+     * Visual tone for `stepper` and `alternating` variants (icon circle
+     * background). Defaults to `brand`.
      */
     tone?: TimelineTone;
+    /** Extra line under the description, e.g. "by Sarah Chen". */
+    meta?: ReactNode;
+    /**
+     * Section label, e.g. "Today". Consecutive items with the same `group` get
+     * one header above them.
+     */
+    group?: string;
 };
 type TimelineTone = 'brand' | 'success' | 'warning' | 'danger' | 'neutral';
 type TimelineVariant = 
@@ -2828,7 +2929,13 @@ type TimelineVariant =
  */
  | 'stepper'
 /** Each entry rendered as a stand-alone card (no connector line). */
- | 'card';
+ | 'card'
+/**
+ * Cards alternating left and right of a centred line, with a `stepper`
+ * icon circle on the line and the time on the other side. Below `md`, one
+ * column with the line on the left.
+ */
+ | 'alternating';
 type TimelineProps = {
     items: TimelineItem[];
     variant?: TimelineVariant;
@@ -2850,7 +2957,48 @@ type MiniCalendarProps = {
  */
 declare const MiniCalendar: ({ today, selected, onSelect, eventDays, className, }: MiniCalendarProps) => react.JSX.Element;
 
+type EventCalendarTone = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'violet';
+type CalendarEvent = {
+    id: string;
+    title: string;
+    /** First day of the event. Only the date is used, not the time. */
+    start: Date;
+    /** Last day, inclusive. Omit for a one-day event. */
+    end?: Date;
+    /** Dot and chip colour. Defaults to `brand`. */
+    tone?: EventCalendarTone;
+};
+type EventCalendarProps = {
+    events: CalendarEvent[];
+    /** Month to show (any day in it). Set it with `onMonthChange` to control the calendar. */
+    month?: Date;
+    /** First month shown when `month` is not set. Defaults to the month of `today`. */
+    defaultMonth?: Date;
+    /** Fires with the first day of the month reached by previous / next / Today. */
+    onMonthChange?: (month: Date) => void;
+    /** Day highlighted as today, and where the Today button goes. Defaults to now. */
+    today?: Date;
+    /** Makes each event chip a button. */
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Makes each day number a button. */
+    onDayClick?: (date: Date) => void;
+    className?: string;
+};
+/**
+ * EventCalendar — month view of events, with ISO weeks (Monday first).
+ *
+ * Each day shows up to three event chips (a tone dot and the title) and a
+ * "+N more" button that lists the whole day. An event with an `end` repeats on
+ * every day it covers. Below `sm` the chips shrink to their dots.
+ *
+ * Uncontrolled by default; pass `month` with `onMonthChange` to drive it from
+ * outside (a side MiniCalendar, or loading events per month).
+ */
+declare const EventCalendar: ({ events, month, defaultMonth, onMonthChange, today, onEventClick, onDayClick, className, }: EventCalendarProps) => react.JSX.Element;
+
 type SortDirection = 'asc' | 'desc';
+/** Row height of a `DataTable`: the standard rows, or taller `comfortable` ones. */
+type DataTableDensity = 'default' | 'comfortable';
 type ColumnDef<T> = {
     /** Stable key — used for sort/filter identity. */
     key: string;
@@ -2883,6 +3031,12 @@ type DataTableProps<T> = {
     onRetry?: () => void;
     emptyTitle?: string;
     emptyDescription?: string;
+    /**
+     * Row height. `default` keeps the standard rows. `comfortable` pads the
+     * header and body cells more, for rows that carry two lines (a name over an
+     * email, an avatar) or need more room. Cell content stays vertically centred.
+     */
+    density?: DataTableDensity;
     /** Show a checkbox column and enable row selection. */
     selectable?: boolean;
     /** Controlled selection set (row keys). */
@@ -2904,7 +3058,7 @@ type DataTableProps<T> = {
  * empty states, optional row selection with bulk actions, and an optional
  * global search bar.
  */
-declare const DataTable: <T>({ rows, columns, rowKey, renderRowAction, pageSize, loading, error, onRetry, emptyTitle, emptyDescription, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, className, }: DataTableProps<T>) => react.JSX.Element;
+declare const DataTable: <T>({ rows, columns, rowKey, renderRowAction, pageSize, loading, error, onRetry, emptyTitle, emptyDescription, density, selectable, selection: selectionProp, defaultSelection, onSelectionChange, bulkActions, searchValue: searchValueProp, defaultSearchValue, onSearchChange, searchPlaceholder, className, }: DataTableProps<T>) => react.JSX.Element;
 
 type ColumnHeaderProps = {
     label: ReactNode;
@@ -2919,9 +3073,11 @@ type ColumnHeaderProps = {
     filterSelected?: Set<string>;
     onFilterToggle?: (v: string) => void;
     onFilterClear?: () => void;
+    /** Cell padding, matching the `density` of the table it heads. Default `default`. */
+    density?: DataTableDensity;
     className?: string;
 };
-declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, className, }: ColumnHeaderProps) => react.JSX.Element;
+declare const ColumnHeader: ({ label, align, sortable, filterable, sortDir, onSortToggle, filterValues, filterSelected, onFilterToggle, onFilterClear, density, className, }: ColumnHeaderProps) => react.JSX.Element;
 
 type ColumnFilterDropdownProps = {
     values: string[];
@@ -3004,17 +3160,18 @@ type ErrorPageProps = {
  * `code`/`title` per scenario.
  *
  * Example (404):
- *   <ErrorPage
- *     code={404}
- *     title="Page not found"
- *     description="Sorry, the page you're looking for doesn't exist."
- *     actions={
- *       <>
- *         <Button as="a" href="/">Go home</Button>
- *         <Button variant="secondary" onClick={() => history.back()}>Back</Button>
- *       </>
- *     }
- *   />
+ *
+ *     <ErrorPage
+ *       code={404}
+ *       title="Page not found"
+ *       description="Sorry, the page you're looking for doesn't exist."
+ *       actions={
+ *         <>
+ *           <Button as="a" href="/">Go home</Button>
+ *           <Button variant="secondary" onClick={() => history.back()}>Back</Button>
+ *         </>
+ *       }
+ *     />
  */
 declare const ErrorPage: ({ code, title, description, illustration, actions, className, }: ErrorPageProps) => react.JSX.Element;
 
@@ -3217,6 +3374,11 @@ type PalettePreview = {
     surface: string;
     /** Borders and faint dividers. */
     border: string;
+    /**
+     * Label color on `surface`. Set it when the palettes in one picker mix light
+     * and dark surfaces: the default gray only reads on light ones.
+     */
+    text?: string;
 };
 type PaletteMeta = {
     /** Stable identifier. */
@@ -3290,6 +3452,133 @@ type OptionPickerProps = {
  */
 declare const OptionPicker: ({ options, value, onChange, cols, className, }: OptionPickerProps) => react.JSX.Element;
 
+/** A Cosmos theme: one class on `<html>`, none for `light`. */
+type CosmosTheme = 'light' | 'sand' | 'dark' | 'deep-blue';
+/** A Cosmos accent: the `data-accent` attribute on `<html>`, none for `blue`. */
+type CosmosAccent = 'blue' | 'indigo' | 'violet' | 'purple' | 'rose' | 'teal' | 'cyan' | 'graphite' | 'red' | 'orange' | 'amber' | 'green';
+/** A Cosmos font: the `data-font` attribute on `<html>`, none for `outfit`. */
+type CosmosFont = 'outfit' | 'inter' | 'plex' | 'montserrat' | 'open-sans' | 'system';
+/** A Cosmos text size: the `data-text-size` attribute on `<html>`, none for `md`. */
+type CosmosTextSize = 'sm' | 'md' | 'lg' | 'xl';
+type CosmosThemeMeta = PaletteMeta & {
+    id: CosmosTheme;
+    dark: boolean;
+};
+type CosmosAccentMeta = AccentColor & {
+    id: CosmosAccent;
+};
+/** `family` is the CSS font stack the theme sets for this font. */
+type CosmosFontMeta = {
+    id: CosmosFont;
+    label: string;
+    family: string;
+};
+/** `scale` is the factor the theme applies to every text size. */
+type CosmosTextSizeMeta = {
+    id: CosmosTextSize;
+    label: string;
+    scale: number;
+};
+/**
+ * The page's appearance. `font` and `textSize` are optional: leave them out
+ * and `applyAppearance` doesn't touch their attributes.
+ */
+type CosmosAppearance = {
+    theme: CosmosTheme;
+    accent: CosmosAccent;
+    font?: CosmosFont;
+    textSize?: CosmosTextSize;
+};
+/** The four themes shipped by `@sckyzo/cosmos-theme`, ready for `<PalettePicker>`. */
+declare const COSMOS_THEMES: CosmosThemeMeta[];
+/**
+ * The twelve accents, ready for `<AccentPicker>`. `hex` is the accent's
+ * `brand-500`. Red, orange, amber and green look like the status colors, so
+ * they come last.
+ */
+declare const COSMOS_ACCENTS: CosmosAccentMeta[];
+/**
+ * The fonts of `@sckyzo/cosmos-theme`. Outfit loads from
+ * `@sckyzo/cosmos-theme/fonts`, each other one from `fonts/<id>`; `system`
+ * loads nothing. Only offer the fonts whose CSS the app imports.
+ */
+declare const COSMOS_FONTS: CosmosFontMeta[];
+/** The four text sizes of `@sckyzo/cosmos-theme`, smallest first. */
+declare const COSMOS_TEXT_SIZES: CosmosTextSizeMeta[];
+/** `true` for the themes that enable Tailwind's `dark:` variant. */
+declare const isDarkTheme: (theme: CosmosTheme) => boolean;
+/**
+ * Apply an appearance to `root` (default `<html>`): swaps the theme class and
+ * sets `data-accent`, `data-font` and `data-text-size`, removing each one for
+ * its default (blue, Outfit, `md`). A `font` or `textSize` left out keeps its
+ * attribute as it is. No-op during SSR.
+ */
+declare const applyAppearance: ({ theme, accent, font, textSize }: CosmosAppearance, root?: HTMLElement) => void;
+
+type AppearanceSettingsProps = {
+    /** Selected theme. */
+    theme: CosmosTheme;
+    /** Selected accent. */
+    accent: CosmosAccent;
+    onThemeChange: (theme: CosmosTheme) => void;
+    onAccentChange: (accent: CosmosAccent) => void;
+    /** Heading of the theme group. Default `'Theme'`. */
+    themeLabel?: string;
+    /** Heading of the accent group. Default `'Accent color'`. */
+    accentLabel?: string;
+    /** Themes to offer. Default: all of `COSMOS_THEMES`. */
+    themes?: CosmosThemeMeta[];
+    /** Accents to offer. Default: all of `COSMOS_ACCENTS`. */
+    accents?: CosmosAccentMeta[];
+    /** Columns of the theme grid. Default 4; use 2 in narrow containers. */
+    themeColumns?: number;
+    /** Selected font. Default `'outfit'`. */
+    font?: CosmosFont;
+    /** Shows the font group. */
+    onFontChange?: (font: CosmosFont) => void;
+    /** Selected text size. Default `'md'`. */
+    textSize?: CosmosTextSize;
+    /** Shows the text size group. */
+    onTextSizeChange?: (textSize: CosmosTextSize) => void;
+    /** Heading of the font group. Default `'Font'`. */
+    fontLabel?: string;
+    /** Heading of the text size group. Default `'Text size'`. */
+    textSizeLabel?: string;
+    /**
+     * Fonts to offer. Default: all of `COSMOS_FONTS`. Offer only the fonts whose
+     * CSS the app imports (`@sckyzo/cosmos-theme/fonts/<id>`).
+     */
+    fonts?: CosmosFontMeta[];
+    /** Text sizes to offer. Default: all of `COSMOS_TEXT_SIZES`. */
+    textSizes?: CosmosTextSizeMeta[];
+    className?: string;
+};
+/**
+ * AppearanceSettings — theme and accent pickers for the Cosmos themes, built
+ * on `<PalettePicker>` and `<AccentPicker>`, plus font and text size pickers
+ * when their `on…Change` handlers are set. Controlled: pass the result to
+ * `applyAppearance` (or your own theme switcher) to update the page.
+ */
+declare const AppearanceSettings: ({ theme, accent, onThemeChange, onAccentChange, themeLabel, accentLabel, themes, accents, themeColumns, font, onFontChange, textSize, onTextSizeChange, fontLabel, textSizeLabel, fonts, textSizes, className, }: AppearanceSettingsProps) => react.JSX.Element;
+
+type AppearanceMenuSize = 'sm' | 'md';
+type AppearanceMenuProps = Omit<AppearanceSettingsProps, 'className'> & {
+    /** Trigger label (title + aria-label), also the panel's name. Default `'Appearance'`. */
+    label?: string;
+    /** Trigger size, as `ThemeToggle`. `md` (default) = 40px, `sm` = 32px. */
+    size?: AppearanceMenuSize;
+    /** Class for the trigger button. */
+    className?: string;
+};
+/**
+ * AppearanceMenu — icon button for a top bar that opens `<AppearanceSettings>`
+ * in a panel flush with its right edge. Controlled like AppearanceSettings:
+ * apply the choice in the callbacks (for example with `applyAppearance`). The
+ * panel stays open while the user tries combinations; Escape, a click
+ * outside or the button close it.
+ */
+declare const AppearanceMenu: ({ label, size, className, ...settings }: AppearanceMenuProps) => react.JSX.Element;
+
 type BlockquoteVariant = 'plain' | 'solid' | 'icon' | 'testimonial';
 type BlockquoteSize = 'sm' | 'md' | 'lg';
 type BlockquoteAlign = 'left' | 'center' | 'right';
@@ -3358,4 +3647,4 @@ type FigureProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'children'> & {
  */
 declare const Figure: ({ src, alt, caption, align, size, radius, shadow, className, wrapperClassName, ...rest }: FigureProps) => react.JSX.Element;
 
-export { type AccentColor, AccentPicker, type AccentPickerProps, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionPanel, type ActionPanelLayout, type ActionPanelProps, type ActiveFilter, ActiveFiltersBar, type ActiveFiltersBarProps, ActivityFeed, type ActivityFeedIntent, type ActivityFeedItemProps, type ActivityFeedProps, AlertBanner, type AlertBannerProps, type AlertVariant, AnnouncementBar, type AnnouncementBarIntent, type AnnouncementBarProps, AuthLayout, type AuthLayoutProps, Avatar, type AvatarProps, type AvatarSize, AvatarUploader, type AvatarUploaderProps, type AvatarUploaderSize, BackToTopFab, type BackToTopFabIntent, type BackToTopFabPosition, type BackToTopFabProps, Backdrop, type BackdropProps, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, Blockquote, type BlockquoteAlign, type BlockquoteProps, type BlockquoteSize, type BlockquoteVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, Calendar, type CalendarProps, Card, type CardImageProps, type CardProps, Carousel, type CarouselControlsProps, type CarouselIndicatorsProps, type CarouselOptions, type CarouselProps, CarouselRoot, type CarouselSlideProps, type CarouselViewportProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ClickableRow, type ClickableRowProps, Clipboard, type ClipboardProps, type ClipboardSize, type ClipboardVariant, CodeBlock, type CodeBlockProps, ColBox, type ColBoxProps, ColorSwatch, type ColorSwatchProps, type ColumnDef, ColumnFilterDropdown, type ColumnFilterDropdownProps, ColumnHeader, type ColumnHeaderProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteFooterProps, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, ConfirmationModal, type ConfirmationModalProps, ContentNarrow, type ContentNarrowProps, ContentStackedList, type ContentStackedListItemProps, type ContentStackedListProps, CookieBanner, type CookieBannerPosition, type CookieBannerProps, type CosmosToasterProps, DataTable, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerProps, type DateRange, DescriptionList, type DescriptionListItemProps, type DescriptionListProps, Divider, type DividerAlign, type DividerIconProps, type DividerProps, type DividerRowProps, Drawer, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, Dropdown, type DropdownDivider, type DropdownItem, type DropdownOption, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, ErrorState, type ErrorStateProps, Figure, type FigureAlign, type FigureProps, type FigureRadius, type FigureSize, FileInput, type FileInputProps, type FilterOption, FilterPills, type FilterPillsProps, FormFooter, type FormFooterAlign, type FormFooterProps, FormRow, type FormRowProps, GridList, type GridListCardProps, type GridListCols, type GridListFooterActionProps, type GridListFooterProps, type GridListProps, HealthBadge, type HealthBadgeProps, HealthDot, type HealthDotProps, type HealthStatus, HelpOverlay, type HelpOverlayProps, type HelpOverlaySectionProps, type HelpOverlayShortcutProps, IconBox, type IconBoxProps, type IconBoxSize, ImageGrid, type ImageGridColumns, type ImageGridGap, type ImageGridProps, Input, type InputProps, IntegrationCard, type IntegrationCardProps, type IntegrationStatus, Kbd, type KbdProps, type KbdSize, KpiCard, type KpiCardProps, Link, type LinkProps, type LinkVariant, List, type ListItemProps, type ListMarker, type ListOrientation, type ListProps, type ListSpacing, type ListVariant, LoadingState, type LoadingStateProps, MediaObject, type MediaObjectAlign, type MediaObjectBodyProps, type MediaObjectImageProps, type MediaObjectPosition, type MediaObjectProps, MiniCalendar, type MiniCalendarProps, Modal, type ModalAlertIntent, type ModalAlertLayout, type ModalAlertProps, type ModalHeaderProps, type ModalProps, type ModalSize, NarrowStackedList, type NarrowStackedListHeaderProps, type NarrowStackedListItemProps, type NarrowStackedListProps, Navbar, type NavbarItemProps, type NavbarMobileMenuButtonProps, type NavbarProps, type NavbarTheme, NotificationCard, type NotificationCardCondensedProps, type NotificationCardSimpleProps, type NotificationIntent, type NotificationSeverity, NotificationsPanel, type NotificationsPanelContentProps, type NotificationsPanelCountersProps, type NotificationsPanelEmptyProps, type NotificationsPanelFooterProps, type NotificationsPanelHeaderActionProps, type NotificationsPanelHeaderProps, type NotificationsPanelItemProps, type NotificationsPanelListProps, type NotificationsPanelProps, type NotificationsPanelTriggerProps, NumberInput, type NumberInputProps, OptionCard, type OptionCardProps, type OptionItem, OptionPicker, type OptionPickerProps, OtpInput, type OtpInputProps, PageActionButton, type PageActionButtonProps, PageActionIconButton, type PageActionIconButtonProps, type PageActionVariant, PageBreadcrumb, type PageBreadcrumbItem, type PageBreadcrumbProps, PageCard, type PageCardProps, PageHeader, type PageHeaderMetaItemProps, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PaletteCard, type PaletteCardProps, type PaletteMeta, PalettePicker, type PalettePickerProps, type PalettePreview, PasswordInput, type PasswordInputProps, PasswordPolicyChecker, type PasswordPolicyCheckerProps, type PasswordRule, Popover, type PopoverContentProps, type PopoverPosition, type PopoverProps, type PopoverTriggerProps, ProgressBar, type ProgressBarIntent, type ProgressBarLabel, type ProgressBarProps, type ProgressBarSize, REFRESH_OPTIONS, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, RefreshButton, type RefreshButtonProps, type RefreshOption, ResetPasswordForm, type ResetPasswordFormProps, Ribbon, type RibbonIntent, type RibbonPosition, type RibbonProps, type RibbonShape, RowActionButton, type RowActionButtonProps, STATUS_COLOR, STATUS_PILL, type SaveState, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, SectionLabel, type SectionLabelProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectInput, type SelectInputOption, type SelectInputProps, type SelectOption, type SelectProps, Shell, type ShellProps, Sidebar, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, SignInForm, type SignInFormProps, type SignInFormValues, SignUpForm, type SignUpFormProps, type SignUpFormValues, SimpleRow, type SimpleRowProps, Sk, type SkProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, SocialAuthButtons, type SocialAuthButtonsLayout, type SocialAuthButtonsProps, type SocialProvider, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, StackedList, StackedListInCard, type StackedListInCardProps, type StackedListItemProps, type StackedListProps, StatefulSaveButton, type StatefulSaveButtonProps, StatusBadge, type StatusBadgeProps, StatusRow, type StatusRowProps, type StepStatus, Stepper, StepperInput, type StepperInputProps, type StepperOrientation, type StepperProps, StepperRoot, type StepperSize, type StepperStepProps, type StepperVariant, StickyScrollNav, type StickyScrollNavProps, type StickyScrollNavSection, type TabProps, Tabs, type TabsOrientation, type TabsProps, Textarea, type TextareaProps, type TextareaResize, type ThemeMode, ThemeToggle, type ThemeToggleProps, type ThemeToggleSize, ThemeToggleTri, type ThemeToggleTriProps, type ThemeToggleTriSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineTone, type TimelineVariant, Toaster, Toggle, type ToggleProps, Tooltip, TooltipHelp, type TooltipPosition, type TooltipProps, type TooltipVariant, Topbar, type TopbarProps, TwoStepVerificationForm, type TwoStepVerificationFormProps, UnsavedIndicator, type UnsavedIndicatorProps, UserMenu, type UserMenuContentProps, type UserMenuHeaderProps, type UserMenuItemProps, type UserMenuItemVariant, type UserMenuProps, type UserMenuTriggerProps, VerticalNavigation, type VerticalNavigationItemProps, type VerticalNavigationProps, type VerticalNavigationSectionProps, VideoEmbed, type VideoEmbedAspect, type VideoEmbedProps, ZoomBar, type ZoomBarProps, defaultPasswordRules, useAutoRefresh };
+export { type AccentColor, AccentPicker, type AccentPickerProps, Accordion, type AccordionContentProps, type AccordionItemProps, type AccordionProps, type AccordionTriggerProps, ActionPanel, type ActionPanelLayout, type ActionPanelProps, type ActiveFilter, ActiveFiltersBar, type ActiveFiltersBarProps, ActivityFeed, type ActivityFeedIntent, type ActivityFeedItemProps, type ActivityFeedProps, AlertBanner, type AlertBannerProps, type AlertVariant, AnnouncementBar, type AnnouncementBarIntent, type AnnouncementBarProps, AppearanceMenu, type AppearanceMenuProps, type AppearanceMenuSize, AppearanceSettings, type AppearanceSettingsProps, AuthLayout, type AuthLayoutProps, Avatar, type AvatarProps, type AvatarSize, AvatarUploader, type AvatarUploaderProps, type AvatarUploaderSize, BackToTopFab, type BackToTopFabIntent, type BackToTopFabPosition, type BackToTopFabProps, Backdrop, type BackdropProps, Badge, type BadgeAppearance, type BadgeProps, type BadgeSize, type BadgeVariant, Blockquote, type BlockquoteAlign, type BlockquoteProps, type BlockquoteSize, type BlockquoteVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, type BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupOrientation, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, COSMOS_ACCENTS, COSMOS_FONTS, COSMOS_TEXT_SIZES, COSMOS_THEMES, Calendar, type CalendarEvent, type CalendarProps, Card, type CardImageProps, type CardProps, Carousel, type CarouselControlsProps, type CarouselIndicatorsProps, type CarouselOptions, type CarouselProps, CarouselRoot, type CarouselSlideProps, type CarouselViewportProps, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, ClickableRow, type ClickableRowProps, Clipboard, type ClipboardProps, type ClipboardSize, type ClipboardVariant, CodeBlock, type CodeBlockProps, ColBox, type ColBoxProps, ColorSwatch, type ColorSwatchProps, type ColumnDef, ColumnFilterDropdown, type ColumnFilterDropdownProps, ColumnHeader, type ColumnHeaderProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, type CommandPaletteFooterProps, type CommandPaletteGroupProps, type CommandPaletteInputProps, type CommandPaletteItemProps, type CommandPaletteListProps, type CommandPaletteProps, ConfirmationModal, type ConfirmationModalProps, ContentNarrow, type ContentNarrowProps, ContentStackedList, type ContentStackedListItemProps, type ContentStackedListProps, CookieBanner, type CookieBannerPosition, type CookieBannerProps, type CosmosAccent, type CosmosAccentMeta, type CosmosAppearance, type CosmosFont, type CosmosFontMeta, type CosmosTextSize, type CosmosTextSizeMeta, type CosmosTheme, type CosmosThemeMeta, type CosmosToasterProps, DataTable, type DataTableDensity, type DataTableProps, DatePicker, type DatePickerMode, type DatePickerProps, type DateRange, DescriptionList, type DescriptionListItemProps, type DescriptionListProps, Divider, type DividerAlign, type DividerIconProps, type DividerProps, type DividerRowProps, Drawer, type DrawerHeaderProps, type DrawerProps, type DrawerSide, type DrawerSize, Dropdown, type DropdownDivider, type DropdownItem, type DropdownOption, type DropdownProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, ErrorState, type ErrorStateProps, EventCalendar, type EventCalendarProps, type EventCalendarTone, Figure, type FigureAlign, type FigureProps, type FigureRadius, type FigureSize, FileInput, type FileInputProps, type FilterOption, FilterPills, type FilterPillsProps, FormFooter, type FormFooterAlign, type FormFooterProps, FormRow, type FormRowProps, GridList, type GridListCardProps, type GridListCols, type GridListFooterActionProps, type GridListFooterProps, type GridListProps, HealthBadge, type HealthBadgeProps, HealthDot, type HealthDotProps, type HealthStatus, HelpOverlay, type HelpOverlayProps, type HelpOverlaySectionProps, type HelpOverlayShortcutProps, IconBox, type IconBoxProps, type IconBoxSize, ImageGrid, type ImageGridColumns, type ImageGridGap, type ImageGridProps, Input, type InputProps, IntegrationCard, type IntegrationCardProps, type IntegrationStatus, Kbd, type KbdProps, type KbdSize, KpiCard, type KpiCardProps, Link, type LinkProps, type LinkVariant, List, type ListItemProps, type ListMarker, type ListOrientation, type ListProps, type ListSpacing, type ListVariant, LoadingState, type LoadingStateProps, MediaObject, type MediaObjectAlign, type MediaObjectBodyProps, type MediaObjectImageProps, type MediaObjectPosition, type MediaObjectProps, MiniCalendar, type MiniCalendarProps, Modal, type ModalAlertIntent, type ModalAlertLayout, type ModalAlertProps, type ModalHeaderProps, type ModalProps, type ModalSize, NarrowStackedList, type NarrowStackedListHeaderProps, type NarrowStackedListItemProps, type NarrowStackedListProps, Navbar, type NavbarItemProps, type NavbarMobileMenuButtonProps, type NavbarProps, type NavbarTheme, NotificationCard, type NotificationCardCondensedProps, type NotificationCardSimpleProps, type NotificationIntent, type NotificationSeverity, NotificationsPanel, type NotificationsPanelContentProps, type NotificationsPanelCountersProps, type NotificationsPanelEmptyProps, type NotificationsPanelFooterProps, type NotificationsPanelHeaderActionProps, type NotificationsPanelHeaderProps, type NotificationsPanelItemProps, type NotificationsPanelListProps, type NotificationsPanelProps, type NotificationsPanelTriggerProps, NumberInput, type NumberInputProps, OptionCard, type OptionCardProps, type OptionItem, OptionPicker, type OptionPickerProps, OtpInput, type OtpInputProps, PageActionButton, type PageActionButtonProps, PageActionIconButton, type PageActionIconButtonProps, type PageActionVariant, PageBreadcrumb, type PageBreadcrumbItem, type PageBreadcrumbProps, PageHeader, type PageHeaderMetaItemProps, type PageHeaderProps, Pagination, type PaginationProps, type PaginationSize, type PaginationVariant, PaletteCard, type PaletteCardProps, type PaletteMeta, PalettePicker, type PalettePickerProps, type PalettePreview, PasswordInput, type PasswordInputProps, PasswordPolicyChecker, type PasswordPolicyCheckerProps, type PasswordRule, Popover, type PopoverAlign, type PopoverContentProps, type PopoverPosition, type PopoverProps, type PopoverTriggerProps, ProgressBar, type ProgressBarIntent, type ProgressBarLabel, type ProgressBarProps, type ProgressBarSize, REFRESH_OPTIONS, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RadioSize, RefreshButton, type RefreshButtonProps, type RefreshOption, ResetPasswordForm, type ResetPasswordFormProps, Ribbon, type RibbonIntent, type RibbonPosition, type RibbonProps, type RibbonShape, RowActionButton, type RowActionButtonProps, STATUS_COLOR, STATUS_PILL, type SaveState, SearchInput, type SearchInputProps, SectionCard, type SectionCardProps, SectionLabel, type SectionLabelProps, type SegmentOption, SegmentedControl, type SegmentedControlProps, Select, SelectInput, type SelectInputOption, type SelectInputProps, type SelectOption, type SelectProps, Shell, type ShellProps, Sidebar, type SidebarGroupProps, type SidebarItemProps, type SidebarProps, type SidebarSectionProps, SignInForm, type SignInFormProps, type SignInFormValues, SignUpForm, type SignUpFormProps, type SignUpFormValues, SimpleRow, type SimpleRowProps, Sk, type SkProps, SkeletonList, type SkeletonListProps, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, SocialAuthButtons, type SocialAuthButtonsLayout, type SocialAuthButtonsProps, type SocialProvider, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, StackedList, StackedListInCard, type StackedListInCardProps, type StackedListItemProps, type StackedListProps, StatefulSaveButton, type StatefulSaveButtonProps, StatusBadge, type StatusBadgeProps, StatusRow, type StatusRowProps, type StepStatus, Stepper, StepperInput, type StepperInputProps, type StepperOrientation, type StepperProps, StepperRoot, type StepperSize, type StepperStepProps, type StepperVariant, StickyScrollNav, type StickyScrollNavProps, type StickyScrollNavSection, type TabProps, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, Textarea, type TextareaProps, type TextareaResize, type ThemeMode, ThemeToggle, type ThemeToggleProps, type ThemeToggleSize, ThemeToggleTri, type ThemeToggleTriProps, type ThemeToggleTriSize, TimePicker, type TimePickerProps, Timeline, type TimelineItem, type TimelineProps, type TimelineTone, type TimelineVariant, Toaster, Toggle, type ToggleProps, Tooltip, TooltipHelp, type TooltipPosition, type TooltipProps, type TooltipVariant, Topbar, type TopbarProps, TwoStepVerificationForm, type TwoStepVerificationFormProps, UnsavedIndicator, type UnsavedIndicatorProps, UserMenu, type UserMenuContentProps, type UserMenuHeaderProps, type UserMenuItemProps, type UserMenuItemVariant, type UserMenuProps, type UserMenuTriggerProps, VerticalNavigation, type VerticalNavigationItemProps, type VerticalNavigationProps, type VerticalNavigationSectionProps, VideoEmbed, type VideoEmbedAspect, type VideoEmbedProps, ZoomBar, type ZoomBarProps, applyAppearance, defaultPasswordRules, isDarkTheme, useAutoRefresh };