@sero-ai/ui 0.2.0 → 0.2.1

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

@@ -14,7 +14,7 @@ import { nanoid } from "nanoid";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -71,7 +71,7 @@ export const LocalReferencedSourcesContext = createContext<ReferencedSourcesCont
 // ============================================================================
 
 export const usePromptInputController = () => {
-  const ctx = useContext(PromptInputController);
+  const ctx = use(PromptInputController);
   if (!ctx) {
     throw new Error(
       "Wrap your component inside <PromptInputProvider> to use usePromptInputController()."
@@ -80,12 +80,12 @@ export const usePromptInputController = () => {
   return ctx;
 };
 
-/** Optional variant — does NOT throw. Useful for dual-mode components. */
+/** Optional variant, does NOT throw. Useful for dual-mode components. */
 export const useOptionalPromptInputController = () =>
-  useContext(PromptInputController);
+  use(PromptInputController);
 
 export const useProviderAttachments = () => {
-  const ctx = useContext(ProviderAttachmentsContext);
+  const ctx = use(ProviderAttachmentsContext);
   if (!ctx) {
     throw new Error(
       "Wrap your component inside <PromptInputProvider> to use useProviderAttachments()."
@@ -95,12 +95,12 @@ export const useProviderAttachments = () => {
 };
 
 const useOptionalProviderAttachments = () =>
-  useContext(ProviderAttachmentsContext);
+  use(ProviderAttachmentsContext);
 
 export const usePromptInputAttachments = () => {
   // Prefer local context (inside PromptInput) as it has validation, fall back to provider
   const provider = useOptionalProviderAttachments();
-  const local = useContext(LocalAttachmentsContext);
+  const local = use(LocalAttachmentsContext);
   const context = local ?? provider;
   if (!context) {
     throw new Error(
@@ -111,7 +111,7 @@ export const usePromptInputAttachments = () => {
 };
 
 export const usePromptInputReferencedSources = () => {
-  const ctx = useContext(LocalReferencedSourcesContext);
+  const ctx = use(LocalReferencedSourcesContext);
   if (!ctx) {
     throw new Error(
       "usePromptInputReferencedSources must be used within a LocalReferencedSourcesContext.Provider"

package/src/components/ai-elements/queue.tsx

@@ -154,7 +154,7 @@ export const QueueItemImage = ({
 }: QueueItemImageProps) => (
   <img
     alt=""
-    className={cn("h-8 w-8 rounded border object-cover", className)}
+    className={cn("size-8 rounded border object-cover", className)}
     height={32}
     width={32}
     {...props}

package/src/components/ai-elements/reasoning.tsx

@@ -18,7 +18,7 @@ import {
   createContext,
   memo,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -38,7 +38,7 @@ interface ReasoningContextValue {
 const ReasoningContext = createContext<ReasoningContextValue | null>(null);
 
 export const useReasoning = () => {
-  const context = useContext(ReasoningContext);
+  const context = use(ReasoningContext);
   if (!context) {
     throw new Error("Reasoning components must be used within Reasoning");
   }
@@ -157,7 +157,7 @@ export type ReasoningTriggerProps = ComponentProps<
 
 const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number) => {
   if (isStreaming || duration === 0) {
-    return <Shimmer duration={1}>Thinking...</Shimmer>;
+    return <Shimmer duration={1}>Thinking…</Shimmer>;
   }
   if (duration === undefined) {
     return <p>Thought for a few seconds</p>;

package/src/components/ai-elements/schema-display.tsx

@@ -10,7 +10,7 @@ import {
 } from "../ui/collapsible";
 import { cn } from "../../lib/utils";
 import { ChevronRightIcon } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 
 type HttpMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
 
@@ -144,7 +144,7 @@ export const SchemaDisplayMethod = ({
   children,
   ...props
 }: SchemaDisplayMethodProps) => {
-  const { method } = useContext(SchemaDisplayContext);
+  const { method } = use(SchemaDisplayContext);
 
   return (
     <Badge
@@ -164,7 +164,7 @@ export const SchemaDisplayPath = ({
   children,
   ...props
 }: SchemaDisplayPathProps) => {
-  const { path } = useContext(SchemaDisplayContext);
+  const { path } = use(SchemaDisplayContext);
 
   // Highlight path parameters
   const highlightedPath = path.replaceAll(
@@ -191,7 +191,7 @@ export const SchemaDisplayDescription = ({
   children,
   ...props
 }: SchemaDisplayDescriptionProps) => {
-  const { description } = useContext(SchemaDisplayContext);
+  const { description } = use(SchemaDisplayContext);
 
   return (
     <p
@@ -225,7 +225,7 @@ export const SchemaDisplayParameters = ({
   children,
   ...props
 }: SchemaDisplayParametersProps) => {
-  const { parameters } = useContext(SchemaDisplayContext);
+  const { parameters } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
@@ -293,7 +293,7 @@ export const SchemaDisplayRequest = ({
   children,
   ...props
 }: SchemaDisplayRequestProps) => {
-  const { requestBody } = useContext(SchemaDisplayContext);
+  const { requestBody } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>
@@ -320,7 +320,7 @@ export const SchemaDisplayResponse = ({
   children,
   ...props
 }: SchemaDisplayResponseProps) => {
-  const { responseBody } = useContext(SchemaDisplayContext);
+  const { responseBody } = use(SchemaDisplayContext);
 
   return (
     <Collapsible className={cn(className)} defaultOpen {...props}>

package/src/components/ai-elements/snippet.tsx

@@ -14,7 +14,7 @@ import { CheckIcon, CopyIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useRef,
   useState,
@@ -66,7 +66,7 @@ export type SnippetInputProps = Omit<
 >;
 
 export const SnippetInput = ({ className, ...props }: SnippetInputProps) => {
-  const { code } = useContext(SnippetContext);
+  const { code } = use(SnippetContext);
 
   return (
     <InputGroupInput
@@ -94,7 +94,7 @@ export const SnippetCopyButton = ({
 }: SnippetCopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<number>(0);
-  const { code } = useContext(SnippetContext);
+  const { code } = use(SnippetContext);
 
   const copyToClipboard = useCallback(async () => {
     if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {

package/src/components/ai-elements/sources.tsx

@@ -36,7 +36,7 @@ export const SourcesTrigger = ({
     {children ?? (
       <>
         <p className="font-medium">Used {count} sources</p>
-        <ChevronDownIcon className="h-4 w-4" />
+        <ChevronDownIcon className="size-4" />
       </>
     )}
   </CollapsibleTrigger>
@@ -70,7 +70,7 @@ export const Source = ({ href, title, children, ...props }: SourceProps) => (
   >
     {children ?? (
       <>
-        <BookIcon className="h-4 w-4" />
+        <BookIcon className="size-4" />
         <span className="block font-medium">{title}</span>
       </>
     )}

package/src/components/ai-elements/terminal.tsx

@@ -9,7 +9,7 @@ import { CheckIcon, CopyIcon, TerminalIcon, Trash2Icon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useEffect,
   useMemo,
   useRef,
@@ -122,7 +122,7 @@ export const TerminalStatus = ({
   children,
   ...props
 }: TerminalStatusProps) => {
-  const { isStreaming } = useContext(TerminalContext);
+  const { isStreaming } = use(TerminalContext);
 
   if (!isStreaming) {
     return null;
@@ -166,7 +166,7 @@ export const TerminalCopyButton = ({
 }: TerminalCopyButtonProps) => {
   const [isCopied, setIsCopied] = useState(false);
   const timeoutRef = useRef<number>(0);
-  const { output } = useContext(TerminalContext);
+  const { output } = use(TerminalContext);
 
   const copyToClipboard = useCallback(async () => {
     if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
@@ -216,7 +216,7 @@ export const TerminalClearButton = ({
   className,
   ...props
 }: TerminalClearButtonProps) => {
-  const { onClear } = useContext(TerminalContext);
+  const { onClear } = use(TerminalContext);
 
   if (!onClear) {
     return null;
@@ -245,7 +245,7 @@ export const TerminalContent = ({
   children,
   ...props
 }: TerminalContentProps) => {
-  const { output, isStreaming, autoScroll } = useContext(TerminalContext);
+  const { output, isStreaming, autoScroll } = use(TerminalContext);
   const containerRef = useRef<HTMLDivElement>(null);
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: output triggers auto-scroll when new content arrives

package/src/components/ai-elements/test-results.tsx

@@ -16,7 +16,7 @@ import {
   CircleIcon,
   XCircleIcon,
 } from "lucide-react";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 
 type TestStatus = "passed" | "failed" | "skipped" | "running";
 
@@ -96,7 +96,7 @@ export const TestResultsSummary = ({
   children,
   ...props
 }: TestResultsSummaryProps) => {
-  const { summary } = useContext(TestResultsContext);
+  const { summary } = use(TestResultsContext);
 
   if (!summary) {
     return null;
@@ -144,7 +144,7 @@ export const TestResultsDuration = ({
   children,
   ...props
 }: TestResultsDurationProps) => {
-  const { summary } = useContext(TestResultsContext);
+  const { summary } = use(TestResultsContext);
 
   if (!summary?.duration) {
     return null;
@@ -164,7 +164,7 @@ export const TestResultsProgress = ({
   children,
   ...props
 }: TestResultsProgressProps) => {
-  const { summary } = useContext(TestResultsContext);
+  const { summary } = use(TestResultsContext);
 
   if (!summary) {
     return null;
@@ -251,7 +251,7 @@ export const TestSuiteName = ({
   children,
   ...props
 }: TestSuiteNameProps) => {
-  const { name, status } = useContext(TestSuiteContext);
+  const { name, status } = use(TestSuiteContext);
 
   return (
     <CollapsibleTrigger
@@ -395,7 +395,7 @@ export const TestStatus = ({
   children,
   ...props
 }: TestStatusProps) => {
-  const { status } = useContext(TestContext);
+  const { status } = use(TestContext);
 
   return (
     <span
@@ -410,7 +410,7 @@ export const TestStatus = ({
 export type TestNameProps = HTMLAttributes<HTMLSpanElement>;
 
 export const TestName = ({ className, children, ...props }: TestNameProps) => {
-  const { name } = useContext(TestContext);
+  const { name } = use(TestContext);
 
   return (
     <span className={cn("flex-1", className)} {...props}>
@@ -426,7 +426,7 @@ export const TestDuration = ({
   children,
   ...props
 }: TestDurationProps) => {
-  const { duration } = useContext(TestContext);
+  const { duration } = use(TestContext);
 
   if (duration === undefined) {
     return null;

package/src/components/ai-elements/transcription.tsx

@@ -5,7 +5,7 @@ import type { ComponentProps, ReactNode } from "react";
 
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { cn } from "../../lib/utils";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import { createContext, useCallback, use, useMemo } from "react";
 
 type TranscriptionSegment = TranscriptionResult["segments"][number];
 
@@ -21,7 +21,7 @@ const TranscriptionContext = createContext<TranscriptionContextValue | null>(
 );
 
 const useTranscription = () => {
-  const context = useContext(TranscriptionContext);
+  const context = use(TranscriptionContext);
   if (!context) {
     throw new Error(
       "Transcription components must be used within Transcription"

package/src/components/ai-elements/voice-selector.tsx

@@ -38,7 +38,7 @@ import {
   VenusAndMarsIcon,
   VenusIcon,
 } from "lucide-react";
-import { createContext, useCallback, useContext, useMemo } from "react";
+import { createContext, useCallback, use, useMemo } from "react";
 
 interface VoiceSelectorContextValue {
   value: string | undefined;
@@ -52,7 +52,7 @@ const VoiceSelectorContext = createContext<VoiceSelectorContextValue | null>(
 );
 
 export const useVoiceSelector = () => {
-  const context = useContext(VoiceSelectorContext);
+  const context = use(VoiceSelectorContext);
   if (!context) {
     throw new Error(
       "VoiceSelector components must be used within VoiceSelector"

package/src/components/ai-elements/web-preview.tsx

@@ -20,7 +20,7 @@ import { ChevronDownIcon } from "lucide-react";
 import {
   createContext,
   useCallback,
-  useContext,
+  use,
   useMemo,
   useState,
 } from "react";
@@ -35,7 +35,7 @@ export interface WebPreviewContextValue {
 const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
 
 const useWebPreview = () => {
-  const context = useContext(WebPreviewContext);
+  const context = use(WebPreviewContext);
   if (!context) {
     throw new Error("WebPreview components must be used within a WebPreview");
   }
@@ -120,7 +120,7 @@ export const WebPreviewNavigationButton = ({
     <Tooltip>
       <TooltipTrigger asChild>
         <Button
-          className="h-8 w-8 p-0 hover:text-foreground"
+          className="size-8 p-0 hover:text-foreground"
           disabled={disabled}
           onClick={onClick}
           size="sm"
@@ -199,7 +199,6 @@ export const WebPreviewBody = ({
     <div className="flex-1">
       <iframe
         className={cn("size-full", className)}
-        // oxlint-disable-next-line eslint-plugin-react(iframe-missing-sandbox)
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
         src={(src ?? url) || undefined}
         title="Preview"
@@ -241,7 +240,7 @@ export const WebPreviewConsole = ({
           Console
           <ChevronDownIcon
             className={cn(
-              "h-4 w-4 transition-transform duration-200",
+              "size-4 transition-transform duration-200",
               consoleOpen && "rotate-180"
             )}
           />
@@ -265,7 +264,7 @@ export const WebPreviewConsole = ({
                   log.level === "warn" && "text-yellow-600",
                   log.level === "log" && "text-foreground"
                 )}
-                key={`${log.timestamp.getTime()}-${index}`}
+                key={`${log.timestamp.getTime()}-${log.level}-${log.message}`}
               >
                 <span className="text-muted-foreground">
                   {log.timestamp.toLocaleTimeString()}

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

@@ -37,7 +37,7 @@ export function AvailableModelPicker<
   value,
   onChange,
   placeholder = 'Choose a model',
-  searchPlaceholder = 'Search models…',
+  searchPlaceholder = 'Search models...',
   emptyLabel = 'No matching models',
   noModelsLabel = 'No models available',
   allowClear = false,

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}

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

@@ -10,13 +10,13 @@ export function PluginSafetyDisclaimer({ className }: PluginSafetyDisclaimerProp
     <div
       role="note"
       className={cn(
-        'flex shrink-0 items-start gap-2 border-t border-[var(--status-warning-border)] bg-[var(--status-warning-faint)] px-4 py-2.5 text-[11px] leading-5 text-[var(--text-secondary)]',
+        '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-[var(--status-warning)]" />
+      <ShieldAlert className="mt-0.5 size-3.5 shrink-0 text-status-warning" />
       <p>
-        <span className="font-medium text-[var(--status-warning)]">Heads up:</span>{' '}
+        <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>

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}