xertica-ui 2.2.1 → 2.4.0

package/components/shared/use-mobile.ts

@@ -1,36 +1,36 @@
-import * as React from 'react';
-
-const MOBILE_BREAKPOINT = 768;
-
-export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
-
-  React.useEffect(() => {
-    if (typeof window === 'undefined') {
-      setIsMobile(false);
-      return;
-    }
-
-    const mql = window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    };
-
-    if (mql) {
-      mql.addEventListener('change', onChange);
-    }
-
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-
-    return () => {
-      if (mql) {
-        mql.removeEventListener('change', onChange);
-      }
-    };
-  }, []);
-
-  return !!isMobile;
-}
-
-// Alias for compatibility
-export const useMobile = useIsMobile;
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      setIsMobile(false);
+      return;
+    }
+
+    const mql = window.matchMedia?.(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+
+    if (mql) {
+      mql.addEventListener('change', onChange);
+    }
+
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+    return () => {
+      if (mql) {
+        mql.removeEventListener('change', onChange);
+      }
+    };
+  }, []);
+
+  return !!isMobile;
+}
+
+// Alias for compatibility
+export const useMobile = useIsMobile;

package/components/shared/utils.test.ts

@@ -1,14 +1,14 @@
-import { describe, it, expect } from 'vitest';
-import { cn } from './utils';
-
-describe('shared/utils/cn', () => {
-  it('merges class names correctly', () => {
-    expect(cn('a', 'b')).toBe('a b');
-    expect(cn('a', { b: true, c: false })).toBe('a b');
-  });
-
-  it('handles tailwind class conflicts', () => {
-    // This assumes cn uses twMerge
-    expect(cn('px-2 py-2', 'p-4')).toBe('p-4');
-  });
-});
+import { describe, it, expect } from 'vitest';
+import { cn } from './utils';
+
+describe('shared/utils/cn', () => {
+  it('merges class names correctly', () => {
+    expect(cn('a', 'b')).toBe('a b');
+    expect(cn('a', { b: true, c: false })).toBe('a b');
+  });
+
+  it('handles tailwind class conflicts', () => {
+    // This assumes cn uses twMerge
+    expect(cn('px-2 py-2', 'p-4')).toBe('p-4');
+  });
+});

package/components/shared/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/components/ui/accordion/accordion.stories.tsx

@@ -1,105 +1,105 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from 'storybook/test';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
-import React from 'react';
-
-const AccordionStoryFrame = ({ children }: { children: React.ReactNode }) => (
-  <div className="w-[min(calc(100vw-48px),500px)] min-w-[320px]">{children}</div>
-);
-
-const meta: Meta<typeof Accordion> = {
-  title: 'UI/Accordion',
-  component: Accordion,
-  decorators: [
-    Story => (
-      <AccordionStoryFrame>
-        <Story />
-      </AccordionStoryFrame>
-    ),
-  ],
-  render: args => <Accordion {...args} />,
-  argTypes: {
-    type: {
-      control: 'radio',
-      options: ['single', 'multiple'],
-    },
-    collapsible: {
-      control: 'boolean',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Accordion>;
-
-export const Single: Story = {
-  args: {
-    type: 'single',
-    collapsible: true,
-  },
-  render: args => (
-    <Accordion {...args} className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it styled?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It comes with default styles that matches the other components&apos; aesthetic.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>
-          Yes. It&apos;s animated by default, but you can disable it if you prefer.
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const Multiple: Story = {
-  args: {
-    type: 'multiple',
-  },
-  render: args => (
-    <Accordion {...args} className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Section 1</AccordionTrigger>
-        <AccordionContent>
-          Content for section 1. Multiple sections can be open at once.
-        </AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Section 2</AccordionTrigger>
-        <AccordionContent>Content for section 2. Try opening both!</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-};
-
-export const ExpandCollapse: Story = {
-  args: { type: 'single', collapsible: true },
-  render: args => (
-    <Accordion {...args} className="w-full">
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Is it accessible?</AccordionTrigger>
-        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Is it animated?</AccordionTrigger>
-        <AccordionContent>Yes. It is animated by default.</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  ),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const triggers = canvas.getAllByRole('button');
-    await expect(triggers[0]).toHaveAttribute('aria-expanded', 'false');
-    await userEvent.click(triggers[0]);
-    await expect(triggers[0]).toHaveAttribute('aria-expanded', 'true');
-    await userEvent.click(triggers[0]);
-    await expect(triggers[0]).toHaveAttribute('aria-expanded', 'false');
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from 'storybook/test';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './accordion';
+import React from 'react';
+
+const AccordionStoryFrame = ({ children }: { children: React.ReactNode }) => (
+  <div className="w-[min(calc(100vw-48px),500px)] min-w-[320px]">{children}</div>
+);
+
+const meta: Meta<typeof Accordion> = {
+  title: 'UI/Accordion',
+  component: Accordion,
+  decorators: [
+    Story => (
+      <AccordionStoryFrame>
+        <Story />
+      </AccordionStoryFrame>
+    ),
+  ],
+  render: args => <Accordion {...args} />,
+  argTypes: {
+    type: {
+      control: 'radio',
+      options: ['single', 'multiple'],
+    },
+    collapsible: {
+      control: 'boolean',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Accordion>;
+
+export const Single: Story = {
+  args: {
+    type: 'single',
+    collapsible: true,
+  },
+  render: args => (
+    <Accordion {...args} className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that matches the other components&apos; aesthetic.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It&apos;s animated by default, but you can disable it if you prefer.
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  args: {
+    type: 'multiple',
+  },
+  render: args => (
+    <Accordion {...args} className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Section 1</AccordionTrigger>
+        <AccordionContent>
+          Content for section 1. Multiple sections can be open at once.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Section 2</AccordionTrigger>
+        <AccordionContent>Content for section 2. Try opening both!</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const ExpandCollapse: Story = {
+  args: { type: 'single', collapsible: true },
+  render: args => (
+    <Accordion {...args} className="w-full">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>Yes. It is animated by default.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const triggers = canvas.getAllByRole('button');
+    await expect(triggers[0]).toHaveAttribute('aria-expanded', 'false');
+    await userEvent.click(triggers[0]);
+    await expect(triggers[0]).toHaveAttribute('aria-expanded', 'true');
+    await userEvent.click(triggers[0]);
+    await expect(triggers[0]).toHaveAttribute('aria-expanded', 'false');
+  },
+};

package/components/ui/accordion/accordion.test.tsx

@@ -1,59 +1,59 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion';
-import React from 'react';
-
-describe('Accordion', () => {
-  it('renders correctly', () => {
-    render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Is it accessible?</AccordionTrigger>
-          <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-
-    expect(screen.getByText('Is it accessible?')).toBeInTheDocument();
-  });
-
-  it('expands and collapses on click', async () => {
-    render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Toggle</AccordionTrigger>
-          <AccordionContent>Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-
-    const trigger = screen.getByText('Toggle');
-
-    // Initially closed
-    expect(trigger).toHaveAttribute('data-state', 'closed');
-
-    fireEvent.click(trigger);
-
-    // After click should be open
-    expect(trigger).toHaveAttribute('data-state', 'open');
-
-    // Now content should be visible/available
-    expect(screen.getByText('Content')).toBeInTheDocument();
-  });
-
-  it('has correct data-slot attributes', () => {
-    const { container } = render(
-      <Accordion type="single">
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Trigger</AccordionTrigger>
-          <AccordionContent>Content</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-
-    expect(container.querySelector('[data-slot="accordion"]')).toBeInTheDocument();
-    expect(container.querySelector('[data-slot="accordion-item"]')).toBeInTheDocument();
-    expect(container.querySelector('[data-slot="accordion-trigger"]')).toBeInTheDocument();
-    expect(container.querySelector('[data-slot="accordion-content"]')).toBeInTheDocument();
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion';
+import React from 'react';
+
+describe('Accordion', () => {
+  it('renders correctly', () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Is it accessible?</AccordionTrigger>
+          <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    expect(screen.getByText('Is it accessible?')).toBeInTheDocument();
+  });
+
+  it('expands and collapses on click', async () => {
+    render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Toggle</AccordionTrigger>
+          <AccordionContent>Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    const trigger = screen.getByText('Toggle');
+
+    // Initially closed
+    expect(trigger).toHaveAttribute('data-state', 'closed');
+
+    fireEvent.click(trigger);
+
+    // After click should be open
+    expect(trigger).toHaveAttribute('data-state', 'open');
+
+    // Now content should be visible/available
+    expect(screen.getByText('Content')).toBeInTheDocument();
+  });
+
+  it('has correct data-slot attributes', () => {
+    const { container } = render(
+      <Accordion type="single">
+        <AccordionItem value="item-1">
+          <AccordionTrigger>Trigger</AccordionTrigger>
+          <AccordionContent>Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    expect(container.querySelector('[data-slot="accordion"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="accordion-item"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="accordion-trigger"]')).toBeInTheDocument();
+    expect(container.querySelector('[data-slot="accordion-content"]')).toBeInTheDocument();
+  });
+});

package/components/ui/accordion/accordion.tsx

@@ -1,77 +1,77 @@
-'use client';
-
-import * as React from 'react';
-import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { ChevronDownIcon } from 'lucide-react';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Stacked collapsible disclosure sections.
- *
- * @description
- * Based on Radix UI Accordion for full keyboard and ARIA accessibility.
- * Supports `type="single"` (only one open at a time) and `type="multiple"`
- * (any number can be open simultaneously).
- *
- * @ai-rules
- * 1. `AccordionItem` REQUIRES the `value` prop — without it, open/close state breaks.
- * 2. In `type="single"`, pass the `collapsible` prop to allow clicking the active item to close it.
- * 3. Use `AccordionTrigger` + `AccordionContent` as the fixed internal structure of each item.
- */
-function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn('border-b last:border-b-0', className)}
-      {...props}
-    />
-  );
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  );
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn('pt-0 pb-4', className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  );
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+'use client';
+
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Stacked collapsible disclosure sections.
+ *
+ * @description
+ * Based on Radix UI Accordion for full keyboard and ARIA accessibility.
+ * Supports `type="single"` (only one open at a time) and `type="multiple"`
+ * (any number can be open simultaneously).
+ *
+ * @ai-rules
+ * 1. `AccordionItem` REQUIRES the `value` prop — without it, open/close state breaks.
+ * 2. In `type="single"`, pass the `collapsible` prop to allow clicking the active item to close it.
+ * 3. Use `AccordionTrigger` + `AccordionContent` as the fixed internal structure of each item.
+ */
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/components/ui/accordion/index.ts

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