@sero-ai/ui 0.4.2 → 0.6.0

package/src/components/model-selection/model-picker-body.test.tsx

@@ -0,0 +1,152 @@
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import { ModelPickerBody, ProviderLogo } from './model-picker-body';
+
+const GROUPS = [
+  {
+    provider: 'openai',
+    displayName: 'OpenAI',
+    logo: 'https://models.dev/logos/openai.svg',
+    models: [
+      { provider: 'openai', modelId: 'gpt-5', name: 'GPT-5', reasoning: true },
+      { provider: 'openai', modelId: 'gpt-5-mini', name: 'GPT-5 Mini', reasoning: false },
+    ],
+  },
+  {
+    provider: 'anthropic',
+    displayName: 'Anthropic',
+    logo: '',
+    models: [
+      { provider: 'anthropic', modelId: 'claude-opus-5', name: 'Claude Opus 5', reasoning: true },
+    ],
+  },
+];
+
+describe('ProviderLogo', () => {
+  it('renders nothing when the provider has no logo', () => {
+    const html = renderToStaticMarkup(<ProviderLogo logo="" displayName="Anthropic" />);
+
+    // An empty src renders a broken image, which looks like a fault.
+    expect(html).toBe('');
+  });
+
+  it('hides itself when the logo fails to load', () => {
+    // Logos are remote models.dev URLs. A phone on the local network may
+    // have no route to the internet, and must not show broken images.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+
+    act(() => {
+      root.render(<ProviderLogo logo="https://models.dev/logos/openai.svg" displayName="OpenAI" />);
+    });
+    const img = host.querySelector('img');
+    expect(img).not.toBeNull();
+
+    act(() => {
+      img?.dispatchEvent(new Event('error', { bubbles: false }));
+    });
+    expect(host.querySelector('img')).toBeNull();
+
+    act(() => root.unmount());
+    host.remove();
+  });
+});
+
+describe('ModelPickerBody', () => {
+  it('lists every provider group and its models', () => {
+    const html = renderToStaticMarkup(
+      <ModelPickerBody groups={GROUPS} value="openai/gpt-5" onChange={vi.fn()} />,
+    );
+
+    expect(html).toContain('OpenAI');
+    expect(html).toContain('Anthropic');
+    expect(html).toContain('GPT-5 Mini');
+    expect(html).toContain('Claude Opus 5');
+  });
+
+  it('shows no logos when the caller turns them off', () => {
+    const withLogos = renderToStaticMarkup(
+      <ModelPickerBody groups={GROUPS} value="" onChange={vi.fn()} />,
+    );
+    const withoutLogos = renderToStaticMarkup(
+      <ModelPickerBody groups={GROUPS} value="" onChange={vi.fn()} showProviderLogos={false} />,
+    );
+
+    expect(withLogos).toContain('<img');
+    expect(withoutLogos).not.toContain('<img');
+  });
+
+  it('says so when the host has no models at all', () => {
+    const html = renderToStaticMarkup(
+      <ModelPickerBody
+        groups={[]}
+        value=""
+        onChange={vi.fn()}
+        noModelsLabel="No models available"
+      />,
+    );
+
+    expect(html).toContain('No models available');
+  });
+
+  it('hands back the selected model as provider/modelId', () => {
+    const onChange = vi.fn();
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+
+    act(() => {
+      root.render(
+        <ModelPickerBody
+          groups={GROUPS}
+          value="openai/gpt-5"
+          onChange={onChange}
+          autoFocusSearch={false}
+        />,
+      );
+    });
+
+    const button = [...host.querySelectorAll('button')].find(
+      (candidate) => candidate.textContent?.includes('Claude Opus 5'),
+    );
+    act(() => button?.click());
+
+    expect(onChange).toHaveBeenCalledWith('anthropic/claude-opus-5');
+
+    act(() => root.unmount());
+    host.remove();
+  });
+
+  it('filters the list by the search query', () => {
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    const root = createRoot(host);
+
+    act(() => {
+      root.render(
+        <ModelPickerBody groups={GROUPS} value="" onChange={vi.fn()} autoFocusSearch={false} />,
+      );
+    });
+
+    const input = host.querySelector('input');
+    expect(input).not.toBeNull();
+    act(() => {
+      // React tracks the value, so set it through the native setter.
+      const setter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        'value',
+      )?.set;
+      setter?.call(input, 'opus');
+      input?.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+
+    expect(host.textContent).toContain('Claude Opus 5');
+    expect(host.textContent).not.toContain('GPT-5 Mini');
+
+    act(() => root.unmount());
+    host.remove();
+  });
+});

package/src/components/model-selection/model-picker-body.tsx

@@ -0,0 +1,188 @@
+/**
+ * The model list itself: a search field, provider groups, and model rows.
+ *
+ * This holds no popover and no trigger, so a caller decides how it is
+ * shown. `AvailableModelPicker` wraps it in a full-width settings field.
+ * A chat composer wraps it in a compact chip and adds a thinking control
+ * below it, inside the same popover.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { Check, Sparkles } from 'lucide-react';
+import {
+  filterModelGroups,
+  modelKey,
+  type SharedAvailableModelGroup,
+  type SharedModelInfo,
+} from '@sero-ai/common';
+import { SearchInput } from '../ui/search-input';
+import { cn } from '../../lib/utils';
+
+/**
+ * A provider logo.
+ *
+ * `logo` is a remote URL, so it is empty for some providers and it fails
+ * on a machine with no internet. Either way we show nothing rather than
+ * a broken image.
+ */
+export function ProviderLogo({
+  logo,
+  displayName,
+  className,
+}: {
+  logo: string;
+  displayName: string;
+  className?: string;
+}) {
+  const [failed, setFailed] = useState(false);
+
+  // A new provider deserves a fresh attempt.
+  useEffect(() => setFailed(false), [logo]);
+
+  if (!logo || failed) return null;
+
+  return (
+    <img
+      src={logo}
+      alt={displayName}
+      onError={() => setFailed(true)}
+      className={cn('size-3.5 shrink-0 rounded-sm dark:invert', className)}
+    />
+  );
+}
+
+interface ModelPickerBodyProps<
+  TModel extends SharedModelInfo,
+  TGroup extends SharedAvailableModelGroup<TModel>,
+> {
+  groups: TGroup[];
+  /** The selected model as `provider/modelId`, or '' for none. */
+  value: string;
+  /** Called with the new `provider/modelId`. */
+  onChange: (value: string) => void;
+  searchPlaceholder?: string;
+  emptyLabel?: string;
+  noModelsLabel?: string;
+  /**
+   * Focus the search field on mount. Turn this off on a phone: the
+   * on-screen keyboard would cover the list the user came to read.
+   */
+  autoFocusSearch?: boolean;
+  /** Hide provider logos where the network may not reach them. */
+  showProviderLogos?: boolean;
+  /** Shown at the right of the search field, such as a settings button. */
+  searchEndAdornment?: ReactNode;
+  className?: string;
+  /** Applied to the scrolling list, so a caller sets its height. */
+  listClassName?: string;
+}
+
+export function ModelPickerBody<
+  TModel extends SharedModelInfo,
+  TGroup extends SharedAvailableModelGroup<TModel>,
+>({
+  groups,
+  value,
+  onChange,
+  searchPlaceholder = 'Search models...',
+  emptyLabel = 'No matching models',
+  noModelsLabel = 'No models available',
+  autoFocusSearch = true,
+  showProviderLogos = true,
+  searchEndAdornment,
+  className,
+  listClassName,
+}: ModelPickerBodyProps<TModel, TGroup>) {
+  const [query, setQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // The body mounts when its popover opens, so focusing on mount is
+  // enough; the query starts empty for the same reason.
+  useEffect(() => {
+    if (!autoFocusSearch) return;
+    const frame = requestAnimationFrame(() => inputRef.current?.focus());
+    return () => cancelAnimationFrame(frame);
+  }, [autoFocusSearch]);
+
+  const filteredGroups = useMemo(() => filterModelGroups(groups, query), [groups, query]);
+
+  const totalResults = useMemo(
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups],
+  );
+
+  const handleSelect = useCallback(
+    (provider: string, modelId: string) => {
+      onChange(modelKey(provider, modelId));
+      setQuery('');
+    },
+    [onChange],
+  );
+
+  return (
+    <div className={className}>
+      <SearchInput
+        ref={inputRef}
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+        placeholder={searchPlaceholder}
+        data-slot="model-filter"
+        containerClassName="border-b border-border/40"
+        endAdornment={searchEndAdornment}
+      />
+
+      <div className={cn('max-h-[280px] overflow-y-auto py-1', listClassName)}>
+        {groups.length === 0 ? (
+          <div className="px-3 py-4 text-center text-sm text-muted-foreground">{noModelsLabel}</div>
+        ) : totalResults === 0 ? (
+          <div className="px-3 py-4 text-center text-sm text-muted-foreground">{emptyLabel}</div>
+        ) : (
+          filteredGroups.map((group, index) => (
+            <div key={group.provider}>
+              {index > 0 ? <div className="mx-3 border-t border-border/30" /> : null}
+              <div className="flex items-center gap-2 px-3 pb-1 pt-2">
+                {showProviderLogos ? (
+                  <ProviderLogo logo={group.logo} displayName={group.displayName} />
+                ) : null}
+                <span className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">
+                  {group.displayName}
+                </span>
+              </div>
+              <div className="px-1">
+                {group.models.map((model) => {
+                  const nextValue = modelKey(model.provider, model.modelId);
+                  const isSelected = nextValue === value;
+                  return (
+                    <button
+                      key={nextValue}
+                      type="button"
+                      onClick={() => handleSelect(model.provider, model.modelId)}
+                      className={cn(
+                        'flex w-full items-center gap-2.5 rounded-lg px-2.5 py-1.5 text-left text-sm transition-colors',
+                        isSelected
+                          ? 'bg-secondary text-foreground'
+                          : 'text-muted-foreground hover:bg-secondary/60 hover:text-foreground',
+                      )}
+                    >
+                      <div className="flex size-4 shrink-0 items-center justify-center">
+                        {isSelected ? (
+                          <Check className="size-3.5 text-emerald-500" />
+                        ) : (
+                          <div className="size-1.5 rounded-full bg-border" />
+                        )}
+                      </div>
+                      <span className="min-w-0 flex-1 truncate font-medium">{model.name}</span>
+                      {model.reasoning ? (
+                        <Sparkles className="size-3 shrink-0 text-amber-500/60" />
+                      ) : null}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/model-selection/thinking-level-picker.tsx

@@ -5,6 +5,12 @@ import {
 } from '@sero-ai/common';
 import { cn } from '../../lib/utils';
 
+// Compact label so all seven segments stay on a single line without wrapping.
+const COMPACT_LABELS: Record<ThinkingLevel, string> = {
+  ...THINKING_LABELS,
+  xhigh: 'X-High',
+};
+
 interface ThinkingLevelPickerProps {
   value: string;
   onChange: (value: ThinkingLevel) => void;
@@ -28,7 +34,7 @@ export function ThinkingLevelPicker({
     : THINKING_LEVELS.filter((level) => allowed.has(level));
 
   return (
-    <div className={cn('grid grid-cols-6 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1', className)}>
+    <div className={cn('grid grid-cols-7 gap-1 rounded-lg border border-border/50 bg-muted/20 p-1', className)}>
       {levels.map((level) => {
         const isActive = value === level;
         const isAvailable = allowed.has(level) || !availableLevels;
@@ -39,14 +45,14 @@ export function ThinkingLevelPicker({
             disabled={disabled || !isAvailable}
             onClick={() => onChange(level)}
             className={cn(
-              'rounded-md px-2 py-1.5 text-sm font-medium transition-colors',
+              'whitespace-nowrap rounded-md px-2 py-1.5 text-sm font-medium transition-colors',
               isActive
                 ? 'bg-background text-foreground shadow-sm'
                 : 'text-muted-foreground hover:bg-background/70 hover:text-foreground',
               (!isAvailable || disabled) && 'cursor-not-allowed opacity-40 hover:bg-transparent hover:text-muted-foreground',
             )}
           >
-            {THINKING_LABELS[level]}
+            {COMPACT_LABELS[level]}
           </button>
         );
       })}

package/src/components/model-selection/thinking-picker.test.tsx

@@ -0,0 +1,41 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it, vi } from 'vitest';
+import { ThinkingPicker } from './thinking-picker';
+
+describe('ThinkingPicker', () => {
+  it('hides unsupported thinking levels', () => {
+    const html = renderToStaticMarkup(
+      <ThinkingPicker
+        available={['off', 'low', 'high']}
+        current="low"
+        disabled={false}
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(html).toContain('Off');
+    expect(html).toContain('Low');
+    expect(html).toContain('High');
+    expect(html).not.toContain('X-High');
+    expect(html).not.toContain('Max');
+  });
+
+  it('shows only Off when the model has no thinking support', () => {
+    const html = renderToStaticMarkup(
+      <ThinkingPicker
+        available={[]}
+        current="off"
+        disabled
+        onSelect={vi.fn()}
+      />,
+    );
+
+    expect(html).toContain('Off');
+    expect(html).not.toContain('Min');
+    expect(html).not.toContain('Low');
+    expect(html).not.toContain('Med');
+    expect(html).not.toContain('High');
+    expect(html).not.toContain('X-High');
+    expect(html).not.toContain('Max');
+  });
+});

package/src/components/model-selection/thinking-picker.tsx

@@ -26,7 +26,7 @@ export function ThinkingPicker({
   className
 }: ThinkingPickerProps) {
   const levels = disabled
-    ? THINKING_LEVELS
+    ? THINKING_LEVELS.filter((level) => level === 'off')
     : THINKING_LEVELS.filter((level) => level === 'off' || available.includes(level));
   const activeIndex = Math.max(
     0,

package/src/components/ui/calendar.test.tsx

@@ -0,0 +1,43 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { Calendar } from './calendar';
+
+/**
+ * Nothing in this repo renders the calendar, but plugin authors get it
+ * from the package. react-day-picker v10 removed class-name slots that
+ * v9 accepted, and a removed slot is silently ignored at runtime, so a
+ * render is the only thing that catches it.
+ */
+describe('Calendar', () => {
+  it('renders a month grid', () => {
+    const html = renderToStaticMarkup(
+      <Calendar month={new Date(2026, 0, 1)} />,
+    );
+
+    expect(html).toContain('January');
+    // Every week of January 2026 plus the outside days.
+    expect(html).toContain('>1<');
+    expect(html).toContain('>31<');
+  });
+
+  it('keeps the styling on the grid slot v10 renamed', () => {
+    const html = renderToStaticMarkup(
+      <Calendar month={new Date(2026, 0, 1)} />,
+    );
+
+    expect(html).toContain('border-collapse');
+  });
+
+  it('renders the dropdown caption layout', () => {
+    const html = renderToStaticMarkup(
+      <Calendar
+        month={new Date(2026, 0, 1)}
+        captionLayout="dropdown"
+        startMonth={new Date(2025, 0)}
+        endMonth={new Date(2027, 11)}
+      />,
+    );
+
+    expect(html).toContain('<select');
+  });
+});

package/src/components/ui/calendar.tsx

@@ -86,7 +86,7 @@ function Calendar({
             : "rounded-md pl-2 pr-1 flex items-center gap-1 text-base h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
-        table: "w-full border-collapse",
+        month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
           "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",

package/src/components/ui/combobox.tsx

@@ -235,7 +235,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5",
+        "dark:bg-input/30 border-input focus-within:border-ring has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-base shadow-xs transition-[color,box-shadow] has-data-[slot=combobox-chip]:px-1.5",
         className
       )}
       {...props}

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

@@ -22,7 +22,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
         "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
 
         // Focus state.
-        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
 
         // Error state.
         "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",

package/src/components/ui/input-otp.tsx

@@ -51,7 +51,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-base shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "data-[active=true]:border-ring aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex size-9 items-center justify-center border-y border-r text-base shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10",
         className
       )}
       {...props}

package/src/components/ui/input.tsx

@@ -10,9 +10,9 @@ function Input({ className, type, placeholder, "aria-label": ariaLabel, ...props
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-base",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-base file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring",
+        "aria-invalid:border-destructive",
         className
       )}
       {...props}

package/src/components/ui/native-select.tsx

@@ -20,8 +20,8 @@ function NativeSelect({
         data-size={size}
         className={cn(
           "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
-          "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+          "focus-visible:border-ring",
+          "aria-invalid:border-destructive",
           className
         )}
         {...props}

package/src/components/ui/select.tsx

@@ -38,7 +38,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 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",
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 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}

package/src/components/ui/slider.tsx

@@ -9,6 +9,9 @@ function Slider({
   value,
   min = 0,
   max = 100,
+  id,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   ...props
 }: React.ComponentProps<typeof SliderPrimitive.Root>) {
   const _values = React.useMemo(
@@ -56,6 +59,9 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={thumbKeys[index]}
+          id={id && index === 0 ? id : undefined}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
           className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
         />
       ))}

package/src/components/ui/spinner.tsx

@@ -2,7 +2,7 @@ import { Loader2Icon } from "lucide-react"
 
 import { cn } from "../../lib/utils"
 
-function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+function Spinner({ className, ...props }: React.ComponentProps<typeof Loader2Icon>) {
   return (
     <Loader2Icon
       role="status"

package/src/components/ui/textarea.tsx

@@ -9,7 +9,7 @@ function Textarea({ className, placeholder, "aria-label": ariaLabel, ...props }:
       placeholder={placeholder}
       data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-base",
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}