npm - @vvedantb/ui - Versions diffs - 0.17.0 → 0.18.0 - Mend

@vvedantb/ui 0.17.0 → 0.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

package/README.md +253 -3
package/package.json +13 -5
package/shell/src/SidebarResize.tsx +1 -4
package/src/ai-elements/__snapshots__/queue.test.tsx.snap +11 -0
package/src/ai-elements/activity-question-utils.ts +26 -0
package/src/ai-elements/activity-question.tsx +159 -0
package/src/ai-elements/activity-shared.tsx +459 -0
package/src/ai-elements/activity-step-detail.tsx +115 -0
package/src/ai-elements/activity-step-label.ts +981 -0
package/src/ai-elements/activity-tasks-utils.ts +199 -0
package/src/ai-elements/activity-tasks.tsx +770 -0
package/src/ai-elements/artifact.tsx +162 -52
package/src/ai-elements/attachments.tsx +62 -32
package/src/ai-elements/code-block.tsx +76 -22
package/src/ai-elements/context.tsx +370 -0
package/src/ai-elements/conversation.tsx +186 -62
package/src/ai-elements/file-chip.tsx +53 -0
package/src/ai-elements/message.tsx +161 -50
package/src/ai-elements/model-picker-content.tsx +505 -0
package/src/ai-elements/model-picker-types.ts +56 -0
package/src/ai-elements/model-picker.tsx +301 -0
package/src/ai-elements/model-selector.tsx +102 -21
package/src/ai-elements/plan.tsx +130 -0
package/src/ai-elements/prompt-input-settings.tsx +144 -0
package/src/ai-elements/prompt-input-speech.tsx +189 -0
package/src/ai-elements/prompt-input-traits.tsx +281 -0
package/src/ai-elements/prompt-input.tsx +320 -134
package/src/ai-elements/provider-icon.tsx +133 -0
package/src/ai-elements/queue.tsx +293 -9
package/src/ai-elements/shimmer.tsx +72 -1
package/src/ai-elements/simple-model-ladder.tsx +108 -0
package/src/ai-elements/test-results.tsx +510 -0
package/src/ai-elements/trace.tsx +243 -0
package/src/ai-elements/use-streaming-disclosure.ts +50 -0
package/src/ai-elements/web-preview.tsx +349 -0
package/src/composer/input-area/ComposerSlashMenu.tsx +1 -1
package/src/index.ts +66 -12
package/src/kibo/avatar-stack.tsx +40 -0
package/src/kibo/contribution-graph.tsx +539 -0
package/src/kibo/cursor.tsx +72 -0
package/src/kibo/gantt-features.tsx +439 -0
package/src/kibo/gantt-header.tsx +181 -0
package/src/kibo/gantt-provider.tsx +657 -0
package/src/kibo/gantt-sidebar.tsx +157 -0
package/src/kibo/gantt-timeline.tsx +154 -0
package/src/kibo/index.ts +151 -0
package/src/kibo/kanban.tsx +338 -0
package/src/kibo/kanbanDropTarget.ts +25 -0
package/src/kibo/list.tsx +162 -0
package/src/kibo/theme-switcher.tsx +109 -0
package/src/kibo/video-player.tsx +237 -0
package/src/markdown/Markdown.tsx +112 -0
package/src/markdown/MarkdownBlockquote.tsx +45 -0
package/src/markdown/MarkdownCodeBlock.tsx +197 -0
package/src/markdown/MarkdownInlineCode.tsx +40 -0
package/src/markdown/MarkdownLink.tsx +92 -0
package/src/markdown/codeFence.ts +57 -0
package/src/markdown/codeHighlight.ts +138 -0
package/src/markdown/incrementalBlocks.ts +182 -0
package/src/markdown/index.ts +3 -0
package/src/markdown/markdownClipboard.ts +178 -0
package/src/markdown/mermaid.ts +155 -0
package/src/markdown/rehypeGithubAlerts.ts +80 -0
package/src/motion/presets.ts +24 -0
package/src/ui/__snapshots__/alt-wrappers.test.tsx.snap +19 -0
package/src/ui/__snapshots__/sonner-dom.test.tsx.snap +5 -0
package/src/ui/_menu-parts.tsx +29 -0
package/src/ui/accordion.alt.tsx +46 -53
package/src/ui/accordion.tsx +59 -10
package/src/ui/avatar.tsx +56 -0
package/src/ui/badge.tsx +45 -21
package/src/ui/border-beam.tsx +97 -0
package/src/ui/button-group.tsx +50 -21
package/src/ui/button.tsx +67 -45
package/src/ui/calendar.tsx +48 -5
package/src/ui/card.tsx +77 -8
package/src/ui/carousel.tsx +60 -0
package/src/ui/centered-spinner.tsx +30 -0
package/src/ui/checkbox.tsx +34 -16
package/src/ui/clear-input.alt.tsx +33 -75
package/src/ui/clear-input.tsx +140 -15
package/src/ui/collapsible.tsx +40 -2
package/src/ui/command.tsx +143 -70
package/src/ui/context-menu.tsx +159 -93
package/src/ui/crossfade-icon.tsx +123 -0
package/src/ui/dialog.tsx +154 -70
package/src/ui/dropdown-menu.tsx +177 -117
package/src/ui/hover-card.tsx +59 -17
package/src/ui/input-group.alt.tsx +83 -83
package/src/ui/input-group.tsx +129 -58
package/src/ui/input.tsx +13 -4
package/src/ui/label.tsx +11 -8
package/src/ui/list-row.tsx +232 -0
package/src/ui/loading-state.tsx +215 -0
package/src/ui/popover.tsx +56 -23
package/src/ui/progress.tsx +28 -16
package/src/ui/refresh-spin-icon.tsx +41 -0
package/src/ui/search-input.tsx +66 -15
package/src/ui/select.tsx +171 -100
package/src/ui/separator.tsx +23 -14
package/src/ui/slider.tsx +21 -7
package/src/ui/sonner.tsx +68 -30
package/src/ui/spinner.tsx +229 -11
package/src/ui/status-dot.tsx +84 -0
package/src/ui/surface.tsx +49 -0
package/src/ui/switch.tsx +29 -15
package/src/ui/table.tsx +38 -16
package/src/ui/tabs.tsx +123 -35
package/src/ui/tabsSliding.ts +33 -1
package/src/ui/textarea.tsx +13 -4
package/src/ui/tooltip.tsx +50 -14
package/src/ui/ui-config.tsx +149 -0
package/src/utils/cat-color.ts +123 -0
package/src/utils/dayjs.ts +6 -0
package/src/utils/gesture.ts +59 -0
package/src/utils/runtimeVisibility.ts +167 -0
package/src/utils/sharedClock.ts +96 -0
package/src/utils/surface-radius.ts +16 -0
package/src/utils/useDragSensors.ts +58 -0
package/tokens/examples/tokens-moved/Fixture.tsx +283 -0
package/tokens/examples/tokens-moved/README.md +20 -0
package/tokens/examples/tokens-moved/index.html +12 -0
package/tokens/examples/tokens-moved/main.tsx +6 -0
package/tokens/examples/tokens-moved/package.json +14 -0
package/tokens/examples/tokens-moved/styles.css +12 -0
package/tokens/examples/tokens-moved/tsconfig.json +14 -0
package/tokens/examples/tokens-moved/vite.config.ts +11 -0
package/tokens/src/css/border-beam.css +116 -0
package/tokens/src/css/compat-shadcn-rgb.css +6 -0
package/tokens/src/css/markdown.css +318 -0

package/src/markdown/mermaid.ts ADDED Viewed

@@ -0,0 +1,155 @@
+import type { MermaidConfig } from "@streamdown/mermaid";
+import { useSyncExternalStore } from "react";
+import type { DiagramPlugin } from "streamdown";
+/**
+ * Mermaid for markdown, loaded on first use. `@streamdown/mermaid` imports
+ * mermaid statically, so a plain plugin import put mermaid in every chunk
+ * that renders markdown. Here the plugin is a dynamic import that runs only
+ * when a finished mermaid fence mounts.
+ *
+ * One render serves two readers: `MarkdownMermaid` waits for it to decide
+ * diagram or plain code block (a diagram that will not parse stays code), and
+ * Streamdown's diagram view gets the same cached SVG through `mermaidPlugin`.
+ */
+type MermaidTheme = Extract<MermaidConfig["theme"], "default" | "dark">;
+/** `id` is the element id mermaid baked into `svg` (its styles and markers use it). */
+type RenderResult = { svg: string; id: string };
+type Entry = {
+  promise: Promise<RenderResult>;
+  status: "pending" | "done" | "error";
+};
+/** Enough for every diagram on screen plus scroll-back; oldest dropped. */
+const CACHE_LIMIT = 50;
+const cache = new Map<string, Entry>();
+const listeners = new Map<string, Set<() => void>>();
+let pluginPromise: Promise<DiagramPlugin> | null = null;
+/** `initialize` is global to mermaid, so set-theme-then-render runs one at a time. */
+let queue: Promise<unknown> = Promise.resolve();
+let renderCount = 0;
+function loadPlugin(): Promise<DiagramPlugin> {
+  pluginPromise ??= import("@streamdown/mermaid").then(
+    (module) => module.mermaid,
+    (error) => {
+      // A failed chunk load may succeed later; do not cache the failure.
+      pluginPromise = null;
+      throw error;
+    },
+  );
+  return pluginPromise;
+}
+function renderNow(theme: MermaidTheme, code: string): Promise<RenderResult> {
+  const job = queue.then(async () => {
+    const plugin = await loadPlugin();
+    renderCount += 1;
+    // The `-svg` suffix keeps one id from being a prefix of another.
+    const id = `markdown-mermaid-${renderCount}-svg`;
+    const { svg } = await plugin.getMermaid({ theme }).render(id, code);
+    return { svg, id };
+  });
+  queue = job.catch(() => undefined);
+  return job;
+}
+function cacheKey(theme: MermaidTheme, code: string): string {
+  return `${theme}\u0000${code}`;
+}
+function store(key: string, entry: Entry): void {
+  cache.delete(key);
+  cache.set(key, entry);
+  // Drop the oldest entries nobody is watching; mounted diagrams stay.
+  for (const candidate of cache.keys()) {
+    if (cache.size <= CACHE_LIMIT) return;
+    if (!listeners.has(candidate)) cache.delete(candidate);
+  }
+}
+function request(theme: MermaidTheme, code: string): Entry {
+  const key = cacheKey(theme, code);
+  const hit = cache.get(key);
+  if (hit !== undefined) return hit;
+  const promise = renderNow(theme, code);
+  const entry: Entry = { promise, status: "pending" };
+  store(key, entry);
+  const settle = (status: Entry["status"]) => {
+    // An entry evicted (or replaced) while pending stays gone.
+    if (cache.get(key)?.promise !== promise) return;
+    store(key, { promise, status });
+    for (const notify of listeners.get(key) ?? []) notify();
+  };
+  promise.then(
+    () => settle("done"),
+    () => settle("error"),
+  );
+  return entry;
+}
+function subscribe(key: string, notify: () => void): () => void {
+  const set = listeners.get(key) ?? new Set();
+  set.add(notify);
+  listeners.set(key, set);
+  return () => {
+    set.delete(notify);
+    if (set.size === 0) listeners.delete(key);
+  };
+}
+/** The app theme lives as a `dark` class on `<html>` (neutral is dark-family). */
+function readTheme(): MermaidTheme {
+  return document.documentElement.classList.contains("dark") ? "dark" : "default";
+}
+function subscribeTheme(notify: () => void): () => void {
+  const observer = new MutationObserver(notify);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class"],
+  });
+  return () => observer.disconnect();
+}
+/**
+ * Streamdown's diagram plugin, backed by the shared cache. It renders in the
+ * current app theme; `MarkdownMermaid` remounts the diagram when that changes.
+ */
+export const mermaidPlugin: DiagramPlugin = {
+  name: "mermaid",
+  type: "diagram",
+  language: "mermaid",
+  getMermaid: () => ({
+    initialize: () => {},
+    // The cached SVG is shared, so give each copy the caller's unique id:
+    // two copies with one id (inline + fullscreen, or a repeated diagram)
+    // would share `#id` styles and `url(#id_marker)` references.
+    render: (id, code) =>
+      request(readTheme(), code).promise.then((result) => ({
+        svg: result.svg.replaceAll(result.id, id),
+      })),
+  }),
+};
+/**
+ * Renders `code` in the current theme once `enabled` (the fence is closed) and
+ * reports progress. Nothing loads while disabled, so a fence still streaming
+ * costs nothing and never surfaces a parse error.
+ */
+export function useMermaidRender(
+  code: string,
+  enabled: boolean,
+): { theme: MermaidTheme; status: Entry["status"] } {
+  const theme = useSyncExternalStore(subscribeTheme, readTheme);
+  const key = enabled ? cacheKey(theme, code) : "";
+  const entry = useSyncExternalStore(
+    (notify) => (key === "" ? () => {} : subscribe(key, notify)),
+    () => (key === "" ? null : request(theme, code)),
+  );
+  return { theme, status: entry?.status ?? "pending" };
+}

package/src/markdown/rehypeGithubAlerts.ts ADDED Viewed

@@ -0,0 +1,80 @@
+/**
+ * GitHub alerts: a blockquote whose first line is exactly `[!NOTE]`, `[!TIP]`,
+ * `[!IMPORTANT]`, `[!WARNING]` or `[!CAUTION]` renders as a callout.
+ *
+ * This runs on hast, after Streamdown's sanitiser: a remark-stage marker
+ * would be an attribute the sanitiser strips. It strips the marker line and
+ * tags the blockquote with `data-alert`, which `MarkdownBlockquote` reads.
+ * As on GitHub, `> [!NOTE] text` (marker not alone on its line) stays a quote.
+ */
+export const ALERT_KINDS = [
+  "note",
+  "tip",
+  "important",
+  "warning",
+  "caution",
+] as const;
+export type AlertKind = (typeof ALERT_KINDS)[number];
+interface HastNode {
+  type: string;
+  tagName?: string;
+  value?: string;
+  properties?: Record<string, string | number | boolean | null | undefined | (string | number)[]>;
+  children?: HastNode[];
+}
+const MARKER = /^\[!(note|tip|important|warning|caution)\][ \t]*(\r?\n|$)/i;
+export function isAlertKind(value: string): value is AlertKind {
+  return ALERT_KINDS.some((kind) => kind === value);
+}
+function isElement(node: HastNode | undefined, tagName: string): boolean {
+  return node?.type === "element" && node.tagName === tagName;
+}
+function isBlank(node: HastNode): boolean {
+  return node.type === "text" && (node.value ?? "").trim() === "";
+}
+/** Tags `blockquote` as an alert and strips its marker, if it has one. */
+function convert(blockquote: HastNode): void {
+  const paragraph = blockquote.children?.find((child) => !isBlank(child));
+  if (!paragraph || !isElement(paragraph, "p") || !paragraph.children) return;
+  const [first, second] = paragraph.children;
+  if (first?.type !== "text") return;
+  const match = MARKER.exec(first.value ?? "");
+  const kind = match?.[1]?.toLowerCase();
+  if (!match || kind === undefined || !isAlertKind(kind)) return;
+  const endsLine = match[2] !== "";
+  const rest = (first.value ?? "").slice(match[0].length);
+  if (!endsLine) {
+    // Marker ran to the end of the text node: the line ends only if a hard
+    // break (remark-breaks) or nothing follows it.
+    if (second !== undefined && !isElement(second, "br")) return;
+    paragraph.children.splice(1, second === undefined ? 0 : 1);
+    const next = paragraph.children[1];
+    if (next?.type === "text") next.value = (next.value ?? "").replace(/^\r?\n/, "");
+  }
+  if (rest === "") paragraph.children.shift();
+  else first.value = rest;
+  if (paragraph.children.every(isBlank)) {
+    blockquote.children = blockquote.children?.filter((child) => child !== paragraph);
+  }
+  blockquote.properties = { ...blockquote.properties, dataAlert: kind };
+}
+function visit(node: HastNode): void {
+  for (const child of node.children ?? []) {
+    if (isElement(child, "blockquote")) convert(child);
+    visit(child);
+  }
+}
+export function rehypeGithubAlerts() {
+  return (tree: HastNode): void => visit(tree);
+}

package/src/motion/presets.ts CHANGED Viewed

@@ -51,3 +51,27 @@ export const fadeUpSpring: Variants = {
   show: { opacity: 1, y: 0, transition: springTransition },
   exit: { opacity: 0, y: 6, transition: springFastTransition },
 };
+/**
+ * `motion/react` transitions that match the CSS duration tokens
+ * `--motion-fast` (150ms), `--motion-base` (220ms) and `--motion-slow`
+ * (320ms) with `--motion-ease-out`. Seconds here, milliseconds in CSS: if an
+ * app changes a token, it changes the number here too.
+ *
+ * - `fast`: hover, focus, small reveals.
+ * - `base`: the default for anything entering or leaving.
+ * - `slow`: large surfaces and staggered page content.
+ */
+export const tokenTransition = {
+  fast: { duration: 0.15, ease: motionEase },
+  base: { duration: 0.22, ease: motionEase },
+  slow: { duration: 0.32, ease: motionEase },
+} as const satisfies Record<"fast" | "base" | "slow", Transition>;
+/**
+ * A stagger step for list entrances, capped so a long list does not make the
+ * last row wait. Use as `delay: staggerDelay(index)`.
+ */
+export function staggerDelay(index: number, step: number = motionTiming.stagger, max = 0.2): number {
+  return Math.min(index * step, max);
+}

package/src/ui/__snapshots__/alt-wrappers.test.tsx.snap ADDED Viewed

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`AccordionAlt markup > multiple, classNames on every part 1`] = `"<div class="root-x" data-orientation="vertical"><div data-state="open" data-orientation="vertical" class="rounded-lg item-x"><h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="radix-«id0»" aria-expanded="true" data-state="open" data-orientation="vertical" id="radix-«id1»" class="flex flex-1 items-center justify-between rounded-lg text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&amp;[data-state=open]>svg]:rotate-180 trigger-x py-2" data-radix-collection-item="">Open<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M6 9l6 6l6 -6"></path></svg></button></h3><div data-state="open" id="radix-«id0»" role="region" aria-labelledby="radix-«id1»" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width); transition-duration: 0s; animation-name: none;"><div class="pt-0 text-muted-foreground content-x pb-2">Body</div></div></div><div data-state="closed" data-disabled="" data-orientation="vertical" class="rounded-lg"><h3 data-orientation="vertical" data-state="closed" data-disabled="" class="flex"><button type="button" aria-expanded="false" data-state="closed" data-disabled="" disabled="" data-orientation="vertical" id="radix-«id2»" class="flex flex-1 items-center justify-between rounded-lg py-4 text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Disabled<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M6 9l6 6l6 -6"></path></svg></button></h3><div data-state="closed" data-disabled="" id="radix-«id3»" role="region" aria-labelledby="radix-«id2»" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width); transition-duration: 0s; animation-name: none;"><div class="pb-4 pt-0 text-muted-foreground">Forced</div></div></div></div>"`;
+exports[`AccordionAlt markup > single collapsible, one open 1`] = `"<div data-orientation="vertical"><div data-state="open" data-orientation="vertical" class="rounded-lg"><h3 data-orientation="vertical" data-state="open" class="flex"><button type="button" aria-controls="radix-«id0»" aria-expanded="true" data-state="open" data-orientation="vertical" id="radix-«id1»" class="flex flex-1 items-center justify-between rounded-lg py-4 text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Open<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M6 9l6 6l6 -6"></path></svg></button></h3><div data-state="open" id="radix-«id0»" role="region" aria-labelledby="radix-«id1»" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width); transition-duration: 0s; animation-name: none;"><div class="pb-4 pt-0 text-muted-foreground">Body A</div></div></div><div data-state="closed" data-orientation="vertical" class="rounded-lg"><h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-«id2»" class="flex flex-1 items-center justify-between rounded-lg py-4 text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">Closed<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-down h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M6 9l6 6l6 -6"></path></svg></button></h3><div data-state="closed" id="radix-«id3»" hidden="" role="region" aria-labelledby="radix-«id2»" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div></div></div>"`;
+exports[`ClearInputAlt markup > empty 1`] = `"<div class="relative"><input class="flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-1 focus-visible:ring-focus-ring pr-9" type="text" value=""><button type="button" tabindex="-1" class="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-[''] pointer-events-none opacity-0" aria-hidden="true" aria-label="Clear"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x"><path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></button></div>"`;
+exports[`ClearInputAlt markup > empty with placeholder 1`] = `"<div class="relative"><input placeholder="Find" class="flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-1 focus-visible:ring-focus-ring pr-9" type="text" value=""><button type="button" tabindex="-1" class="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-[''] pointer-events-none opacity-0" aria-hidden="true" aria-label="Clear"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x"><path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></button></div>"`;
+exports[`ClearInputAlt markup > every prop 1`] = `"<div class="relative w-40"><span class="absolute left-2">L</span><input placeholder="Find" class="flex w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-1 focus-visible:ring-focus-ring pr-9 h-9" id="ci" disabled="" type="text" value="abc"><button type="button" tabindex="0" class="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-[''] opacity-100" aria-hidden="false" aria-label="Reset"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x"><path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></button></div>"`;
+exports[`ClearInputAlt markup > filled 1`] = `"<div class="relative"><input class="flex h-10 w-full rounded-field border border-border bg-field-background px-3.5 py-2 text-sm transition-[border-color,background-color] duration-200 ease-smooth placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-1 focus-visible:ring-focus-ring pr-9" type="text" value="abc"><button type="button" tabindex="0" class="absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[opacity,background-color,color,transform] duration-150 ease-out active:duration-100 active:ease-out active:scale-[0.97] hover:bg-surface-tertiary hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring before:absolute before:inset-[-8px] before:content-[''] opacity-100" aria-hidden="false" aria-label="Clear"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-x"><path d="M18 6l-12 12"></path><path d="M6 6l12 12"></path></svg></button></div>"`;
+exports[`InputGroupAlt markup > input className and props 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:border-focus-border has-focus-visible:ring-1 has-focus-visible:ring-focus-ring"><input class="flex w-full max-sm:min-w-0 border-border text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0 in-x" id="i" disabled=""></div>"`;
+exports[`InputGroupAlt markup > input with every addon align and button size 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border border-border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:border-focus-border has-focus-visible:ring-1 has-focus-visible:ring-focus-ring"><div class="flex items-center flex-row ps-3"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></div><div data-align="inline-start" class="flex items-center flex-row ps-3"><span class="flex items-center text-sm text-muted-foreground/95">https://</span></div><input class="flex w-full max-sm:min-w-0 border-border text-base sm:text-sm transition-[border-color,box-shadow,background-color] duration-200 ease-smooth file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring h-full flex-1 rounded-none border-0 bg-transparent px-3 py-2 shadow-none focus-visible:border-0 focus-visible:ring-0" placeholder="Search"><div data-align="inline-end" class="flex items-center flex-row pe-3"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-7 rounded-lg px-2 text-xs">Go</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-8 rounded-lg px-2.5 text-xs">Small</button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground px-4 py-2 shrink-0 shadow-none h-7 w-7 rounded-lg" aria-label="A"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90 px-4 py-2 shrink-0 shadow-none h-8 w-8 rounded-lg" type="submit" aria-label="B"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-search"><path d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0 -14 0"></path><path d="M21 21l-6 -6"></path></svg></button></div></div>"`;
+exports[`InputGroupAlt markup > textarea with block addons, error and classNames 1`] = `"<div data-input-group="" class="flex h-10 flex-wrap rounded-field border bg-field-background text-sm transition-[border-color,box-shadow] duration-200 ease-smooth has-[textarea]:h-auto has-data-[slot=input-group-control]:h-auto has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-focus-visible:outline-hidden has-focus-visible:ring-1 border-danger-border has-focus-visible:border-danger has-focus-visible:ring-danger-ring root-x" id="g"><div data-align="block-start" class="flex items-center w-full flex-row border-b border-separator px-3 py-2 addon-x"><span class="flex items-center text-sm text-x">Title</span></div><textarea class="flex min-h-20 w-full max-sm:min-w-0 border-border text-base sm:text-sm placeholder:text-field-placeholder disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-hidden focus-visible:border-focus-border focus-visible:ring-focus-ring flex-1 resize-none rounded-none border-0 bg-transparent px-3 py-2.5 shadow-none focus-visible:border-0 focus-visible:ring-0 field-sizing-content ta-x" rows="2">v</textarea><div data-align="block-end" class="flex items-center w-full flex-row px-3 py-2"><button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium tracking-normal transition-[transform,background-color,box-shadow,opacity,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 active:scale-[0.96] [&amp;_svg]:pointer-events-none [&amp;_svg:not([class*='size-'])]:size-4 [&amp;_svg]:shrink-0 text-muted-foreground hover:bg-surface-tertiary hover:text-foreground py-2 shrink-0 shadow-none h-7 rounded-lg px-2 text-xs btn-x" disabled="" data-loading="true"><svg class="h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>Send</button></div></div>"`;

package/src/ui/__snapshots__/sonner-dom.test.tsx.snap ADDED Viewed

@@ -0,0 +1,5 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`SonnerToaster DOM > renders the toaster and a toast 1`] = `"<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false" data-react-aria-top-layer="true"></section>"`;
+exports[`SonnerToaster DOM > renders the toaster and a toast 2`] = `"<section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false" data-react-aria-top-layer="true"><ol dir="ltr" tabindex="-1" class="toaster group !font-sans" data-sonner-toaster="true" data-sonner-theme="light" data-y-position="top" data-x-position="right" style="--front-toast-height: 0px; --width: 356px; --gap: 12px; --offset-top: 24px; --offset-right: 24px; --offset-bottom: 24px; --offset-left: 24px; --mobile-offset-top: 16px; --mobile-offset-right: 16px; --mobile-offset-bottom: 16px; --mobile-offset-left: 16px;"><li tabindex="0" class="group toast glass-panel-strong flex w-full items-center gap-3 rounded-lg px-4 py-3 text-sm text-foreground smooth-shadow-ring-md" data-sonner-toast="" data-styled="false" data-mounted="true" data-promise="false" data-swiped="false" data-removed="false" data-visible="true" data-y-position="top" data-x-position="right" data-index="0" data-front="true" data-swiping="false" data-dismissible="true" data-swipe-out="false" data-expanded="false" style="--index: 0; --toasts-before: 0; --z-index: 1; --offset: 0px; --initial-height: 0px;"><div data-content="" class=""><div data-title="" class="font-medium leading-snug">Saved</div><div data-description="" class="text-[13px] leading-snug text-muted-foreground">All changes stored</div></div></li></ol></section>"`;

package/src/ui/_menu-parts.tsx CHANGED Viewed

@@ -1,5 +1,34 @@
 import type * as React from "react";
+/**
+ * App defaults shared by `DropdownMenu*` and `ContextMenu*` (see
+ * `UiConfigProvider`); each menu has its own entry.
+ */
+export interface MenuConfig {
+  /** Replaces the built-in classes of a part. */
+  classes?: {
+    trigger?: string;
+    content?: string;
+    subContent?: string;
+    subTrigger?: string;
+    item?: string;
+    checkboxItem?: string;
+    radioItem?: string;
+    label?: string;
+    separator?: string;
+    shortcut?: string;
+  };
+  /** Replace the built-in icons. */
+  icons?: {
+    /** `CheckboxItem` indicator. */
+    check?: React.ReactNode;
+    /** `RadioItem` indicator. */
+    radio?: React.ReactNode;
+  };
+  /** Default for `Content` `collisionPadding`. */
+  collisionPadding?: number | Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+}
 /** `--vv-height` is optional: apps may set it to the visual viewport height. */
 export const fitViewportClass =
   "max-sm:max-h-[min(70dvh,var(--vv-height,70dvh))] max-sm:overflow-y-auto";

package/src/ui/accordion.alt.tsx CHANGED Viewed

@@ -1,56 +1,49 @@
 import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { IconChevronDown } from "@tabler/icons-react";
-import { cn } from "../utils/cn";
-const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("rounded-lg", className)}
-    {...props}
-  />
-));
-AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between rounded-lg py-4 text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
+import { Accordion as AccordionPrimitive } from "radix-ui";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+// The `Alt` look on the main parts: per-instance `classes` replace the main
+// classes (and any `UiConfig.Accordion` entry), and `data-slot={undefined}`
+// drops the main `data-slot` attributes, so the markup is the pre-wrapper one.
+/** @deprecated Use `Accordion`. Kept for existing consumers; removed in a later minor after they move. */
+function AccordionAlt(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <Accordion data-slot={undefined} {...props} />;
+}
+/** @deprecated Use `AccordionItem`. Kept for existing consumers; removed in a later minor after they move. */
+function AccordionItemAlt(props: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return <AccordionItem data-slot={undefined} classes={{ item: "rounded-lg" }} {...props} />;
+}
+const triggerClasses = {
+  header: "flex",
+  trigger:
+    "flex flex-1 items-center justify-between rounded-lg py-4 text-sm font-medium transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.99] hover:bg-surface-tertiary/50 [&[data-state=open]>svg]:rotate-180",
+};
+/** @deprecated Use `AccordionTrigger`. Kept for existing consumers; removed in a later minor after they move. */
+function AccordionTriggerAlt(props: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionTrigger
+      data-slot={undefined}
+      classes={triggerClasses}
+      icon={<IconChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />}
       {...props}
-    >
-      {children}
-      <IconChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-));
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React.forwardRef<
-  React.ComponentRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>
-      {children}
-    </div>
-  </AccordionPrimitive.Content>
-));
-AccordionContent.displayName = AccordionPrimitive.Content.displayName;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+    />
+  );
+}
+const contentClasses = {
+  content:
+    "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+  contentInner: "pb-4 pt-0 text-muted-foreground",
+};
+/** @deprecated Use `AccordionContent`. Kept for existing consumers; removed in a later minor after they move. */
+function AccordionContentAlt(props: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return <AccordionContent data-slot={undefined} classes={contentClasses} {...props} />;
+}
+export { AccordionAlt, AccordionItemAlt, AccordionTriggerAlt, AccordionContentAlt };

package/src/ui/accordion.tsx CHANGED Viewed

@@ -1,6 +1,25 @@
 import * as React from "react";
 import { Accordion as AccordionPrimitive } from "radix-ui";
-import { cn } from "../utils/cn";
+import { useCn, useUiConfig } from "./ui-config";
+type AccordionClasses = {
+  item?: string;
+  header?: string;
+  trigger?: string;
+  content?: string;
+  contentInner?: string;
+};
+/**
+ * `UiConfig.Accordion`: `classes` replace the built-in part classes
+ * (`content` is the animated panel, `contentInner` the padded box inside it);
+ * `icon` is the default for the `AccordionTrigger` prop. Each part also takes
+ * a `classes` prop with its own keys, which wins over the config.
+ */
+export interface AccordionConfig {
+  classes?: AccordionClasses;
+  icon?: React.ReactNode;
+}
 function ChevronDown({ className }: { className?: string }) {
   return (
@@ -29,12 +48,19 @@ function Accordion({
 function AccordionItem({
   className,
+  classes,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Item> & {
+  /** Replaces the item classes for this instance (wins over `UiConfig.Accordion.classes.item`). */
+  classes?: Pick<AccordionClasses, "item">;
+}) {
+  const config = useUiConfig("Accordion")?.classes;
+  const item = classes?.item ?? config?.item;
+  const cn = useCn();
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("not-first:mt-6", className)}
+      className={cn(item ?? "not-first:mt-6", className)}
       {...props}
     />
   );
@@ -43,20 +69,33 @@ function AccordionItem({
 function AccordionTrigger({
   className,
   children,
+  icon,
+  classes,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
+  /** Shown after the children. Default a chevron. */
+  icon?: React.ReactNode;
+  /** Replaces the header and trigger classes for this instance (wins over `UiConfig.Accordion.classes`). */
+  classes?: Pick<AccordionClasses, "header" | "trigger">;
+}) {
+  const config = useUiConfig("Accordion");
+  const cn = useCn();
   return (
-    <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Header className={classes?.header ?? config?.classes?.header ?? "flex"}>
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "flex flex-1 items-center justify-between py-4 font-medium transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:underline [&[data-state=open]>svg]:rotate-180",
+          classes?.trigger ??
+            config?.classes?.trigger ??
+            "flex flex-1 items-center justify-between py-4 font-medium transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:underline [&[data-state=open]>svg]:rotate-180",
           className,
         )}
         {...props}
       >
         {children}
-        <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-150 ease-out" />
+        {icon ?? config?.icon ?? (
+          <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-150 ease-out" />
+        )}
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   );
@@ -65,15 +104,25 @@ function AccordionTrigger({
 function AccordionContent({
   className,
   children,
+  classes,
   ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+}: React.ComponentProps<typeof AccordionPrimitive.Content> & {
+  /** Replaces the panel and inner box classes for this instance (wins over `UiConfig.Accordion.classes`). */
+  classes?: Pick<AccordionClasses, "content" | "contentInner">;
+}) {
+  const config = useUiConfig("Accordion")?.classes;
+  const cn = useCn();
   return (
     <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="overflow-hidden text-sm transition-[height] data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      className={
+        classes?.content ??
+        config?.content ??
+        "overflow-hidden text-sm transition-[height] data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+      }
       {...props}
     >
-      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+      <div className={cn(classes?.contentInner ?? config?.contentInner ?? "pb-4 pt-0", className)}>{children}</div>
     </AccordionPrimitive.Content>
   );
 }

package/src/ui/avatar.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import { useCn } from "./ui-config";
+const Avatar = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const merge = useCn();
+  return (
+    <AvatarPrimitive.Root
+      ref={ref}
+      className={merge(
+        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full border border-border bg-surface-secondary",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+const AvatarImage = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => {
+  const merge = useCn();
+  return (
+    <AvatarPrimitive.Image
+      ref={ref}
+      className={merge("aspect-square h-full w-full", className)}
+      {...props}
+    />
+  );
+});
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+const AvatarFallback = React.forwardRef<
+  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => {
+  const merge = useCn();
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={merge(
+        "flex h-full w-full items-center justify-center rounded-full bg-secondary text-secondary-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { Avatar, AvatarImage, AvatarFallback };