@regardio/react 0.3.2

package/LICENSE

@@ -0,0 +1,9 @@
+# The MIT License (MIT)
+
+Copyright © 2025 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:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,133 @@
+# @regardio/react
+
+> Reusable React components from Regardio's projects, released into the wild.
+
+Part of Regardio's ongoing mission to provide valuable building blocks for achieving personal and shared aims. We build reusable tools, and commonly used React components from our projects live here for everyone to use.
+
+## ⚠️ Pre-release Notice
+
+**This package is currently in pre-release (v0.x).** While we use these components in production across our own projects, the API may still change between minor versions. We recommend:
+
+- Pinning to exact versions in your `package.json`
+- Reviewing changelogs before upgrading
+- Expecting potential breaking changes until v1.0
+
+## Why This Package?
+
+We created `@regardio/react` to:
+
+- **Share battle-tested components** — These components power real Regardio projects and have been refined through actual use
+- **Reduce duplication** — Instead of copying components between projects, we maintain them in one place
+- **Provide sensible defaults** — Components come pre-configured with accessibility, responsive design, and TailwindCSS integration
+- **Enable tree-shaking** — Import only what you need; unused components won't bloat your bundle
+
+## Installation
+
+```bash
+pnpm add @regardio/react
+```
+
+### Peer Dependencies
+
+This package requires:
+
+- `react` >= 19.0.0
+- `react-dom` >= 19.0.0
+- `react-router` >= 7.0.0 (for routing components)
+- `tailwindcss` >= 4.0.0 (for styling)
+
+## Usage
+
+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 { useNonce } from '@regardio/react/hooks/use-nonce';
+import { cn } from '@regardio/react/utils/cn';
+```
+
+### TailwindCSS Integration
+
+Components use TailwindCSS for styling. Import the base styles in your app:
+
+```tsx
+import '@regardio/react/styles/tailwind.css';
+```
+
+## What's Included
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `BackgroundSlideshow` | Animated background image carousel with crossfade transitions |
+| `BlurryGradient` | SVG-based decorative gradient backgrounds |
+| `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 |
+| `IconButton` | Button optimized for icon-only content |
+| `If` | Conditional rendering utility component |
+| `Iframe` | Responsive iframe with sensible defaults |
+| `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 |
+| `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
+
+| Hook | Description |
+|------|-------------|
+| `useCurrentRouteData` | Access current route loader data |
+| `useFocusSearch` | Focus management for search inputs |
+| `useMatchesData` | Access matched route data |
+| `useMediaQuery` | Reactive media query matching |
+| `useMobile` | Mobile device detection |
+| `useNonce` | CSP nonce access for inline styles |
+| `useOrientation` | Device orientation detection |
+| `useUser` | User context from Supabase auth |
+
+### Utilities
+
+| 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) |
+
+## Documentation
+
+See the [docs](./docs) folder for detailed documentation on each component, hook, and utility.
+
+## Storybook
+
+Run Storybook to explore components interactively:
+
+```bash
+pnpm storybook
+```
+
+## Contributing
+
+This package is primarily maintained for Regardio's internal use, but we welcome:
+
+- Bug reports and fixes
+- Documentation improvements
+- Feature suggestions (though we may not implement all requests)
+
+## License
+
+**MIT License** — Free to use in commercial and open source projects.

package/dist/components/background-slideshow.d.ts

@@ -0,0 +1,22 @@
+import type { ReactElement } from 'react';
+export type ImageData = {
+    at: Record<string, string>;
+    fn: string;
+    hu: number;
+    id: string;
+    po: boolean;
+};
+export interface BackgroundSlideshowProps {
+    baseUrl: string;
+    className?: string;
+    imgClassName?: string;
+    locale: string;
+    pictureClassName?: string;
+    images: ImageData[];
+    filter?: (image: ImageData) => boolean;
+    slideshow?: boolean;
+    slideshowInterval?: number;
+    transitionDuration?: number;
+}
+export declare function BackgroundSlideshow({ baseUrl, className, imgClassName, locale, pictureClassName, images, slideshow, slideshowInterval, transitionDuration, filter, }: BackgroundSlideshowProps): ReactElement;
+//# sourceMappingURL=background-slideshow.d.ts.map

package/dist/components/background-slideshow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background-slideshow.d.ts","sourceRoot":"","sources":["../../src/components/background-slideshow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,MAAM,SAAS,GAAG;IACtB,EAAE,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,OAAO,CAAC;CACb,CAAC;AAEF,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,OAAO,EACP,SAAc,EACd,YAAiB,EACjB,MAAM,EACN,gBAAqB,EACrB,MAAW,EACX,SAAgB,EAChB,iBAAwB,EACxB,kBAAyB,EACzB,MAAM,GACP,EAAE,wBAAwB,GAAG,YAAY,CAuIzC"}

package/dist/components/background-slideshow.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Picture } from './picture';
+export function BackgroundSlideshow({ baseUrl, className = '', imgClassName = '', locale, pictureClassName = '', images = [], slideshow = true, slideshowInterval = 6000, transitionDuration = 6000, filter, }) {
+    const validatedImages = useMemo(() => {
+        return images
+            .map((img) => {
+            if (typeof img !== 'object' || img === null)
+                return null;
+            return {
+                at: img.at || {},
+                fn: img.fn || '',
+                hu: img.hu || 0,
+                id: img.id || '',
+                po: img.po || false,
+            };
+        })
+            .filter((img) => img !== null);
+    }, [images]);
+    const availableImages = useMemo(() => {
+        const filtered = filter ? validatedImages.filter(filter) : validatedImages;
+        return filtered.length > 0 ? filtered : validatedImages;
+    }, [validatedImages, filter]);
+    const firstImage = availableImages[0] || null;
+    const [slideshowStarted, setSlideshowStarted] = useState(false);
+    const [overlayImage, setOverlayImage] = useState(null);
+    const [overlayVisible, setOverlayVisible] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const timerRef = useRef(undefined);
+    const isTransitioning = useRef(false);
+    useEffect(() => {
+        if (!slideshow || availableImages.length <= 1)
+            return;
+        const timeout = window.setTimeout(() => {
+            setSlideshowStarted(true);
+        }, slideshowInterval);
+        return () => window.clearTimeout(timeout);
+    }, [slideshow, availableImages.length, slideshowInterval]);
+    useEffect(() => {
+        if (!slideshowStarted || availableImages.length <= 1)
+            return;
+        if (timerRef.current)
+            window.clearTimeout(timerRef.current);
+        const cycleImages = () => {
+            if (isTransitioning.current)
+                return;
+            isTransitioning.current = true;
+            const nextIdx = (currentIndex + 1) % availableImages.length;
+            const nextImage = availableImages[nextIdx];
+            if (!nextImage) {
+                isTransitioning.current = false;
+                return;
+            }
+            setOverlayImage(nextImage);
+            window.setTimeout(() => {
+                setOverlayVisible(true);
+                window.setTimeout(() => {
+                    setCurrentIndex(nextIdx);
+                    setOverlayVisible(false);
+                    isTransitioning.current = false;
+                    timerRef.current = window.setTimeout(cycleImages, slideshowInterval);
+                }, transitionDuration);
+            }, 100);
+        };
+        cycleImages();
+        return () => {
+            if (timerRef.current)
+                window.clearTimeout(timerRef.current);
+        };
+    }, [slideshowStarted, availableImages, currentIndex, slideshowInterval, transitionDuration]);
+    if (validatedImages.length === 0 || !firstImage) {
+        return _jsx("div", { className: className });
+    }
+    const baseImage = availableImages[currentIndex] || firstImage;
+    return (_jsxs("div", { className: className, children: [_jsx("div", { className: "absolute inset-0 w-full h-full", children: _jsx(Picture, { alt: baseImage.at[locale] || '', baseUrl: baseUrl.replace('{id}', baseImage.id).replace('{fn}', baseImage.fn), className: pictureClassName, formats: [{ size: '', width: 1080 }], imgClassName: imgClassName, placeholder: "" }) }), overlayImage && (_jsx("div", { className: `absolute inset-0 w-full h-full transition-opacity ${overlayVisible ? 'opacity-100' : 'opacity-0'} ${transitionDuration <= 3000 ? 'duration-3000' : transitionDuration <= 4000 ? 'duration-4000' : transitionDuration <= 5000 ? 'duration-5000' : 'duration-6000'}`, children: _jsx(Picture, { alt: overlayImage.at[locale] || '', baseUrl: baseUrl.replace('{id}', overlayImage.id).replace('{fn}', overlayImage.fn), className: pictureClassName, formats: [{ size: '', width: 1080 }], imgClassName: imgClassName, placeholder: "" }) }))] }));
+}

package/dist/components/blurry-gradient.d.ts

@@ -0,0 +1,9 @@
+import type { SVGProps } from 'react';
+export interface BlurryGradientProps extends SVGProps<SVGSVGElement> {
+    primaryColor: string;
+    secondaryColor: string;
+    neutralColor: string;
+    description?: string;
+}
+export declare const BlurryGradient: (props: BlurryGradientProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=blurry-gradient.d.ts.map

package/dist/components/blurry-gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blurry-gradient.d.ts","sourceRoot":"","sources":["../../src/components/blurry-gradient.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,mBAAoB,SAAQ,QAAQ,CAAC,aAAa,CAAC;IAClE,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IAKrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAmFxD,CAAC"}

package/dist/components/blurry-gradient.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BlurryGradient = (props) => {
+    const { description = 'Decorative blurry gradient', ...svgProps } = props;
+    const titleId = 'blurryGradientTitle';
+    return (_jsxs("svg", { "aria-labelledby": titleId, preserveAspectRatio: "none", role: "img", viewBox: "0 0 1000 1000", ...svgProps, children: [_jsx("title", { id: titleId, children: description }), _jsx("defs", { children: _jsxs("filter", { colorInterpolationFilters: "sRGB", filterUnits: "userSpaceOnUse", height: "120%", width: "120%", x: "-10%", y: "-10%", children: [_jsx("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), _jsx("feBlend", { in: "SourceGraphic", in2: "BackgroundImageFix", mode: "normal", result: "shape" }), _jsx("feGaussianBlur", { result: "effect1_foregroundBlur", stdDeviation: "161" })] }) }), _jsx("rect", { fill: props.primaryColor, height: "1000", width: "1000" }), _jsxs("g", { filter: "url(#blurryGradient)", children: [_jsx("circle", { cx: "730", cy: "559", fill: props.secondaryColor, r: "357" }), _jsx("circle", { cx: "316", cy: "248", fill: props.primaryColor, r: "357" }), _jsx("circle", { cx: "509", cy: "410", fill: props.neutralColor, r: "357" }), _jsx("circle", { cx: "633", cy: "232", fill: props.secondaryColor, r: "357" }), _jsx("circle", { cx: "156", cy: "82", fill: props.primaryColor, r: "357" }), _jsx("circle", { cx: "150", cy: "389", fill: props.neutralColor, r: "357" })] })] }));
+};

package/dist/components/box.d.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ElementType } from 'react';
+import { type VariantProps } from '../utils/cn';
+declare const box: (props?: ({
+    variant?: "code" | "aside" | "main" | "section" | "grid" | "primary" | "container" | "flex" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export interface BoxProps extends ComponentProps<'div'>, VariantProps<typeof box> {
+    as?: ElementType;
+}
+export declare const Box: ({ as: Component, children, className, variant, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=box.d.ts.map

package/dist/components/box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box.d.ts","sourceRoot":"","sources":["../../src/components/box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAErD,QAAA,MAAM,GAAG;;;;;;;;0BAgBP,CAAC;AAEH,MAAM,WAAW,QAAS,SAAQ,cAAc,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,OAAO,GAAG,CAAC;IAC/E,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAED,eAAO,MAAM,GAAG,GAAI,2DAMjB,QAAQ,4CAYV,CAAC"}

package/dist/components/box.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from '../utils/cn';
+const box = cva({
+    defaultVariants: {
+        variant: 'primary',
+    },
+    variants: {
+        variant: {
+            aside: [],
+            code: ['font-monospace', 'overflow-scroll'],
+            container: ['u-container'],
+            flex: ['flex'],
+            grid: ['u-grid'],
+            main: [],
+            primary: [],
+            section: ['u-grid', 'content-start'],
+        },
+    },
+});
+export const Box = ({ as: Component = 'div', children, className, variant, ...props }) => {
+    return (_jsx(Component, { className: box({
+            className,
+            variant,
+        }), ...props, children: children }));
+};

package/dist/components/carousel.d.ts

@@ -0,0 +1,26 @@
+import type { EmblaCarouselType, EmblaOptionsType } from 'embla-carousel';
+import { type HTMLAttributes } from 'react';
+export type CarouselApi = EmblaCarouselType;
+interface CarouselContextValue {
+    api: CarouselApi | undefined;
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+}
+declare function useCarousel(): CarouselContextValue;
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
+    opts?: EmblaOptionsType;
+    setApi?: (api: CarouselApi) => void;
+    orientation?: 'horizontal' | 'vertical';
+}
+declare const Carousel: import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const CarouselContent: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+interface CarouselItemProps extends HTMLAttributes<HTMLDivElement> {
+    'aria-label'?: string;
+}
+declare const CarouselItem: import("react").ForwardRefExoticComponent<CarouselItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const CarouselPrevious: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+declare const CarouselNext: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };
+//# sourceMappingURL=carousel.d.ts.map

package/dist/components/carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.d.ts","sourceRoot":"","sources":["../../src/components/carousel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE1E,OAAO,EAGL,KAAK,cAAc,EAMpB,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,WAAW,GAAG,iBAAiB,CAAC;AAE5C,UAAU,oBAAoB;IAC5B,GAAG,EAAE,WAAW,GAAG,SAAS,CAAC;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,EAAE,OAAO,CAAC;CACxB;AAID,iBAAS,WAAW,yBAMnB;AAED,UAAU,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC5D,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,KAAK,IAAI,CAAC;IACpC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,QAAA,MAAM,QAAQ,0GAoFb,CAAC;AAGF,QAAA,MAAM,eAAe,2HAUpB,CAAC;AAGF,UAAU,iBAAkB,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,QAAA,MAAM,YAAY,8GAajB,CAAC;AAGF,QAAA,MAAM,gBAAgB,iIAerB,CAAC;AAGF,QAAA,MAAM,YAAY,iIAejB,CAAC;AAGF,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/carousel.js

@@ -0,0 +1,87 @@
+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 />');
+    }
+    return context;
+}
+const Carousel = forwardRef(({ 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) => {
+        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) => {
+        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 (_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) => {
+    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) => {
+    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';
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, useCarousel };

package/dist/components/countdown.d.ts

@@ -0,0 +1,2 @@
+export declare function Countdown(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=countdown.d.ts.map

package/dist/components/countdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"countdown.d.ts","sourceRoot":"","sources":["../../src/components/countdown.tsx"],"names":[],"mappings":"AAGA,wBAAgB,SAAS,4CA8ExB"}

package/dist/components/countdown.js

@@ -0,0 +1,48 @@
+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(
+          transparent ${6 * (isMounted ? timerValue : 0)}deg,
+          hsl(var(--red-500)) 0deg,
+          hsl(var(--red-500)) 15deg,
+          hsl(var(--coral-500)) 15deg,
+          hsl(var(--coral-500)) 45deg,
+          hsl(var(--orange-500)) 45deg,
+          hsl(var(--orange-500)) 75deg,
+          hsl(var(--yellow-500)) 75deg,
+          hsl(var(--yellow-500)) 105deg,
+          hsl(var(--olive-500)) 105deg,
+          hsl(var(--olive-500)) 135deg,
+          hsl(var(--lime-500)) 135deg,
+          hsl(var(--lime-500)) 165deg,
+          hsl(var(--green-500)) 165deg,
+          hsl(var(--green-500)) 195deg,
+          hsl(var(--teal-500)) 195deg,
+          hsl(var(--teal-500)) 225deg,
+          hsl(var(--cyan-500)) 225deg,
+          hsl(var(--cyan-500)) 255deg,
+          hsl(var(--blue-500)) 255deg,
+          hsl(var(--blue-500)) 285deg,
+          hsl(var(--purple-500)) 285deg,
+          hsl(var(--purple-500)) 315deg,
+          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 }) }));
+}

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

@@ -0,0 +1,40 @@
+import type { ComponentProps } from 'react';
+import { type VariantProps } from '../utils/cn';
+declare const dl: (props?: ({
+    variant?: "primary" | "unstyled" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+declare const dt: (props?: ({
+    variant?: "primary" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+declare const dd: (props?: ({
+    variant?: "primary" | undefined;
+} & ({
+    class?: import("cva").ClassValue;
+    className?: never;
+} | {
+    class?: never;
+    className?: import("cva").ClassValue;
+})) | undefined) => string;
+export interface DefinitionListProps extends ComponentProps<'dl'>, VariantProps<typeof dl> {
+}
+export interface DtProps extends ComponentProps<'dt'>, VariantProps<typeof dt> {
+}
+export 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"definition-list.d.ts","sourceRoot":"","sources":["../../src/components/definition-list.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAErD,QAAA,MAAM,EAAE;;;;;;;;0BAWN,CAAC;AAEH,QAAA,MAAM,EAAE;;;;;;;;0BAUN,CAAC;AAEH,QAAA,MAAM,EAAE;;;;;;;;0BAUN,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC;CAAG;AAE7F,MAAM,WAAW,OAAQ,SAAQ,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC;CAAG;AAEjF,MAAM,WAAW,OAAQ,SAAQ,cAAc,CAAC,IAAI,CAAC,EAAE,YAAY,CAAC,OAAO,EAAE,CAAC;CAAG;AAEjF,eAAO,MAAM,cAAc,GAAI,OAAO,mBAAmB,4CAaxD,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,OAAO,OAAO,4CAahC,CAAC;AAEF,eAAO,MAAM,EAAE,GAAI,OAAO,OAAO,4CAahC,CAAC"}

package/dist/components/definition-list.js

@@ -0,0 +1,57 @@
+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'],
+        },
+    },
+});
+const dt = cva({
+    base: [],
+    defaultVariants: {
+        variant: 'primary',
+    },
+    variants: {
+        variant: {
+            primary: ['uppercase', 'tracking-wide'],
+        },
+    },
+});
+const dd = cva({
+    base: ['mb-xs'],
+    defaultVariants: {
+        variant: 'primary',
+    },
+    variants: {
+        variant: {
+            primary: [],
+        },
+    },
+});
+export const DefinitionList = (props) => {
+    const { children, className, variant } = props;
+    return (_jsx("dl", { className: dl({
+            className,
+            variant,
+        }), children: children }));
+};
+export const Dt = (props) => {
+    const { children, className, variant } = props;
+    return (_jsx("dt", { className: dt({
+            className,
+            variant,
+        }), children: children }));
+};
+export const Dd = (props) => {
+    const { children, className, variant } = props;
+    return (_jsx("dd", { className: dd({
+            className,
+            variant,
+        }), children: children }));
+};

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

@@ -0,0 +1,23 @@
+import type { ReactElement } from 'react';
+export type ErrorDescriptor = {
+    type: 'http';
+    status: number;
+    statusText: string;
+    defaultId: string;
+    defaultMessage: string;
+} | {
+    type: 'error';
+    defaultId: string;
+    defaultMessage: string;
+    message?: string;
+    stack?: string;
+} | {
+    type: 'unknown';
+    defaultId: string;
+    defaultMessage: string;
+};
+export declare function getErrorDescriptor(error: unknown): ErrorDescriptor;
+export declare function GenericError({ renderMessage, }?: {
+    renderMessage?: (descriptor: ErrorDescriptor) => ReactElement;
+}): ReactElement;
+//# sourceMappingURL=generic-error.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"generic-error.d.ts","sourceRoot":"","sources":["../../src/components/generic-error.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,MAAM,MAAM,eAAe,GACvB;IACE,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CACxB,GACD;IACE,IAAI,EAAE,OAAO,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GACD;IACE,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CACxB,CAAC;AAMN,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,GAAG,eAAe,CA0BlE;AAaD,wBAAgB,YAAY,CAAC,EAC3B,aAAa,GACd,GAAE;IACD,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,KAAK,YAAY,CAAC;CAC1D,GAAG,YAAY,CA6BpB"}