@xwadex/fesd-next 0.3.4-7.9 → 0.3.4-8

package/dist/components/scroll-containers/lenis-scroll.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// update: 2025.11.12
+// version: 0.0.1.bate
+// dev: wade
+import { memo, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+import { ReactLenis, useLenis, } from "lenis/react";
+import Lenis from 'lenis';
+import { create } from "zustand";
+import { ScrollContainerContext, setScrollContainerStore } from "./scroll-containers";
+import { cn } from "../../shadcns/index.js";
+export const LenisScroll = memo((props) => {
+    return (_jsxs(_Fragment, { children: [props?.root == true
+                ? _jsx(LenisRootScroll, { ...props })
+                : _jsx(LenisContainerScroll, { ...props }), "\t"] }));
+});
+export const LenisRootScroll = memo(({ root, options }) => {
+    const lenis = useLenis();
+    const lenisRef = useRef(null);
+    const registerRootLenis = useEffectEvent(() => {
+        if (!root == true || !lenis)
+            return;
+        setRootLenis(lenis);
+    });
+    useEffect(() => { registerRootLenis(); }, [lenis]);
+    return (_jsx(ReactLenis, { ref: lenisRef, root: root, options: {
+            autoRaf: true,
+            lerp: 0.0005,
+            duration: 1.5,
+            smoothWheel: true,
+            ...options
+        } }));
+});
+export const LenisContainerScroll = memo(({ name, className, children, options, ...restProps }) => {
+    const [containerRef, setContainerRef] = useState();
+    const wrapperRef = useRef(null);
+    const contentRef = useRef(null);
+    const initLenis = useEffectEvent(() => {
+        if (!wrapperRef.current || !contentRef.current || !name)
+            return;
+        const lenis = new Lenis({
+            wrapper: wrapperRef.current,
+            content: contentRef.current,
+            autoRaf: true,
+            ...options
+        });
+        setContainerRef(contentRef);
+        setScrollContainerStore({ name, action: "add", node: lenis });
+        return () => {
+            setScrollContainerStore({ name, action: "remove" });
+            lenis?.destroy?.();
+        };
+    });
+    useLayoutEffect(() => {
+        const effect = initLenis();
+        return effect;
+    }, [name, options]);
+    return (_jsx("div", { ref: wrapperRef, "data-lenis-scroll": name, className: cn("group overflow-hidden", className), ...restProps, children: _jsx("div", { ref: contentRef, className: cn("h-full", "relative", "will-change-transform overscroll-contain"), children: _jsx(ScrollContainerContext, { value: { containerRef }, children: children }) }) }));
+});
+export const useLenisStores = create()(() => ({
+    root: null,
+}));
+export const setRootLenis = (lenis) => useLenisStores.setState(() => {
+    return { root: lenis };
+});
+export const getRootLenis = () => useLenisStores.getState();

package/dist/components/scroll-containers/native-scroll.d.ts

@@ -0,0 +1,6 @@
+type PropsType<T extends React.ElementType = "div"> = React.ComponentProps<T> & {
+    name: string;
+    tag?: T;
+};
+export declare const NativeScroll: import("react").MemoExoticComponent<(<T extends React.ElementType = "div">({ tag: Component, name, className, ...restProps }: PropsType<T>) => import("react/jsx-runtime").JSX.Element)>;
+export {};

package/dist/components/scroll-containers/native-scroll.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// update: 2025.11.12
+// version: 0.0.1.bate
+// dev: wade
+import { memo, useEffectEvent, useEffect, useRef, useState } from "react";
+import { ScrollContainerContext, setScrollContainerStore } from "./scroll-containers";
+import { cn } from "../../shadcns/index.js";
+export const NativeScroll = memo(({ tag: Component = "div", name, className, ...restProps }) => {
+    const componentRef = useRef(null);
+    const [containerRef, setContainerRef] = useState();
+    const nativeEffect = useEffectEvent(() => {
+        if (!componentRef.current)
+            return;
+        setContainerRef(componentRef);
+        setScrollContainerStore({ name, action: "add", node: componentRef.current });
+        return () => { setScrollContainerStore({ name, action: "remove" }); };
+    });
+    useEffect(() => {
+        const effect = nativeEffect();
+        return effect;
+    }, [componentRef?.current]);
+    return (_jsx(ScrollContainerContext, { value: { containerRef }, children: _jsx(Component, { ref: componentRef, "data-native-scroll": name, className: cn("overflow-auto", "will-change-transform", className), ...restProps }) }));
+});

package/dist/components/scroll-containers/scroll-containers.d.ts

@@ -0,0 +1,25 @@
+import Lenis from "lenis";
+import { LenisScrollProps } from "./lenis-scroll";
+type PropsType<T extends React.ElementType = "div"> = React.ComponentProps<T> & LenisScrollProps & {
+    name: string;
+    lenis?: boolean;
+};
+export declare const ScrollContainer: <T extends React.ElementType = "div">({ name, lenis, ...props }: PropsType<T>) => import("react/jsx-runtime").JSX.Element;
+export interface ScrollContainerContext {
+    containerRef: React.RefObject<HTMLDivElement | null> | undefined;
+}
+export declare const ScrollContainerContext: import("react").Context<ScrollContainerContext | null>;
+export declare const useScrollContainerContext: () => ScrollContainerContext;
+export interface ScrollContainersStores {
+    containers: Map<string, Lenis | HTMLDivElement | null>;
+}
+export declare const useScrollContainersStores: import("zustand").UseBoundStore<import("zustand").StoreApi<ScrollContainersStores>>;
+export declare const getScrollContainer: (name: string) => HTMLDivElement | Lenis | null | undefined;
+export declare const getScrollContainerStores: () => ScrollContainersStores;
+export interface SetStoreOptions {
+    name: string;
+    node?: Lenis | HTMLDivElement | null;
+    action: "add" | "remove";
+}
+export declare const setScrollContainerStore: (options: SetStoreOptions) => void;
+export {};

package/dist/components/scroll-containers/scroll-containers.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// update: 2025.11.12
+// version: 0.0.1.bate
+// dev: wade
+import { createContext, use } from "react";
+import Lenis from "lenis";
+import { create } from "zustand";
+import { NativeScroll } from "./native-scroll";
+import { LenisScroll } from "./lenis-scroll";
+export const ScrollContainer = ({ name, lenis = false, ...props }) => {
+    return (_jsx(_Fragment, { children: lenis
+            ? _jsx(LenisScroll, { name: name, ...props })
+            : _jsx(NativeScroll, { name: name, ...props }) }));
+};
+export const ScrollContainerContext = createContext(null);
+export const useScrollContainerContext = () => {
+    const context = use(ScrollContainerContext);
+    if (!context)
+        throw new Error("useScrollContainerContext must be used inside ScrollContainerProvider");
+    return context;
+};
+export const useScrollContainersStores = create()(() => ({
+    containers: new Map(),
+}));
+export const getScrollContainer = (name) => {
+    const stores = useScrollContainersStores.getState();
+    return stores.containers?.get(name);
+};
+export const getScrollContainerStores = () => useScrollContainersStores.getState();
+export const setScrollContainerStore = (options) => {
+    const { action, name, node } = options;
+    useScrollContainersStores.setState(stores => {
+        const containerDom = stores.containers?.get(name);
+        const isContainerNode = node instanceof Lenis || node instanceof HTMLDivElement;
+        if (action == "add" && isContainerNode) {
+            if (containerDom == node)
+                return stores;
+            // console.log("node", node, name);
+            stores.containers?.set(name, node);
+        }
+        else if (action == "remove" && containerDom) {
+            stores.containers?.delete(name);
+        }
+        return { containers: stores.containers };
+    });
+};

package/dist/components/tests/tests.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "../../shadcns/index.js";
 import { CarouselPrevious } from "../../shadcns/index.js";

package/dist/hooks/useAnchors.d.ts

@@ -1,13 +1,12 @@
-import { animate } from "motion/react";
-import type { Easing } from "motion/react";
-import { registerContainers } from "./useScrollContainers";
+import type { AnimationPlaybackControlsWithThen, Easing } from "motion/react";
+import Lenis from "lenis";
 export interface AnimateOptions {
     duration?: number;
     delay?: number;
     ease?: Easing | Easing[] | undefined;
-    onScroll?: () => void;
+    onScroll?: (lenis?: Lenis) => void;
     onScrolling?: (value: number) => void;
-    onScrolled?: () => void;
+    onScrolled?: (lenis?: Lenis) => void;
 }
 export interface AnchorOptions extends AnimateOptions {
     anchor: string;
@@ -30,28 +29,36 @@ export interface ScrollOptions extends AnimateOptions {
     };
     direction?: AnchorOptions["direction"];
 }
-export type AnimateController = ReturnType<typeof animate>;
-export declare function useAnchors(): {
-    registerAnchors: typeof registerAnchors;
-    registerOffseters: typeof registerOffseters;
-    registerContainers: typeof registerContainers;
+export type AnimateController = AnimationPlaybackControlsWithThen;
+export interface AnchorsMethods {
+    registerAnchors: (name: string) => {
+        [key: string]: string | React.RefObject<null>;
+        ref: React.RefObject<null>;
+    };
+    registerOffseters: (name: string) => {
+        [key: string]: string | React.RefObject<null>;
+        ref: React.RefObject<null>;
+    };
     setStores: (options: AnchorStoreOptions) => void;
     getStores: () => AnchorsStores;
     scrollToAnchor: (anchorOptions: AnchorOptions) => void;
-};
+}
+export declare function useAnchors(): AnchorsMethods;
 export interface RegistrationDatas {
     key: keyof AnchorsStores;
     name: string;
-    node: HTMLDivElement | null;
 }
-export declare function registration({ name, key, node }: RegistrationDatas): void;
+export declare function useRegistration({ key, name }: RegistrationDatas): {
+    [x: string]: string | import("react").RefObject<null>;
+    ref: import("react").RefObject<null>;
+};
 export declare function registerAnchors(name: string): {
-    ref: (node: HTMLDivElement | null) => void;
-    "data-anchor": string;
+    [x: string]: string | import("react").RefObject<null>;
+    ref: import("react").RefObject<null>;
 };
 export declare function registerOffseters(name: string): {
-    ref: (node: HTMLDivElement | null) => void;
-    "data-anchor-offseter": string;
+    [x: string]: string | import("react").RefObject<null>;
+    ref: import("react").RefObject<null>;
 };
 export interface AnchorsStores {
     anchors: Map<string, HTMLElement | null>;
@@ -60,6 +67,7 @@ export interface AnchorsStores {
 export declare const useAnchorsStores: import("zustand").UseBoundStore<import("zustand").StoreApi<AnchorsStores>>;
 export declare const getAnchorsStores: () => AnchorsStores;
 export interface AnchorStoreOptions extends RegistrationDatas {
+    node: HTMLDivElement | null;
     action: "add" | "remove";
 }
 export declare const setAnchorsStore: (options: AnchorStoreOptions) => void;

package/dist/hooks/useAnchors.js

@@ -1,16 +1,17 @@
-"use client";
-// update: 2025.11.07
-// version: 0.0.2.bate
+// update: 2025.11.12
+// version: 0.0.3.bate
 // dev: wade
-import { useCallback, useMemo, useRef } from "react";
-import { animate, motionValue } from "motion/react";
+import { useCallback, useLayoutEffect, useMemo, useRef } from "react";
+import { useAnimate, motionValue } from "motion/react";
 import { create } from "zustand";
-import { getScrollContainersStores, registerContainers } from "./useScrollContainers";
+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 [_, animate] = useAnimate();
     const controllerRef = useRef(new Map());
-    const scrollAnimations = useCallback(({ controllerKey, containerDom, anchorScrollValue, containerScrollValue, direction = "y", duration = 0.5, delay = 0, ease = [0.215, 0.61, 0.355, 1.0], onScroll: onPlay, onScrolled, onScrolling }) => {
+    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;
@@ -36,13 +37,21 @@ export function useAnchors() {
             controllerRef.current.delete(controllerKey);
             onScrolled?.();
         };
-        const options = { duration, ease, delay, onPlay, onUpdate, onComplete };
+        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, ...options } = anchorOptions;
+        const { anchor: anchorName, container: containerName, offseters, align, offset = 0, direction = "y", ...options } = anchorOptions;
         const anchorsStores = getAnchorsStores();
-        const scrollContainersStores = getScrollContainersStores();
+        const scrollContainersStores = getScrollContainerStores();
         const isScrolltoAnchor = anchorName !== "#";
         const isScrollContainer = containerName && containerName !== "window";
         const controllerKey = containerName ?? "window";
@@ -60,6 +69,45 @@ export function useAnchors() {
             : window;
         if (!containerDom)
             return;
+        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
@@ -75,65 +123,50 @@ export function useAnchors() {
             left: containerScrollValue.left - (isScrollContainer ? containerRect.left : 0),
             top: containerScrollValue.top - (isScrollContainer ? containerRect.top : 0)
         };
-        const offsetsValue = Array.isArray(offseters)
-            ? offseters.reduce((init, offseter) => {
-                const offseterDom = anchorsStores.offseters.get(offseter);
-                const width = (init.width ?? 0) + (offseterDom ? offseterDom.clientWidth : 0);
-                const height = (init.height ?? 0) + (offseterDom ? offseterDom.clientHeight : 0);
-                return { width, height };
-            }, {})
-            : { width: 0, height: 0 };
-        const offsetsSumValue = {
-            width: options.direction === "x" ? offsetsValue.width + offset : 0,
-            height: options.direction === "y" ? offsetsValue.height + offset : 0,
-        };
         const anchorRect = anchorDom ? anchorDom.getBoundingClientRect() : { left: 0, top: 0 };
         const anchorScrollValue = {
             left: isScrolltoAnchor
-                ? Math.round(anchorRect.left + containerOffsetValue.left - offsetsSumValue.width)
-                : offsetsSumValue.width,
+                ? Math.round(anchorRect.left + containerOffsetValue.left - offsetValue.width)
+                : offsetValue.width,
             top: isScrolltoAnchor
-                ? Math.round(anchorRect.top + containerOffsetValue.top - offsetsSumValue.height)
-                : offsetsSumValue.height
+                ? Math.round(anchorRect.top + containerOffsetValue.top - offsetValue.height)
+                : offsetValue.height
         };
         scrollAnimations({
             controllerKey,
             containerDom,
             containerScrollValue,
             anchorScrollValue,
+            direction,
             ...options
         });
     }, []);
     const returnsMemo = useMemo(() => ({
         registerAnchors,
         registerOffseters,
-        registerContainers: registerContainers,
         setStores: setAnchorsStore,
         getStores: getAnchorsStores,
         scrollToAnchor
     }), [scrollToAnchor]);
     return returnsMemo;
 }
-export function registration({ name, key, node }) {
-    if (!node)
-        return;
-    if (name == "#") {
-        console.error(`Cannot register ${key} name '#'`);
-        return;
-    }
-    setAnchorsStore({ key, name, node, action: node ? "add" : "remove" });
+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 = useCallback((node) => registration({ key: "anchors", name, node }), [name]);
-    return { ref: register, [ANCHOR_ATTRIBUTE]: name };
+    return useRegistration({ key: "anchors", name });
 }
 export function registerOffseters(name) {
-    const register = useCallback((node) => registration({ key: "offseters", name, node }), [name]);
-    return { ref: register, [OFFSETER_ATTRIBUTE]: name };
+    return useRegistration({ key: "offseters", name });
 }
 export const useAnchorsStores = create()(() => ({
     anchors: new Map(),
-    // containers: new Map(),
     offseters: new Map(),
 }));
 export const getAnchorsStores = () => useAnchorsStores.getState();

package/dist/hooks/useAsyncFetcher.js

@@ -1,4 +1,3 @@
-"use client";
 import { useRef, useState, useEffect, useCallback } from "react";
 export function useAsyncFetcher() {
     const [isPending, setPending] = useState(false);

package/dist/hooks/useCookies.js

@@ -1,4 +1,3 @@
-"use client";
 import Cookies from 'js-cookie';
 // wade 2024.12.06 (js-cookie 版本)
 export function useCookies() {
@@ -17,3 +16,27 @@ export function useCookies() {
     };
     return { setCookies, getCookies, updateCookies, deleteCookies };
 }
+//
+// //wade 2024.12.06
+// export function useCookies() {
+// 	const setCookies = (name: string, value: string, days = 7) => {
+// 		const date = new Date();
+// 		date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+// 		const expires = `expires=${date.toUTCString()}`;
+// 		document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
+// 	}
+// 	const getCookies = (name: string) => {
+// 		const cookies = document.cookie.split("; ");
+// 		for (const cookie of cookies) {
+// 			const [key, value] = cookie.split("=");
+// 			if (key === name) return decodeURIComponent(value);
+// 		}
+// 		return null; // 如果找不到，返回 null
+// 	}
+// 	const updateCookies = (name: string, value: string, days = 7) =>
+// 		getCookies(name) !== null && setCookies(name, value, days);
+// 	const deleteCookies = (name: string) => {
+// 		document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
+// 	}
+// 	return { setCookies, getCookies, updateCookies, deleteCookies }
+// }

package/dist/hooks/useDebounce.js

@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useRef } from "react";
 export function useDebounce({ callback, dependency = [], delay = 500, active = true, }) {
     if (!active || !callback)

package/dist/hooks/useDebounceValue.js

@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useRef, useState } from "react";
 export function useDebounceValue(value, delay = 500) {
     const [debounceValue, setDebounceValue] = useState(value);

package/dist/hooks/useDragResize.js

@@ -1,4 +1,3 @@
-"use client";
 //wade 2024.12.06
 import { useEffect, useRef, useState } from "react";
 export function useDragResize({ active = true, direction = "horizontal", minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }) {

package/dist/hooks/useEffectLeave.js

@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useRef } from "react";
 export function useEffectLeave(callback) {
     const callbackRef = useRef(callback);

package/dist/hooks/useEffectOne.js

@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useRef } from "react";
 export function useEffectOne(callback) {
     const callbackRef = useRef(callback);

package/dist/hooks/useHash.js

@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useState } from "react";
 export function useHash() {
     const [hash, setHash] = useState("");

package/dist/hooks/useLocations.js

@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useState } from "react";
 ;
 export function useLocations() {

package/dist/hooks/useMounted.js

@@ -1,4 +1,3 @@
-"use client";
 import { useEffect, useState } from "react";
 export function useMounted() {
     const [isMounded, setMounded] = useState(false);

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, };

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';

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

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import { Label } from "../../index.js";
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react/jsx-runtime").JSX.Element | null;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };