@vvedantb/ui 0.17.0 → 0.18.0

package/src/ui/table.tsx

@@ -1,14 +1,40 @@
 import * as React from "react";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+
+export interface TableConfig {
+  /** Replaces the built-in classes of a part. A part left out keeps its default. */
+  classes?: {
+    /** The scroll wrapper `<div>` around the `<table>`. */
+    wrapper?: string;
+    table?: string;
+    header?: string;
+    body?: string;
+    footer?: string;
+    row?: string;
+    head?: string;
+    cell?: string;
+    caption?: string;
+  };
+}
+
+/** The app's class string for `part` (else `fallback`), merged with the caller `className`. */
+function useTableClass(
+  part: keyof NonNullable<TableConfig["classes"]>,
+  fallback: string,
+  className: string | undefined,
+): string {
+  const merge = useCn();
+  return merge(useUiConfig("Table")?.classes?.[part] ?? fallback, className);
+}
 
 const Table = React.forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto rounded-lg max-sm:min-w-0 max-sm:max-w-full">
+  <div className={useUiConfig("Table")?.classes?.wrapper ?? "relative w-full overflow-auto rounded-lg max-sm:min-w-0 max-sm:max-w-full"}>
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={useTableClass("table", "w-full caption-bottom text-sm", className)}
       {...props}
     />
   </div>
@@ -21,7 +47,7 @@ const TableHeader = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <thead
     ref={ref}
-    className={cn("[&_tr]:border-b [&_tr]:border-separator", className)}
+    className={useTableClass("header", "[&_tr]:border-b [&_tr]:border-separator", className)}
     {...props}
   />
 ));
@@ -33,7 +59,7 @@ const TableBody = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tbody
     ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
+    className={useTableClass("body", "[&_tr:last-child]:border-0", className)}
     {...props}
   />
 ));
@@ -45,10 +71,7 @@ const TableFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tfoot
     ref={ref}
-    className={cn(
-      "border-t border-separator bg-surface-secondary/30 font-medium [&>tr]:last:border-b-0",
-      className,
-    )}
+    className={useTableClass("footer", "border-t border-separator bg-surface-secondary/30 font-medium [&>tr]:last:border-b-0", className)}
     {...props}
   />
 ));
@@ -60,7 +83,8 @@ const TableRow = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <tr
     ref={ref}
-    className={cn(
+    className={useTableClass(
+      "row",
       "border-b border-separator transition-colors duration-200 ease-smooth hover:bg-surface-tertiary/50 data-[state=selected]:bg-surface-secondary",
       className,
     )}
@@ -75,7 +99,8 @@ const TableHead = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <th
     ref={ref}
-    className={cn(
+    className={useTableClass(
+      "head",
       "h-11 px-4 text-left align-middle text-xs font-semibold uppercase tracking-widest text-muted-foreground [&:has([role=checkbox])]:pr-0",
       className,
     )}
@@ -90,10 +115,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn(
-      "p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0",
-      className,
-    )}
+    className={useTableClass("cell", "p-4 align-middle text-sm [&:has([role=checkbox])]:pr-0", className)}
     {...props}
   />
 ));
@@ -105,7 +127,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={useTableClass("caption", "mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
 ));

package/src/ui/tabs.tsx

@@ -1,8 +1,9 @@
 import * as React from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { cn } from "../utils/cn";
+import { cva, type VariantProps } from "class-variance-authority";
 import { assignRef } from "../utils/ref";
-import { syncTabsPill } from "./tabsSliding";
+import { syncTabsPill, type TabsPillMotion } from "./tabsSliding";
+import { useCn, useUiConfig } from "./ui-config";
 
 const Tabs = TabsPrimitive.Root;
 
@@ -11,6 +12,32 @@ const Tabs = TabsPrimitive.Root;
 // `soft`: borderless wrapping pills, the active one filled. Uses no `t-tabs`
 // CSS, so triggers can hold an absolutely placed child (e.g. a progress bar).
 type TabsListVariant = "pills" | "segmented" | "soft";
+type TabsListSize = "default" | "sm";
+
+/**
+ * `UiConfig.Tabs`. `classes` replace built-in part classes (`list` replaces
+ * the list classes of every variant, `trigger` those of every trigger).
+ * `variant` is the default for the `TabsList` prop; `pillMotion` picks how the
+ * segmented pill moves: `x` (default) or `xy`, both axes on transform for
+ * lists that wrap or run in a column.
+ */
+export interface TabsConfig {
+  variant?: TabsListVariant;
+  pillMotion?: TabsPillMotion;
+  classes?: {
+    list?: string;
+    size?: Partial<Record<TabsListSize, string>>;
+    pill?: string;
+    trigger?: string;
+    content?: string;
+  };
+}
+
+// `sm` shrinks the triggers from the list, so callers do not size each one.
+const tabsListSizeClasses: Record<TabsListSize, string> = {
+  default: "",
+  sm: "[&_.t-tab]:px-2.5 [&_.t-tab]:py-1 [&_.t-tab]:text-xs",
+};
 
 const TabsListVariantContext = React.createContext<TabsListVariant>("pills");
 
@@ -18,8 +45,14 @@ const TabsList = React.forwardRef<
   React.ComponentRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
     variant?: TabsListVariant;
+    /** `sm` makes the triggers smaller. No classes for `default`. */
+    size?: TabsListSize;
   }
->(({ className, children, variant = "pills", ...props }, ref) => {
+>(({ className, children, variant: variantProp, size, ...props }, ref) => {
+  const config = useUiConfig("Tabs");
+  const cn = useCn();
+  const variant = variantProp ?? config?.variant ?? "pills";
+  const pillMotion = config?.pillMotion ?? "x";
   const listRef = React.useRef<React.ComponentRef<
     typeof TabsPrimitive.List
   > | null>(null);
@@ -42,11 +75,11 @@ const TabsList = React.forwardRef<
     }
 
     const snap = () => {
-      syncTabsPill(list, pill, false);
+      syncTabsPill(list, pill, false, pillMotion);
     };
 
     const animate = () => {
-      syncTabsPill(list, pill, true);
+      syncTabsPill(list, pill, true, pillMotion);
     };
 
     snap();
@@ -83,25 +116,32 @@ const TabsList = React.forwardRef<
       resizeObserver.disconnect();
       mutationObserver.disconnect();
     };
-  }, [variant]);
+  }, [variant, pillMotion]);
 
   return (
     <TabsListVariantContext value={variant}>
       <TabsPrimitive.List
         ref={mergedRef}
         className={cn(
-          variant === "soft"
-            ? "flex flex-wrap items-center justify-center gap-1.5"
-            : "t-tabs max-sm:max-w-full max-sm:justify-center-safe max-sm:overflow-x-auto max-sm:scrollbar-none",
-          variant === "segmented" && "t-tabs--segmented",
-          variant === "pills" && "t-tabs--pills",
+          config?.classes?.list ?? [
+            variant === "soft"
+              ? "flex flex-wrap items-center justify-center gap-1.5"
+              : "t-tabs max-sm:max-w-full max-sm:justify-center-safe max-sm:overflow-x-auto max-sm:scrollbar-none",
+            variant === "segmented" && "t-tabs--segmented",
+            variant === "pills" && "t-tabs--pills",
+          ],
+          config?.classes?.size?.[size ?? "default"] ?? tabsListSizeClasses[size ?? "default"],
           className,
         )}
         data-variant={variant}
         {...props}
       >
         {variant === "segmented" ? (
-          <span ref={pillRef} className="t-tabs-pill" aria-hidden="true" />
+          <span
+            ref={pillRef}
+            className={config?.classes?.pill ?? "t-tabs-pill"}
+            aria-hidden="true"
+          />
         ) : null}
         {children}
       </TabsPrimitive.List>
@@ -113,39 +153,87 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 const TabsTrigger = React.forwardRef<
   React.ComponentRef<typeof TabsPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      React.use(TabsListVariantContext) === "soft"
-        ? "relative flex items-center gap-2 overflow-hidden rounded-full px-4 py-2 text-sm text-muted-foreground transition-[transform,background-color] hover:bg-surface-secondary active:scale-[0.97] data-[state=active]:bg-surface-secondary data-[state=active]:text-foreground"
-        : "t-tab inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const trigger = useUiConfig("Tabs")?.classes?.trigger;
+  const cn = useCn();
+  const soft = React.use(TabsListVariantContext) === "soft";
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        trigger ??
+          (soft
+            ? "relative flex items-center gap-2 overflow-hidden rounded-full px-4 py-2 text-sm text-muted-foreground transition-[transform,background-color] hover:bg-surface-secondary active:scale-[0.97] data-[state=active]:bg-surface-secondary data-[state=active]:text-foreground"
+            : "t-tab inline-flex items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"),
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ComponentRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  const content = useUiConfig("Tabs")?.classes?.content;
+  const cn = useCn();
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      className={cn(
+        content ??
+          "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
+const tabsBarVariants = cva(
+  "flex shrink-0 flex-wrap items-center gap-2 border-b border-border",
+  {
+    variants: {
+      size: {
+        default: "px-3 py-2",
+        sm: "px-2 py-1.5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+/**
+ * Page- or panel-level tab strip: a `TabsList` on the hairline that divides it
+ * from the content below, with an optional trailing `actions` slot for toolbar
+ * controls. `size="sm"` for nested panels; `className` overrides the padding.
+ */
+const TabsBar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> &
+    VariantProps<typeof tabsBarVariants> & { actions?: React.ReactNode }
+>(({ className, children, actions, size, ...props }, ref) => {
+  const cn = useCn();
+  return (
+    <div ref={ref} className={cn(tabsBarVariants({ size }), className)} {...props}>
+      {children}
+      {actions ? (
+        <div className="ml-auto flex items-center gap-2">{actions}</div>
+      ) : null}
+    </div>
+  );
+});
+TabsBar.displayName = "TabsBar";
+
 // raw radix primitives, use these when you need a tabs layout that the
 // styled `tabs`/`tabslist`/`tabstrigger`/`tabscontent` defaults don't fit
 // (e.g a vertical sidebar of tabs inside a popover) the styled exports
 // above are tuned for horizontal pill, style tab bars
 export { TabsPrimitive };
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsBar, TabsList, TabsTrigger, TabsContent };

package/src/ui/tabsSliding.ts

@@ -16,6 +16,30 @@ function findActiveTab(list: HTMLElement): HTMLElement | null {
   return tabs[0] ?? null;
 }
 
+// `xy`: both axes on transform (top pinned to 0), so a column list slides the
+// same way a row does; `top` is a layout property and does not tween.
+function moveTabsPillXY(
+  pill: HTMLElement,
+  tab: HTMLElement,
+  animate: boolean,
+): void {
+  const transform = `translate(${tab.offsetLeft}px, ${tab.offsetTop}px)`;
+  const width = `${tab.offsetWidth}px`;
+  const height = `${tab.offsetHeight}px`;
+  const previousTransition = pill.style.transition;
+  if (!animate) {
+    pill.style.transition = "none";
+  }
+  pill.style.top = "0px";
+  pill.style.transform = transform;
+  pill.style.width = width;
+  pill.style.height = height;
+  if (!animate) {
+    void pill.offsetWidth;
+    pill.style.transition = previousTransition;
+  }
+}
+
 function moveTabsPill(
   pill: HTMLElement,
   tab: HTMLElement,
@@ -44,13 +68,21 @@ function moveTabsPill(
   pill.style.height = `${height}px`;
 }
 
+export type TabsPillMotion = "x" | "xy";
+
 export function syncTabsPill(
   list: HTMLElement,
   pill: HTMLElement,
   animate: boolean,
+  motion: TabsPillMotion = "x",
 ): void {
   const tab = findActiveTab(list);
-  if (tab) {
+  if (!tab) {
+    return;
+  }
+  if (motion === "xy") {
+    moveTabsPillXY(pill, tab, animate);
+  } else {
     moveTabsPill(pill, tab, animate);
   }
 }

package/src/ui/textarea.tsx

@@ -1,16 +1,25 @@
 import * as React from "react";
-import { cn } from "../utils/cn";
 import { fieldFocusClass } from "./_field-classes";
+import { useCn, useUiConfig } from "./ui-config";
+
+/** `UiConfig.Textarea`: `classes.base` replaces the built-in field classes. */
+export interface TextareaConfig {
+  classes?: { base?: string };
+}
 
 const Textarea = React.forwardRef<
   HTMLTextAreaElement,
   React.ComponentProps<"textarea">
 >(({ className, ...props }, ref) => {
+  const base = useUiConfig("Textarea")?.classes?.base;
+  const merge = useCn();
   return (
     <textarea
-      className={cn(
-        "flex min-h-20 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
-        fieldFocusClass,
+      className={merge(
+        base ?? [
+          "flex min-h-20 w-full max-sm:min-w-0 rounded-field border border-border bg-field-background px-3.5 py-2.5 text-base sm:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50",
+          fieldFocusClass,
+        ],
         className,
       )}
       ref={ref}

package/src/ui/tooltip.tsx

@@ -1,25 +1,61 @@
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+/** App defaults for `Tooltip*` (see `UiConfigProvider`). */
+export interface TooltipConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: { content?: string };
+  /** Default for `TooltipProvider` `delayDuration` (Radix: 700ms). */
+  delayDuration?: number;
+  /** Default for `TooltipContent` `sideOffset`. */
+  sideOffset?: number;
+  /** Default for `TooltipContent` `portal`. */
+  portal?: boolean;
+}
+
+function TooltipProvider({
+  delayDuration,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  const config = useUiConfig("Tooltip");
+  return (
+    <TooltipPrimitive.Provider
+      delayDuration={delayDuration ?? config?.delayDuration}
+      {...props}
+    />
+  );
+}
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const TooltipContent = React.forwardRef<
   React.ComponentRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg bg-overlay px-2.5 py-1.5 text-xs text-overlay-foreground smooth-shadow-ring-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    /** Render into `document.body` so a clipping parent cannot cut it off. */
+    portal?: boolean;
+  }
+>(({ className, sideOffset, portal, ...props }, ref) => {
+  const merge = useCn();
+  const config = useUiConfig("Tooltip");
+  const content = (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset ?? config?.sideOffset ?? 4}
+      className={merge(
+        config?.classes?.content ??
+          "z-50 max-w-[calc(100vw-2rem)] overflow-hidden rounded-lg bg-overlay px-2.5 py-1.5 text-xs text-overlay-foreground smooth-shadow-ring-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+  return (portal ?? config?.portal) ? (
+    <TooltipPrimitive.Portal>{content}</TooltipPrimitive.Portal>
+  ) : (
+    content
+  );
+});
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/ui/ui-config.tsx

@@ -0,0 +1,149 @@
+import * as React from "react";
+import type { ClassValue } from "clsx";
+import { cn } from "../utils/cn";
+import type { AccordionConfig } from "./accordion";
+import type { ActivityQuestionCardConfig } from "../ai-elements/activity-question";
+import type { ActivityTasksConfig } from "../ai-elements/activity-shared";
+import type { ArtifactConfig } from "../ai-elements/artifact";
+import type { AttachmentsConfig } from "../ai-elements/attachments";
+import type { BadgeConfig } from "./badge";
+import type { ButtonConfig } from "./button";
+import type { ButtonGroupConfig } from "./button-group";
+import type { CalendarConfig } from "./calendar";
+import type { CardConfig } from "./card";
+import type { CarouselConfig } from "./carousel";
+import type { CheckboxConfig } from "./checkbox";
+import type { SpinnerConfig } from "./spinner";
+import type { ClearInputConfig } from "./clear-input";
+import type { CodeBlockConfig } from "../ai-elements/code-block";
+import type { CollapsibleConfig } from "./collapsible";
+import type { CommandConfig } from "./command";
+import type { ContextMenuConfig } from "./context-menu";
+import type { ConversationConfig } from "../ai-elements/conversation";
+import type { DialogConfig } from "./dialog";
+import type { DropdownMenuConfig } from "./dropdown-menu";
+import type { GanttConfig } from "../kibo/gantt-provider";
+import type { HoverCardConfig } from "./hover-card";
+import type { InputConfig } from "./input";
+import type { InputGroupConfig } from "./input-group";
+import type { KanbanConfig } from "../kibo/kanban";
+import type { LabelConfig } from "./label";
+import type { ListRowConfig } from "./list-row";
+import type { LoadingStateConfig } from "./loading-state";
+import type { MessageConfig } from "../ai-elements/message";
+import type { ModelPickerConfig } from "../ai-elements/model-picker";
+import type { PopoverConfig } from "./popover";
+import type { ProgressConfig } from "./progress";
+import type { PromptInputConfig } from "../ai-elements/prompt-input";
+import type { PromptInputSettingsConfig } from "../ai-elements/prompt-input-settings";
+import type { QueueConfig } from "../ai-elements/queue";
+import type { SearchInputConfig } from "./search-input";
+import type { SelectConfig } from "./select";
+import type { SeparatorConfig } from "./separator";
+import type { ShimmerConfig } from "../ai-elements/shimmer";
+import type { SliderConfig } from "./slider";
+import type { SonnerToasterConfig } from "./sonner";
+import type { StatusDotConfig } from "./status-dot";
+import type { SwitchConfig } from "./switch";
+import type { TableConfig } from "./table";
+import type { TabsConfig } from "./tabs";
+import type { TextareaConfig } from "./textarea";
+import type { ThemeSwitcherConfig } from "../kibo/theme-switcher";
+import type { TooltipConfig } from "./tooltip";
+import type { TraitsPanelConfig } from "../ai-elements/prompt-input-traits";
+import type { VideoPlayerConfig } from "../kibo/video-player";
+
+// App-level component defaults. An app wraps its tree in `UiConfigProvider`
+// to give components its own classes and behaviour without passing props at
+// every call site. Without a provider (or with an empty entry) every component
+// renders its built-in default, so apps that do not opt in see no change.
+//
+// Conventions for an entry:
+// - `classes` replaces built-in classes part by part. A part left out keeps
+//   its default. A caller `className` still merges after it with `cn`.
+// - Other keys are default prop values. An explicit prop always wins.
+//
+// Each component declares its entry type next to its code and adds it here.
+export interface UiConfig {
+  /**
+   * Class merger used in place of the built-in `cn` by components that read
+   * it. Set it when the app's own tailwind-merge setup differs (for example
+   * when it does not treat `rounded-surface` as a radius class), so a caller
+   * `className` merges with the app's classes the way it always has.
+   */
+  cn?: (...inputs: ClassValue[]) => string;
+  Accordion?: AccordionConfig;
+  ActivityQuestionCard?: ActivityQuestionCardConfig;
+  ActivityTasks?: ActivityTasksConfig;
+  Artifact?: ArtifactConfig;
+  Attachments?: AttachmentsConfig;
+  Badge?: BadgeConfig;
+  Button?: ButtonConfig;
+  ButtonGroup?: ButtonGroupConfig;
+  Calendar?: CalendarConfig;
+  Card?: CardConfig;
+  Carousel?: CarouselConfig;
+  Checkbox?: CheckboxConfig;
+  ClearInput?: ClearInputConfig;
+  CodeBlock?: CodeBlockConfig;
+  Collapsible?: CollapsibleConfig;
+  Command?: CommandConfig;
+  ContextMenu?: ContextMenuConfig;
+  Conversation?: ConversationConfig;
+  Dialog?: DialogConfig;
+  DropdownMenu?: DropdownMenuConfig;
+  Gantt?: GanttConfig;
+  HoverCard?: HoverCardConfig;
+  Input?: InputConfig;
+  InputGroup?: InputGroupConfig;
+  Kanban?: KanbanConfig;
+  Label?: LabelConfig;
+  ListRow?: ListRowConfig;
+  LoadingState?: LoadingStateConfig;
+  Message?: MessageConfig;
+  ModelPicker?: ModelPickerConfig;
+  Popover?: PopoverConfig;
+  Progress?: ProgressConfig;
+  PromptInput?: PromptInputConfig;
+  PromptInputSettings?: PromptInputSettingsConfig;
+  Queue?: QueueConfig;
+  SearchInput?: SearchInputConfig;
+  Select?: SelectConfig;
+  Separator?: SeparatorConfig;
+  Shimmer?: ShimmerConfig;
+  Slider?: SliderConfig;
+  SonnerToaster?: SonnerToasterConfig;
+  Spinner?: SpinnerConfig;
+  StatusDot?: StatusDotConfig;
+  Switch?: SwitchConfig;
+  Table?: TableConfig;
+  Tabs?: TabsConfig;
+  Textarea?: TextareaConfig;
+  ThemeSwitcher?: ThemeSwitcherConfig;
+  Tooltip?: TooltipConfig;
+  TraitsPanel?: TraitsPanelConfig;
+  VideoPlayer?: VideoPlayerConfig;
+}
+
+const UiConfigContext = React.createContext<UiConfig>({});
+
+export interface UiConfigProviderProps {
+  config: UiConfig;
+  children?: React.ReactNode;
+}
+
+function UiConfigProvider({ config, children }: UiConfigProviderProps) {
+  return <UiConfigContext.Provider value={config}>{children}</UiConfigContext.Provider>;
+}
+
+/** The app's entry for one component, or `undefined` when the app sets none. */
+function useUiConfig<K extends keyof UiConfig>(name: K): UiConfig[K] | undefined {
+  return React.useContext(UiConfigContext)[name];
+}
+
+/** The app's class merger (`UiConfig.cn`), or the built-in `cn`. */
+function useCn(): (...inputs: ClassValue[]) => string {
+  return React.useContext(UiConfigContext).cn ?? cn;
+}
+
+export { UiConfigProvider, useCn, useUiConfig };