@regardio/react 0.5.7 → 0.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/react",
-  "version": "0.5.7",
+  "version": "0.7.0",
   "private": false,
   "description": "Regardio React UI components",
   "keywords": [
@@ -26,118 +26,166 @@
   ],
   "type": "module",
   "exports": {
+    "./tailwind.css": "./src/tailwind.css",
     "./background-slideshow": {
-      "types": "./dist/background-slideshow/index.d.ts",
-      "import": "./dist/background-slideshow/index.js"
+      "types": "./dist/background-slideshow/index.d.mts",
+      "import": "./dist/background-slideshow/index.mjs"
     },
     "./blurry-gradient": {
-      "types": "./dist/blurry-gradient/index.d.ts",
-      "import": "./dist/blurry-gradient/index.js"
+      "types": "./dist/blurry-gradient/index.d.mts",
+      "import": "./dist/blurry-gradient/index.mjs"
     },
-    "./carousel": {
-      "types": "./dist/carousel/index.d.ts",
-      "import": "./dist/carousel/index.js"
+    "./button": {
+      "types": "./dist/button/index.d.mts",
+      "import": "./dist/button/index.mjs"
     },
-    "./countdown": {
-      "types": "./dist/countdown/index.d.ts",
-      "import": "./dist/countdown/index.js"
+    "./carousel": {
+      "types": "./dist/carousel/index.d.mts",
+      "import": "./dist/carousel/index.mjs"
     },
-    "./generic-error": {
-      "types": "./dist/generic-error/index.d.ts",
-      "import": "./dist/generic-error/index.js"
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.mts",
+      "import": "./dist/checkbox/index.mjs"
     },
-    "./grid": {
-      "types": "./dist/grid/index.d.ts",
-      "import": "./dist/grid/index.js"
+    "./checkbox-group": {
+      "types": "./dist/checkbox-group/index.d.mts",
+      "import": "./dist/checkbox-group/index.mjs"
     },
-    "./heading": {
-      "types": "./dist/heading/index.d.ts",
-      "import": "./dist/heading/index.js"
+    "./countdown": {
+      "types": "./dist/countdown/index.d.mts",
+      "import": "./dist/countdown/index.mjs"
     },
-    "./highlight": {
-      "types": "./dist/highlight/index.d.ts",
-      "import": "./dist/highlight/index.js"
+    "./field": {
+      "types": "./dist/field/index.d.mts",
+      "import": "./dist/field/index.mjs"
     },
-    "./hooks/use-current-route-data": {
-      "types": "./dist/hooks/use-current-route-data.d.ts",
-      "import": "./dist/hooks/use-current-route-data.js"
+    "./fieldset": {
+      "types": "./dist/fieldset/index.d.mts",
+      "import": "./dist/fieldset/index.mjs"
     },
-    "./hooks/use-focus-search": {
-      "types": "./dist/hooks/use-focus-search.d.ts",
-      "import": "./dist/hooks/use-focus-search.js"
+    "./form": {
+      "types": "./dist/form/index.d.mts",
+      "import": "./dist/form/index.mjs"
     },
-    "./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"
+    "./generic-error": {
+      "types": "./dist/generic-error/index.d.mts",
+      "import": "./dist/generic-error/index.mjs"
     },
-    "./hooks/use-nonce": {
-      "types": "./dist/hooks/use-nonce.d.ts",
-      "import": "./dist/hooks/use-nonce.js"
+    "./grid": {
+      "types": "./dist/grid/index.d.mts",
+      "import": "./dist/grid/index.mjs"
     },
-    "./hooks/use-orientation": {
-      "types": "./dist/hooks/use-orientation.d.ts",
-      "import": "./dist/hooks/use-orientation.js"
+    "./heading": {
+      "types": "./dist/heading/index.d.mts",
+      "import": "./dist/heading/index.mjs"
     },
-    "./hooks/use-user": {
-      "types": "./dist/hooks/use-user.d.ts",
-      "import": "./dist/hooks/use-user.js"
+    "./highlight": {
+      "types": "./dist/highlight/index.d.mts",
+      "import": "./dist/highlight/index.mjs"
     },
     "./icon-button": {
-      "types": "./dist/icon-button/index.d.ts",
-      "import": "./dist/icon-button/index.js"
+      "types": "./dist/icon-button/index.d.mts",
+      "import": "./dist/icon-button/index.mjs"
     },
     "./if": {
-      "types": "./dist/if/index.d.ts",
-      "import": "./dist/if/index.js"
+      "types": "./dist/if/index.d.mts",
+      "import": "./dist/if/index.mjs"
     },
     "./iframe": {
-      "types": "./dist/iframe/index.d.ts",
-      "import": "./dist/iframe/index.js"
+      "types": "./dist/iframe/index.d.mts",
+      "import": "./dist/iframe/index.mjs"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.mts",
+      "import": "./dist/input/index.mjs"
     },
     "./link": {
-      "types": "./dist/link/index.d.ts",
-      "import": "./dist/link/index.js"
+      "types": "./dist/link/index.d.mts",
+      "import": "./dist/link/index.mjs"
     },
     "./list": {
-      "types": "./dist/list/index.d.ts",
-      "import": "./dist/list/index.js"
+      "types": "./dist/list/index.d.mts",
+      "import": "./dist/list/index.mjs"
     },
     "./markdown-container": {
-      "types": "./dist/markdown-container/index.d.ts",
-      "import": "./dist/markdown-container/index.js"
+      "types": "./dist/markdown-container/index.d.mts",
+      "import": "./dist/markdown-container/index.mjs"
     },
     "./password-input": {
-      "types": "./dist/password-input/index.d.ts",
-      "import": "./dist/password-input/index.js"
+      "types": "./dist/password-input/index.d.mts",
+      "import": "./dist/password-input/index.mjs"
     },
     "./picture": {
-      "types": "./dist/picture/index.d.ts",
-      "import": "./dist/picture/index.js"
+      "types": "./dist/picture/index.d.mts",
+      "import": "./dist/picture/index.mjs"
     },
     "./protected-email": {
-      "types": "./dist/protected-email/index.d.ts",
-      "import": "./dist/protected-email/index.js"
+      "types": "./dist/protected-email/index.d.mts",
+      "import": "./dist/protected-email/index.mjs"
+    },
+    "./radio": {
+      "types": "./dist/radio/index.d.mts",
+      "import": "./dist/radio/index.mjs"
+    },
+    "./radio-group": {
+      "types": "./dist/radio-group/index.d.mts",
+      "import": "./dist/radio-group/index.mjs"
+    },
+    "./slider": {
+      "types": "./dist/slider/index.d.mts",
+      "import": "./dist/slider/index.mjs"
+    },
+    "./switch": {
+      "types": "./dist/switch/index.d.mts",
+      "import": "./dist/switch/index.mjs"
     },
-    "./tailwind.css": "./src/tailwind.css",
     "./text": {
-      "types": "./dist/text/index.d.ts",
-      "import": "./dist/text/index.js"
+      "types": "./dist/text/index.d.mts",
+      "import": "./dist/text/index.mjs"
+    },
+    "./toggle": {
+      "types": "./dist/toggle/index.d.mts",
+      "import": "./dist/toggle/index.mjs"
+    },
+    "./hooks/use-current-route-data": {
+      "types": "./dist/hooks/use-current-route-data.d.mts",
+      "import": "./dist/hooks/use-current-route-data.mjs"
+    },
+    "./hooks/use-focus-search": {
+      "types": "./dist/hooks/use-focus-search.d.mts",
+      "import": "./dist/hooks/use-focus-search.mjs"
+    },
+    "./hooks/use-matches-data": {
+      "types": "./dist/hooks/use-matches-data.d.mts",
+      "import": "./dist/hooks/use-matches-data.mjs"
+    },
+    "./hooks/use-media-query": {
+      "types": "./dist/hooks/use-media-query.d.mts",
+      "import": "./dist/hooks/use-media-query.mjs"
+    },
+    "./hooks/use-mobile": {
+      "types": "./dist/hooks/use-mobile.d.mts",
+      "import": "./dist/hooks/use-mobile.mjs"
+    },
+    "./hooks/use-nonce": {
+      "types": "./dist/hooks/use-nonce.d.mts",
+      "import": "./dist/hooks/use-nonce.mjs"
+    },
+    "./hooks/use-orientation": {
+      "types": "./dist/hooks/use-orientation.d.mts",
+      "import": "./dist/hooks/use-orientation.mjs"
+    },
+    "./hooks/use-user": {
+      "types": "./dist/hooks/use-user.d.mts",
+      "import": "./dist/hooks/use-user.mjs"
     },
     "./utils/author": {
-      "types": "./dist/utils/author/index.d.ts",
-      "import": "./dist/utils/author/index.js"
+      "types": "./dist/utils/author/index.d.mts",
+      "import": "./dist/utils/author/index.mjs"
     },
     "./utils/text": {
-      "types": "./dist/utils/text/index.d.ts",
-      "import": "./dist/utils/text/index.js"
+      "types": "./dist/utils/text/index.d.mts",
+      "import": "./dist/utils/text/index.mjs"
     }
   },
   "files": [
@@ -145,9 +193,9 @@
     "src"
   ],
   "scripts": {
-    "build": "tsup && post-build-exports --preserve \"./tailwind.css\" && pnpm fix",
+    "build": "tsdown && 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",
@@ -169,10 +217,10 @@
   "dependencies": {
     "@base-ui/react": "1.0.0",
     "@maptiler/leaflet-maptilersdk": "4.1.1",
-    "@maptiler/sdk": "3.9.0",
+    "@maptiler/sdk": "3.10.0",
     "@mdx-js/react": "3.1.1",
-    "@regardio/js": "0.6.0",
-    "@regardio/tailwind": "0.2.0",
+    "@regardio/js": "0.7.0",
+    "@regardio/tailwind": "0.3.0",
     "@supabase/supabase-js": "2.90.1",
     "cmdk": "1.1.1",
     "embla-carousel": "8.6.0",
@@ -185,15 +233,15 @@
     "react": "19.2.3",
     "react-day-picker": "9.13.0",
     "react-dom": "19.2.3",
-    "react-hook-form": "7.71.0",
-    "react-resizable-panels": "4.4.0",
+    "react-hook-form": "7.71.1",
+    "react-resizable-panels": "4.4.1",
     "react-router": "7.12.0",
     "tailwind-variants": "3.2.2",
     "vaul": "1.1.2",
     "zod": "4.3.5"
   },
   "devDependencies": {
-    "@regardio/dev": "1.11.4",
+    "@regardio/dev": "1.12.0",
     "@storybook/addon-a11y": "10.1.11",
     "@storybook/addon-docs": "10.1.11",
     "@storybook/addon-vitest": "10.1.11",
@@ -214,7 +262,7 @@
     "playwright": "1.57.0",
     "storybook": "10.1.11",
     "tailwindcss": "4.1.18",
-    "tsup": "8.5.1",
+    "tsdown": "0.20.0-beta.3",
     "typescript": "5.9.3",
     "vite": "7.3.1",
     "vitest": "4.0.17"

package/src/background-slideshow/background-slideshow.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import type { ReactElement } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Picture } from '../picture';
 
@@ -36,7 +35,7 @@ export function BackgroundSlideshow({
   slideshowInterval = 6000,
   transitionDuration = 6000,
   filter,
-}: BackgroundSlideshowProps): ReactElement {
+}: BackgroundSlideshowProps): React.JSX.Element {
   // Validate images synchronously for immediate first image render
   const validatedImages = useMemo(() => {
     return images

package/src/blurry-gradient/blurry-gradient.tsx

@@ -11,7 +11,7 @@ export interface BlurryGradientProps extends SVGProps<SVGSVGElement> {
   description?: string;
 }
 
-export const BlurryGradient = (props: BlurryGradientProps) => {
+export const BlurryGradient = (props: BlurryGradientProps): React.JSX.Element => {
   const {
     description = 'Decorative blurry gradient',
     neutralColor,

package/src/button/button.stories.tsx

@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from './button';
+
+const meta: Meta<typeof Button> = {
+  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');
+  });
+});