@regardio/react 0.6.0 → 0.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://www.schemastore.org/package.json",
   "name": "@regardio/react",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "description": "Regardio React UI components",
   "keywords": [
@@ -26,14 +26,174 @@
   ],
   "type": "module",
   "exports": {
-    "./tailwind.css": "./src/tailwind.css"
+    "./tailwind.css": "./src/tailwind.css",
+    "./background-slideshow": {
+      "types": "./dist/background-slideshow/index.d.mts",
+      "import": "./dist/background-slideshow/index.mjs"
+    },
+    "./blurry-gradient": {
+      "types": "./dist/blurry-gradient/index.d.mts",
+      "import": "./dist/blurry-gradient/index.mjs"
+    },
+    "./button": {
+      "types": "./dist/button/index.d.mts",
+      "import": "./dist/button/index.mjs"
+    },
+    "./carousel": {
+      "types": "./dist/carousel/index.d.mts",
+      "import": "./dist/carousel/index.mjs"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.mts",
+      "import": "./dist/checkbox/index.mjs"
+    },
+    "./checkbox-group": {
+      "types": "./dist/checkbox-group/index.d.mts",
+      "import": "./dist/checkbox-group/index.mjs"
+    },
+    "./countdown": {
+      "types": "./dist/countdown/index.d.mts",
+      "import": "./dist/countdown/index.mjs"
+    },
+    "./field": {
+      "types": "./dist/field/index.d.mts",
+      "import": "./dist/field/index.mjs"
+    },
+    "./fieldset": {
+      "types": "./dist/fieldset/index.d.mts",
+      "import": "./dist/fieldset/index.mjs"
+    },
+    "./form": {
+      "types": "./dist/form/index.d.mts",
+      "import": "./dist/form/index.mjs"
+    },
+    "./generic-error": {
+      "types": "./dist/generic-error/index.d.mts",
+      "import": "./dist/generic-error/index.mjs"
+    },
+    "./grid": {
+      "types": "./dist/grid/index.d.mts",
+      "import": "./dist/grid/index.mjs"
+    },
+    "./heading": {
+      "types": "./dist/heading/index.d.mts",
+      "import": "./dist/heading/index.mjs"
+    },
+    "./highlight": {
+      "types": "./dist/highlight/index.d.mts",
+      "import": "./dist/highlight/index.mjs"
+    },
+    "./icon-button": {
+      "types": "./dist/icon-button/index.d.mts",
+      "import": "./dist/icon-button/index.mjs"
+    },
+    "./if": {
+      "types": "./dist/if/index.d.mts",
+      "import": "./dist/if/index.mjs"
+    },
+    "./iframe": {
+      "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.mts",
+      "import": "./dist/link/index.mjs"
+    },
+    "./list": {
+      "types": "./dist/list/index.d.mts",
+      "import": "./dist/list/index.mjs"
+    },
+    "./markdown-container": {
+      "types": "./dist/markdown-container/index.d.mts",
+      "import": "./dist/markdown-container/index.mjs"
+    },
+    "./password-input": {
+      "types": "./dist/password-input/index.d.mts",
+      "import": "./dist/password-input/index.mjs"
+    },
+    "./picture": {
+      "types": "./dist/picture/index.d.mts",
+      "import": "./dist/picture/index.mjs"
+    },
+    "./protected-email": {
+      "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"
+    },
+    "./text": {
+      "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.mts",
+      "import": "./dist/utils/author/index.mjs"
+    },
+    "./utils/text": {
+      "types": "./dist/utils/text/index.d.mts",
+      "import": "./dist/utils/text/index.mjs"
+    }
   },
   "files": [
     "dist",
     "src"
   ],
   "scripts": {
-    "build": "tsdown && post-build-exports --preserve \"./tailwind.css\" && pnpm fix",
+    "build": "tsdown && pnpm fix",
     "clean": "exec-clean .turbo dist",
     "dev": "tsdown --watch",
     "fix": "exec-p fix:*",
@@ -57,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",
@@ -73,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",
@@ -102,7 +262,7 @@
     "playwright": "1.57.0",
     "storybook": "10.1.11",
     "tailwindcss": "4.1.18",
-    "tsdown": "0.20.0-beta.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

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Button } from './button';
 
-const meta = {
+const meta: Meta<typeof Button> = {
   argTypes: {
     children: {
       control: 'text',

package/src/button/button.tsx

@@ -96,7 +96,13 @@ export interface ButtonProps extends Omit<ComponentProps<typeof BaseUIButton>, '
   type?: 'button' | 'submit' | 'reset';
 }
 
-export const Button = ({ children, className, variant, size, ...props }: ButtonProps) => {
+export const Button = ({
+  children,
+  className,
+  variant,
+  size,
+  ...props
+}: ButtonProps): React.JSX.Element => {
   return (
     <BaseUIButton
       className={button({

package/src/carousel/carousel-content.tsx

@@ -1,16 +1,19 @@
-'use client';
+import type { HTMLAttributes } from 'react';
 
-import { forwardRef, type HTMLAttributes } from 'react';
+export interface CarouselContentProps extends HTMLAttributes<HTMLDivElement> {
+  ref?: React.Ref<HTMLDivElement>;
+}
 
-export const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        className={className}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-CarouselContent.displayName = 'CarouselContent';
+export const CarouselContent = function CarouselContent({
+  className,
+  ref,
+  ...props
+}: CarouselContentProps): React.JSX.Element {
+  return (
+    <div
+      className={className}
+      ref={ref}
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-item.tsx

@@ -1,23 +1,23 @@
-'use client';
-
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 
 export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
   'aria-label'?: string;
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      // biome-ignore lint/a11y/useSemanticElements: False positive
-      <div
-        aria-roledescription="slide"
-        className={className}
-        ref={ref}
-        role="group"
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = 'CarouselItem';
+export const CarouselItem = function CarouselItem({
+  className,
+  ref,
+  ...props
+}: CarouselItemProps): React.JSX.Element {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: False positive
+    <div
+      aria-roledescription="slide"
+      className={className}
+      ref={ref}
+      role="group"
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-next.tsx

@@ -1,22 +1,27 @@
 'use client';
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import { Button } from '../button';
 import { useCarousel } from './carousel-root';
 
-export const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollNext, scrollNext } = useCarousel();
+export interface CarouselNextProps extends HTMLAttributes<HTMLButtonElement> {
+  ref?: React.Ref<HTMLButtonElement>;
+}
 
-    return (
-      <Button
-        className={className}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-CarouselNext.displayName = 'CarouselNext';
+export const CarouselNext = function CarouselNext({
+  className,
+  ref,
+  ...props
+}: CarouselNextProps): React.JSX.Element {
+  const { canScrollNext, scrollNext } = useCarousel();
+
+  return (
+    <Button
+      className={className}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      ref={ref}
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-previous.tsx

@@ -1,22 +1,27 @@
 'use client';
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import type { HTMLAttributes } from 'react';
 import { Button } from '../button';
 import { useCarousel } from './carousel-root';
 
-export const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollPrev, scrollPrev } = useCarousel();
+export interface CarouselPreviousProps extends HTMLAttributes<HTMLButtonElement> {
+  ref?: React.Ref<HTMLButtonElement>;
+}
 
-    return (
-      <Button
-        className={className}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-CarouselPrevious.displayName = 'CarouselPrevious';
+export const CarouselPrevious = function CarouselPrevious({
+  className,
+  ref,
+  ...props
+}: CarouselPreviousProps): React.JSX.Element {
+  const { canScrollPrev, scrollPrev } = useCarousel();
+
+  return (
+    <Button
+      className={className}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      ref={ref}
+      {...props}
+    />
+  );
+};

package/src/carousel/carousel-root.tsx

@@ -4,7 +4,6 @@ import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
 import useEmblaCarousel from 'embla-carousel-react';
 import {
   createContext,
-  forwardRef,
   type HTMLAttributes,
   type KeyboardEvent,
   useCallback,
@@ -25,7 +24,7 @@ interface CarouselContextValue {
 
 const CarouselContext = createContext<CarouselContextValue | null>(null);
 
-export function useCarousel() {
+export function useCarousel(): CarouselContextValue {
   const context = useContext(CarouselContext);
   if (!context) {
     throw new Error('useCarousel must be used within a <Carousel.Root />');
@@ -37,91 +36,97 @@ export interface CarouselRootProps extends HTMLAttributes<HTMLDivElement> {
   opts?: EmblaOptionsType;
   setApi?: (api: CarouselApi) => void;
   orientation?: 'horizontal' | 'vertical';
+  ref?: React.Ref<HTMLDivElement>;
 }
 
-export const CarouselRoot = forwardRef<HTMLDivElement, CarouselRootProps>(
-  ({ children, className, opts, orientation = 'horizontal', setApi, ...props }, ref) => {
-    const [emblaRef, emblaApi] = useEmblaCarousel({
-      ...opts,
-      axis: orientation === 'horizontal' ? 'x' : 'y',
-    });
-    const [canScrollPrev, setCanScrollPrev] = useState(false);
-    const [canScrollNext, setCanScrollNext] = useState(false);
-
-    const onSelect = useCallback((api: CarouselApi) => {
-      if (!api) {
-        return;
+export const CarouselRoot = function CarouselRoot({
+  children,
+  className,
+  opts,
+  orientation = 'horizontal',
+  setApi,
+  ref,
+  ...props
+}: CarouselRootProps): React.JSX.Element {
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === 'horizontal' ? 'x' : 'y',
+  });
+  const [canScrollPrev, setCanScrollPrev] = useState(false);
+  const [canScrollNext, setCanScrollNext] = useState(false);
+
+  const onSelect = useCallback((api: CarouselApi) => {
+    if (!api) {
+      return;
+    }
+    setCanScrollPrev(api.canScrollPrev());
+    setCanScrollNext(api.canScrollNext());
+  }, []);
+
+  const scrollPrev = useCallback(() => {
+    emblaApi?.scrollPrev();
+  }, [emblaApi]);
+
+  const scrollNext = useCallback(() => {
+    emblaApi?.scrollNext();
+  }, [emblaApi]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        scrollPrev();
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        scrollNext();
       }
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
-
-    const scrollPrev = useCallback(() => {
-      emblaApi?.scrollPrev();
-    }, [emblaApi]);
-
-    const scrollNext = useCallback(() => {
-      emblaApi?.scrollNext();
-    }, [emblaApi]);
-
-    const handleKeyDown = useCallback(
-      (event: KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === 'ArrowLeft') {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === 'ArrowRight') {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext],
-    );
-
-    useEffect(() => {
-      if (!emblaApi || !setApi) {
-        return;
-      }
-      setApi(emblaApi);
-    }, [emblaApi, setApi]);
-
-    useEffect(() => {
-      if (!emblaApi) {
-        return;
-      }
-
-      onSelect(emblaApi);
-      emblaApi.on('reInit', onSelect);
-      emblaApi.on('select', onSelect);
-
-      return () => {
-        emblaApi?.off('select', onSelect);
-      };
-    }, [emblaApi, onSelect]);
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          api: emblaApi,
-          canScrollNext,
-          canScrollPrev,
-          scrollNext,
-          scrollPrev,
-        }}
+    },
+    [scrollPrev, scrollNext],
+  );
+
+  useEffect(() => {
+    if (!emblaApi || !setApi) {
+      return;
+    }
+    setApi(emblaApi);
+  }, [emblaApi, setApi]);
+
+  useEffect(() => {
+    if (!emblaApi) {
+      return;
+    }
+
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onSelect);
+    emblaApi.on('select', onSelect);
+
+    return () => {
+      emblaApi?.off('select', onSelect);
+    };
+  }, [emblaApi, onSelect]);
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        api: emblaApi,
+        canScrollNext,
+        canScrollPrev,
+        scrollNext,
+        scrollPrev,
+      }}
+    >
+      <section
+        aria-label="Carousel"
+        aria-roledescription="carousel"
+        className={className}
+        onKeyDownCapture={handleKeyDown}
+        ref={ref}
+        {...props}
       >
-        <section
-          aria-label="Carousel"
-          aria-roledescription="carousel"
-          className={className}
-          onKeyDownCapture={handleKeyDown}
-          ref={ref}
-          {...props}
-        >
-          <div ref={emblaRef}>
-            <div>{children}</div>
-          </div>
-        </section>
-      </CarouselContext.Provider>
-    );
-  },
-);
-CarouselRoot.displayName = 'CarouselRoot';
+        <div ref={emblaRef}>
+          <div>{children}</div>
+        </div>
+      </section>
+    </CarouselContext.Provider>
+  );
+};