@sero-ai/ui 0.1.0 → 0.2.1

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

@@ -0,0 +1,231 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Check, ChevronDown, Sparkles, X } from 'lucide-react';
+import {
+  filterModelGroups,
+  findGroup,
+  findModel,
+  modelKey,
+  parseModelKey,
+  type SharedAvailableModelGroup,
+  type SharedModelInfo,
+} from '@sero-ai/common';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { SearchInput } from '../ui/search-input';
+import { cn } from '../../lib/utils';
+
+interface AvailableModelPickerProps<
+  TModel extends SharedModelInfo,
+  TGroup extends SharedAvailableModelGroup<TModel>,
+> {
+  groups: TGroup[];
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyLabel?: string;
+  noModelsLabel?: string;
+  allowClear?: boolean;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function AvailableModelPicker<
+  TModel extends SharedModelInfo,
+  TGroup extends SharedAvailableModelGroup<TModel>,
+>({
+  groups,
+  value,
+  onChange,
+  placeholder = 'Choose a model',
+  searchPlaceholder = 'Search models...',
+  emptyLabel = 'No matching models',
+  noModelsLabel = 'No models available',
+  allowClear = false,
+  disabled = false,
+  className,
+}: AvailableModelPickerProps<TModel, TGroup>) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const selected = useMemo(() => {
+    const parsed = parseModelKey(value);
+    if (!parsed) {
+      return value
+        ? { group: null, model: null, fallbackLabel: value }
+        : { group: null, model: null, fallbackLabel: null };
+    }
+
+    const group = findGroup(groups, parsed.provider, parsed.modelId) ?? null;
+    const model = findModel(groups, parsed.provider, parsed.modelId) ?? null;
+    return {
+      group,
+      model,
+      fallbackLabel: model ? null : value,
+    };
+  }, [groups, value]);
+
+  const filteredGroups = useMemo(
+    () => filterModelGroups(groups, query),
+    [groups, query],
+  );
+
+  const totalResults = useMemo(
+    () => filteredGroups.reduce((count, group) => count + group.models.length, 0),
+    [filteredGroups],
+  );
+
+  const handleOpenChange = useCallback((nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) return;
+    setQuery('');
+    requestAnimationFrame(() => inputRef.current?.focus());
+  }, []);
+
+  const handleSelect = useCallback((provider: string, modelId: string) => {
+    onChange(modelKey(provider, modelId));
+    setOpen(false);
+    setQuery('');
+  }, [onChange]);
+
+  const handleClear = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onChange('');
+    setOpen(false);
+    setQuery('');
+  }, [onChange]);
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild disabled={disabled}>
+        <div
+          role="button"
+          tabIndex={disabled ? -1 : 0}
+          className={cn(
+            'flex w-full items-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm transition-colors',
+            'hover:bg-secondary/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+            disabled && 'cursor-not-allowed opacity-50',
+            className,
+          )}
+        >
+          {selected.group && selected.model ? (
+            <>
+              <img
+                src={selected.group.logo}
+                alt={selected.group.displayName}
+                className="size-4 shrink-0 rounded-sm dark:invert"
+              />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-1.5">
+                  <span className="truncate font-medium text-foreground">{selected.model.name}</span>
+                  {selected.model.reasoning ? (
+                    <Sparkles className="size-3 shrink-0 text-amber-500/70" />
+                  ) : null}
+                </div>
+                <div className="truncate text-[11px] text-muted-foreground">
+                  {selected.group.displayName}
+                </div>
+              </div>
+            </>
+          ) : selected.fallbackLabel ? (
+            <span className="min-w-0 flex-1 truncate font-mono text-xs text-muted-foreground">
+              {selected.fallbackLabel}
+            </span>
+          ) : (
+            <span className="min-w-0 flex-1 truncate text-muted-foreground">
+              {placeholder}
+            </span>
+          )}
+
+          {allowClear && value ? (
+            <button
+              type="button"
+              onClick={handleClear}
+              className="rounded p-1 text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+              title="Clear selection"
+            >
+              <X className="size-3.5" />
+            </button>
+          ) : null}
+
+          <ChevronDown className="size-4 shrink-0 text-muted-foreground" />
+        </div>
+      </PopoverTrigger>
+
+      <PopoverContent
+        side="bottom"
+        align="start"
+        sideOffset={4}
+        className="w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-xl border-border/60 bg-background p-0 shadow-xl"
+        onWheel={(event) => event.stopPropagation()}
+      >
+        <SearchInput
+          ref={inputRef}
+          value={query}
+          onChange={(event) => setQuery(event.target.value)}
+          placeholder={searchPlaceholder}
+          containerClassName="border-b border-border/40"
+        />
+
+        <div className="max-h-[280px] overflow-y-auto py-1">
+          {groups.length === 0 ? (
+            <div className="px-3 py-4 text-center text-xs text-muted-foreground">
+              {noModelsLabel}
+            </div>
+          ) : totalResults === 0 ? (
+            <div className="px-3 py-4 text-center text-xs 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">
+                  <img
+                    src={group.logo}
+                    alt={group.displayName}
+                    className="size-3.5 shrink-0 rounded-sm dark:invert"
+                  />
+                  <span className="text-[10px] 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-xs 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>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/model-selection/model-warning-list.tsx

@@ -0,0 +1,33 @@
+import { TriangleAlert } from 'lucide-react';
+import { formatModelValidationWarning, type ModelValidationWarning } from '@sero-ai/common';
+import { cn } from '../../lib/utils';
+
+interface ModelWarningListProps {
+  warnings: ModelValidationWarning[];
+  className?: string;
+}
+
+export function ModelWarningList({ warnings, className }: ModelWarningListProps) {
+  if (warnings.length === 0) return null;
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {warnings.map((warning, index) => (
+        <div
+          key={`${warning.code}:${index}`}
+          className={cn(
+            'rounded-lg border px-3 py-2 text-xs',
+            warning.severity === 'info'
+              ? 'border-primary/20 bg-primary/5 text-primary'
+              : 'border-amber-500/20 bg-amber-500/5 text-amber-700 dark:text-amber-300',
+          )}
+        >
+          <div className="flex items-start gap-2">
+            <TriangleAlert className="mt-0.5 size-3.5 shrink-0" />
+            <span>{formatModelValidationWarning(warning)}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import {
+  THINKING_LABELS,
+  THINKING_LEVELS,
+  type ThinkingLevel,
+} from '@sero-ai/common';
+import { cn } from '../../lib/utils';
+
+interface ThinkingLevelPickerProps {
+  value: string;
+  onChange: (value: ThinkingLevel) => void;
+  availableLevels?: readonly string[];
+  disabled?: boolean;
+  showUnsupported?: boolean;
+  className?: string;
+}
+
+export function ThinkingLevelPicker({
+  value,
+  onChange,
+  availableLevels,
+  disabled = false,
+  showUnsupported = true,
+  className,
+}: ThinkingLevelPickerProps) {
+  const allowed = new Set<string>(availableLevels ?? THINKING_LEVELS);
+  const levels = showUnsupported || !availableLevels
+    ? THINKING_LEVELS
+    : 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)}>
+      {levels.map((level) => {
+        const isActive = value === level;
+        const isAvailable = allowed.has(level) || !availableLevels;
+        return (
+          <button
+            key={level}
+            type="button"
+            disabled={disabled || !isAvailable}
+            onClick={() => onChange(level)}
+            className={cn(
+              'rounded-md px-2 py-1.5 text-[11px] 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]}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/ui/alert-dialog.tsx

@@ -58,7 +58,7 @@ function AlertDialogContent({
         data-slot="alert-dialog-content"
         data-size={size}
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg",
           className
         )}
         {...props}

package/src/components/ui/calendar.tsx

@@ -102,7 +102,7 @@ function Calendar({
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          "relative size-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
           props.showWeekNumber
             ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
             : "[&:first-child[data-selected=true]_button]:rounded-l-md",

package/src/components/ui/carousel.tsx

@@ -31,7 +31,7 @@ type CarouselContextProps = {
 const CarouselContext = React.createContext<CarouselContextProps | null>(null)
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.use(CarouselContext)
 
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />")

package/src/components/ui/chart.tsx

@@ -23,7 +23,7 @@ type ChartContextProps = {
 const ChartContext = React.createContext<ChartContextProps | null>(null)
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.use(ChartContext)
 
   if (!context) {
     throw new Error("useChart must be used within a <ChartContainer />")
@@ -204,7 +204,7 @@ function ChartTooltipContent({
                           className={cn(
                             "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                             {
-                              "h-2.5 w-2.5": indicator === "dot",
+                              "size-2.5": indicator === "dot",
                               "w-1": indicator === "line",
                               "w-0 border-[1.5px] border-dashed bg-transparent":
                                 indicator === "dashed",
@@ -292,7 +292,7 @@ function ChartLegendContent({
                 <itemConfig.icon />
               ) : (
                 <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  className="size-2 shrink-0 rounded-[2px]"
                   style={{
                     backgroundColor: item.color,
                   }}

package/src/components/ui/command.tsx

@@ -21,7 +21,7 @@ function Command({
     <CommandPrimitive
       data-slot="command"
       className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        "bg-popover text-popover-foreground flex size-full flex-col overflow-hidden rounded-md",
         className
       )}
       {...props}
@@ -73,7 +73,7 @@ function CommandInput({
       <CommandPrimitive.Input
         data-slot="command-input"
         className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent pl-1.5 py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         {...props}

package/src/components/ui/dialog.tsx

@@ -61,7 +61,7 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
           className
         )}
         {...props}

package/src/components/ui/field.tsx

@@ -211,8 +211,8 @@ function FieldError({
     return (
       <ul className="ml-4 flex list-disc flex-col gap-1">
         {uniqueErrors.map(
-          (error, index) =>
-            error?.message && <li key={index}>{error.message}</li>
+          (error) =>
+            error?.message && <li key={error.message}>{error.message}</li>
         )}
       </ul>
     )

package/src/components/ui/form.tsx

@@ -41,8 +41,8 @@ const FormField = <
 }
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
+  const fieldContext = React.use(FormFieldContext)
+  const itemContext = React.use(FormItemContext)
   const { getFieldState } = useFormContext()
   const formState = useFormState({ name: fieldContext.name })
   const fieldState = getFieldState(fieldContext.name, formState)

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

@@ -43,7 +43,7 @@ function InputOTPSlot({
 }: React.ComponentProps<"div"> & {
   index: number
 }) {
-  const inputOTPContext = React.useContext(OTPInputContext)
+  const inputOTPContext = React.use(OTPInputContext)
   const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
 
   return (
@@ -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 h-9 w-9 items-center justify-center border-y border-r text-sm 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 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-sm 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]",
         className
       )}
       {...props}

package/src/components/ui/input.tsx

@@ -2,9 +2,11 @@ import * as React from "react"
 
 import { cn } from "../../lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({ className, type, placeholder, "aria-label": ariaLabel, ...props }: React.ComponentProps<"input">) {
   return (
     <input
+      aria-label={ariaLabel ?? (typeof placeholder === "string" ? placeholder : undefined)}
+      placeholder={placeholder}
       type={type}
       data-slot="input"
       className={cn(

package/src/components/ui/menubar.tsx

@@ -235,7 +235,7 @@ function MenubarSubTrigger({
       {...props}
     >
       {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
+      <ChevronRightIcon className="ml-auto size-4" />
     </MenubarPrimitive.SubTrigger>
   )
 }

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

@@ -6,6 +6,7 @@ import { cn } from "../../lib/utils"
 function NativeSelect({
   className,
   size = "default",
+  "aria-label": ariaLabel,
   ...props
 }: Omit<React.ComponentProps<"select">, "size"> & { size?: "sm" | "default" }) {
   return (
@@ -14,6 +15,7 @@ function NativeSelect({
       data-slot="native-select-wrapper"
     >
       <select
+        aria-label={ariaLabel}
         data-slot="native-select"
         data-size={size}
         className={cn(

package/src/components/ui/navigation-menu.tsx

@@ -150,7 +150,7 @@ function NavigationMenuIndicator({
       )}
       {...props}
     >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+      <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
     </NavigationMenuPrimitive.Indicator>
   )
 }

package/src/components/ui/plugin-safety-disclaimer.tsx

@@ -0,0 +1,25 @@
+import { ShieldAlert } from 'lucide-react';
+import { cn } from '../../lib/utils';
+
+export interface PluginSafetyDisclaimerProps {
+  className?: string;
+}
+
+export function PluginSafetyDisclaimer({ className }: PluginSafetyDisclaimerProps) {
+  return (
+    <div
+      role="note"
+      className={cn(
+        'flex shrink-0 items-start gap-2 border-t border-status-warning-border bg-status-warning-faint px-4 py-2.5 text-[11px] leading-5 text-[var(--text-secondary)]',
+        className,
+      )}
+    >
+      <ShieldAlert className="mt-0.5 size-3.5 shrink-0 text-status-warning" />
+      <p>
+        <span className="font-medium text-status-warning">Heads up:</span>{' '}
+        Plugins run with full access to this workspace and can execute code on your device.
+        Only install plugins from sources you trust.
+      </p>
+    </div>
+  );
+}

package/src/components/ui/progress.tsx

@@ -21,7 +21,7 @@ function Progress({
     >
       <ProgressPrimitive.Indicator
         data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
+        className="bg-primary size-full flex-1 transition-all"
         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
       />
     </ProgressPrimitive.Root>

package/src/components/ui/resizable.tsx

@@ -13,7 +13,7 @@ function ResizablePanelGroup({
     <ResizablePrimitive.Group
       data-slot="resizable-panel-group"
       className={cn(
-        "flex h-full w-full aria-[orientation=vertical]:flex-col",
+        "flex size-full aria-[orientation=vertical]:flex-col",
         className
       )}
       {...props}

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

@@ -0,0 +1,39 @@
+import * as React from "react"
+import { SearchIcon } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+interface SearchInputProps extends React.ComponentProps<"input"> {
+  containerClassName?: string
+  endAdornment?: React.ReactNode
+  iconClassName?: string
+  ref?: React.Ref<HTMLInputElement>
+}
+
+function SearchInput({ containerClassName, className, endAdornment, iconClassName, placeholder, "aria-label": ariaLabel, ref, ...props }: SearchInputProps) {
+  return (
+    <div
+      data-slot="search-input"
+      className={cn("flex items-center gap-2 px-3", containerClassName)}
+    >
+      <SearchIcon
+        data-slot="search-input-icon"
+        className={cn("text-muted-foreground size-3.5 shrink-0", iconClassName)}
+      />
+      <input
+        aria-label={ariaLabel ?? (typeof placeholder === "string" ? placeholder : "Search")}
+        placeholder={placeholder}
+        ref={ref}
+        data-slot="search-input-control"
+        className={cn(
+          "placeholder:text-muted-foreground h-9 w-full min-w-0 bg-transparent pl-1.5 text-xs text-foreground outline-none disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      />
+      {endAdornment}
+    </div>
+  )
+}
+
+export { SearchInput }

package/src/components/ui/slider.tsx

@@ -20,6 +20,11 @@ function Slider({
           : [min, max],
     [value, defaultValue, min, max]
   )
+  const thumbKeysRef = React.useRef<string[]>([])
+  while (thumbKeysRef.current.length < _values.length) {
+    thumbKeysRef.current.push(`thumb-${thumbKeysRef.current.length}`)
+  }
+  const thumbKeys = thumbKeysRef.current.slice(0, _values.length)
 
   return (
     <SliderPrimitive.Root
@@ -47,10 +52,10 @@ function Slider({
           )}
         />
       </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
+      {_values.map((_, index) => (
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
-          key={index}
+          key={thumbKeys[index]}
           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/textarea.tsx

@@ -2,9 +2,11 @@ import * as React from "react"
 
 import { cn } from "../../lib/utils"
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+function Textarea({ className, placeholder, "aria-label": ariaLabel, ...props }: React.ComponentProps<"textarea">) {
   return (
     <textarea
+      aria-label={ariaLabel ?? (typeof placeholder === "string" ? placeholder : undefined)}
+      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-sm",

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

@@ -56,7 +56,7 @@ function ToggleGroupItem({
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
   VariantProps<typeof toggleVariants>) {
-  const context = React.useContext(ToggleGroupContext)
+  const context = React.use(ToggleGroupContext)
 
   return (
     <ToggleGroupPrimitive.Item