@xanui/ui 1.1.16 → 1.1.18

package/Datatable/index.mjs.map

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

package/Datatable/types.d.ts

@@ -0,0 +1,69 @@
+import { ReactElement } from 'react';
+import { TableColumnProps } from '../TableCell/index.js';
+import { IconButtonProps } from '../IconButton/index.js';
+import { InputProps } from '../Input/index.js';
+import { TableProps } from '../Table/index.js';
+import { TablePaginationState, TablePaginationProps } from '../TablePagination/index.js';
+
+type ColumnType = (Omit<TableColumnProps, "children"> & {
+    label: string;
+    field?: string;
+    sortable?: boolean;
+});
+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[];
+    rowAction?: (props: {
+        row: DataTableDefaultRow | null;
+        state: DatatableState;
+    }) => RowActionType[];
+    renderRow?: (row: DataTableDefaultRow, state: DatatableState) => DataTableDefaultRow;
+    disableRow?: (row: DataTableDefaultRow, state: DatatableState) => boolean | void;
+    pagination?: {
+        total?: number;
+        perpages?: number[];
+    };
+    defaultState?: Partial<DatatableState>;
+    onStateChange?: (state: DatatableState) => void;
+    filters?: {
+        [key: string]: DatatableFilter[];
+    };
+    fixedHeader?: boolean;
+    hidePagination?: boolean;
+    hideSearch?: boolean;
+    hideCheckbox?: boolean;
+    slotProps?: {
+        search?: Omit<InputProps, "value" | "onChange">;
+        table?: Omit<TableProps, 'children'>;
+        pagination?: TablePaginationProps;
+    };
+};
+type DatatableState = {
+    selected: number[];
+    selectAll: boolean;
+    pagination: TablePaginationState;
+    tab: string;
+    search: string;
+    sortable?: {
+        [field: string]: 'asc' | 'desc';
+    };
+};
+
+export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, DatatableState, RowActionType, TabsProps };

package/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (direction) _p.direction = direction\r\n    if (color) _p.color = color\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    direction = p.direction ?? \"horizental\"\r\n    color = p.color ?? \"default\"\r\n    size = p.size ?? 1\r\n\r\n    let isHori = direction === 'horizental'\r\n\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            baseClass='divider'\r\n            sxr={{\r\n                width: isHori ? \"100%\" : size,\r\n                height: isHori ? size : \"100%\",\r\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\r\n            }}\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Divider\r\n\r\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AAUA,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,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import 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":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AAUA,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,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Divider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type DividerProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\r\n    direction?: useBreakpointPropsType<\"verticle\" | \"horizental\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    size?: useBreakpointPropsType<number>;\r\n}\r\n\r\nconst Divider = React.forwardRef(<T extends TagComponentType = \"div\">({ children, direction, color, size, ...rest }: DividerProps<T>, ref: React.Ref<any>) => {\r\n    const _p: any = {}\r\n    if (direction) _p.direction = direction\r\n    if (color) _p.color = color\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n    direction = p.direction ?? \"horizental\"\r\n    color = p.color ?? \"default\"\r\n    size = p.size ?? 1\r\n\r\n    let isHori = direction === 'horizental'\r\n\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            baseClass='divider'\r\n            sxr={{\r\n                width: isHori ? \"100%\" : size,\r\n                height: isHori ? size : \"100%\",\r\n                bgcolor: color === 'default' ? `background.secondary` : `${color}.secondary`,\r\n            }}\r\n            ref={ref}\r\n        >{children}</Tag>\r\n    )\r\n})\r\n\r\nexport default Divider\r\n\r\n"],"names":["_jsx"],"mappings":";;;;;AAUA,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,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Divider/index.tsx"],"sourcesContent":["import 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":["_jsx"],"mappings":";;;;;AAUA,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,YACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}

package/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport Layer, { LayerProps } from '../Layer';\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\n\r\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\r\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    onClickOutside?: () => void;\r\n    slotProps?: {\r\n        layer?: Partial<Omit<LayerProps, \"children\">>\r\n        root?: TagProps<\"div\">;\r\n        content?: TagProps<\"div\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst getVariant = (placement?: any) => {\r\n    switch (placement) {\r\n        case \"right\":\r\n            return \"fadeLeft\"\r\n        case \"top\":\r\n            return \"fadeDown\"\r\n        case \"bottom\":\r\n            return \"fadeUp\"\r\n        default:\r\n            return \"fadeRight\"\r\n    }\r\n}\r\n\r\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\r\n    const _p: any = {}\r\n    if (placement) _p.placement = placement\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    placement = p.placement ?? 'left'\r\n    size = p.size || \"medium\"\r\n\r\n    let isSide = placement === 'left' || placement === 'right'\r\n    let sizes: any = {\r\n        small: 200,\r\n        medium: 300,\r\n        large: 400\r\n    }\r\n\r\n    let _size = sizes[size as any] || size\r\n\r\n    return (\r\n        <Layer\r\n            {...layerProps}\r\n            {...slotProps?.layer}\r\n            transition={getVariant(placement)}\r\n        >\r\n            <Tag\r\n                {...slotProps?.root}\r\n                baseClass='drawer'\r\n                sxr={{\r\n                    width: \"100vw\",\r\n                    height: \"100vh\",\r\n                    display: \"flex\",\r\n                    direction: isSide ? \"row\" : \"column\" as any,\r\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\r\n                }}\r\n            >\r\n                <ClickOutside\r\n                    {...slotProps?.clickOutside}\r\n                    onClickOutside={onClickOutside || (() => { })}\r\n                >\r\n                    <Tag\r\n                        sxr={{\r\n                            width: isSide ? _size : \"100%\",\r\n                            height: isSide ? \"100%\" : _size,\r\n                            bgcolor: \"background.primary\",\r\n                            shadow: 20\r\n                        }}\r\n                        baseClass='drawer-content'\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </ClickOutside>\r\n            </Tag>\r\n        </Layer>\r\n    )\r\n}\r\n\r\n\r\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\r\n    const d = Renderar.render(Drawer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            d.unrender()\r\n        },\r\n        onClickOutside: () => {\r\n            if (props?.onClickOutside) {\r\n                props.onClickOutside()\r\n            } else {\r\n                d.updateProps({ open: false })\r\n            }\r\n        }\r\n    })\r\n\r\n    return {\r\n        open: () => {\r\n            d.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            d.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\n\r\nDrawer.close = () => {\r\n    Renderar.unrender(Drawer as any)\r\n}\r\n\r\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: 200,\n        medium: 300,\n        large: 400\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;;"}

package/Drawer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Drawer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Renderar, Tag, TagProps, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport Layer, { LayerProps } from '../Layer';\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\n\r\nexport type DrawerProps = Omit<LayerProps, \"transition\" | \"slotProps\"> & {\r\n    placement?: useBreakpointPropsType<\"left\" | \"right\" | \"bottom\" | \"top\">;\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    onClickOutside?: () => void;\r\n    slotProps?: {\r\n        layer?: Partial<Omit<LayerProps, \"children\">>\r\n        root?: TagProps<\"div\">;\r\n        content?: TagProps<\"div\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\r\n    }\r\n}\r\n\r\nconst getVariant = (placement?: any) => {\r\n    switch (placement) {\r\n        case \"right\":\r\n            return \"fadeLeft\"\r\n        case \"top\":\r\n            return \"fadeDown\"\r\n        case \"bottom\":\r\n            return \"fadeUp\"\r\n        default:\r\n            return \"fadeRight\"\r\n    }\r\n}\r\n\r\nconst Drawer = ({ children, placement, size, slotProps, onClickOutside, ...layerProps }: DrawerProps) => {\r\n    const _p: any = {}\r\n    if (placement) _p.placement = placement\r\n    if (size) _p.size = size\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    placement = p.placement ?? 'left'\r\n    size = p.size || \"medium\"\r\n\r\n    let isSide = placement === 'left' || placement === 'right'\r\n    let sizes: any = {\r\n        small: 200,\r\n        medium: 300,\r\n        large: 400\r\n    }\r\n\r\n    let _size = sizes[size as any] || size\r\n\r\n    return (\r\n        <Layer\r\n            {...layerProps}\r\n            {...slotProps?.layer}\r\n            transition={getVariant(placement)}\r\n        >\r\n            <Tag\r\n                {...slotProps?.root}\r\n                baseClass='drawer'\r\n                sxr={{\r\n                    width: \"100vw\",\r\n                    height: \"100vh\",\r\n                    display: \"flex\",\r\n                    direction: isSide ? \"row\" : \"column\" as any,\r\n                    justifyContent: placement === 'left' || placement === 'top' ? \"flex-start\" : \"flex-end\"\r\n                }}\r\n            >\r\n                <ClickOutside\r\n                    {...slotProps?.clickOutside}\r\n                    onClickOutside={onClickOutside || (() => { })}\r\n                >\r\n                    <Tag\r\n                        sxr={{\r\n                            width: isSide ? _size : \"100%\",\r\n                            height: isSide ? \"100%\" : _size,\r\n                            bgcolor: \"background.primary\",\r\n                            shadow: 20\r\n                        }}\r\n                        baseClass='drawer-content'\r\n                    >\r\n                        {children}\r\n                    </Tag>\r\n                </ClickOutside>\r\n            </Tag>\r\n        </Layer>\r\n    )\r\n}\r\n\r\n\r\nDrawer.open = (children: DrawerProps[\"children\"], props?: Omit<DrawerProps, \"children\" | \"open\">) => {\r\n    const d = Renderar.render(Drawer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            d.unrender()\r\n        },\r\n        onClickOutside: () => {\r\n            if (props?.onClickOutside) {\r\n                props.onClickOutside()\r\n            } else {\r\n                d.updateProps({ open: false })\r\n            }\r\n        }\r\n    })\r\n\r\n    return {\r\n        open: () => {\r\n            d.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            d.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\n\r\nDrawer.close = () => {\r\n    Renderar.unrender(Drawer as any)\r\n}\r\n\r\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.mjs","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: 200,\n        medium: 300,\n        large: 400\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;;"}

package/Form/index.js.map

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

package/Form/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Form/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useRef } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type FormProps<T extends TagComponentType = \"form\"> = TagProps<T> & {\r\n\r\n}\r\n\r\n\r\nconst Form = React.forwardRef(<T extends TagComponentType = \"form\">({ children, ...rest }: FormProps<T>, ref: React.Ref<any>) => {\r\n    let formRef: any = ref || useRef(null)\r\n\r\n    const cloneAllChildren: any = (childs: any) => {\r\n        return React.Children.map(childs, (child: any) => {\r\n            let c: any = child;\r\n            if (React.isValidElement(child) && c.props.name) {\r\n                const form = formRef.current\r\n                const formData = new FormData(form);\r\n                return React.cloneElement(child, {\r\n                    onChange: () => {\r\n                        console.log(formData.get(c.props.name));\r\n                    },\r\n                    value: formData.get(c.props.name),\r\n                    children: cloneAllChildren(c.props.children),\r\n                } as any);\r\n            }\r\n            return child;\r\n        });\r\n    };\r\n\r\n    return (\r\n        <Tag\r\n            component=\"form\"\r\n            {...rest}\r\n            onSubmit={(e) => {\r\n                e.preventDefault()\r\n                const form = formRef.current\r\n\r\n                const formData = new FormData(form);\r\n\r\n                formData.forEach((value, key) => {\r\n                    console.log(key + \": \" + value);\r\n                });\r\n            }}\r\n            sxr={{\r\n                bgcolor: \"default\",\r\n                p: 2,\r\n                maxWidth: 400,\r\n                radius: 1,\r\n            }}\r\n            baseClass='form'\r\n            ref={formRef}\r\n        >\r\n            {cloneAllChildren(children)}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Form\r\n\r\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.mjs","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;;"}

package/GridContainer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: 'row',\r\n                flexWrap: 'wrap',\r\n                width: '100%',\r\n            }}\r\n            baseClass='grid-container'\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default GridContainer"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAKA,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,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"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":";;;;;;;AAKA,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,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}

package/GridContainer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/GridContainer/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridContainerProps<T extends TagComponentType = \"div\"> = TagProps<T>\r\nconst GridContainer = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: GridContainerProps<T>, ref?: React.Ref<any>) => {\r\n    return (\r\n        <Tag\r\n            {...rest}\r\n            sxr={{\r\n                display: \"flex\",\r\n                flexDirection: 'row',\r\n                flexWrap: 'wrap',\r\n                width: '100%',\r\n            }}\r\n            baseClass='grid-container'\r\n            ref={ref}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default GridContainer"],"names":["_jsx"],"mappings":";;;;;AAKA,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,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"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":";;;;;AAKA,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,QAAA,EAEP,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}

package/GridItem/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    xs?: number;\r\n    sm?: number;\r\n    md?: number;\r\n    lg?: number;\r\n    xl?: number;\r\n}\r\n\r\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\r\n\r\n    let w: any = {}\r\n\r\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\r\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\r\n    md && (w.md = (100 / 12 * md) + \"%\")\r\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\r\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\r\n\r\n    return (\r\n        <Tag\r\n            ref={ref}\r\n            {...rest}\r\n            maxWidth={w}\r\n            flexBasis={w}\r\n            flexGrow={0}\r\n            baseClass=\"grid-item\"\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default GridItem"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}

package/GridItem/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n    xs?: number;\r\n    sm?: number;\r\n    md?: number;\r\n    lg?: number;\r\n    xl?: number;\r\n}\r\n\r\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\r\n\r\n    let w: any = {}\r\n\r\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\r\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\r\n    md && (w.md = (100 / 12 * md) + \"%\")\r\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\r\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\r\n\r\n    return (\r\n        <Tag\r\n            ref={ref}\r\n            {...rest}\r\n            maxWidth={w}\r\n            flexBasis={w}\r\n            flexGrow={0}\r\n            baseClass=\"grid-item\"\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default GridItem"],"names":["_jsx"],"mappings":";;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/GridItem/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type GridItemProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n    xs?: number;\n    sm?: number;\n    md?: number;\n    lg?: number;\n    xl?: number;\n}\n\nconst GridItem = React.forwardRef(<T extends TagComponentType = \"div\">({ children, xs, sm, md, lg, xl, ...rest }: GridItemProps<T>, ref?: React.Ref<any>) => {\n\n    let w: any = {}\n\n    xs && (w.xs = (100 / 12 * xs) + \"%\")\n    sm && (w.sm = (100 / 12 * sm) + \"%\")\n    md && (w.md = (100 / 12 * md) + \"%\")\n    lg && (w.lg = (100 / 12 * lg) + \"%\")\n    xl && (w.xl = (100 / 12 * xl) + \"%\")\n\n    return (\n        <Tag\n            ref={ref}\n            {...rest}\n            maxWidth={w}\n            flexBasis={w}\n            flexGrow={0}\n            baseClass=\"grid-item\"\n        >\n            {children}\n        </Tag>\n    )\n})\n\nexport default GridItem"],"names":["_jsx"],"mappings":";;;;;AAYA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA2D,EAAE,GAAoB,KAAI;AAArF,IAAA,IAAA,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvC,0CAAyC,CAAF;IAE1G,IAAI,CAAC,GAAQ,EAAE;AAEf,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AACpC,IAAA,EAAE,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,GAAG,EAAE,IAAI,GAAG,CAAC;AAEpC,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAI,EAAA,EACR,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,CAAC,EACZ,QAAQ,EAAE,CAAC,EACX,SAAS,EAAC,WAAW,EAAA,QAAA,EAEpB,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}

package/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner from '../useCorner'\r\n\r\n\r\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\r\n}\r\n\r\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\r\n    rest.sx = (rest as any).sx || {};\r\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\r\n\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    size = p.size ?? \"medium\"\r\n    color = p.color\r\n    variant = p.variant\r\n    corner = p.corner ?? \"circle\"\r\n\r\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\r\n    const cornerCss = useCorner(corner)\r\n\r\n    if (size === 'small') {\r\n        size = 28\r\n    } else if (size === 'medium') {\r\n        size = 34\r\n    } else if (size === 'large') {\r\n        size = 52\r\n    }\r\n\r\n\r\n    return (\r\n        <Tag\r\n            component='button'\r\n            ref={ref}\r\n            {...cornerCss}\r\n            {..._props}\r\n            {...template.primary}\r\n            baseClass='icon-button'\r\n            sxr={{\r\n                border: 0,\r\n                radius: size,\r\n                height: size,\r\n                width: size,\r\n                cursor: \"pointer\",\r\n                fontFamily: \"inherit\",\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                bgcolor: \"transparent\",\r\n                fontSize: Math.round((size / 3) * 2),\r\n                \"& svg\": {\r\n                    fontSize: \"1em\",\r\n                    width: \"1em\",\r\n                    height: \"1em\",\r\n                    display: \"block\",\r\n                    pointerEvents: \"none\",\r\n                    verticalAlign: \"middle\",\r\n                }\r\n            }}\r\n            hover={{\r\n                ...template.secondary,\r\n                ...((_props as any)?.hover || {})\r\n            }}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\r\nexport default IconButton\r\n"],"names":[],"mappings":";;;;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
+{"version":3,"file":"index.js","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template.primary}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"inherit\",\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                bgcolor: \"transparent\",\n                fontSize: Math.round((size / 3) * 2),\n                \"& svg\": {\n                    fontSize: \"1em\",\n                    width: \"1em\",\n                    height: \"1em\",\n                    display: \"block\",\n                    pointerEvents: \"none\",\n                    verticalAlign: \"middle\",\n                }\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}

package/IconButton/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner from '../useCorner'\r\n\r\n\r\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\r\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\r\n}\r\n\r\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\r\n    rest.sx = (rest as any).sx || {};\r\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\r\n\r\n    const _p: any = {}\r\n    if (size) _p.size = size\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (corner) _p.corner = corner\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    size = p.size ?? \"medium\"\r\n    color = p.color\r\n    variant = p.variant\r\n    corner = p.corner ?? \"circle\"\r\n\r\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\r\n    const cornerCss = useCorner(corner)\r\n\r\n    if (size === 'small') {\r\n        size = 28\r\n    } else if (size === 'medium') {\r\n        size = 34\r\n    } else if (size === 'large') {\r\n        size = 52\r\n    }\r\n\r\n\r\n    return (\r\n        <Tag\r\n            component='button'\r\n            ref={ref}\r\n            {...cornerCss}\r\n            {..._props}\r\n            {...template.primary}\r\n            baseClass='icon-button'\r\n            sxr={{\r\n                border: 0,\r\n                radius: size,\r\n                height: size,\r\n                width: size,\r\n                cursor: \"pointer\",\r\n                fontFamily: \"inherit\",\r\n                display: \"inline-flex\",\r\n                flexDirection: \"row\",\r\n                alignItems: \"center\",\r\n                justifyContent: \"center\",\r\n                bgcolor: \"transparent\",\r\n                fontSize: Math.round((size / 3) * 2),\r\n                \"& svg\": {\r\n                    fontSize: \"1em\",\r\n                    width: \"1em\",\r\n                    height: \"1em\",\r\n                    display: \"block\",\r\n                    pointerEvents: \"none\",\r\n                    verticalAlign: \"middle\",\r\n                }\r\n            }}\r\n            hover={{\r\n                ...template.secondary,\r\n                ...((_props as any)?.hover || {})\r\n            }}\r\n        >\r\n            {children}\r\n        </Tag>\r\n    )\r\n})\r\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\r\nexport default IconButton\r\n"],"names":[],"mappings":";;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\"use client\";\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n    size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n    rest.sx = (rest as any).sx || {};\n    let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n    const _p: any = {}\n    if (size) _p.size = size\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    const p: any = useBreakpointProps(_p)\n\n    size = p.size ?? \"medium\"\n    color = p.color\n    variant = p.variant\n    corner = p.corner ?? \"circle\"\n\n    let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n    const cornerCss = useCorner(corner)\n\n    if (size === 'small') {\n        size = 28\n    } else if (size === 'medium') {\n        size = 34\n    } else if (size === 'large') {\n        size = 52\n    }\n\n\n    return (\n        <Tag\n            component='button'\n            ref={ref}\n            {...cornerCss}\n            {..._props}\n            {...template.primary}\n            baseClass='icon-button'\n            sxr={{\n                border: 0,\n                radius: size,\n                height: size,\n                width: size,\n                cursor: \"pointer\",\n                fontFamily: \"inherit\",\n                display: \"inline-flex\",\n                flexDirection: \"row\",\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                bgcolor: \"transparent\",\n                fontSize: Math.round((size / 3) * 2),\n                \"& svg\": {\n                    fontSize: \"1em\",\n                    width: \"1em\",\n                    height: \"1em\",\n                    display: \"block\",\n                    pointerEvents: \"none\",\n                    verticalAlign: \"middle\",\n                }\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n        >\n            {children}\n        </Tag>\n    )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":[],"mappings":";;;;;;;AAaA;;AAA4E;;;;AAKxE;AAAU;AACV;AAAW;AACX;AAAa;AACb;AAAY;AACZ;AAEA;AACA;AACA;AACA;AAEA;AACA;AAEA;;;AAEO;;;AAEA;;;;AAcK;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACI;AACA;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}

package/Image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    errorView?: ReactElement\r\n}\r\n\r\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n\r\n    if (faild === false) {\r\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\r\n        return (\r\n            <Tag\r\n                src={src}\r\n                {...rest as any}\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                }}\r\n                component=\"div\"\r\n                baseClass='image'\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            objectFit=\"cover\"\r\n            {...rest as any}\r\n            component=\"img\"\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='image'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                rest.onError && rest.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Image\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n\n    if (faild === false) {\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\n        return (\n            <Tag\n                src={src}\n                {...rest as any}\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n                component=\"div\"\n                baseClass='image'\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            objectFit=\"cover\"\n            {...rest as any}\n            component=\"img\"\n            alt={alt}\n            src={src}\n            baseClass='image'\n            onError={(e) => {\n                setFaild(false)\n                rest.onError && rest.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Image\n\n\n"],"names":[],"mappings":";;;;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}

package/Image/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { ReactElement, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\r\n    errorView?: ReactElement\r\n}\r\n\r\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\r\n    const [faild, setFaild] = useState<boolean>()\r\n\r\n    if (faild === false) {\r\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\r\n        return (\r\n            <Tag\r\n                src={src}\r\n                {...rest as any}\r\n                sxr={{\r\n                    display: \"inline-flex\",\r\n                    justifyContent: \"center\",\r\n                    alignItems: \"center\",\r\n                }}\r\n                component=\"div\"\r\n                baseClass='image'\r\n                ref={ref}\r\n            >{t}</Tag>\r\n        )\r\n    }\r\n    return (\r\n        <Tag\r\n            objectFit=\"cover\"\r\n            {...rest as any}\r\n            component=\"img\"\r\n            alt={alt}\r\n            src={src}\r\n            baseClass='image'\r\n            onError={(e) => {\r\n                setFaild(false)\r\n                rest.onError && rest.onError(e as any)\r\n            }}\r\n            ref={ref}\r\n        />\r\n    )\r\n})\r\n\r\nexport default Image\r\n\r\n\r\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n    errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n    const [faild, setFaild] = useState<boolean>()\n\n    if (faild === false) {\n        let t = errorView || alt?.charAt(0).toUpperCase() || children\n        return (\n            <Tag\n                src={src}\n                {...rest as any}\n                sxr={{\n                    display: \"inline-flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n                component=\"div\"\n                baseClass='image'\n                ref={ref}\n            >{t}</Tag>\n        )\n    }\n    return (\n        <Tag\n            objectFit=\"cover\"\n            {...rest as any}\n            component=\"img\"\n            alt={alt}\n            src={src}\n            baseClass='image'\n            onError={(e) => {\n                setFaild(false)\n                rest.onError && rest.onError(e as any)\n            }}\n            ref={ref}\n        />\n    )\n})\n\nexport default Image\n\n\n"],"names":[],"mappings":";;;;;;AASA;AAAoE;;AAGhE;AACI;;AAMY;AACA;AACA;AACH;;AAOb;;;AAWQ;AAIZ;;"}

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n    focused?: boolean;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\r\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n    error?: boolean;\r\n    helperText?: useBreakpointPropsType<string>;\r\n    multiline?: boolean;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n    rows?: useBreakpointPropsType<number>;\r\n    minRows?: useBreakpointPropsType<number>;\r\n    maxRows?: useBreakpointPropsType<number>;\r\n    slotProps?: {\r\n        container?: Omit<TagProps<\"div\">, \"children\">\r\n    }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n    let [{\r\n        startIcon,\r\n        endIcon,\r\n        iconPlacement,\r\n        onFocus,\r\n        color,\r\n        onBlur,\r\n        focused,\r\n        containerRef,\r\n        disabled,\r\n        variant,\r\n        error,\r\n        helperText,\r\n        multiline,\r\n        size,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        slotProps,\r\n        ...rest\r\n    }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (iconPlacement) _p.iconPlacement = iconPlacement\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (helperText) _p.helperText = helperText\r\n    if (size) _p.size = size\r\n    if (rows) _p.rows = rows\r\n    if (minRows) _p.minRows = minRows\r\n    if (maxRows) _p.maxRows = maxRows\r\n    const p: any = useBreakpointProps(_p)\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    iconPlacement = p.iconPlacement\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    helperText = p.helperText\r\n    size = p.size ?? 'medium'\r\n    rows = p.rows\r\n    minRows = p.minRows\r\n    maxRows = p.maxRows\r\n\r\n    ref ??= useRef(null);\r\n    iconPlacement ??= multiline ? \"end\" : \"center\"\r\n    if (!value) iconPlacement = 'center'\r\n\r\n    const [_focused, setFocused] = useState(false)\r\n    const conRef: any = useRef(null)\r\n    let _focus = focused || _focused\r\n\r\n    useEffect(() => {\r\n        if (containerRef) {\r\n            (containerRef as any).current = conRef?.current\r\n        }\r\n    }, [containerRef])\r\n\r\n    let _rows = useMemo(() => {\r\n        if (rows) return rows\r\n        if (value && multiline) {\r\n            let lines = (value as string).split(`\\n`).length\r\n            if (minRows && minRows > lines) {\r\n                return minRows\r\n            } else if (maxRows && maxRows < lines) {\r\n                return maxRows\r\n            } else {\r\n                return lines\r\n            }\r\n        }\r\n    }, [value]) || 1\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 40,\r\n            gap: .5,\r\n            fontSize: 'button',\r\n        },\r\n        medium: {\r\n            height: 48,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        },\r\n        large: {\r\n            height: 52,\r\n            gap: 1,\r\n            fontSize: 'big'\r\n        }\r\n    }\r\n\r\n    const _size = sizes[size]\r\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n    borderColor = error ? \"danger.primary\" : borderColor\r\n    let multiprops: any = {}\r\n    if (multiline) {\r\n        multiprops = {\r\n            rows: _rows,\r\n            sx: {\r\n                resize: \"none\"\r\n            }\r\n        }\r\n    }\r\n\r\n    useEffect(() => {\r\n        if ((ref as any).current) {\r\n            (ref as any).current.style.height = \"auto\";\r\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n        }\r\n    }, [value]);\r\n\r\n    return (\r\n        <Tag\r\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n        >\r\n            <Tag\r\n                {...slotProps?.container}\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n                    flexWrap: \"nowrap\",\r\n                    // minWidth: 100,\r\n                    transitionProperty: \"border, box-shadow, background\",\r\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n                    border: variant === \"text\" ? 0 : \"1px solid\",\r\n                    borderColor: borderColor,\r\n                    borderRadius: 1,\r\n                    px: 1,\r\n                    py: .5,\r\n                }}\r\n                baseClass='input-container'\r\n                disabled={disabled || false}\r\n                ref={conRef}\r\n                {..._size}\r\n                height={multiline ? \"auto\" : _size.height}\r\n                minHeight={_size.height}\r\n            >\r\n                {startIcon && <Tag\r\n                    flex={\"0 0 auto\"}\r\n                    sxr={{\r\n                        height: \"100%\",\r\n                        alignItems: 'center',\r\n                        justifyContent: \"center\",\r\n                        display: \"flex\",\r\n                        color: error ? \"danger.primary\" : \"text.secondary\",\r\n                    }}\r\n                    baseClass=\"input-start-icon\"\r\n                >{startIcon}</Tag>}\r\n                <Tag\r\n                    flex={1}\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        alignItems: \"center\",\r\n                        flex: 1,\r\n                        minHeight: _size.height,\r\n                        \"& textarea\": {\r\n                            resize: \"none\"\r\n                        },\r\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                            \"-webkit-text-fill-color\": \"text.primary\",\r\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                            transition: \"background-color 5000s ease-in-out 0s\"\r\n                        } as any\r\n                    }}\r\n                >\r\n                    <Tag\r\n                        component={multiline ? 'textarea' : 'input'}\r\n                        {...multiprops}\r\n                        {...rest}\r\n                        sxr={{\r\n                            border: 0,\r\n                            outline: 0,\r\n                            bgcolor: \"transparent\",\r\n                            color: error ? \"danger.primary\" : \"text.primary\",\r\n                            fontSize: _size.fontSize,\r\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n                            width: \"100%\",\r\n                            maxHeight: 200,\r\n                        }}\r\n                        value={value}\r\n                        baseClass='input-box'\r\n                        ref={ref}\r\n                        onFocus={(e: any) => {\r\n                            focused ?? setFocused(true)\r\n                            onFocus && onFocus(e)\r\n                        }}\r\n                        onBlur={(e: any) => {\r\n                            focused ?? setFocused(false)\r\n                            onBlur && onBlur(e)\r\n                        }}\r\n                    />\r\n                </Tag>\r\n                {endIcon && <Tag\r\n                    flex={\"0 0 auto\"}\r\n                    sxr={{\r\n                        height: \"100%\",\r\n                        alignItems: 'center',\r\n                        justifyContent: \"center\",\r\n                        display: 'flex',\r\n                        color: error ? \"danger.primary\" : \"text.secondary\",\r\n                    }}\r\n                    baseClass=\"input-end-icon\"\r\n                >{endIcon}</Tag>}\r\n            </Tag>\r\n            {helperText && <Text\r\n                pl={.5}\r\n                className=\"input-helper-text\"\r\n                fontSize=\"small\"\r\n                color={error ? \"danger.primary\" : \"text.primary\"}\r\n            >{helperText}</Text>}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;AAAsE;;;AAwBlE;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    slotProps?: {\n        container?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        onFocus,\n        color,\n        onBlur,\n        focused,\n        containerRef,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        slotProps,\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    ref ??= useRef(null);\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    const conRef: any = useRef(null)\n    let _focus = focused || _focused\n\n    useEffect(() => {\n        if (containerRef) {\n            (containerRef as any).current = conRef?.current\n        }\n    }, [containerRef])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 48,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    useEffect(() => {\n        if ((ref as any).current) {\n            (ref as any).current.style.height = \"auto\";\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n        }\n    }, [value]);\n\n    return (\n        <Tag\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n        >\n            <Tag\n                {...slotProps?.container}\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    // minWidth: 100,\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : \"1px solid\",\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                baseClass='input-container'\n                disabled={disabled || false}\n                ref={conRef}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    flex={1}\n                    sxr={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any\n                    }}\n                >\n                    <Tag\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        {...rest}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        baseClass='input-box'\n                        ref={ref}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Text\n                pl={.5}\n                className=\"input-helper-text\"\n                fontSize=\"small\"\n                color={error ? \"danger.primary\" : \"text.primary\"}\n            >{helperText}</Text>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;;;AAyBA;;AAAsE;;;AAwBlE;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}

package/Input/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\r\n    startIcon?: useBreakpointPropsType<ReactElement>;\r\n    endIcon?: useBreakpointPropsType<ReactElement>;\r\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n    focused?: boolean;\r\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\r\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n    error?: boolean;\r\n    helperText?: useBreakpointPropsType<string>;\r\n    multiline?: boolean;\r\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n    rows?: useBreakpointPropsType<number>;\r\n    minRows?: useBreakpointPropsType<number>;\r\n    maxRows?: useBreakpointPropsType<number>;\r\n    slotProps?: {\r\n        container?: Omit<TagProps<\"div\">, \"children\">\r\n    }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n    let [{\r\n        startIcon,\r\n        endIcon,\r\n        iconPlacement,\r\n        onFocus,\r\n        color,\r\n        onBlur,\r\n        focused,\r\n        containerRef,\r\n        disabled,\r\n        variant,\r\n        error,\r\n        helperText,\r\n        multiline,\r\n        size,\r\n        rows,\r\n        minRows,\r\n        maxRows,\r\n        slotProps,\r\n        ...rest\r\n    }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (startIcon) _p.startIcon = startIcon\r\n    if (endIcon) _p.endIcon = endIcon\r\n    if (iconPlacement) _p.iconPlacement = iconPlacement\r\n    if (color) _p.color = color\r\n    if (variant) _p.variant = variant\r\n    if (helperText) _p.helperText = helperText\r\n    if (size) _p.size = size\r\n    if (rows) _p.rows = rows\r\n    if (minRows) _p.minRows = minRows\r\n    if (maxRows) _p.maxRows = maxRows\r\n    const p: any = useBreakpointProps(_p)\r\n    startIcon = p.startIcon\r\n    endIcon = p.endIcon\r\n    iconPlacement = p.iconPlacement\r\n    color = p.color ?? \"brand\"\r\n    variant = p.variant ?? \"fill\"\r\n    helperText = p.helperText\r\n    size = p.size ?? 'medium'\r\n    rows = p.rows\r\n    minRows = p.minRows\r\n    maxRows = p.maxRows\r\n\r\n    ref ??= useRef(null);\r\n    iconPlacement ??= multiline ? \"end\" : \"center\"\r\n    if (!value) iconPlacement = 'center'\r\n\r\n    const [_focused, setFocused] = useState(false)\r\n    const conRef: any = useRef(null)\r\n    let _focus = focused || _focused\r\n\r\n    useEffect(() => {\r\n        if (containerRef) {\r\n            (containerRef as any).current = conRef?.current\r\n        }\r\n    }, [containerRef])\r\n\r\n    let _rows = useMemo(() => {\r\n        if (rows) return rows\r\n        if (value && multiline) {\r\n            let lines = (value as string).split(`\\n`).length\r\n            if (minRows && minRows > lines) {\r\n                return minRows\r\n            } else if (maxRows && maxRows < lines) {\r\n                return maxRows\r\n            } else {\r\n                return lines\r\n            }\r\n        }\r\n    }, [value]) || 1\r\n\r\n    const sizes: any = {\r\n        small: {\r\n            height: 40,\r\n            gap: .5,\r\n            fontSize: 'button',\r\n        },\r\n        medium: {\r\n            height: 48,\r\n            gap: 1,\r\n            fontSize: \"text\"\r\n        },\r\n        large: {\r\n            height: 52,\r\n            gap: 1,\r\n            fontSize: 'big'\r\n        }\r\n    }\r\n\r\n    const _size = sizes[size]\r\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n    borderColor = error ? \"danger.primary\" : borderColor\r\n    let multiprops: any = {}\r\n    if (multiline) {\r\n        multiprops = {\r\n            rows: _rows,\r\n            sx: {\r\n                resize: \"none\"\r\n            }\r\n        }\r\n    }\r\n\r\n    useEffect(() => {\r\n        if ((ref as any).current) {\r\n            (ref as any).current.style.height = \"auto\";\r\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n        }\r\n    }, [value]);\r\n\r\n    return (\r\n        <Tag\r\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n        >\r\n            <Tag\r\n                {...slotProps?.container}\r\n                sxr={{\r\n                    display: \"flex\",\r\n                    flexDirection: \"row\",\r\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n                    flexWrap: \"nowrap\",\r\n                    // minWidth: 100,\r\n                    transitionProperty: \"border, box-shadow, background\",\r\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n                    border: variant === \"text\" ? 0 : \"1px solid\",\r\n                    borderColor: borderColor,\r\n                    borderRadius: 1,\r\n                    px: 1,\r\n                    py: .5,\r\n                }}\r\n                baseClass='input-container'\r\n                disabled={disabled || false}\r\n                ref={conRef}\r\n                {..._size}\r\n                height={multiline ? \"auto\" : _size.height}\r\n                minHeight={_size.height}\r\n            >\r\n                {startIcon && <Tag\r\n                    flex={\"0 0 auto\"}\r\n                    sxr={{\r\n                        height: \"100%\",\r\n                        alignItems: 'center',\r\n                        justifyContent: \"center\",\r\n                        display: \"flex\",\r\n                        color: error ? \"danger.primary\" : \"text.secondary\",\r\n                    }}\r\n                    baseClass=\"input-start-icon\"\r\n                >{startIcon}</Tag>}\r\n                <Tag\r\n                    flex={1}\r\n                    sxr={{\r\n                        display: \"flex\",\r\n                        alignItems: \"center\",\r\n                        flex: 1,\r\n                        minHeight: _size.height,\r\n                        \"& textarea\": {\r\n                            resize: \"none\"\r\n                        },\r\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n                            \"-webkit-text-fill-color\": \"text.primary\",\r\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n                            transition: \"background-color 5000s ease-in-out 0s\"\r\n                        } as any\r\n                    }}\r\n                >\r\n                    <Tag\r\n                        component={multiline ? 'textarea' : 'input'}\r\n                        {...multiprops}\r\n                        {...rest}\r\n                        sxr={{\r\n                            border: 0,\r\n                            outline: 0,\r\n                            bgcolor: \"transparent\",\r\n                            color: error ? \"danger.primary\" : \"text.primary\",\r\n                            fontSize: _size.fontSize,\r\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n                            width: \"100%\",\r\n                            maxHeight: 200,\r\n                        }}\r\n                        value={value}\r\n                        baseClass='input-box'\r\n                        ref={ref}\r\n                        onFocus={(e: any) => {\r\n                            focused ?? setFocused(true)\r\n                            onFocus && onFocus(e)\r\n                        }}\r\n                        onBlur={(e: any) => {\r\n                            focused ?? setFocused(false)\r\n                            onBlur && onBlur(e)\r\n                        }}\r\n                    />\r\n                </Tag>\r\n                {endIcon && <Tag\r\n                    flex={\"0 0 auto\"}\r\n                    sxr={{\r\n                        height: \"100%\",\r\n                        alignItems: 'center',\r\n                        justifyContent: \"center\",\r\n                        display: 'flex',\r\n                        color: error ? \"danger.primary\" : \"text.secondary\",\r\n                    }}\r\n                    baseClass=\"input-end-icon\"\r\n                >{endIcon}</Tag>}\r\n            </Tag>\r\n            {helperText && <Text\r\n                pl={.5}\r\n                className=\"input-helper-text\"\r\n                fontSize=\"small\"\r\n                color={error ? \"danger.primary\" : \"text.primary\"}\r\n            >{helperText}</Text>}\r\n        </Tag>\r\n    )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;AAyBA;;AAAsE;;;AAwBlE;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\nimport Text from '../Text';\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n    focused?: boolean;\n    color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n    containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n    variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n    error?: boolean;\n    helperText?: useBreakpointPropsType<string>;\n    multiline?: boolean;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    rows?: useBreakpointPropsType<number>;\n    minRows?: useBreakpointPropsType<number>;\n    maxRows?: useBreakpointPropsType<number>;\n    slotProps?: {\n        container?: Omit<TagProps<\"div\">, \"children\">\n    }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n    let [{\n        startIcon,\n        endIcon,\n        iconPlacement,\n        onFocus,\n        color,\n        onBlur,\n        focused,\n        containerRef,\n        disabled,\n        variant,\n        error,\n        helperText,\n        multiline,\n        size,\n        rows,\n        minRows,\n        maxRows,\n        slotProps,\n        ...rest\n    }, theme] = useInterface<any>(\"Input\", props, {})\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (iconPlacement) _p.iconPlacement = iconPlacement\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (helperText) _p.helperText = helperText\n    if (size) _p.size = size\n    if (rows) _p.rows = rows\n    if (minRows) _p.minRows = minRows\n    if (maxRows) _p.maxRows = maxRows\n    const p: any = useBreakpointProps(_p)\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    iconPlacement = p.iconPlacement\n    color = p.color ?? \"brand\"\n    variant = p.variant ?? \"fill\"\n    helperText = p.helperText\n    size = p.size ?? 'medium'\n    rows = p.rows\n    minRows = p.minRows\n    maxRows = p.maxRows\n\n    ref ??= useRef(null);\n    iconPlacement ??= multiline ? \"end\" : \"center\"\n    if (!value) iconPlacement = 'center'\n\n    const [_focused, setFocused] = useState(false)\n    const conRef: any = useRef(null)\n    let _focus = focused || _focused\n\n    useEffect(() => {\n        if (containerRef) {\n            (containerRef as any).current = conRef?.current\n        }\n    }, [containerRef])\n\n    let _rows = useMemo(() => {\n        if (rows) return rows\n        if (value && multiline) {\n            let lines = (value as string).split(`\\n`).length\n            if (minRows && minRows > lines) {\n                return minRows\n            } else if (maxRows && maxRows < lines) {\n                return maxRows\n            } else {\n                return lines\n            }\n        }\n    }, [value]) || 1\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            gap: .5,\n            fontSize: 'button',\n        },\n        medium: {\n            height: 48,\n            gap: 1,\n            fontSize: \"text\"\n        },\n        large: {\n            height: 52,\n            gap: 1,\n            fontSize: 'big'\n        }\n    }\n\n    const _size = sizes[size]\n    let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n    borderColor = error ? \"danger.primary\" : borderColor\n    let multiprops: any = {}\n    if (multiline) {\n        multiprops = {\n            rows: _rows,\n            sx: {\n                resize: \"none\"\n            }\n        }\n    }\n\n    useEffect(() => {\n        if ((ref as any).current) {\n            (ref as any).current.style.height = \"auto\";\n            (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n        }\n    }, [value]);\n\n    return (\n        <Tag\n            baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n        >\n            <Tag\n                {...slotProps?.container}\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n                    flexWrap: \"nowrap\",\n                    // minWidth: 100,\n                    transitionProperty: \"border, box-shadow, background\",\n                    bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n                    border: variant === \"text\" ? 0 : \"1px solid\",\n                    borderColor: borderColor,\n                    borderRadius: 1,\n                    px: 1,\n                    py: .5,\n                }}\n                baseClass='input-container'\n                disabled={disabled || false}\n                ref={conRef}\n                {..._size}\n                height={multiline ? \"auto\" : _size.height}\n                minHeight={_size.height}\n            >\n                {startIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: \"flex\",\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-start-icon\"\n                >{startIcon}</Tag>}\n                <Tag\n                    flex={1}\n                    sxr={{\n                        display: \"flex\",\n                        alignItems: \"center\",\n                        flex: 1,\n                        minHeight: _size.height,\n                        \"& textarea\": {\n                            resize: \"none\"\n                        },\n                        \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n                            \"-webkit-text-fill-color\": \"text.primary\",\n                            \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n                            transition: \"background-color 5000s ease-in-out 0s\"\n                        } as any\n                    }}\n                >\n                    <Tag\n                        component={multiline ? 'textarea' : 'input'}\n                        {...multiprops}\n                        {...rest}\n                        sxr={{\n                            border: 0,\n                            outline: 0,\n                            bgcolor: \"transparent\",\n                            color: error ? \"danger.primary\" : \"text.primary\",\n                            fontSize: _size.fontSize,\n                            height: multiline ? \"auto\" : _size.height + \"px!important\",\n                            width: \"100%\",\n                            maxHeight: 200,\n                        }}\n                        value={value}\n                        baseClass='input-box'\n                        ref={ref}\n                        onFocus={(e: any) => {\n                            focused ?? setFocused(true)\n                            onFocus && onFocus(e)\n                        }}\n                        onBlur={(e: any) => {\n                            focused ?? setFocused(false)\n                            onBlur && onBlur(e)\n                        }}\n                    />\n                </Tag>\n                {endIcon && <Tag\n                    flex={\"0 0 auto\"}\n                    sxr={{\n                        height: \"100%\",\n                        alignItems: 'center',\n                        justifyContent: \"center\",\n                        display: 'flex',\n                        color: error ? \"danger.primary\" : \"text.secondary\",\n                    }}\n                    baseClass=\"input-end-icon\"\n                >{endIcon}</Tag>}\n            </Tag>\n            {helperText && <Text\n                pl={.5}\n                className=\"input-helper-text\"\n                fontSize=\"small\"\n                color={error ? \"danger.primary\" : \"text.primary\"}\n            >{helperText}</Text>}\n        </Tag>\n    )\n})\n\nexport default Input\n"],"names":[],"mappings":";;;;;;;AAyBA;;AAAsE;;;AAwBlE;AAAe;AACf;AAAa;AACb;AAAmB;AACnB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAU;AACV;AAAU;AACV;AAAa;AACb;AAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACA;;;AAGA;AACA;;;;;AAMA;AAEA;AACI;AAAU;AACV;;AAEI;AACI;;AACG;AACH;;;AAEA;;;AAGZ;AAEA;AACI;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;AACD;AACI;AACA;AACA;AACH;;AAGL;;;;;AAKI;AACI;AACA;AACI;AACH;;;;AAKL;;AAEK;;AAET;AAEA;AAOgB;AACA;AACA;AACA;;AAEA;AACA;;AAEA;AACA;AACA;AACA;;AAYI;AACA;AACA;AACA;;AAEH;AAMG;AACA;AACA;;AAEA;AACI;AACH;AACD;AACI;;AAEA;AACI;;AAQJ;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAMG;AACJ;;AAGI;AACJ;AAMA;AACA;AACA;AACA;;AAEH;AAYrB;;"}

package/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n    return <Tag\r\n        component='label'\r\n        {...rest}\r\n        sxr={{\r\n            display: \"inline-flex\",\r\n            alignItems: \"center\",\r\n            verticalAlign: \"middle\",\r\n            fontSize: \"text\",\r\n            gap: .4,\r\n            color: \"text.primary\",\r\n            userSelect: \"none\",\r\n            cursor: \"pointer\",\r\n            fontWeight: \"500\",\r\n        }}\r\n        baseClass='label'\r\n        ref={ref}\r\n    >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}

package/Label/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n    return <Tag\r\n        component='label'\r\n        {...rest}\r\n        sxr={{\r\n            display: \"inline-flex\",\r\n            alignItems: \"center\",\r\n            verticalAlign: \"middle\",\r\n            fontSize: \"text\",\r\n            gap: .4,\r\n            color: \"text.primary\",\r\n            userSelect: \"none\",\r\n            cursor: \"pointer\",\r\n            fontWeight: \"500\",\r\n        }}\r\n        baseClass='label'\r\n        ref={ref}\r\n    >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n    return <Tag\n        component='label'\n        {...rest}\n        sxr={{\n            display: \"inline-flex\",\n            alignItems: \"center\",\n            verticalAlign: \"middle\",\n            fontSize: \"text\",\n            gap: .4,\n            color: \"text.primary\",\n            userSelect: \"none\",\n            cursor: \"pointer\",\n            fontWeight: \"500\",\n        }}\n        baseClass='label'\n        ref={ref}\n    >{children}</Tag>\n})\n\nexport default Label"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}

package/Layer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
+{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    let content = <Transition\n        duration={duration}\n        delay={delay}\n        easing=\"standard\"\n        variant={transition || \"zoomOver\"}\n        {...slotProps?.transition}\n        open={open}\n        onOpen={onOpen}\n        onOpened={onOpened}\n        onClose={onClose}\n        onClosed={() => {\n            setClosed(true)\n            onClosed && onClosed()\n        }}\n    >\n        {children}\n    </Transition>\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"smooth\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    ...blurCss\n                }}\n            >\n                {\n                    onClickOutside ? <ClickOutside\n                        {...slotProps?.clickOutside}\n                        onClickOutside={onClickOutside || (() => { })}\n                    >\n                        {content}\n                    </ClickOutside> : content\n                }\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}

package/Layer/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n    open: boolean;\r\n    children: ReactNode;\r\n    transition?: TransitionProps['variant'];\r\n    zIndex?: number;\r\n    blur?: useBreakpointPropsType<number>\r\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n    onClickOutside?: () => void;\r\n    onOpen?: Function;\r\n    onOpened?: Function;\r\n    onClose?: Function;\r\n    onClosed?: Function;\r\n    slotProps?: {\r\n        root?: Omit<TagProps<\"div\">, \"children\">;\r\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n        content?: Omit<TagProps<\"div\">, \"children\">;\r\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\r\n    }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n    let [{\r\n        onClickOutside,\r\n        placement,\r\n        transition,\r\n        zIndex,\r\n        blur,\r\n        blurMode,\r\n        onOpen,\r\n        onOpened,\r\n        onClose,\r\n        onClosed,\r\n        slotProps\r\n    }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n    const _p: any = {}\r\n    if (blur) _p.blur = blur\r\n    if (blurMode) _p.blurMode = blurMode\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    blur = p.blur\r\n    blurMode = p.blurMode\r\n\r\n    const [closed, setClosed] = useState(!open)\r\n    placement = placement || \"bottom-left\"\r\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n    useEffect(() => {\r\n        if (closed && open) {\r\n            setClosed(false)\r\n        }\r\n    }, [open])\r\n\r\n    if (closed) return <></>\r\n    let duration = slotProps?.transition?.duration || 300\r\n    let delay = slotProps?.transition?.delay || 0\r\n\r\n    let content = <Transition\r\n        duration={duration}\r\n        delay={delay}\r\n        easing=\"standard\"\r\n        variant={transition || \"zoomOver\"}\r\n        {...slotProps?.transition}\r\n        open={open}\r\n        onOpen={onOpen}\r\n        onOpened={onOpened}\r\n        onClose={onClose}\r\n        onClosed={() => {\r\n            setClosed(true)\r\n            onClosed && onClosed()\r\n        }}\r\n    >\r\n        {children}\r\n    </Transition>\r\n\r\n    return (\r\n        <Transition\r\n            duration={duration}\r\n            delay={delay}\r\n            easing=\"smooth\"\r\n            variant={\"fade\"}\r\n            open={open}\r\n        >\r\n            <Tag\r\n                baseClass=\"layer\"\r\n                {...slotProps?.root}\r\n                sxr={{\r\n                    ...slotProps?.root?.sx,\r\n                    position: \"fixed\",\r\n                    zIndex: 1500 + (zIndex || 0),\r\n                    top: 0,\r\n                    left: 0,\r\n                    bottom: 0,\r\n                    right: 0,\r\n                    width: \"100%\",\r\n                    height: \"100%\",\r\n                    ...blurCss\r\n                }}\r\n            >\r\n                {\r\n                    onClickOutside ? <ClickOutside\r\n                        {...slotProps?.clickOutside}\r\n                        onClickOutside={onClickOutside || (() => { })}\r\n                    >\r\n                        {content}\r\n                    </ClickOutside> : content\r\n                }\r\n            </Tag>\r\n        </Transition>\r\n    )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n    const l = Renderar.render(Layer as any, {\r\n        open: true,\r\n        ...props,\r\n        children,\r\n        onClosed: () => {\r\n            Renderar.unrender(Layer as any)\r\n            if (props?.onClosed) {\r\n                props.onClosed()\r\n            }\r\n        }\r\n    })\r\n    return {\r\n        open: () => {\r\n            l.updateProps({ open: true })\r\n        },\r\n        close: () => {\r\n            l.updateProps({ open: false })\r\n        },\r\n    }\r\n}\r\nLayer.close = () => {\r\n    Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
+{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n    open: boolean;\n    children: ReactNode;\n    transition?: TransitionProps['variant'];\n    zIndex?: number;\n    blur?: useBreakpointPropsType<number>\n    blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n    onClickOutside?: () => void;\n    onOpen?: Function;\n    onOpened?: Function;\n    onClose?: Function;\n    onClosed?: Function;\n    slotProps?: {\n        root?: Omit<TagProps<\"div\">, \"children\">;\n        transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n        content?: Omit<TagProps<\"div\">, \"children\">;\n        clickOutside?: Omit<ClickOutsideProps, \"children\">;\n    }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n    let [{\n        onClickOutside,\n        placement,\n        transition,\n        zIndex,\n        blur,\n        blurMode,\n        onOpen,\n        onOpened,\n        onClose,\n        onClosed,\n        slotProps\n    }] = useInterface<any>(\"Layer\", props, {})\n\n    const _p: any = {}\n    if (blur) _p.blur = blur\n    if (blurMode) _p.blurMode = blurMode\n    const p: any = useBreakpointProps(_p)\n\n    blur = p.blur\n    blurMode = p.blurMode\n\n    const [closed, setClosed] = useState(!open)\n    placement = placement || \"bottom-left\"\n    const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n    useEffect(() => {\n        if (closed && open) {\n            setClosed(false)\n        }\n    }, [open])\n\n    if (closed) return <></>\n    let duration = slotProps?.transition?.duration || 300\n    let delay = slotProps?.transition?.delay || 0\n\n    let content = <Transition\n        duration={duration}\n        delay={delay}\n        easing=\"standard\"\n        variant={transition || \"zoomOver\"}\n        {...slotProps?.transition}\n        open={open}\n        onOpen={onOpen}\n        onOpened={onOpened}\n        onClose={onClose}\n        onClosed={() => {\n            setClosed(true)\n            onClosed && onClosed()\n        }}\n    >\n        {children}\n    </Transition>\n\n    return (\n        <Transition\n            duration={duration}\n            delay={delay}\n            easing=\"smooth\"\n            variant={\"fade\"}\n            open={open}\n        >\n            <Tag\n                baseClass=\"layer\"\n                {...slotProps?.root}\n                sxr={{\n                    ...slotProps?.root?.sx,\n                    position: \"fixed\",\n                    zIndex: 1500 + (zIndex || 0),\n                    top: 0,\n                    left: 0,\n                    bottom: 0,\n                    right: 0,\n                    width: \"100%\",\n                    height: \"100%\",\n                    ...blurCss\n                }}\n            >\n                {\n                    onClickOutside ? <ClickOutside\n                        {...slotProps?.clickOutside}\n                        onClickOutside={onClickOutside || (() => { })}\n                    >\n                        {content}\n                    </ClickOutside> : content\n                }\n            </Tag>\n        </Transition>\n    )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n    const l = Renderar.render(Layer as any, {\n        open: true,\n        ...props,\n        children,\n        onClosed: () => {\n            Renderar.unrender(Layer as any)\n            if (props?.onClosed) {\n                props.onClosed()\n            }\n        }\n    })\n    return {\n        open: () => {\n            l.updateProps({ open: true })\n        },\n        close: () => {\n            l.updateProps({ open: false })\n        },\n    }\n}\nLayer.close = () => {\n    Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}

package/LineProgress/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useId } from \"react\"\r\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\r\n\r\nexport type LineProgressProps = {\r\n    children?: ReactElement;\r\n    thumbSize?: useBreakpointPropsType<number>;\r\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n    value?: useBreakpointPropsType<number>;\r\n    hideTrack?: useBreakpointPropsType<boolean>;\r\n    speed?: useBreakpointPropsType<number>;\r\n}\r\n\r\n\r\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\r\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\r\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\r\n    const _p: any = {}\r\n    if (thumbSize) _p.thumbSize = thumbSize\r\n    if (color) _p.color = color\r\n    if (value) _p.value = value\r\n    if (hideTrack) _p.hideTrack = hideTrack\r\n    if (speed) _p.speed = speed\r\n    const p: any = useBreakpointProps(_p)\r\n\r\n    thumbSize = p.thumbSize ?? 4\r\n    color = p.color ?? \"brand\"\r\n    value = p.value\r\n    hideTrack = p.hideTrack\r\n    speed = p.speed\r\n\r\n    let isVal = typeof value === 'number'\r\n    if (isVal && (value as number) > 100) value = 100\r\n\r\n    return (\r\n        <Tag\r\n            baseClass='line-progress'\r\n            sxr={{\r\n                display: \"flex\",\r\n                alignItems: \"center\",\r\n                width: '100%',\r\n                height: thumbSize,\r\n                position: \"relative\",\r\n                overflow: \"hidden\",\r\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\r\n                radius: 2,\r\n            }}\r\n            ref={ref}\r\n        >\r\n            <Tag\r\n                component=\"span\"\r\n                baseClass=\"line-progress-thumb\"\r\n                sxr={{\r\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\r\n                    width: isVal ? `${value}%` : \"50%\",\r\n                    height: thumbSize,\r\n                    position: \"absolute\",\r\n                    left: 0,\r\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\r\n                    [`@keyframes ${uid}`]: {\r\n                        \"0%\": { left: \"-40%\" },\r\n                        \"50%\": { left: \"20%\", width: \"80%\" },\r\n                        \"100%\": { left: \"100%\", width: \"100%\" }\r\n                    }\r\n                }}\r\n            />\r\n        </Tag >\r\n    )\r\n})\r\n\r\nexport default LineProgress\r\n\r\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
+{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n    children?: ReactElement;\n    thumbSize?: useBreakpointPropsType<number>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    value?: useBreakpointPropsType<number>;\n    hideTrack?: useBreakpointPropsType<boolean>;\n    speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n    const uid = \"line-progress\" + useId().replace(\":\", \"\")\n    let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n    const _p: any = {}\n    if (thumbSize) _p.thumbSize = thumbSize\n    if (color) _p.color = color\n    if (value) _p.value = value\n    if (hideTrack) _p.hideTrack = hideTrack\n    if (speed) _p.speed = speed\n    const p: any = useBreakpointProps(_p)\n\n    thumbSize = p.thumbSize ?? 4\n    color = p.color ?? \"brand\"\n    value = p.value\n    hideTrack = p.hideTrack\n    speed = p.speed\n\n    let isVal = typeof value === 'number'\n    if (isVal && (value as number) > 100) value = 100\n\n    return (\n        <Tag\n            baseClass='line-progress'\n            sxr={{\n                display: \"flex\",\n                alignItems: \"center\",\n                width: '100%',\n                height: thumbSize,\n                position: \"relative\",\n                overflow: \"hidden\",\n                bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\n                radius: 2,\n            }}\n            ref={ref}\n        >\n            <Tag\n                component=\"span\"\n                baseClass=\"line-progress-thumb\"\n                sxr={{\n                    bgcolor: color === 'default' ? `divider` : `${color}`,\n                    width: isVal ? `${value}%` : \"50%\",\n                    height: thumbSize,\n                    position: \"absolute\",\n                    left: 0,\n                    animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n                    [`@keyframes ${uid}`]: {\n                        \"0%\": { left: \"-40%\" },\n                        \"50%\": { left: \"20%\", width: \"80%\" },\n                        \"100%\": { left: \"100%\", width: \"100%\" }\n                    }\n                }}\n            />\n        </Tag >\n    )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}