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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/components/anchors/anchors.d.ts +0 -2
  2. package/dist/components/anchors/anchors.js +7 -10
  3. package/dist/components/embla-carousels/embla-carousels-hooks.d.ts +36 -0
  4. package/dist/components/embla-carousels/embla-carousels-hooks.js +83 -0
  5. package/dist/components/embla-carousels/embla-carousels.d.ts +23 -0
  6. package/dist/components/embla-carousels/embla-carousels.js +58 -0
  7. package/dist/components/embla-carousels/index.d.ts +2 -0
  8. package/dist/components/embla-carousels/index.js +2 -0
  9. package/dist/components/emblas/embla-container.d.ts +8 -0
  10. package/dist/components/emblas/embla-container.js +12 -0
  11. package/dist/components/emblas/embla-context.d.ts +21 -0
  12. package/dist/components/emblas/embla-context.js +12 -0
  13. package/dist/components/emblas/embla.d.ts +20 -0
  14. package/dist/components/emblas/embla.js +124 -0
  15. package/dist/components/emblas/emblas-pagination.d.ts +11 -0
  16. package/dist/components/emblas/emblas-pagination.js +89 -0
  17. package/dist/components/emblas/index.d.ts +4 -0
  18. package/dist/components/emblas/index.js +4 -0
  19. package/dist/components/index.d.ts +3 -0
  20. package/dist/components/index.js +3 -0
  21. package/dist/components/scroll-containers/index.d.ts +3 -0
  22. package/dist/components/scroll-containers/index.js +3 -0
  23. package/dist/components/scroll-containers/lenis-scroll.d.ts +20 -0
  24. package/dist/components/scroll-containers/lenis-scroll.js +65 -0
  25. package/dist/components/scroll-containers/native-scroll.d.ts +6 -0
  26. package/dist/components/scroll-containers/native-scroll.js +23 -0
  27. package/dist/components/scroll-containers/scroll-containers.d.ts +25 -0
  28. package/dist/components/scroll-containers/scroll-containers.js +46 -0
  29. package/dist/components/tests/tests.js +0 -1
  30. package/dist/hooks/useAnchors.d.ts +28 -26
  31. package/dist/hooks/useAnchors.js +95 -65
  32. package/dist/hooks/useAsyncFetcher.js +0 -1
  33. package/dist/hooks/useCookies.js +24 -1
  34. package/dist/hooks/useDebounce.js +0 -1
  35. package/dist/hooks/useDebounceValue.js +0 -1
  36. package/dist/hooks/useDragResize.js +0 -1
  37. package/dist/hooks/useEffectLeave.js +0 -1
  38. package/dist/hooks/useEffectOne.js +0 -1
  39. package/dist/hooks/useHash.js +0 -1
  40. package/dist/hooks/useLocations.js +0 -1
  41. package/dist/hooks/useMounted.js +0 -1
  42. package/dist/shadcns/components/ui/alert.d.ts +1 -1
  43. package/dist/shadcns/components/ui/badge.d.ts +1 -1
  44. package/dist/shadcns/components/ui/button-group.d.ts +11 -0
  45. package/dist/shadcns/components/ui/button-group.js +26 -0
  46. package/dist/shadcns/components/ui/button.d.ts +1 -1
  47. package/dist/shadcns/components/ui/button.js +0 -1
  48. package/dist/shadcns/components/ui/field.d.ts +24 -0
  49. package/dist/shadcns/components/ui/field.js +75 -0
  50. package/dist/shadcns/components/ui/item.d.ts +23 -0
  51. package/dist/shadcns/components/ui/item.js +65 -0
  52. package/dist/shadcns/components/ui/native-select.d.ts +7 -0
  53. package/dist/shadcns/components/ui/native-select.js +13 -0
  54. package/dist/shadcns/components/ui/navigation-menu.d.ts +1 -1
  55. package/dist/shadcns/components/ui/navigation-menu.js +0 -1
  56. package/dist/shadcns/components/ui/sidebar.d.ts +1 -1
  57. package/dist/shadcns/components/ui/textarea.js +0 -1
  58. package/dist/shadcns/components/ui/toggle.d.ts +1 -1
  59. package/dist/shadcns/index.d.ts +1 -0
  60. package/dist/shadcns/index.js +1 -0
  61. package/package.json +6 -2
@@ -0,0 +1,65 @@
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ // update: 2025.11.12
3
+ // version: 0.0.1.bate
4
+ // dev: wade
5
+ import { memo, useEffect, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
6
+ import { ReactLenis, useLenis, } from "lenis/react";
7
+ import Lenis from 'lenis';
8
+ import { create } from "zustand";
9
+ import { ScrollContainerContext, setScrollContainerStore } from "./scroll-containers";
10
+ import { cn } from "../../shadcns/index.js";
11
+ export const LenisScroll = memo((props) => {
12
+ return (_jsxs(_Fragment, { children: [props?.root == true
13
+ ? _jsx(LenisRootScroll, { ...props })
14
+ : _jsx(LenisContainerScroll, { ...props }), "\t"] }));
15
+ });
16
+ export const LenisRootScroll = memo(({ root, options }) => {
17
+ const lenis = useLenis();
18
+ const lenisRef = useRef(null);
19
+ const registerRootLenis = useEffectEvent(() => {
20
+ if (!root == true || !lenis)
21
+ return;
22
+ setRootLenis(lenis);
23
+ });
24
+ useEffect(() => { registerRootLenis(); }, [lenis]);
25
+ return (_jsx(ReactLenis, { ref: lenisRef, root: root, options: {
26
+ autoRaf: true,
27
+ lerp: 0.0005,
28
+ duration: 1.5,
29
+ smoothWheel: true,
30
+ ...options
31
+ } }));
32
+ });
33
+ export const LenisContainerScroll = memo(({ name, className, children, options, ...restProps }) => {
34
+ const [containerRef, setContainerRef] = useState();
35
+ const wrapperRef = useRef(null);
36
+ const contentRef = useRef(null);
37
+ const initLenis = useEffectEvent(() => {
38
+ if (!wrapperRef.current || !contentRef.current || !name)
39
+ return;
40
+ const lenis = new Lenis({
41
+ wrapper: wrapperRef.current,
42
+ content: contentRef.current,
43
+ autoRaf: true,
44
+ ...options
45
+ });
46
+ setContainerRef(contentRef);
47
+ setScrollContainerStore({ name, action: "add", node: lenis });
48
+ return () => {
49
+ setScrollContainerStore({ name, action: "remove" });
50
+ lenis?.destroy?.();
51
+ };
52
+ });
53
+ useLayoutEffect(() => {
54
+ const effect = initLenis();
55
+ return effect;
56
+ }, [name, options]);
57
+ 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 }) }) }));
58
+ });
59
+ export const useLenisStores = create()(() => ({
60
+ root: null,
61
+ }));
62
+ export const setRootLenis = (lenis) => useLenisStores.setState(() => {
63
+ return { root: lenis };
64
+ });
65
+ export const getRootLenis = () => useLenisStores.getState();
@@ -0,0 +1,6 @@
1
+ type PropsType<T extends React.ElementType = "div"> = React.ComponentProps<T> & {
2
+ name: string;
3
+ tag?: T;
4
+ };
5
+ 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)>;
6
+ export {};
@@ -0,0 +1,23 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ // update: 2025.11.12
3
+ // version: 0.0.1.bate
4
+ // dev: wade
5
+ import { memo, useEffectEvent, useEffect, useRef, useState } from "react";
6
+ import { ScrollContainerContext, setScrollContainerStore } from "./scroll-containers";
7
+ import { cn } from "../../shadcns/index.js";
8
+ export const NativeScroll = memo(({ tag: Component = "div", name, className, ...restProps }) => {
9
+ const componentRef = useRef(null);
10
+ const [containerRef, setContainerRef] = useState();
11
+ const nativeEffect = useEffectEvent(() => {
12
+ if (!componentRef.current)
13
+ return;
14
+ setContainerRef(componentRef);
15
+ setScrollContainerStore({ name, action: "add", node: componentRef.current });
16
+ return () => { setScrollContainerStore({ name, action: "remove" }); };
17
+ });
18
+ useEffect(() => {
19
+ const effect = nativeEffect();
20
+ return effect;
21
+ }, [componentRef?.current]);
22
+ return (_jsx(ScrollContainerContext, { value: { containerRef }, children: _jsx(Component, { ref: componentRef, "data-native-scroll": name, className: cn("overflow-auto", "will-change-transform", className), ...restProps }) }));
23
+ });
@@ -0,0 +1,25 @@
1
+ import Lenis from "lenis";
2
+ import { LenisScrollProps } from "./lenis-scroll";
3
+ type PropsType<T extends React.ElementType = "div"> = React.ComponentProps<T> & LenisScrollProps & {
4
+ name: string;
5
+ lenis?: boolean;
6
+ };
7
+ export declare const ScrollContainer: <T extends React.ElementType = "div">({ name, lenis, ...props }: PropsType<T>) => import("react/jsx-runtime").JSX.Element;
8
+ export interface ScrollContainerContext {
9
+ containerRef: React.RefObject<HTMLDivElement | null> | undefined;
10
+ }
11
+ export declare const ScrollContainerContext: import("react").Context<ScrollContainerContext | null>;
12
+ export declare const useScrollContainerContext: () => ScrollContainerContext;
13
+ export interface ScrollContainersStores {
14
+ containers: Map<string, Lenis | HTMLDivElement | null>;
15
+ }
16
+ export declare const useScrollContainersStores: import("zustand").UseBoundStore<import("zustand").StoreApi<ScrollContainersStores>>;
17
+ export declare const getScrollContainer: (name: string) => HTMLDivElement | Lenis | null | undefined;
18
+ export declare const getScrollContainerStores: () => ScrollContainersStores;
19
+ export interface SetStoreOptions {
20
+ name: string;
21
+ node?: Lenis | HTMLDivElement | null;
22
+ action: "add" | "remove";
23
+ }
24
+ export declare const setScrollContainerStore: (options: SetStoreOptions) => void;
25
+ export {};
@@ -0,0 +1,46 @@
1
+ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
2
+ // update: 2025.11.12
3
+ // version: 0.0.1.bate
4
+ // dev: wade
5
+ import { createContext, use } from "react";
6
+ import Lenis from "lenis";
7
+ import { create } from "zustand";
8
+ import { NativeScroll } from "./native-scroll";
9
+ import { LenisScroll } from "./lenis-scroll";
10
+ export const ScrollContainer = ({ name, lenis = false, ...props }) => {
11
+ return (_jsx(_Fragment, { children: lenis
12
+ ? _jsx(LenisScroll, { name: name, ...props })
13
+ : _jsx(NativeScroll, { name: name, ...props }) }));
14
+ };
15
+ export const ScrollContainerContext = createContext(null);
16
+ export const useScrollContainerContext = () => {
17
+ const context = use(ScrollContainerContext);
18
+ if (!context)
19
+ throw new Error("useScrollContainerContext must be used inside ScrollContainerProvider");
20
+ return context;
21
+ };
22
+ export const useScrollContainersStores = create()(() => ({
23
+ containers: new Map(),
24
+ }));
25
+ export const getScrollContainer = (name) => {
26
+ const stores = useScrollContainersStores.getState();
27
+ return stores.containers?.get(name);
28
+ };
29
+ export const getScrollContainerStores = () => useScrollContainersStores.getState();
30
+ export const setScrollContainerStore = (options) => {
31
+ const { action, name, node } = options;
32
+ useScrollContainersStores.setState(stores => {
33
+ const containerDom = stores.containers?.get(name);
34
+ const isContainerNode = node instanceof Lenis || node instanceof HTMLDivElement;
35
+ if (action == "add" && isContainerNode) {
36
+ if (containerDom == node)
37
+ return stores;
38
+ // console.log("node", node, name);
39
+ stores.containers?.set(name, node);
40
+ }
41
+ else if (action == "remove" && containerDom) {
42
+ stores.containers?.delete(name);
43
+ }
44
+ return { containers: stores.containers };
45
+ });
46
+ };
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
3
2
  import { Button } from "../../shadcns/index.js";
4
3
  import { CarouselPrevious } from "../../shadcns/index.js";
@@ -1,14 +1,12 @@
1
- import { animate } from "motion/react";
2
- import type { Easing } from "motion/react";
3
- export interface PropsTypes {
4
- }
1
+ import type { AnimationPlaybackControlsWithThen, Easing } from "motion/react";
2
+ import Lenis from "lenis";
5
3
  export interface AnimateOptions {
6
4
  duration?: number;
7
5
  delay?: number;
8
6
  ease?: Easing | Easing[] | undefined;
9
- onScroll?: () => void;
7
+ onScroll?: (lenis?: Lenis) => void;
10
8
  onScrolling?: (value: number) => void;
11
- onScrolled?: () => void;
9
+ onScrolled?: (lenis?: Lenis) => void;
12
10
  }
13
11
  export interface AnchorOptions extends AnimateOptions {
14
12
  anchor: string;
@@ -31,41 +29,45 @@ export interface ScrollOptions extends AnimateOptions {
31
29
  };
32
30
  direction?: AnchorOptions["direction"];
33
31
  }
34
- export type AnimateController = ReturnType<typeof animate>;
35
- export declare function useAnchors(): {
36
- registerAnchors: typeof registerAnchors;
37
- registerContainers: typeof registerContainers;
38
- registerOffseters: typeof registerOffseters;
39
- setStores: (states: AnchorStoreStates) => void;
32
+ export type AnimateController = AnimationPlaybackControlsWithThen;
33
+ export interface AnchorsMethods {
34
+ registerAnchors: (name: string) => {
35
+ [key: string]: string | React.RefObject<null>;
36
+ ref: React.RefObject<null>;
37
+ };
38
+ registerOffseters: (name: string) => {
39
+ [key: string]: string | React.RefObject<null>;
40
+ ref: React.RefObject<null>;
41
+ };
42
+ setStores: (options: AnchorStoreOptions) => void;
40
43
  getStores: () => AnchorsStores;
41
44
  scrollToAnchor: (anchorOptions: AnchorOptions) => void;
42
- };
45
+ }
46
+ export declare function useAnchors(): AnchorsMethods;
43
47
  export interface RegistrationDatas {
44
48
  key: keyof AnchorsStores;
45
49
  name: string;
46
- node: HTMLDivElement | null;
47
50
  }
48
- export declare function registration({ name, key, node }: RegistrationDatas): void;
49
- export declare function registerAnchors(name: string): {
50
- ref: (node: HTMLDivElement | null) => void;
51
- "data-anchor": string;
51
+ export declare function useRegistration({ key, name }: RegistrationDatas): {
52
+ [x: string]: string | import("react").RefObject<null>;
53
+ ref: import("react").RefObject<null>;
52
54
  };
53
- export declare function registerContainers(name: string): {
54
- ref: (node: HTMLDivElement | null) => void;
55
- "data-anchor-container": string;
55
+ export declare function registerAnchors(name: string): {
56
+ [x: string]: string | import("react").RefObject<null>;
57
+ ref: import("react").RefObject<null>;
56
58
  };
57
59
  export declare function registerOffseters(name: string): {
58
- ref: (node: HTMLDivElement | null) => void;
59
- "data-anchor-offseter": string;
60
+ [x: string]: string | import("react").RefObject<null>;
61
+ ref: import("react").RefObject<null>;
60
62
  };
61
63
  export interface AnchorsStores {
62
64
  anchors: Map<string, HTMLElement | null>;
63
- containers: Map<string, HTMLElement | null>;
64
65
  offseters: Map<string, HTMLElement | null>;
65
66
  }
66
67
  export declare const useAnchorsStores: import("zustand").UseBoundStore<import("zustand").StoreApi<AnchorsStores>>;
67
68
  export declare const getAnchorsStores: () => AnchorsStores;
68
- export interface AnchorStoreStates extends RegistrationDatas {
69
+ export interface AnchorStoreOptions extends RegistrationDatas {
70
+ node: HTMLDivElement | null;
69
71
  action: "add" | "remove";
70
72
  }
71
- export declare const setAnchorStore: (states: AnchorStoreStates) => void;
73
+ export declare const setAnchorsStore: (options: AnchorStoreOptions) => void;
@@ -1,13 +1,17 @@
1
- "use client";
2
- // update: 2025.10.30
3
- // version: 0.0.1.bate
1
+ // update: 2025.11.12
2
+ // version: 0.0.3.bate
4
3
  // dev: wade
5
- import { useCallback, useMemo, useRef } from "react";
6
- import { animate, motionValue } from "motion/react";
4
+ import { useCallback, useLayoutEffect, useMemo, useRef } from "react";
5
+ import { useAnimate, motionValue } from "motion/react";
7
6
  import { create } from "zustand";
7
+ import { getScrollContainerStores, getRootLenis } from "../components/index.js";
8
+ import Lenis from "lenis";
9
+ const ANCHOR_ATTRIBUTE = "data-anchor";
10
+ const OFFSETER_ATTRIBUTE = "data-anchor-offseter";
8
11
  export function useAnchors() {
12
+ const [_, animate] = useAnimate();
9
13
  const controllerRef = useRef(new Map());
10
- 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 }) => {
14
+ const scrollAnimations = useCallback(({ controllerKey, containerDom, anchorScrollValue, containerScrollValue, direction = "y", duration = 1, delay = 0, ease = [0, 1, .5, .99], onScroll: onPlay, onScrolled, onScrolling, ...props }) => {
11
15
  if (direction !== "y" && direction !== "x") {
12
16
  console.error(`Scroll Direction isn't 'x' or 'y' `);
13
17
  return;
@@ -33,12 +37,21 @@ export function useAnchors() {
33
37
  controllerRef.current.delete(controllerKey);
34
38
  onScrolled?.();
35
39
  };
36
- const options = { duration, ease, delay, onPlay, onUpdate, onComplete };
40
+ const options = {
41
+ duration,
42
+ ease,
43
+ delay,
44
+ onPlay,
45
+ onUpdate,
46
+ onComplete,
47
+ ...props
48
+ };
37
49
  controllerRef.current.set(controllerKey, animate(motionStartValue, endValue, options));
38
50
  }, []);
39
51
  const scrollToAnchor = useCallback((anchorOptions) => {
40
- const { anchor: anchorName, container: containerName, offseters, align, offset = 0, ...options } = anchorOptions;
41
- const stores = getAnchorsStores();
52
+ const { anchor: anchorName, container: containerName, offseters, align, offset = 0, direction = "y", ...options } = anchorOptions;
53
+ const anchorsStores = getAnchorsStores();
54
+ const scrollContainersStores = getScrollContainerStores();
42
55
  const isScrolltoAnchor = anchorName !== "#";
43
56
  const isScrollContainer = containerName && containerName !== "window";
44
57
  const controllerKey = containerName ?? "window";
@@ -47,15 +60,54 @@ export function useAnchors() {
47
60
  controllerRef.current.delete(controllerKey);
48
61
  }
49
62
  const anchorDom = isScrolltoAnchor
50
- ? stores.anchors.get(anchorName)
63
+ ? anchorsStores.anchors.get(anchorName)
51
64
  : undefined;
52
65
  if (isScrolltoAnchor && !(anchorDom instanceof HTMLElement))
53
66
  return;
54
67
  const containerDom = isScrollContainer
55
- ? stores.containers.get(containerName)
68
+ ? scrollContainersStores.containers.get(containerName)
56
69
  : window;
57
70
  if (!containerDom)
58
71
  return;
72
+ const getOffseterDomClient = (offseters) => {
73
+ const offseterDom = anchorsStores.offseters.get(offseters);
74
+ const { clientWidth, clientHeight } = offseterDom || {};
75
+ return { width: clientWidth ?? 0, height: clientHeight ?? 0 };
76
+ };
77
+ const offsets = Array.isArray(offseters)
78
+ ? offseters.reduce((init, offseter) => {
79
+ const { width, height } = getOffseterDomClient(offseter);
80
+ return {
81
+ width: (init.width ?? 0) + width,
82
+ height: (init.height ?? 0) + height
83
+ };
84
+ }, {})
85
+ : typeof offseters == "string"
86
+ ? getOffseterDomClient(offseters)
87
+ : { width: 0, height: 0 };
88
+ const offsetValue = {
89
+ width: direction === "x" ? offsets.width + offset : 0,
90
+ height: direction === "y" ? offsets.height + offset : 0,
91
+ };
92
+ const isLenisScroll = containerDom == window
93
+ && window.document.documentElement.classList.contains("lenis")
94
+ || containerDom instanceof Lenis;
95
+ if (isLenisScroll) {
96
+ const lenis = (isScrollContainer ? containerDom : getRootLenis()?.root);
97
+ // TODO 尚未找到可以判斷已經移動到錨點位置的方式
98
+ if (!lenis)
99
+ return;
100
+ const directionOffset = direction === "x"
101
+ ? offsetValue.width + offset
102
+ : offsetValue.height + offset;
103
+ // TODO 尚未建立lenis options完整設定
104
+ lenis.scrollTo(anchorDom ?? 0, {
105
+ offset: (directionOffset * -1),
106
+ onStart: (lenis) => options?.onScroll?.(lenis),
107
+ onComplete: (lenis) => options?.onScrolled?.(lenis)
108
+ });
109
+ return;
110
+ }
59
111
  const containerScrollValue = {
60
112
  top: Math.round(isScrollContainer
61
113
  ? containerDom.scrollTop
@@ -71,100 +123,78 @@ export function useAnchors() {
71
123
  left: containerScrollValue.left - (isScrollContainer ? containerRect.left : 0),
72
124
  top: containerScrollValue.top - (isScrollContainer ? containerRect.top : 0)
73
125
  };
74
- const offsetsValue = Array.isArray(offseters)
75
- ? offseters.reduce((init, offseter) => {
76
- const offseterDom = stores.offseters.get(offseter);
77
- const width = (init.width ?? 0) + (offseterDom ? offseterDom.clientWidth : 0);
78
- const height = (init.height ?? 0) + (offseterDom ? offseterDom.clientHeight : 0);
79
- return { width, height };
80
- }, {})
81
- : { width: 0, height: 0 };
82
- const offsetsSumValue = {
83
- width: options.direction === "x" ? offsetsValue.width + offset : 0,
84
- height: options.direction === "y" ? offsetsValue.height + offset : 0,
85
- };
86
126
  const anchorRect = anchorDom ? anchorDom.getBoundingClientRect() : { left: 0, top: 0 };
87
127
  const anchorScrollValue = {
88
128
  left: isScrolltoAnchor
89
- ? Math.round(anchorRect.left + containerOffsetValue.left - offsetsSumValue.width)
90
- : offsetsSumValue.width,
129
+ ? Math.round(anchorRect.left + containerOffsetValue.left - offsetValue.width)
130
+ : offsetValue.width,
91
131
  top: isScrolltoAnchor
92
- ? Math.round(anchorRect.top + containerOffsetValue.top - offsetsSumValue.height)
93
- : offsetsSumValue.height
132
+ ? Math.round(anchorRect.top + containerOffsetValue.top - offsetValue.height)
133
+ : offsetValue.height
94
134
  };
95
135
  scrollAnimations({
96
136
  controllerKey,
97
137
  containerDom,
98
138
  containerScrollValue,
99
139
  anchorScrollValue,
140
+ direction,
100
141
  ...options
101
142
  });
102
143
  }, []);
103
144
  const returnsMemo = useMemo(() => ({
104
145
  registerAnchors,
105
- registerContainers,
106
146
  registerOffseters,
107
- setStores: setAnchorStore,
147
+ setStores: setAnchorsStore,
108
148
  getStores: getAnchorsStores,
109
149
  scrollToAnchor
110
150
  }), [scrollToAnchor]);
111
151
  return returnsMemo;
112
152
  }
113
- export function registration({ name, key, node }) {
114
- if (!node)
115
- return;
116
- if (name == "#") {
117
- console.error(`Cannot register ${key} name '#'`);
118
- return;
119
- }
120
- if (node instanceof Window || node.tagName === "BODY" || node.tagName === "HTML") {
121
- console.error(`Cannot register ${key} 'body' or 'html' `);
122
- return;
123
- }
124
- setAnchorStore({ key, name, node, action: node ? "add" : "remove" });
153
+ export function useRegistration({ key, name }) {
154
+ const ref = useRef(null);
155
+ const attribute = key == "anchors" ? ANCHOR_ATTRIBUTE : OFFSETER_ATTRIBUTE;
156
+ useLayoutEffect(() => {
157
+ setAnchorsStore({ key, action: "add", node: ref.current, name });
158
+ return () => { setAnchorsStore({ key, action: "remove", node: ref.current, name }); };
159
+ }, []);
160
+ return { ref, [attribute]: name };
125
161
  }
126
- const ANCHOR_ATTRIBUTE = "data-anchor";
127
- const CONTAINER_ATTRIBUTE = "data-anchor-container";
128
- const OFFSETER_ATTRIBUTE = "data-anchor-offseter";
129
162
  export function registerAnchors(name) {
130
- const register = useCallback((node) => registration({ key: "anchors", name, node }), [name]);
131
- return { ref: register, [ANCHOR_ATTRIBUTE]: name };
132
- }
133
- export function registerContainers(name) {
134
- const register = useCallback((node) => registration({ key: "containers", name, node }), [name]);
135
- return { ref: register, [CONTAINER_ATTRIBUTE]: name };
163
+ return useRegistration({ key: "anchors", name });
136
164
  }
137
165
  export function registerOffseters(name) {
138
- const register = useCallback((node) => registration({ key: "offseters", name, node }), [name]);
139
- return { ref: register, [OFFSETER_ATTRIBUTE]: name };
166
+ return useRegistration({ key: "offseters", name });
140
167
  }
141
168
  export const useAnchorsStores = create()(() => ({
142
169
  anchors: new Map(),
143
- containers: new Map(),
144
170
  offseters: new Map(),
145
171
  }));
146
172
  export const getAnchorsStores = () => useAnchorsStores.getState();
147
- export const setAnchorStore = (states) => {
148
- const { key, action, name, node } = states;
173
+ export const setAnchorsStore = (options) => {
174
+ const { key, action, name, node } = options;
149
175
  useAnchorsStores.setState(stores => {
150
176
  switch (key) {
151
177
  case "anchors":
152
- if (action == "add" && node instanceof HTMLElement)
178
+ const anchorDom = stores.anchors?.get(name);
179
+ if (action == "add" && node instanceof HTMLElement) {
180
+ if (anchorDom == node)
181
+ return stores;
153
182
  stores.anchors?.set(name, node);
154
- if (action == "remove")
183
+ }
184
+ else if (action == "remove" && anchorDom) {
155
185
  stores.anchors?.delete(name);
186
+ }
156
187
  return { anchors: stores.anchors };
157
- case "containers":
158
- if (action == "add" && node instanceof HTMLElement)
159
- stores.containers?.set(name, node);
160
- if (action == "remove")
161
- stores.containers?.delete(name);
162
- return { containers: stores.containers };
163
188
  case "offseters":
164
- if (action == "add" && node instanceof HTMLElement)
189
+ const offseterDom = stores.offseters?.get(name);
190
+ if (action == "add" && node instanceof HTMLElement) {
191
+ if (offseterDom == node)
192
+ return stores;
165
193
  stores.offseters?.set(name, node);
166
- if (action == "remove")
194
+ }
195
+ else if (action == "remove" && offseterDom) {
167
196
  stores.offseters?.delete(name);
197
+ }
168
198
  return { offseters: stores.offseters };
169
199
  default:
170
200
  return stores;
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useRef, useState, useEffect, useCallback } from "react";
3
2
  export function useAsyncFetcher() {
4
3
  const [isPending, setPending] = useState(false);
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import Cookies from 'js-cookie';
3
2
  // wade 2024.12.06 (js-cookie 版本)
4
3
  export function useCookies() {
@@ -17,3 +16,27 @@ export function useCookies() {
17
16
  };
18
17
  return { setCookies, getCookies, updateCookies, deleteCookies };
19
18
  }
19
+ //
20
+ // //wade 2024.12.06
21
+ // export function useCookies() {
22
+ // const setCookies = (name: string, value: string, days = 7) => {
23
+ // const date = new Date();
24
+ // date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
25
+ // const expires = `expires=${date.toUTCString()}`;
26
+ // document.cookie = `${name}=${encodeURIComponent(value)}; ${expires}; path=/`;
27
+ // }
28
+ // const getCookies = (name: string) => {
29
+ // const cookies = document.cookie.split("; ");
30
+ // for (const cookie of cookies) {
31
+ // const [key, value] = cookie.split("=");
32
+ // if (key === name) return decodeURIComponent(value);
33
+ // }
34
+ // return null; // 如果找不到,返回 null
35
+ // }
36
+ // const updateCookies = (name: string, value: string, days = 7) =>
37
+ // getCookies(name) !== null && setCookies(name, value, days);
38
+ // const deleteCookies = (name: string) => {
39
+ // document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;
40
+ // }
41
+ // return { setCookies, getCookies, updateCookies, deleteCookies }
42
+ // }
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useEffect, useRef } from "react";
3
2
  export function useDebounce({ callback, dependency = [], delay = 500, active = true, }) {
4
3
  if (!active || !callback)
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useEffect, useRef, useState } from "react";
3
2
  export function useDebounceValue(value, delay = 500) {
4
3
  const [debounceValue, setDebounceValue] = useState(value);
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  //wade 2024.12.06
3
2
  import { useEffect, useRef, useState } from "react";
4
3
  export function useDragResize({ active = true, direction = "horizontal", minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }) {
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useEffect, useRef } from "react";
3
2
  export function useEffectLeave(callback) {
4
3
  const callbackRef = useRef(callback);
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useEffect, useRef } from "react";
3
2
  export function useEffectOne(callback) {
4
3
  const callbackRef = useRef(callback);
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useEffect, useState } from "react";
3
2
  export function useHash() {
4
3
  const [hash, setHash] = useState("");
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useEffect, useState } from "react";
3
2
  ;
4
3
  export function useLocations() {
@@ -1,4 +1,3 @@
1
- "use client";
2
1
  import { useEffect, useState } from "react";
3
2
  export function useMounted() {
4
3
  const [isMounded, setMounded] = useState(false);
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
3
  declare const alertVariants: (props?: ({
4
4
  variant?: "default" | "destructive" | null | undefined;
5
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
5
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
6
  declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
7
7
  declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
8
8
  declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { type VariantProps } from 'class-variance-authority';
3
3
  declare const badgeVariants: (props?: ({
4
4
  variant?: "default" | "outline" | "destructive" | "secondary" | null | undefined;
5
- } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
5
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
6
  declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
7
7
  asChild?: boolean;
8
8
  }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,11 @@
1
+ import { type VariantProps } from "class-variance-authority";
2
+ import { Separator } from "../../index.js";
3
+ declare const buttonGroupVariants: (props?: ({
4
+ orientation?: "horizontal" | "vertical" | null | undefined;
5
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
6
+ declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react/jsx-runtime").JSX.Element;
7
+ declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
8
+ asChild?: boolean;
9
+ }): import("react/jsx-runtime").JSX.Element;
10
+ declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
11
+ export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };