@elizaos/client 1.5.5-alpha.10

package/src/components/ui/skeleton.cy.tsx

@@ -0,0 +1,149 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { Skeleton } from './skeleton';
+
+describe('Skeleton Component', () => {
+  it('renders correctly with default props', () => {
+    cy.mount(<Skeleton />);
+
+    cy.get('[data-testid="skeleton"]').should('exist');
+    cy.get('[data-testid="skeleton"]').should('have.class', 'animate-pulse');
+    cy.get('[data-testid="skeleton"]').should('have.class', 'rounded-md');
+    cy.get('[data-testid="skeleton"]').should('have.class', 'bg-primary/10');
+  });
+
+  it('applies custom className', () => {
+    cy.mount(<Skeleton className="w-full h-20" />);
+
+    cy.get('[data-testid="skeleton"]').should('have.class', 'w-full').should('have.class', 'h-20');
+  });
+
+  it('renders multiple skeletons for loading lists', () => {
+    cy.mount(
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+        <Skeleton className="h-4 w-1/2" />
+      </div>
+    );
+
+    cy.get('[data-testid="skeleton"]').should('have.length', 3);
+    cy.get('[data-testid="skeleton"]').first().should('have.class', 'w-full');
+    cy.get('[data-testid="skeleton"]').eq(1).should('have.class', 'w-3/4');
+    cy.get('[data-testid="skeleton"]').last().should('have.class', 'w-1/2');
+  });
+
+  it('renders card skeleton layout', () => {
+    cy.mount(
+      <div className="rounded-lg border p-4">
+        <div className="flex items-center space-x-4">
+          <Skeleton className="h-12 w-12 rounded-full" />
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+          </div>
+        </div>
+      </div>
+    );
+
+    cy.get('[data-testid="skeleton"]').should('have.length', 3);
+    cy.get('.rounded-full').should('exist');
+  });
+
+  it('supports different shapes', () => {
+    cy.mount(
+      <div className="space-y-4">
+        <Skeleton className="h-12 w-12 rounded-full" />
+        <Skeleton className="h-20 w-full rounded-lg" />
+        <Skeleton className="h-4 w-32" />
+      </div>
+    );
+
+    cy.get('[data-testid="skeleton"]').first().should('have.class', 'rounded-full');
+    cy.get('[data-testid="skeleton"]').eq(1).should('have.class', 'rounded-lg');
+  });
+
+  it('works for text loading', () => {
+    cy.mount(
+      <div className="space-y-2">
+        <h2 className="text-2xl font-bold">
+          <Skeleton className="h-8 w-48" />
+        </h2>
+        <p>
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-full" />
+          <Skeleton className="h-4 w-3/4" />
+        </p>
+      </div>
+    );
+
+    cy.get('h2').find('[data-testid="skeleton"]').should('exist');
+    cy.get('p').find('[data-testid="skeleton"]').should('have.length', 3);
+  });
+
+  it('maintains proper sizing', () => {
+    cy.mount(<Skeleton className="h-32 w-64" />);
+
+    cy.get('[data-testid="skeleton"]').should('have.class', 'h-32').should('have.class', 'w-64');
+  });
+
+  it('works for image placeholders', () => {
+    cy.mount(
+      <div className="grid grid-cols-3 gap-4">
+        <Skeleton className="aspect-square w-full rounded-lg" />
+        <Skeleton className="aspect-square w-full rounded-lg" />
+        <Skeleton className="aspect-square w-full rounded-lg" />
+      </div>
+    );
+
+    cy.get('[data-testid="skeleton"]').should('have.length', 3);
+    cy.get('[data-testid="skeleton"]').each(($el) => {
+      cy.wrap($el).should('have.class', 'aspect-square');
+    });
+  });
+
+  it('works for form field loading', () => {
+    cy.mount(
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-24" /> {/* Label */}
+          <Skeleton className="h-10 w-full rounded-md" /> {/* Input */}
+        </div>
+        <div className="space-y-2">
+          <Skeleton className="h-4 w-32" /> {/* Label */}
+          <Skeleton className="h-24 w-full rounded-md" /> {/* Textarea */}
+        </div>
+      </div>
+    );
+
+    cy.get('[data-testid="skeleton"]').should('have.length', 4);
+  });
+
+  it('supports data attributes', () => {
+    cy.mount(
+      <Skeleton data-testid="custom-skeleton" data-loading="true" className="h-20 w-full" />
+    );
+
+    cy.get('[data-testid="custom-skeleton"]')
+      .should('exist')
+      .should('have.attr', 'data-loading', 'true');
+  });
+
+  it('animation is present', () => {
+    cy.mount(<Skeleton />);
+
+    cy.get('[data-testid="skeleton"]').should('have.class', 'animate-pulse');
+  });
+
+  it('works in dark mode', () => {
+    cy.mount(
+      <div className="dark bg-gray-900 p-4">
+        <Skeleton className="h-20 w-full" />
+      </div>
+    );
+
+    cy.get('[data-testid="skeleton"]').should('be.visible');
+  });
+});

package/src/components/ui/skeleton.tsx

@@ -0,0 +1,17 @@
+import { cn } from '@/lib/utils';
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  'data-testid'?: string;
+}
+
+function Skeleton({ className, ...props }: SkeletonProps) {
+  return (
+    <div
+      className={cn('animate-pulse rounded-md bg-primary/10', className)}
+      data-testid={props['data-testid'] || 'skeleton'}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/ui/split-button.cy.tsx

@@ -0,0 +1,274 @@
+/// <reference types="cypress" />
+/// <reference path="../../../cypress/support/types.d.ts" />
+
+import React from 'react';
+import { SplitButton } from './split-button';
+
+describe('SplitButton Component', () => {
+  it('renders basic split button', () => {
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Save', onClick: () => {} }}
+        actions={[
+          { label: 'Save as Draft', onClick: () => {} },
+          { label: 'Save and Exit', onClick: () => {} },
+        ]}
+      />
+    );
+
+    cy.contains('button', 'Save').should('be.visible');
+    cy.get('button[aria-haspopup="menu"]').should('be.visible');
+  });
+
+  it('handles main button click', () => {
+    const onClick = cy.stub();
+
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Submit', onClick }}
+        actions={[{ label: 'Submit and Close', onClick: () => {} }]}
+      />
+    );
+
+    cy.contains('button', 'Submit').click();
+    cy.wrap(onClick).should('have.been.called');
+  });
+
+  it('opens dropdown menu', () => {
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Export', onClick: () => {} }}
+        actions={[
+          { label: 'Export as PDF', onClick: () => {} },
+          { label: 'Export as CSV', onClick: () => {} },
+          { label: 'Export as Excel', onClick: () => {} },
+        ]}
+      />
+    );
+
+    // Initially dropdown is closed
+    cy.contains('Export as PDF').should('not.exist');
+
+    // Click dropdown trigger
+    cy.get('button[aria-haspopup="menu"]').click();
+
+    // All options should be visible
+    cy.contains('Export as PDF').should('be.visible');
+    cy.contains('Export as CSV').should('be.visible');
+    cy.contains('Export as Excel').should('be.visible');
+  });
+
+  it('handles dropdown action selection', () => {
+    const mainAction = cy.stub();
+    const draftAction = cy.stub();
+    const templateAction = cy.stub();
+
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Save', onClick: mainAction }}
+        actions={[
+          { label: 'Save as Draft', onClick: draftAction },
+          { label: 'Save as Template', onClick: templateAction },
+        ]}
+      />
+    );
+
+    // Open dropdown
+    cy.get('button[aria-haspopup="menu"]').click();
+
+    // Select draft option
+    cy.contains('Save as Draft').click();
+    cy.wrap(draftAction).should('have.been.called');
+  });
+
+  it('supports different variants', () => {
+    cy.mount(
+      <div className="space-x-4">
+        <SplitButton
+          mainAction={{ label: 'Default', onClick: () => {} }}
+          actions={[{ label: 'Option', onClick: () => {} }]}
+          variant="default"
+        />
+        <SplitButton
+          mainAction={{ label: 'Destructive', onClick: () => {} }}
+          actions={[{ label: 'Delete All', onClick: () => {} }]}
+          variant="destructive"
+        />
+        <SplitButton
+          mainAction={{ label: 'Outline', onClick: () => {} }}
+          actions={[{ label: 'More', onClick: () => {} }]}
+          variant="outline"
+        />
+      </div>
+    );
+
+    cy.contains('button', 'Default').should('be.visible');
+    cy.contains('button', 'Destructive').should('have.class', 'bg-red-800');
+    cy.contains('button', 'Outline').should('have.class', 'border');
+  });
+
+  it('supports different sizes', () => {
+    cy.mount(
+      <div className="space-x-4">
+        <SplitButton
+          mainAction={{ label: 'Small', onClick: () => {} }}
+          actions={[{ label: 'Option', onClick: () => {} }]}
+          size="sm"
+        />
+        <SplitButton
+          mainAction={{ label: 'Default', onClick: () => {} }}
+          actions={[{ label: 'Option', onClick: () => {} }]}
+        />
+        <SplitButton
+          mainAction={{ label: 'Large', onClick: () => {} }}
+          actions={[{ label: 'Option', onClick: () => {} }]}
+          size="lg"
+        />
+      </div>
+    );
+
+    cy.contains('button', 'Small').should('have.class', 'h-8');
+    cy.contains('button', 'Large').should('have.class', 'h-10');
+  });
+
+  it('can be disabled', () => {
+    const onClick = cy.stub();
+
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Disabled', onClick }}
+        actions={[{ label: 'Option 1', onClick: () => {} }]}
+        disabled
+      />
+    );
+
+    // Both buttons should be disabled
+    cy.contains('button', 'Disabled').should('be.disabled');
+    cy.get('button[aria-haspopup="menu"]').should('be.disabled');
+
+    // Try clicking
+    cy.contains('button', 'Disabled').click({ force: true });
+    cy.wrap(onClick).should('not.have.been.called');
+  });
+
+  it('supports individually disabled actions', () => {
+    const enabledAction = cy.stub();
+    const disabledAction = cy.stub();
+
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Print', onClick: () => {} }}
+        actions={[
+          { label: 'Print Preview', onClick: enabledAction },
+          { label: 'Print to PDF', onClick: disabledAction, disabled: true },
+          { label: 'Print All', onClick: enabledAction },
+        ]}
+      />
+    );
+
+    cy.get('button[aria-haspopup="menu"]').click();
+
+    // Check disabled item exists
+    cy.contains('Print to PDF').should('exist');
+    // Disabled dropdown items behavior might vary, just verify enabled action works
+
+    // Click enabled item
+    cy.contains('Print All').click();
+    cy.wrap(enabledAction).should('have.been.called');
+  });
+
+  it('closes dropdown after selection', () => {
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Share', onClick: () => {} }}
+        actions={[
+          { label: 'Share via Email', onClick: () => {} },
+          { label: 'Share via Link', onClick: () => {} },
+        ]}
+      />
+    );
+
+    // Open dropdown
+    cy.get('button[aria-haspopup="menu"]').click();
+    cy.contains('Share via Email').should('be.visible');
+
+    // Select item
+    cy.contains('Share via Email').click();
+
+    // Dropdown should close
+    cy.contains('Share via Email').should('not.exist');
+  });
+
+  it('supports custom className', () => {
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Custom', onClick: () => {} }}
+        actions={[{ label: 'Option', onClick: () => {} }]}
+        className="custom-split-button"
+      />
+    );
+
+    cy.get('.custom-split-button').should('exist');
+  });
+
+  it('maintains visual consistency', () => {
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Consistent', onClick: () => {} }}
+        actions={[
+          { label: 'Option 1', onClick: () => {} },
+          { label: 'Option 2', onClick: () => {} },
+        ]}
+        variant="secondary"
+      />
+    );
+
+    // Both parts should have consistent styling
+    cy.contains('button', 'Consistent').should('be.visible');
+    cy.get('button[aria-haspopup="menu"]').should('be.visible');
+  });
+
+  it('supports icons in actions', () => {
+    cy.mount(
+      <SplitButton
+        mainAction={{
+          label: 'Save',
+          onClick: () => {},
+          icon: <span>💾</span>,
+        }}
+        actions={[
+          {
+            label: 'Draft',
+            onClick: () => {},
+            icon: <span>📝</span>,
+          },
+          {
+            label: 'Template',
+            onClick: () => {},
+            icon: <span>📋</span>,
+          },
+        ]}
+      />
+    );
+
+    cy.contains('💾').should('be.visible');
+    cy.get('button[aria-haspopup="menu"]').click();
+    cy.contains('📝').should('be.visible');
+    cy.contains('📋').should('be.visible');
+  });
+
+  it('supports destructive variant in dropdown', () => {
+    cy.mount(
+      <SplitButton
+        mainAction={{ label: 'Actions', onClick: () => {} }}
+        actions={[
+          { label: 'Edit', onClick: () => {} },
+          { label: 'Delete', onClick: () => {}, variant: 'destructive' },
+        ]}
+      />
+    );
+
+    cy.get('button[aria-haspopup="menu"]').click();
+    cy.contains('Delete').should('have.class', 'text-destructive');
+  });
+});

package/src/components/ui/split-button.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { ChevronDown } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface SplitButtonAction {
+  label: React.ReactNode;
+  onClick: () => void;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  variant?: 'default' | 'destructive';
+}
+
+export interface SplitButtonProps {
+  mainAction: SplitButtonAction;
+  actions: SplitButtonAction[];
+  variant?: 'default' | 'outline' | 'secondary' | 'ghost' | 'link' | 'destructive';
+  size?: 'default' | 'sm' | 'lg' | 'icon';
+  disabled?: boolean;
+  className?: string;
+  mainButtonClassName?: string;
+  dropdownButtonClassName?: string;
+}
+
+export const SplitButton = React.forwardRef<HTMLDivElement, SplitButtonProps>(
+  (
+    {
+      mainAction,
+      actions,
+      variant = 'default',
+      size = 'default',
+      disabled,
+      className,
+      mainButtonClassName,
+      dropdownButtonClassName,
+    },
+    ref
+  ) => {
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const [menuWidth, setMenuWidth] = React.useState<number>();
+
+    React.useImperativeHandle(ref, () => containerRef.current!, []);
+
+    React.useLayoutEffect(() => {
+      if (containerRef.current) {
+        setMenuWidth(containerRef.current.offsetWidth);
+      }
+    }, [actions.length, mainAction.label]);
+
+    return (
+      <div ref={containerRef} className={cn('flex w-full', className)}>
+        <Button
+          type="button"
+          variant={variant}
+          size={size}
+          onClick={mainAction.onClick}
+          disabled={disabled || mainAction.disabled}
+          className={cn(
+            'rounded-r-none flex-1',
+            variant === 'destructive' ? 'border-r border-red-700' : 'border-r-0',
+            mainButtonClassName
+          )}
+        >
+          {mainAction.icon && <span className="mr-2">{mainAction.icon}</span>}
+          {mainAction.label}
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              type="button"
+              variant={variant}
+              size={size}
+              disabled={disabled}
+              className={cn('rounded-l-none px-2 flex-shrink-0', dropdownButtonClassName)}
+            >
+              <ChevronDown className="h-4 w-4" />
+              <span className="sr-only">More options</span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" style={{ width: menuWidth }}>
+            {actions.map((action, index) => (
+              <React.Fragment key={index}>
+                <DropdownMenuItem
+                  onClick={action.onClick}
+                  disabled={action.disabled}
+                  className={cn(
+                    action.variant === 'destructive' &&
+                      'text-destructive focus:text-destructive hover:bg-red-50 dark:hover:bg-red-950/50'
+                  )}
+                >
+                  {action.icon}
+                  {action.label}
+                </DropdownMenuItem>
+                {index < actions.length - 1 && <DropdownMenuSeparator />}
+              </React.Fragment>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  }
+);
+
+SplitButton.displayName = 'SplitButton';

package/src/components/ui/switch.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+
+import { cn } from '@/lib/utils';
+
+function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-4 w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer',
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background dark:data-[state=unchecked]:bg-primary-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block h-2.5 w-2.5 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%+10px)] data-[state=unchecked]:translate-x-0'
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };