@xwadex/fesd-next 0.3.4-7.2 → 0.3.4-7.21

package/dist/hooks/useAnchors.js

@@ -1,121 +1,204 @@
 "use client";
-import { useCallback, useMemo, useRef } from "react";
-import { animate, useMotionValue } from "motion/react";
+// update: 2025.11.12
+// version: 0.0.3.bate
+// dev: wade
+import { useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { useAnimate, motionValue } from "motion/react";
 import { create } from "zustand";
+import { getScrollContainerStores, getRootLenis } from "../components/index.js";
+import Lenis from "lenis";
+const ANCHOR_ATTRIBUTE = "data-anchor";
+const OFFSETER_ATTRIBUTE = "data-anchor-offseter";
 export function useAnchors() {
-    const motionValue = useMotionValue(0);
-    const controlsRef = useRef(null);
-    const scrollToAnchor = useCallback(({ anchor: anchorName, container: containerName, ...options }) => {
-        const { offseters, direction = "vertical", duration = 0.5, offset = 0, delay = 0, ease = [0.215, 0.61, 0.355, 1.0], onScroll, onScrolling, onScrolled, } = options;
-        if (!anchorName || !containerName)
+    const [_, animate] = useAnimate();
+    const controllerRef = useRef(new Map());
+    const scrollAnimations = useCallback(({ controllerKey, containerDom, anchorScrollValue, containerScrollValue, direction = "y", duration = 1, delay = 0, ease = [0, 1, .5, .99], onScroll: onPlay, onScrolled, onScrolling, ...props }) => {
+        if (direction !== "y" && direction !== "x") {
+            console.error(`Scroll Direction isn't 'x' or 'y' `);
             return;
-        const stores = getAnchorsStores();
-        if (!stores?.anchors || !stores?.containers)
+        }
+        const { left: scrollLeft, top: scrollTop } = containerScrollValue;
+        const { left: anchorLeft, top: anchorTop } = anchorScrollValue;
+        const isScrollX = direction === "x";
+        const isScrollY = direction === "y";
+        const startValue = isScrollX ? scrollLeft : scrollTop;
+        const endValue = isScrollX ? anchorLeft : anchorTop;
+        if (startValue == endValue) {
+            controllerRef.current.delete(controllerKey);
             return;
-        const anchorDom = stores.anchors.get(anchorName);
-        const containerDom = stores.containers.get(containerName);
-        if (!anchorDom || !containerDom)
+        }
+        const motionStartValue = motionValue(startValue);
+        const onUpdate = (value) => {
+            const left = isScrollX ? value : undefined;
+            const top = isScrollY ? value : undefined;
+            containerDom.scrollTo({ left, top });
+            onScrolling?.(value);
+        };
+        const onComplete = () => {
+            controllerRef.current.delete(controllerKey);
+            onScrolled?.();
+        };
+        const options = {
+            duration,
+            ease,
+            delay,
+            onPlay,
+            onUpdate,
+            onComplete,
+            ...props
+        };
+        controllerRef.current.set(controllerKey, animate(motionStartValue, endValue, options));
+    }, []);
+    const scrollToAnchor = useCallback((anchorOptions) => {
+        const { anchor: anchorName, container: containerName, offseters, align, offset = 0, direction = "y", ...options } = anchorOptions;
+        const anchorsStores = getAnchorsStores();
+        const scrollContainersStores = getScrollContainerStores();
+        const isScrolltoAnchor = anchorName !== "#";
+        const isScrollContainer = containerName && containerName !== "window";
+        const controllerKey = containerName ?? "window";
+        if (controllerRef.current.has(controllerKey)) {
+            controllerRef.current.get(controllerKey)?.stop();
+            controllerRef.current.delete(controllerKey);
+        }
+        const anchorDom = isScrolltoAnchor
+            ? anchorsStores.anchors.get(anchorName)
+            : undefined;
+        if (isScrolltoAnchor && !(anchorDom instanceof HTMLElement))
             return;
-        const { top: targetTop } = anchorDom.getBoundingClientRect();
-        const { top: containerTop } = containerDom.getBoundingClientRect();
-        const containerScrollTop = Math.round(containerDom.scrollTop);
-        const scrollOffset = Math.round(targetTop - containerTop + containerScrollTop);
-        if (scrollOffset == containerScrollTop)
+        const containerDom = isScrollContainer
+            ? scrollContainersStores.containers.get(containerName)
+            : window;
+        if (!containerDom)
             return;
-        if (controlsRef.current)
-            controlsRef.current?.stop();
-        // console.log("scrollOffset", scrollOffset);
-        // console.log("containerScrollTop", containerScrollTop);
-        // console.log(scrollOffset == containerScrollTop);
-        motionValue.set(containerScrollTop);
-        controlsRef.current = animate(motionValue, scrollOffset, {
-            duration: 0.5,
-            delay: 5,
-            ease: [0.215, 0.61, 0.355, 1.0],
-            onPlay: onScroll,
-            onComplete: onScrolled,
-            onUpdate: (value) => {
-                containerDom.scrollTop = value;
-                onScrolling?.(value);
-            },
+        const getOffseterDomClient = (offseters) => {
+            const offseterDom = anchorsStores.offseters.get(offseters);
+            const { clientWidth, clientHeight } = offseterDom || {};
+            return { width: clientWidth ?? 0, height: clientHeight ?? 0 };
+        };
+        const offsets = Array.isArray(offseters)
+            ? offseters.reduce((init, offseter) => {
+                const { width, height } = getOffseterDomClient(offseter);
+                return {
+                    width: (init.width ?? 0) + width,
+                    height: (init.height ?? 0) + height
+                };
+            }, {})
+            : typeof offseters == "string"
+                ? getOffseterDomClient(offseters)
+                : { width: 0, height: 0 };
+        const offsetValue = {
+            width: direction === "x" ? offsets.width + offset : 0,
+            height: direction === "y" ? offsets.height + offset : 0,
+        };
+        const isLenisScroll = containerDom == window
+            && window.document.documentElement.classList.contains("lenis")
+            || containerDom instanceof Lenis;
+        if (isLenisScroll) {
+            const lenis = (isScrollContainer ? containerDom : getRootLenis()?.root);
+            // TODO 尚未找到可以判斷已經移動到錨點位置的方式
+            if (!lenis)
+                return;
+            const directionOffset = direction === "x"
+                ? offsetValue.width + offset
+                : offsetValue.height + offset;
+            // TODO 尚未建立lenis options完整設定
+            lenis.scrollTo(anchorDom ?? 0, {
+                offset: (directionOffset * -1),
+                onStart: (lenis) => options?.onScroll?.(lenis),
+                onComplete: (lenis) => options?.onScrolled?.(lenis)
+            });
+            return;
+        }
+        const containerScrollValue = {
+            top: Math.round(isScrollContainer
+                ? containerDom.scrollTop
+                : containerDom.pageYOffset),
+            left: Math.round(isScrollContainer
+                ? containerDom.scrollLeft
+                : pageXOffset)
+        };
+        const containerRect = isScrollContainer
+            ? containerDom.getBoundingClientRect()
+            : { top: 0, left: 0 };
+        const containerOffsetValue = {
+            left: containerScrollValue.left - (isScrollContainer ? containerRect.left : 0),
+            top: containerScrollValue.top - (isScrollContainer ? containerRect.top : 0)
+        };
+        const anchorRect = anchorDom ? anchorDom.getBoundingClientRect() : { left: 0, top: 0 };
+        const anchorScrollValue = {
+            left: isScrolltoAnchor
+                ? Math.round(anchorRect.left + containerOffsetValue.left - offsetValue.width)
+                : offsetValue.width,
+            top: isScrolltoAnchor
+                ? Math.round(anchorRect.top + containerOffsetValue.top - offsetValue.height)
+                : offsetValue.height
+        };
+        scrollAnimations({
+            controllerKey,
+            containerDom,
+            containerScrollValue,
+            anchorScrollValue,
+            direction,
+            ...options
         });
-    }, [motionValue]);
+    }, []);
     const returnsMemo = useMemo(() => ({
         registerAnchors,
-        registerContainers,
         registerOffseters,
+        setStores: setAnchorsStore,
         getStores: getAnchorsStores,
-        removeAnchor: removeAnchor,
-        removeOffseter: removeOffseter,
-        removeContainer: removeContainer,
         scrollToAnchor
     }), [scrollToAnchor]);
     return returnsMemo;
 }
+export function useRegistration({ key, name }) {
+    const ref = useRef(null);
+    const attribute = key == "anchors" ? ANCHOR_ATTRIBUTE : OFFSETER_ATTRIBUTE;
+    useLayoutEffect(() => {
+        setAnchorsStore({ key, action: "add", node: ref.current, name });
+        return () => { setAnchorsStore({ key, action: "remove", node: ref.current, name }); };
+    }, []);
+    return { ref, [attribute]: name };
+}
 export function registerAnchors(name) {
-    const register = (node) => {
-        if (node)
-            addAnchor(name, node);
-        else
-            removeAnchor(name);
-    };
-    return {
-        ref: register,
-        "data-anchor": name
-    };
+    return useRegistration({ key: "anchors", name });
 }
 export function registerOffseters(name) {
-    const register = (node) => {
-        if (node)
-            addOffseter(name, node);
-        else
-            removeOffseter(name);
-    };
-    return {
-        ref: register,
-        "data-anchor-offseter": name
-    };
-}
-export function registerContainers(name) {
-    const register = (node) => {
-        if (node)
-            addContainer(name, node);
-        else
-            removeContainer(name);
-    };
-    return {
-        ref: register,
-        "data-anchor-container": name
-    };
+    return useRegistration({ key: "offseters", name });
 }
-const anchorsStores = {
+export const useAnchorsStores = create()(() => ({
     anchors: new Map(),
-    containers: new Map(),
     offseters: new Map(),
-};
-export const useAnchorsStores = create()(() => anchorsStores);
+}));
 export const getAnchorsStores = () => useAnchorsStores.getState();
-export const addAnchor = (name, anchorNode) => useAnchorsStores.setState(stores => {
-    stores.anchors?.set(name, anchorNode);
-    return { anchors: stores.anchors };
-});
-export const removeAnchor = (name) => useAnchorsStores.setState(stores => {
-    stores.anchors?.delete(name);
-    return { anchors: stores.anchors };
-});
-export const addContainer = (name, containerNode) => useAnchorsStores.setState(stores => {
-    stores.containers?.set(name, containerNode);
-    return { containers: stores.containers };
-});
-export const removeContainer = (name) => useAnchorsStores.setState(stores => {
-    stores.containers?.delete(name);
-    return { containers: stores.containers };
-});
-export const addOffseter = (name, containerNode) => useAnchorsStores.setState(stores => {
-    stores.offseters?.set(name, containerNode);
-    return { offseters: stores.offseters };
-});
-export const removeOffseter = (name) => useAnchorsStores.setState(stores => {
-    stores.offseters?.delete(name);
-    return { offseters: stores.offseters };
-});
+export const setAnchorsStore = (options) => {
+    const { key, action, name, node } = options;
+    useAnchorsStores.setState(stores => {
+        switch (key) {
+            case "anchors":
+                const anchorDom = stores.anchors?.get(name);
+                if (action == "add" && node instanceof HTMLElement) {
+                    if (anchorDom == node)
+                        return stores;
+                    stores.anchors?.set(name, node);
+                }
+                else if (action == "remove" && anchorDom) {
+                    stores.anchors?.delete(name);
+                }
+                return { anchors: stores.anchors };
+            case "offseters":
+                const offseterDom = stores.offseters?.get(name);
+                if (action == "add" && node instanceof HTMLElement) {
+                    if (offseterDom == node)
+                        return stores;
+                    stores.offseters?.set(name, node);
+                }
+                else if (action == "remove" && offseterDom) {
+                    stores.offseters?.delete(name);
+                }
+                return { offseters: stores.offseters };
+            default:
+                return stores;
+        }
+    });
+};

package/dist/hooks/useHash.d.ts

@@ -0,0 +1 @@
+export declare function useHash(): string;

package/dist/hooks/useHash.js

@@ -0,0 +1,19 @@
+"use client";
+import { useEffect, useState } from "react";
+export function useHash() {
+    const [hash, setHash] = useState("");
+    const updateHash = () => setHash(window.location.hash);
+    const hashchangeEvent = (e) => {
+        e.preventDefault?.();
+        updateHash();
+    };
+    // 初始化
+    useEffect(() => {
+        updateHash();
+        window.addEventListener("hashchange", hashchangeEvent);
+        return () => {
+            window.removeEventListener("hashchange", hashchangeEvent);
+        };
+    }, []);
+    return hash;
+}

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./components";
 export * from "./hooks";
 export * from "./utils";
+export * from "./shadcns";
 export * from "./types";

package/dist/index.js

@@ -1,4 +1,5 @@
 export * from "./components";
 export * from "./hooks";
 export * from "./utils";
+export * from "./shadcns";
 export * from "./types";

package/dist/shadcns/components/ui/accordion.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/shadcns/components/ui/accordion.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+import { cn } from '../../index.js';
+function Accordion({ ...props }) {
+    return _jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({ className, ...props }) {
+    return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn('border-b last:border-b-0', className), ...props }));
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })] }) }));
+}
+function AccordionContent({ className, children, ...props }) {
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm", ...props, children: _jsx("div", { className: cn('pt-0 pb-4', className), children: children }) }));
+}
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/shadcns/components/ui/alert-dialog.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/shadcns/components/ui/alert-dialog.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { cn, buttonVariants } from '../../index.js';
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogTrigger({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
+}
+function AlertDialogPortal({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Overlay, { "data-slot": "alert-dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
+}
+function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, { "data-slot": "alert-dialog-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className), ...props })] }));
+}
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
+}
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('text-lg font-semibold', className), ...props }));
+}
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+function AlertDialogAction({ className, ...props }) {
+    return _jsx(AlertDialogPrimitive.Action, { className: cn(buttonVariants(), className), ...props });
+}
+function AlertDialogCancel({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Cancel, { className: cn(buttonVariants({ variant: 'outline' }), className), ...props }));
+}
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/shadcns/components/ui/alert.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const alertVariants: (props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Alert, AlertTitle, AlertDescription };

package/dist/shadcns/components/ui/alert.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../index.js';
+const alertVariants = cva('relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', {
+    variants: {
+        variant: {
+            default: 'bg-card text-card-foreground',
+            destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Alert({ className, variant, ...props }) {
+    return (_jsx("div", { "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+}
+function AlertTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-title", className: cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className), ...props }));
+}
+function AlertDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-description", className: cn('text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed', className), ...props }));
+}
+export { Alert, AlertTitle, AlertDescription };

package/dist/shadcns/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,3 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };

package/dist/shadcns/components/ui/aspect-ratio.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
+function AspectRatio({ ...props }) {
+    return _jsx(AspectRatioPrimitive.Root, { "data-slot": "aspect-ratio", ...props });
+}
+export { AspectRatio };

package/dist/shadcns/components/ui/avatar.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/shadcns/components/ui/avatar.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cn } from '../../index.js';
+function Avatar({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", className: cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className), ...props }));
+}
+function AvatarImage({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn('aspect-square size-full', className), ...props }));
+}
+function AvatarFallback({ className, ...props }) {
+    return (_jsx(AvatarPrimitive.Fallback, { "data-slot": "avatar-fallback", className: cn('bg-muted flex size-full items-center justify-center rounded-full', className), ...props }));
+}
+export { Avatar, AvatarImage, AvatarFallback };

package/dist/shadcns/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "destructive" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/shadcns/components/ui/badge.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../index.js';
+const badgeVariants = cva('inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+            destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Badge({ className, variant, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'span';
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/dist/shadcns/components/ui/breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+declare function Breadcrumb({ ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/shadcns/components/ui/breadcrumb.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { cn } from '../../index.js';
+function Breadcrumb({ ...props }) {
+    return _jsx("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...props });
+}
+function BreadcrumbList({ className, ...props }) {
+    return (_jsx("ol", { "data-slot": "breadcrumb-list", className: cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', className), ...props }));
+}
+function BreadcrumbItem({ className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-item", className: cn('inline-flex items-center gap-1.5', className), ...props }));
+}
+function BreadcrumbLink({ asChild, className, ...props }) {
+    const Comp = asChild ? Slot : 'a';
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn('hover:text-foreground transition-colors', className), ...props }));
+}
+function BreadcrumbPage({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "breadcrumb-page", role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('text-foreground font-normal', className), ...props }));
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+    return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn('[&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn('flex size-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+}
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/shadcns/components/ui/button-group.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "../../index.js";
+declare const buttonGroupVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/dist/shadcns/components/ui/button-group.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn, Separator } from "../../index.js";
+const buttonGroupVariants = cva("flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2", {
+    variants: {
+        orientation: {
+            horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+            vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: cn(buttonGroupVariants({ orientation }), className), ...props }));
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "div";
+    return (_jsx(Comp, { className: cn("bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+    return (_jsx(Separator, { "data-slot": "button-group-separator", orientation: orientation, className: cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className), ...props }));
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };