xertica-ui 2.2.1 → 2.4.0

package/components/ui/label/label.stories.tsx

@@ -1,74 +1,74 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Label } from './label';
-import { Input } from '../input';
-import { Checkbox } from '../checkbox';
-import React from 'react';
-
-const meta: Meta<typeof Label> = {
-  title: 'UI/Label',
-  component: Label,
-  render: args => <Label {...args} />,
-  argTypes: {
-    children: {
-      control: 'text',
-      description: 'The text content of the label.',
-    },
-    htmlFor: {
-      control: 'text',
-      description: 'The ID of the input this label is for.',
-    },
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant — matches the form sizing scale.',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Label>;
-
-export const Default: Story = {
-  args: {
-    children: 'Accept terms and conditions',
-  },
-  render: args => (
-    <div>
-      <div className="flex items-center space-x-2">
-        <Checkbox id="terms" size={args.size} />
-        <Label {...args} htmlFor="terms" />
-      </div>
-    </div>
-  ),
-};
-
-export const WithInput: Story = {
-  render: () => (
-    <div className="grid w-full max-w-sm items-center gap-1.5">
-      <Label htmlFor="email">Email</Label>
-      <Input type="email" id="email" placeholder="Email" />
-    </div>
-  ),
-};
-
-/**
- * Size comparison: sm, md (default), lg.
- */
-export const Sizes: Story = {
-  render: () => (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col gap-1">
-        <Label size="sm">Small Label (sm)</Label>
-        <Input size="sm" placeholder="Small input" />
-      </div>
-      <div className="flex flex-col gap-1">
-        <Label size="md">Medium Label (md — default)</Label>
-        <Input size="md" placeholder="Medium input" />
-      </div>
-      <div className="flex flex-col gap-1">
-        <Label size="lg">Large Label (lg)</Label>
-        <Input size="lg" placeholder="Large input" />
-      </div>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './label';
+import { Input } from '../input';
+import { Checkbox } from '../checkbox';
+import React from 'react';
+
+const meta: Meta<typeof Label> = {
+  title: 'UI/Label',
+  component: Label,
+  render: args => <Label {...args} />,
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'The text content of the label.',
+    },
+    htmlFor: {
+      control: 'text',
+      description: 'The ID of the input this label is for.',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size variant — matches the form sizing scale.',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+export const Default: Story = {
+  args: {
+    children: 'Accept terms and conditions',
+  },
+  render: args => (
+    <div>
+      <div className="flex items-center space-x-2">
+        <Checkbox id="terms" size={args.size} />
+        <Label {...args} htmlFor="terms" />
+      </div>
+    </div>
+  ),
+};
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email">Email</Label>
+      <Input type="email" id="email" placeholder="Email" />
+    </div>
+  ),
+};
+
+/**
+ * Size comparison: sm, md (default), lg.
+ */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-1">
+        <Label size="sm">Small Label (sm)</Label>
+        <Input size="sm" placeholder="Small input" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <Label size="md">Medium Label (md — default)</Label>
+        <Input size="md" placeholder="Medium input" />
+      </div>
+      <div className="flex flex-col gap-1">
+        <Label size="lg">Large Label (lg)</Label>
+        <Input size="lg" placeholder="Large input" />
+      </div>
+    </div>
+  ),
+};

package/components/ui/label/label.test.tsx

@@ -1,45 +1,45 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { Label } from './label';
-import React from 'react';
-
-describe('Label', () => {
-  it('renders correctly with default props', () => {
-    render(<Label htmlFor="test">Test Label</Label>);
-    const label = screen.getByText('Test Label');
-    expect(label).toBeInTheDocument();
-    expect(label).toHaveClass('text-sm'); // md size
-  });
-
-  it('renders correctly with different sizes', () => {
-    const { rerender } = render(<Label size="sm">Small</Label>);
-    expect(screen.getByText('Small')).toHaveClass('text-xs');
-
-    rerender(<Label size="md">Medium</Label>);
-    expect(screen.getByText('Medium')).toHaveClass('text-sm');
-
-    rerender(<Label size="lg">Large</Label>);
-    expect(screen.getByText('Large')).toHaveClass('text-base');
-  });
-
-  it('is associated with the correct input', () => {
-    render(
-      <>
-        <Label htmlFor="input-id">Label Text</Label>
-        <input id="input-id" />
-      </>
-    );
-    const label = screen.getByText('Label Text');
-    expect(label).toHaveAttribute('for', 'input-id');
-  });
-
-  it('has correct data-slot attribute', () => {
-    const { container } = render(<Label>Label</Label>);
-    expect(container.querySelector('[data-slot="label"]')).toBeInTheDocument();
-  });
-
-  it('applies custom classNames', () => {
-    const { container } = render(<Label className="custom-label">Label</Label>);
-    expect(container.firstChild).toHaveClass('custom-label');
-  });
-});
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Label } from './label';
+import React from 'react';
+
+describe('Label', () => {
+  it('renders correctly with default props', () => {
+    render(<Label htmlFor="test">Test Label</Label>);
+    const label = screen.getByText('Test Label');
+    expect(label).toBeInTheDocument();
+    expect(label).toHaveClass('text-sm'); // md size
+  });
+
+  it('renders correctly with different sizes', () => {
+    const { rerender } = render(<Label size="sm">Small</Label>);
+    expect(screen.getByText('Small')).toHaveClass('text-xs');
+
+    rerender(<Label size="md">Medium</Label>);
+    expect(screen.getByText('Medium')).toHaveClass('text-sm');
+
+    rerender(<Label size="lg">Large</Label>);
+    expect(screen.getByText('Large')).toHaveClass('text-base');
+  });
+
+  it('is associated with the correct input', () => {
+    render(
+      <>
+        <Label htmlFor="input-id">Label Text</Label>
+        <input id="input-id" />
+      </>
+    );
+    const label = screen.getByText('Label Text');
+    expect(label).toHaveAttribute('for', 'input-id');
+  });
+
+  it('has correct data-slot attribute', () => {
+    const { container } = render(<Label>Label</Label>);
+    expect(container.querySelector('[data-slot="label"]')).toBeInTheDocument();
+  });
+
+  it('applies custom classNames', () => {
+    const { container } = render(<Label className="custom-label">Label</Label>);
+    expect(container.firstChild).toHaveClass('custom-label');
+  });
+});

package/components/ui/label/label.tsx

@@ -1,53 +1,53 @@
-'use client';
-
-import * as React from 'react';
-import * as LabelPrimitive from '@radix-ui/react-label';
-
-import { cn } from '../../shared/utils';
-
-/**
- * Accessible form field label.
- *
- * @description
- * Styled label with built-in support for error and disabled peer states.
- * Renders as a Radix UI label for full accessibility semantics.
- * Supports the standard size scale (`sm`, `md`, `lg`) for consistent form alignment.
- *
- * @ai-rules
- * 1. Always associate with the input using matching `htmlFor` and `id` props.
- * 2. Inside a `<Form>`, prefer `<FormLabel>` — it auto-connects to the field via context.
- * 3. Use the `size` prop to match the corresponding Input/Select size.
- */
-function Label({
-  className,
-  size = 'md',
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root> & {
-  /**
-   * Size variant — matches the form component sizing scale.
-   * - `sm`: text-xs
-   * - `md`: text-sm — **default**
-   * - `lg`: text-base
-   */
-  size?: 'sm' | 'md' | 'lg';
-}) {
-  const sizeClasses = {
-    sm: 'text-xs',
-    md: 'text-sm',
-    lg: 'text-base',
-  };
-
-  return (
-    <LabelPrimitive.Root
-      data-slot="label"
-      className={cn(
-        'flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        sizeClasses[size],
-        className
-      )}
-      {...props}
-    />
-  );
-}
-
-export { Label };
+'use client';
+
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+
+import { cn } from '../../shared/utils';
+
+/**
+ * Accessible form field label.
+ *
+ * @description
+ * Styled label with built-in support for error and disabled peer states.
+ * Renders as a Radix UI label for full accessibility semantics.
+ * Supports the standard size scale (`sm`, `md`, `lg`) for consistent form alignment.
+ *
+ * @ai-rules
+ * 1. Always associate with the input using matching `htmlFor` and `id` props.
+ * 2. Inside a `<Form>`, prefer `<FormLabel>` — it auto-connects to the field via context.
+ * 3. Use the `size` prop to match the corresponding Input/Select size.
+ */
+function Label({
+  className,
+  size = 'md',
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root> & {
+  /**
+   * Size variant — matches the form component sizing scale.
+   * - `sm`: text-xs
+   * - `md`: text-sm — **default**
+   * - `lg`: text-base
+   */
+  size?: 'sm' | 'md' | 'lg';
+}) {
+  const sizeClasses = {
+    sm: 'text-xs',
+    md: 'text-sm',
+    lg: 'text-base',
+  };
+
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        sizeClasses[size],
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/components/ui/map/index.ts

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

package/components/ui/map/map.stories.tsx

@@ -1,86 +1,86 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Map } from './map';
-import React from 'react';
-
-function MapStoryFrame({ children }: { children: React.ReactNode }) {
-  return (
-    <div
-      style={{
-        width: 'min(100vw - 48px, 960px)',
-        minWidth: 320,
-      }}
-    >
-      {children}
-    </div>
-  );
-}
-
-const meta: Meta<typeof Map> = {
-  title: 'UI/Map',
-  component: Map,
-  render: args => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    zoom: { control: { type: 'range', min: 1, max: 20 } },
-    height: { control: 'text' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Map>;
-
-export const Default: Story = {
-  args: {
-    center: { lat: -23.5505, lng: -46.6333 },
-    zoom: 12,
-    height: '400px',
-  },
-  render: args => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-};
-
-export const WithMarkers: Story = {
-  args: {
-    center: { lat: -23.5505, lng: -46.6333 },
-    zoom: 13,
-    height: '500px',
-    markers: [
-      {
-        position: { lat: -23.5505, lng: -46.6333 },
-        title: 'São Paulo Center',
-        info: 'The heart of the city',
-      },
-      {
-        position: { lat: -23.5605, lng: -46.6433 },
-        title: 'Avenida Paulista',
-        info: 'Financial and cultural hub',
-        customColor: 'hsl(var(--destructive))',
-      },
-    ],
-  },
-  render: args => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-};
-
-export const NoKey: Story = {
-  args: {
-    apiKey: '',
-  },
-  render: args => (
-    <MapStoryFrame>
-      <Map {...args} />
-    </MapStoryFrame>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Map } from './map';
+import React from 'react';
+
+function MapStoryFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        width: 'min(100vw - 48px, 960px)',
+        minWidth: 320,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+const meta: Meta<typeof Map> = {
+  title: 'UI/Map',
+  component: Map,
+  render: args => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    zoom: { control: { type: 'range', min: 1, max: 20 } },
+    height: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Map>;
+
+export const Default: Story = {
+  args: {
+    center: { lat: -23.5505, lng: -46.6333 },
+    zoom: 12,
+    height: '400px',
+  },
+  render: args => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+};
+
+export const WithMarkers: Story = {
+  args: {
+    center: { lat: -23.5505, lng: -46.6333 },
+    zoom: 13,
+    height: '500px',
+    markers: [
+      {
+        position: { lat: -23.5505, lng: -46.6333 },
+        title: 'São Paulo Center',
+        info: 'The heart of the city',
+      },
+      {
+        position: { lat: -23.5605, lng: -46.6433 },
+        title: 'Avenida Paulista',
+        info: 'Financial and cultural hub',
+        customColor: 'hsl(var(--destructive))',
+      },
+    ],
+  },
+  render: args => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+};
+
+export const NoKey: Story = {
+  args: {
+    apiKey: '',
+  },
+  render: args => (
+    <MapStoryFrame>
+      <Map {...args} />
+    </MapStoryFrame>
+  ),
+};