@xanui/ui 1.0.0

package/Datatable/index.d.ts

@@ -0,0 +1,71 @@
+import React, { ReactElement } from 'react';
+import { TableColumnProps } from '../TableCell/index.js';
+import { IconButtonProps } from '../IconButton/index.js';
+import { InputProps } from '../Input/index.js';
+import { TablePaginationProps } from '../TablePagination/index.js';
+import { TableProps } from '../Table/index.js';
+
+type ColumnType = (Omit<TableColumnProps, "children"> & {
+    label: string;
+    field?: string;
+});
+type DataTableDefaultRow = {
+    id?: number;
+    [key: string | number]: any;
+};
+type RowActionType = Omit<IconButtonProps, "children"> & {
+    label: string;
+    icon: ReactElement;
+};
+type TabsProps = {
+    label: string;
+    value?: string;
+};
+type DatatableFilter = {
+    label: string;
+    value: string | number;
+};
+type DatatableProps = {
+    rows: DataTableDefaultRow[];
+    columns: ColumnType[];
+    tabs?: TabsProps[];
+    defaultActiveTab?: string;
+    rowAction?: (props: {
+        row: DataTableDefaultRow | null;
+        state: State;
+    }) => RowActionType[];
+    renderRow?: (row: DataTableDefaultRow, state: State) => DataTableDefaultRow;
+    disableRow?: (row: DataTableDefaultRow, state: State) => boolean | void;
+    totalCount?: number;
+    page?: number;
+    perpages?: number[];
+    getState?: (state: State) => void;
+    onSearch?: (text: string, state: State) => void;
+    onTabChange?: (tab: string, state: State) => void;
+    filters?: {
+        [key: string]: DatatableFilter[];
+    };
+    fixedHeader?: boolean;
+    disablePagination?: boolean;
+    disableSearch?: boolean;
+    disableSelect?: boolean;
+    slotProps?: {
+        search?: Omit<InputProps, "value" | "onChange">;
+        table?: Omit<TableProps, 'children'>;
+        pagination?: TablePaginationProps;
+    };
+};
+type State = {
+    selectedIds: number[];
+    selectAll: boolean;
+    paginationState: {
+        page: number;
+        perpage: number;
+    };
+    activeTab: string;
+    search: string;
+};
+declare const DataTable: React.ForwardRefExoticComponent<DatatableProps & React.RefAttributes<HTMLDivElement>>;
+
+export { DataTable as default };
+export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, RowActionType, State, TabsProps };

package/Datatable/index.js

@@ -0,0 +1,35 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),React=require('react'),index=require('../ViewBox/index.js'),core=require('@xanui/core'),SelectedBox=require('./SelectedBox.js'),Table=require('./Table.js'),FilterBox=require('./FilterBox.js'),index$2=require('../TablePagination/index.js'),index$1=require('../Stack/index.js');const DataTable = React.forwardRef((props, ref) => {
+    let [_props] = core.useInterface("Datatable", props, {});
+    let { rows, tabs, defaultActiveTab, totalCount, page, perpages, getState, fixedHeader, disablePagination, slotProps, } = _props;
+    const [state, setState] = React.useState({
+        selectedIds: [],
+        selectAll: false,
+        paginationState: {
+            page: page || 1,
+            perpage: perpages ? perpages[0] : 30
+        },
+        activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : "",
+        search: ""
+    });
+    const update = (s) => {
+        setState(o => {
+            let ns = Object.assign(Object.assign({}, o), s);
+            getState && getState(ns);
+            return ns;
+        });
+    };
+    return (jsxRuntime.jsxs(index.default, Object.assign({ baseClass: 'datatable', ref: ref, height: "100%", sx: {
+            '& thead': fixedHeader ? {
+                position: "sticky",
+                top: 0,
+                bgcolor: "background.primary",
+                zIndex: 1
+            } : {},
+        }, startContent: (jsxRuntime.jsxs(core.Tag, Object.assign({ baseClass: 'datatable-header', sxr: {
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between"
+            } }, { children: [jsxRuntime.jsx(SelectedBox.default, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(FilterBox.default, Object.assign({}, _props, { update: update, state: state }))] }))) }, { children: [jsxRuntime.jsx(Table.default, Object.assign({}, _props, { update: update, state: state })), jsxRuntime.jsx(index$1.default, Object.assign({ p: 1, alignItems: "flex-end" }, { children: !disablePagination && jsxRuntime.jsx(index$2.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.paginationState.page, perpages: perpages, onChange: (state) => {
+                        update({ paginationState: state });
+                    } })) }))] })));
+});exports.default=DataTable;//# sourceMappingURL=index.js.map

package/Datatable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react'\nimport { TableColumnProps } from '../TableCell'\nimport { IconButtonProps } from '../IconButton'\nimport { InputProps } from '../Input'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationProps } from '../TablePagination'\nimport Stack from '../Stack'\nimport { TableProps } from '../Table'\n\n\nexport type ColumnType = (Omit<TableColumnProps, \"children\"> & { label: string, field?: string })\nexport type DataTableDefaultRow = { id?: number, [key: string | number]: any }\nexport type RowActionType = Omit<IconButtonProps, \"children\"> & {\n    label: string;\n    icon: ReactElement;\n}\nexport type TabsProps = {\n    label: string;\n    value?: string\n}\nexport type DatatableFilter = {\n    label: string;\n    value: string | number\n}\n\nexport type DatatableProps = {\n    rows: DataTableDefaultRow[];\n    columns: ColumnType[];\n    tabs?: TabsProps[];\n    defaultActiveTab?: string;\n    rowAction?: (props: { row: DataTableDefaultRow | null, state: State }) => RowActionType[];\n    renderRow?: (row: DataTableDefaultRow, state: State) => DataTableDefaultRow;\n    disableRow?: (row: DataTableDefaultRow, state: State) => boolean | void;\n    totalCount?: number;\n    page?: number;\n    perpages?: number[];\n    getState?: (state: State) => void;\n    onSearch?: (text: string, state: State) => void;\n    onTabChange?: (tab: string, state: State) => void;\n    filters?: { [key: string]: DatatableFilter[] }\n    fixedHeader?: boolean;\n    disablePagination?: boolean;\n    disableSearch?: boolean;\n    disableSelect?: boolean;\n    slotProps?: {\n        search?: Omit<InputProps, \"value\" | \"onChange\">;\n        table?: Omit<TableProps, 'children'>;\n        pagination?: TablePaginationProps;\n    }\n}\n\nexport type State = {\n    selectedIds: number[];\n    selectAll: boolean;\n    paginationState: {\n        page: number,\n        perpage: number\n    },\n    activeTab: string;\n    search: string;\n}\n\nexport type DatatablePropsWithState = DatatableProps & {\n    state: State,\n    update: (state: Partial<State>) => void;\n}\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        defaultActiveTab,\n        totalCount,\n        page,\n        perpages,\n        getState,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<State>({\n        selectedIds: [],\n        selectAll: false,\n        paginationState: {\n            page: page || 1,\n            perpage: perpages ? perpages[0] : 30\n        },\n        activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: \"\"\n    })\n\n    const update = (s: Partial<State>) => {\n        setState(o => {\n            let ns = { ...o, ...s }\n            getState && getState(ns)\n            return ns\n        })\n    }\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.paginationState.page}\n                    perpages={perpages}\n                    onChange={(state: any) => {\n                        update({ paginationState: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":["useInterface","useState","_jsxs","ViewBox","Tag","_jsx","SelectedBox","FilterBox","TableArea","Stack","TablePagination"],"mappings":"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"}

package/Datatable/index.mjs

@@ -0,0 +1,35 @@
+import {jsxs,jsx}from'react/jsx-runtime';import React,{useState}from'react';import ViewBox from'../ViewBox/index.mjs';import {useInterface,Tag}from'@xanui/core';import SelectedBox from'./SelectedBox.mjs';import TableArea from'./Table.mjs';import FilterBox from'./FilterBox.mjs';import TablePagination from'../TablePagination/index.mjs';import Stack from'../Stack/index.mjs';const DataTable = React.forwardRef((props, ref) => {
+    let [_props] = useInterface("Datatable", props, {});
+    let { rows, tabs, defaultActiveTab, totalCount, page, perpages, getState, fixedHeader, disablePagination, slotProps, } = _props;
+    const [state, setState] = useState({
+        selectedIds: [],
+        selectAll: false,
+        paginationState: {
+            page: page || 1,
+            perpage: perpages ? perpages[0] : 30
+        },
+        activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : "",
+        search: ""
+    });
+    const update = (s) => {
+        setState(o => {
+            let ns = Object.assign(Object.assign({}, o), s);
+            getState && getState(ns);
+            return ns;
+        });
+    };
+    return (jsxs(ViewBox, Object.assign({ baseClass: 'datatable', ref: ref, height: "100%", sx: {
+            '& thead': fixedHeader ? {
+                position: "sticky",
+                top: 0,
+                bgcolor: "background.primary",
+                zIndex: 1
+            } : {},
+        }, startContent: (jsxs(Tag, Object.assign({ baseClass: 'datatable-header', sxr: {
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between"
+            } }, { children: [jsx(SelectedBox, Object.assign({}, _props, { update: update, state: state })), jsx(FilterBox, Object.assign({}, _props, { update: update, state: state }))] }))) }, { children: [jsx(TableArea, Object.assign({}, _props, { update: update, state: state })), jsx(Stack, Object.assign({ p: 1, alignItems: "flex-end" }, { children: !disablePagination && jsx(TablePagination, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.pagination, { total: totalCount || rows.length, page: state.paginationState.page, perpages: perpages, onChange: (state) => {
+                        update({ paginationState: state });
+                    } })) }))] })));
+});export{DataTable as default};//# sourceMappingURL=index.mjs.map

package/Datatable/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react'\nimport { TableColumnProps } from '../TableCell'\nimport { IconButtonProps } from '../IconButton'\nimport { InputProps } from '../Input'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationProps } from '../TablePagination'\nimport Stack from '../Stack'\nimport { TableProps } from '../Table'\n\n\nexport type ColumnType = (Omit<TableColumnProps, \"children\"> & { label: string, field?: string })\nexport type DataTableDefaultRow = { id?: number, [key: string | number]: any }\nexport type RowActionType = Omit<IconButtonProps, \"children\"> & {\n    label: string;\n    icon: ReactElement;\n}\nexport type TabsProps = {\n    label: string;\n    value?: string\n}\nexport type DatatableFilter = {\n    label: string;\n    value: string | number\n}\n\nexport type DatatableProps = {\n    rows: DataTableDefaultRow[];\n    columns: ColumnType[];\n    tabs?: TabsProps[];\n    defaultActiveTab?: string;\n    rowAction?: (props: { row: DataTableDefaultRow | null, state: State }) => RowActionType[];\n    renderRow?: (row: DataTableDefaultRow, state: State) => DataTableDefaultRow;\n    disableRow?: (row: DataTableDefaultRow, state: State) => boolean | void;\n    totalCount?: number;\n    page?: number;\n    perpages?: number[];\n    getState?: (state: State) => void;\n    onSearch?: (text: string, state: State) => void;\n    onTabChange?: (tab: string, state: State) => void;\n    filters?: { [key: string]: DatatableFilter[] }\n    fixedHeader?: boolean;\n    disablePagination?: boolean;\n    disableSearch?: boolean;\n    disableSelect?: boolean;\n    slotProps?: {\n        search?: Omit<InputProps, \"value\" | \"onChange\">;\n        table?: Omit<TableProps, 'children'>;\n        pagination?: TablePaginationProps;\n    }\n}\n\nexport type State = {\n    selectedIds: number[];\n    selectAll: boolean;\n    paginationState: {\n        page: number,\n        perpage: number\n    },\n    activeTab: string;\n    search: string;\n}\n\nexport type DatatablePropsWithState = DatatableProps & {\n    state: State,\n    update: (state: Partial<State>) => void;\n}\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n    let [_props] = useInterface<any>(\"Datatable\", props, {})\n    let {\n        rows,\n        tabs,\n        defaultActiveTab,\n        totalCount,\n        page,\n        perpages,\n        getState,\n\n        fixedHeader,\n        disablePagination,\n        slotProps,\n    } = _props\n\n    const [state, setState] = useState<State>({\n        selectedIds: [],\n        selectAll: false,\n        paginationState: {\n            page: page || 1,\n            perpage: perpages ? perpages[0] : 30\n        },\n        activeTab: tabs ? (defaultActiveTab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n        search: \"\"\n    })\n\n    const update = (s: Partial<State>) => {\n        setState(o => {\n            let ns = { ...o, ...s }\n            getState && getState(ns)\n            return ns\n        })\n    }\n\n    return (\n        <ViewBox\n            baseClass='datatable'\n            ref={ref as any}\n            height=\"100%\"\n            sx={{\n                '& thead': fixedHeader ? {\n                    position: \"sticky\",\n                    top: 0,\n                    bgcolor: \"background.primary\",\n                    zIndex: 1\n                } : {},\n            }}\n            startContent={(\n                <Tag\n                    baseClass='datatable-header'\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"row\",\n                        justifyContent: \"space-between\"\n                    }}\n                >\n                    <SelectedBox {..._props} update={update} state={state} />\n                    <FilterBox {..._props} update={update} state={state} />\n                </Tag>\n            )}\n        >\n            <TableArea\n                {..._props}\n                update={update}\n                state={state}\n            />\n            <Stack\n                p={1}\n                alignItems=\"flex-end\"\n            >\n                {!disablePagination && <TablePagination\n                    {...slotProps?.pagination}\n                    total={totalCount || rows.length}\n                    page={state.paginationState.page}\n                    perpages={perpages}\n                    onChange={(state: any) => {\n                        update({ paginationState: state })\n                    }}\n                />}\n            </Stack>\n        </ViewBox>\n    )\n})\n\nexport default DataTable"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/Divider/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
+
+type DividerProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "color"> & {
+    direction?: useBreakpointPropsType<"verticle" | "horizental">;
+    color?: useBreakpointPropsType<ColorTemplateColors>;
+    size?: useBreakpointPropsType<number>;
+};
+declare const Divider: React.ForwardRefExoticComponent<Omit<DividerProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { Divider as default };
+export type { DividerProps };

package/Divider/index.js

@@ -0,0 +1,21 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Divider = React.forwardRef((_a, ref) => {
+    var _b, _c, _d;
+    var { children, direction, color, size } = _a, rest = tslib.__rest(_a, ["children", "direction", "color", "size"]);
+    const _p = {};
+    if (direction)
+        _p.direction = direction;
+    if (color)
+        _p.color = color;
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    direction = (_b = p.direction) !== null && _b !== void 0 ? _b : "horizental";
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : "default";
+    size = (_d = p.size) !== null && _d !== void 0 ? _d : 1;
+    let isHori = direction === 'horizental';
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { baseClass: 'divider', sxr: {
+            width: isHori ? "100%" : size,
+            height: isHori ? size : "100%",
+            bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
+        }, ref: ref }, { children: children })));
+});exports.default=Divider;//# sourceMappingURL=index.js.map

package/Divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, ColorTemplateColors, 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<ColorTemplateColors>;\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":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":"4LAWA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;;AAAvF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,CAA6C,CAAF;IAC7G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACvC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAElB,IAAA,IAAI,MAAM,GAAG,SAAS,KAAK,YAAY;IAEvC,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE;YACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;YAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;AAC9B,YAAA,OAAO,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,oBAAA,CAAsB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AAC/E,SAAA,EACD,GAAG,EAAE,GAAG,gBACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}

package/Divider/index.mjs

@@ -0,0 +1,21 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {useBreakpointProps,Tag}from'@xanui/core';const Divider = React.forwardRef((_a, ref) => {
+    var _b, _c, _d;
+    var { children, direction, color, size } = _a, rest = __rest(_a, ["children", "direction", "color", "size"]);
+    const _p = {};
+    if (direction)
+        _p.direction = direction;
+    if (color)
+        _p.color = color;
+    if (size)
+        _p.size = size;
+    const p = useBreakpointProps(_p);
+    direction = (_b = p.direction) !== null && _b !== void 0 ? _b : "horizental";
+    color = (_c = p.color) !== null && _c !== void 0 ? _c : "default";
+    size = (_d = p.size) !== null && _d !== void 0 ? _d : 1;
+    let isHori = direction === 'horizental';
+    return (jsx(Tag, Object.assign({}, rest, { baseClass: 'divider', sxr: {
+            width: isHori ? "100%" : size,
+            height: isHori ? size : "100%",
+            bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,
+        }, ref: ref }, { children: children })));
+});export{Divider as default};//# sourceMappingURL=index.mjs.map

package/Divider/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, ColorTemplateColors, 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<ColorTemplateColors>;\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":["_jsx"],"mappings":"yIAWA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA8D,EAAE,GAAmB,KAAI;;AAAvF,IAAA,IAAA,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAA,GAAA,EAA4B,EAAvB,IAAI,GAAA,MAAA,CAAA,EAAA,EAA3C,CAAA,UAAA,EAAA,WAAA,EAAA,OAAA,EAAA,MAAA,CAA6C,CAAF;IAC7G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,SAAS;AAAE,QAAA,EAAE,CAAC,SAAS,GAAG,SAAS;AACvC,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,IAAI;AAAE,QAAA,EAAE,CAAC,IAAI,GAAG,IAAI;AACxB,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,SAAS,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACvC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,SAAS;AAC5B,IAAA,IAAI,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,IAAI,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,CAAC;AAElB,IAAA,IAAI,MAAM,GAAG,SAAS,KAAK,YAAY;IAEvC,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE;YACD,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;YAC7B,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM;AAC9B,YAAA,OAAO,EAAE,KAAK,KAAK,SAAS,GAAG,CAAA,oBAAA,CAAsB,GAAG,CAAA,EAAG,KAAK,CAAA,UAAA,CAAY;AAC/E,SAAA,EACD,GAAG,EAAE,GAAG,gBACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC"}

package/Drawer/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ReactElement } from 'react';
+import { TagProps, useBreakpointPropsType } from '@xanui/core';
+import { LayerProps } from '../Layer/index.js';
+
+type DrawerChildrenType = ReactNode | ReactElement | string;
+type DrawerProps = Omit<TagProps, "children" | "size"> & {
+    children?: DrawerChildrenType;
+    placement?: useBreakpointPropsType<"left" | "right" | "bottom" | "top">;
+    open?: boolean;
+    size?: useBreakpointPropsType<number | "small" | "medium" | "large">;
+    onClickOutside?: () => void;
+    slotProps?: {
+        root?: TagProps<"div">;
+        layer?: Omit<LayerProps, 'id' | 'children' | 'open' | 'transition'>;
+    };
+};
+declare const Drawer: {
+    ({ children, open, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element;
+    open(content: DrawerChildrenType, props?: Omit<DrawerProps, "children" | "open">): void;
+    close(): void;
+};
+
+export { Drawer as default };
+export type { DrawerChildrenType, DrawerProps };

package/Drawer/index.js

@@ -0,0 +1,57 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),index=require('../Layer/index.js'),index$1=require('../ClickOutside/index.js');const MainView = (_a) => {
+    var _b;
+    var { children, placement, open, size, slotProps, onClickOutside } = _a, rest = tslib.__rest(_a, ["children", "placement", "open", "size", "slotProps", "onClickOutside"]);
+    const _p = {};
+    if (placement)
+        _p.placement = placement;
+    if (size)
+        _p.size = size;
+    const p = core.useBreakpointProps(_p);
+    placement = (_b = p.placement) !== null && _b !== void 0 ? _b : 'left';
+    size = p.size || "medium";
+    let isSide = placement === 'left' || placement === 'right';
+    let sizes = {
+        small: 200,
+        medium: 300,
+        large: 400
+    };
+    let _size = sizes[size] || size;
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            direction: isSide ? "row" : "column",
+            justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
+        } }, { children: jsxRuntime.jsx(index$1.default, Object.assign({ onClickOutside: onClickOutside || (() => { }) }, { children: jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
+                    width: isSide ? _size : "100%",
+                    height: isSide ? "100%" : _size,
+                    bgcolor: "background.primary",
+                    shadow: 10
+                }, baseClass: 'drawer-content' }, { children: children })) })) })));
+};
+let drawerId = "_" + Math.random().toString(32).substring(2);
+const getVariant = (placement) => {
+    switch (placement) {
+        case "right":
+            return "fadeLeft";
+        case "top":
+            return "fadeDown";
+        case "bottom":
+            return "fadeUp";
+        default:
+            return "fadeRight";
+    }
+};
+const Drawer = (_a) => {
+    var _b;
+    var { children, open } = _a, rest = tslib.__rest(_a, ["children", "open"]);
+    return (jsxRuntime.jsx(index.default, Object.assign({}, (_b = rest === null || rest === void 0 ? void 0 : rest.slotProps) === null || _b === void 0 ? void 0 : _b.layer, { open: open !== null && open !== void 0 ? open : true, transition: getVariant(rest.placement) }, { children: jsxRuntime.jsx(MainView, Object.assign({}, rest, { open: true }, { children: children })) })));
+};
+Drawer.open = (content, props) => {
+    let { placement, slotProps } = props || {};
+    placement !== null && placement !== void 0 ? placement : (placement = 'left');
+    index.default.open(drawerId, jsxRuntime.jsx(MainView, Object.assign({ onClickOutside: () => index.default.close(drawerId) }, props, { open: true }, { children: content })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { transition: getVariant(placement) }));
+};
+Drawer.close = () => {
+    index.default.close(drawerId);
+};exports.default=Drawer;//# sourceMappingURL=index.js.map

package/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { ReactElement, ReactNode } from 'react';\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside from '../ClickOutside';\n\n\nexport type DrawerChildrenType = ReactNode | ReactElement | string\n\nexport type DrawerProps = Omit<TagProps, \"children\" | \"size\"> & {\n    children?: DrawerChildrenType;\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    open?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        root?: TagProps<\"div\">;\n        layer?: Omit<LayerProps, 'id' | 'children' | 'open' | 'transition'>;\n    }\n}\n\nconst MainView = ({ children, placement, open, size, slotProps, onClickOutside, ...rest }: 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: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Tag\n            {...slotProps?.root}\n            baseClass='drawer'\n            sxr={{\n                width: \"100%\",\n                height: \"100%\",\n                display: \"flex\",\n                direction: isSide ? \"row\" : \"column\" as any,\n                justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n            }}\n        >\n            <ClickOutside onClickOutside={onClickOutside || (() => { })}>\n                <Tag\n                    {...rest}\n                    sxr={{\n                        width: isSide ? _size : \"100%\",\n                        height: isSide ? \"100%\" : _size,\n                        bgcolor: \"background.primary\",\n                        shadow: 10\n                    }}\n                    baseClass='drawer-content'\n                >\n                    {children}\n                </Tag>\n            </ClickOutside>\n        </Tag>\n    )\n}\n\nlet drawerId = \"_\" + Math.random().toString(32).substring(2)\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, open, ...rest }: DrawerProps) => {\n    return (\n        <Layer\n            {...rest?.slotProps?.layer}\n            open={open ?? true}\n            transition={getVariant(rest.placement)}\n        >\n            <MainView {...rest} open={true}>{children}</MainView>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (content: DrawerChildrenType, props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    let { placement, slotProps } = props || {}\n    placement ??= 'left'\n    Layer.open(drawerId, <MainView\n        onClickOutside={() => Layer.close(drawerId)}\n        {...props}\n        open={true}\n    >{content}</MainView>, {\n        ...slotProps?.layer,\n        transition: getVariant(placement)\n    })\n}\n\nDrawer.close = () => {\n    Layer.close(drawerId)\n}\n\nexport default Drawer"],"names":["__rest","useBreakpointProps","_jsx","Tag","ClickOutside","Layer"],"mappings":"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"}

package/Drawer/index.mjs

@@ -0,0 +1,57 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import {useBreakpointProps,Tag}from'@xanui/core';import Layer from'../Layer/index.mjs';import ClickOutside from'../ClickOutside/index.mjs';const MainView = (_a) => {
+    var _b;
+    var { children, placement, open, size, slotProps, onClickOutside } = _a, rest = __rest(_a, ["children", "placement", "open", "size", "slotProps", "onClickOutside"]);
+    const _p = {};
+    if (placement)
+        _p.placement = placement;
+    if (size)
+        _p.size = size;
+    const p = useBreakpointProps(_p);
+    placement = (_b = p.placement) !== null && _b !== void 0 ? _b : 'left';
+    size = p.size || "medium";
+    let isSide = placement === 'left' || placement === 'right';
+    let sizes = {
+        small: 200,
+        medium: 300,
+        large: 400
+    };
+    let _size = sizes[size] || size;
+    return (jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { baseClass: 'drawer', sxr: {
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            direction: isSide ? "row" : "column",
+            justifyContent: placement === 'left' || placement === 'top' ? "flex-start" : "flex-end"
+        } }, { children: jsx(ClickOutside, Object.assign({ onClickOutside: onClickOutside || (() => { }) }, { children: jsx(Tag, Object.assign({}, rest, { sxr: {
+                    width: isSide ? _size : "100%",
+                    height: isSide ? "100%" : _size,
+                    bgcolor: "background.primary",
+                    shadow: 10
+                }, baseClass: 'drawer-content' }, { children: children })) })) })));
+};
+let drawerId = "_" + Math.random().toString(32).substring(2);
+const getVariant = (placement) => {
+    switch (placement) {
+        case "right":
+            return "fadeLeft";
+        case "top":
+            return "fadeDown";
+        case "bottom":
+            return "fadeUp";
+        default:
+            return "fadeRight";
+    }
+};
+const Drawer = (_a) => {
+    var _b;
+    var { children, open } = _a, rest = __rest(_a, ["children", "open"]);
+    return (jsx(Layer, Object.assign({}, (_b = rest === null || rest === void 0 ? void 0 : rest.slotProps) === null || _b === void 0 ? void 0 : _b.layer, { open: open !== null && open !== void 0 ? open : true, transition: getVariant(rest.placement) }, { children: jsx(MainView, Object.assign({}, rest, { open: true }, { children: children })) })));
+};
+Drawer.open = (content, props) => {
+    let { placement, slotProps } = props || {};
+    placement !== null && placement !== void 0 ? placement : (placement = 'left');
+    Layer.open(drawerId, jsx(MainView, Object.assign({ onClickOutside: () => Layer.close(drawerId) }, props, { open: true }, { children: content })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { transition: getVariant(placement) }));
+};
+Drawer.close = () => {
+    Layer.close(drawerId);
+};export{Drawer as default};//# sourceMappingURL=index.mjs.map

package/Drawer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\nimport { ReactElement, ReactNode } from 'react';\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Layer, { LayerProps } from '../Layer';\nimport ClickOutside from '../ClickOutside';\n\n\nexport type DrawerChildrenType = ReactNode | ReactElement | string\n\nexport type DrawerProps = Omit<TagProps, \"children\" | \"size\"> & {\n    children?: DrawerChildrenType;\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\n    open?: boolean;\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    onClickOutside?: () => void;\n    slotProps?: {\n        root?: TagProps<\"div\">;\n        layer?: Omit<LayerProps, 'id' | 'children' | 'open' | 'transition'>;\n    }\n}\n\nconst MainView = ({ children, placement, open, size, slotProps, onClickOutside, ...rest }: 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: 200,\n        medium: 300,\n        large: 400\n    }\n\n    let _size = sizes[size as any] || size\n\n    return (\n        <Tag\n            {...slotProps?.root}\n            baseClass='drawer'\n            sxr={{\n                width: \"100%\",\n                height: \"100%\",\n                display: \"flex\",\n                direction: isSide ? \"row\" : \"column\" as any,\n                justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\n            }}\n        >\n            <ClickOutside onClickOutside={onClickOutside || (() => { })}>\n                <Tag\n                    {...rest}\n                    sxr={{\n                        width: isSide ? _size : \"100%\",\n                        height: isSide ? \"100%\" : _size,\n                        bgcolor: \"background.primary\",\n                        shadow: 10\n                    }}\n                    baseClass='drawer-content'\n                >\n                    {children}\n                </Tag>\n            </ClickOutside>\n        </Tag>\n    )\n}\n\nlet drawerId = \"_\" + Math.random().toString(32).substring(2)\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, open, ...rest }: DrawerProps) => {\n    return (\n        <Layer\n            {...rest?.slotProps?.layer}\n            open={open ?? true}\n            transition={getVariant(rest.placement)}\n        >\n            <MainView {...rest} open={true}>{children}</MainView>\n        </Layer>\n    )\n}\n\n\nDrawer.open = (content: DrawerChildrenType, props?: Omit<DrawerProps, \"children\" | \"open\">) => {\n    let { placement, slotProps } = props || {}\n    placement ??= 'left'\n    Layer.open(drawerId, <MainView\n        onClickOutside={() => Layer.close(drawerId)}\n        {...props}\n        open={true}\n    >{content}</MainView>, {\n        ...slotProps?.layer,\n        transition: getVariant(placement)\n    })\n}\n\nDrawer.close = () => {\n    Layer.close(drawerId)\n}\n\nexport default Drawer"],"names":["_jsx"],"mappings":"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"}

package/Form/index.d.ts

@@ -0,0 +1,8 @@
+import React 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>>;
+
+export { Form as default };
+export type { FormProps };

package/Form/index.js

@@ -0,0 +1,34 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const Form = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    let formRef = ref || React.useRef(null);
+    const cloneAllChildren = (childs) => {
+        return React.Children.map(childs, (child) => {
+            let c = child;
+            if (React.isValidElement(child) && c.props.name) {
+                const form = formRef.current;
+                const formData = new FormData(form);
+                return React.cloneElement(child, {
+                    onChange: () => {
+                        console.log(formData.get(c.props.name));
+                    },
+                    value: formData.get(c.props.name),
+                    children: cloneAllChildren(c.props.children),
+                });
+            }
+            return child;
+        });
+    };
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ component: "form" }, rest, { onSubmit: (e) => {
+            e.preventDefault();
+            const form = formRef.current;
+            const formData = new FormData(form);
+            formData.forEach((value, key) => {
+                console.log(key + ": " + value);
+            });
+        }, sxr: {
+            bgcolor: "default",
+            p: 2,
+            maxWidth: 400,
+            radius: 1,
+        }, baseClass: 'form', ref: formRef }, { children: cloneAllChildren(children) })));
+});exports.default=Form;//# sourceMappingURL=index.js.map

package/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/Form/index.tsx"],"sourcesContent":["\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":["__rest","useRef","_jsx","Tag"],"mappings":"4LASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAsC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACnF,IAAI,OAAO,GAAQ,GAAG,IAAIC,YAAM,CAAC,IAAI,CAAC;AAEtC,IAAA,MAAM,gBAAgB,GAAQ,CAAC,MAAW,KAAI;QAC1C,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,KAAU,KAAI;YAC7C,IAAI,CAAC,GAAQ,KAAK;AAClB,YAAA,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAC5B,gBAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;AACnC,gBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC7B,QAAQ,EAAE,MAAK;AACX,wBAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAC3C,CAAC;oBACD,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;oBACjC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AACxC,iBAAA,CAAC;AACZ,YAAA;AACD,YAAA,OAAO,KAAK;AAChB,QAAA,CAAC,CAAC;AACN,IAAA,CAAC;AAED,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,MAAM,EAAA,EACZ,IAAI,IACR,QAAQ,EAAE,CAAC,CAAC,KAAI;YACZ,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAE5B,YAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;YAEnC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,KAAI;gBAC5B,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AACnC,YAAA,CAAC,CAAC;QACN,CAAC,EACD,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,CAAC,EAAE,CAAC;AACJ,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,MAAM,EAAE,CAAC;AACZ,SAAA,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,OAAO,EAAA,EAAA,EAAA,QAAA,EAEX,gBAAgB,CAAC,QAAQ,CAAC,EAAA,CAAA,CACzB;AAEd,CAAC"}

package/Form/index.mjs

@@ -0,0 +1,34 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{useRef}from'react';import {Tag}from'@xanui/core';const Form = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    let formRef = ref || useRef(null);
+    const cloneAllChildren = (childs) => {
+        return React.Children.map(childs, (child) => {
+            let c = child;
+            if (React.isValidElement(child) && c.props.name) {
+                const form = formRef.current;
+                const formData = new FormData(form);
+                return React.cloneElement(child, {
+                    onChange: () => {
+                        console.log(formData.get(c.props.name));
+                    },
+                    value: formData.get(c.props.name),
+                    children: cloneAllChildren(c.props.children),
+                });
+            }
+            return child;
+        });
+    };
+    return (jsx(Tag, Object.assign({ component: "form" }, rest, { onSubmit: (e) => {
+            e.preventDefault();
+            const form = formRef.current;
+            const formData = new FormData(form);
+            formData.forEach((value, key) => {
+                console.log(key + ": " + value);
+            });
+        }, sxr: {
+            bgcolor: "default",
+            p: 2,
+            maxWidth: 400,
+            radius: 1,
+        }, baseClass: 'form', ref: formRef }, { children: cloneAllChildren(children) })));
+});export{Form as default};//# sourceMappingURL=index.mjs.map

package/Form/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\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":["_jsx"],"mappings":"8HASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAsC,EAAmC,EAAE,GAAmB,KAAI;AAA5D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACnF,IAAI,OAAO,GAAQ,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC;AAEtC,IAAA,MAAM,gBAAgB,GAAQ,CAAC,MAAW,KAAI;QAC1C,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,MAAM,EAAE,CAAC,KAAU,KAAI;YAC7C,IAAI,CAAC,GAAQ,KAAK;AAClB,YAAA,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE;AAC7C,gBAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAC5B,gBAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;AACnC,gBAAA,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC7B,QAAQ,EAAE,MAAK;AACX,wBAAA,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;oBAC3C,CAAC;oBACD,KAAK,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;oBACjC,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC;AACxC,iBAAA,CAAC;AACZ,YAAA;AACD,YAAA,OAAO,KAAK;AAChB,QAAA,CAAC,CAAC;AACN,IAAA,CAAC;AAED,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,MAAM,EAAA,EACZ,IAAI,IACR,QAAQ,EAAE,CAAC,CAAC,KAAI;YACZ,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,OAAO,CAAC,OAAO;AAE5B,YAAA,MAAM,QAAQ,GAAG,IAAI,QAAQ,CAAC,IAAI,CAAC;YAEnC,QAAQ,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,GAAG,KAAI;gBAC5B,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,IAAI,GAAG,KAAK,CAAC;AACnC,YAAA,CAAC,CAAC;QACN,CAAC,EACD,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,CAAC,EAAE,CAAC;AACJ,YAAA,QAAQ,EAAE,GAAG;AACb,YAAA,MAAM,EAAE,CAAC;AACZ,SAAA,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,OAAO,EAAA,EAAA,EAAA,QAAA,EAEX,gBAAgB,CAAC,QAAQ,CAAC,EAAA,CAAA,CACzB;AAEd,CAAC"}

package/GridContainer/index.d.ts

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

package/GridContainer/index.js

@@ -0,0 +1,9 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const GridContainer = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = tslib.__rest(_a, ["children"]);
+    return (jsxRuntime.jsx(core.Tag, Object.assign({}, rest, { sxr: {
+            display: "flex",
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            width: '100%',
+        }, baseClass: 'grid-container', ref: ref }, { children: children })));
+});exports.default=GridContainer;//# sourceMappingURL=index.js.map

package/GridContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                display: \"flex\",\n                flexDirection: 'row',\n                flexWrap: 'wrap',\n                width: '100%',\n            }}\n            baseClass='grid-container'\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridContainer"],"names":["__rest","_jsx","Tag"],"mappings":"4LAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIC,cAAA,CAACC,QAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/GridContainer/index.mjs

@@ -0,0 +1,9 @@
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from'react';import {Tag}from'@xanui/core';const GridContainer = React.forwardRef((_a, ref) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (jsx(Tag, Object.assign({}, rest, { sxr: {
+            display: "flex",
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            width: '100%',
+        }, baseClass: 'grid-container', ref: ref }, { children: children })));
+});export{GridContainer as default};//# sourceMappingURL=index.mjs.map

package/GridContainer/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\n    return (\n        <Tag\n            {...rest}\n            sxr={{\n                display: \"flex\",\n                flexDirection: 'row',\n                flexWrap: 'wrap',\n                width: '100%',\n            }}\n            baseClass='grid-container'\n            ref={ref}\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridContainer"],"names":["_jsx"],"mappings":"sHAKA,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA4C,EAAE,GAAoB,KAAI;AAAtE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAkC,EAA7B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AAC3F,IAAA,QACIA,GAAA,CAAC,GAAG,oBACI,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,KAAK,EAAE,MAAM;SAChB,EACD,SAAS,EAAC,gBAAgB,EAC1B,GAAG,EAAE,GAAG,EAAA,EAAA,EAAA,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC"}

package/GridItem/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { TagComponentType, TagProps } from '@xanui/core';
+
+type GridItemProps<T extends TagComponentType = "div"> = TagProps<T> & {
+    xs?: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+};
+declare const GridItem: React.ForwardRefExoticComponent<Omit<GridItemProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+
+export { GridItem as default };
+export type { GridItemProps };

package/GridItem/index.js

@@ -0,0 +1,10 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const GridItem = React.forwardRef((_a, ref) => {
+    var { children, xs, sm, md, lg, xl } = _a, rest = tslib.__rest(_a, ["children", "xs", "sm", "md", "lg", "xl"]);
+    let w = {};
+    xs && (w.xs = (100 / 12 * xs) + "%");
+    sm && (w.sm = (100 / 12 * sm) + "%");
+    md && (w.md = (100 / 12 * md) + "%");
+    lg && (w.lg = (100 / 12 * lg) + "%");
+    xl && (w.xl = (100 / 12 * xl) + "%");
+    return (jsxRuntime.jsx(core.Tag, Object.assign({ ref: ref }, rest, { maxWidth: w, flexBasis: w, flexGrow: 0, baseClass: "grid-item" }, { children: children })));
+});exports.default=GridItem;//# sourceMappingURL=index.js.map