@regardio/react 0.3.2 → 0.4.0

package/dist/components/carousel.js

@@ -1,87 +1,167 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import useEmblaCarousel from 'embla-carousel-react';
-import { createContext, forwardRef, useCallback, useContext, useEffect, useState, } from 'react';
-import { cn } from '../utils/cn';
-const CarouselContext = createContext(null);
-function useCarousel() {
-    const context = useContext(CarouselContext);
-    if (!context) {
-        throw new Error('useCarousel must be used within a <Carousel />');
+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);
     }
-    return context;
+  }
+});
+var cn = (...inputs) => twMerge(cx(inputs));
+var CarouselContext = createContext(null);
+function useCarousel() {
+  const context = useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
 }
-const Carousel = forwardRef(({ children, className, opts, orientation = 'horizontal', setApi, ...props }, ref) => {
+var Carousel = forwardRef(
+  ({ children, className, opts, orientation = "horizontal", setApi, ...props }, ref) => {
     const [emblaRef, emblaApi] = useEmblaCarousel({
-        ...opts,
-        axis: orientation === 'horizontal' ? 'x' : 'y',
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y"
     });
     const [canScrollPrev, setCanScrollPrev] = useState(false);
     const [canScrollNext, setCanScrollNext] = useState(false);
     const onSelect = useCallback((api) => {
-        if (!api) {
-            return;
-        }
-        setCanScrollPrev(api.canScrollPrev());
-        setCanScrollNext(api.canScrollNext());
+      if (!api) {
+        return;
+      }
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
     }, []);
     const scrollPrev = useCallback(() => {
-        emblaApi?.scrollPrev();
+      emblaApi?.scrollPrev();
     }, [emblaApi]);
     const scrollNext = useCallback(() => {
-        emblaApi?.scrollNext();
+      emblaApi?.scrollNext();
     }, [emblaApi]);
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            scrollPrev();
+    const handleKeyDown = useCallback(
+      (event) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
         }
-        else if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            scrollNext();
-        }
-    }, [scrollPrev, scrollNext]);
+      },
+      [scrollPrev, scrollNext]
+    );
     useEffect(() => {
-        if (!emblaApi || !setApi) {
-            return;
-        }
-        setApi(emblaApi);
+      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);
-        };
+      if (!emblaApi) {
+        return;
+      }
+      onSelect(emblaApi);
+      emblaApi.on("reInit", onSelect);
+      emblaApi.on("select", onSelect);
+      return () => {
+        emblaApi?.off("select", onSelect);
+      };
     }, [emblaApi, onSelect]);
-    return (_jsx(CarouselContext.Provider, { value: {
-            api: emblaApi,
-            canScrollNext,
-            canScrollPrev,
-            scrollNext,
-            scrollPrev,
-        }, children: _jsx("section", { "aria-label": "Carousel", "aria-roledescription": "carousel", className: cn('relative', className), onKeyDownCapture: handleKeyDown, ref: ref, ...props, children: _jsx("div", { ref: emblaRef, children: _jsx("div", { children: children }) }) }) }));
-});
-Carousel.displayName = 'Carousel';
-const CarouselContent = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("div", { className: cn('flex', className), ref: ref, ...props }));
-});
-CarouselContent.displayName = 'CarouselContent';
-const CarouselItem = forwardRef(({ className, ...props }, ref) => {
-    return (_jsx("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(({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      CarouselContext.Provider,
+      {
+        value: {
+          api: emblaApi,
+          canScrollNext,
+          canScrollPrev,
+          scrollNext,
+          scrollPrev
+        },
+        children: /* @__PURE__ */ jsx(
+          "section",
+          {
+            "aria-label": "Carousel",
+            "aria-roledescription": "carousel",
+            className: cn("relative", className),
+            onKeyDownCapture: handleKeyDown,
+            ref,
+            ...props,
+            children: /* @__PURE__ */ jsx("div", { ref: emblaRef, children: /* @__PURE__ */ jsx("div", { children }) })
+          }
+        )
+      }
+    );
+  }
+);
+Carousel.displayName = "Carousel";
+var CarouselContent = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("flex", className),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+var CarouselItem = forwardRef(
+  ({ className, ...props }, ref) => {
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: False positive
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-roledescription": "slide",
+          className: cn("min-w-0 shrink-0 grow-0", className),
+          ref,
+          role: "group",
+          ...props
+        }
+      )
+    );
+  }
+);
+CarouselItem.displayName = "CarouselItem";
+var CarouselPrevious = forwardRef(
+  ({ className, ...props }, ref) => {
     const { canScrollPrev, scrollPrev } = useCarousel();
-    return (_jsx("button", { className: cn('disabled:opacity-50', className), disabled: !canScrollPrev, onClick: scrollPrev, ref: ref, type: "button", ...props }));
-});
-CarouselPrevious.displayName = 'CarouselPrevious';
-const CarouselNext = forwardRef(({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn("disabled:opacity-50", className),
+        disabled: !canScrollPrev,
+        onClick: scrollPrev,
+        ref,
+        type: "button",
+        ...props
+      }
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+var CarouselNext = forwardRef(
+  ({ className, ...props }, ref) => {
     const { canScrollNext, scrollNext } = useCarousel();
-    return (_jsx("button", { className: cn('disabled:opacity-50', className), disabled: !canScrollNext, onClick: scrollNext, ref: ref, type: "button", ...props }));
-});
-CarouselNext.displayName = 'CarouselNext';
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: cn("disabled:opacity-50", className),
+        disabled: !canScrollNext,
+        onClick: scrollNext,
+        ref,
+        type: "button",
+        ...props
+      }
+    );
+  }
+);
+CarouselNext.displayName = "CarouselNext";
+
 export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/dist/components/countdown.d.ts

@@ -1,2 +1,5 @@
-export declare function Countdown(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=countdown.d.ts.map
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Countdown(): react_jsx_runtime.JSX.Element;
+
+export { Countdown };

package/dist/components/countdown.js

@@ -1,22 +1,51 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { cn } from '../utils/cn';
-export function Countdown() {
-    const [timerValue, setTimerValue] = useState(0);
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => {
-        setIsMounted(true);
-        const intervalId = setInterval(() => {
-            setTimerValue((prevValue) => {
-                return prevValue + 1;
-            });
-        }, 1000);
-        return () => {
-            return clearInterval(intervalId);
-        };
-    }, []);
-    return (_jsx("div", { className: cn('before:absolute', 'before:bg-white', 'before:content-[""]', 'before:h-[180px]', 'before:rounded-full', 'before:w-[180px]', 'flex', 'h-[240px]', 'items-center', 'justify-center', 'relative', 'rounded-full', 'w-[240px]'), style: {
-            background: `conic-gradient(
+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));
+function Countdown() {
+  const [timerValue, setTimerValue] = useState(0);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+    const intervalId = setInterval(() => {
+      setTimerValue((prevValue) => {
+        return prevValue + 1;
+      });
+    }, 1e3);
+    return () => {
+      return clearInterval(intervalId);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "before:absolute",
+        "before:bg-white",
+        'before:content-[""]',
+        "before:h-[180px]",
+        "before:rounded-full",
+        "before:w-[180px]",
+        "flex",
+        "h-[240px]",
+        "items-center",
+        "justify-center",
+        "relative",
+        "rounded-full",
+        "w-[240px]"
+      ),
+      style: {
+        background: `conic-gradient(
           transparent ${6 * (isMounted ? timerValue : 0)}deg,
           hsl(var(--red-500)) 0deg,
           hsl(var(--red-500)) 15deg,
@@ -43,6 +72,11 @@ export function Countdown() {
           hsl(var(--pink-500)) 315deg,
           hsl(var(--pink-500)) 345deg,
           hsl(var(--red-500)) 345deg
-          )`,
-        }, children: _jsx("span", { className: cn('text-foreground', 'relative', 'text-3xl', 'font-bold'), children: isMounted ? (timerValue < 10 ? `0${timerValue}` : timerValue) : 0 }) }));
+          )`
+      },
+      children: /* @__PURE__ */ jsx("span", { className: cn("text-foreground", "relative", "text-3xl", "font-bold"), children: isMounted ? timerValue < 10 ? `0${timerValue}` : timerValue : 0 })
+    }
+  );
 }
+
+export { Countdown };

package/dist/components/definition-list.d.ts

@@ -1,40 +1,43 @@
-import type { ComponentProps } from 'react';
-import { type VariantProps } from '../utils/cn';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as cva from 'cva';
+import { VariantProps } from 'cva';
+import { ComponentProps } from 'react';
+
 declare const dl: (props?: ({
     variant?: "primary" | "unstyled" | undefined;
 } & ({
-    class?: import("cva").ClassValue;
+    class?: cva.ClassValue;
     className?: never;
 } | {
     class?: never;
-    className?: import("cva").ClassValue;
+    className?: cva.ClassValue;
 })) | undefined) => string;
 declare const dt: (props?: ({
     variant?: "primary" | undefined;
 } & ({
-    class?: import("cva").ClassValue;
+    class?: cva.ClassValue;
     className?: never;
 } | {
     class?: never;
-    className?: import("cva").ClassValue;
+    className?: cva.ClassValue;
 })) | undefined) => string;
 declare const dd: (props?: ({
     variant?: "primary" | undefined;
 } & ({
-    class?: import("cva").ClassValue;
+    class?: cva.ClassValue;
     className?: never;
 } | {
     class?: never;
-    className?: import("cva").ClassValue;
+    className?: cva.ClassValue;
 })) | undefined) => string;
-export interface DefinitionListProps extends ComponentProps<'dl'>, VariantProps<typeof dl> {
+interface DefinitionListProps extends ComponentProps<'dl'>, VariantProps<typeof dl> {
 }
-export interface DtProps extends ComponentProps<'dt'>, VariantProps<typeof dt> {
+interface DtProps extends ComponentProps<'dt'>, VariantProps<typeof dt> {
 }
-export interface DdProps extends ComponentProps<'dd'>, VariantProps<typeof dd> {
+interface DdProps extends ComponentProps<'dd'>, VariantProps<typeof dd> {
 }
-export declare const DefinitionList: (props: DefinitionListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Dt: (props: DtProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Dd: (props: DdProps) => import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=definition-list.d.ts.map
+declare const DefinitionList: (props: DefinitionListProps) => react_jsx_runtime.JSX.Element;
+declare const Dt: (props: DtProps) => react_jsx_runtime.JSX.Element;
+declare const Dd: (props: DdProps) => react_jsx_runtime.JSX.Element;
+
+export { Dd, type DdProps, DefinitionList, type DefinitionListProps, Dt, type DtProps };

package/dist/components/definition-list.js

@@ -1,57 +1,89 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { cva } from '../utils/cn';
-const dl = cva({
-    base: ['grid'],
-    defaultVariants: {
-        variant: 'primary',
-    },
-    variants: {
-        variant: {
-            primary: ['grid-cols-[auto,1fr]', 'gap-x-s', 'gap-y-2xs'],
-            unstyled: ['list-none', 'p-0', 'grid-cols-1'],
-        },
-    },
+import { defineConfig } from 'cva';
+import { twMerge } from 'fluid-tailwindcss/tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/utils/cn.ts
+var { cva, compose } = defineConfig({
+  hooks: {
+    onComplete: (className) => {
+      return twMerge(className);
+    }
+  }
 });
-const dt = cva({
-    base: [],
-    defaultVariants: {
-        variant: 'primary',
-    },
-    variants: {
-        variant: {
-            primary: ['uppercase', 'tracking-wide'],
-        },
-    },
+var dl = cva({
+  base: ["grid"],
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: ["grid-cols-[auto,1fr]", "gap-x-s", "gap-y-2xs"],
+      // Two-column grid with gap
+      unstyled: ["list-none", "p-0", "grid-cols-1"]
+      // Unstyled, single column
+    }
+  }
 });
-const dd = cva({
-    base: ['mb-xs'],
-    defaultVariants: {
-        variant: 'primary',
-    },
-    variants: {
-        variant: {
-            primary: [],
-        },
-    },
+var dt = cva({
+  base: [],
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: ["uppercase", "tracking-wide"]
+    }
+  }
 });
-export const DefinitionList = (props) => {
-    const { children, className, variant } = props;
-    return (_jsx("dl", { className: dl({
-            className,
-            variant,
-        }), children: children }));
+var dd = cva({
+  base: ["mb-xs"],
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: []
+    }
+  }
+});
+var DefinitionList = (props) => {
+  const { children, className, variant } = props;
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      className: dl({
+        className,
+        variant
+      }),
+      children
+    }
+  );
 };
-export const Dt = (props) => {
-    const { children, className, variant } = props;
-    return (_jsx("dt", { className: dt({
-            className,
-            variant,
-        }), children: children }));
+var Dt = (props) => {
+  const { children, className, variant } = props;
+  return /* @__PURE__ */ jsx(
+    "dt",
+    {
+      className: dt({
+        className,
+        variant
+      }),
+      children
+    }
+  );
 };
-export const Dd = (props) => {
-    const { children, className, variant } = props;
-    return (_jsx("dd", { className: dd({
-            className,
-            variant,
-        }), children: children }));
+var Dd = (props) => {
+  const { children, className, variant } = props;
+  return /* @__PURE__ */ jsx(
+    "dd",
+    {
+      className: dd({
+        className,
+        variant
+      }),
+      children
+    }
+  );
 };
+
+export { Dd, DefinitionList, Dt };

package/dist/components/generic-error.d.ts

@@ -1,5 +1,9 @@
-import type { ReactElement } from 'react';
-export type ErrorDescriptor = {
+import { ReactElement } from 'react';
+
+/**
+ * Descriptor returned from getErrorDescriptor to help apps localize messages.
+ */
+type ErrorDescriptor = {
     type: 'http';
     status: number;
     statusText: string;
@@ -16,8 +20,24 @@ export type ErrorDescriptor = {
     defaultId: string;
     defaultMessage: string;
 };
-export declare function getErrorDescriptor(error: unknown): ErrorDescriptor;
-export declare function GenericError({ renderMessage, }?: {
+/**
+ * Compute a normalized error descriptor from a React Router error.
+ * Apps can use this to map to i18n keys.
+ */
+declare function getErrorDescriptor(error: unknown): ErrorDescriptor;
+/**
+ * GenericError
+ *
+ * A reusable error boundary component for React Router apps.
+ * - Displays status-based messages for route responses
+ * - Shows stack traces in development for non-response errors
+ *
+ * For localization, apps may either:
+ * - Wrap this component and use `getErrorDescriptor(useRouteError())` to map to i18n keys
+ * - Or provide a custom `renderMessage` to override the displayed details
+ */
+declare function GenericError({ renderMessage, }?: {
     renderMessage?: (descriptor: ErrorDescriptor) => ReactElement;
 }): ReactElement;
-//# sourceMappingURL=generic-error.d.ts.map
+
+export { type ErrorDescriptor, GenericError, getErrorDescriptor };

package/dist/components/generic-error.js

@@ -1,39 +1,47 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { isRouteErrorResponse, useRouteError } from 'react-router';
-export function getErrorDescriptor(error) {
-    if (isRouteErrorResponse(error)) {
-        const status = error.status;
-        const statusText = error.statusText || 'Error';
-        return {
-            defaultId: status === 404 ? 'errors.404' : 'errors.http',
-            defaultMessage: status === 404 ? 'Not found' : `Error ${status}`,
-            status,
-            statusText,
-            type: 'http',
-        };
-    }
-    if (error instanceof Error) {
-        return {
-            defaultId: 'errors.runtime',
-            defaultMessage: 'An unexpected error occurred.',
-            message: error.message,
-            type: 'error',
-            ...(error.stack ? { stack: error.stack } : {}),
-        };
-    }
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/generic-error.tsx
+function getErrorDescriptor(error) {
+  if (isRouteErrorResponse(error)) {
+    const status = error.status;
+    const statusText = error.statusText || "Error";
     return {
-        defaultId: 'errors.unknown',
-        defaultMessage: 'An unexpected error occurred.',
-        type: 'unknown',
+      defaultId: status === 404 ? "errors.404" : "errors.http",
+      defaultMessage: status === 404 ? "Not found" : `Error ${status}`,
+      status,
+      statusText,
+      type: "http"
     };
+  }
+  if (error instanceof Error) {
+    return {
+      defaultId: "errors.runtime",
+      defaultMessage: "An unexpected error occurred.",
+      message: error.message,
+      type: "error",
+      ...error.stack ? { stack: error.stack } : {}
+    };
+  }
+  return {
+    defaultId: "errors.unknown",
+    defaultMessage: "An unexpected error occurred.",
+    type: "unknown"
+  };
 }
-export function GenericError({ renderMessage, } = {}) {
-    const error = useRouteError();
-    const descriptor = getErrorDescriptor(error);
-    const title = descriptor.type === 'http' ? `Error ${descriptor.status}` : 'Error';
-    return (_jsxs("main", { className: "pt-2xl p-sm container mx-auto", children: [_jsx("h1", { children: title }), renderMessage ? (renderMessage(descriptor)) : (_jsxs(_Fragment, { children: [_jsx("p", { children: descriptor.type === 'http'
-                            ? descriptor.defaultMessage
-                            : descriptor.type === 'error'
-                                ? descriptor.message || descriptor.defaultMessage
-                                : descriptor.defaultMessage }), import.meta.env.DEV && descriptor.type === 'error' && descriptor.stack && (_jsx("pre", { className: "w-full p-sm overflow-x-auto", children: _jsx("code", { children: descriptor.stack }) }))] }))] }));
+function GenericError({
+  renderMessage
+} = {}) {
+  const error = useRouteError();
+  const descriptor = getErrorDescriptor(error);
+  const title = descriptor.type === "http" ? `Error ${descriptor.status}` : "Error";
+  return /* @__PURE__ */ jsxs("main", { className: "pt-2xl p-sm container mx-auto", children: [
+    /* @__PURE__ */ jsx("h1", { children: title }),
+    renderMessage ? renderMessage(descriptor) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("p", { children: descriptor.type === "http" ? descriptor.defaultMessage : descriptor.type === "error" ? descriptor.message || descriptor.defaultMessage : descriptor.defaultMessage }),
+      import.meta.env.DEV && descriptor.type === "error" && descriptor.stack && /* @__PURE__ */ jsx("pre", { className: "w-full p-sm overflow-x-auto", children: /* @__PURE__ */ jsx("code", { children: descriptor.stack }) })
+    ] })
+  ] });
 }
+
+export { GenericError, getErrorDescriptor };