@vvedantb/ui 0.2.0 → 0.2.2

package/src/ai-elements/prompt-input.tsx

@@ -774,7 +774,7 @@ export const PromptInputButton = ({
       <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent side={side}>
         {tooltipContent}
-        {shortcut && <span className="ml-2 text-muted">{shortcut}</span>}
+        {shortcut && <span className="ml-2 text-muted-foreground">{shortcut}</span>}
       </TooltipContent>
     </Tooltip>
   );
@@ -871,7 +871,7 @@ export const PromptInputModelSelectTrigger = ({
 }: PromptInputModelSelectTriggerProps) => (
   <SelectTrigger
     className={cn(
-      "border-none bg-transparent font-medium text-muted shadow-none transition-[color,transform] duration-150 ease-out active:scale-[0.97]",
+      "border-none bg-transparent font-medium text-muted-foreground shadow-none transition-[color,transform] duration-150 ease-out active:scale-[0.97]",
       "hover:bg-surface-secondary hover:text-foreground",
       segmentExpandedStateClass,
       className,
@@ -943,7 +943,7 @@ export const PromptInputTabLabel = ({
   ...props
 }: PromptInputTabLabelProps) => (
   <h3
-    className={cn("mb-2 px-3 font-medium text-muted text-xs", className)}
+    className={cn("mb-2 px-3 font-medium text-muted-foreground text-xs", className)}
     {...props}
   />
 );

package/src/ai-elements/queue.tsx

@@ -73,7 +73,7 @@ export function QueueHeader({
       )}
     >
       <div className="flex items-center gap-2">
-        <IconStack2 size={16} className="text-muted" />
+        <IconStack2 size={16} className="text-muted-foreground" />
         <span className="text-sm font-medium text-foreground">
           Queued Messages
         </span>
@@ -84,7 +84,7 @@ export function QueueHeader({
       <IconChevronDown
         size={16}
         className={cn(
-          "text-muted transition-transform duration-200 ease-out",
+          "text-muted-foreground transition-transform duration-200 ease-out",
           isOpen && "rotate-180",
         )}
       />

package/src/ai-elements/reasoning.tsx

@@ -137,7 +137,7 @@ export function ReasoningTrigger({
   return (
     <CollapsibleTrigger
       className={cn(
-        "flex w-full items-center gap-2 py-1 text-sm text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
+        "flex w-full items-center gap-2 py-1 text-sm text-muted-foreground transition-[color,transform] duration-150 ease-out active:scale-[0.99] hover:text-foreground",
         className,
       )}
       {...props}

package/src/ai-elements/shimmer.tsx

@@ -26,11 +26,11 @@ function Shimmer({
     "--spread": `${totalSpread}px`,
     "--bg": `linear-gradient(
             90deg,
-            var(--muted) 0%,
-            var(--foreground) calc(50% - var(--spread)),
-            var(--muted) 50%,
-            var(--foreground) calc(50% + var(--spread)),
-            var(--muted) 100%
+            var(--color-muted-foreground, var(--muted)) 0%,
+            var(--color-foreground, var(--foreground)) calc(50% - var(--spread)),
+            var(--color-muted-foreground, var(--muted)) 50%,
+            var(--color-foreground, var(--foreground)) calc(50% + var(--spread)),
+            var(--color-muted-foreground, var(--muted)) 100%
           )`,
     backgroundImage: "var(--bg)",
     backgroundSize: "200% 100%",

package/src/ai-elements/sources.tsx

@@ -28,7 +28,7 @@ export const SourcesTrigger = ({
 }: SourcesTriggerProps) => (
   <CollapsibleTrigger
     className={cn(
-      "group inline-flex items-center gap-1.5 text-xs text-muted transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
+      "group inline-flex items-center gap-1.5 text-xs text-muted-foreground transition-[color,transform] duration-150 ease-out active:scale-[0.97] hover:text-foreground",
       className,
     )}
     {...props}
@@ -63,7 +63,7 @@ export const Source = ({
 }: SourceProps) => (
   <a
     className={cn(
-      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
+      "flex items-center justify-between gap-2 rounded-md px-3 py-2 text-xs text-muted-foreground transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] hover:bg-surface-secondary hover:text-foreground",
       className,
     )}
     href={href}

package/src/ai-elements/speech-input.tsx

@@ -251,7 +251,7 @@ export const SpeechInput = ({
           "relative z-10 rounded-full transition-[background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out",
           isListening
             ? "bg-danger text-danger-foreground hover:bg-danger/80 hover:text-danger-foreground"
-            : "bg-accent text-accent-foreground hover:bg-accent/80 hover:text-accent-foreground",
+            : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
           className,
         )}
         disabled={isDisabled}

package/src/ai-elements/suggestion.tsx

@@ -176,7 +176,7 @@ export const Suggestion = ({
   return (
     <Button
       className={cn(
-        "h-auto cursor-pointer rounded-full bg-surface-secondary px-3 py-1.5 text-sm text-muted hover:bg-surface-tertiary hover:text-foreground",
+        "h-auto cursor-pointer rounded-full bg-surface-secondary px-3 py-1.5 text-sm text-muted-foreground hover:bg-surface-tertiary hover:text-foreground",
         className,
       )}
       onClick={handleClick}

package/src/audio/index.ts

@@ -0,0 +1,3 @@
+export { playChime } from "./playChime";
+export { useReplyChime, nextReplyChimeState } from "./useReplyChime";
+export type { ReplyChimeInput, ReplyChimeWatch } from "./useReplyChime";

package/src/audio/playChime.ts

@@ -0,0 +1,76 @@
+type Tone = {
+  frequency: number;
+  startOffsetS: number;
+  durationS: number;
+  peakGain: number;
+};
+
+/** A soft rising interval (A5 then D6). The second note overlaps the first. */
+const REPLY_CHIME: readonly Tone[] = [
+  { frequency: 880, startOffsetS: 0, durationS: 0.28, peakGain: 0.14 },
+  { frequency: 1174.66, startOffsetS: 0.09, durationS: 0.28, peakGain: 0.14 },
+];
+
+/** Long enough to avoid a click on attack. */
+const ATTACK_S = 0.012;
+
+/** Calls closer together than this are dropped, so overlapping events sound once. */
+const MIN_INTERVAL_S = 1;
+
+let sharedContext: AudioContext | null = null;
+let lastPlayedAtS: number | null = null;
+
+function getAudioContext(): AudioContext | null {
+  if (sharedContext) return sharedContext;
+  if (typeof window === "undefined" || !window.AudioContext) return null;
+  try {
+    sharedContext = new window.AudioContext();
+  } catch {
+    return null;
+  }
+  return sharedContext;
+}
+
+/**
+ * Plays a soft rising two-note chime with WebAudio.
+ *
+ * The context is created on first use and shared. The call is a no-op on the
+ * server, without WebAudio, or while autoplay policy blocks audio.
+ */
+export function playChime(): void {
+  const context = getAudioContext();
+  if (!context) return;
+
+  if (context.state === "suspended") {
+    try {
+      context.resume().catch(() => undefined);
+    } catch {
+      return;
+    }
+  }
+
+  const start = context.currentTime;
+  if (lastPlayedAtS !== null && start - lastPlayedAtS < MIN_INTERVAL_S) return;
+  lastPlayedAtS = start;
+
+  try {
+    for (const tone of REPLY_CHIME) {
+      const oscillator = context.createOscillator();
+      const envelope = context.createGain();
+      oscillator.type = "sine";
+      oscillator.frequency.value = tone.frequency;
+
+      const toneStart = start + tone.startOffsetS;
+      const toneEnd = toneStart + tone.durationS;
+      envelope.gain.setValueAtTime(0, toneStart);
+      envelope.gain.linearRampToValueAtTime(tone.peakGain, toneStart + ATTACK_S);
+      envelope.gain.exponentialRampToValueAtTime(0.0001, toneEnd);
+
+      oscillator.connect(envelope).connect(context.destination);
+      oscillator.start(toneStart);
+      oscillator.stop(toneEnd);
+    }
+  } catch {
+    // Audio is optional. Stay silent on any failure.
+  }
+}

package/src/audio/useReplyChime.ts

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from "react";
+import { playChime } from "./playChime";
+
+export type ReplyChimeWatch = {
+  threadId: string;
+  wasStreaming: boolean;
+};
+
+export type ReplyChimeInput = {
+  enabled: boolean;
+  isStreaming: boolean;
+  threadId: string | null | undefined;
+};
+
+/**
+ * Pure transition for the reply chime. Returns the state to remember and
+ * whether to chime.
+ *
+ * - No thread id: reset tracking and stay silent.
+ * - First observation of a thread (or a new thread): silent.
+ * - Chime only on streaming to finished for the same thread, while enabled.
+ * - The edge is tracked while disabled, so enabling mid-turn does not replay
+ *   a finish that already happened.
+ */
+export function nextReplyChimeState(
+  previous: ReplyChimeWatch | null,
+  { enabled, isStreaming, threadId }: ReplyChimeInput,
+): { next: ReplyChimeWatch | null; chime: boolean } {
+  if (threadId == null || threadId === "") {
+    return { next: null, chime: false };
+  }
+  const next = { threadId, wasStreaming: isStreaming };
+  if (!previous || previous.threadId !== threadId) {
+    return { next, chime: false };
+  }
+  const finished = previous.wasStreaming && !isStreaming;
+  return { next, chime: finished && enabled };
+}
+
+/**
+ * Plays the reply chime once when a thread finishes streaming.
+ *
+ * Silent on the first observation of a thread, so opening a settled thread
+ * does not chime for an earlier turn.
+ */
+export function useReplyChime({
+  enabled,
+  isStreaming,
+  threadId,
+}: ReplyChimeInput): void {
+  const watchedRef = useRef<ReplyChimeWatch | null>(null);
+
+  useEffect(() => {
+    const { next, chime } = nextReplyChimeState(watchedRef.current, {
+      enabled,
+      isStreaming,
+      threadId,
+    });
+    watchedRef.current = next;
+    if (chime) playChime();
+  }, [enabled, isStreaming, threadId]);
+}

package/src/index.ts

@@ -96,3 +96,5 @@ export * from "./ai-elements/shimmer";
 export * from "./ai-elements/sources";
 export * from "./ai-elements/speech-input";
 export * from "./ai-elements/suggestion";
+
+export * from "./audio";

package/src/ui/_menu-classes.alt.ts

@@ -26,8 +26,8 @@ export const menuCheckboxRadioItemClass =
   "relative flex cursor-pointer select-none items-center rounded-md py-2 pl-8 pr-2.5 text-sm outline-hidden transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.99] focus:bg-default focus:text-foreground data-highlighted:bg-default data-highlighted:text-foreground data-disabled:pointer-events-none data-disabled:cursor-not-allowed data-disabled:opacity-50";
 
 export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground";
 
 export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
 
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted-foreground/90";

package/src/ui/_menu-classes.ts

@@ -23,8 +23,8 @@ export const menuCheckboxRadioItemClass =
   "relative flex cursor-pointer select-none items-center rounded-md py-2 max-sm:min-h-10 pl-8 pr-2.5 text-sm outline-none transition-[background-color,color] focus:bg-default focus:text-foreground data-[highlighted]:bg-default data-[highlighted]:text-foreground data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50";
 
 export const menuLabelClass =
-  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted";
+  "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground";
 
 export const menuSeparatorClass = "-mx-1.5 my-1 h-px bg-separator";
 
-export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted/90";
+export const menuShortcutClass = "ml-auto text-xs tracking-wide text-muted-foreground/90";

package/src/ui/accordion.alt.tsx

@@ -31,7 +31,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <IconChevronDown className="h-4 w-4 shrink-0 text-muted transition-transform duration-200" />
+      <IconChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));
@@ -46,7 +46,7 @@ const AccordionContent = React.forwardRef<
     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", className)}>
+    <div className={cn("pb-4 pt-0 text-muted-foreground", className)}>
       {children}
     </div>
   </AccordionPrimitive.Content>

package/src/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
         default: "border-border bg-default text-foreground",
         secondary: "border-separator bg-default text-default-foreground",
         destructive: "border-danger/25 bg-danger/12 text-danger",
-        outline: "border-separator bg-transparent text-muted",
+        outline: "border-separator bg-transparent text-muted-foreground",
         success: "border-success/25 bg-success/12 text-success",
         warning: "border-warning/25 bg-warning/12 text-warning",
       },

package/src/ui/breadcrumb.tsx

@@ -48,7 +48,7 @@ const BreadcrumbLink = React.forwardRef<
     <Comp
       ref={ref}
       className={cn(
-        "min-w-0 truncate font-medium text-muted transition-colors hover:text-foreground",
+        "min-w-0 truncate font-medium text-muted-foreground transition-colors hover:text-foreground",
         className,
       )}
       {...props}
@@ -74,7 +74,7 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 
 // separator rendered automatically between breadcrumb children
 const BreadcrumbSeparator = () => (
-  <span aria-hidden className="flex-shrink-0 text-muted/40">
+  <span aria-hidden className="flex-shrink-0 text-muted-foreground/40">
     /
   </span>
 );

package/src/ui/button.tsx

@@ -9,14 +9,14 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default:
-          "bg-accent text-accent-foreground hover:-translate-y-0.5 hover:opacity-90",
+          "bg-primary text-primary-foreground hover:-translate-y-0.5 hover:opacity-90",
         destructive:
           "bg-[oklch(47.2%_0.195_25.7)] text-white hover:bg-[oklch(42.5%_0.185_25.7)]",
         outline:
           "border border-border bg-transparent text-foreground hover:bg-default",
         secondary: "bg-default text-default-foreground hover:bg-default/78",
-        ghost: "text-muted hover:bg-surface-tertiary hover:text-foreground",
-        link: "text-accent underline-offset-4 hover:underline active:scale-100",
+        ghost: "text-muted-foreground hover:bg-surface-tertiary hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline active:scale-100",
       },
       size: {
         default: "h-10 px-4 py-2",

package/src/ui/checkbox.tsx

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer relative h-4 w-4 shrink-0 rounded-[4px] border border-border bg-field-background transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-accent data-[state=checked]:bg-accent data-[state=checked]:text-accent-foreground before:absolute before:inset-[-12px] before:content-['']",
+      "peer relative h-4 w-4 shrink-0 rounded-[4px] border border-border bg-field-background transition-[background-color,border-color] duration-200 ease-smooth focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground before:absolute before:inset-[-12px] before:content-['']",
       className,
     )}
     {...props}

package/src/ui/clear-input.alt.tsx

@@ -57,7 +57,7 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
           type="button"
           tabIndex={hasValue ? 0 : -1}
           className={cn(
-            "absolute right-2 top-1/2 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted 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-['']",
+            "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-['']",
             hasValue ? "opacity-100" : "pointer-events-none opacity-0",
           )}
           aria-hidden={!hasValue}

package/src/ui/clear-input.tsx

@@ -152,7 +152,7 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
         {value.length > 0 && !clearing ? (
           <button
             type="button"
-            className="t-clear-btn absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
+            className="t-clear-btn absolute right-2 top-1/2 z-4 inline-flex h-6 w-6 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-[background-color,color,transform] duration-100 ease-out active:scale-[0.92] hover:bg-surface-tertiary/50 hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring"
             aria-label={clearLabel}
             onPointerDown={preventFocusSteal}
             onMouseDown={preventFocusSteal}

package/src/ui/command.tsx

@@ -28,7 +28,7 @@ function CommandDialog({
       <DialogContent className="overflow-hidden p-0 sm:max-w-xl">
         {/* The list is pinned rather than `max-h`: a palette that resizes on
             every keystroke shifts the whole dialog under the cursor. */}
-        <Command className="[&_[cmdk-list]]:h-80 [&_[cmdk-list]]:max-h-[60dvh] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-1.5 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-11 [&_[cmdk-item]]:rounded-md [&_[cmdk-item]]:px-2.5 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
+        <Command className="[&_[cmdk-list]]:h-80 [&_[cmdk-list]]:max-h-[60dvh] [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-1.5 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-11 [&_[cmdk-item]]:rounded-md [&_[cmdk-item]]:px-2.5 [&_[cmdk-item]]:py-2 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
           {children}
         </Command>
       </DialogContent>
@@ -48,7 +48,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-11 w-full max-sm:min-w-0 bg-transparent text-base sm:text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       {...props}
@@ -75,7 +75,7 @@ const CommandEmpty = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.Empty
     ref={ref}
-    className={cn("py-8 text-center text-sm text-muted", className)}
+    className={cn("py-8 text-center text-sm text-muted-foreground", className)}
     {...props}
   />
 ));
@@ -88,7 +88,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted",
+      "overflow-hidden p-1.5 text-foreground [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-widest [&_[cmdk-group-heading]]:text-muted-foreground",
       className,
     )}
     {...props}
@@ -129,7 +129,7 @@ function CommandShortcut({
 }: React.HTMLAttributes<HTMLSpanElement>) {
   return (
     <span
-      className={cn("ml-auto text-xs tracking-wide text-muted/90", className)}
+      className={cn("ml-auto text-xs tracking-wide text-muted-foreground/90", className)}
       {...props}
     />
   );

package/src/ui/dialog.tsx

@@ -251,7 +251,7 @@ const DialogDescription = React.forwardRef<
     ref={ref}
     className={cn(
       // `--muted` is ~3.5:1 on overlay; mix toward overlay-foreground for 4.5:1.
-      "text-sm leading-relaxed text-[color-mix(in_oklch,var(--overlay-foreground)_72%,var(--overlay))]",
+      "text-sm leading-relaxed text-[color-mix(in_oklch,var(--color-popover-foreground,var(--overlay-foreground))_72%,var(--color-popover,var(--overlay)))]",
       className,
     )}
     {...props}

package/src/ui/input-group.alt.tsx

@@ -102,7 +102,7 @@ function InputGroupText({
   return (
     <span
       className={cn(
-        "flex items-center text-sm text-muted/95",
+        "flex items-center text-sm text-muted-foreground/95",
         className,
       )}
       {...props}

package/src/ui/input-group.tsx

@@ -30,7 +30,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-md group-data-[disabled=true]/input-group:opacity-50",
+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-md group-data-[disabled=true]/input-group:opacity-50",
   {
     variants: {
       align: {
@@ -112,7 +112,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "text-muted flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}

package/src/ui/kbd.tsx

@@ -6,7 +6,7 @@ const Kbd = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLElement>>(
     <kbd
       ref={ref}
       className={cn(
-        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted",
+        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded-md bg-surface-secondary px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
         className,
       )}
       {...props}

package/src/ui/labeled-switch-row.tsx

@@ -27,14 +27,14 @@ export function LabeledSwitchRow({
     <div className="flex items-center justify-between gap-3 max-sm:flex-wrap">
       <div className="flex min-w-0 items-start gap-2">
         {icon ? (
-          <span className="mt-0.5 shrink-0 text-muted">{icon}</span>
+          <span className="mt-0.5 shrink-0 text-muted-foreground">{icon}</span>
         ) : null}
         <div className="min-w-0">
           <Label htmlFor={id} className="text-sm font-medium">
             {label}
           </Label>
           {description ? (
-            <p className="mt-1 text-xs text-muted text-pretty">{description}</p>
+            <p className="mt-1 text-xs text-muted-foreground text-pretty">{description}</p>
           ) : null}
         </div>
       </div>

package/src/ui/progress.tsx

@@ -15,7 +15,7 @@ const Progress = React.forwardRef<
     {...props}
   >
     <ProgressPrimitive.Indicator
-      className="h-full w-full flex-1 rounded-full bg-accent transition-transform duration-300 ease-smooth"
+      className="h-full w-full flex-1 rounded-full bg-primary transition-transform duration-300 ease-smooth"
       style={{ transform: `translateX(-${100 - (value ?? 0)}%)` }}
     />
   </ProgressPrimitive.Root>

package/src/ui/radix-select.tsx

@@ -40,7 +40,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-2 rounded-field border border-border bg-field-background px-3.5 py-2 text-sm whitespace-nowrap ring-offset-background transition-[border-color,box-shadow,background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.98] placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-muted [&_svg:not([class*='text-'])]:text-muted data-[size=default]:h-10 data-[size=sm]:h-8 data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center data-[slot=select-value]:*:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-2 rounded-field border border-border bg-field-background px-3.5 py-2 text-sm whitespace-nowrap ring-offset-background transition-[border-color,box-shadow,background-color,transform] duration-200 ease-smooth active:duration-100 active:ease-out active:scale-[0.98] placeholder:text-field-placeholder focus-visible:border-focus-border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-danger data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-8 data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center data-[slot=select-value]:*:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -100,7 +100,7 @@ function SelectLabel({
     <SelectPrimitive.Label
       data-slot="select-label"
       className={cn(
-        "text-muted px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest",
+        "text-muted-foreground px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest",
         className,
       )}
       {...props}
@@ -117,7 +117,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "[&_svg:not([class*='text-'])]:text-muted relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pl-2.5 pr-8 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 last:[span]:*:flex last:[span]:*:items-center last:[span]:*:gap-2",
+        "[&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer select-none items-center gap-2 rounded-lg py-2 pl-2.5 pr-8 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 last:[span]:*:flex last:[span]:*:items-center last:[span]:*:gap-2",
         menuItemClass,
         className,
       )}

package/src/ui/search-input.tsx

@@ -16,7 +16,7 @@ const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
         leading={
           <IconSearch
             size={16}
-            className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 shrink-0 text-muted"
+            className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 shrink-0 text-muted-foreground"
           />
         }
         {...props}

package/src/ui/select.tsx

@@ -25,7 +25,7 @@ const SelectTrigger = React.forwardRef<
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <IconChevronDown className="h-4 w-4 text-muted/85" />
+      <IconChevronDown className="h-4 w-4 text-muted-foreground/85" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
@@ -38,7 +38,7 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted",
+      "flex cursor-default items-center justify-center py-1 text-muted-foreground",
       className,
     )}
     {...props}
@@ -55,7 +55,7 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1 text-muted",
+      "flex cursor-default items-center justify-center py-1 text-muted-foreground",
       className,
     )}
     {...props}
@@ -107,7 +107,7 @@ const SelectLabel = React.forwardRef<
   <SelectPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted",
+      "px-2.5 py-1.5 text-xs font-semibold uppercase tracking-widest text-muted-foreground",
       className,
     )}
     {...props}