@regardio/react 0.4.7 → 0.5.1

package/package.json

@@ -9,13 +9,12 @@
     "@maptiler/leaflet-maptilersdk": "4.1.1",
     "@maptiler/sdk": "3.9.0",
     "@mdx-js/react": "3.1.1",
-    "@regardio/js": "0.4.2",
-    "@supabase/supabase-js": "2.89.0",
+    "@regardio/js": "0.5.0",
+    "@regardio/tailwind": "0.1.2",
+    "@supabase/supabase-js": "2.90.0",
     "cmdk": "1.1.1",
-    "cva": "beta",
     "embla-carousel": "8.6.0",
     "embla-carousel-react": "8.6.0",
-    "fluid-tailwindcss": "1.0.5",
     "input-otp": "1.4.2",
     "intl-parse-accept-language": "1.0.0",
     "leaflet": "alpha",
@@ -25,15 +24,15 @@
     "react-day-picker": "9.13.0",
     "react-dom": "19.2.3",
     "react-hook-form": "7.70.0",
-    "react-resizable-panels": "4.2.1",
+    "react-resizable-panels": "4.3.0",
     "react-router": "7.11.0",
-    "tailwind-merge": "3.4.0",
+    "tailwind-variants": "3.2.2",
     "vaul": "1.1.2",
     "zod": "4.3.5"
   },
   "description": "Regardio React UI components",
   "devDependencies": {
-    "@regardio/dev": "1.10.1",
+    "@regardio/dev": "1.10.3",
     "@storybook/addon-a11y": "10.1.11",
     "@storybook/addon-docs": "10.1.11",
     "@storybook/addon-vitest": "10.1.11",
@@ -56,153 +55,125 @@
     "tailwindcss": "4.1.18",
     "tsup": "8.5.1",
     "typescript": "5.9.3",
-    "vite": "7.3.0",
+    "vite": "7.3.1",
     "vitest": "4.0.16"
   },
   "engines": {
     "node": ">=18"
   },
   "exports": {
-    "./components/background-slideshow": {
-      "import": "./dist/components/background-slideshow.js",
-      "types": "./dist/components/background-slideshow.d.ts"
+    "./background-slideshow": {
+      "import": "./dist/background-slideshow/index.js",
+      "types": "./dist/background-slideshow/index.d.ts"
     },
-    "./components/blurry-gradient": {
-      "import": "./dist/components/blurry-gradient.js",
-      "types": "./dist/components/blurry-gradient.d.ts"
+    "./blurry-gradient": {
+      "import": "./dist/blurry-gradient/index.js",
+      "types": "./dist/blurry-gradient/index.d.ts"
     },
-    "./components/box": {
-      "import": "./dist/components/box.js",
-      "types": "./dist/components/box.d.ts"
+    "./carousel": {
+      "import": "./dist/carousel/index.js",
+      "types": "./dist/carousel/index.d.ts"
     },
-    "./components/carousel": {
-      "import": "./dist/components/carousel.js",
-      "types": "./dist/components/carousel.d.ts"
+    "./countdown": {
+      "import": "./dist/countdown/index.js",
+      "types": "./dist/countdown/index.d.ts"
     },
-    "./components/countdown": {
-      "import": "./dist/components/countdown.js",
-      "types": "./dist/components/countdown.d.ts"
+    "./generic-error": {
+      "import": "./dist/generic-error/index.js",
+      "types": "./dist/generic-error/index.d.ts"
     },
-    "./components/definition-list": {
-      "import": "./dist/components/definition-list.js",
-      "types": "./dist/components/definition-list.d.ts"
+    "./grid": {
+      "import": "./dist/grid/index.js",
+      "types": "./dist/grid/index.d.ts"
     },
-    "./components/generic-error": {
-      "import": "./dist/components/generic-error.js",
-      "types": "./dist/components/generic-error.d.ts"
+    "./heading": {
+      "import": "./dist/heading/index.js",
+      "types": "./dist/heading/index.d.ts"
     },
-    "./components/heading": {
-      "import": "./dist/components/heading.js",
-      "types": "./dist/components/heading.d.ts"
+    "./highlight": {
+      "import": "./dist/highlight/index.js",
+      "types": "./dist/highlight/index.d.ts"
     },
-    "./components/highlight": {
-      "import": "./dist/components/highlight.js",
-      "types": "./dist/components/highlight.d.ts"
-    },
-    "./components/icon-button": {
-      "import": "./dist/components/icon-button.js",
-      "types": "./dist/components/icon-button.d.ts"
-    },
-    "./components/if": {
-      "import": "./dist/components/if.js",
-      "types": "./dist/components/if.d.ts"
-    },
-    "./components/iframe": {
-      "import": "./dist/components/iframe.js",
-      "types": "./dist/components/iframe.d.ts"
-    },
-    "./components/item": {
-      "import": "./dist/components/item.js",
-      "types": "./dist/components/item.d.ts"
-    },
-    "./components/leaflet-map": {
-      "import": "./dist/components/leaflet-map.js",
-      "types": "./dist/components/leaflet-map.d.ts"
+    "./hooks/use-current-route-data": {
+      "import": "./dist/hooks/use-current-route-data/index.js",
+      "types": "./dist/hooks/use-current-route-data/index.d.ts"
     },
-    "./components/link": {
-      "import": "./dist/components/link.js",
-      "types": "./dist/components/link.d.ts"
+    "./hooks/use-focus-search": {
+      "import": "./dist/hooks/use-focus-search/index.js",
+      "types": "./dist/hooks/use-focus-search/index.d.ts"
     },
-    "./components/list-item": {
-      "import": "./dist/components/list-item.js",
-      "types": "./dist/components/list-item.d.ts"
+    "./hooks/use-matches-data": {
+      "import": "./dist/hooks/use-matches-data/index.js",
+      "types": "./dist/hooks/use-matches-data/index.d.ts"
     },
-    "./components/maptiler-map": {
-      "import": "./dist/components/maptiler-map.js",
-      "types": "./dist/components/maptiler-map.d.ts"
+    "./hooks/use-media-query": {
+      "import": "./dist/hooks/use-media-query/index.js",
+      "types": "./dist/hooks/use-media-query/index.d.ts"
     },
-    "./components/markdown-container": {
-      "import": "./dist/components/markdown-container.js",
-      "types": "./dist/components/markdown-container.d.ts"
+    "./hooks/use-mobile": {
+      "import": "./dist/hooks/use-mobile/index.js",
+      "types": "./dist/hooks/use-mobile/index.d.ts"
     },
-    "./components/password-input": {
-      "import": "./dist/components/password-input.js",
-      "types": "./dist/components/password-input.d.ts"
+    "./hooks/use-nonce": {
+      "import": "./dist/hooks/use-nonce/index.js",
+      "types": "./dist/hooks/use-nonce/index.d.ts"
     },
-    "./components/picture": {
-      "import": "./dist/components/picture.js",
-      "types": "./dist/components/picture.d.ts"
+    "./hooks/use-orientation": {
+      "import": "./dist/hooks/use-orientation/index.js",
+      "types": "./dist/hooks/use-orientation/index.d.ts"
     },
-    "./components/protected-email": {
-      "import": "./dist/components/protected-email.js",
-      "types": "./dist/components/protected-email.d.ts"
+    "./hooks/use-user": {
+      "import": "./dist/hooks/use-user/index.js",
+      "types": "./dist/hooks/use-user/index.d.ts"
     },
-    "./components/text": {
-      "import": "./dist/components/text.js",
-      "types": "./dist/components/text.d.ts"
+    "./icon-button": {
+      "import": "./dist/icon-button/index.js",
+      "types": "./dist/icon-button/index.d.ts"
     },
-    "./components/unordered-list": {
-      "import": "./dist/components/unordered-list.js",
-      "types": "./dist/components/unordered-list.d.ts"
+    "./if": {
+      "import": "./dist/if/index.js",
+      "types": "./dist/if/index.d.ts"
     },
-    "./hooks/use-current-route-data": {
-      "import": "./dist/hooks/use-current-route-data.js",
-      "types": "./dist/hooks/use-current-route-data.d.ts"
+    "./iframe": {
+      "import": "./dist/iframe/index.js",
+      "types": "./dist/iframe/index.d.ts"
     },
-    "./hooks/use-focus-search": {
-      "import": "./dist/hooks/use-focus-search.js",
-      "types": "./dist/hooks/use-focus-search.d.ts"
+    "./link": {
+      "import": "./dist/link/index.js",
+      "types": "./dist/link/index.d.ts"
     },
-    "./hooks/use-matches-data": {
-      "import": "./dist/hooks/use-matches-data.js",
-      "types": "./dist/hooks/use-matches-data.d.ts"
+    "./list": {
+      "import": "./dist/list/index.js",
+      "types": "./dist/list/index.d.ts"
     },
-    "./hooks/use-media-query": {
-      "import": "./dist/hooks/use-media-query.js",
-      "types": "./dist/hooks/use-media-query.d.ts"
+    "./markdown-container": {
+      "import": "./dist/markdown-container/index.js",
+      "types": "./dist/markdown-container/index.d.ts"
     },
-    "./hooks/use-mobile": {
-      "import": "./dist/hooks/use-mobile.js",
-      "types": "./dist/hooks/use-mobile.d.ts"
+    "./password-input": {
+      "import": "./dist/password-input/index.js",
+      "types": "./dist/password-input/index.d.ts"
     },
-    "./hooks/use-nonce": {
-      "import": "./dist/hooks/use-nonce.js",
-      "types": "./dist/hooks/use-nonce.d.ts"
+    "./picture": {
+      "import": "./dist/picture/index.js",
+      "types": "./dist/picture/index.d.ts"
     },
-    "./hooks/use-orientation": {
-      "import": "./dist/hooks/use-orientation.js",
-      "types": "./dist/hooks/use-orientation.d.ts"
+    "./protected-email": {
+      "import": "./dist/protected-email/index.js",
+      "types": "./dist/protected-email/index.d.ts"
     },
-    "./hooks/use-user": {
-      "import": "./dist/hooks/use-user.js",
-      "types": "./dist/hooks/use-user.d.ts"
+    "./tailwind.css": "./src/tailwind.css",
+    "./text": {
+      "import": "./dist/text/index.js",
+      "types": "./dist/text/index.d.ts"
     },
-    "./tailwind.css": "./src/styles/tailwind.css",
     "./utils/author": {
-      "import": "./dist/utils/author.js",
-      "types": "./dist/utils/author.d.ts"
-    },
-    "./utils/cn": {
-      "import": "./dist/utils/cn.js",
-      "types": "./dist/utils/cn.d.ts"
-    },
-    "./utils/is-route-active": {
-      "import": "./dist/utils/is-route-active.js",
-      "types": "./dist/utils/is-route-active.d.ts"
+      "import": "./dist/utils/author/index.js",
+      "types": "./dist/utils/author/index.d.ts"
     },
     "./utils/text": {
-      "import": "./dist/utils/text.js",
-      "types": "./dist/utils/text.d.ts"
+      "import": "./dist/utils/text/index.js",
+      "types": "./dist/utils/text/index.d.ts"
     }
   },
   "files": ["dist", "src"],
@@ -239,7 +210,7 @@
     "typecheck": "exec-tsc --noEmit",
     "version": "flow-changeset version"
   },
-  "sideEffects": ["./src/styles/tailwind.css"],
+  "sideEffects": ["./src/tailwind.css"],
   "type": "module",
-  "version": "0.4.7"
+  "version": "0.5.1"
 }

package/src/{stories/BackgroundSlideshow.stories.tsx → background-slideshow/background-slideshow.stories.tsx}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { BackgroundSlideshow, type ImageData } from '../components/background-slideshow';
+import { BackgroundSlideshow, type ImageData } from './background-slideshow';
 
 const meta: Meta<typeof BackgroundSlideshow> = {
   component: BackgroundSlideshow,

package/src/{components → background-slideshow}/background-slideshow.tsx

@@ -1,6 +1,8 @@
+'use client';
+
 import type { ReactElement } from 'react';
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { Picture } from './picture';
+import { Picture } from '../picture';
 
 export type ImageData = {
   at: Record<string, string>; // Alt text in different languages

package/src/background-slideshow/index.ts

@@ -0,0 +1,2 @@
+export type { BackgroundSlideshowProps, ImageData } from './background-slideshow';
+export { BackgroundSlideshow } from './background-slideshow';

package/src/{stories/BlurryGradient.stories.tsx → blurry-gradient/blurry-gradient.stories.tsx}

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { BlurryGradient } from '../components/blurry-gradient';
+import { BlurryGradient } from './blurry-gradient';
 
 const meta: Meta<typeof BlurryGradient> = {
   component: BlurryGradient,

package/src/{components → blurry-gradient}/blurry-gradient.tsx

@@ -12,7 +12,13 @@ export interface BlurryGradientProps extends SVGProps<SVGSVGElement> {
 }
 
 export const BlurryGradient = (props: BlurryGradientProps) => {
-  const { description = 'Decorative blurry gradient', ...svgProps } = props;
+  const {
+    description = 'Decorative blurry gradient',
+    neutralColor,
+    primaryColor,
+    secondaryColor,
+    ...svgProps
+  } = props;
   const titleId = 'blurryGradientTitle';
 
   return (
@@ -50,7 +56,7 @@ export const BlurryGradient = (props: BlurryGradientProps) => {
         </filter>
       </defs>
       <rect
-        fill={props.primaryColor}
+        fill={primaryColor}
         height="1000"
         width="1000"
       />
@@ -58,37 +64,37 @@ export const BlurryGradient = (props: BlurryGradientProps) => {
         <circle
           cx="730"
           cy="559"
-          fill={props.secondaryColor}
+          fill={secondaryColor}
           r="357"
         />
         <circle
           cx="316"
           cy="248"
-          fill={props.primaryColor}
+          fill={primaryColor}
           r="357"
         />
         <circle
           cx="509"
           cy="410"
-          fill={props.neutralColor}
+          fill={neutralColor}
           r="357"
         />
         <circle
           cx="633"
           cy="232"
-          fill={props.secondaryColor}
+          fill={secondaryColor}
           r="357"
         />
         <circle
           cx="156"
           cy="82"
-          fill={props.primaryColor}
+          fill={primaryColor}
           r="357"
         />
         <circle
           cx="150"
           cy="389"
-          fill={props.neutralColor}
+          fill={neutralColor}
           r="357"
         />
       </g>

package/src/blurry-gradient/index.ts

@@ -0,0 +1,2 @@
+export type { BlurryGradientProps } from './blurry-gradient';
+export { BlurryGradient } from './blurry-gradient';

package/src/carousel/carousel-content.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+
+export const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        className={className}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+CarouselContent.displayName = 'CarouselContent';

package/src/carousel/carousel-item.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+
+export interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+  'aria-label'?: string;
+}
+
+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';

package/src/carousel/carousel-next.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useCarousel } from './carousel-root';
+
+export const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { canScrollNext, scrollNext } = useCarousel();
+
+    return (
+      <button
+        className={className}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        ref={ref}
+        type="button"
+        {...props}
+      />
+    );
+  },
+);
+CarouselNext.displayName = 'CarouselNext';

package/src/carousel/carousel-previous.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { useCarousel } from './carousel-root';
+
+export const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { canScrollPrev, scrollPrev } = useCarousel();
+
+    return (
+      <button
+        className={className}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        ref={ref}
+        type="button"
+        {...props}
+      />
+    );
+  },
+);
+CarouselPrevious.displayName = 'CarouselPrevious';

package/src/{components/carousel.tsx → carousel/carousel-root.tsx}

@@ -1,3 +1,5 @@
+'use client';
+
 import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
 import useEmblaCarousel from 'embla-carousel-react';
 import {
@@ -10,7 +12,6 @@ import {
   useEffect,
   useState,
 } from 'react';
-import { cn } from '../utils/cn';
 
 export type CarouselApi = EmblaCarouselType;
 
@@ -24,21 +25,21 @@ interface CarouselContextValue {
 
 const CarouselContext = createContext<CarouselContextValue | null>(null);
 
-function useCarousel() {
+export function useCarousel() {
   const context = useContext(CarouselContext);
   if (!context) {
-    throw new Error('useCarousel must be used within a <Carousel />');
+    throw new Error('useCarousel must be used within a <Carousel.Root />');
   }
   return context;
 }
 
-interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+export interface CarouselRootProps extends HTMLAttributes<HTMLDivElement> {
   opts?: EmblaOptionsType;
   setApi?: (api: CarouselApi) => void;
   orientation?: 'horizontal' | 'vertical';
 }
 
-const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
+export const CarouselRoot = forwardRef<HTMLDivElement, CarouselRootProps>(
   ({ children, className, opts, orientation = 'horizontal', setApi, ...props }, ref) => {
     const [emblaRef, emblaApi] = useEmblaCarousel({
       ...opts,
@@ -110,7 +111,7 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
         <section
           aria-label="Carousel"
           aria-roledescription="carousel"
-          className={cn('relative', className)}
+          className={className}
           onKeyDownCapture={handleKeyDown}
           ref={ref}
           {...props}
@@ -123,75 +124,4 @@ const Carousel = forwardRef<HTMLDivElement, CarouselProps>(
     );
   },
 );
-Carousel.displayName = 'Carousel';
-
-const CarouselContent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => {
-    return (
-      <div
-        className={cn('flex', className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-CarouselContent.displayName = 'CarouselContent';
-
-interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-  'aria-label'?: string;
-}
-
-const CarouselItem = forwardRef<HTMLDivElement, CarouselItemProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      // biome-ignore lint/a11y/useSemanticElements: False positive
-      <div
-        aria-roledescription="slide"
-        className={cn('min-w-0 shrink-0 grow-0', className)}
-        ref={ref}
-        role="group"
-        {...props}
-      />
-    );
-  },
-);
-CarouselItem.displayName = 'CarouselItem';
-
-const CarouselPrevious = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollPrev, scrollPrev } = useCarousel();
-
-    return (
-      <button
-        className={cn('disabled:opacity-50', className)}
-        disabled={!canScrollPrev}
-        onClick={scrollPrev}
-        ref={ref}
-        type="button"
-        {...props}
-      />
-    );
-  },
-);
-CarouselPrevious.displayName = 'CarouselPrevious';
-
-const CarouselNext = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
-  ({ className, ...props }, ref) => {
-    const { canScrollNext, scrollNext } = useCarousel();
-
-    return (
-      <button
-        className={cn('disabled:opacity-50', className)}
-        disabled={!canScrollNext}
-        onClick={scrollNext}
-        ref={ref}
-        type="button"
-        {...props}
-      />
-    );
-  },
-);
-CarouselNext.displayName = 'CarouselNext';
-
-export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+CarouselRoot.displayName = 'CarouselRoot';