@regardio/react 0.4.7 → 0.5.5

package/LICENSE

@@ -1,6 +1,6 @@
 # The MIT License (MIT)
 
-Copyright © 2025 Regardio
+Copyright © 2026 Regardio
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/README.md

@@ -41,10 +41,9 @@ This package requires:
 Import components, hooks, and utilities directly from their paths for optimal tree-shaking:
 
 ```tsx
-import { Box } from '@regardio/react/components/box';
-import { Link } from '@regardio/react/components/link';
+import { Box } from '@regardio/react/box';
+import { Link } from '@regardio/react/link';
 import { useNonce } from '@regardio/react/hooks/use-nonce';
-import { cn } from '@regardio/react/utils/cn';
 ```
 
 ### TailwindCSS Integration
@@ -52,7 +51,7 @@ import { cn } from '@regardio/react/utils/cn';
 Components use TailwindCSS for styling. Import the base styles in your app:
 
 ```tsx
-import '@regardio/react/styles/tailwind.css';
+import '@regardio/react/tailwind.css';
 ```
 
 ## What's Included
@@ -66,7 +65,6 @@ import '@regardio/react/styles/tailwind.css';
 | `Box` | Flexible container with variant-based styling |
 | `Carousel` | Embla-powered carousel with navigation controls |
 | `Countdown` | Dynamic countdown timer display |
-| `DefinitionList` | Semantic `<dl>` with `Dt` and `Dd` sub-components |
 | `GenericError` | React Router error boundary with i18n support |
 | `Heading` | Semantic headings (h1-h6) with consistent styling |
 | `Highlight` | Text highlighting with customizable styles |
@@ -76,14 +74,13 @@ import '@regardio/react/styles/tailwind.css';
 | `Item` | Grid item with theme colors and link support |
 | `LeafletMap` | Leaflet map integration |
 | `Link` | React Router link with external URL detection |
-| `ListItem` | Styled list item component |
+| `List` | Compound list component with Root and Item |
 | `MaptilerMap` | MapTiler SDK integration |
 | `MarkdownContainer` | MDX/Markdown renderer with typography processing |
 | `PasswordInput` | Password field with visibility toggle |
 | `Picture` | Responsive images with srcset generation |
 | `ProtectedEmail` | Email obfuscation for spam protection |
 | `Text` | Typography component with variants |
-| `UnorderedList` | Styled unordered list with variants |
 
 ### Hooks
 
@@ -102,12 +99,13 @@ import '@regardio/react/styles/tailwind.css';
 
 | Utility | Description |
 |---------|-------------|
-| `cn` | TailwindCSS class name merging (tailwind-merge + cva) |
 | `author` | Author/contributor data formatting |
 | `isRouteActive` | Route matching utilities |
 | `locale` | Locale detection and formatting |
 | `text` | Typography processing (quotes, special chars) |
 
+> **Note:** For Tailwind utilities like `cn`, `tv`, and `twMerge`, use `@regardio/tailwind/utils` instead.
+
 ## Documentation
 
 See the [docs](./docs) folder for detailed documentation on each component, hook, and utility.

package/dist/{components/background-slideshow.js → background-slideshow/index.js}

@@ -1,17 +1,8 @@
 import { useMemo, useState, useRef, useEffect } from 'react';
-import { defineConfig, cx } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { cn } from '@regardio/tailwind/utils';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-// src/components/background-slideshow.tsx
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
-var cn = (...inputs) => twMerge(cx(inputs));
+// src/background-slideshow/background-slideshow.tsx
 var Picture = ({
   alt,
   baseUrl,

package/dist/{components/blurry-gradient.js → blurry-gradient/index.js}

@@ -1,8 +1,14 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-// src/components/blurry-gradient.tsx
+// src/blurry-gradient/blurry-gradient.tsx
 var BlurryGradient = (props) => {
-  const { description = "Decorative blurry gradient", ...svgProps } = props;
+  const {
+    description = "Decorative blurry gradient",
+    neutralColor,
+    primaryColor,
+    secondaryColor,
+    ...svgProps
+  } = props;
   const titleId = "blurryGradientTitle";
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -53,7 +59,7 @@ var BlurryGradient = (props) => {
         /* @__PURE__ */ jsx(
           "rect",
           {
-            fill: props.primaryColor,
+            fill: primaryColor,
             height: "1000",
             width: "1000"
           }
@@ -64,7 +70,7 @@ var BlurryGradient = (props) => {
             {
               cx: "730",
               cy: "559",
-              fill: props.secondaryColor,
+              fill: secondaryColor,
               r: "357"
             }
           ),
@@ -73,7 +79,7 @@ var BlurryGradient = (props) => {
             {
               cx: "316",
               cy: "248",
-              fill: props.primaryColor,
+              fill: primaryColor,
               r: "357"
             }
           ),
@@ -82,7 +88,7 @@ var BlurryGradient = (props) => {
             {
               cx: "509",
               cy: "410",
-              fill: props.neutralColor,
+              fill: neutralColor,
               r: "357"
             }
           ),
@@ -91,7 +97,7 @@ var BlurryGradient = (props) => {
             {
               cx: "633",
               cy: "232",
-              fill: props.secondaryColor,
+              fill: secondaryColor,
               r: "357"
             }
           ),
@@ -100,7 +106,7 @@ var BlurryGradient = (props) => {
             {
               cx: "156",
               cy: "82",
-              fill: props.primaryColor,
+              fill: primaryColor,
               r: "357"
             }
           ),
@@ -109,7 +115,7 @@ var BlurryGradient = (props) => {
             {
               cx: "150",
               cy: "389",
-              fill: props.neutralColor,
+              fill: neutralColor,
               r: "357"
             }
           )

package/dist/{components/carousel.d.ts → carousel/index.d.ts}

@@ -1,6 +1,11 @@
 import * as react from 'react';
 import { HTMLAttributes } from 'react';
-import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
+import { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    'aria-label'?: string;
+}
+declare const CarouselItem: react.ForwardRefExoticComponent<CarouselItemProps & react.RefAttributes<HTMLDivElement>>;
 
 type CarouselApi = EmblaCarouselType;
 interface CarouselContextValue {
@@ -11,18 +16,21 @@ interface CarouselContextValue {
     canScrollNext: boolean;
 }
 declare function useCarousel(): CarouselContextValue;
-interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+interface CarouselRootProps extends HTMLAttributes<HTMLDivElement> {
     opts?: EmblaOptionsType;
     setApi?: (api: CarouselApi) => void;
     orientation?: 'horizontal' | 'vertical';
 }
-declare const Carousel: react.ForwardRefExoticComponent<CarouselProps & react.RefAttributes<HTMLDivElement>>;
+declare const CarouselRoot: react.ForwardRefExoticComponent<CarouselRootProps & react.RefAttributes<HTMLDivElement>>;
+
 declare const CarouselContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
-interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
-    'aria-label'?: string;
-}
-declare const CarouselItem: react.ForwardRefExoticComponent<CarouselItemProps & react.RefAttributes<HTMLDivElement>>;
-declare const CarouselPrevious: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
 declare const CarouselNext: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
 
-export { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+declare const CarouselPrevious: react.ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>>;
+
+declare namespace index_parts {
+  export { CarouselContent as Content, CarouselItem as Item, CarouselNext as Next, CarouselPrevious as Previous, CarouselRoot as Root };
+}
+
+export { index_parts as Carousel, type CarouselApi, type CarouselItemProps, type CarouselRootProps, useCarousel };

package/dist/{components/carousel.js → carousel/index.js}

@@ -1,27 +1,21 @@
 import useEmblaCarousel from 'embla-carousel-react';
 import { createContext, forwardRef, useState, useCallback, useEffect, useContext } from 'react';
-import { defineConfig, cx } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
-// src/components/carousel.tsx
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
-var cn = (...inputs) => twMerge(cx(inputs));
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var CarouselContext = createContext(null);
 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;
 }
-var Carousel = forwardRef(
+var CarouselRoot = forwardRef(
   ({ children, className, opts, orientation = "horizontal", setApi, ...props }, ref) => {
     const [emblaRef, emblaApi] = useEmblaCarousel({
       ...opts,
@@ -86,7 +80,7 @@ var Carousel = forwardRef(
           {
             "aria-label": "Carousel",
             "aria-roledescription": "carousel",
-            className: cn("relative", className),
+            className,
             onKeyDownCapture: handleKeyDown,
             ref,
             ...props,
@@ -97,13 +91,23 @@ var Carousel = forwardRef(
     );
   }
 );
-Carousel.displayName = "Carousel";
+CarouselRoot.displayName = "CarouselRoot";
+
+// src/carousel/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Content: () => CarouselContent,
+  Item: () => CarouselItem,
+  Next: () => CarouselNext,
+  Previous: () => CarouselPrevious,
+  Root: () => CarouselRoot
+});
 var CarouselContent = forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "div",
       {
-        className: cn("flex", className),
+        className,
         ref,
         ...props
       }
@@ -119,7 +123,7 @@ var CarouselItem = forwardRef(
         "div",
         {
           "aria-roledescription": "slide",
-          className: cn("min-w-0 shrink-0 grow-0", className),
+          className,
           ref,
           role: "group",
           ...props
@@ -129,15 +133,15 @@ var CarouselItem = forwardRef(
   }
 );
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = forwardRef(
+var CarouselNext = forwardRef(
   ({ className, ...props }, ref) => {
-    const { canScrollPrev, scrollPrev } = useCarousel();
+    const { canScrollNext, scrollNext } = useCarousel();
     return /* @__PURE__ */ jsx(
       "button",
       {
-        className: cn("disabled:opacity-50", className),
-        disabled: !canScrollPrev,
-        onClick: scrollPrev,
+        className,
+        disabled: !canScrollNext,
+        onClick: scrollNext,
         ref,
         type: "button",
         ...props
@@ -145,16 +149,16 @@ var CarouselPrevious = forwardRef(
     );
   }
 );
-CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = forwardRef(
+CarouselNext.displayName = "CarouselNext";
+var CarouselPrevious = forwardRef(
   ({ className, ...props }, ref) => {
-    const { canScrollNext, scrollNext } = useCarousel();
+    const { canScrollPrev, scrollPrev } = useCarousel();
     return /* @__PURE__ */ jsx(
       "button",
       {
-        className: cn("disabled:opacity-50", className),
-        disabled: !canScrollNext,
-        onClick: scrollNext,
+        className,
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
         ref,
         type: "button",
         ...props
@@ -162,6 +166,6 @@ var CarouselNext = forwardRef(
     );
   }
 );
-CarouselNext.displayName = "CarouselNext";
+CarouselPrevious.displayName = "CarouselPrevious";
 
-export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+export { index_parts_exports as Carousel, useCarousel };

package/dist/{components/countdown.js → countdown/index.js}

@@ -1,17 +1,8 @@
+import { cn } from '@regardio/tailwind/utils';
 import { useState, useEffect } from 'react';
-import { defineConfig, cx } from 'cva';
-import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
-// src/components/countdown.tsx
-var { cva, compose } = defineConfig({
-  hooks: {
-    onComplete: (className) => {
-      return twMerge(className);
-    }
-  }
-});
-var cn = (...inputs) => twMerge(cx(inputs));
+// src/countdown/countdown.tsx
 function Countdown() {
   const [timerValue, setTimerValue] = useState(0);
   const [isMounted, setIsMounted] = useState(false);

package/dist/{components/generic-error.js → generic-error/index.js}

@@ -1,7 +1,7 @@
 import { isRouteErrorResponse, useRouteError } from 'react-router';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
-// src/components/generic-error.tsx
+// src/generic-error/generic-error.tsx
 function getErrorDescriptor(error) {
   if (isRouteErrorResponse(error)) {
     const status = error.status;