@elizaos/client 1.6.1-alpha.6 → 1.6.1-alpha.7

package/src/components/agent-prism/SpanCard/SpanCard.tsx

@@ -1,35 +1,24 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
-
-import {
-  formatDuration,
-  getTimelineData,
-} from "@evilmartians/agent-prism-data";
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { cn } from "@/lib/utils";
-import {
-  type FC,
-  useCallback,
-  type KeyboardEvent,
-  type MouseEvent,
-} from "react";
-
-import { Avatar, type AvatarProps } from "../Avatar.tsx";
-import { getSpanCategoryTheme } from "../shared.ts";
-import { SpanStatus } from "../SpanStatus.tsx";
-import { SpanCardBadges } from "./SpanCardBadges.tsx";
-import {
-  type SpanCardConnectorType,
-  SpanCardConnector,
-} from "./SpanCardConnector.tsx";
-import { SpanCardTimeline } from "./SpanCardTimeline.tsx";
-import { SpanCardToggle } from "./SpanCardToggle.tsx";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
+
+import { formatDuration, getTimelineData } from '@evilmartians/agent-prism-data';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { cn } from '@/lib/utils';
+import { type FC, useCallback, type KeyboardEvent, type MouseEvent } from 'react';
+
+import { Avatar, type AvatarProps } from '../Avatar.tsx';
+import { getSpanCategoryTheme } from '../shared.ts';
+import { SpanStatus } from '../SpanStatus.tsx';
+import { SpanCardBadges } from './SpanCardBadges.tsx';
+import { type SpanCardConnectorType, SpanCardConnector } from './SpanCardConnector.tsx';
+import { SpanCardTimeline } from './SpanCardTimeline.tsx';
+import { SpanCardToggle } from './SpanCardToggle.tsx';
 
 const LAYOUT_CONSTANTS = {
   CONNECTOR_WIDTH: 20,
   CONTENT_BASE_WIDTH: 320,
 } as const;
 
-type ExpandButtonPlacement = "inside" | "outside";
+type ExpandButtonPlacement = 'inside' | 'outside';
 
 export type SpanCardViewOptions = {
   withStatus?: boolean;
@@ -38,7 +27,7 @@ export type SpanCardViewOptions = {
 
 const DEFAULT_VIEW_OPTIONS: Required<SpanCardViewOptions> = {
   withStatus: true,
-  expandButton: "inside",
+  expandButton: 'inside',
 };
 
 interface SpanCardProps {
@@ -73,15 +62,13 @@ const getContentWidth = ({
   contentPadding: number;
   expandButton: ExpandButtonPlacement;
 }) => {
-  let width =
-    LAYOUT_CONSTANTS.CONTENT_BASE_WIDTH -
-    level * LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
+  let width = LAYOUT_CONSTANTS.CONTENT_BASE_WIDTH - level * LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
 
-  if (hasExpandButton && expandButton === "inside") {
+  if (hasExpandButton && expandButton === 'inside') {
     width -= LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
   }
 
-  if (expandButton === "outside" && level === 0) {
+  if (expandButton === 'outside' && level === 0) {
     width -= LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
   }
 
@@ -95,7 +82,7 @@ const getGridTemplateColumns = ({
   connectorsColumnWidth: number;
   expandButton: ExpandButtonPlacement;
 }) => {
-  if (expandButton === "inside") {
+  if (expandButton === 'inside') {
     return `${connectorsColumnWidth}px 1fr`;
   }
 
@@ -136,36 +123,32 @@ const getConnectorsLayout = ({
 
   if (level === 0) {
     return {
-      connectors: expandButton === "inside" ? [] : ["vertical"],
+      connectors: expandButton === 'inside' ? [] : ['vertical'],
       connectorsColumnWidth: 20,
     };
   }
 
   for (let i = 0; i < level - 1; i++) {
-    connectors.push("vertical");
+    connectors.push('vertical');
   }
 
   if (!isLastChild) {
-    connectors.push("t-right");
+    connectors.push('t-right');
   }
 
   if (isLastChild) {
-    connectors.push("corner-top-right");
+    connectors.push('corner-top-right');
   }
 
-  let connectorsColumnWidth =
-    connectors.length * LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
+  let connectorsColumnWidth = connectors.length * LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
 
   if (hasExpandButton) {
     connectorsColumnWidth += LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
   }
 
   for (let i = 0; i < prevConnectors.length; i++) {
-    if (
-      prevConnectors[i] === "empty" ||
-      prevConnectors[i] === "corner-top-right"
-    ) {
-      connectors[i] = "empty";
+    if (prevConnectors[i] === 'empty' || prevConnectors[i] === 'corner-top-right') {
+      connectors[i] = 'empty';
     }
   }
 
@@ -175,30 +158,24 @@ const getConnectorsLayout = ({
   };
 };
 
-const useSpanCardEventHandlers = (
-  data: TraceSpan,
-  onSpanSelect?: (span: TraceSpan) => void,
-) => {
+const useSpanCardEventHandlers = (data: TraceSpan, onSpanSelect?: (span: TraceSpan) => void) => {
   const handleCardClick = useCallback((): void => {
     onSpanSelect?.(data);
   }, [data, onSpanSelect]);
 
   const handleKeyDown = useCallback(
     (e: KeyboardEvent): void => {
-      if (e.key === "Enter" || e.key === " ") {
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         handleCardClick();
       }
     },
-    [handleCardClick],
+    [handleCardClick]
   );
 
-  const handleToggleClick = useCallback(
-    (e: MouseEvent | KeyboardEvent): void => {
-      e.stopPropagation();
-    },
-    [],
-  );
+  const handleToggleClick = useCallback((e: MouseEvent | KeyboardEvent): void => {
+    e.stopPropagation();
+  }, []);
 
   return {
     handleCardClick,
@@ -230,33 +207,33 @@ const SpanCardChildren: FC<{
   onExpandSpansIdsChange,
   viewOptions = DEFAULT_VIEW_OPTIONS,
 }) => {
-    if (!data.children?.length) return null;
-
-    return (
-      <div className="relative">
-        <Collapsible.Content>
-          <ul role="group">
-            {data.children.map((child, idx) => (
-              <SpanCard
-                viewOptions={viewOptions}
-                key={child.id}
-                data={child}
-                minStart={minStart}
-                maxEnd={maxEnd}
-                level={level + 1}
-                selectedSpan={selectedSpan}
-                onSpanSelect={onSpanSelect}
-                isLastChild={idx === (data.children || []).length - 1}
-                prevLevelConnectors={prevLevelConnectors}
-                expandedSpansIds={expandedSpansIds}
-                onExpandSpansIdsChange={onExpandSpansIdsChange}
-              />
-            ))}
-          </ul>
-        </Collapsible.Content>
-      </div>
-    );
-  };
+  if (!data.children?.length) return null;
+
+  return (
+    <div className="relative">
+      <Collapsible.Content>
+        <ul role="group">
+          {data.children.map((child, idx) => (
+            <SpanCard
+              viewOptions={viewOptions}
+              key={child.id}
+              data={child}
+              minStart={minStart}
+              maxEnd={maxEnd}
+              level={level + 1}
+              selectedSpan={selectedSpan}
+              onSpanSelect={onSpanSelect}
+              isLastChild={idx === (data.children || []).length - 1}
+              prevLevelConnectors={prevLevelConnectors}
+              expandedSpansIds={expandedSpansIds}
+              onExpandSpansIdsChange={onExpandSpansIdsChange}
+            />
+          ))}
+        </ul>
+      </Collapsible.Content>
+    </div>
+  );
+};
 
 export const SpanCard: FC<SpanCardProps> = ({
   data,
@@ -275,8 +252,7 @@ export const SpanCard: FC<SpanCardProps> = ({
   const isExpanded = expandedSpansIds.includes(data.id);
 
   const withStatus = viewOptions.withStatus ?? DEFAULT_VIEW_OPTIONS.withStatus;
-  const expandButton =
-    viewOptions.expandButton || DEFAULT_VIEW_OPTIONS.expandButton;
+  const expandButton = viewOptions.expandButton || DEFAULT_VIEW_OPTIONS.expandButton;
 
   const handleToggleClick = useCallback(
     (expanded: boolean) => {
@@ -290,7 +266,7 @@ export const SpanCard: FC<SpanCardProps> = ({
         onExpandSpansIdsChange([...expandedSpansIds, data.id]);
       }
     },
-    [isExpanded, expandedSpansIds, data.id, onExpandSpansIdsChange],
+    [isExpanded, expandedSpansIds, data.id, onExpandSpansIdsChange]
   );
 
   const state: SpanCardState = {
@@ -307,8 +283,7 @@ export const SpanCard: FC<SpanCardProps> = ({
     maxEnd,
   });
 
-  const hasExpandButtonAsFirstChild =
-    expandButton === "inside" && state.hasChildren;
+  const hasExpandButtonAsFirstChild = expandButton === 'inside' && state.hasChildren;
 
   const contentPadding = getContentPadding({
     level,
@@ -341,16 +316,11 @@ export const SpanCard: FC<SpanCardProps> = ({
       aria-expanded={state.hasChildren ? state.isExpanded : undefined}
       className="list-none"
     >
-      <Collapsible.Root
-        open={state.isExpanded}
-        onOpenChange={handleToggleClick}
-      >
+      <Collapsible.Root open={state.isExpanded} onOpenChange={handleToggleClick}>
         <div
           className={cn(
-            "relative grid w-full rounded-md transition-colors",
-            state.isSelected
-              ? "bg-accent/50 border border-accent"
-              : "hover:bg-muted/30",
+            'relative grid w-full rounded-md transition-colors',
+            state.isSelected ? 'bg-accent/50 border border-accent' : 'hover:bg-muted/30'
           )}
           style={{
             gridTemplateColumns,
@@ -362,7 +332,7 @@ export const SpanCard: FC<SpanCardProps> = ({
           aria-pressed={state.isSelected}
           aria-describedby={`span-card-desc-${data.id}`}
           aria-expanded={state.hasChildren ? state.isExpanded : undefined}
-          aria-label={`${state.isSelected ? "Selected" : "Not selected"} span card for ${data.title} at level ${level}`}
+          aria-label={`${state.isSelected ? 'Selected' : 'Not selected'} span card for ${data.title} at level ${level}`}
         >
           <div className="flex flex-nowrap">
             {connectors.map((connector, idx) => (
@@ -383,10 +353,10 @@ export const SpanCard: FC<SpanCardProps> = ({
           </div>
           <div
             className={cn(
-              "flex flex-nowrap items-center align-middle gap-x-3 gap py-3 px-2",
-              "min-h-5 w-full cursor-pointer",
-              level !== 0 && !hasExpandButtonAsFirstChild && "pl-2",
-              level !== 0 && hasExpandButtonAsFirstChild && "pl-1",
+              'flex flex-nowrap items-center align-middle gap-x-3 gap py-3 px-2',
+              'min-h-5 w-full cursor-pointer',
+              level !== 0 && !hasExpandButtonAsFirstChild && 'pl-2',
+              level !== 0 && hasExpandButtonAsFirstChild && 'pl-1'
             )}
           >
             <div
@@ -409,7 +379,7 @@ export const SpanCard: FC<SpanCardProps> = ({
             </div>
 
             <div className="flex flex-shrink flex-grow flex-nowrap items-center justify-end gap-1 min-w-0">
-              {expandButton === "outside" && withStatus && (
+              {expandButton === 'outside' && withStatus && (
                 <div className="flex-shrink-0">
                   <SpanStatus status={data.status} />
                 </div>
@@ -428,7 +398,7 @@ export const SpanCard: FC<SpanCardProps> = ({
                   {formatDuration(durationMs)}
                 </span>
 
-                {expandButton === "inside" && withStatus && (
+                {expandButton === 'inside' && withStatus && (
                   <div>
                     <SpanStatus status={data.status} />
                   </div>
@@ -437,7 +407,7 @@ export const SpanCard: FC<SpanCardProps> = ({
             </div>
           </div>
 
-          {expandButton === "outside" &&
+          {expandButton === 'outside' &&
             (state.hasChildren ? (
               <SpanCardToggle
                 isExpanded={state.isExpanded}

package/src/components/agent-prism/SpanCard/SpanCardBadges.tsx

@@ -1,13 +1,9 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { Badge } from "../Badge.tsx";
-import { PriceBadge } from "../PriceBadge.tsx";
-import {
-  getSpanCategoryIcon,
-  getSpanCategoryLabel,
-  getSpanCategoryTheme,
-} from "../shared.ts";
-import { TokensBadge } from "../TokensBadge.tsx";
+import { Badge } from '../Badge.tsx';
+import { PriceBadge } from '../PriceBadge.tsx';
+import { getSpanCategoryIcon, getSpanCategoryLabel, getSpanCategoryTheme } from '../shared.ts';
+import { TokensBadge } from '../TokensBadge.tsx';
 
 interface SpanCardBagdesProps {
   data: TraceSpan;
@@ -25,11 +21,9 @@ export const SpanCardBadges = ({ data }: SpanCardBagdesProps) => {
         label={getSpanCategoryLabel(data.type)}
       />
 
-      {typeof data.tokensCount === "number" && (
-        <TokensBadge tokensCount={data.tokensCount} />
-      )}
+      {typeof data.tokensCount === 'number' && <TokensBadge tokensCount={data.tokensCount} />}
 
-      {typeof data.cost === "number" && <PriceBadge cost={data.cost} />}
+      {typeof data.cost === 'number' && <PriceBadge cost={data.cost} />}
     </div>
   );
 };

package/src/components/agent-prism/SpanCard/SpanCardConnector.tsx

@@ -1,28 +1,28 @@
 export type SpanCardConnectorType =
-  | "horizontal"
-  | "vertical"
-  | "t-right"
-  | "corner-top-right"
-  | "empty";
+  | 'horizontal'
+  | 'vertical'
+  | 't-right'
+  | 'corner-top-right'
+  | 'empty';
 
 interface SpanCardConnectorProps {
   type: SpanCardConnectorType;
 }
 
 export const SpanCardConnector = ({ type }: SpanCardConnectorProps) => {
-  if (type === "empty") return <div className="w-5 shrink-0 grow" />;
+  if (type === 'empty') return <div className="w-5 shrink-0 grow" />;
 
   return (
     <div className="relative w-5 shrink-0 grow">
-      {(type === "vertical" || type === "t-right") && (
+      {(type === 'vertical' || type === 't-right') && (
         <div className="absolute bottom-0 left-1/2 top-0 w-0.5 -translate-x-1/2 bg-muted" />
       )}
 
-      {type === "t-right" && (
+      {type === 't-right' && (
         <div className="absolute left-2.5 top-2.5 h-0.5 w-2.5 -translate-y-[3px] bg-muted" />
       )}
 
-      {type === "corner-top-right" && (
+      {type === 'corner-top-right' && (
         <>
           <div className="absolute left-1/2 top-2 size-0.5 -translate-x-1/2 -translate-y-px bg-muted" />
 

package/src/components/agent-prism/SpanCard/SpanCardTimeline.tsx

@@ -1,9 +1,9 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { getTimelineData } from "@evilmartians/agent-prism-data";
-import { cn } from "@/lib/utils";
+import { getTimelineData } from '@evilmartians/agent-prism-data';
+import { cn } from '@/lib/utils';
 
-import type { ColorVariant } from "../shared.ts";
+import type { ColorVariant } from '../shared.ts';
 
 interface SpanCardTimelineProps {
   spanCard: TraceSpan;
@@ -14,16 +14,16 @@ interface SpanCardTimelineProps {
 }
 
 const timelineBgColors: Record<ColorVariant, string> = {
-  purple: "bg-primary",
-  indigo: "bg-primary",
-  orange: "bg-chart-1",
-  teal: "bg-chart-2",
-  cyan: "bg-chart-3",
-  sky: "bg-chart-4",
-  yellow: "bg-chart-5",
-  emerald: "bg-accent",
-  red: "bg-destructive",
-  gray: "bg-muted-foreground",
+  purple: 'bg-primary',
+  indigo: 'bg-primary',
+  orange: 'bg-chart-1',
+  teal: 'bg-chart-2',
+  cyan: 'bg-chart-3',
+  sky: 'bg-chart-4',
+  yellow: 'bg-chart-5',
+  emerald: 'bg-accent',
+  red: 'bg-destructive',
+  gray: 'bg-muted-foreground',
 };
 
 export const SpanCardTimeline = ({
@@ -40,12 +40,7 @@ export const SpanCardTimeline = ({
   });
 
   return (
-    <span
-      className={cn(
-        "relative flex h-4 min-w-20 flex-1 rounded bg-muted",
-        className,
-      )}
-    >
+    <span className={cn('relative flex h-4 min-w-20 flex-1 rounded bg-muted', className)}>
       <span className="pointer-events-none absolute inset-x-1 top-1/2 h-1.5 -translate-y-1/2">
         <span
           className={`absolute h-full rounded-sm ${timelineBgColors[theme]}`}

package/src/components/agent-prism/SpanCard/SpanCardToggle.tsx

@@ -1,6 +1,6 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { ChevronDown, ChevronRight } from "lucide-react";
-import { type KeyboardEvent, type MouseEvent } from "react";
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { type KeyboardEvent, type MouseEvent } from 'react';
 
 interface SpanCardToggleProps {
   isExpanded: boolean;
@@ -8,17 +8,13 @@ interface SpanCardToggleProps {
   onToggleClick: (e: MouseEvent | KeyboardEvent) => void;
 }
 
-export const SpanCardToggle = ({
-  isExpanded,
-  title,
-  onToggleClick,
-}: SpanCardToggleProps) => (
+export const SpanCardToggle = ({ isExpanded, title, onToggleClick }: SpanCardToggleProps) => (
   <Collapsible.Trigger asChild>
     <button
       className="flex h-4 w-5 shrink-0 items-center justify-center"
       onClick={onToggleClick}
       onKeyDown={onToggleClick}
-      aria-label={`${isExpanded ? "Collapse" : "Expand"} ${title} children`}
+      aria-label={`${isExpanded ? 'Collapse' : 'Expand'} ${title} children`}
       aria-expanded={isExpanded}
       type="button"
     >

package/src/components/agent-prism/SpanStatus.tsx

@@ -1,42 +1,36 @@
-import type { TraceSpanStatus } from "@evilmartians/agent-prism-types";
-import type { ComponentPropsWithRef } from "react";
+import type { TraceSpanStatus } from '@evilmartians/agent-prism-types';
+import type { ComponentPropsWithRef } from 'react';
 
-import { cn } from "@/lib/utils";
-import { Check, Ellipsis, Info, TriangleAlert } from "lucide-react";
+import { cn } from '@/lib/utils';
+import { Check, Ellipsis, Info, TriangleAlert } from 'lucide-react';
 
-type StatusVariant = "dot" | "badge";
+type StatusVariant = 'dot' | 'badge';
 
-export type StatusProps = ComponentPropsWithRef<"div"> & {
+export type StatusProps = ComponentPropsWithRef<'div'> & {
   status: TraceSpanStatus;
   variant?: StatusVariant;
 };
 
 const STATUS_COLORS_DOT: Record<TraceSpanStatus, string> = {
-  success: "bg-green-500 dark:bg-green-500",
-  error: "bg-red-500 dark:bg-red-500",
-  pending: "bg-violet-500 dark:bg-violet-500",
-  warning: "bg-yellow-500 dark:bg-yellow-500",
+  success: 'bg-green-500 dark:bg-green-500',
+  error: 'bg-red-500 dark:bg-red-500',
+  pending: 'bg-violet-500 dark:bg-violet-500',
+  warning: 'bg-yellow-500 dark:bg-yellow-500',
 };
 
 const STATUS_COLORS_BADGE: Record<TraceSpanStatus, string> = {
-  success: "bg-green-100 dark:bg-green-950 text-green-600 dark:text-green-400",
-  error: "bg-red-100 dark:bg-red-950 text-red-600 dark:text-red-400",
-  pending:
-    "bg-violet-100 dark:bg-violet-950 text-violet-600 dark:text-violet-400",
-  warning:
-    "bg-yellow-100 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400",
+  success: 'bg-green-100 dark:bg-green-950 text-green-600 dark:text-green-400',
+  error: 'bg-red-100 dark:bg-red-950 text-red-600 dark:text-red-400',
+  pending: 'bg-violet-100 dark:bg-violet-950 text-violet-600 dark:text-violet-400',
+  warning: 'bg-yellow-100 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400',
 };
 
-export const SpanStatus = ({
-  status,
-  variant = "dot",
-  ...rest
-}: StatusProps) => {
+export const SpanStatus = ({ status, variant = 'dot', ...rest }: StatusProps) => {
   const title = `Status: ${status}`;
 
   return (
     <div className="flex size-4 items-center justify-center" {...rest}>
-      {variant === "dot" ? (
+      {variant === 'dot' ? (
         <SpanStatusDot status={status} title={title} />
       ) : (
         <SpanStatusBadge status={status} title={title} />
@@ -52,7 +46,7 @@ interface StatusWithTitleProps extends StatusProps {
 const SpanStatusDot = ({ status, title }: StatusWithTitleProps) => {
   return (
     <span
-      className={cn("block size-1.5 rounded-full", STATUS_COLORS_DOT[status])}
+      className={cn('block size-1.5 rounded-full', STATUS_COLORS_DOT[status])}
       aria-label={title}
       title={title}
     />
@@ -63,17 +57,17 @@ const SpanStatusBadge = ({ status, title }: StatusWithTitleProps) => {
   return (
     <span
       className={cn(
-        "inline-flex items-center justify-center",
-        "h-3.5 w-4 rounded",
-        STATUS_COLORS_BADGE[status],
+        'inline-flex items-center justify-center',
+        'h-3.5 w-4 rounded',
+        STATUS_COLORS_BADGE[status]
       )}
       aria-label={title}
       title={title}
     >
-      {status === "success" && <Check className="size-2.5" aria-hidden />}
-      {status === "error" && <TriangleAlert className="size-2.5" aria-hidden />}
-      {status === "warning" && <Info className="size-2.5" aria-hidden />}
-      {status === "pending" && <Ellipsis className="size-2.5" aria-hidden />}
+      {status === 'success' && <Check className="size-2.5" aria-hidden />}
+      {status === 'error' && <TriangleAlert className="size-2.5" aria-hidden />}
+      {status === 'warning' && <Info className="size-2.5" aria-hidden />}
+      {status === 'pending' && <Ellipsis className="size-2.5" aria-hidden />}
     </span>
   );
 };

package/src/components/agent-prism/Tabs.tsx

@@ -1,8 +1,8 @@
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef } from 'react';
 
-import * as RadixTabs from "@radix-ui/react-tabs";
-import { cn } from "@/lib/utils";
-import * as React from "react";
+import * as RadixTabs from '@radix-ui/react-tabs';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
 
 export interface TabItem<T extends string = string> {
   value: T;
@@ -11,14 +11,14 @@ export interface TabItem<T extends string = string> {
   disabled?: boolean;
 }
 
-export type TabTheme = "underline" | "pill";
+export type TabTheme = 'underline' | 'pill';
 
 const BASE_TRIGGER =
-  "text-sm font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
+  'text-sm font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed';
 
 const THEMES = {
   underline: {
-    list: "h-9 flex border-b border-border ",
+    list: 'h-9 flex border-b border-border ',
     trigger: `w-full justify-center px-3 ${BASE_TRIGGER} 
       text-muted-foreground hover:text-foreground data-[state=active]:text-foreground
        dark:hover:text-gray-200 dark:data-[state=active]:text-gray-200
@@ -27,7 +27,7 @@ const THEMES = {
       hover:border-muted `,
   },
   pill: {
-    list: "h-9 inline-flex gap-1 p-1 bg-muted rounded-lg",
+    list: 'h-9 inline-flex gap-1 p-1 bg-muted rounded-lg',
     trigger: `px-3 ${BASE_TRIGGER} rounded-md
       text-muted-foreground hover:text-foreground data-[state=active]:text-foreground
        dark:hover:text-gray-200 dark:data-[state=active]:text-gray-200
@@ -36,10 +36,7 @@ const THEMES = {
   },
 } as const;
 
-export type TabsProps<T extends string = string> = Omit<
-  ComponentPropsWithRef<"div">,
-  "dir"
-> & {
+export type TabsProps<T extends string = string> = Omit<ComponentPropsWithRef<'div'>, 'dir'> & {
   /**
    * Array of tab items to display
    */
@@ -84,7 +81,7 @@ export type TabsProps<T extends string = string> = Omit<
   /**
    * The direction of the content of the tabs
    */
-  dir?: "ltr" | "rtl";
+  dir?: 'ltr' | 'rtl';
 };
 
 export const Tabs = <T extends string = string>({
@@ -92,10 +89,10 @@ export const Tabs = <T extends string = string>({
   defaultValue,
   value,
   onValueChange,
-  theme = "underline",
-  className = "",
-  tabsListClassName = "",
-  triggerClassName = "",
+  theme = 'underline',
+  className = '',
+  tabsListClassName = '',
+  triggerClassName = '',
   dir,
   ...rest
 }: TabsProps<T>) => {
@@ -122,9 +119,9 @@ export const Tabs = <T extends string = string>({
             value={item.value}
             disabled={item.disabled}
             className={cn(
-              "flex items-center overflow-hidden",
+              'flex items-center overflow-hidden',
               currentTheme.trigger,
-              triggerClassName,
+              triggerClassName
             )}
           >
             {item.icon && (