xertica-ui 2.2.1 → 2.4.0

package/components/ui/toggle/toggle.test.tsx

@@ -1,32 +1,32 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { Toggle } from './toggle';
-import React from 'react';
-
-describe('Toggle', () => {
-  it('renders correctly', () => {
-    render(<Toggle>Toggle Me</Toggle>);
-    expect(screen.getByText('Toggle Me')).toBeInTheDocument();
-  });
-
-  it('toggles state on click', () => {
-    const onPressedChange = vi.fn();
-    render(<Toggle onPressedChange={onPressedChange}>Toggle</Toggle>);
-    const toggle = screen.getByRole('button');
-
-    fireEvent.click(toggle);
-    expect(onPressedChange).toHaveBeenCalledWith(true);
-  });
-
-  it('reflects pressed state', () => {
-    render(<Toggle pressed={true}>Pressed</Toggle>);
-    const toggle = screen.getByRole('button');
-    expect(toggle).toHaveAttribute('data-state', 'on');
-  });
-
-  it('is disabled when disabled prop is true', () => {
-    render(<Toggle disabled>Disabled</Toggle>);
-    const toggle = screen.getByRole('button');
-    expect(toggle).toBeDisabled();
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Toggle } from './toggle';
+import React from 'react';
+
+describe('Toggle', () => {
+  it('renders correctly', () => {
+    render(<Toggle>Toggle Me</Toggle>);
+    expect(screen.getByText('Toggle Me')).toBeInTheDocument();
+  });
+
+  it('toggles state on click', () => {
+    const onPressedChange = vi.fn();
+    render(<Toggle onPressedChange={onPressedChange}>Toggle</Toggle>);
+    const toggle = screen.getByRole('button');
+
+    fireEvent.click(toggle);
+    expect(onPressedChange).toHaveBeenCalledWith(true);
+  });
+
+  it('reflects pressed state', () => {
+    render(<Toggle pressed={true}>Pressed</Toggle>);
+    const toggle = screen.getByRole('button');
+    expect(toggle).toHaveAttribute('data-state', 'on');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<Toggle disabled>Disabled</Toggle>);
+    const toggle = screen.getByRole('button');
+    expect(toggle).toBeDisabled();
+  });
+});

package/components/ui/toggle/toggle.tsx

@@ -1,55 +1,55 @@
-'use client';
-
-import * as React from 'react';
-import * as TogglePrimitive from '@radix-ui/react-toggle';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../shared/utils';
-
-const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
-  {
-    variants: {
-      variant: {
-        default: 'bg-transparent',
-        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
-      },
-      size: {
-        default: 'h-9 px-2 min-w-9',
-        sm: 'h-8 px-1.5 min-w-8',
-        lg: 'h-10 px-2.5 min-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-);
-
-/**
- * Two-state toggleable button with native Radix state management.
- *
- * @description
- * Differs from `<Button>` by maintaining its pressed/unpressed state internally via
- * `data-state="on"|"off"`. Ideal for toolbars (Bold, Italic, Underline formatting controls).
- *
- * @ai-rules
- * 1. Do NOT use React `useState` locally to flip variants — Toggle already manages state internally.
- * 2. Use `pressed` / `onPressedChange` props to control state externally when needed.
- */
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    data-slot="toggle"
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
+'use client';
+
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../shared/utils';
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+      },
+      size: {
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+/**
+ * Two-state toggleable button with native Radix state management.
+ *
+ * @description
+ * Differs from `<Button>` by maintaining its pressed/unpressed state internally via
+ * `data-state="on"|"off"`. Ideal for toolbars (Bold, Italic, Underline formatting controls).
+ *
+ * @ai-rules
+ * 1. Do NOT use React `useState` locally to flip variants — Toggle already manages state internally.
+ * 2. Use `pressed` / `onPressedChange` props to control state externally when needed.
+ */
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    data-slot="toggle"
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/components/ui/toggle-group/index.ts

@@ -1 +1 @@
-export * from './toggle-group';
+export * from './toggle-group';

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

@@ -1,66 +1,66 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ToggleGroup, ToggleGroupItem } from './toggle-group';
-import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
-import React from 'react';
-
-const meta: Meta<typeof ToggleGroup> = {
-  title: 'UI/ToggleGroup',
-  component: ToggleGroup,
-  render: args => <ToggleGroup {...args} />,
-  argTypes: {
-    type: {
-      control: 'select',
-      options: ['single', 'multiple'],
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'outline'],
-    },
-    size: {
-      control: 'select',
-      options: ['default', 'sm', 'lg'],
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ToggleGroup>;
-
-export const Single: Story = {
-  args: {
-    type: 'single',
-    defaultValue: 'center',
-  },
-  render: args => (
-    <ToggleGroup {...args}>
-      <ToggleGroupItem value="left" aria-label="Align left">
-        <AlignLeft className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="center" aria-label="Align center">
-        <AlignCenter className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="right" aria-label="Align right">
-        <AlignRight className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
-
-export const Multiple: Story = {
-  args: {
-    type: 'multiple',
-  },
-  render: args => (
-    <ToggleGroup {...args}>
-      <ToggleGroupItem value="bold" aria-label="Toggle bold">
-        <Bold className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="italic" aria-label="Toggle italic">
-        <Italic className="h-4 w-4" />
-      </ToggleGroupItem>
-      <ToggleGroupItem value="underline" aria-label="Toggle underline">
-        <Underline className="h-4 w-4" />
-      </ToggleGroupItem>
-    </ToggleGroup>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from 'lucide-react';
+import React from 'react';
+
+const meta: Meta<typeof ToggleGroup> = {
+  title: 'UI/ToggleGroup',
+  component: ToggleGroup,
+  render: args => <ToggleGroup {...args} />,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['single', 'multiple'],
+    },
+    variant: {
+      control: 'select',
+      options: ['default', 'outline'],
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ToggleGroup>;
+
+export const Single: Story = {
+  args: {
+    type: 'single',
+    defaultValue: 'center',
+  },
+  render: args => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="left" aria-label="Align left">
+        <AlignLeft className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Align center">
+        <AlignCenter className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Align right">
+        <AlignRight className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: 'multiple',
+  },
+  render: args => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="bold" aria-label="Toggle bold">
+        <Bold className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="italic" aria-label="Toggle italic">
+        <Italic className="h-4 w-4" />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="underline" aria-label="Toggle underline">
+        <Underline className="h-4 w-4" />
+      </ToggleGroupItem>
+    </ToggleGroup>
+  ),
+};

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

@@ -1,47 +1,47 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { ToggleGroup, ToggleGroupItem } from './toggle-group';
-import React from 'react';
-
-describe('ToggleGroup', () => {
-  it('renders correctly with items', () => {
-    render(
-      <ToggleGroup type="single">
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    );
-
-    expect(screen.getByText('A')).toBeInTheDocument();
-    expect(screen.getByText('B')).toBeInTheDocument();
-  });
-
-  it('handles single selection', () => {
-    const onValueChange = vi.fn();
-    render(
-      <ToggleGroup type="single" onValueChange={onValueChange}>
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    );
-
-    fireEvent.click(screen.getByText('B'));
-    expect(onValueChange).toHaveBeenCalledWith('b');
-  });
-
-  it('handles multiple selection', () => {
-    const onValueChange = vi.fn();
-    render(
-      <ToggleGroup type="multiple" onValueChange={onValueChange}>
-        <ToggleGroupItem value="a">A</ToggleGroupItem>
-        <ToggleGroupItem value="b">B</ToggleGroupItem>
-      </ToggleGroup>
-    );
-
-    fireEvent.click(screen.getByText('A'));
-    expect(onValueChange).toHaveBeenCalledWith(['a']);
-
-    fireEvent.click(screen.getByText('B'));
-    expect(onValueChange).toHaveBeenCalledWith(['a', 'b']);
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { ToggleGroup, ToggleGroupItem } from './toggle-group';
+import React from 'react';
+
+describe('ToggleGroup', () => {
+  it('renders correctly with items', () => {
+    render(
+      <ToggleGroup type="single">
+        <ToggleGroupItem value="a">A</ToggleGroupItem>
+        <ToggleGroupItem value="b">B</ToggleGroupItem>
+      </ToggleGroup>
+    );
+
+    expect(screen.getByText('A')).toBeInTheDocument();
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+
+  it('handles single selection', () => {
+    const onValueChange = vi.fn();
+    render(
+      <ToggleGroup type="single" onValueChange={onValueChange}>
+        <ToggleGroupItem value="a">A</ToggleGroupItem>
+        <ToggleGroupItem value="b">B</ToggleGroupItem>
+      </ToggleGroup>
+    );
+
+    fireEvent.click(screen.getByText('B'));
+    expect(onValueChange).toHaveBeenCalledWith('b');
+  });
+
+  it('handles multiple selection', () => {
+    const onValueChange = vi.fn();
+    render(
+      <ToggleGroup type="multiple" onValueChange={onValueChange}>
+        <ToggleGroupItem value="a">A</ToggleGroupItem>
+        <ToggleGroupItem value="b">B</ToggleGroupItem>
+      </ToggleGroup>
+    );
+
+    fireEvent.click(screen.getByText('A'));
+    expect(onValueChange).toHaveBeenCalledWith(['a']);
+
+    fireEvent.click(screen.getByText('B'));
+    expect(onValueChange).toHaveBeenCalledWith(['a', 'b']);
+  });
+});

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

@@ -1,79 +1,79 @@
-'use client';
-
-import * as React from 'react';
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
-import { type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../shared/utils';
-import { toggleVariants } from '../toggle';
-
-const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
-  size: 'default',
-  variant: 'default',
-});
-
-/**
- * Visual group of two-state toggle buttons (Button Group / Toolbar).
- *
- * @description
- * Allows single or multiple active selection from a compact group of toggle buttons.
- * Handles shared variant/size context for all child `<ToggleGroupItem>` components.
- *
- * @ai-rules
- * 1. `type` is REQUIRED — must be `"single"` (exclusive) or `"multiple"` (any number active).
- * 2. In `type="single"`, ToggleGroup guarantees exclusive selection automatically.
- * 3. Control value via `value`/`onValueChange` — value is a `string` (single) or `string[]` (multiple).
- */
-const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    data-slot="toggle-group"
-    data-variant={variant}
-    data-size={size}
-    className={cn(
-      'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
-      className
-    )}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-));
-
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-
-const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
->(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
-
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
-});
-
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
-
-export { ToggleGroup, ToggleGroupItem };
+'use client';
+
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../shared/utils';
+import { toggleVariants } from '../toggle';
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: 'default',
+  variant: 'default',
+});
+
+/**
+ * Visual group of two-state toggle buttons (Button Group / Toolbar).
+ *
+ * @description
+ * Allows single or multiple active selection from a compact group of toggle buttons.
+ * Handles shared variant/size context for all child `<ToggleGroupItem>` components.
+ *
+ * @ai-rules
+ * 1. `type` is REQUIRED — must be `"single"` (exclusive) or `"multiple"` (any number active).
+ * 2. In `type="single"`, ToggleGroup guarantees exclusive selection automatically.
+ * 3. Control value via `value`/`onValueChange` — value is a `string` (single) or `string[]` (multiple).
+ */
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    data-slot="toggle-group"
+    data-variant={variant}
+    data-size={size}
+    className={cn(
+      'group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs',
+      className
+    )}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        'min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };

package/components/ui/tooltip/index.ts

@@ -1 +1 @@
-export * from './tooltip';
+export * from './tooltip';