@regardio/react 0.5.5 → 0.6.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/react",
-  "version": "0.5.5",
+  "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",
@@ -172,8 +60,8 @@
     "@maptiler/sdk": "3.9.0",
     "@mdx-js/react": "3.1.1",
     "@regardio/js": "0.6.0",
-    "@regardio/tailwind": "0.1.3",
-    "@supabase/supabase-js": "2.90.0",
+    "@regardio/tailwind": "0.2.0",
+    "@supabase/supabase-js": "2.90.1",
     "cmdk": "1.1.1",
     "embla-carousel": "8.6.0",
     "embla-carousel-react": "8.6.0",
@@ -181,19 +69,19 @@
     "intl-parse-accept-language": "1.0.0",
     "leaflet": "alpha",
     "lucide-react": "0.562.0",
-    "markdown-to-jsx": "9.5.1",
+    "markdown-to-jsx": "9.5.7",
     "react": "19.2.3",
     "react-day-picker": "9.13.0",
     "react-dom": "19.2.3",
-    "react-hook-form": "7.70.0",
-    "react-resizable-panels": "4.3.1",
+    "react-hook-form": "7.71.0",
+    "react-resizable-panels": "4.4.0",
     "react-router": "7.12.0",
     "tailwind-variants": "3.2.2",
     "vaul": "1.1.2",
     "zod": "4.3.5"
   },
   "devDependencies": {
-    "@regardio/dev": "1.11.1",
+    "@regardio/dev": "1.11.4",
     "@storybook/addon-a11y": "10.1.11",
     "@storybook/addon-docs": "10.1.11",
     "@storybook/addon-vitest": "10.1.11",
@@ -203,21 +91,21 @@
     "@testing-library/react": "16.3.1",
     "@total-typescript/ts-reset": "0.6.1",
     "@types/leaflet": "1.9.21",
-    "@types/node": "25.0.3",
-    "@types/react": "19.2.7",
+    "@types/node": "25.0.8",
+    "@types/react": "19.2.8",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.2",
-    "@vitest/browser-playwright": "4.0.16",
-    "@vitest/coverage-v8": "4.0.16",
-    "@vitest/ui": "4.0.16",
+    "@vitest/browser-playwright": "4.0.17",
+    "@vitest/coverage-v8": "4.0.17",
+    "@vitest/ui": "4.0.17",
     "jsdom": "27.4.0",
     "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.16"
+    "vitest": "4.0.17"
   },
   "engines": {
     "node": ">=18"

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}
       />
     );