@xwadex/fesd-next 0.3.44-beta.9 → 0.3.45

package/dist/components/checkboxs/checkbox.d.ts

@@ -0,0 +1,4 @@
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import type { ComponentProps } from "../../types/index.js";
+declare function Checkbox({ className, ...props }: ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Checkbox };

package/dist/components/checkboxs/checkbox.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { CheckIcon } from 'lucide-react';
+import { cn } from "../../utils/index.js";
+function Checkbox({ className, ...props }) {
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn('peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "flex items-center justify-center text-current transition-none", children: _jsx(CheckIcon, { className: "size-3.5" }) }) }));
+}
+export { Checkbox };

package/dist/components/checkboxs/index.d.ts

@@ -0,0 +1 @@
+export * from "./checkbox";

package/dist/components/checkboxs/index.js

@@ -0,0 +1 @@
+export * from "./checkbox";

package/dist/components/comboboxs/comboboxs.d.ts

@@ -0,0 +1 @@
+export declare function ComboboxDemo(): import("react/jsx-runtime").JSX.Element;

package/dist/components/comboboxs/comboboxs.js

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "../../utils/index.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../commands";
+import { Popover, PopoverContent, PopoverTrigger, } from "../popovers";
+import { useState } from "react";
+const frameworks = [
+    {
+        value: "next.js",
+        label: "Next.js",
+    },
+    {
+        value: "sveltekit",
+        label: "SvelteKit",
+    },
+    {
+        value: "nuxt.js",
+        label: "Nuxt.js",
+    },
+    {
+        value: "remix",
+        label: "Remix",
+    },
+    {
+        value: "astro",
+        label: "Astro",
+    },
+];
+export function ComboboxDemo() {
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState("");
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { role: "combobox", "aria-expanded": open, className: "w-[200px] justify-between", children: [value
+                            ? frameworks.find((framework) => framework.value === value)?.label
+                            : "Select framework...", _jsx(ChevronsUpDown, { className: "opacity-50" })] }) }), _jsx(PopoverContent, { className: "w-[200px] p-0", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: "Search framework...", className: "h-9" }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No framework found." }), _jsx(CommandGroup, { children: frameworks.map((framework) => (_jsxs(CommandItem, { value: framework.value, onSelect: (currentValue) => {
+                                            setValue(currentValue === value ? "" : currentValue);
+                                            setOpen(false);
+                                        }, children: [framework.label, _jsx(Check, { className: cn("ml-auto", value === framework.value ? "opacity-100" : "opacity-0") })] }, framework.value))) })] })] }) })] }));
+}

package/dist/components/comboboxs/index.d.ts

@@ -0,0 +1 @@
+export * from "./comboboxs";

package/dist/components/comboboxs/index.js

@@ -0,0 +1 @@
+export * from "./comboboxs";

package/dist/components/commands/command.d.ts

@@ -0,0 +1,18 @@
+import { Command as CommandPrimitive } from 'cmdk';
+import type { ComponentProps } from "../../types/index.js";
+import { Dialog } from '../dialogs';
+declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: ComponentProps<typeof Dialog> & {
+    title?: string;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function CommandInput({ className, ...props }: ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
+declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function CommandShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/commands/command.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+import { cn } from "../../utils/index.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from '../dialogs';
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', className), ...props }));
+}
+function CommandDialog({ title = 'Command Palette', description = 'Search for a command to run...', children, className, showCloseButton = true, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn('overflow-hidden p-0', className), showCloseButton: showCloseButton, children: _jsx(Command, { className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children: children }) })] }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [_jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }), _jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn('placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50', className), ...props })] }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className), ...props }));
+}
+function CommandEmpty({ ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: "py-6 text-center text-sm", ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn('text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium', className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn('bg-border -mx-1 h-px', className), ...props }));
+}
+function CommandItem({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
+}
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/components/commands/index.d.ts

@@ -0,0 +1 @@
+export * from "./command";

package/dist/components/commands/index.js

@@ -0,0 +1 @@
+export * from "./command";

package/dist/components/dialogs/dialog.d.ts

@@ -0,0 +1,15 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import type { ComponentProps } from "../../types/index.js";
+declare function Dialog({ ...props }: ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTrigger({ ...props }: ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DialogPortal({ ...props }: ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DialogClose({ ...props }: ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
+declare function DialogOverlay({ className, ...props }: ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DialogHeader({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function DialogTitle({ className, ...props }: ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
+declare function DialogDescription({ className, ...props }: ComponentProps<typeof DialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/dialogs/dialog.js

@@ -0,0 +1,36 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+import { cn } from "../../utils/index.js";
+function Dialog({ ...props }) {
+    return _jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return _jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return _jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return _jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Overlay, { "data-slot": "dialog-overlay", className: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50', className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (_jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.Content, { "data-slot": "dialog-content", className: cn('bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg', className), ...props, children: [children, showCloseButton && (_jsxs(DialogPrimitive.Close, { "data-slot": "dialog-close", className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
+}
+function DialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+function DialogTitle({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Title, { "data-slot": "dialog-title", className: cn('text-lg leading-none font-semibold', className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (_jsx(DialogPrimitive.Description, { "data-slot": "dialog-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, };

package/dist/components/dialogs/index.d.ts

@@ -0,0 +1 @@
+export * from "./dialog";

package/dist/components/dialogs/index.js

@@ -0,0 +1 @@
+export * from "./dialog";

package/dist/components/dragBoxs/dragBoxs.d.ts

@@ -0,0 +1,8 @@
+export interface PropsTypes {
+    defaultPosX?: number;
+    defaultPosY?: number;
+    children: React.ReactNode;
+}
+declare const DragBoxsBase: (props: PropsTypes) => import("react/jsx-runtime").JSX.Element;
+declare const DragBoxs: React.MemoExoticComponent<typeof DragBoxsBase>;
+export default DragBoxs;

package/dist/components/dragBoxs/dragBoxs.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useId, useState } from "react";
+import { createPortal } from "react-dom";
+import { DndContext } from "@dnd-kit/core";
+import { DragBoxsContext } from "./dragBoxsContext";
+const DragBoxsBase = (props) => {
+    const { defaultPosX = 0, defaultPosY = 0, children } = props;
+    const id = useId();
+    const [isMounded, setMounded] = useState(false);
+    const [positions, setPositions] = useState({
+        x: defaultPosX,
+        y: defaultPosY
+    });
+    const dragEndEvent = useCallback((event) => {
+        const { delta, active } = event;
+        const id = active.id;
+        setPositions((prev) => ({
+            ...prev,
+            x: prev.x + delta.x,
+            y: prev.y + delta.y,
+        }));
+    }, []);
+    const dragModifiers = useCallback(({ transform, activeNodeRect }) => {
+        if (!activeNodeRect)
+            return transform;
+        const boxWidth = activeNodeRect.width;
+        const boxHeight = activeNodeRect.height;
+        const originalLeft = activeNodeRect.left;
+        const originalTop = activeNodeRect.top;
+        const maxX = window.innerWidth - (originalLeft + boxWidth);
+        const maxY = window.innerHeight - (originalTop + boxHeight);
+        const minX = -originalLeft;
+        const minY = -originalTop;
+        return {
+            x: Math.min(Math.max(transform.x, minX), maxX),
+            y: Math.min(Math.max(transform.y, minY), maxY),
+        };
+    }, []);
+    const resizeNextPositions = useCallback((target, prev) => {
+        if (typeof window !== "undefined" && target) {
+            const { x: currentX = 0, y: currentY = 0 } = prev || {};
+            const { innerWidth, innerHeight } = window;
+            const { clientWidth, clientHeight } = target;
+            const maxX = innerWidth - clientWidth;
+            const maxY = innerHeight - clientHeight;
+            return {
+                x: Math.min(currentX, maxX < 0 ? 0 : maxX),
+                y: Math.min(currentY, maxY < 0 ? 0 : maxY),
+            };
+        }
+        return { ...prev };
+    }, []);
+    const resizeEvent = useCallback(() => {
+        const target = document.getElementById(id);
+        if (target)
+            setPositions((prev) => resizeNextPositions(target, prev));
+    }, []);
+    useEffect(() => {
+        setMounded(true);
+        window.addEventListener("resize", resizeEvent);
+        return () => window.removeEventListener("resize", resizeEvent);
+    }, []);
+    return (_jsx(_Fragment, { children: isMounded
+            ? createPortal(_jsx(DndContext, { onDragEnd: dragEndEvent, modifiers: [dragModifiers], children: _jsx(DragBoxsContext, { value: { id, positions }, children: _jsx("div", { "data-components": "dragboxs-root", children: children }) }) }), document.body)
+            : null }));
+};
+const DragBoxs = memo(DragBoxsBase);
+DragBoxs.displayName = "DragBoxs";
+export default DragBoxs;

package/dist/components/dragBoxs/dragBoxsContext.d.ts

@@ -0,0 +1,14 @@
+import { useDraggable, useDndContext } from "@dnd-kit/core";
+export type PositionsType = {
+    x?: number;
+    y?: number;
+};
+export interface DragBoxsContextType {
+    id: string;
+    positions: PositionsType;
+}
+export declare const DragBoxsContext: import("react").Context<DragBoxsContextType | undefined> & {
+    displayName: string;
+};
+export declare const useDragBoxsContext: () => DragBoxsContextType;
+export { useDraggable, useDndContext };

package/dist/components/dragBoxs/dragBoxsContext.js

@@ -0,0 +1,10 @@
+import { createContext, use } from 'react';
+import { useDraggable, useDndContext } from "@dnd-kit/core";
+export const DragBoxsContext = Object.assign(createContext(undefined), { displayName: "DragBoxsContext" });
+export const useDragBoxsContext = () => {
+    const context = use(DragBoxsContext);
+    if (context)
+        return context;
+    throw new Error('useDragPanel must be used inside provider');
+};
+export { useDraggable, useDndContext };

package/dist/components/dragBoxs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DragBoxs } from "./dragBoxs";
+export * from "./dragBoxsContext";

package/dist/components/dragBoxs/index.js

@@ -0,0 +1,2 @@
+export { default as DragBoxs } from "./dragBoxs";
+export * from "./dragBoxsContext";

package/dist/components/dragResize/dragResize.d.ts

@@ -5,11 +5,8 @@ type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
     children: React.ReactNode;
     defaultWidth?: number;
     defaultHeight?: number;
-    resizeClass?: string;
-    dragLineWidth?: number;
-    dragLineColor?: string;
-    containerClass?: string;
-    dragClass?: string;
+    className?: string;
+    handlerClassName?: string;
     resizeStore?: boolean;
     resizeStoreKey?: string;
     resizeStoreValue?: ResizeTypes;

package/dist/components/dragResize/dragResize.js

@@ -3,16 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useMemo, useState } from "react";
 import { useDragResize, useCookies } from "../../hooks/index.js";
 import { DragResizeContext } from "./dragResizeContext";
-import { mergeClassName } from "../../utils/index.js";
-import styles from "./dragResize.module.scss";
+import { cn } from "../../utils/index.js";
 const DragResizeBase = (props) => {
-    const { as, children, defaultWidth, defaultHeight, resizeClass, containerClass, dragClass, resizeStore = true, resizeStoreKey, resizeStoreValue, active = true, direction = "width", minWidth = 500, maxWidth = 950, dragLineWidth = 5, dragLineColor = "rgba(0, 0, 0, 1)", onInit, onResizeStart, onResizing, onResizeEnd, ...othersProps } = props;
+    const { as, children, defaultWidth, defaultHeight, className, handlerClassName, resizeStore = true, resizeStoreKey, resizeStoreValue, active = true, direction = "horizontal", minWidth = 500, maxWidth = 950, onInit, onResizeStart, onResizing, onResizeEnd, ...othersProps } = props;
     const RootComponent = as || "div";
     const [isActive, setActive] = useState(active);
     const { setCookies, deleteCookies } = useCookies();
-    const resizeCSS = useMemo(() => mergeClassName(styles.root, resizeClass ? resizeClass : ""), [resizeClass]);
-    const dragCSS = useMemo(() => mergeClassName(styles.drag, dragClass ? dragClass : "", !isActive ? styles.off : ""), [isActive, dragClass]);
-    const containerCSS = useMemo(() => mergeClassName(styles.container, containerClass ? containerClass : ""), [containerClass]);
     const isCookieStore = useMemo(() => resizeStore
         && resizeStoreKey
         && resizeStoreKey !== ""
@@ -47,17 +43,24 @@ const DragResizeBase = (props) => {
         onResizeEnd: onResizeEndHandler,
     });
     //Context Functions
-    const setResizeActive = useCallback((active) => setActive(active), [setActive]);
+    const setResizeActive = useCallback((active) => setActive(active), []);
+    const setResizeClose = useCallback((active) => {
+        if (!resizeRef.current)
+            return;
+        // resizeRef.current.style.width = active0 + "px"
+        // resizeRef.current.style.height = minHeight + "px"
+        clearResizeStore();
+    }, []);
     const clearResizeStore = useCallback(() => resizeStoreKey
         ? deleteCookies(resizeStoreKey)
-        : console.error("resizeStoreKey is not undefined"), [resizeStoreKey]);
+        : console.error("resizeStoreKey is not undefined"), []);
     const defaultResizeSize = useCallback(() => {
         if (!resizeRef.current)
             return;
         resizeRef.current.style.width = minWidth + "px";
         // resizeRef.current.style.height = minHeight + "px"
         clearResizeStore();
-    }, [resizeRef.current, clearResizeStore]);
+    }, []);
     const contextValue = useMemo(() => ({
         setResizeActive,
         clearResizeStore,
@@ -67,10 +70,7 @@ const DragResizeBase = (props) => {
         clearResizeStore,
         defaultResizeSize
     ]);
-    return (_jsx(DragResizeContext, { value: contextValue, children: _jsxs(RootComponent, { ...othersProps, ref: resizeRef, className: resizeCSS, style: resizeDefauleStyles, children: [_jsx("div", { className: containerCSS, children: children }), _jsx("div", { ref: dragRef, className: dragCSS, style: {
-                        "--drag-line-width": dragLineWidth + "px",
-                        "--drag-line-color": dragLineColor
-                    } })] }) }));
+    return (_jsx(DragResizeContext, { value: contextValue, children: _jsxs(RootComponent, { ...othersProps, "data-components": "drag-resize-root", ref: resizeRef, className: cn("w-[inherit]", "h-[inherit]", "flex", "flex-row", className), style: resizeDefauleStyles, children: [_jsx("div", { "data-components": "drag-resize-container", className: cn("w-[inherit]", "h-[inherit]"), children: children }), _jsx("div", { "data-components": "drag-resize-handler", ref: dragRef, className: cn("w-0", "h-full", "relative", "z-2", "hover:before:cursor-ew-resize", "hover:before:opacity-100", "before:content-[' ']", "before:w-1", "before:h-full", "before:absolute", "before:z-1", "before:opacity-0", "before:duration-500", "before:transition-opacity", "before:ease-in-out", "before:bg-black", handlerClassName) })] }) }));
 };
 const DragResize = memo(DragResizeBase);
 DragResize.displayName = "DragResize";

package/dist/components/dropdowns/dropdown-menu.d.ts

@@ -0,0 +1,25 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import type { ComponentProps } from "../../types/index.js";
+declare function DropdownMenu({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/dropdowns/dropdown-menu.js

@@ -0,0 +1,51 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import { cn } from "../../utils/index.js";
+function DropdownMenu({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { "data-slot": "dropdown-menu-content", sideOffset: sideOffset, className: cn("bg-popover", "text-popover-foreground", "data-[state=open]:animate-in", "data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0", "data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95", "data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "z-50", "max-h-(--radix-dropdown-menu-content-available-height)", "min-w-[8rem]", "origin-(--radix-dropdown-menu-content-transform-origin)", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "border", "p-1", "shadow-md", className), ...props }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn("focus:bg-accent", "focus:text-accent-foreground", "data-[variant=destructive]:text-destructive", "data-[variant=destructive]:focus:bg-destructive/50", "dark:data-[variant=destructive]:focus:bg-destructive/20", "data-[variant=destructive]:focus:text-destructive", "data-[variant=destructive]:*:[svg]:!text-destructive", "[&_svg:not([class*='text-'])]:text-muted-foreground", "relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-sm", "px-2", "py-1.5", "text-sm", "outline-hidden", "select-none", "data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50", "data-[inset]:pl-8", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", className: cn("focus:bg-accent", "focus:text-accent-foreground", "relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-sm", "py-1.5", "pr-2", "pl-8", "text-sm", "outline-hidden", "select-none", "data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", className: cn("focus:bg-accent", "focus:text-accent-foreground", "relative", "flex", "cursor-default", "items-center", "gap-2", "rounded-sm", "py-1.5", "pr-2", "pl-8", "text-sm", "outline-hidden", "select-none", "data-[disabled]:pointer-events-none", "data-[disabled]:opacity-50", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CircleIcon, { className: "size-2 fill-current" }) }) }), children] }));
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Label, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('px-2 py-1.5 text-sm font-medium data-[inset]:pl-8', className), ...props }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('bg-border -mx-1 my-1 h-px', className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(DropdownMenuPrimitive.Sub, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(DropdownMenuPrimitive.SubTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn("focus:bg-accent", "focus:text-accent-foreground", "data-[state=open]:bg-accent", "data-[state=open]:text-accent-foreground", "flex", "cursor-default", "items-center", "rounded-sm", "px-2", "py-1.5", "text-sm", "outline-hidden", "select-none", "data-[inset]:pl-8", className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "ml-auto size-4" })] }));
+}
+function DropdownMenuSubContent({ className, ...props }) {
+    return (_jsx(DropdownMenuPrimitive.SubContent, { "data-slot": "dropdown-menu-sub-content", className: cn("bg-popover", "text-popover-foreground", "data-[state=open]:animate-in", "data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0", "data-[state=open]:fade-in-0", "data-[state=closed]:zoom-out-95", "data-[state=open]:zoom-in-95", "data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2", "z-50", "min-w-[8rem]", "origin-(--radix-dropdown-menu-content-transform-origin)", "overflow-hidden", "rounded-md", "border", "p-1", "shadow-lg", className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/dist/components/dropdowns/index.d.ts

@@ -0,0 +1 @@
+export * from "./dropdown-menu";

package/dist/components/dropdowns/index.js

@@ -0,0 +1 @@
+export * from "./dropdown-menu";

package/dist/components/index.d.ts

@@ -1,5 +1,15 @@
 export * from "./dragResize";
 export * from "./dragSortable";
+export * from "./dragBoxs";
 export * from "./accordions";
 export * from "./resizables";
 export * from "./scrollAreas";
+export * from "./dropdowns";
+export * from "./selects";
+export * from "./checkboxs";
+export * from "./switchs";
+export * from "./radios";
+export * from "./commands";
+export * from "./popovers";
+export * from "./dialogs";
+export * from "./comboboxs";

package/dist/components/index.js

@@ -1,7 +1,17 @@
 // dev components
 export * from "./dragResize";
 export * from "./dragSortable";
+export * from "./dragBoxs";
 // shadcn Components
 export * from "./accordions";
 export * from "./resizables";
 export * from "./scrollAreas";
+export * from "./dropdowns";
+export * from "./selects";
+export * from "./checkboxs";
+export * from "./switchs";
+export * from "./radios";
+export * from "./commands";
+export * from "./popovers";
+export * from "./dialogs";
+export * from "./comboboxs";

package/dist/components/popovers/index.d.ts

@@ -0,0 +1 @@
+export * from "./popover";

package/dist/components/popovers/index.js

@@ -0,0 +1 @@
+export * from "./popover";

package/dist/components/popovers/popover.d.ts

@@ -0,0 +1,7 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { ComponentProps } from "../../types/index.js";
+declare function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/components/popovers/popover.js

@@ -0,0 +1,17 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from "../../utils/index.js";
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/components/radios/index.d.ts

@@ -0,0 +1 @@
+export * from "./radio-group";

package/dist/components/radios/index.js

@@ -0,0 +1 @@
+export * from "./radio-group";

package/dist/components/radios/radio-group.d.ts

@@ -0,0 +1,5 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import type { ComponentProps } from "../../types/index.js";
+declare function RadioGroup({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function RadioGroupItem({ className, ...props }: ComponentProps<typeof RadioGroupPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RadioGroupItem };

package/dist/components/radios/radio-group.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { CircleIcon } from 'lucide-react';
+import { cn } from "../../utils/index.js";
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn('grid gap-3', className), ...props }));
+}
+function RadioGroupItem({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn('border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "relative flex items-center justify-center", children: _jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" }) }) }));
+}
+export { RadioGroup, RadioGroupItem };

package/dist/components/resizables/resizablePanelGroup.js

@@ -4,6 +4,13 @@ import * as ResizablePrimitive from 'react-resizable-panels';
 import { cn } from "../../utils/index.js";
 const ResizablePanelGroup = (props) => {
     const { as = "div", className, ...restProps } = props;
+    const getItem = (name) => {
+        console.log(name);
+        return name;
+    };
+    const setItem = (name, value) => {
+        console.log(name, value);
+    };
     return (_jsx(ResizablePrimitive.PanelGroup, { tagName: as, "data-slot": "resizable-panel-group", className: cn(`
 				flex
 				h-full

package/dist/components/scrollAreas/scrollArea.js

@@ -5,7 +5,7 @@ import ScrollBar from "./scrollBar";
 import { cn } from "../../utils/index.js";
 const ScrollArea = (props) => {
     const { ref, className, viewportClassName, barClassName, thumbClassName, forceMount, orientation = "vertical", children, ...restProps } = props;
-    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...restProps, children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, "data-slot": "scroll-area-viewport", className: cn("focus-visible:ring-ring/50", "size-full", "rounded-[inherit]", "transition-[color,box-shadow]", "outline-none", "focus-visible:ring-[3px]", "focus-visible:outline-1", viewportClassName), children: children }), _jsx(ScrollBar, { forceMount: forceMount, orientation: orientation, thumbClassName: thumbClassName }), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative", className), ...restProps, children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: ref, "data-slot": "scroll-area-viewport", className: cn("scroll-smooth", "focus-visible:ring-ring/50", "size-full", "rounded-[inherit]", "transition-[color,box-shadow]", "outline-none", "focus-visible:ring-[3px]", "focus-visible:outline-1", viewportClassName), children: children }), _jsx(ScrollBar, { forceMount: forceMount, orientation: orientation, thumbClassName: thumbClassName }), _jsx(ScrollAreaPrimitive.Corner, {})] }));
 };
 ScrollArea.displayName = "ScrollArea";
 export default ScrollArea;

package/dist/components/selects/index.d.ts

@@ -0,0 +1 @@
+export * from "./select";

package/dist/components/selects/index.js

@@ -0,0 +1 @@
+export * from "./select";

package/dist/components/selects/select.d.ts

@@ -0,0 +1,15 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import type { ComponentProps } from "../../types/index.js";
+declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/selects/select.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from "../../utils/index.js";
+function Select({ ...props }) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = 'default', children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
+}
+function SelectContent({ className, children, position = 'popper', ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn('text-muted-foreground px-2 py-1.5 text-xs', className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('bg-border pointer-events-none -mx-1 my-1 h-px', className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/switchs/index.d.ts

@@ -0,0 +1 @@
+export * from "./switch";

package/dist/components/switchs/index.js

@@ -0,0 +1 @@
+export * from "./switch";

package/dist/components/switchs/switch.d.ts

@@ -0,0 +1,4 @@
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import type { ComponentProps } from "../../types/index.js";
+declare function Switch({ className, ...props }: ComponentProps<typeof SwitchPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/dist/components/switchs/switch.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { cn } from "../../utils/index.js";
+function Switch({ className, ...props }) {
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn('peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0') }) }));
+}
+export { Switch };

package/dist/hooks/index.d.ts

@@ -5,3 +5,5 @@ export * from "./useDragResize";
 export * from "./useAsyncFetcher";
 export * from "./useCollapse";
 export * from "./useMounted";
+export * from "./useEffectOne";
+export * from "./useEffectLeave";

package/dist/hooks/index.js

@@ -5,3 +5,5 @@ export * from "./useDragResize";
 export * from "./useAsyncFetcher";
 export * from "./useCollapse";
 export * from "./useMounted";
+export * from "./useEffectOne";
+export * from "./useEffectLeave";

package/dist/hooks/useDragResize.d.ts

@@ -4,9 +4,11 @@ export interface ResizeTypes {
 }
 export interface DragResizePropsTypes {
     active?: boolean;
-    direction?: "width" | "height";
+    direction?: "horizontal" | "vertical";
     minWidth?: number;
     maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
     onInit?: (size: ResizeTypes) => void;
     onResizeStart?: (size: ResizeTypes) => void;
     onResizing?: (size: ResizeTypes) => void;
@@ -15,5 +17,6 @@ export interface DragResizePropsTypes {
 export type DragResizeTypes = {
     dragRef: React.RefObject<HTMLDivElement | null>;
     resizeRef: React.RefObject<HTMLDivElement | null>;
+    resize?: ResizeTypes;
 };
-export declare function useDragResize({ active, direction, minWidth, maxWidth, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizePropsTypes): DragResizeTypes;
+export declare function useDragResize({ active, direction, minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }: DragResizePropsTypes): DragResizeTypes;

package/dist/hooks/useDragResize.js

@@ -1,9 +1,10 @@
 "use client";
 //wade 2024.12.06
-import { useEffect, useRef } from "react";
-export function useDragResize({ active = true, direction = "width", minWidth = 300, maxWidth = 500, onInit, onResizeStart, onResizing, onResizeEnd }) {
+import { useEffect, useRef, useState } from "react";
+export function useDragResize({ active = true, direction = "horizontal", minWidth, maxWidth, minHeight, maxHeight, onInit, onResizeStart, onResizing, onResizeEnd }) {
     const dragRef = useRef(null);
     const resizeRef = useRef(null);
+    const [resize, setResize] = useState({ width: 0, height: 0 });
     const getResizeSizeValue = () => {
         if (!resizeRef.current)
             return;
@@ -18,10 +19,18 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
         const rect = resizeRef.current.getBoundingClientRect();
         const resizeWidth = clientX - rect.left;
         const resizeHeight = clientY - rect.top;
-        if (resizeWidth <= minWidth || resizeWidth >= maxWidth)
-            return;
-        resizeRef.current.style.width = resizeWidth + "px";
-        return { width: resizeWidth };
+        if (direction == "horizontal"
+            && (minWidth && resizeWidth >= minWidth)
+            && (maxWidth && resizeWidth <= maxWidth)) {
+            resizeRef.current.style.width = resizeWidth + "px";
+            return { width: resizeWidth, height: undefined };
+        }
+        if (direction == "vertical"
+            && (minHeight && resizeWidth >= minHeight)
+            && (maxHeight && resizeWidth <= maxHeight)) {
+            resizeRef.current.style.height = resizeHeight + "px";
+            return { width: undefined, height: resizeHeight };
+        }
     };
     const onInitCallback = () => {
         const resizeValue = getResizeSizeValue();
@@ -33,7 +42,10 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
     };
     const onMouseMove = (e) => {
         const resizeValue = setResizeValue(e.clientX, e.clientY);
-        resizeValue && onResizing?.(resizeValue);
+        if (!resizeValue)
+            return;
+        setResize(() => ({ ...resizeValue }));
+        onResizing?.(resizeValue);
     };
     const onMouseUp = () => {
         const resizeValue = getResizeSizeValue();
@@ -59,5 +71,5 @@ export function useDragResize({ active = true, direction = "width", minWidth = 3
             removeEventListeners();
         };
     }, [active]);
-    return { dragRef, resizeRef };
+    return { dragRef, resizeRef, resize };
 }

package/dist/hooks/useEffectLeave.d.ts

@@ -0,0 +1 @@
+export declare function useEffectLeave(callback: () => void): void;

package/dist/hooks/useEffectLeave.js

@@ -0,0 +1,9 @@
+"use client";
+import { useEffect, useRef } from "react";
+export function useEffectLeave(callback) {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        callbackRef.current?.();
+    }, []);
+}

package/dist/hooks/useEffectOne.d.ts

@@ -0,0 +1 @@
+export declare function useEffectOne(callback: () => void): void;

package/dist/hooks/useEffectOne.js

@@ -0,0 +1,9 @@
+"use client";
+import { useEffect, useRef } from "react";
+export function useEffectOne(callback) {
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        callbackRef.current?.();
+    }, []);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@xwadex/fesd-next",
-	"version": "0.3.44-beta.9",
+	"version": "0.3.45",
 	"private": false,
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",

package/dist/components/dragResize/dragResize.module.scss

@@ -1,42 +0,0 @@
-.root {
-  width: inherit;
-  height: inherit;
-  display: flex;
-  flex-direction: row;
-}
-
-.container {
-  width: inherit;
-  height: inherit;
-}
-
-.drag {
-  --drag-line-width: 2px;
-  --drag-line-color: rgbs(0, 0, 0, 1);
-
-  width: 0;
-  height: inherit;
-  position: relative;
-  z-index: 2;
-
-  &::before {
-    content: "";
-    width: 0;
-    height: inherit;
-    border-left: var(--drag-line-width) solid var(--drag-line-color);
-    position: absolute;
-    inset: 0 0 0 calc(var(--drag-line-width) / 2 * -1);
-    z-index: 1;
-    opacity: 0;
-    transition: 0.5s ease-in-out;
-  }
-
-  &:not(.off) {
-    &:hover {
-      cursor: ew-resize;
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-}