@sero-ai/ui 0.2.0 → 0.3.0

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}

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

@@ -7,34 +7,33 @@ interface SearchInputProps extends React.ComponentProps<"input"> {
   containerClassName?: string
   endAdornment?: React.ReactNode
   iconClassName?: string
+  ref?: React.Ref<HTMLInputElement>
 }
 
-const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ containerClassName, className, endAdornment, iconClassName, ...props }, ref) => {
-    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
-          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>
-    )
-  }
-)
-
-SearchInput.displayName = "SearchInput"
+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

package/src/components/ui/tree.tsx

@@ -20,7 +20,7 @@ const TreeContext = React.createContext<TreeContextValue>({
 });
 
 function useTreeContext<T = any>() {
-  return React.useContext(TreeContext) as TreeContextValue<T>;
+  return React.use(TreeContext) as TreeContextValue<T>;
 }
 
 interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -61,7 +61,7 @@ interface TreeItemProps<T = any>
 }
 
 /**
- * TreeItem — full-width row button.
+ * TreeItem, full-width row button.
  *
  * The row carries hover / selected / drag-target backgrounds so the
  * highlight spans edge-to-edge (VSCode-style). Indentation is applied
@@ -140,7 +140,7 @@ interface TreeItemLabelProps<T = any>
 }
 
 /**
- * TreeItemLabel — content wrapper inside a TreeItem.
+ * TreeItemLabel, content wrapper inside a TreeItem.
  *
  * Layout-only (chevron + children). Background lives on the parent
  * TreeItem so it spans the full row width.

package/src/index.ts

@@ -14,6 +14,9 @@ export { cn } from "./lib/utils";
 // ── Hooks ──
 export { useIsMobile } from "./hooks/use-mobile";
 
+// ── Theme ──
+export * from "./theme";
+
 // ── UI Components ──
 export * from "./components/ui/accordion";
 export * from "./components/ui/alert-dialog";