@xwadex/fesd-next 0.3.3 → 0.3.4-4.1

package/README.md

@@ -1,26 +1 @@
-# your-ui-package
-
-React UI 元件套件。
-
-## 安裝
-
-```bash
-npm install your-ui-package
-```
-
-## 使用
-
-```tsx
-import { MyComponent } from 'your-ui-package';
-
-export default function App() {
-  return <MyComponent />;
-}
-```
-
-## 內容
-
-- `MyComponent`：簡單的 React 元件
-- `useHooks`：自訂 hook
-- `someUtil`：工具函式
-- 共用型別
+# ui-package

package/dist/components/accordions/accordion.d.ts

@@ -0,0 +1,10 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type { ShadcnBaseProps } from "../../types/index.js";
+type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Root> & {
+    as?: React.ElementType;
+};
+declare const Accordion: {
+    (props: PropsType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Accordion;

package/dist/components/accordions/accordion.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+const Accordion = (props) => {
+    const { as, children, ...restProps } = props;
+    const Component = as || "div";
+    return (_jsx(AccordionPrimitive.Root, { asChild: true, "data-slot": "accordion", ...restProps, children: _jsx(Component, { children: children }) }));
+};
+Accordion.displayName = "Accordion";
+export default Accordion;

package/dist/components/accordions/accordionContent.d.ts

@@ -0,0 +1,11 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type { ShadcnBaseProps } from "../../types/index.js";
+type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Content> & {
+    as?: React.ElementType;
+    ref?: React.Ref<Element>;
+};
+declare const AccordionContent: {
+    (props: PropsType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AccordionContent;

package/dist/components/accordions/accordionContent.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { useMounted } from "../../hooks/index.js";
+import { cn } from "../../utils/index.js";
+import { useImperativeHandle, useRef } from "react";
+const AccordionContent = (props) => {
+    const { as, ref, className, children, ...restProps } = props;
+    const Component = as || "div";
+    const insideRef = useRef(null);
+    useImperativeHandle(ref, () => insideRef.current);
+    const { isMounded } = useMounted();
+    return (_jsx(AccordionPrimitive.Content, { asChild: true, "data-slot": "accordion-content", ...restProps, children: _jsx(Component, { ref: insideRef, className: cn(`
+					overflow-hidden
+					text-sm`, isMounded && `
+					data-[state=closed]:animate-accordion-up2
+					data-[state=open]:animate-accordion-down2`, className), children: children }) }));
+};
+AccordionContent.displayName = "AccordionContent";
+export default AccordionContent;

package/dist/components/accordions/accordionItem.d.ts

@@ -0,0 +1,11 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type { ShadcnBaseProps } from "../../types/index.js";
+type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Item> & {
+    as?: React.ElementType;
+    ref?: React.Ref<Element>;
+};
+declare const AccordionItem: {
+    (props: PropsType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AccordionItem;

package/dist/components/accordions/accordionItem.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "../../utils/index.js";
+import { useImperativeHandle, useRef } from "react";
+const AccordionItem = (props) => {
+    const { as, ref, className, children, ...restProps } = props;
+    const Component = as || "div";
+    const insideRef = useRef(null);
+    useImperativeHandle(ref, () => insideRef.current);
+    return (_jsx(AccordionPrimitive.Item, { asChild: true, "data-slot": "accordion-item", ...restProps, children: _jsx(Component, { ref: insideRef, className: cn(className), children: children }) }));
+};
+AccordionItem.displayName = "AccordionItem";
+export default AccordionItem;

package/dist/components/accordions/accordionTrigger.d.ts

@@ -0,0 +1,11 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import type { ShadcnBaseProps } from "../../types/index.js";
+type PropsType = ShadcnBaseProps<typeof AccordionPrimitive.Trigger> & {
+    as?: React.ElementType;
+    ref?: React.Ref<Element>;
+};
+declare const AccordionTrigger: {
+    (props: PropsType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default AccordionTrigger;

package/dist/components/accordions/accordionTrigger.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "../../utils/index.js";
+import { useImperativeHandle, useRef } from "react";
+const AccordionTrigger = (props) => {
+    const { as, ref, children, className, ...restProps } = props;
+    const Component = as || "button";
+    const isButton = Component === "button";
+    const insideRef = useRef(null);
+    useImperativeHandle(ref, () => insideRef.current);
+    return (_jsx(AccordionPrimitive.Header, { asChild: true, children: _jsx(AccordionPrimitive.Trigger, { asChild: true, "data-slot": "accordion-trigger", ...restProps, children: _jsx(Component, { ref: insideRef, type: isButton ? "button" : undefined, role: !isButton ? "button" : undefined, "aria-expanded": props["aria-expanded"], "aria-controls": props["aria-controls"], tabIndex: 0, 
+                // onKeyDown={(e) => console.log(e)}
+                className: cn(`focus-visible:border-ring
+						focus-visible:ring-ring/50
+						focus-visible:ring-[3px]`, className), children: children }) }) }));
+};
+// type AccordionTriggerProps<T extends React.ElementType
+// > = ShadcnBaseProps<T, React.ComponentPropsWithoutRef<
+//     typeof AccordionPrimitive.Trigger>
+// > & {
+//     defaultIcon?: boolean
+//     className?: string
+//     children?: React.ReactNode
+// }
+// function AccordionTrigger<T extends React.ElementType = "button">({
+//     as,
+//     asChild,
+//     children,
+//     className,
+//     defaultIcon,
+//     ...props
+// }: AccordionTriggerProps<T>) {
+//     const Component = as || "button"
+//     const isButton = Component === "button"
+//     const isUseIcon = defaultIcon && `
+//         flex
+//         flex-1
+//         items-start
+//         justify-between
+//         gap-4
+//         rounded-md
+//         text-left
+//         focus-visible:ring-[3px]
+//         [&[data-state=open]>svg]:rotate-180
+//     `
+//     return (
+//         <AccordionPrimitive.Header asChild>
+//             <AccordionPrimitive.Trigger
+//                 asChild
+//                 data-slot="accordion-trigger"
+//                 {...props}
+//             >
+//                 <Component
+//                     type={isButton ? "button" : undefined}
+//                     role={!isButton ? "button" : undefined}
+//                     aria-expanded={props["aria-expanded"]}
+//                     aria-controls={props["aria-controls"]}
+//                     tabIndex={0}
+//                     className={cn(`
+//                         outline-none
+//                         focus-visible:border-ring
+//                         focus-visible:ring-ring/50
+//                         disabled:pointer-events-none
+//                         disabled:opacity-50`,
+//                         isUseIcon,
+//                         className
+//                     )}
+//                 >
+//                     {children}
+//                     {isUseIcon && <ChevronDownIcon
+//                         className={`
+//                             text-muted-foreground
+//                             pointer-events-none
+//                             size-4
+//                             shrink-0
+//                             translate-y-0.5
+//                             transition-transform
+//                             duration-200
+//                         `}
+//                     />}
+//                 </Component>
+//             </AccordionPrimitive.Trigger>
+//         </AccordionPrimitive.Header>
+//     )
+// }
+AccordionTrigger.displayName = "AccordionTrigger";
+export default AccordionTrigger;

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

@@ -0,0 +1,35 @@
+export declare const Accordions: {
+    Root: {
+        (props: import("../..").ShadcnBaseProps<import("react").ForwardRefExoticComponent<(import("@radix-ui/react-accordion").AccordionSingleProps | import("@radix-ui/react-accordion").AccordionMultipleProps) & import("react").RefAttributes<HTMLDivElement>>> & {
+            as?: React.ElementType;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Content: {
+        (props: {
+            as?: React.ElementType;
+        } & import("@radix-ui/react-accordion").AccordionContentProps & import("react").RefAttributes<HTMLDivElement> & {
+            as?: React.ElementType;
+            ref?: React.Ref<Element>;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        (props: {
+            as?: React.ElementType;
+        } & import("@radix-ui/react-accordion").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & {
+            as?: React.ElementType;
+            ref?: React.Ref<Element>;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Trigger: {
+        (props: {
+            as?: React.ElementType;
+        } & import("@radix-ui/react-accordion").AccordionTriggerProps & import("react").RefAttributes<HTMLButtonElement> & {
+            as?: React.ElementType;
+            ref?: React.Ref<Element>;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/accordions/index.js

@@ -0,0 +1,11 @@
+import { default as AccordionRoot } from "./accordion";
+import { default as AccordionContent } from "./accordionContent";
+import { default as AccordionItem } from "./accordionItem";
+import { default as AccordionTrigger } from "./accordionTrigger";
+export const Accordions = {
+    Root: AccordionRoot,
+    Content: AccordionContent,
+    Item: AccordionItem,
+    Trigger: AccordionTrigger
+};
+// export * from "./accordion"

package/dist/components/button.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "default" | "icon" | "sm" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/button.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils/index.js";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Button({ className, variant, size, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
+}
+export { Button, buttonVariants };

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

@@ -0,0 +1,19 @@
+import { DragResizePropsTypes, ResizeTypes } from "../../hooks/index.js";
+import { AsPropsTypes } from "../../types/index.js";
+type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
+    as?: React.ElementType;
+    children: React.ReactNode;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    resizeClass?: string;
+    dragLineWidth?: number;
+    dragLineColor?: string;
+    containerClass?: string;
+    dragClass?: string;
+    resizeStore?: boolean;
+    resizeStoreKey?: string;
+    resizeStoreValue?: ResizeTypes;
+} & DragResizePropsTypes>;
+declare const DragResizeBase: <T extends React.ElementType = "div">(props: PropsTypes<T>) => import("react/jsx-runtime").JSX.Element;
+declare const DragResize: React.MemoExoticComponent<typeof DragResizeBase>;
+export default DragResize;

package/dist/components/dragResize/dragResize.js

@@ -0,0 +1,77 @@
+"use client";
+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";
+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 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 !== ""
+        ? true : false, [resizeStore, resizeStoreKey]);
+    const resizeDefauleStyles = useMemo(() => {
+        if (!isCookieStore || !resizeStoreValue)
+            return {
+                width: minWidth + "px",
+                // height: minHeight + "px"
+            };
+        const { width, height } = resizeStoreValue;
+        return {
+            width: width ? width + "px" : "inherit",
+            height: height ? height + "px" : "inherit",
+        };
+    }, [isCookieStore, resizeStoreValue]);
+    const onResizeEndHandler = useCallback((size) => {
+        onResizeEnd?.(size);
+        if (!isCookieStore)
+            return;
+        setCookies(resizeStoreKey, JSON.stringify(size));
+    }, [isCookieStore, onResizeEnd, resizeStore]);
+    //Hooks
+    const { dragRef, resizeRef } = useDragResize({
+        active: isActive,
+        direction,
+        minWidth,
+        maxWidth,
+        onInit,
+        onResizeStart,
+        onResizing,
+        onResizeEnd: onResizeEndHandler,
+    });
+    //Context Functions
+    const setResizeActive = useCallback((active) => setActive(active), [setActive]);
+    const clearResizeStore = useCallback(() => resizeStoreKey
+        ? deleteCookies(resizeStoreKey)
+        : console.error("resizeStoreKey is not undefined"), [resizeStoreKey]);
+    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,
+        defaultResizeSize
+    }), [
+        setResizeActive,
+        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
+                    } })] }) }));
+};
+const DragResize = memo(DragResizeBase);
+DragResize.displayName = "DragResize";
+export default DragResize;

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

@@ -0,0 +1,42 @@
+.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;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface DragResizeContextType {
+    setResizeActive: (active: boolean) => void;
+    clearResizeStore: () => void;
+    defaultResizeSize: () => void;
+}
+export declare const DragResizeContext: React.Context<DragResizeContextType | undefined> & {
+    displayName: string;
+};
+export declare const useDragResizeContext: () => DragResizeContextType;

package/dist/components/dragResize/dragResizeContext.js

@@ -0,0 +1,9 @@
+"use client";
+import { use, createContext } from "react";
+export const DragResizeContext = Object.assign(createContext(undefined), { displayName: "DragResizeContext" });
+export const useDragResizeContext = () => {
+    const context = use(DragResizeContext);
+    if (context)
+        return context;
+    throw new Error("DragResizeContext is not defined!!");
+};

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

@@ -0,0 +1,2 @@
+export { default as DragResize } from "./dragResize";
+export * from "./dragResizeContext";

package/dist/components/dragResize/index.js

@@ -0,0 +1,2 @@
+export { default as DragResize } from "./dragResize";
+export * from "./dragResizeContext";

package/dist/components/dragSortable/dragSortable.d.ts

@@ -0,0 +1,19 @@
+import type { AsPropsTypes } from "../../types/index.js";
+import type { Sortable, Store } from "react-sortablejs";
+type PropsTypes<T extends React.ElementType = "div"> = AsPropsTypes<T, {
+    as?: string;
+    children: React.ReactNode;
+    datasets: any[];
+    rootClass?: string;
+    sorterClass?: string;
+    handlerClass?: string;
+    style?: React.CSSProperties;
+    disabled?: boolean;
+    animation?: number;
+    onChange?: (newState: any[], sortable: Sortable | null, store: Store) => void;
+    onStart?: ((evt: Sortable.SortableEvent, sortable: Sortable | null, store: Store) => void) | undefined;
+    onEnd?: ((evt: Sortable.SortableEvent, sortable: Sortable | null, store: Store) => void) | undefined;
+}>;
+declare const DragSortableBase: <T extends React.ElementType = "div">(props: PropsTypes<T>) => import("react/jsx-runtime").JSX.Element;
+declare const DragSortable: React.MemoExoticComponent<typeof DragSortableBase>;
+export default DragSortable;

package/dist/components/dragSortable/dragSortable.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { ReactSortable } from "react-sortablejs";
+const DragSortableBase = (props) => {
+    const { as, children, datasets = [], rootClass, sorterClass, handlerClass, style, animation = 150, disabled = false, onChange, onStart, onEnd, ...othersProps } = props;
+    return (_jsx(ReactSortable, { ...othersProps, tag: as, disabled: disabled, className: rootClass, ghostClass: sorterClass, handle: "." + handlerClass, fallbackClass: "sortable-fallback", list: datasets, setList: onChange, animation: animation, style: style, onStart: onStart, onEnd: onEnd, children: children }));
+};
+const DragSortable = memo(DragSortableBase);
+DragSortable.displayName = "DragSortable";
+export default DragSortable;

package/dist/components/dragSortable/dragSortable.module.scss

@@ -0,0 +1,7 @@
+.dragging {
+  > * {
+    &:hover {
+      background-color: transparent !important;
+    }
+  }
+}

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

@@ -0,0 +1 @@
+export { default as DragSortable } from "./dragSortable";

package/dist/components/dragSortable/index.js

@@ -0,0 +1 @@
+export { default as DragSortable } from "./dragSortable";

package/dist/components/index.d.ts

@@ -1 +1,5 @@
-export * from "./myComponents";
+export * from "./dragResize";
+export * from "./dragSortable";
+export * from "./accordions";
+export * from "./resizables";
+export * from "./scrollAreas";

package/dist/components/index.js

@@ -1 +1,7 @@
-export * from "./myComponents";
+// dev components
+export * from "./dragResize";
+export * from "./dragSortable";
+// shadcn Components
+export * from "./accordions";
+export * from "./resizables";
+export * from "./scrollAreas";

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

@@ -0,0 +1,66 @@
+export declare const Resizables: {
+    Root: {
+        (props: Omit<import("react").HTMLAttributes<keyof HTMLElementTagNameMap>, "id"> & {
+            autoSaveId?: string | null;
+            className?: string;
+            direction: import("react-resizable-panels/dist/declarations/src/types").Direction;
+            id?: string | null;
+            keyboardResizeBy?: number | null;
+            onLayout?: import("react-resizable-panels").PanelGroupOnLayout | null;
+            storage?: import("react-resizable-panels").PanelGroupStorage;
+            style?: import("react").CSSProperties;
+            tagName?: keyof HTMLElementTagNameMap;
+            dir?: "auto" | "ltr" | "rtl" | undefined;
+        } & {
+            children?: import("react").ReactNode | undefined;
+        } & import("react").RefAttributes<import("react-resizable-panels").ImperativePanelGroupHandle> & {
+            as?: keyof HTMLElementTagNameMap;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Panel: {
+        (props: Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLElement | HTMLObjectElement | HTMLInputElement | HTMLProgressElement | HTMLSelectElement | HTMLButtonElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLSlotElement | HTMLScriptElement | HTMLSourceElement | HTMLSpanElement | HTMLStyleElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+            className?: string;
+            collapsedSize?: number | undefined;
+            collapsible?: boolean | undefined;
+            defaultSize?: number | undefined;
+            id?: string;
+            maxSize?: number | undefined;
+            minSize?: number | undefined;
+            onCollapse?: import("react-resizable-panels").PanelOnCollapse;
+            onExpand?: import("react-resizable-panels").PanelOnExpand;
+            onResize?: import("react-resizable-panels").PanelOnResize;
+            order?: number;
+            style?: object;
+            tagName?: keyof HTMLElementTagNameMap | undefined;
+        } & {
+            children?: import("react").ReactNode | undefined;
+        } & import("react").RefAttributes<import("react-resizable-panels").ImperativePanelHandle> & {
+            as?: keyof HTMLElementTagNameMap;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Handle: {
+        (props: Omit<import("react").HTMLAttributes<keyof HTMLElementTagNameMap>, "id" | "onFocus" | "onBlur" | "onClick" | "onPointerDown" | "onPointerUp"> & {
+            className?: string;
+            disabled?: boolean;
+            hitAreaMargins?: import("react-resizable-panels").PointerHitAreaMargins;
+            id?: string | null;
+            onBlur?: () => void;
+            onClick?: () => void;
+            onDragging?: import("react-resizable-panels").PanelResizeHandleOnDragging;
+            onFocus?: () => void;
+            onPointerDown?: () => void;
+            onPointerUp?: () => void;
+            style?: import("react").CSSProperties;
+            tabIndex?: number;
+            tagName?: keyof HTMLElementTagNameMap;
+        } & {
+            children?: import("react").ReactNode | undefined;
+        } & {
+            as?: keyof HTMLElementTagNameMap;
+            withHandle?: boolean;
+        }): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

package/dist/components/resizables/index.js

@@ -0,0 +1,8 @@
+import { default as ResizablePanelGroup } from "./resizablePanelGroup";
+import { default as ResizablePanel } from "./resizablePanel";
+import { default as ResizableHandle } from "./resizableHandle";
+export const Resizables = {
+    Root: ResizablePanelGroup,
+    Panel: ResizablePanel,
+    Handle: ResizableHandle,
+};

package/dist/components/resizables/resizableHandle.d.ts

@@ -0,0 +1,11 @@
+import * as ResizablePrimitive from 'react-resizable-panels';
+import type { ComponentProps } from "../../types/index.js";
+type PropsType = ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    as?: keyof HTMLElementTagNameMap;
+    withHandle?: boolean;
+};
+declare const ResizableHandle: {
+    (props: PropsType): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ResizableHandle;