@euler-edu/react 0.0.0-stage → 7.0.1-beta0

package/lib/hooks/stores/modal.js

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useModalEffect = exports.useModalStore = void 0;
+const react_1 = __importDefault(require("react"));
+const stores_1 = require("../../utils/stores");
+const random_1 = require("../../hooks/random");
+exports.useModalStore = (0, stores_1.create)(set => ({
+    modals: [],
+    addModal: ({ key, isOpen, onChangeIsOpen, content }) => set(({ modals }) => ({
+        modals: [...modals, { key, isOpen, onChangeIsOpen, content }],
+    })),
+    removeModal: (key) => set(({ modals }) => ({
+        modals: modals.filter(modal => modal.key !== key),
+    })),
+    updateModal: ({ key, isOpen, onChangeIsOpen, content }) => set(({ modals }) => ({
+        modals: modals.map(modal => modal.key === key ? { key, isOpen, onChangeIsOpen, content } : modal),
+    })),
+}));
+const useModalEffect = ({ isOpen = true, onChangeIsOpen, content, }, dep = []) => {
+    const [id] = (0, random_1.useDateToken)();
+    const { addModal, removeModal, updateModal } = (0, exports.useModalStore)();
+    react_1.default.useEffect(() => {
+        addModal({ key: id, isOpen, onChangeIsOpen, content });
+        return () => removeModal(id);
+    }, []);
+    react_1.default.useEffect(() => {
+        updateModal({ key: id, isOpen, onChangeIsOpen, content });
+    }, [isOpen, ...dep]);
+};
+exports.useModalEffect = useModalEffect;
+//# sourceMappingURL=modal.js.map

package/lib/hooks/stores/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../src/hooks/stores/modal.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAEb,kDAA0B;AAE1B,2CAAwC;AAExC,2CAA8C;AA0BjC,QAAA,aAAa,GAAG,IAAA,eAAM,EAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;IACjD,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,EAAE,CACrD,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QACnB,MAAM,EAAE,CAAC,GAAG,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC;KAC9D,CAAC,CAAC;IACL,WAAW,EAAE,CAAC,GAAW,EAAE,EAAE,CAC3B,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC;KAClD,CAAC,CAAC;IACL,WAAW,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,EAAE,CACxD,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CACzB,KAAK,CAAC,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,CACrE;KACF,CAAC,CAAC;CACN,CAAC,CAAC,CAAC;AAEG,MAAM,cAAc,GAAG,CAC5B,EACE,MAAM,GAAG,IAAI,EACb,cAAc,EACd,OAAO,GAKR,EACD,MAAkB,EAAE,EACpB,EAAE;IACF,MAAM,CAAC,EAAE,CAAC,GAAG,IAAA,qBAAY,GAAE,CAAC;IAC5B,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,GAAG,IAAA,qBAAa,GAAE,CAAC;IAE/D,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC,CAAC;AACvB,CAAC,CAAC;AAtBW,QAAA,cAAc,kBAsBzB"}

package/lib/hooks/stores/shortcut.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type ShortcutEvent as ShortcutEventType } from '@euler-edu/constant/shortcuts';
+type ShortcutEvent = () => void | Promise<void>;
+type Store = {
+    shortcutEvents: Partial<Record<ShortcutEventType, ShortcutEvent[]>>;
+    isDisabled: boolean;
+    addShortcutEvent: (event: ShortcutEventType, callback: ShortcutEvent) => void;
+    removeShortcutEvent: (event: ShortcutEventType, callback: ShortcutEvent) => void;
+    setIsDisabled: (isDisabled: boolean) => void;
+};
+export declare const useShortcutStore: import("zustand/react").UseBoundStore<import("zustand/vanilla").StoreApi<Store>>;
+export declare const useShortcutEffect: (event: ShortcutEventType, callback?: ShortcutEvent, deps?: React.DependencyList) => void;
+export declare const useDisableShortcutEffect: (isDisabled?: boolean) => void;
+export {};

package/lib/hooks/stores/shortcut.js

@@ -0,0 +1,60 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisableShortcutEffect = exports.useShortcutEffect = exports.useShortcutStore = void 0;
+const react_1 = __importDefault(require("react"));
+const stores_1 = require("../../utils/stores");
+exports.useShortcutStore = (0, stores_1.create)(set => ({
+    isDisabled: false,
+    shortcutEvents: {},
+    addShortcutEvent: (event, callback) => set(state => {
+        var _a;
+        const events = (_a = state.shortcutEvents[event]) !== null && _a !== void 0 ? _a : [];
+        return {
+            shortcutEvents: {
+                ...state.shortcutEvents,
+                [event]: [...events, callback],
+            },
+        };
+    }),
+    removeShortcutEvent: (event, callback) => set(state => {
+        var _a;
+        const events = (_a = state.shortcutEvents[event]) !== null && _a !== void 0 ? _a : [];
+        return {
+            shortcutEvents: {
+                ...state.shortcutEvents,
+                [event]: events.filter(cb => cb !== callback),
+            },
+        };
+    }),
+    setIsDisabled: isDisabled => set({ isDisabled }),
+}));
+const useShortcutEffect = (event, callback, deps = []) => {
+    const { addShortcutEvent, removeShortcutEvent } = (0, exports.useShortcutStore)();
+    react_1.default.useEffect(() => {
+        if (!callback)
+            return;
+        addShortcutEvent(event, callback);
+        return () => {
+            removeShortcutEvent(event, callback);
+        };
+    }, [event, ...deps]);
+};
+exports.useShortcutEffect = useShortcutEffect;
+let count = 0;
+const useDisableShortcutEffect = (isDisabled = true) => {
+    const { setIsDisabled } = (0, exports.useShortcutStore)();
+    react_1.default.useEffect(() => {
+        count += isDisabled ? 1 : 0;
+        setIsDisabled(count > 0);
+        return () => {
+            count -= isDisabled ? 1 : 0;
+            setIsDisabled(count > 0);
+        };
+    }, [isDisabled, setIsDisabled]);
+};
+exports.useDisableShortcutEffect = useDisableShortcutEffect;
+//# sourceMappingURL=shortcut.js.map

package/lib/hooks/stores/shortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.js","sourceRoot":"","sources":["../../../src/hooks/stores/shortcut.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAEb,kDAA0B;AAI1B,2CAAwC;AAe3B,QAAA,gBAAgB,GAAG,IAAA,eAAM,EAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;IACpD,UAAU,EAAE,KAAK;IACjB,cAAc,EAAE,EAAE;IAClB,gBAAgB,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,CACpC,GAAG,CAAC,KAAK,CAAC,EAAE;;QACV,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC;QACjD,OAAO;YACL,cAAc,EAAE;gBACd,GAAG,KAAK,CAAC,cAAc;gBACvB,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,MAAM,EAAE,QAAQ,CAAC;aAC/B;SACF,CAAC;IACJ,CAAC,CAAC;IACJ,mBAAmB,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,EAAE,CACvC,GAAG,CAAC,KAAK,CAAC,EAAE;;QACV,MAAM,MAAM,GAAG,MAAA,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,mCAAI,EAAE,CAAC;QACjD,OAAO;YACL,cAAc,EAAE;gBACd,GAAG,KAAK,CAAC,cAAc;gBACvB,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,QAAQ,CAAC;aAC9C;SACF,CAAC;IACJ,CAAC,CAAC;IACJ,aAAa,EAAE,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,UAAU,EAAE,CAAC;CACjD,CAAC,CAAC,CAAC;AAEG,MAAM,iBAAiB,GAAG,CAC/B,KAAwB,EACxB,QAAwB,EACxB,OAA6B,EAAE,EAC/B,EAAE;IACF,MAAM,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,GAAG,IAAA,wBAAgB,GAAE,CAAC;IACrE,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,QAAQ;YAAE,OAAO;QACtB,gBAAgB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAClC,OAAO,GAAG,EAAE;YACV,mBAAmB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QACvC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;AACvB,CAAC,CAAC;AAbW,QAAA,iBAAiB,qBAa5B;AAGF,IAAI,KAAK,GAAG,CAAC,CAAC;AAEP,MAAM,wBAAwB,GAAG,CAAC,aAAsB,IAAI,EAAE,EAAE;IACrE,MAAM,EAAE,aAAa,EAAE,GAAG,IAAA,wBAAgB,GAAE,CAAC;IAC7C,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5B,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QACzB,OAAO,GAAG,EAAE;YACV,KAAK,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YAC5B,aAAa,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;AAClC,CAAC,CAAC;AAVW,QAAA,wBAAwB,4BAUnC"}

package/lib/hooks/stores/theme.d.ts

@@ -0,0 +1,8 @@
+import type { Theme } from '@euler-edu/constant/styles';
+type Store = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare const useThemeStore: import("zustand/react").UseBoundStore<import("zustand/vanilla").StoreApi<Store>>;
+export declare const useThemeEffect: () => void;
+export {};

package/lib/hooks/stores/theme.js

@@ -0,0 +1,29 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeEffect = exports.useThemeStore = void 0;
+const react_1 = __importDefault(require("react"));
+const stores_1 = require("../../utils/stores");
+const config_1 = require("./config");
+exports.useThemeStore = (0, stores_1.create)(set => ({
+    theme: 'light',
+    setTheme: (theme) => set({ theme }),
+}));
+const useThemeEffect = () => {
+    const { styleConfig } = (0, config_1.useConfigStore)();
+    const { setTheme } = (0, exports.useThemeStore)();
+    const { simplifiedTheme, lightTheme, darkTheme } = styleConfig;
+    react_1.default.useEffect(() => {
+        const theme = simplifiedTheme === 'system'
+            ? window.matchMedia('(prefers-color-scheme: dark)').matches
+                ? 'dark'
+                : 'light'
+            : simplifiedTheme;
+        setTheme(theme === 'light' ? lightTheme : darkTheme);
+    }, [simplifiedTheme, lightTheme, darkTheme]);
+};
+exports.useThemeEffect = useThemeEffect;
+//# sourceMappingURL=theme.js.map

package/lib/hooks/stores/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../../src/hooks/stores/theme.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAEb,kDAA0B;AAI1B,2CAAwC;AAExC,qCAA0C;AAO7B,QAAA,aAAa,GAAG,IAAA,eAAM,EAAQ,GAAG,CAAC,EAAE,CAAC,CAAC;IACjD,KAAK,EAAE,OAAO;IACd,QAAQ,EAAE,CAAC,KAAY,EAAE,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC;CAC3C,CAAC,CAAC,CAAC;AAEG,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,uBAAc,GAAE,CAAC;IACzC,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,qBAAa,GAAE,CAAC;IACrC,MAAM,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;IAE/D,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,KAAK,GACT,eAAe,KAAK,QAAQ;YAC1B,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO;gBACzD,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,OAAO;YACX,CAAC,CAAC,eAAe,CAAC;QACtB,QAAQ,CAAC,KAAK,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACvD,CAAC,EAAE,CAAC,eAAe,EAAE,UAAU,EAAE,SAAS,CAAC,CAAC,CAAC;AAC/C,CAAC,CAAC;AAdW,QAAA,cAAc,kBAczB"}

package/lib/hooks/stores/tooltip.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { FloatingContext, Placement, UseFloatingOptions } from '@floating-ui/react';
+type Tooltip = {
+    key: string;
+    isOpen: boolean;
+    context: FloatingContext;
+    content: string | number | (string | number)[] | React.ReactNode;
+    ref: React.Ref<HTMLDivElement>;
+    arrowRef: React.RefObject<SVGSVGElement | null>;
+    style: React.CSSProperties;
+};
+type TooltipArg = {
+    key: Tooltip['key'];
+    isOpen: Tooltip['isOpen'];
+    context: Tooltip['context'];
+    content: Tooltip['content'];
+    ref: Tooltip['ref'];
+    arrowRef: Tooltip['arrowRef'];
+    style: Tooltip['style'];
+};
+type Store = {
+    tooltips: Array<Tooltip>;
+    addTooltip: (arg: TooltipArg) => void;
+    removeTooltip: (key: string) => void;
+    updateTooltip: (arg: TooltipArg) => void;
+};
+export declare const useTooltipStore: import("zustand/react").UseBoundStore<import("zustand/vanilla").StoreApi<Store>>;
+export declare const useTooltipEffect: <Element extends HTMLElement>(ref: React.RefObject<Element | null>, content: Tooltip["content"], placement?: Placement, isOpen?: boolean | "auto", options?: Partial<UseFloatingOptions>, dep?: Array<any>) => void;
+export {};

package/lib/hooks/stores/tooltip.js

@@ -0,0 +1,96 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTooltipEffect = exports.useTooltipStore = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@floating-ui/react");
+const stores_1 = require("../../utils/stores");
+const styles_1 = require("../../utils/styles");
+const random_1 = require("../../hooks/random");
+exports.useTooltipStore = (0, stores_1.create)(set => ({
+    tooltips: [],
+    addTooltip: ({ key, isOpen, context, content, ref, arrowRef, style }) => set(({ tooltips }) => ({
+        tooltips: [
+            ...tooltips,
+            { key, isOpen, context, content, ref, arrowRef, style },
+        ],
+    })),
+    removeTooltip: (key) => set(({ tooltips }) => ({
+        tooltips: tooltips.filter(tooltip => tooltip.key !== key),
+    })),
+    updateTooltip: ({ key, isOpen, context, content, ref, arrowRef, style }) => set(({ tooltips }) => ({
+        tooltips: tooltips.map(tooltip => tooltip.key === key
+            ? { key, isOpen, context, content, ref, arrowRef, style }
+            : tooltip),
+    })),
+}));
+const useTooltipEffect = (ref, content, placement = 'top', isOpen = 'auto', options = {}, dep = []) => {
+    const [id] = (0, random_1.useDateToken)();
+    const [_isOpen, setIsOpen] = react_1.default.useState(false);
+    const { addTooltip, removeTooltip, updateTooltip } = (0, exports.useTooltipStore)();
+    const arrowRef = react_1.default.useRef(null);
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
+        strategy: 'fixed',
+        open: typeof isOpen === 'boolean' ? isOpen : _isOpen,
+        placement,
+        middleware: [
+            (0, react_2.offset)(styles_1.theme.size.margin.base.small),
+            (0, react_2.flip)(),
+            (0, react_2.shift)({ padding: styles_1.theme.size.margin.base.small }),
+            (0, react_2.arrow)({ element: arrowRef }),
+        ],
+        ...options,
+    });
+    react_1.default.useEffect(() => {
+        refs.setReference(ref.current);
+    }, [ref, refs, ...dep]);
+    react_1.default.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        if (typeof isOpen === 'boolean')
+            return;
+        const onHoverOn = () => setIsOpen(true);
+        const onHoverOff = () => setIsOpen(false);
+        element.addEventListener('mouseenter', onHoverOn);
+        element.addEventListener('touchstart', onHoverOn);
+        element.addEventListener('mouseleave', onHoverOff);
+        element.addEventListener('touchend', onHoverOff);
+        element.addEventListener('touchcancel', onHoverOff);
+        return () => {
+            element.removeEventListener('mouseenter', onHoverOn);
+            element.removeEventListener('touchstart', onHoverOn);
+            element.removeEventListener('mouseleave', onHoverOff);
+            element.removeEventListener('touchend', onHoverOff);
+            element.removeEventListener('touchcancel', onHoverOff);
+        };
+    }, [ref, isOpen, setIsOpen]);
+    react_1.default.useEffect(() => {
+        addTooltip({
+            key: id,
+            isOpen: typeof isOpen === 'boolean' ? isOpen : _isOpen,
+            context,
+            content,
+            ref: refs.setFloating,
+            arrowRef,
+            style: floatingStyles,
+        });
+        return () => removeTooltip(id);
+    }, []);
+    react_1.default.useEffect(() => {
+        updateTooltip({
+            key: id,
+            isOpen: typeof isOpen === 'boolean' ? isOpen : _isOpen,
+            context,
+            content,
+            ref: refs.setFloating,
+            arrowRef,
+            style: floatingStyles,
+        });
+    }, [isOpen, _isOpen, content, context, floatingStyles, ...dep]);
+};
+exports.useTooltipEffect = useTooltipEffect;
+//# sourceMappingURL=tooltip.js.map

package/lib/hooks/stores/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../src/hooks/stores/tooltip.ts"],"names":[],"mappings":"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"}

package/lib/hooks/styles/index.d.ts

@@ -0,0 +1,8 @@
+export { default as useDisableScrollEffect } from './useDisableScrollEffect';
+export * from './useDocumentStates';
+export { default as useDocumentStates } from './useDocumentStates';
+export { default as useDropdownProps } from './useDropdownProps';
+export { default as useElementStates } from './useElementStates';
+export * from './useGrid';
+export { default as useHoverProps } from './useHoverProps';
+export { default as useScrollSelectedIntoViewEffect } from './useScrollSelectedIntoViewEffect';

package/lib/hooks/styles/index.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollSelectedIntoViewEffect = exports.useHoverProps = exports.useElementStates = exports.useDropdownProps = exports.useDocumentStates = exports.useDisableScrollEffect = void 0;
+var useDisableScrollEffect_1 = require("./useDisableScrollEffect");
+Object.defineProperty(exports, "useDisableScrollEffect", { enumerable: true, get: function () { return __importDefault(useDisableScrollEffect_1).default; } });
+__exportStar(require("./useDocumentStates"), exports);
+var useDocumentStates_1 = require("./useDocumentStates");
+Object.defineProperty(exports, "useDocumentStates", { enumerable: true, get: function () { return __importDefault(useDocumentStates_1).default; } });
+var useDropdownProps_1 = require("./useDropdownProps");
+Object.defineProperty(exports, "useDropdownProps", { enumerable: true, get: function () { return __importDefault(useDropdownProps_1).default; } });
+var useElementStates_1 = require("./useElementStates");
+Object.defineProperty(exports, "useElementStates", { enumerable: true, get: function () { return __importDefault(useElementStates_1).default; } });
+__exportStar(require("./useGrid"), exports);
+var useHoverProps_1 = require("./useHoverProps");
+Object.defineProperty(exports, "useHoverProps", { enumerable: true, get: function () { return __importDefault(useHoverProps_1).default; } });
+var useScrollSelectedIntoViewEffect_1 = require("./useScrollSelectedIntoViewEffect");
+Object.defineProperty(exports, "useScrollSelectedIntoViewEffect", { enumerable: true, get: function () { return __importDefault(useScrollSelectedIntoViewEffect_1).default; } });
+//# sourceMappingURL=index.js.map

package/lib/hooks/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/styles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA,mEAA6E;AAApE,iJAAA,OAAO,OAA0B;AAC1C,sDAAoC;AACpC,yDAAmE;AAA1D,uIAAA,OAAO,OAAqB;AACrC,uDAAiE;AAAxD,qIAAA,OAAO,OAAoB;AACpC,uDAAiE;AAAxD,qIAAA,OAAO,OAAoB;AACpC,4CAA0B;AAC1B,iDAA2D;AAAlD,+HAAA,OAAO,OAAiB;AACjC,qFAA+F;AAAtF,mKAAA,OAAO,OAAmC"}

package/lib/hooks/styles/useDisableScrollEffect.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (isOpen: boolean) => void;
+export default _default;

package/lib/hooks/styles/useDisableScrollEffect.js

@@ -0,0 +1,28 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../constants/styles");
+let count = 0;
+exports.default = (isOpen) => {
+    react_1.default.useEffect(() => {
+        if (isOpen) {
+            count++;
+            if (count > 0 &&
+                !document.documentElement.classList.contains(styles_1.className.scrollLock)) {
+                document.documentElement.classList.add(styles_1.className.scrollLock);
+            }
+            return () => {
+                count--;
+                if (count <= 0) {
+                    document.documentElement.classList.remove(styles_1.className.scrollLock);
+                }
+            };
+        }
+        return undefined;
+    }, [isOpen]);
+};
+//# sourceMappingURL=useDisableScrollEffect.js.map

package/lib/hooks/styles/useDisableScrollEffect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDisableScrollEffect.js","sourceRoot":"","sources":["../../../src/hooks/styles/useDisableScrollEffect.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAE1B,+CAA+C;AAG/C,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,kBAAe,CAAC,MAAe,EAAE,EAAE;IACjC,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,EAAE,CAAC;YACX,KAAK,EAAE,CAAC;YACR,IACE,KAAK,GAAG,CAAC;gBACT,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAS,CAAC,UAAU,CAAC,EAClE,CAAC;gBACD,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAS,CAAC,UAAU,CAAC,CAAC;YAC/D,CAAC;YAED,OAAO,GAAG,EAAE;gBACV,KAAK,EAAE,CAAC;gBACR,IAAI,KAAK,IAAI,CAAC,EAAE,CAAC;oBACf,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,MAAM,CAAC,kBAAS,CAAC,UAAU,CAAC,CAAC;gBAClE,CAAC;YACH,CAAC,CAAC;QACJ,CAAC;QAED,OAAO,SAAS,CAAC;IACnB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;AACf,CAAC,CAAC"}

package/lib/hooks/styles/useDocumentStates.d.ts

@@ -0,0 +1,9 @@
+declare const getScrollTop: () => number;
+declare const getDocumentWidth: () => number;
+export declare const useDocumentScrollTop: () => ReturnType<typeof getScrollTop>;
+export declare const useDocumentWidth: () => ReturnType<typeof getDocumentWidth>;
+declare const _default: () => {
+    width: number;
+    scrollTop: number;
+};
+export default _default;

package/lib/hooks/styles/useDocumentStates.js

@@ -0,0 +1,36 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDocumentWidth = exports.useDocumentScrollTop = void 0;
+const react_1 = __importDefault(require("react"));
+const getScrollTop = () => {
+    if (typeof document === 'undefined')
+        return 0;
+    return Math.max(document.documentElement.scrollTop || 0, 0);
+};
+const getDocumentWidth = () => {
+    if (typeof document === 'undefined')
+        return 0;
+    return document.documentElement.clientWidth;
+};
+const getServerSnapshot = () => 0;
+const subscribeScroll = (callback) => {
+    document.addEventListener('scroll', callback);
+    return () => document.removeEventListener('scroll', callback);
+};
+const subscribeResize = (callback) => {
+    window.addEventListener('resize', callback);
+    return () => window.removeEventListener('resize', callback);
+};
+const useDocumentScrollTop = () => react_1.default.useSyncExternalStore(subscribeScroll, getScrollTop, getServerSnapshot);
+exports.useDocumentScrollTop = useDocumentScrollTop;
+const useDocumentWidth = () => react_1.default.useSyncExternalStore(subscribeResize, getDocumentWidth, getServerSnapshot);
+exports.useDocumentWidth = useDocumentWidth;
+exports.default = () => ({
+    width: (0, exports.useDocumentWidth)(),
+    scrollTop: (0, exports.useDocumentScrollTop)(),
+});
+//# sourceMappingURL=useDocumentStates.js.map

package/lib/hooks/styles/useDocumentStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDocumentStates.js","sourceRoot":"","sources":["../../../src/hooks/styles/useDocumentStates.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;;AAEb,kDAA0B;AAE1B,MAAM,YAAY,GAAG,GAAW,EAAE;IAChC,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,CAAC,CAAC;IAC9C,OAAO,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,SAAS,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,GAAW,EAAE;IACpC,IAAI,OAAO,QAAQ,KAAK,WAAW;QAAE,OAAO,CAAC,CAAC;IAC9C,OAAO,QAAQ,CAAC,eAAe,CAAC,WAAW,CAAC;AAC9C,CAAC,CAAC;AAKF,MAAM,iBAAiB,GAAG,GAAW,EAAE,CAAC,CAAC,CAAC;AAE1C,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IAC/C,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC9C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAChE,CAAC,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IAC/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;IAC5C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC9D,CAAC,CAAC;AAEK,MAAM,oBAAoB,GAAG,GAAoC,EAAE,CACxE,eAAK,CAAC,oBAAoB,CAAC,eAAe,EAAE,YAAY,EAAE,iBAAiB,CAAC,CAAC;AADlE,QAAA,oBAAoB,wBAC8C;AAExE,MAAM,gBAAgB,GAAG,GAAwC,EAAE,CACxE,eAAK,CAAC,oBAAoB,CACxB,eAAe,EACf,gBAAgB,EAChB,iBAAiB,CAClB,CAAC;AALS,QAAA,gBAAgB,oBAKzB;AAEJ,kBAAe,GAAG,EAAE,CAAC,CAAC;IACpB,KAAK,EAAE,IAAA,wBAAgB,GAAE;IACzB,SAAS,EAAE,IAAA,4BAAoB,GAAE;CAClC,CAAC,CAAC"}

package/lib/hooks/styles/useDropdownProps.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type Placement } from '@floating-ui/react';
+declare const _default: <T extends HTMLElement>(ref: React.RefObject<Element | null>, placement?: Placement) => [{
+    $position: "absolute";
+    ref: React.RefObject<T>;
+    style: React.CSSProperties;
+} & Omit<React.HTMLProps<T>, "value" | "as">, boolean, React.Dispatch<React.SetStateAction<boolean>>];
+export default _default;

package/lib/hooks/styles/useDropdownProps.js

@@ -0,0 +1,49 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@floating-ui/react");
+const styles_1 = require("../../utils/styles");
+exports.default = (ref, placement = 'bottom-start') => {
+    const [isOpen, setIsOpen] = react_1.default.useState(false);
+    const { refs, floatingStyles, context } = (0, react_2.useFloating)({
+        strategy: 'absolute',
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        middleware: [(0, react_2.offset)(styles_1.theme.size.margin.dropdown), (0, react_2.flip)(), (0, react_2.shift)()],
+        placement,
+        whileElementsMounted: react_2.autoUpdate,
+    });
+    const dismiss = (0, react_2.useDismiss)(context, {
+        outsidePress: true,
+        escapeKey: true,
+    });
+    const { getFloatingProps } = (0, react_2.useInteractions)([dismiss]);
+    react_1.default.useEffect(() => {
+        refs.setReference(ref.current);
+    }, [ref, refs]);
+    react_1.default.useEffect(() => {
+        if (!ref.current)
+            return;
+        const handleClick = () => setIsOpen(prev => !prev);
+        ref.current.addEventListener('click', handleClick);
+        return () => {
+            var _a;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', handleClick);
+        };
+    }, [ref]);
+    return [
+        {
+            $position: 'absolute',
+            ref: refs.setFloating,
+            style: floatingStyles,
+            ...getFloatingProps(),
+        },
+        isOpen,
+        setIsOpen,
+    ];
+};
+//# sourceMappingURL=useDropdownProps.js.map

package/lib/hooks/styles/useDropdownProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropdownProps.js","sourceRoot":"","sources":["../../../src/hooks/styles/useDropdownProps.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAE1B,8CAS4B;AAE5B,2CAAuC;AAEvC,kBAAe,CACb,GAAoC,EACpC,YAAuB,cAAc,EASrC,EAAE;IACF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,EAAE,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,GAAG,IAAA,mBAAW,EAAC;QACpD,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,MAAM;QACZ,YAAY,EAAE,SAAS;QACvB,UAAU,EAAE,CAAC,IAAA,cAAM,EAAC,cAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAA,YAAI,GAAE,EAAE,IAAA,aAAK,GAAE,CAAC;QACjE,SAAS;QACT,oBAAoB,EAAE,kBAAU;KACjC,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAA,kBAAU,EAAC,OAAO,EAAE;QAClC,YAAY,EAAE,IAAI;QAClB,SAAS,EAAE,IAAI;KAChB,CAAC,CAAC;IACH,MAAM,EAAE,gBAAgB,EAAE,GAAG,IAAA,uBAAe,EAAC,CAAC,OAAO,CAAC,CAAC,CAAC;IAExD,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC;IAEhB,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,GAAG,CAAC,OAAO;YAAE,OAAO;QACzB,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;QACnD,GAAG,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE;;YACV,MAAA,GAAG,CAAC,OAAO,0CAAE,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO;QACL;YACE,SAAS,EAAE,UAAmB;YAC9B,GAAG,EAAE,IAAI,CAAC,WAAkB;YAC5B,KAAK,EAAE,cAAc;YACrB,GAAG,gBAAgB,EAAE;SACtB;QACD,MAAM;QACN,SAAS;KACV,CAAC;AACJ,CAAC,CAAC"}

package/lib/hooks/styles/useElementStates.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare const _default: (ref: React.RefObject<HTMLElement | null>, { isTrackVisible, isTrackInView, isTrackSize, }?: {
+    isTrackVisible?: boolean;
+    isTrackInView?: boolean;
+    isTrackSize?: boolean;
+}) => {
+    mutate: () => void;
+    offsetWidth?: number;
+    offsetHeight?: number;
+    isVisible: boolean;
+    isInView: boolean;
+};
+export default _default;

package/lib/hooks/styles/useElementStates.js

@@ -0,0 +1,86 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const random_1 = require("../../hooks/random");
+const getElementSize = (element) => {
+    if (!element)
+        return { offsetWidth: undefined, offsetHeight: undefined };
+    return {
+        offsetWidth: element.offsetWidth,
+        offsetHeight: element.offsetHeight,
+    };
+};
+const useElementSize = (ref, isEnabled = true, deps = []) => {
+    const [size, setSize] = react_1.default.useState(() => getElementSize(ref === null || ref === void 0 ? void 0 : ref.current));
+    react_1.default.useLayoutEffect(() => {
+        const element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!isEnabled || !element)
+            return;
+        const resizeEvent = () => setSize(getElementSize(ref === null || ref === void 0 ? void 0 : ref.current));
+        const observer = new ResizeObserver(() => {
+            window.requestAnimationFrame(() => resizeEvent());
+        });
+        resizeEvent();
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref, isEnabled, ...deps]);
+    return size;
+};
+const useElementIsVisible = (ref, isEnabled = true, deps = []) => {
+    const [isVisible, setIsVisible] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        const element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!isEnabled || !element)
+            return;
+        if (typeof IntersectionObserver === 'undefined') {
+            setIsVisible(true);
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry === null || entry === void 0 ? void 0 : entry.isIntersecting) {
+                setIsVisible(true);
+                observer.disconnect();
+            }
+        }, { threshold: 0.1 });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref, isEnabled, ...deps]);
+    return isVisible;
+};
+const useElementIsInView = (ref, isEnabled = true, deps = []) => {
+    const [isInView, setIsInView] = react_1.default.useState(false);
+    react_1.default.useEffect(() => {
+        const element = ref === null || ref === void 0 ? void 0 : ref.current;
+        if (!isEnabled || !element)
+            return;
+        if (typeof IntersectionObserver === 'undefined') {
+            setIsInView(true);
+            return;
+        }
+        const observer = new IntersectionObserver(([entry]) => {
+            if (entry)
+                setIsInView(entry.isIntersecting);
+        });
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [ref, isEnabled, ...deps]);
+    return isInView;
+};
+exports.default = (ref, { isTrackVisible = false, isTrackInView = false, isTrackSize = false, } = {
+    isTrackVisible: true,
+    isTrackInView: true,
+    isTrackSize: true,
+}) => {
+    const [token, mutate] = (0, random_1.useDateToken)();
+    return {
+        isVisible: useElementIsVisible(ref, isTrackVisible, [token]),
+        isInView: useElementIsInView(ref, isTrackInView, [token]),
+        ...useElementSize(ref, isTrackSize, [token]),
+        mutate,
+    };
+};
+//# sourceMappingURL=useElementStates.js.map

package/lib/hooks/styles/useElementStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useElementStates.js","sourceRoot":"","sources":["../../../src/hooks/styles/useElementStates.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;;;;;;AAEb,kDAA0B;AAE1B,2CAA8C;AAE9C,MAAM,cAAc,GAAG,CACrB,OAA2B,EAI3B,EAAE;IACF,IAAI,CAAC,OAAO;QAAE,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;IACzE,OAAO;QACL,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,YAAY,EAAE,OAAO,CAAC,YAAY;KACnC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,cAAc,GAAG,CACrB,GAAwC,EACxC,YAAqB,IAAI,EACzB,OAAc,EAAE,EACmB,EAAE;IACrC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CACpC,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,CACnC,CAAC;IAEF,eAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,MAAM,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO;YAAE,OAAO;QAEnC,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,cAAc,CAAC,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC,CAAC,CAAC;QAChE,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE;YACvC,MAAM,CAAC,qBAAqB,CAAC,GAAG,EAAE,CAAC,WAAW,EAAE,CAAC,CAAC;QACpD,CAAC,CAAC,CAAC;QACH,WAAW,EAAE,CAAC;QAEd,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IAE9B,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,mBAAmB,GAAG,CAC1B,GAAwC,EACxC,YAAqB,IAAI,EACzB,OAAc,EAAE,EACP,EAAE;IACX,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEjE,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO;YAAE,OAAO;QAEnC,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE,CAAC;YAChD,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACV,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,cAAc,EAAE,CAAC;gBAC1B,YAAY,CAAC,IAAI,CAAC,CAAC;gBACnB,QAAQ,CAAC,UAAU,EAAE,CAAC;YACxB,CAAC;QACH,CAAC,EACD,EAAE,SAAS,EAAE,GAAG,EAAE,CACnB,CAAC;QAEF,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IAE9B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACzB,GAAwC,EACxC,YAAqB,IAAI,EACzB,OAAc,EAAE,EACP,EAAE;IACX,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,OAAO,GAAG,GAAG,aAAH,GAAG,uBAAH,GAAG,CAAE,OAAO,CAAC;QAC7B,IAAI,CAAC,SAAS,IAAI,CAAC,OAAO;YAAE,OAAO;QAEnC,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAAE,CAAC;YAChD,WAAW,CAAC,IAAI,CAAC,CAAC;YAClB,OAAO;QACT,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;YACpD,IAAI,KAAK;gBAAE,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;IACrC,CAAC,EAAE,CAAC,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,CAAC,CAAC;IAE9B,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,kBAAe,CACb,GAAwC,EACxC,EACE,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,KAAK,EACrB,WAAW,GAAG,KAAK,MAKjB;IACF,cAAc,EAAE,IAAI;IACpB,aAAa,EAAE,IAAI;IACnB,WAAW,EAAE,IAAI;CAClB,EACD,EAAE;IACF,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,IAAA,qBAAY,GAAE,CAAC;IACvC,OAAO;QACL,SAAS,EAAE,mBAAmB,CAAC,GAAG,EAAE,cAAc,EAAE,CAAC,KAAK,CAAC,CAAC;QAC5D,QAAQ,EAAE,kBAAkB,CAAC,GAAG,EAAE,aAAa,EAAE,CAAC,KAAK,CAAC,CAAC;QACzD,GAAG,cAAc,CAAC,GAAG,EAAE,WAAW,EAAE,CAAC,KAAK,CAAC,CAAC;QAC5C,MAAM;KACP,CAAC;AACJ,CAAC,CAAC"}

package/lib/hooks/styles/useGrid.d.ts

@@ -0,0 +1 @@
+export declare const useIsSingleGridColumn: (offsetWidth: number, minWidth?: number, gap?: number) => boolean;

package/lib/hooks/styles/useGrid.js

@@ -0,0 +1,12 @@
+'use client';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsSingleGridColumn = void 0;
+const react_1 = __importDefault(require("react"));
+const styles_1 = require("../../utils/styles");
+const useIsSingleGridColumn = (offsetWidth, minWidth = styles_1.theme.size.width.cards.medium, gap = styles_1.theme.size.margin.base.small) => react_1.default.useMemo(() => !!offsetWidth && offsetWidth < minWidth * 2 + gap, [offsetWidth, gap, minWidth]);
+exports.useIsSingleGridColumn = useIsSingleGridColumn;
+//# sourceMappingURL=useGrid.js.map