@regardio/react 0.5.7 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/react",
-  "version": "0.5.7",
+  "version": "0.6.0",
   "private": false,
   "description": "Regardio React UI components",
   "keywords": [
@@ -26,128 +26,16 @@
   ],
   "type": "module",
   "exports": {
-    "./background-slideshow": {
-      "types": "./dist/background-slideshow/index.d.ts",
-      "import": "./dist/background-slideshow/index.js"
-    },
-    "./blurry-gradient": {
-      "types": "./dist/blurry-gradient/index.d.ts",
-      "import": "./dist/blurry-gradient/index.js"
-    },
-    "./carousel": {
-      "types": "./dist/carousel/index.d.ts",
-      "import": "./dist/carousel/index.js"
-    },
-    "./countdown": {
-      "types": "./dist/countdown/index.d.ts",
-      "import": "./dist/countdown/index.js"
-    },
-    "./generic-error": {
-      "types": "./dist/generic-error/index.d.ts",
-      "import": "./dist/generic-error/index.js"
-    },
-    "./grid": {
-      "types": "./dist/grid/index.d.ts",
-      "import": "./dist/grid/index.js"
-    },
-    "./heading": {
-      "types": "./dist/heading/index.d.ts",
-      "import": "./dist/heading/index.js"
-    },
-    "./highlight": {
-      "types": "./dist/highlight/index.d.ts",
-      "import": "./dist/highlight/index.js"
-    },
-    "./hooks/use-current-route-data": {
-      "types": "./dist/hooks/use-current-route-data.d.ts",
-      "import": "./dist/hooks/use-current-route-data.js"
-    },
-    "./hooks/use-focus-search": {
-      "types": "./dist/hooks/use-focus-search.d.ts",
-      "import": "./dist/hooks/use-focus-search.js"
-    },
-    "./hooks/use-matches-data": {
-      "types": "./dist/hooks/use-matches-data.d.ts",
-      "import": "./dist/hooks/use-matches-data.js"
-    },
-    "./hooks/use-media-query": {
-      "types": "./dist/hooks/use-media-query.d.ts",
-      "import": "./dist/hooks/use-media-query.js"
-    },
-    "./hooks/use-mobile": {
-      "types": "./dist/hooks/use-mobile.d.ts",
-      "import": "./dist/hooks/use-mobile.js"
-    },
-    "./hooks/use-nonce": {
-      "types": "./dist/hooks/use-nonce.d.ts",
-      "import": "./dist/hooks/use-nonce.js"
-    },
-    "./hooks/use-orientation": {
-      "types": "./dist/hooks/use-orientation.d.ts",
-      "import": "./dist/hooks/use-orientation.js"
-    },
-    "./hooks/use-user": {
-      "types": "./dist/hooks/use-user.d.ts",
-      "import": "./dist/hooks/use-user.js"
-    },
-    "./icon-button": {
-      "types": "./dist/icon-button/index.d.ts",
-      "import": "./dist/icon-button/index.js"
-    },
-    "./if": {
-      "types": "./dist/if/index.d.ts",
-      "import": "./dist/if/index.js"
-    },
-    "./iframe": {
-      "types": "./dist/iframe/index.d.ts",
-      "import": "./dist/iframe/index.js"
-    },
-    "./link": {
-      "types": "./dist/link/index.d.ts",
-      "import": "./dist/link/index.js"
-    },
-    "./list": {
-      "types": "./dist/list/index.d.ts",
-      "import": "./dist/list/index.js"
-    },
-    "./markdown-container": {
-      "types": "./dist/markdown-container/index.d.ts",
-      "import": "./dist/markdown-container/index.js"
-    },
-    "./password-input": {
-      "types": "./dist/password-input/index.d.ts",
-      "import": "./dist/password-input/index.js"
-    },
-    "./picture": {
-      "types": "./dist/picture/index.d.ts",
-      "import": "./dist/picture/index.js"
-    },
-    "./protected-email": {
-      "types": "./dist/protected-email/index.d.ts",
-      "import": "./dist/protected-email/index.js"
-    },
-    "./tailwind.css": "./src/tailwind.css",
-    "./text": {
-      "types": "./dist/text/index.d.ts",
-      "import": "./dist/text/index.js"
-    },
-    "./utils/author": {
-      "types": "./dist/utils/author/index.d.ts",
-      "import": "./dist/utils/author/index.js"
-    },
-    "./utils/text": {
-      "types": "./dist/utils/text/index.d.ts",
-      "import": "./dist/utils/text/index.js"
-    }
+    "./tailwind.css": "./src/tailwind.css"
   },
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "build": "tsup && post-build-exports --preserve \"./tailwind.css\" && pnpm fix",
+    "build": "tsdown && post-build-exports --preserve \"./tailwind.css\" && pnpm fix",
     "clean": "exec-clean .turbo dist",
-    "dev": "tsup --watch",
+    "dev": "tsdown --watch",
     "fix": "exec-p fix:*",
     "fix:biome": "lint-biome check --write --unsafe .",
     "fix:md": "lint-md --fix",
@@ -214,7 +102,7 @@
     "playwright": "1.57.0",
     "storybook": "10.1.11",
     "tailwindcss": "4.1.18",
-    "tsup": "8.5.1",
+    "tsdown": "0.20.0-beta.1",
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vitest": "4.0.17"

package/src/button/button.stories.tsx

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button';
+
+const meta = {
+  argTypes: {
+    children: {
+      control: 'text',
+      description: 'Button content',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the button',
+    },
+    size: {
+      control: 'select',
+      description: 'Button size',
+      options: ['sm', 'md', 'lg', 'xl', '2xl'],
+    },
+    variant: {
+      control: 'select',
+      description: 'Button style variant',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+  },
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Button',
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+};
+
+export const Primary: Story = {
+  args: {
+    children: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline Button',
+    variant: 'outline',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost Button',
+    variant: 'ghost',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: 'Destructive Button',
+    variant: 'destructive',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    size: 'lg',
+  },
+};
+
+export const ExtraLarge: Story = {
+  args: {
+    children: 'Extra Large Button',
+    size: 'xl',
+  },
+};
+
+export const DoubleExtraLarge: Story = {
+  args: {
+    children: '2XL Button',
+    size: '2xl',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    disabled: true,
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    children: 'Button with shadow',
+    className: 'shadow-lg',
+  },
+};
+
+export const AsLink: Story = {
+  args: {
+    children: 'Link Button',
+    nativeButton: false,
+    render: (props: React.ComponentProps<'a'>) => (
+      <a
+        {...props}
+        href="#example"
+      />
+    ),
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="destructive">Destructive</Button>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+      <Button size="xl">Extra Large</Button>
+      <Button size="2xl">2XL</Button>
+    </div>
+  ),
+};
+
+export const Interactive: Story = {
+  args: {
+    children: 'Click me!',
+    onClick: () => alert('Button clicked!'),
+  },
+};

package/src/button/button.test.tsx

@@ -0,0 +1,73 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { Button } from './button';
+
+describe('Button', () => {
+  it('renders children correctly', () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
+  });
+
+  it('applies default variant and size classes', () => {
+    render(<Button>Default button</Button>);
+    const button = screen.getByRole('button', { name: 'Default button' });
+    expect(button).toHaveClass('bg-blue-600', 'text-white', 'px-4', 'py-2');
+  });
+
+  it('applies variant classes correctly', () => {
+    render(<Button variant="secondary">Secondary button</Button>);
+    const button = screen.getByRole('button', { name: 'Secondary button' });
+    expect(button).toHaveClass('bg-gray-100', 'text-gray-900');
+  });
+
+  it('applies size classes correctly', () => {
+    render(<Button size="lg">Large button</Button>);
+    const button = screen.getByRole('button', { name: 'Large button' });
+    expect(button).toHaveClass('px-6', 'py-3', 'text-lg');
+  });
+
+  it('applies custom className', () => {
+    render(<Button className="custom-class">Custom button</Button>);
+    const button = screen.getByRole('button', { name: 'Custom button' });
+    expect(button).toHaveClass('custom-class');
+  });
+
+  it('handles disabled state', () => {
+    render(<Button disabled>Disabled button</Button>);
+    const button = screen.getByRole('button', { name: 'Disabled button' });
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass('disabled:opacity-50', 'disabled:cursor-not-allowed');
+  });
+
+  it('passes through other props', () => {
+    render(
+      <Button
+        aria-label="Test button"
+        data-testid="test-button"
+      >
+        Test
+      </Button>,
+    );
+    const button = screen.getByTestId('test-button');
+    expect(button).toHaveAttribute('aria-label', 'Test button');
+  });
+
+  it('renders as different element when render prop is provided', () => {
+    render(
+      <Button
+        nativeButton={false}
+        render={(props) => (
+          <a
+            {...props}
+            href="#test"
+          />
+        )}
+      >
+        Link button
+      </Button>,
+    );
+    const link = screen.getByRole('button', { name: 'Link button' });
+    expect(link).toHaveAttribute('href', '#test');
+    expect(link.tagName).toBe('A');
+  });
+});

package/src/button/button.tsx

@@ -0,0 +1,112 @@
+import { Button as BaseUIButton } from '@base-ui/react/button';
+import { tv } from '@regardio/tailwind/utils';
+import type { ComponentProps } from 'react';
+
+const buttonVariants = {
+  destructive: [
+    'bg-red-600',
+    'text-white',
+    'border-red-600',
+    'hover:bg-red-700',
+    'hover:border-red-700',
+    'focus-visible:ring-2',
+    'focus-visible:ring-red-500',
+    'focus-visible:ring-offset-2',
+  ],
+  ghost: [
+    'bg-transparent',
+    'text-gray-900',
+    'border-transparent',
+    'hover:bg-gray-100',
+    'hover:border-transparent',
+    'focus-visible:ring-2',
+    'focus-visible:ring-gray-500',
+    'focus-visible:ring-offset-2',
+  ],
+  outline: [
+    'bg-transparent',
+    'text-gray-900',
+    'border-gray-300',
+    'hover:bg-gray-50',
+    'hover:border-gray-400',
+    'focus-visible:ring-2',
+    'focus-visible:ring-gray-500',
+    'focus-visible:ring-offset-2',
+  ],
+  primary: [
+    'bg-blue-600',
+    'text-white',
+    'border-blue-600',
+    'hover:bg-blue-700',
+    'hover:border-blue-700',
+    'focus-visible:ring-2',
+    'focus-visible:ring-blue-500',
+    'focus-visible:ring-offset-2',
+  ],
+  secondary: [
+    'bg-gray-100',
+    'text-gray-900',
+    'border-gray-300',
+    'hover:bg-gray-200',
+    'hover:border-gray-400',
+    'focus-visible:ring-2',
+    'focus-visible:ring-gray-500',
+    'focus-visible:ring-offset-2',
+  ],
+} as const;
+
+const buttonSizes = {
+  '2xl': ['px-10', 'py-5', 'text-2xl', 'font-medium', 'rounded-lg'],
+  lg: ['px-6', 'py-3', 'text-lg', 'font-medium', 'rounded-lg'],
+  md: ['px-4', 'py-2', 'text-base', 'font-medium', 'rounded-md'],
+  sm: ['px-3', 'py-1.5', 'text-sm', 'font-medium', 'rounded-md'],
+  xl: ['px-8', 'py-4', 'text-xl', 'font-medium', 'rounded-lg'],
+} as const;
+
+const button = tv({
+  base: [
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'border',
+    'transition-colors',
+    'duration-200',
+    'ease-in-out',
+    'disabled:opacity-50',
+    'disabled:cursor-not-allowed',
+    'disabled:pointer-events-none',
+  ],
+  defaultVariants: {
+    size: 'md',
+    variant: 'primary',
+  },
+  variants: {
+    size: buttonSizes,
+    variant: buttonVariants,
+  },
+});
+
+export type ButtonVariant = keyof typeof buttonVariants;
+export type ButtonSize = keyof typeof buttonSizes;
+
+export interface ButtonProps extends Omit<ComponentProps<typeof BaseUIButton>, 'className'> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+  type?: 'button' | 'submit' | 'reset';
+}
+
+export const Button = ({ children, className, variant, size, ...props }: ButtonProps) => {
+  return (
+    <BaseUIButton
+      className={button({
+        className,
+        size,
+        variant,
+      })}
+      {...props}
+    >
+      {children}
+    </BaseUIButton>
+  );
+};

package/src/button/index.ts

@@ -0,0 +1,2 @@
+export type { ButtonProps, ButtonSize, ButtonVariant } from './button';
+export { Button } from './button';

package/src/carousel/carousel-next.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { forwardRef, type HTMLAttributes } from 'react';
+import { Button } from '../button';
 import { useCarousel } from './carousel-root';
 
 export const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
@@ -8,12 +9,11 @@ export const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLBut
     const { canScrollNext, scrollNext } = useCarousel();
 
     return (
-      <button
+      <Button
         className={className}
         disabled={!canScrollNext}
         onClick={scrollNext}
         ref={ref}
-        type="button"
         {...props}
       />
     );

package/src/carousel/carousel-previous.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { forwardRef, type HTMLAttributes } from 'react';
+import { Button } from '../button';
 import { useCarousel } from './carousel-root';
 
 export const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
@@ -8,12 +9,11 @@ export const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTM
     const { canScrollPrev, scrollPrev } = useCarousel();
 
     return (
-      <button
+      <Button
         className={className}
         disabled={!canScrollPrev}
         onClick={scrollPrev}
         ref={ref}
-        type="button"
         {...props}
       />
     );

package/src/checkbox/checkbox.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+import { Field } from '../field';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Checkbox.Root> = {
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the checkbox',
+    },
+    size: {
+      control: 'select',
+      description: 'Checkbox size',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+  component: Checkbox.Root,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  title: 'Components/Checkbox',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Checkbox.Root>
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Checked: Story = {
+  render: () => (
+    <Checkbox.Root defaultChecked>
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Small: Story = {
+  render: () => (
+    <Checkbox.Root size="sm">
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Large: Story = {
+  render: () => (
+    <Checkbox.Root size="lg">
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <Checkbox.Root disabled>
+      <Checkbox.Indicator />
+    </Checkbox.Root>
+  ),
+};
+
+export const WithLabel: Story = {
+  render: () => (
+    <Field.Root>
+      <Field.Label>
+        <Checkbox.Root>
+          <Checkbox.Indicator />
+        </Checkbox.Root>
+        Accept terms and conditions
+      </Field.Label>
+    </Field.Root>
+  ),
+};
+
+export const Controlled: Story = {
+  render: () => {
+    const [checked, setChecked] = useState(false);
+    return (
+      <div className="space-y-4">
+        <Field.Root>
+          <Field.Label>
+            <Checkbox.Root
+              checked={checked}
+              onCheckedChange={setChecked}
+            >
+              <Checkbox.Indicator />
+            </Checkbox.Root>
+            Subscribe to newsletter
+          </Field.Label>
+        </Field.Root>
+        <p className="text-sm text-gray-600">Status: {checked ? 'Subscribed' : 'Not subscribed'}</p>
+      </div>
+    );
+  },
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Checkbox.Root size="sm">
+        <Checkbox.Indicator />
+      </Checkbox.Root>
+      <Checkbox.Root size="md">
+        <Checkbox.Indicator />
+      </Checkbox.Root>
+      <Checkbox.Root size="lg">
+        <Checkbox.Indicator />
+      </Checkbox.Root>
+    </div>
+  ),
+};