@xanui/ui 1.2.6 → 1.2.7

package/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? \"default\"\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}
+{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    size?: useBreakpointPropsType<number>;\n}\n\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\n    const _p: any = {}\n    if (direction) _p.direction = direction\n    if (color) _p.color = color\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n    direction = p.direction ?? \"horizental\"\n    color = p.color ?? 'surface'\n    size = p.size ?? 1\n\n    let isHori = direction === 'horizental'\n\n    return (\n        <Tag\n            {...rest}\n            baseClass='surface.divider'\n            sxr={{\n                width: isHori ? \"100%\" : size,\n                height: isHori ? size : \"100%\",\n                bgcolor: color === 'surface' ? `surface.light` : `${color}.light`,\n            }}\n            ref={ref}\n        >{children}</Tag>\n    )\n})\n\nexport default Divider\n\n"],"names":[],"mappings":";;;;;;AAWA;;AAAsE;;AAElE;AAAe;AACf;AAAW;AACX;AAAU;AACV;AACA;AACA;AACA;AAEA;;;;AASY;AACH;AAIb;;"}

package/Drawer/index.cjs

@@ -46,12 +46,12 @@ const Drawer = (_a) => {
             }, children: jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsxRuntime.jsx(core.Tag, { sxr: {
                         width: isSide ? _size : "100%",
                         height: isSide ? "100%" : _size,
-                        bgcolor: "background.primary",
+                        bgcolor: "surface.main",
                         shadow: 20
                     }, baseClass: 'drawer-content', children: children }) })) })) })));
 };
 Drawer.open = (children, props) => {
-    const d = core.Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+    const d = core.Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, onExited: () => {
             d.unrender();
         }, onClickOutside: () => {
             if (props === null || props === void 0 ? void 0 : props.onClickOutside) {

package/Drawer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 220,\n        medium: 330,\n        large: 440\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 220,\n        medium: 330,\n        large: 440\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"surface.main\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onExited: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAWgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}

package/Drawer/index.js

@@ -44,12 +44,12 @@ const Drawer = (_a) => {
             }, children: jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: jsx(Tag, { sxr: {
                         width: isSide ? _size : "100%",
                         height: isSide ? "100%" : _size,
-                        bgcolor: "background.primary",
+                        bgcolor: "surface.main",
                         shadow: 20
                     }, baseClass: 'drawer-content', children: children }) })) })) })));
 };
 Drawer.open = (children, props) => {
-    const d = Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
+    const d = Renderar.render(Drawer, Object.assign(Object.assign({ open: true }, props), { children, onExited: () => {
             d.unrender();
         }, onClickOutside: () => {
             if (props === null || props === void 0 ? void 0 : props.onClickOutside) {

package/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 220,\n        medium: 330,\n        large: 440\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"background.primary\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAUgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\n\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        layer?: Partial<Omit<LayerProps, \"children\">>\n        root?: TagProps<\"div\">;\n        content?: TagProps<\"div\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n    }\n}\n\nconst getVariant = (placement?: any) => {\n    switch (placement) {\n        case \"right\":\n            return \"fadeLeft\"\n        case \"top\":\n            return \"fadeDown\"\n        case \"bottom\":\n            return \"fadeUp\"\n        default:\n            return \"fadeRight\"\n    }\n}\n\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\n    const _p: any = {}\n    if (placement) _p.placement = placement\n    if (size) _p.size = size\n    const p: any = useBreakpointProps(_p)\n\n    placement = p.placement ?? 'left'\n    size = p.size || \"medium\"\n\n    let isSide = placement === 'left' || placement === 'right'\n    let sizes: any = {\n        small: 220,\n        medium: 330,\n        large: 440\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Layer\n            {...layerProps}\n            {...slotProps?.layer}\n            transition={getVariant(placement)}\n\n        >\n            <Tag\n                {...slotProps?.root}\n                baseClass='drawer'\n                sxr={{\n                    width: \"100vw\",\n                    height: \"100vh\",\n                    display: \"flex\",\n                    direction: isSide ? \"row\" : \"column\" as any,\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n                }}\n            >\n                <ClickOutside\n                    {...slotProps?.clickOutside}\n                    onClickOutside={onClickOutside || (() => { })}\n                >\n                    <Tag\n                        sxr={{\n                            width: isSide ? _size : \"100%\",\n                            height: isSide ? \"100%\" : _size,\n                            bgcolor: \"surface.main\",\n                            shadow: 20\n                        }}\n                        baseClass='drawer-content'\n                    >\n                        {children}\n                    </Tag>\n                </ClickOutside>\n            </Tag>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    const d = Renderar.render(Drawer as any, {\n        open: true,\n        ...props,\n        children,\n        onExited: () => {\n            d.unrender()\n        },\n        onClickOutside: () => {\n            if (props?.onClickOutside) {\n                props.onClickOutside()\n            } else {\n                d.updateProps({ open: false })\n            }\n        }\n    })\n\n    return {\n        open: () => {\n            d.updateProps({ open: true })\n        },\n        close: () => {\n            d.updateProps({ open: false })\n        },\n    }\n}\n\nDrawer.close = () => {\n    Renderar.unrender(Drawer as any)\n}\n\nexport default Drawer"],"names":[],"mappings":";;;;;;;AAkBA;;AAEQ;AACI;AACJ;AACI;AACJ;AACI;AACJ;AACI;;AAEZ;AAEA;;AAAgB;;AAEZ;AAAe;AACf;AAAU;AACV;AAEA;AACA;;AAGA;AACI;AACA;AACA;;;AAKJ;AAWgB;AACA;AACA;;AAEA;;;;AAWQ;AACA;;AAU5B;AAGA;AACI;;AAMI;;;;;;;AAOA;;;;;;;;;AAWR;AAEA;AACI;AACJ;;"}

package/FilePicker/index.cjs

@@ -0,0 +1,115 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@xanui/core');
+var React = require('react');
+
+const FilePicker$1 = (_a, ref) => {
+    var _b;
+    var { children, multiple, action, accept, maxFileLimits, maxFileSize, onChange, onDragOver, onDragLeave, onError } = _a, props = tslib.__rest(_a, ["children", "multiple", "action", "accept", "maxFileLimits", "maxFileSize", "onChange", "onDragOver", "onDragLeave", "onError"]);
+    const bp = core.useBreakpointProps({ action });
+    action = (_b = bp.action) !== null && _b !== void 0 ? _b : "both";
+    const _props = {};
+    const handleFiles = (files) => {
+        const fileArray = Array.from(files);
+        // multiple
+        if (!multiple && fileArray.length > 1) {
+            onError && onError({
+                message: "Multiple file upload is not allowed.",
+                file: fileArray[1]
+            });
+            return;
+        }
+        // limit
+        if (maxFileLimits && fileArray.length > maxFileLimits) {
+            onError && onError({
+                message: `File limit exceeded. Maximum allowed is ${maxFileLimits}.`,
+                file: fileArray[maxFileLimits]
+            });
+            return;
+        }
+        // accept
+        if (accept && accept.length > 0) {
+            for (const file of fileArray) {
+                const isAccepted = accept.some((type) => {
+                    if (type === '*/*')
+                        return true;
+                    if (type.endsWith('/*')) {
+                        const mainType = type.split('/')[0];
+                        return file.type.startsWith(mainType + '/');
+                    }
+                    return file.name.endsWith(type);
+                });
+                if (!isAccepted) {
+                    onError && onError({
+                        message: `File type not accepted: ${file.name}`,
+                        file
+                    });
+                    return;
+                }
+            }
+        }
+        // size
+        if (maxFileSize) {
+            for (const file of fileArray) {
+                if (file.size > maxFileSize * 1024) {
+                    onError && onError({
+                        message: `File size exceeds the limit of ${maxFileSize} KB: ${file.name}`,
+                        file
+                    });
+                    return;
+                }
+            }
+        }
+        onChange && onChange(fileArray);
+    };
+    const clickProps = {
+        onClick: () => {
+            const input = document.createElement('input');
+            input.type = 'file';
+            if (multiple) {
+                input.multiple = true;
+            }
+            if (accept && accept.length > 0) {
+                input.accept = accept.join(',');
+            }
+            input.onchange = (e) => {
+                handleFiles(e.target.files);
+            };
+            input.click();
+        }
+    };
+    const dropProps = {
+        onDragOver: (e) => {
+            e.preventDefault();
+            onDragOver && onDragOver(e);
+        },
+        onDragLeave: (e) => {
+            e.preventDefault();
+            onDragLeave && onDragLeave(e);
+        },
+        onDrop: (e) => {
+            e.preventDefault();
+            handleFiles(e.dataTransfer.files);
+            onDragLeave && onDragLeave(e);
+        }
+    };
+    switch (action) {
+        case "click":
+            Object.assign(_props, clickProps);
+            break;
+        case "drop":
+            Object.assign(_props, dropProps);
+            break;
+        case "both":
+            Object.assign(_props, Object.assign(Object.assign({}, clickProps), dropProps));
+            break;
+    }
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, _props, { baseClass: 'file-picker', ref: ref, children: children })));
+};
+var FilePicker = React.forwardRef(FilePicker$1);
+
+module.exports = FilePicker;
+//# sourceMappingURL=index.cjs.map

package/FilePicker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/FilePicker/index.tsx"],"sourcesContent":["\"use client\"\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport React from 'react';\n\nexport type FilePickerError = { message: string, file: File }\n\nexport type FilePickerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'accept' | \"onChange\" | \"onError\" | \"multiple\"> & {\n   children?: React.ReactNode;\n   multiple?: boolean;\n   accept?: string[] //  ['.png', '.jpg'] or ['image/*']\n   maxFileSize?: number; // in kb\n   maxFileLimits?: number;\n   action?: useBreakpointPropsType<\"click\" | \"drop\" | \"both\">;\n   onChange?: (files: File[]) => void;\n   onDragOver?: (e: React.DragEvent) => void;\n   onDragLeave?: (e: React.DragEvent) => void;\n   onError?: (error: FilePickerError) => void;\n};\n\n\nconst FilePicker = <T extends TagComponentType = \"div\">({ children, multiple, action, accept, maxFileLimits, maxFileSize, onChange, onDragOver, onDragLeave, onError, ...props }: FilePickerProps<T>, ref: React.Ref<T>) => {\n\n   const bp: any = useBreakpointProps({ action })\n   action = bp.action ?? \"both\"\n   const _props: any = {}\n\n   const handleFiles = (files: FileList) => {\n      const fileArray = Array.from(files);\n\n      // multiple\n      if (!multiple && fileArray.length > 1) {\n         onError && onError({\n            message: \"Multiple file upload is not allowed.\",\n            file: fileArray[1]\n         });\n         return;\n      }\n\n      // limit\n      if (maxFileLimits && fileArray.length > maxFileLimits) {\n         onError && onError({\n            message: `File limit exceeded. Maximum allowed is ${maxFileLimits}.`,\n            file: fileArray[maxFileLimits]\n         });\n         return;\n      }\n\n      // accept\n      if (accept && accept.length > 0) {\n         for (const file of fileArray) {\n            const isAccepted = accept.some((type) => {\n               if (type === '*/*') return true;\n               if (type.endsWith('/*')) {\n                  const mainType = type.split('/')[0];\n                  return file.type.startsWith(mainType + '/');\n               }\n               return file.name.endsWith(type);\n            });\n            if (!isAccepted) {\n               onError && onError({\n                  message: `File type not accepted: ${file.name}`,\n                  file\n               });\n               return;\n            }\n         }\n      }\n\n      // size\n      if (maxFileSize) {\n         for (const file of fileArray) {\n            if (file.size > maxFileSize * 1024) {\n               onError && onError({\n                  message: `File size exceeds the limit of ${maxFileSize} KB: ${file.name}`,\n                  file\n               });\n               return;\n            }\n         }\n      }\n      onChange && onChange(fileArray);\n   }\n\n\n   const clickProps = {\n      onClick: () => {\n         const input = document.createElement('input');\n         input.type = 'file';\n         if (multiple) {\n            input.multiple = true;\n         }\n         if (accept && accept.length > 0) {\n            input.accept = accept.join(',');\n         }\n         input.onchange = (e: any) => {\n            handleFiles(e.target.files);\n         };\n         input.click();\n      }\n   }\n\n   const dropProps = {\n      onDragOver: (e: React.DragEvent) => {\n         e.preventDefault();\n         onDragOver && onDragOver(e);\n      },\n      onDragLeave: (e: React.DragEvent) => {\n         e.preventDefault();\n         onDragLeave && onDragLeave(e);\n      },\n      onDrop: (e: React.DragEvent) => {\n         e.preventDefault();\n         handleFiles(e.dataTransfer.files);\n         onDragLeave && onDragLeave(e);\n      }\n   }\n\n   switch (action) {\n      case \"click\":\n         Object.assign(_props, clickProps);\n         break;\n      case \"drop\":\n         Object.assign(_props, dropProps);\n         break;\n      case \"both\":\n         Object.assign(_props, { ...clickProps, ...dropProps });\n         break;\n   }\n\n   return (\n      <Tag\n         {...props}\n         {..._props}\n         baseClass='file-picker'\n         ref={ref}\n      >\n         {children}\n      </Tag>\n   )\n}\n\nexport default React.forwardRef(FilePicker);"],"names":[],"mappings":";;;;;;;;AAoBA;;;;AAGG;;AAGA;;;;;AAMS;AACA;AACF;;;;;;;AAQE;AACF;;;;;AAMD;;;AAE0B;AACpB;;;;;AAKH;;;AAGM;;AAEF;;;;;;;AAQP;;;AAGS;;AAEF;;;;;AAKV;AACH;AAGA;;;AAGM;;AAEG;;;;;AAKH;AACG;AACH;;;;AAKN;AACG;;AAEG;;AAEH;;AAEG;;AAEH;;AAEG;AACA;;;;AAKH;AACG;;AAEH;AACG;;AAEH;;;;AAKH;AAUH;AAEA;;"}

package/FilePicker/index.d.ts

@@ -0,0 +1,23 @@
+import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
+import React__default from 'react';
+
+type FilePickerError = {
+    message: string;
+    file: File;
+};
+type FilePickerProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, 'accept' | "onChange" | "onError" | "multiple"> & {
+    children?: React__default.ReactNode;
+    multiple?: boolean;
+    accept?: string[];
+    maxFileSize?: number;
+    maxFileLimits?: number;
+    action?: useBreakpointPropsType<"click" | "drop" | "both">;
+    onChange?: (files: File[]) => void;
+    onDragOver?: (e: React__default.DragEvent) => void;
+    onDragLeave?: (e: React__default.DragEvent) => void;
+    onError?: (error: FilePickerError) => void;
+};
+declare const _default: React__default.ForwardRefExoticComponent<Omit<FilePickerProps<TagComponentType>, "ref"> & React__default.RefAttributes<"symbol" | "object" | "cite" | "data" | "form" | "label" | "pattern" | "span" | "summary" | "slot" | "style" | "title" | "div" | "filter" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "big" | "text" | "button" | "p" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | "code" | "col" | "colgroup" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "script" | "section" | "select" | "source" | "strong" | "sub" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
+
+export { _default as default };
+export type { FilePickerError, FilePickerProps };

package/FilePicker/index.js

@@ -0,0 +1,113 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { useBreakpointProps, Tag } from '@xanui/core';
+import React from 'react';
+
+const FilePicker = (_a, ref) => {
+    var _b;
+    var { children, multiple, action, accept, maxFileLimits, maxFileSize, onChange, onDragOver, onDragLeave, onError } = _a, props = __rest(_a, ["children", "multiple", "action", "accept", "maxFileLimits", "maxFileSize", "onChange", "onDragOver", "onDragLeave", "onError"]);
+    const bp = useBreakpointProps({ action });
+    action = (_b = bp.action) !== null && _b !== void 0 ? _b : "both";
+    const _props = {};
+    const handleFiles = (files) => {
+        const fileArray = Array.from(files);
+        // multiple
+        if (!multiple && fileArray.length > 1) {
+            onError && onError({
+                message: "Multiple file upload is not allowed.",
+                file: fileArray[1]
+            });
+            return;
+        }
+        // limit
+        if (maxFileLimits && fileArray.length > maxFileLimits) {
+            onError && onError({
+                message: `File limit exceeded. Maximum allowed is ${maxFileLimits}.`,
+                file: fileArray[maxFileLimits]
+            });
+            return;
+        }
+        // accept
+        if (accept && accept.length > 0) {
+            for (const file of fileArray) {
+                const isAccepted = accept.some((type) => {
+                    if (type === '*/*')
+                        return true;
+                    if (type.endsWith('/*')) {
+                        const mainType = type.split('/')[0];
+                        return file.type.startsWith(mainType + '/');
+                    }
+                    return file.name.endsWith(type);
+                });
+                if (!isAccepted) {
+                    onError && onError({
+                        message: `File type not accepted: ${file.name}`,
+                        file
+                    });
+                    return;
+                }
+            }
+        }
+        // size
+        if (maxFileSize) {
+            for (const file of fileArray) {
+                if (file.size > maxFileSize * 1024) {
+                    onError && onError({
+                        message: `File size exceeds the limit of ${maxFileSize} KB: ${file.name}`,
+                        file
+                    });
+                    return;
+                }
+            }
+        }
+        onChange && onChange(fileArray);
+    };
+    const clickProps = {
+        onClick: () => {
+            const input = document.createElement('input');
+            input.type = 'file';
+            if (multiple) {
+                input.multiple = true;
+            }
+            if (accept && accept.length > 0) {
+                input.accept = accept.join(',');
+            }
+            input.onchange = (e) => {
+                handleFiles(e.target.files);
+            };
+            input.click();
+        }
+    };
+    const dropProps = {
+        onDragOver: (e) => {
+            e.preventDefault();
+            onDragOver && onDragOver(e);
+        },
+        onDragLeave: (e) => {
+            e.preventDefault();
+            onDragLeave && onDragLeave(e);
+        },
+        onDrop: (e) => {
+            e.preventDefault();
+            handleFiles(e.dataTransfer.files);
+            onDragLeave && onDragLeave(e);
+        }
+    };
+    switch (action) {
+        case "click":
+            Object.assign(_props, clickProps);
+            break;
+        case "drop":
+            Object.assign(_props, dropProps);
+            break;
+        case "both":
+            Object.assign(_props, Object.assign(Object.assign({}, clickProps), dropProps));
+            break;
+    }
+    return (jsx(Tag, Object.assign({}, props, _props, { baseClass: 'file-picker', ref: ref, children: children })));
+};
+var FilePicker$1 = React.forwardRef(FilePicker);
+
+export { FilePicker$1 as default };
+//# sourceMappingURL=index.js.map

package/FilePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/FilePicker/index.tsx"],"sourcesContent":["\"use client\"\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport React from 'react';\n\nexport type FilePickerError = { message: string, file: File }\n\nexport type FilePickerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'accept' | \"onChange\" | \"onError\" | \"multiple\"> & {\n   children?: React.ReactNode;\n   multiple?: boolean;\n   accept?: string[] //  ['.png', '.jpg'] or ['image/*']\n   maxFileSize?: number; // in kb\n   maxFileLimits?: number;\n   action?: useBreakpointPropsType<\"click\" | \"drop\" | \"both\">;\n   onChange?: (files: File[]) => void;\n   onDragOver?: (e: React.DragEvent) => void;\n   onDragLeave?: (e: React.DragEvent) => void;\n   onError?: (error: FilePickerError) => void;\n};\n\n\nconst FilePicker = <T extends TagComponentType = \"div\">({ children, multiple, action, accept, maxFileLimits, maxFileSize, onChange, onDragOver, onDragLeave, onError, ...props }: FilePickerProps<T>, ref: React.Ref<T>) => {\n\n   const bp: any = useBreakpointProps({ action })\n   action = bp.action ?? \"both\"\n   const _props: any = {}\n\n   const handleFiles = (files: FileList) => {\n      const fileArray = Array.from(files);\n\n      // multiple\n      if (!multiple && fileArray.length > 1) {\n         onError && onError({\n            message: \"Multiple file upload is not allowed.\",\n            file: fileArray[1]\n         });\n         return;\n      }\n\n      // limit\n      if (maxFileLimits && fileArray.length > maxFileLimits) {\n         onError && onError({\n            message: `File limit exceeded. Maximum allowed is ${maxFileLimits}.`,\n            file: fileArray[maxFileLimits]\n         });\n         return;\n      }\n\n      // accept\n      if (accept && accept.length > 0) {\n         for (const file of fileArray) {\n            const isAccepted = accept.some((type) => {\n               if (type === '*/*') return true;\n               if (type.endsWith('/*')) {\n                  const mainType = type.split('/')[0];\n                  return file.type.startsWith(mainType + '/');\n               }\n               return file.name.endsWith(type);\n            });\n            if (!isAccepted) {\n               onError && onError({\n                  message: `File type not accepted: ${file.name}`,\n                  file\n               });\n               return;\n            }\n         }\n      }\n\n      // size\n      if (maxFileSize) {\n         for (const file of fileArray) {\n            if (file.size > maxFileSize * 1024) {\n               onError && onError({\n                  message: `File size exceeds the limit of ${maxFileSize} KB: ${file.name}`,\n                  file\n               });\n               return;\n            }\n         }\n      }\n      onChange && onChange(fileArray);\n   }\n\n\n   const clickProps = {\n      onClick: () => {\n         const input = document.createElement('input');\n         input.type = 'file';\n         if (multiple) {\n            input.multiple = true;\n         }\n         if (accept && accept.length > 0) {\n            input.accept = accept.join(',');\n         }\n         input.onchange = (e: any) => {\n            handleFiles(e.target.files);\n         };\n         input.click();\n      }\n   }\n\n   const dropProps = {\n      onDragOver: (e: React.DragEvent) => {\n         e.preventDefault();\n         onDragOver && onDragOver(e);\n      },\n      onDragLeave: (e: React.DragEvent) => {\n         e.preventDefault();\n         onDragLeave && onDragLeave(e);\n      },\n      onDrop: (e: React.DragEvent) => {\n         e.preventDefault();\n         handleFiles(e.dataTransfer.files);\n         onDragLeave && onDragLeave(e);\n      }\n   }\n\n   switch (action) {\n      case \"click\":\n         Object.assign(_props, clickProps);\n         break;\n      case \"drop\":\n         Object.assign(_props, dropProps);\n         break;\n      case \"both\":\n         Object.assign(_props, { ...clickProps, ...dropProps });\n         break;\n   }\n\n   return (\n      <Tag\n         {...props}\n         {..._props}\n         baseClass='file-picker'\n         ref={ref}\n      >\n         {children}\n      </Tag>\n   )\n}\n\nexport default React.forwardRef(FilePicker);"],"names":[],"mappings":";;;;;;AAoBA;;;;AAGG;;AAGA;;;;;AAMS;AACA;AACF;;;;;;;AAQE;AACF;;;;;AAMD;;;AAE0B;AACpB;;;;;AAKH;;;AAGM;;AAEF;;;;;;;AAQP;;;AAGS;;AAEF;;;;;AAKV;AACH;AAGA;;;AAGM;;AAEG;;;;;AAKH;AACG;AACH;;;;AAKN;AACG;;AAEG;;AAEH;;AAEG;;AAEH;;AAEG;AACA;;;;AAKH;AACG;;AAEH;AACG;;AAEH;;;;AAKH;AAUH;AAEA;;"}

package/Form/index.cjs

@@ -34,7 +34,7 @@ const Form = React.forwardRef((_a, ref) => {
                 console.log(key + ": " + value);
             });
         }, sxr: {
-            bgcolor: "default",
+            bgcolor: 'surface',
             p: 2,
             maxWidth: 400,
             radius: 1,

package/Form/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n    let formRef: any = ref || useRef(null)\n\n    const cloneAllChildren: any = (childs: any) => {\n        return React.Children.map(childs, (child: any) => {\n            let c: any = child;\n            if (React.isValidElement(child) && c.props.name) {\n                const form = formRef.current\n                const formData = new FormData(form);\n                return React.cloneElement(child, {\n                    onChange: () => {\n                        console.log(formData.get(c.props.name));\n                    },\n                    value: formData.get(c.props.name),\n                    children: cloneAllChildren(c.props.children),\n                } as any);\n            }\n            return child;\n        });\n    };\n\n    return (\n        <Tag\n            component=\"form\"\n            {...rest}\n            onSubmit={(e) => {\n                e.preventDefault()\n                const form = formRef.current\n\n                const formData = new FormData(form);\n\n                formData.forEach((value, key) => {\n                    console.log(key + \": \" + value);\n                });\n            }}\n            sxr={{\n                bgcolor: \"default\",\n                p: 2,\n                maxWidth: 400,\n                radius: 1,\n            }}\n            baseClass='form'\n            ref={formRef}\n        >\n            {cloneAllChildren(children)}\n        </Tag>\n    )\n})\n\nexport default Form\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n    let formRef: any = ref || useRef(null)\n\n    const cloneAllChildren: any = (childs: any) => {\n        return React.Children.map(childs, (child: any) => {\n            let c: any = child;\n            if (React.isValidElement(child) && c.props.name) {\n                const form = formRef.current\n                const formData = new FormData(form);\n                return React.cloneElement(child, {\n                    onChange: () => {\n                        console.log(formData.get(c.props.name));\n                    },\n                    value: formData.get(c.props.name),\n                    children: cloneAllChildren(c.props.children),\n                } as any);\n            }\n            return child;\n        });\n    };\n\n    return (\n        <Tag\n            component=\"form\"\n            {...rest}\n            onSubmit={(e) => {\n                e.preventDefault()\n                const form = formRef.current\n\n                const formData = new FormData(form);\n\n                formData.forEach((value, key) => {\n                    console.log(key + \": \" + value);\n                });\n            }}\n            sxr={{\n                bgcolor: 'surface',\n                p: 2,\n                maxWidth: 400,\n                radius: 1,\n            }}\n            baseClass='form'\n            ref={formRef}\n        >\n            {cloneAllChildren(children)}\n        </Tag>\n    )\n})\n\nexport default Form\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}

package/Form/index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TagComponentType, TagProps } from '@xanui/core';
 
 type FormProps<T extends TagComponentType = "form"> = TagProps<T> & {};
-declare const Form: React.ForwardRefExoticComponent<Omit<FormProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Form: React__default.ForwardRefExoticComponent<Omit<FormProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Form as default };
 export type { FormProps };

package/Form/index.js

@@ -32,7 +32,7 @@ const Form = React.forwardRef((_a, ref) => {
                 console.log(key + ": " + value);
             });
         }, sxr: {
-            bgcolor: "default",
+            bgcolor: 'surface',
             p: 2,
             maxWidth: 400,
             radius: 1,

package/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n    let formRef: any = ref || useRef(null)\n\n    const cloneAllChildren: any = (childs: any) => {\n        return React.Children.map(childs, (child: any) => {\n            let c: any = child;\n            if (React.isValidElement(child) && c.props.name) {\n                const form = formRef.current\n                const formData = new FormData(form);\n                return React.cloneElement(child, {\n                    onChange: () => {\n                        console.log(formData.get(c.props.name));\n                    },\n                    value: formData.get(c.props.name),\n                    children: cloneAllChildren(c.props.children),\n                } as any);\n            }\n            return child;\n        });\n    };\n\n    return (\n        <Tag\n            component=\"form\"\n            {...rest}\n            onSubmit={(e) => {\n                e.preventDefault()\n                const form = formRef.current\n\n                const formData = new FormData(form);\n\n                formData.forEach((value, key) => {\n                    console.log(key + \": \" + value);\n                });\n            }}\n            sxr={{\n                bgcolor: \"default\",\n                p: 2,\n                maxWidth: 400,\n                radius: 1,\n            }}\n            baseClass='form'\n            ref={formRef}\n        >\n            {cloneAllChildren(children)}\n        </Tag>\n    )\n})\n\nexport default Form\n\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}
+{"version":3,"file":"index.js","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useRef } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\n\n}\n\n\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\n    let formRef: any = ref || useRef(null)\n\n    const cloneAllChildren: any = (childs: any) => {\n        return React.Children.map(childs, (child: any) => {\n            let c: any = child;\n            if (React.isValidElement(child) && c.props.name) {\n                const form = formRef.current\n                const formData = new FormData(form);\n                return React.cloneElement(child, {\n                    onChange: () => {\n                        console.log(formData.get(c.props.name));\n                    },\n                    value: formData.get(c.props.name),\n                    children: cloneAllChildren(c.props.children),\n                } as any);\n            }\n            return child;\n        });\n    };\n\n    return (\n        <Tag\n            component=\"form\"\n            {...rest}\n            onSubmit={(e) => {\n                e.preventDefault()\n                const form = formRef.current\n\n                const formData = new FormData(form);\n\n                formData.forEach((value, key) => {\n                    console.log(key + \": \" + value);\n                });\n            }}\n            sxr={{\n                bgcolor: 'surface',\n                p: 2,\n                maxWidth: 400,\n                radius: 1,\n            }}\n            baseClass='form'\n            ref={formRef}\n        >\n            {cloneAllChildren(children)}\n        </Tag>\n    )\n})\n\nexport default Form\n\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;;;AAGQ;AACI;AACA;AACA;;AAEQ;;;;AAIA;;AAEZ;AACJ;AACJ;AAEA;;AAMY;AAEA;;;AAIA;;AAGA;AACA;AACA;AACA;AACH;AAOb;;"}

package/GalleryPicker/index.cjs

@@ -0,0 +1,88 @@
+"use client";
+'use strict';
+
+var tslib = require('tslib');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var index$3 = require('../FilePicker/index.cjs');
+var index$1 = require('../Alert/index.cjs');
+var index$2 = require('../Box/index.cjs');
+var index$4 = require('../Button/index.cjs');
+var index$6 = require('../IconButton/index.cjs');
+var index = require('../Stack/index.cjs');
+var index$5 = require('../Text/index.cjs');
+var AddPhotoAlternateOutlined = require('@xanui/icons/AddPhotoAlternateOutlined');
+var DeleteOutline = require('@xanui/icons/DeleteOutline');
+var core = require('@xanui/core');
+
+const FileCard = ({ file, onRemove }) => {
+    const url = typeof file === "string" ? file : URL.createObjectURL(file);
+    return (jsxRuntime.jsxs(index$2, { width: 100, height: 100, border: "1px solid", borderColor: 'surface.divider', radius: 1, overflow: "hidden", position: "relative", children: [jsxRuntime.jsx(index$6, { size: 25, color: "danger", sx: {
+                    position: 'absolute',
+                    top: 2,
+                    right: 2,
+                }, onClick: onRemove, children: jsxRuntime.jsx(DeleteOutline, {}) }), jsxRuntime.jsx(index$2, { component: "img", src: url, style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'cover',
+                } })] }));
+};
+const GalleryPicker = React.forwardRef((_a, ref) => {
+    var { title, subtitle, icon, value, maxFileLimits, maxFileSize, onSelect, onDelete, onChange, onError, slotProps } = _a, props = tslib.__rest(_a, ["title", "subtitle", "icon", "value", "maxFileLimits", "maxFileSize", "onSelect", "onDelete", "onChange", "onError", "slotProps"]);
+    const bp = core.useBreakpointProps({
+        title,
+        subtitle,
+        icon
+    });
+    title = bp.title;
+    subtitle = bp.subtitle;
+    icon = bp.icon;
+    const [error, setError] = React.useState(null);
+    maxFileLimits !== null && maxFileLimits !== void 0 ? maxFileLimits : (maxFileLimits = 10);
+    const filePickerProps = Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.filePicker), { multiple: true, accept: ['image/*'], maxFileSize: maxFileSize !== null && maxFileSize !== void 0 ? maxFileSize : 5 * 1024, // 5MB
+        maxFileLimits, onChange: (_files) => {
+            let all = [...((value || [])), ...(_files || [])];
+            if (all.length > maxFileLimits) {
+                setError({
+                    message: `You can upload maximum ${maxFileLimits} files.`,
+                    file: null
+                });
+                setTimeout(() => setError(null), 4000);
+                all = all.slice(0, 10);
+            }
+            if (onSelect && _files)
+                onSelect(_files, value || []);
+            onChange && onChange(all);
+        }, onError: (err) => {
+            setError(err);
+            onError && onError(err);
+            setTimeout(() => setError(null), 4000);
+        } });
+    if (value && value.length > 0) {
+        return (jsxRuntime.jsxs(index, { gap: 2, children: [error && jsxRuntime.jsx(index$1, { variant: "fill", color: "danger", mb: 2, icon: jsxRuntime.jsx(index$2, { component: "img", src: URL.createObjectURL(error.file) }), children: error.message }), jsxRuntime.jsxs(index, { direction: "row", gap: 1, flexWrap: "wrap", children: [value.map((file, index) => (jsxRuntime.jsx(FileCard, { file: file, onRemove: () => {
+                                const newFiles = value.filter((_, i) => i !== index);
+                                onDelete && onDelete(file);
+                                onChange && onChange(newFiles.length > 0 ? newFiles : null);
+                            } }, index))), jsxRuntime.jsxs(index, { width: 100, height: 100, bgcolor: "surface.light", radius: 1, alignItems: "center", overflow: "hidden", border: "1px solid", borderColor: 'surface.divider', children: [jsxRuntime.jsx(index$3, Object.assign({}, filePickerProps, { alignItems: "center", justifyContent: "center", width: "100%", flex: 1, cursor: "pointer", borderBottom: "1px solid", borderColor: "surface.divider", sx: {
+                                        '& svg': {
+                                            opacity: 0.6,
+                                        },
+                                        "&:hover svg": {
+                                            opacity: 1,
+                                        }
+                                    }, children: jsxRuntime.jsx(AddPhotoAlternateOutlined, { fontSize: 28, color: "surface.muted" }) })), jsxRuntime.jsx(index$4, { size: "small", variant: "text", onClick: () => onChange && onChange(null), sx: {
+                                        height: 28,
+                                    }, children: "CLEAR" })] })] })] }));
+    }
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, props, { baseClass: 'gallery-picker', ref: ref, sxr: {
+            display: "flex"
+        }, children: [error && jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.alert, { variant: "fill", color: "danger", mb: 2, icon: jsxRuntime.jsx(index$2, { component: "img", src: URL.createObjectURL(error.file) }), children: error.message })), jsxRuntime.jsx(index$3, Object.assign({}, filePickerProps, { width: "100%", border: "1px dashed", borderColor: 'surface.divider', radius: 2, alignItems: "center", justifyContent: "center", children: jsxRuntime.jsxs(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'gallery-picker-content', sxr: {
+                        display: "flex",
+                        justifyContent: "center",
+                        alignItems: "center",
+                        p: 4,
+                    }, children: [jsxRuntime.jsx(core.Tag, { mb: 2, children: icon || jsxRuntime.jsx(AddPhotoAlternateOutlined, { fontSize: 38, color: "surface.muted" }) }), jsxRuntime.jsx(index$5, { children: title || "Drag & drop images here or click to upload." }), jsxRuntime.jsx(index$5, { variant: "button", color: "surface.muted", children: subtitle || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.` })] })) }))] })));
+});
+
+module.exports = GalleryPicker;
+//# sourceMappingURL=index.cjs.map

package/GalleryPicker/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../src/GalleryPicker/index.tsx"],"sourcesContent":["\"use client\"\nimport React from 'react'\nimport FilePicker, { FilePickerError, FilePickerProps } from '../FilePicker'\nimport Alert, { AlertProps } from \"../Alert\"\nimport Box from \"../Box\"\nimport Button from \"../Button\"\nimport IconButton from \"../IconButton\"\nimport Stack from \"../Stack\"\nimport Text from \"../Text\"\nimport AddPhotoAlternateOutlined from '@xanui/icons/AddPhotoAlternateOutlined'\nimport DeleteOutline from '@xanui/icons/DeleteOutline'\nimport { Tag, TagComponentType, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nconst FileCard = ({ file, onRemove }: { file: File | string, onRemove: () => void }) => {\n   const url = typeof file === \"string\" ? file : URL.createObjectURL(file);\n\n   return (\n      <Box\n         width={100}\n         height={100}\n         border=\"1px solid\"\n         borderColor='surface.divider'\n         radius={1}\n         overflow=\"hidden\"\n         position=\"relative\"\n      >\n         <IconButton\n            size={25}\n            color=\"danger\"\n            sx={{\n               position: 'absolute',\n               top: 2,\n               right: 2,\n            }}\n            onClick={onRemove}\n         >\n            <DeleteOutline />\n         </IconButton>\n         <Box\n            component=\"img\"\n            src={url}\n            style={{\n               width: '100%',\n               height: '100%',\n               objectFit: 'cover',\n            }}\n         />\n      </Box>\n   )\n}\n\n\nexport type GalleryPickerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"children\"> & {\n   title?: useBreakpointPropsType<string>;\n   subtitle?: useBreakpointPropsType<string>;\n   icon?: useBreakpointPropsType<React.ReactNode>;\n   value?: (File | string)[] | null;\n   maxFileSize?: number; // in kb\n   maxFileLimits?: number;\n   onSelect?: (files: File[], oldFiles: (File | string)[] | null) => void;\n   onDelete?: (file: File | string) => void;\n   onChange?: (files: (File | string)[] | null) => void;\n   onError?: (error: FilePickerError) => void;\n\n   slotProps?: {\n      alert?: Omit<AlertProps, \"children\" | \"variant\" | \"color\" | \"icon\">;\n      filePicker?: Omit<FilePickerProps, \"multiple\" | \"accept\" | \"onChange\">;\n      content?: Omit<TagProps, \"children\">;\n   }\n}\n\nconst GalleryPicker = React.forwardRef(<T extends TagComponentType = \"div\">({ title, subtitle, icon, value, maxFileLimits, maxFileSize, onSelect, onDelete, onChange, onError, slotProps, ...props }: GalleryPickerProps, ref: React.Ref<T>) => {\n\n   const bp: any = useBreakpointProps({\n      title,\n      subtitle,\n      icon\n   })\n\n   title = bp.title\n   subtitle = bp.subtitle\n   icon = bp.icon\n\n   const [error, setError] = React.useState<FilePickerError | null>(null);\n   maxFileLimits ??= 10\n   const filePickerProps = {\n      ...slotProps?.filePicker,\n      multiple: true,\n      accept: ['image/*'],\n      maxFileSize: maxFileSize ?? 5 * 1024, // 5MB\n      maxFileLimits,\n      onChange: (_files: File[] | null) => {\n         let all = [...((value || [])), ...(_files || [])]\n         if (all.length > maxFileLimits) {\n            setError({\n               message: `You can upload maximum ${maxFileLimits} files.`,\n               file: null as any\n            });\n            setTimeout(() => setError(null), 4000);\n            all = all.slice(0, 10);\n         }\n         if (onSelect && _files) onSelect(_files, value || [])\n         onChange && onChange(all);\n      },\n      onError: (err: FilePickerError) => {\n         setError(err);\n         onError && onError(err)\n         setTimeout(() => setError(null), 4000);\n      },\n   }\n\n   if (value && value.length > 0) {\n      return (\n         <Stack gap={2}>\n            {error && <Alert\n               variant={\"fill\"}\n               color=\"danger\"\n               mb={2}\n               icon={<Box\n                  component={\"img\"}\n                  src={URL.createObjectURL(error.file)}\n               />}\n            >\n               {error.message}\n            </Alert>}\n            <Stack direction=\"row\" gap={1} flexWrap=\"wrap\">\n               {value.map((file, index) => (\n                  <FileCard\n                     key={index}\n                     file={file}\n                     onRemove={() => {\n                        const newFiles = value.filter((_, i) => i !== index);\n                        onDelete && onDelete(file)\n                        onChange && onChange(newFiles.length > 0 ? newFiles : null);\n                     }}\n                  />\n               ))}\n               <Stack\n                  width={100}\n                  height={100}\n                  bgcolor=\"surface.light\"\n                  radius={1}\n                  alignItems=\"center\"\n                  overflow={\"hidden\"}\n                  border=\"1px solid\"\n                  borderColor='surface.divider'\n               >\n                  <FilePicker\n                     {...filePickerProps}\n                     alignItems=\"center\"\n                     justifyContent=\"center\"\n                     width={\"100%\"}\n                     flex={1}\n                     cursor={\"pointer\"}\n                     borderBottom={\"1px solid\"}\n                     borderColor=\"surface.divider\"\n                     sx={{\n                        '& svg': {\n                           opacity: 0.6,\n                        },\n                        \"&:hover svg\": {\n                           opacity: 1,\n                        }\n                     }}\n                  >\n                     <AddPhotoAlternateOutlined fontSize={28} color=\"surface.muted\" />\n                  </FilePicker>\n                  <Button\n                     size=\"small\"\n                     variant={\"text\"}\n                     onClick={() => onChange && onChange(null)}\n                     sx={{\n                        height: 28,\n                     }}\n                  >CLEAR</Button>\n               </Stack>\n            </Stack>\n\n         </Stack>\n      )\n   }\n   return (\n      <Tag\n         {...props}\n         baseClass='gallery-picker'\n         ref={ref}\n         sxr={{\n            display: \"flex\"\n         }}\n      >\n         {error && <Alert\n            {...slotProps?.alert}\n            variant={\"fill\"}\n            color=\"danger\"\n            mb={2}\n            icon={<Box\n               component={\"img\"}\n               src={URL.createObjectURL(error.file)}\n            />}\n         >\n            {error.message}\n         </Alert>}\n         <FilePicker\n            {...filePickerProps}\n            width=\"100%\"\n            border=\"1px dashed\"\n            borderColor='surface.divider'\n            radius={2}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n         >\n            <Tag\n               {...slotProps?.content}\n               baseClass='gallery-picker-content'\n               sxr={{\n                  display: \"flex\",\n                  justifyContent: \"center\",\n                  alignItems: \"center\",\n                  p: 4,\n               }}\n            >\n               <Tag mb={2}>\n                  {(icon as any) || <AddPhotoAlternateOutlined fontSize={38} color=\"surface.muted\" />}\n               </Tag>\n               <Text>{(title as any) || \"Drag & drop images here or click to upload.\"}</Text>\n               <Text variant=\"button\" color=\"surface.muted\">\n                  {\n                     (subtitle as any) || `Images only · Max ${filePickerProps.maxFileSize / 1024}MB each · Up to ${filePickerProps.maxFileLimits} files.`\n                  }\n               </Text>\n            </Tag>\n         </FilePicker>\n      </Tag>\n   )\n})\n\nexport default GalleryPicker"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAcA;AACG;;AAgBY;AACA;AACA;;AAUA;AACA;AACA;;AAKf;AAsBA;;;;;;AAMI;AAED;AACA;AACA;AAEA;;AAEA;AAKG;AAEG;AACA;AACG;;AAEG;AACF;;;;;AAIoB;AACxB;AACH;;AAGG;;AAEH;;AAIA;AAmBkB;AACA;AACA;AACH;AAuBG;AACG;AACF;AACD;AACG;AACF;AACH;AASE;AACF;;AAQnB;AAMS;;AA4BM;AACA;AACA;AACA;;AAgBlB;;"}

package/GalleryPicker/index.d.ts

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { FilePickerError, FilePickerProps } from '../FilePicker/index.js';
+import { AlertProps } from '../Alert/index.js';
+import { TagComponentType, TagProps, useBreakpointPropsType } from '@xanui/core';
+
+type GalleryPickerProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "children"> & {
+    title?: useBreakpointPropsType<string>;
+    subtitle?: useBreakpointPropsType<string>;
+    icon?: useBreakpointPropsType<React__default.ReactNode>;
+    value?: (File | string)[] | null;
+    maxFileSize?: number;
+    maxFileLimits?: number;
+    onSelect?: (files: File[], oldFiles: (File | string)[] | null) => void;
+    onDelete?: (file: File | string) => void;
+    onChange?: (files: (File | string)[] | null) => void;
+    onError?: (error: FilePickerError) => void;
+    slotProps?: {
+        alert?: Omit<AlertProps, "children" | "variant" | "color" | "icon">;
+        filePicker?: Omit<FilePickerProps, "multiple" | "accept" | "onChange">;
+        content?: Omit<TagProps, "children">;
+    };
+};
+declare const GalleryPicker: React__default.ForwardRefExoticComponent<Omit<GalleryPickerProps<"div">, "ref"> & React__default.RefAttributes<"symbol" | "object" | "cite" | "data" | "form" | "label" | "pattern" | "span" | "summary" | "slot" | "style" | "title" | "div" | "filter" | "small" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "big" | "text" | "button" | "p" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "canvas" | "caption" | "center" | "code" | "col" | "colgroup" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "search" | "script" | "section" | "select" | "source" | "strong" | "sub" | "sup" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | React__default.ComponentClass<any, any> | React__default.FunctionComponent<any>>>;
+
+export { GalleryPicker as default };
+export type { GalleryPickerProps };