xertica-ui 2.2.1 → 2.4.0

package/components/ui/dialog/dialog.tsx

@@ -1,189 +1,189 @@
-'use client';
-
-import * as React from 'react';
-import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from 'lucide-react';
-import { cva, type VariantProps } from 'class-variance-authority';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Accessible modal dialog for focused user interactions.
- *
- * @description
- * Use for creation forms ("New Entity"), restricted configuration panels,
- * or large full-screen alerts. Supports multiple content sizes via the `size` prop.
- *
- * @ai-rules
- * 1. Always compose in order: `Dialog > DialogTrigger > DialogContent > (DialogHeader, body, DialogFooter)`.
- * 2. `<DialogTrigger>` requires `asChild` when wrapping a `<Button>` component.
- * 3. NEVER use the native HTML `<dialog>` element.
- * 4. Use `showClose={false}` only when you provide your own close mechanism inside `DialogFooter`.
- * 5. For long content, wrap the middle section in `<DialogBody>` — it scrolls independently while header and footer stay pinned.
- * 6. Use `size` prop for width: `sm` (384px) → `md` → `lg` (default, 512px) → `xl` → `2xl` → `3xl` → `4xl` → `5xl` → `full` (viewport).
- */
-function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
-}
-
-function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
-}
-
-function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
-}
-
-function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
-}
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    data-slot="dialog-overlay"
-    className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-sm',
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-
-const dialogVariants = cva(
-  'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full translate-x-[-50%] translate-y-[-50%] border shadow-elevation-sm duration-200 rounded-[var(--radius-card)] overflow-hidden max-h-[calc(100dvh-2rem)]',
-  {
-    variants: {
-      size: {
-        sm: 'max-w-sm',
-        md: 'max-w-md',
-        lg: 'max-w-lg',
-        xl: 'max-w-xl',
-        '2xl': 'max-w-2xl',
-        '3xl': 'max-w-3xl',
-        '4xl': 'max-w-4xl',
-        '5xl': 'max-w-5xl',
-        full: 'max-w-[calc(100vw-2rem)] h-[calc(100dvh-2rem)]',
-      },
-    },
-    defaultVariants: {
-      size: 'lg',
-    },
-  }
-);
-
-export interface DialogContentProps
-  extends
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
-    VariantProps<typeof dialogVariants> {
-  showClose?: boolean;
-}
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  DialogContentProps
->(({ className, children, size, showClose = true, ...props }, ref) => (
-  <DialogPortal data-slot="dialog-portal">
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      data-slot="dialog-content"
-      className={cn(dialogVariants({ size }), className)}
-      {...props}
-    >
-      {/* Scrollable inner area — close button stays pinned above it */}
-      <div className="flex flex-col gap-4 p-6 overflow-y-auto flex-1 min-h-0">{children}</div>
-      {showClose && (
-        <DialogPrimitive.Close className="absolute top-4 right-4 z-10 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
-          <XIcon />
-          <span className="sr-only">Close</span>
-        </DialogPrimitive.Close>
-      )}
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-header"
-      className={cn('flex flex-col gap-2 text-left shrink-0', className)}
-      {...props}
-    />
-  );
-}
-
-/**
- * Scrollable content area between `DialogHeader` and `DialogFooter`.
- *
- * @description
- * When used, the header and footer stay pinned while only the body scrolls.
- * Wrap long form content or lists inside `DialogBody` to prevent the footer
- * from being pushed out of view.
- *
- * Without `DialogBody`, the entire inner area scrolls as a single block.
- */
-function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-body"
-      className={cn('flex-1 overflow-y-auto min-h-0 -mx-6 px-6', className)}
-      {...props}
-    />
-  );
-}
-
-function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="dialog-footer"
-      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end shrink-0', className)}
-      {...props}
-    />
-  );
-}
-
-function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      className={cn(
-        'text-foreground font-semibold leading-tight text-[length:var(--text-h4)]',
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-function DialogDescription({
-  className,
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      className={cn('text-muted-foreground', className)}
-      {...props}
-    />
-  );
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogBody,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-};
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Accessible modal dialog for focused user interactions.
+ *
+ * @description
+ * Use for creation forms ("New Entity"), restricted configuration panels,
+ * or large full-screen alerts. Supports multiple content sizes via the `size` prop.
+ *
+ * @ai-rules
+ * 1. Always compose in order: `Dialog > DialogTrigger > DialogContent > (DialogHeader, body, DialogFooter)`.
+ * 2. `<DialogTrigger>` requires `asChild` when wrapping a `<Button>` component.
+ * 3. NEVER use the native HTML `<dialog>` element.
+ * 4. Use `showClose={false}` only when you provide your own close mechanism inside `DialogFooter`.
+ * 5. For long content, wrap the middle section in `<DialogBody>` — it scrolls independently while header and footer stay pinned.
+ * 6. Use `size` prop for width: `sm` (384px) → `md` → `lg` (default, 512px) → `xl` → `2xl` → `3xl` → `4xl` → `5xl` → `full` (viewport).
+ */
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    data-slot="dialog-overlay"
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/40 backdrop-blur-sm',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const dialogVariants = cva(
+  'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex flex-col w-full translate-x-[-50%] translate-y-[-50%] border shadow-elevation-sm duration-200 rounded-[var(--radius-card)] overflow-hidden max-h-[calc(100dvh-2rem)]',
+  {
+    variants: {
+      size: {
+        sm: 'max-w-sm',
+        md: 'max-w-md',
+        lg: 'max-w-lg',
+        xl: 'max-w-xl',
+        '2xl': 'max-w-2xl',
+        '3xl': 'max-w-3xl',
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl',
+        full: 'max-w-[calc(100vw-2rem)] h-[calc(100dvh-2rem)]',
+      },
+    },
+    defaultVariants: {
+      size: 'lg',
+    },
+  }
+);
+
+export interface DialogContentProps
+  extends
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof dialogVariants> {
+  showClose?: boolean;
+}
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(({ className, children, size, showClose = true, ...props }, ref) => (
+  <DialogPortal data-slot="dialog-portal">
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      data-slot="dialog-content"
+      className={cn(dialogVariants({ size }), className)}
+      {...props}
+    >
+      {/* Scrollable inner area — close button stays pinned above it */}
+      <div className="flex flex-col gap-4 p-6 overflow-y-auto flex-1 min-h-0">{children}</div>
+      {showClose && (
+        <DialogPrimitive.Close className="absolute top-4 right-4 z-10 rounded-full p-2 opacity-70 transition-all hover:opacity-100 hover:bg-accent focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-left shrink-0', className)}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Scrollable content area between `DialogHeader` and `DialogFooter`.
+ *
+ * @description
+ * When used, the header and footer stay pinned while only the body scrolls.
+ * Wrap long form content or lists inside `DialogBody` to prevent the footer
+ * from being pushed out of view.
+ *
+ * Without `DialogBody`, the entire inner area scrolls as a single block.
+ */
+function DialogBody({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-body"
+      className={cn('flex-1 overflow-y-auto min-h-0 -mx-6 px-6', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end shrink-0', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn(
+        'text-foreground font-semibold leading-tight text-[length:var(--text-h4)]',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogBody,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/components/ui/dialog/index.ts

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

package/components/ui/drawer/drawer.stories.tsx

@@ -1,71 +1,71 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  Drawer,
-  DrawerClose,
-  DrawerContent,
-  DrawerDescription,
-  DrawerFooter,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerTrigger,
-} from './drawer';
-import { Button } from '../button';
-import React from 'react';
-
-const meta: Meta<typeof Drawer> = {
-  title: 'UI/Drawer',
-  component: Drawer,
-  render: args => <Drawer {...args} />,
-  argTypes: {
-    open: {
-      control: 'boolean',
-      description: 'Whether the drawer is open.',
-    },
-    dismissible: {
-      control: 'boolean',
-      description: 'Whether the drawer can be dismissed by clicking outside.',
-      defaultValue: true,
-    },
-    direction: {
-      control: 'select',
-      options: ['top', 'bottom', 'left', 'right'],
-      description: 'The direction the drawer slides from.',
-      defaultValue: 'bottom',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Drawer>;
-
-export const Default: Story = {
-  render: args => (
-    <Drawer {...args}>
-      <DrawerTrigger asChild>
-        <Button variant="outline">Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <div className="mx-auto w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle>Move Goal</DrawerTitle>
-            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
-          </DrawerHeader>
-          <div className="p-4 pb-0">
-            <div className="flex items-center justify-center space-x-2">
-              <div className="flex-1 text-center">
-                <div className="text-7xl font-bold tracking-tighter">350</div>
-                <div className="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
-              </div>
-            </div>
-          </div>
-          <DrawerFooter>
-            <Button>Submit</Button>
-            <DrawerClose asChild>
-              <Button variant="outline">Cancel</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from './drawer';
+import { Button } from '../button';
+import React from 'react';
+
+const meta: Meta<typeof Drawer> = {
+  title: 'UI/Drawer',
+  component: Drawer,
+  render: args => <Drawer {...args} />,
+  argTypes: {
+    open: {
+      control: 'boolean',
+      description: 'Whether the drawer is open.',
+    },
+    dismissible: {
+      control: 'boolean',
+      description: 'Whether the drawer can be dismissed by clicking outside.',
+      defaultValue: true,
+    },
+    direction: {
+      control: 'select',
+      options: ['top', 'bottom', 'left', 'right'],
+      description: 'The direction the drawer slides from.',
+      defaultValue: 'bottom',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Drawer>;
+
+export const Default: Story = {
+  render: args => (
+    <Drawer {...args}>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move Goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <div className="p-4 pb-0">
+            <div className="flex items-center justify-center space-x-2">
+              <div className="flex-1 text-center">
+                <div className="text-7xl font-bold tracking-tighter">350</div>
+                <div className="text-[0.70rem] uppercase text-muted-foreground">Calories/day</div>
+              </div>
+            </div>
+          </div>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  ),
+};

package/components/ui/drawer/drawer.test.tsx

@@ -1,67 +1,67 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import {
-  Drawer,
-  DrawerTrigger,
-  DrawerContent,
-  DrawerHeader,
-  DrawerTitle,
-  DrawerDescription,
-  DrawerFooter,
-} from './drawer';
-import React from 'react';
-
-// Mocking Vaul Portal
-vi.mock('vaul', async () => {
-  const actual = await vi.importActual<typeof import('vaul')>('vaul');
-  return {
-    ...actual,
-    Drawer: {
-      ...(actual.Drawer as object),
-      Portal: ({ children }: { children: React.ReactNode }) => (
-        <div data-testid="portal">{children}</div>
-      ),
-    },
-  };
-});
-
-describe('Drawer', () => {
-  it('renders correctly', () => {
-    render(
-      <Drawer>
-        <DrawerTrigger>Open Drawer</DrawerTrigger>
-        <DrawerContent>
-          <DrawerHeader>
-            <DrawerTitle>Title</DrawerTitle>
-            <DrawerDescription>Description</DrawerDescription>
-          </DrawerHeader>
-          <DrawerFooter>Footer</DrawerFooter>
-        </DrawerContent>
-      </Drawer>
-    );
-
-    expect(screen.getByText('Open Drawer')).toBeInTheDocument();
-  });
-
-  it('shows content when open is true', () => {
-    render(
-      <Drawer open={true}>
-        <DrawerTrigger>Open</DrawerTrigger>
-        <DrawerContent>
-          <DrawerTitle>Drawer Content</DrawerTitle>
-        </DrawerContent>
-      </Drawer>
-    );
-
-    expect(screen.getByText('Drawer Content')).toBeInTheDocument();
-  });
-
-  it('has correct data-slot attributes', () => {
-    const { container } = render(
-      <Drawer>
-        <DrawerTrigger>Open</DrawerTrigger>
-      </Drawer>
-    );
-    expect(container.querySelector('[data-slot="drawer-trigger"]')).toBeInTheDocument();
-  });
-});
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+} from './drawer';
+import React from 'react';
+
+// Mocking Vaul Portal
+vi.mock('vaul', async () => {
+  const actual = await vi.importActual<typeof import('vaul')>('vaul');
+  return {
+    ...actual,
+    Drawer: {
+      ...(actual.Drawer as object),
+      Portal: ({ children }: { children: React.ReactNode }) => (
+        <div data-testid="portal">{children}</div>
+      ),
+    },
+  };
+});
+
+describe('Drawer', () => {
+  it('renders correctly', () => {
+    render(
+      <Drawer>
+        <DrawerTrigger>Open Drawer</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+            <DrawerDescription>Description</DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter>Footer</DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    );
+
+    expect(screen.getByText('Open Drawer')).toBeInTheDocument();
+  });
+
+  it('shows content when open is true', () => {
+    render(
+      <Drawer open={true}>
+        <DrawerTrigger>Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerTitle>Drawer Content</DrawerTitle>
+        </DrawerContent>
+      </Drawer>
+    );
+
+    expect(screen.getByText('Drawer Content')).toBeInTheDocument();
+  });
+
+  it('has correct data-slot attributes', () => {
+    const { container } = render(
+      <Drawer>
+        <DrawerTrigger>Open</DrawerTrigger>
+      </Drawer>
+    );
+    expect(container.querySelector('[data-slot="drawer-trigger"]')).toBeInTheDocument();
+  });
+});