npm - @xanui/ui - Versions diffs - 1.1.40 → 1.1.41 - Mend

@xanui/ui 1.1.40 → 1.1.41

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (71) hide show

package/Accordion/index.cjs.map +1 -1
package/Accordion/index.js.map +1 -1
package/Alert/index.cjs.map +1 -1
package/Alert/index.js.map +1 -1
package/Button/index.cjs.map +1 -1
package/Button/index.js.map +1 -1
package/Calendar/index.cjs.map +1 -1
package/Calendar/index.js.map +1 -1
package/CalendarInput/index.cjs.map +1 -1
package/CalendarInput/index.js.map +1 -1
package/Checkbox/index.cjs.map +1 -1
package/Checkbox/index.js.map +1 -1
package/CircleProgress/index.cjs.map +1 -1
package/CircleProgress/index.js.map +1 -1
package/ClickOutside/index.cjs.map +1 -1
package/ClickOutside/index.js.map +1 -1
package/Datatable/FilterBox.cjs.map +1 -1
package/Datatable/FilterBox.js.map +1 -1
package/Datatable/Row.cjs.map +1 -1
package/Datatable/Row.js.map +1 -1
package/Datatable/Table.cjs.map +1 -1
package/Datatable/Table.js.map +1 -1
package/Datatable/TableHead.cjs.map +1 -1
package/Datatable/TableHead.js.map +1 -1
package/Datatable/index.cjs.map +1 -1
package/Datatable/index.js.map +1 -1
package/Drawer/index.cjs.map +1 -1
package/Drawer/index.js.map +1 -1
package/Form/index.cjs.map +1 -1
package/Form/index.js.map +1 -1
package/IconButton/index.cjs.map +1 -1
package/IconButton/index.js.map +1 -1
package/Image/index.cjs.map +1 -1
package/Image/index.js.map +1 -1
package/Input/index.cjs.map +1 -1
package/Input/index.js.map +1 -1
package/Layer/index.cjs.map +1 -1
package/Layer/index.js.map +1 -1
package/LineProgress/index.cjs.map +1 -1
package/LineProgress/index.js.map +1 -1
package/Menu/index.cjs.map +1 -1
package/Menu/index.js.map +1 -1
package/Modal/index.cjs.map +1 -1
package/Modal/index.js.map +1 -1
package/NoSSR/index.cjs.map +1 -1
package/NoSSR/index.js.map +1 -1
package/Portal/index.cjs.map +1 -1
package/Portal/index.js.map +1 -1
package/Scrollbar/index.cjs.map +1 -1
package/Scrollbar/index.js.map +1 -1
package/Select/index.cjs.map +1 -1
package/Select/index.js.map +1 -1
package/Switch/index.cjs.map +1 -1
package/Switch/index.js.map +1 -1
package/Tab/index.cjs.map +1 -1
package/Tab/index.js.map +1 -1
package/TablePagination/index.cjs.map +1 -1
package/TablePagination/index.js.map +1 -1
package/Tabs/index.cjs.map +1 -1
package/Tabs/index.js.map +1 -1
package/Toast/index.cjs.map +1 -1
package/Toast/index.js.map +1 -1
package/Tooltip/index.cjs.map +1 -1
package/Tooltip/index.js.map +1 -1
package/package.json +1 -1
package/useAlert/index.cjs.map +1 -1
package/useAlert/index.js.map +1 -1
package/useLayer/index.cjs.map +1 -1
package/useLayer/index.js.map +1 -1
package/useModal/index.cjs.map +1 -1
package/useModal/index.js.map +1 -1

package/ClickOutside/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["'use client'\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n onClickOutside: (e: MouseEvent) => void;\r\n children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n const innerRef = useRef<HTMLElement \| null>(null);\r\n\r\n // merge refs\r\n const setRefs = (el: HTMLElement) => {\r\n innerRef.current = el;\r\n if (typeof forwardedRef === \"function\") {\r\n forwardedRef(el);\r\n } else if (forwardedRef) {\r\n forwardedRef.current = el;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const handler = (e: MouseEvent) => {\r\n if (!innerRef.current) return;\r\n if (!innerRef.current.contains(e.target as Node)) {\r\n onClickOutside(e);\r\n }\r\n };\r\n\r\n document.addEventListener(\"mousedown\", handler);\r\n return () => document.removeEventListener(\"mousedown\", handler);\r\n }, [onClickOutside]);\r\n\r\n return (\r\n <Tag\r\n component=\"div\"\r\n display=\"inline-block\"\r\n {...props}\r\n baseClass='click-outside'\r\n ref={setRefs}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n onClickOutside: (e: MouseEvent) => void;\r\n children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n const innerRef = useRef<HTMLElement \| null>(null);\r\n\r\n // merge refs\r\n const setRefs = (el: HTMLElement) => {\r\n innerRef.current = el;\r\n if (typeof forwardedRef === \"function\") {\r\n forwardedRef(el);\r\n } else if (forwardedRef) {\r\n forwardedRef.current = el;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const handler = (e: MouseEvent) => {\r\n if (!innerRef.current) return;\r\n if (!innerRef.current.contains(e.target as Node)) {\r\n onClickOutside(e);\r\n }\r\n };\r\n\r\n document.addEventListener(\"mousedown\", handler);\r\n return () => document.removeEventListener(\"mousedown\", handler);\r\n }, [onClickOutside]);\r\n\r\n return (\r\n <Tag\r\n component=\"div\"\r\n display=\"inline-block\"\r\n {...props}\r\n baseClass='click-outside'\r\n ref={setRefs}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/ClickOutside/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["'use client'\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n onClickOutside: (e: MouseEvent) => void;\r\n children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n const innerRef = useRef<HTMLElement \| null>(null);\r\n\r\n // merge refs\r\n const setRefs = (el: HTMLElement) => {\r\n innerRef.current = el;\r\n if (typeof forwardedRef === \"function\") {\r\n forwardedRef(el);\r\n } else if (forwardedRef) {\r\n forwardedRef.current = el;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const handler = (e: MouseEvent) => {\r\n if (!innerRef.current) return;\r\n if (!innerRef.current.contains(e.target as Node)) {\r\n onClickOutside(e);\r\n }\r\n };\r\n\r\n document.addEventListener(\"mousedown\", handler);\r\n return () => document.removeEventListener(\"mousedown\", handler);\r\n }, [onClickOutside]);\r\n\r\n return (\r\n <Tag\r\n component=\"div\"\r\n display=\"inline-block\"\r\n {...props}\r\n baseClass='click-outside'\r\n ref={setRefs}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}
1	+ {"version":3,"file":"index.js","sources":["../../src/ClickOutside/index.tsx"],"sourcesContent":["\"use client\";\r\nimport { Tag, TagComponentType, TagProps } from '@xanui/core';\r\nimport React, { useEffect, useRef } from 'react';\r\n\r\nexport type ClickOutsideProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n onClickOutside: (e: MouseEvent) => void;\r\n children: React.ReactElement\r\n};\r\n\r\nconst ClickOutside = React.forwardRef(<T extends TagComponentType = \"div\">({ children, onClickOutside, ...props }: ClickOutsideProps<T>, forwardedRef: any) => {\r\n\r\n const innerRef = useRef<HTMLElement \| null>(null);\r\n\r\n // merge refs\r\n const setRefs = (el: HTMLElement) => {\r\n innerRef.current = el;\r\n if (typeof forwardedRef === \"function\") {\r\n forwardedRef(el);\r\n } else if (forwardedRef) {\r\n forwardedRef.current = el;\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n const handler = (e: MouseEvent) => {\r\n if (!innerRef.current) return;\r\n if (!innerRef.current.contains(e.target as Node)) {\r\n onClickOutside(e);\r\n }\r\n };\r\n\r\n document.addEventListener(\"mousedown\", handler);\r\n return () => document.removeEventListener(\"mousedown\", handler);\r\n }, [onClickOutside]);\r\n\r\n return (\r\n <Tag\r\n component=\"div\"\r\n display=\"inline-block\"\r\n {...props}\r\n baseClass='click-outside'\r\n ref={setRefs}\r\n >\r\n {children}\r\n </Tag>\r\n )\r\n});\r\n\r\nexport default ClickOutside;\r\n"],"names":[],"mappings":";;;;;;AASA;;AAEI;;AAGA;AACI;AACA;;;;AAGI;;AAER;;AAGI;;;AAEI;;;AAGJ;AAEA;;AAEJ;;AAaJ;;"}

package/Datatable/FilterBox.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterBox.cjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["'use client'\r\nimport Stack from '../Stack'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\nimport { DatatablePropsWithState } from './types';\r\nimport IconButton from '../IconButton';\r\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\r\nimport Drawer from '../Drawer';\r\nimport Text from '../Text';\r\nimport React from 'react';\r\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\r\nimport ViewBox from '../ViewBox';\r\nimport DataFilter from '../DataFilter';\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n let {\r\n tabs,\r\n filters,\r\n hideSearch,\r\n slotProps,\r\n skeleton,\r\n state,\r\n update,\r\n } = props\r\n const [openFilter, setOpenFilter] = React.useState(false)\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n\r\n if (checked) return <></>\r\n\r\n return (\r\n <Stack\r\n direction=\"row\"\r\n alignItems=\"center\"\r\n justifyContent=\"space-between\"\r\n zIndex={1}\r\n radius={1}\r\n mb={1}\r\n height={50}\r\n width=\"100%\"\r\n >\r\n <Stack gap={2.4} flexRow>\r\n {\r\n tabs && <Tabs\r\n disabled={skeleton ? true : false}\r\n onChange={(value: any) => {\r\n update({ tab: value })\r\n }}\r\n value={state.tab}\r\n >\r\n {\r\n tabs.map(t => <Tab key={t.label} value={t.value \|\| t.label.toLowerCase()}>{t.label}</Tab>)\r\n }\r\n </Tabs>\r\n }\r\n </Stack>\r\n <Stack\r\n flexRow\r\n gap={2}\r\n className='datatable-header-right-area'\r\n alignItems={\"center\"}\r\n >\r\n {!hideSearch && <Input\r\n disabled={skeleton ? true : false}\r\n endIcon={<IconSearch />}\r\n placeholder='Search...'\r\n {...slotProps?.search}\r\n value={state.search}\r\n onChange={(e: any) => {\r\n update({ search: e.target.value })\r\n }}\r\n />}\r\n {\r\n filters && <Stack>\r\n <IconButton\r\n color=\"default\"\r\n variant={\"text\"}\r\n onClick={() => {\r\n setOpenFilter(true)\r\n }}\r\n >\r\n <FilterListOutlined />\r\n </IconButton>\r\n <Drawer\r\n open={openFilter}\r\n onClickOutside={() => { }}\r\n placement={\"right\"}\r\n >\r\n <ViewBox\r\n height=\"100%\"\r\n p={1}\r\n startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\r\n <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\r\n <IconButton\r\n size=\"small\"\r\n color=\"default\"\r\n variant=\"text\"\r\n onClick={() => {\r\n setOpenFilter(false)\r\n }}\r\n >\r\n <CloseOutlined />\r\n </IconButton>\r\n </Stack>}\r\n >\r\n <Stack\r\n gap={2}\r\n >\r\n <DataFilter\r\n options={filters}\r\n value={state.filters}\r\n onChange={(s) => {\r\n update({ filters: s })\r\n }}\r\n />\r\n </Stack>\r\n </ViewBox>\r\n </Drawer>\r\n </Stack>\r\n }\r\n </Stack>\r\n </Stack>\r\n )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}
1	+ {"version":3,"file":"FilterBox.cjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\r\nimport Stack from '../Stack'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\nimport { DatatablePropsWithState } from './types';\r\nimport IconButton from '../IconButton';\r\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\r\nimport Drawer from '../Drawer';\r\nimport Text from '../Text';\r\nimport React from 'react';\r\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\r\nimport ViewBox from '../ViewBox';\r\nimport DataFilter from '../DataFilter';\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n let {\r\n tabs,\r\n filters,\r\n hideSearch,\r\n slotProps,\r\n skeleton,\r\n state,\r\n update,\r\n } = props\r\n const [openFilter, setOpenFilter] = React.useState(false)\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n\r\n if (checked) return <></>\r\n\r\n return (\r\n <Stack\r\n direction=\"row\"\r\n alignItems=\"center\"\r\n justifyContent=\"space-between\"\r\n zIndex={1}\r\n radius={1}\r\n mb={1}\r\n height={50}\r\n width=\"100%\"\r\n >\r\n <Stack gap={2.4} flexRow>\r\n {\r\n tabs && <Tabs\r\n disabled={skeleton ? true : false}\r\n onChange={(value: any) => {\r\n update({ tab: value })\r\n }}\r\n value={state.tab}\r\n >\r\n {\r\n tabs.map(t => <Tab key={t.label} value={t.value \|\| t.label.toLowerCase()}>{t.label}</Tab>)\r\n }\r\n </Tabs>\r\n }\r\n </Stack>\r\n <Stack\r\n flexRow\r\n gap={2}\r\n className='datatable-header-right-area'\r\n alignItems={\"center\"}\r\n >\r\n {!hideSearch && <Input\r\n disabled={skeleton ? true : false}\r\n endIcon={<IconSearch />}\r\n placeholder='Search...'\r\n {...slotProps?.search}\r\n value={state.search}\r\n onChange={(e: any) => {\r\n update({ search: e.target.value })\r\n }}\r\n />}\r\n {\r\n filters && <Stack>\r\n <IconButton\r\n color=\"default\"\r\n variant={\"text\"}\r\n onClick={() => {\r\n setOpenFilter(true)\r\n }}\r\n >\r\n <FilterListOutlined />\r\n </IconButton>\r\n <Drawer\r\n open={openFilter}\r\n onClickOutside={() => { }}\r\n placement={\"right\"}\r\n >\r\n <ViewBox\r\n height=\"100%\"\r\n p={1}\r\n startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\r\n <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\r\n <IconButton\r\n size=\"small\"\r\n color=\"default\"\r\n variant=\"text\"\r\n onClick={() => {\r\n setOpenFilter(false)\r\n }}\r\n >\r\n <CloseOutlined />\r\n </IconButton>\r\n </Stack>}\r\n >\r\n <Stack\r\n gap={2}\r\n >\r\n <DataFilter\r\n options={filters}\r\n value={state.filters}\r\n onChange={(s) => {\r\n update({ filters: s })\r\n }}\r\n />\r\n </Stack>\r\n </ViewBox>\r\n </Drawer>\r\n </Stack>\r\n }\r\n </Stack>\r\n </Stack>\r\n )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}

package/Datatable/FilterBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["'use client'\r\nimport Stack from '../Stack'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\nimport { DatatablePropsWithState } from './types';\r\nimport IconButton from '../IconButton';\r\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\r\nimport Drawer from '../Drawer';\r\nimport Text from '../Text';\r\nimport React from 'react';\r\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\r\nimport ViewBox from '../ViewBox';\r\nimport DataFilter from '../DataFilter';\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n let {\r\n tabs,\r\n filters,\r\n hideSearch,\r\n slotProps,\r\n skeleton,\r\n state,\r\n update,\r\n } = props\r\n const [openFilter, setOpenFilter] = React.useState(false)\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n\r\n if (checked) return <></>\r\n\r\n return (\r\n <Stack\r\n direction=\"row\"\r\n alignItems=\"center\"\r\n justifyContent=\"space-between\"\r\n zIndex={1}\r\n radius={1}\r\n mb={1}\r\n height={50}\r\n width=\"100%\"\r\n >\r\n <Stack gap={2.4} flexRow>\r\n {\r\n tabs && <Tabs\r\n disabled={skeleton ? true : false}\r\n onChange={(value: any) => {\r\n update({ tab: value })\r\n }}\r\n value={state.tab}\r\n >\r\n {\r\n tabs.map(t => <Tab key={t.label} value={t.value \|\| t.label.toLowerCase()}>{t.label}</Tab>)\r\n }\r\n </Tabs>\r\n }\r\n </Stack>\r\n <Stack\r\n flexRow\r\n gap={2}\r\n className='datatable-header-right-area'\r\n alignItems={\"center\"}\r\n >\r\n {!hideSearch && <Input\r\n disabled={skeleton ? true : false}\r\n endIcon={<IconSearch />}\r\n placeholder='Search...'\r\n {...slotProps?.search}\r\n value={state.search}\r\n onChange={(e: any) => {\r\n update({ search: e.target.value })\r\n }}\r\n />}\r\n {\r\n filters && <Stack>\r\n <IconButton\r\n color=\"default\"\r\n variant={\"text\"}\r\n onClick={() => {\r\n setOpenFilter(true)\r\n }}\r\n >\r\n <FilterListOutlined />\r\n </IconButton>\r\n <Drawer\r\n open={openFilter}\r\n onClickOutside={() => { }}\r\n placement={\"right\"}\r\n >\r\n <ViewBox\r\n height=\"100%\"\r\n p={1}\r\n startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\r\n <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\r\n <IconButton\r\n size=\"small\"\r\n color=\"default\"\r\n variant=\"text\"\r\n onClick={() => {\r\n setOpenFilter(false)\r\n }}\r\n >\r\n <CloseOutlined />\r\n </IconButton>\r\n </Stack>}\r\n >\r\n <Stack\r\n gap={2}\r\n >\r\n <DataFilter\r\n options={filters}\r\n value={state.filters}\r\n onChange={(s) => {\r\n update({ filters: s })\r\n }}\r\n />\r\n </Stack>\r\n </ViewBox>\r\n </Drawer>\r\n </Stack>\r\n }\r\n </Stack>\r\n </Stack>\r\n )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}
1	+ {"version":3,"file":"FilterBox.js","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\r\nimport Stack from '../Stack'\r\nimport Tabs from '../Tabs'\r\nimport Tab from '../Tab'\r\nimport Input from '../Input'\r\nimport IconSearch from '@xanui/icons/Search'\r\nimport { DatatablePropsWithState } from './types';\r\nimport IconButton from '../IconButton';\r\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\r\nimport Drawer from '../Drawer';\r\nimport Text from '../Text';\r\nimport React from 'react';\r\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\r\nimport ViewBox from '../ViewBox';\r\nimport DataFilter from '../DataFilter';\r\n\r\nconst FilterBox = (props: DatatablePropsWithState) => {\r\n let {\r\n tabs,\r\n filters,\r\n hideSearch,\r\n slotProps,\r\n skeleton,\r\n state,\r\n update,\r\n } = props\r\n const [openFilter, setOpenFilter] = React.useState(false)\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n\r\n if (checked) return <></>\r\n\r\n return (\r\n <Stack\r\n direction=\"row\"\r\n alignItems=\"center\"\r\n justifyContent=\"space-between\"\r\n zIndex={1}\r\n radius={1}\r\n mb={1}\r\n height={50}\r\n width=\"100%\"\r\n >\r\n <Stack gap={2.4} flexRow>\r\n {\r\n tabs && <Tabs\r\n disabled={skeleton ? true : false}\r\n onChange={(value: any) => {\r\n update({ tab: value })\r\n }}\r\n value={state.tab}\r\n >\r\n {\r\n tabs.map(t => <Tab key={t.label} value={t.value \|\| t.label.toLowerCase()}>{t.label}</Tab>)\r\n }\r\n </Tabs>\r\n }\r\n </Stack>\r\n <Stack\r\n flexRow\r\n gap={2}\r\n className='datatable-header-right-area'\r\n alignItems={\"center\"}\r\n >\r\n {!hideSearch && <Input\r\n disabled={skeleton ? true : false}\r\n endIcon={<IconSearch />}\r\n placeholder='Search...'\r\n {...slotProps?.search}\r\n value={state.search}\r\n onChange={(e: any) => {\r\n update({ search: e.target.value })\r\n }}\r\n />}\r\n {\r\n filters && <Stack>\r\n <IconButton\r\n color=\"default\"\r\n variant={\"text\"}\r\n onClick={() => {\r\n setOpenFilter(true)\r\n }}\r\n >\r\n <FilterListOutlined />\r\n </IconButton>\r\n <Drawer\r\n open={openFilter}\r\n onClickOutside={() => { }}\r\n placement={\"right\"}\r\n >\r\n <ViewBox\r\n height=\"100%\"\r\n p={1}\r\n startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\r\n <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\r\n <IconButton\r\n size=\"small\"\r\n color=\"default\"\r\n variant=\"text\"\r\n onClick={() => {\r\n setOpenFilter(false)\r\n }}\r\n >\r\n <CloseOutlined />\r\n </IconButton>\r\n </Stack>}\r\n >\r\n <Stack\r\n gap={2}\r\n >\r\n <DataFilter\r\n options={filters}\r\n value={state.filters}\r\n onChange={(s) => {\r\n update({ filters: s })\r\n }}\r\n />\r\n </Stack>\r\n </ViewBox>\r\n </Drawer>\r\n </Stack>\r\n }\r\n </Stack>\r\n </Stack>\r\n )\r\n}\r\n\r\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}

package/Datatable/Row.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Row.cjs","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["'use client'\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n rawRow: DataTableDefaultRow;\r\n row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\r\n const selected = row.id ? state.selected.includes(row?.id) : false\r\n let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n const [target, setTarget] = useState<any>()\r\n const isDisable = (disableRow ? disableRow(rawRow, state) : false) \|\| false\r\n\r\n return (\r\n <TableRow >\r\n {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\r\n {\r\n !!row.id && <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checked={selected}\r\n onChange={() => {\r\n if (isDisable \|\| !row.id) return\r\n let ids = [...state.selected]\r\n ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n let selectedLength = 0\r\n rows.forEach(r => {\r\n const isDisable = (disableRow ? disableRow(r, state) : false) \|\| false\r\n if (!isDisable) selectedLength++\r\n })\r\n\r\n update({\r\n selectAll: selectedLength === ids.length,\r\n selected: ids\r\n })\r\n }}\r\n />\r\n }\r\n\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field, sortable, ...rest }, idx) => {\r\n field = field \|\| label\r\n if (!row[field]) return <TableCell key={idx}></TableCell>\r\n return (\r\n <TableCell\r\n key={idx}\r\n textAlign=\"left\"\r\n {...rest}\r\n bgcolor={selectedColor}\r\n >\r\n {row[field]}\r\n </TableCell>\r\n )\r\n })\r\n }\r\n {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n <IconButton\r\n disabled={isDisable \|\| selected}\r\n onClick={(e: any) => setTarget(e.currentTarget)}\r\n variant=\"text\"\r\n color=\"default\"\r\n >\r\n <ActionIcon />\r\n </IconButton>\r\n <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n <List\r\n bgcolor=\"background.primary\"\r\n minWidth={160}\r\n sx={{\r\n '& > li': {\r\n borderBottom: 1,\r\n '&:last-child': {\r\n borderBottom: 0\r\n }\r\n }\r\n }}\r\n >\r\n {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n return (\r\n <ListItem\r\n key={label}\r\n startIcon={icon}\r\n onClick={(e: any) => {\r\n onClick && onClick(e)\r\n setTarget(null)\r\n }}\r\n >{label}</ListItem>\r\n )\r\n })}\r\n </List>\r\n </Menu>\r\n </TableCell>\r\n }\r\n </TableRow>\r\n )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}
1	+ {"version":3,"file":"Row.cjs","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n rawRow: DataTableDefaultRow;\r\n row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\r\n const selected = row.id ? state.selected.includes(row?.id) : false\r\n let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n const [target, setTarget] = useState<any>()\r\n const isDisable = (disableRow ? disableRow(rawRow, state) : false) \|\| false\r\n\r\n return (\r\n <TableRow >\r\n {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\r\n {\r\n !!row.id && <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checked={selected}\r\n onChange={() => {\r\n if (isDisable \|\| !row.id) return\r\n let ids = [...state.selected]\r\n ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n let selectedLength = 0\r\n rows.forEach(r => {\r\n const isDisable = (disableRow ? disableRow(r, state) : false) \|\| false\r\n if (!isDisable) selectedLength++\r\n })\r\n\r\n update({\r\n selectAll: selectedLength === ids.length,\r\n selected: ids\r\n })\r\n }}\r\n />\r\n }\r\n\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field, sortable, ...rest }, idx) => {\r\n field = field \|\| label\r\n if (!row[field]) return <TableCell key={idx}></TableCell>\r\n return (\r\n <TableCell\r\n key={idx}\r\n textAlign=\"left\"\r\n {...rest}\r\n bgcolor={selectedColor}\r\n >\r\n {row[field]}\r\n </TableCell>\r\n )\r\n })\r\n }\r\n {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n <IconButton\r\n disabled={isDisable \|\| selected}\r\n onClick={(e: any) => setTarget(e.currentTarget)}\r\n variant=\"text\"\r\n color=\"default\"\r\n >\r\n <ActionIcon />\r\n </IconButton>\r\n <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n <List\r\n bgcolor=\"background.primary\"\r\n minWidth={160}\r\n sx={{\r\n '& > li': {\r\n borderBottom: 1,\r\n '&:last-child': {\r\n borderBottom: 0\r\n }\r\n }\r\n }}\r\n >\r\n {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n return (\r\n <ListItem\r\n key={label}\r\n startIcon={icon}\r\n onClick={(e: any) => {\r\n onClick && onClick(e)\r\n setTarget(null)\r\n }}\r\n >{label}</ListItem>\r\n )\r\n })}\r\n </List>\r\n </Menu>\r\n </TableCell>\r\n }\r\n </TableRow>\r\n )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}

package/Datatable/Row.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["'use client'\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n rawRow: DataTableDefaultRow;\r\n row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\r\n const selected = row.id ? state.selected.includes(row?.id) : false\r\n let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n const [target, setTarget] = useState<any>()\r\n const isDisable = (disableRow ? disableRow(rawRow, state) : false) \|\| false\r\n\r\n return (\r\n <TableRow >\r\n {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\r\n {\r\n !!row.id && <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checked={selected}\r\n onChange={() => {\r\n if (isDisable \|\| !row.id) return\r\n let ids = [...state.selected]\r\n ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n let selectedLength = 0\r\n rows.forEach(r => {\r\n const isDisable = (disableRow ? disableRow(r, state) : false) \|\| false\r\n if (!isDisable) selectedLength++\r\n })\r\n\r\n update({\r\n selectAll: selectedLength === ids.length,\r\n selected: ids\r\n })\r\n }}\r\n />\r\n }\r\n\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field, sortable, ...rest }, idx) => {\r\n field = field \|\| label\r\n if (!row[field]) return <TableCell key={idx}></TableCell>\r\n return (\r\n <TableCell\r\n key={idx}\r\n textAlign=\"left\"\r\n {...rest}\r\n bgcolor={selectedColor}\r\n >\r\n {row[field]}\r\n </TableCell>\r\n )\r\n })\r\n }\r\n {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n <IconButton\r\n disabled={isDisable \|\| selected}\r\n onClick={(e: any) => setTarget(e.currentTarget)}\r\n variant=\"text\"\r\n color=\"default\"\r\n >\r\n <ActionIcon />\r\n </IconButton>\r\n <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n <List\r\n bgcolor=\"background.primary\"\r\n minWidth={160}\r\n sx={{\r\n '& > li': {\r\n borderBottom: 1,\r\n '&:last-child': {\r\n borderBottom: 0\r\n }\r\n }\r\n }}\r\n >\r\n {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n return (\r\n <ListItem\r\n key={label}\r\n startIcon={icon}\r\n onClick={(e: any) => {\r\n onClick && onClick(e)\r\n setTarget(null)\r\n }}\r\n >{label}</ListItem>\r\n )\r\n })}\r\n </List>\r\n </Menu>\r\n </TableCell>\r\n }\r\n </TableRow>\r\n )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}
1	+ {"version":3,"file":"Row.js","sources":["../../src/Datatable/Row.tsx"],"sourcesContent":["\"use client\";\r\nimport { useState } from 'react'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IconButton from '../IconButton'\r\nimport List from '../List'\r\nimport ListItem from '../ListItem'\r\nimport ActionIcon from '@xanui/icons/MoreVert'\r\nimport Menu from '../Menu'\r\nimport { DataTableDefaultRow, DatatablePropsWithState } from './types';\r\n\r\n\r\ntype Props = DatatablePropsWithState & {\r\n rawRow: DataTableDefaultRow;\r\n row: DataTableDefaultRow;\r\n}\r\n\r\nconst Row = ({ rows, rawRow, row, rowAction, disableRow, hideCheckbox, columns, compact, state, update }: Props) => {\r\n const selected = row.id ? state.selected.includes(row?.id) : false\r\n let selectedColor = selected ? \"primary.soft\" : \"transparent\"\r\n const [target, setTarget] = useState<any>()\r\n const isDisable = (disableRow ? disableRow(rawRow, state) : false) \|\| false\r\n\r\n return (\r\n <TableRow >\r\n {!hideCheckbox && <TableCell width={40} bgcolor={selectedColor}>\r\n {\r\n !!row.id && <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checked={selected}\r\n onChange={() => {\r\n if (isDisable \|\| !row.id) return\r\n let ids = [...state.selected]\r\n ids.includes(row.id) ? ids.splice(ids.indexOf(row.id), 1) : ids.push(row.id)\r\n let selectedLength = 0\r\n rows.forEach(r => {\r\n const isDisable = (disableRow ? disableRow(r, state) : false) \|\| false\r\n if (!isDisable) selectedLength++\r\n })\r\n\r\n update({\r\n selectAll: selectedLength === ids.length,\r\n selected: ids\r\n })\r\n }}\r\n />\r\n }\r\n\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field, sortable, ...rest }, idx) => {\r\n field = field \|\| label\r\n if (!row[field]) return <TableCell key={idx}></TableCell>\r\n return (\r\n <TableCell\r\n key={idx}\r\n textAlign=\"left\"\r\n {...rest}\r\n bgcolor={selectedColor}\r\n >\r\n {row[field]}\r\n </TableCell>\r\n )\r\n })\r\n }\r\n {!!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell width={30} bgcolor={selectedColor} borderColor=\"divider\">\r\n <IconButton\r\n disabled={isDisable \|\| selected}\r\n onClick={(e: any) => setTarget(e.currentTarget)}\r\n variant=\"text\"\r\n color=\"default\"\r\n >\r\n <ActionIcon />\r\n </IconButton>\r\n <Menu target={target} placement=\"bottom-right\" onClickOutside={() => setTarget(null)}>\r\n <List\r\n bgcolor=\"background.primary\"\r\n minWidth={160}\r\n sx={{\r\n '& > li': {\r\n borderBottom: 1,\r\n '&:last-child': {\r\n borderBottom: 0\r\n }\r\n }\r\n }}\r\n >\r\n {rowAction({ row, state }).map(({ label, icon, onClick }) => {\r\n return (\r\n <ListItem\r\n key={label}\r\n startIcon={icon}\r\n onClick={(e: any) => {\r\n onClick && onClick(e)\r\n setTarget(null)\r\n }}\r\n >{label}</ListItem>\r\n )\r\n })}\r\n </List>\r\n </Menu>\r\n </TableCell>\r\n }\r\n </TableRow>\r\n )\r\n}\r\n\r\nexport default Row"],"names":[],"mappings":";;;;;;;;;;;;;AAkBA;;;;;;;AAc4B;;;AAEA;;AAEA;;AAEI;AAAgB;AACpB;AAEA;AACI;AACA;AACH;AACL;;AAOJ;AACA;AAAiB;;;AA2BT;AACI;AACA;AACI;AACH;AACJ;;AAID;AAKY;;AAEJ;AAGZ;AAOxB;;"}

package/Datatable/Table.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.cjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["'use client'\r\n\r\nimport TableHead from './TableHead'\r\nimport Table from '../Table'\r\nimport TableBody from '../TableBody'\r\nimport Row from './Row'\r\nimport { DatatablePropsWithState } from './types';\r\n\r\nconst TableArea = (props: DatatablePropsWithState) => {\r\n let {\r\n rows,\r\n compact,\r\n renderRow,\r\n state,\r\n update,\r\n slotProps\r\n } = props\r\n\r\n return (\r\n <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\r\n <TableHead {...props} update={update} state={state} />\r\n <TableBody\r\n sx={{\r\n '& tr:last-child td': {\r\n borderBottom: 0\r\n }\r\n }}\r\n >\r\n {\r\n rows?.map((row: any, idx) => {\r\n let _row = renderRow ? renderRow({ ...row }, state) : row\r\n return <Row\r\n key={`dt-row-${row.id}-${idx}`}\r\n rawRow={row}\r\n row={_row}\r\n {...props}\r\n update={update}\r\n state={state}\r\n />\r\n })\r\n }\r\n </TableBody>\r\n </Table>\r\n )\r\n}\r\n\r\nexport default TableArea"],"names":[],"mappings":";;;;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}
1	+ {"version":3,"file":"Table.cjs","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport TableHead from './TableHead'\r\nimport Table from '../Table'\r\nimport TableBody from '../TableBody'\r\nimport Row from './Row'\r\nimport { DatatablePropsWithState } from './types';\r\n\r\nconst TableArea = (props: DatatablePropsWithState) => {\r\n let {\r\n rows,\r\n compact,\r\n renderRow,\r\n state,\r\n update,\r\n slotProps\r\n } = props\r\n\r\n return (\r\n <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\r\n <TableHead {...props} update={update} state={state} />\r\n <TableBody\r\n sx={{\r\n '& tr:last-child td': {\r\n borderBottom: 0\r\n }\r\n }}\r\n >\r\n {\r\n rows?.map((row: any, idx) => {\r\n let _row = renderRow ? renderRow({ ...row }, state) : row\r\n return <Row\r\n key={`dt-row-${row.id}-${idx}`}\r\n rawRow={row}\r\n row={_row}\r\n {...props}\r\n update={update}\r\n state={state}\r\n />\r\n })\r\n }\r\n </TableBody>\r\n </Table>\r\n )\r\n}\r\n\r\nexport default TableArea"],"names":[],"mappings":";;;;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}

package/Datatable/Table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["'use client'\r\n\r\nimport TableHead from './TableHead'\r\nimport Table from '../Table'\r\nimport TableBody from '../TableBody'\r\nimport Row from './Row'\r\nimport { DatatablePropsWithState } from './types';\r\n\r\nconst TableArea = (props: DatatablePropsWithState) => {\r\n let {\r\n rows,\r\n compact,\r\n renderRow,\r\n state,\r\n update,\r\n slotProps\r\n } = props\r\n\r\n return (\r\n <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\r\n <TableHead {...props} update={update} state={state} />\r\n <TableBody\r\n sx={{\r\n '& tr:last-child td': {\r\n borderBottom: 0\r\n }\r\n }}\r\n >\r\n {\r\n rows?.map((row: any, idx) => {\r\n let _row = renderRow ? renderRow({ ...row }, state) : row\r\n return <Row\r\n key={`dt-row-${row.id}-${idx}`}\r\n rawRow={row}\r\n row={_row}\r\n {...props}\r\n update={update}\r\n state={state}\r\n />\r\n })\r\n }\r\n </TableBody>\r\n </Table>\r\n )\r\n}\r\n\r\nexport default TableArea"],"names":[],"mappings":";;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}
1	+ {"version":3,"file":"Table.js","sources":["../../src/Datatable/Table.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport TableHead from './TableHead'\r\nimport Table from '../Table'\r\nimport TableBody from '../TableBody'\r\nimport Row from './Row'\r\nimport { DatatablePropsWithState } from './types';\r\n\r\nconst TableArea = (props: DatatablePropsWithState) => {\r\n let {\r\n rows,\r\n compact,\r\n renderRow,\r\n state,\r\n update,\r\n slotProps\r\n } = props\r\n\r\n return (\r\n <Table width=\"100%\" size={compact ? \"small\" : \"medium\"} border=\"1px solid\" borderColor=\"divider\" {...slotProps?.table}>\r\n <TableHead {...props} update={update} state={state} />\r\n <TableBody\r\n sx={{\r\n '& tr:last-child td': {\r\n borderBottom: 0\r\n }\r\n }}\r\n >\r\n {\r\n rows?.map((row: any, idx) => {\r\n let _row = renderRow ? renderRow({ ...row }, state) : row\r\n return <Row\r\n key={`dt-row-${row.id}-${idx}`}\r\n rawRow={row}\r\n row={_row}\r\n {...props}\r\n update={update}\r\n state={state}\r\n />\r\n })\r\n }\r\n </TableBody>\r\n </Table>\r\n )\r\n}\r\n\r\nexport default TableArea"],"names":[],"mappings":";;;;;;;AAQA;AACG;;AAcY;AACG;AACF;AACH;AAIK;AACA;AAQH;AAKf;;"}

package/Datatable/TableHead.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHead.cjs","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["'use client'\r\nimport TableHead from '../TableHead'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\r\nimport { DatatablePropsWithState } from './types';\r\nimport Stack from '../Stack';\r\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\r\nimport ArrowDropUp from '@xanui/icons/ArrowDropUp';\r\nimport Text from '../Text';\r\n\r\n\r\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }: DatatablePropsWithState) => {\r\n if (!columns.length) return <></>\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n const sortables = state.sortable \|\| {}\r\n\r\n return (\r\n <TableHead position=\"relative\">\r\n <TableRow bgcolor=\"default\" borderBottom={1} >\r\n {!hideCheckbox && <TableCell th width={40}>\r\n <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\r\n checked={checked}\r\n onChange={() => {\r\n let ids: any = []\r\n let undefinedCount = 0\r\n for (let i = 0; i < rows.length; i++) {\r\n const row = rows[i]\r\n const isDisable = (disableRow ? disableRow(row, state) : false) \|\| false\r\n if (!isDisable && row.id) {\r\n ids.push(row.id)\r\n } else {\r\n undefinedCount += 1\r\n }\r\n }\r\n\r\n if (undefinedCount) {\r\n update({\r\n selected: state.selected.length ? [] : ids,\r\n selectAll: !state.selected.length\r\n })\r\n } else {\r\n update({\r\n selected: state.selectAll ? [] : ids,\r\n selectAll: !state.selectAll\r\n })\r\n }\r\n }}\r\n />\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell\r\n key={idx}\r\n th\r\n textAlign=\"left\"\r\n {...rest}\r\n >\r\n <Stack\r\n disabled={skeleton ? true : false}\r\n flexRow\r\n alignItems=\"center\"\r\n cursor={sortable ? \"pointer\" : \"default\"}\r\n userSelect={\"none\"}\r\n onClick={() => {\r\n\r\n if (sortable) {\r\n let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\r\n update({\r\n sortable: {\r\n ...sortables,\r\n [_f as any]: newSort\r\n }\r\n })\r\n }\r\n }}\r\n >\r\n <Text color=\"text.secondary\">{label}</Text>\r\n {sortable && <>\r\n {\r\n sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\r\n }\r\n </>}\r\n </Stack>\r\n </TableCell>)\r\n }\r\n {\r\n !!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell th width={30} />\r\n }\r\n </TableRow>\r\n </TableHead>\r\n )\r\n}\r\n\r\nexport default TableHeadRender\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaA;;;AACyB;AACrB;AACA;AAEA;;;AAWwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;;;AAeG;AACA;;AAKC;;AAET;AASI;AAQhC;;"}
1	+ {"version":3,"file":"TableHead.cjs","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\r\nimport TableHead from '../TableHead'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\r\nimport { DatatablePropsWithState } from './types';\r\nimport Stack from '../Stack';\r\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\r\nimport ArrowDropUp from '@xanui/icons/ArrowDropUp';\r\nimport Text from '../Text';\r\n\r\n\r\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }: DatatablePropsWithState) => {\r\n if (!columns.length) return <></>\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n const sortables = state.sortable \|\| {}\r\n\r\n return (\r\n <TableHead position=\"relative\">\r\n <TableRow bgcolor=\"default\" borderBottom={1} >\r\n {!hideCheckbox && <TableCell th width={40}>\r\n <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\r\n checked={checked}\r\n onChange={() => {\r\n let ids: any = []\r\n let undefinedCount = 0\r\n for (let i = 0; i < rows.length; i++) {\r\n const row = rows[i]\r\n const isDisable = (disableRow ? disableRow(row, state) : false) \|\| false\r\n if (!isDisable && row.id) {\r\n ids.push(row.id)\r\n } else {\r\n undefinedCount += 1\r\n }\r\n }\r\n\r\n if (undefinedCount) {\r\n update({\r\n selected: state.selected.length ? [] : ids,\r\n selectAll: !state.selected.length\r\n })\r\n } else {\r\n update({\r\n selected: state.selectAll ? [] : ids,\r\n selectAll: !state.selectAll\r\n })\r\n }\r\n }}\r\n />\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell\r\n key={idx}\r\n th\r\n textAlign=\"left\"\r\n {...rest}\r\n >\r\n <Stack\r\n disabled={skeleton ? true : false}\r\n flexRow\r\n alignItems=\"center\"\r\n cursor={sortable ? \"pointer\" : \"default\"}\r\n userSelect={\"none\"}\r\n onClick={() => {\r\n\r\n if (sortable) {\r\n let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\r\n update({\r\n sortable: {\r\n ...sortables,\r\n [_f as any]: newSort\r\n }\r\n })\r\n }\r\n }}\r\n >\r\n <Text color=\"text.secondary\">{label}</Text>\r\n {sortable && <>\r\n {\r\n sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\r\n }\r\n </>}\r\n </Stack>\r\n </TableCell>)\r\n }\r\n {\r\n !!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell th width={30} />\r\n }\r\n </TableRow>\r\n </TableHead>\r\n )\r\n}\r\n\r\nexport default TableHeadRender\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaA;;;AACyB;AACrB;AACA;AAEA;;;AAWwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;;;AAeG;AACA;;AAKC;;AAET;AASI;AAQhC;;"}

package/Datatable/TableHead.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["'use client'\r\nimport TableHead from '../TableHead'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\r\nimport { DatatablePropsWithState } from './types';\r\nimport Stack from '../Stack';\r\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\r\nimport ArrowDropUp from '@xanui/icons/ArrowDropUp';\r\nimport Text from '../Text';\r\n\r\n\r\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }: DatatablePropsWithState) => {\r\n if (!columns.length) return <></>\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n const sortables = state.sortable \|\| {}\r\n\r\n return (\r\n <TableHead position=\"relative\">\r\n <TableRow bgcolor=\"default\" borderBottom={1} >\r\n {!hideCheckbox && <TableCell th width={40}>\r\n <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\r\n checked={checked}\r\n onChange={() => {\r\n let ids: any = []\r\n let undefinedCount = 0\r\n for (let i = 0; i < rows.length; i++) {\r\n const row = rows[i]\r\n const isDisable = (disableRow ? disableRow(row, state) : false) \|\| false\r\n if (!isDisable && row.id) {\r\n ids.push(row.id)\r\n } else {\r\n undefinedCount += 1\r\n }\r\n }\r\n\r\n if (undefinedCount) {\r\n update({\r\n selected: state.selected.length ? [] : ids,\r\n selectAll: !state.selected.length\r\n })\r\n } else {\r\n update({\r\n selected: state.selectAll ? [] : ids,\r\n selectAll: !state.selectAll\r\n })\r\n }\r\n }}\r\n />\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell\r\n key={idx}\r\n th\r\n textAlign=\"left\"\r\n {...rest}\r\n >\r\n <Stack\r\n disabled={skeleton ? true : false}\r\n flexRow\r\n alignItems=\"center\"\r\n cursor={sortable ? \"pointer\" : \"default\"}\r\n userSelect={\"none\"}\r\n onClick={() => {\r\n\r\n if (sortable) {\r\n let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\r\n update({\r\n sortable: {\r\n ...sortables,\r\n [_f as any]: newSort\r\n }\r\n })\r\n }\r\n }}\r\n >\r\n <Text color=\"text.secondary\">{label}</Text>\r\n {sortable && <>\r\n {\r\n sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\r\n }\r\n </>}\r\n </Stack>\r\n </TableCell>)\r\n }\r\n {\r\n !!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell th width={30} />\r\n }\r\n </TableRow>\r\n </TableHead>\r\n )\r\n}\r\n\r\nexport default TableHeadRender\r\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA;;;AACyB;AACrB;AACA;AAEA;;;AAWwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;;;AAeG;AACA;;AAKC;;AAET;AASI;AAQhC;;"}
1	+ {"version":3,"file":"TableHead.js","sources":["../../src/Datatable/TableHead.tsx"],"sourcesContent":["\"use client\";\r\nimport TableHead from '../TableHead'\r\nimport TableRow from '../TableRow'\r\nimport TableCell from '../TableCell'\r\nimport Checkbox from '../Checkbox'\r\nimport IntermidiatIcon from '@xanui/icons/IndeterminateCheckBox'\r\nimport { DatatablePropsWithState } from './types';\r\nimport Stack from '../Stack';\r\nimport ArrowDropDown from '@xanui/icons/ArrowDropDown';\r\nimport ArrowDropUp from '@xanui/icons/ArrowDropUp';\r\nimport Text from '../Text';\r\n\r\n\r\nconst TableHeadRender = ({ columns, rows, disableRow, rowAction, hideCheckbox, compact, skeleton, state, update }: DatatablePropsWithState) => {\r\n if (!columns.length) return <></>\r\n let checked = state.selectAll \|\| !!state.selected.length\r\n const sortables = state.sortable \|\| {}\r\n\r\n return (\r\n <TableHead position=\"relative\">\r\n <TableRow bgcolor=\"default\" borderBottom={1} >\r\n {!hideCheckbox && <TableCell th width={40}>\r\n <Checkbox\r\n size={compact ? \"small\" : \"medium\"}\r\n checkIcon={state.selected.length && !state.selectAll ? <IntermidiatIcon /> : undefined}\r\n checked={checked}\r\n onChange={() => {\r\n let ids: any = []\r\n let undefinedCount = 0\r\n for (let i = 0; i < rows.length; i++) {\r\n const row = rows[i]\r\n const isDisable = (disableRow ? disableRow(row, state) : false) \|\| false\r\n if (!isDisable && row.id) {\r\n ids.push(row.id)\r\n } else {\r\n undefinedCount += 1\r\n }\r\n }\r\n\r\n if (undefinedCount) {\r\n update({\r\n selected: state.selected.length ? [] : ids,\r\n selectAll: !state.selected.length\r\n })\r\n } else {\r\n update({\r\n selected: state.selectAll ? [] : ids,\r\n selectAll: !state.selectAll\r\n })\r\n }\r\n }}\r\n />\r\n </TableCell>}\r\n {\r\n columns.map(({ label, field: _f, sortable, ...rest }, idx) => <TableCell\r\n key={idx}\r\n th\r\n textAlign=\"left\"\r\n {...rest}\r\n >\r\n <Stack\r\n disabled={skeleton ? true : false}\r\n flexRow\r\n alignItems=\"center\"\r\n cursor={sortable ? \"pointer\" : \"default\"}\r\n userSelect={\"none\"}\r\n onClick={() => {\r\n\r\n if (sortable) {\r\n let newSort: any = sortables[_f as any] === 'asc' ? 'desc' : 'asc'\r\n update({\r\n sortable: {\r\n ...sortables,\r\n [_f as any]: newSort\r\n }\r\n })\r\n }\r\n }}\r\n >\r\n <Text color=\"text.secondary\">{label}</Text>\r\n {sortable && <>\r\n {\r\n sortables[_f as any] === 'asc' ? <ArrowDropDown /> : <ArrowDropUp />\r\n }\r\n </>}\r\n </Stack>\r\n </TableCell>)\r\n }\r\n {\r\n !!(rows.length && rowAction && rowAction((rows as any)[0])?.length) && <TableCell th width={30} />\r\n }\r\n </TableRow>\r\n </TableHead>\r\n )\r\n}\r\n\r\nexport default TableHeadRender\r\n"],"names":[],"mappings":";;;;;;;;;;;;;AAaA;;;AACyB;AACrB;AACA;AAEA;;;AAWwB;AACI;;AAEA;AACI;;;;;;;AAOJ;AACI;AACA;AACH;;;AAED;;AAEI;AACH;;AAET;AAIS;;;AAeG;AACA;;AAKC;;AAET;AASI;AAQhC;;"}

package/Datatable/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useEffect, useMemo, useState } from 'react'\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, { TablePaginationState } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { DatatableProps, DatatableState } from './types';\r\nimport Skeleton from '../Skeleton';\r\n\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n let [p] = useInterface<any>(\"Datatable\", props, {})\r\n\r\n let _props = useMemo(() => {\r\n let np = { ...p }\r\n\r\n if (typeof np.skeleton === 'number' \|\| np.skeleton === true) {\r\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\r\n let length = np.skeleton === true ? limit : np.skeleton\r\n\r\n if (!np.hideCheckbox) {\r\n np.columns = [{\r\n label: '', field: \"__checkbox\", width: 34\r\n }, ...np.columns]\r\n }\r\n\r\n if (np.rowAction) {\r\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\r\n }\r\n\r\n let columns = np.columns \|\| []\r\n\r\n np.rows = []\r\n for (let i = 0; i < length; i++) {\r\n let r: any = { id: i }\r\n for (let col of columns) {\r\n r[col.field] = \"\"\r\n }\r\n np.rows.push(r)\r\n }\r\n\r\n np.renderRow = (r: any) => {\r\n for (let col of columns) {\r\n r[col.field] = <Skeleton\r\n animation={\"wave\"}\r\n height={16}\r\n radius={.5}\r\n width={\"100%\"}\r\n />\r\n }\r\n return r\r\n }\r\n np.hideCheckbox = true\r\n np.rowAction = undefined\r\n }\r\n return np\r\n }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\r\n\r\n let {\r\n rows,\r\n tabs,\r\n\r\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\r\n defaultState = {},\r\n onStateChange,\r\n\r\n fixedHeader,\r\n hidePagination,\r\n slotProps,\r\n\r\n\r\n // skip props for ViewBox\r\n skeleton,\r\n rowAction,\r\n disableRow,\r\n renderRow,\r\n filters,\r\n hideCheckbox,\r\n hideSearch,\r\n columns,\r\n compact,\r\n\r\n ...viewBoxProps\r\n } = _props\r\n\r\n const [state, setState] = useState<DatatableState>({\r\n selected: defaultState?.selected \|\| [],\r\n selectAll: defaultState?.selectAll \|\| false,\r\n pagination: {\r\n page: defaultState?.page \|\| 1,\r\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\r\n from: defaultState?.from \|\| 1,\r\n to: defaultState?.to \|\| (perpages && perpages.length > 0 ? perpages[0] : 10),\r\n },\r\n tab: tabs ? (defaultState?.tab \|\| tabs[0].value \|\| tabs[0].label.toLowerCase()) : \"\",\r\n search: defaultState?.search \|\| \"\",\r\n sortable: defaultState?.sortable \|\| {},\r\n filters: defaultState?.filter \|\| {}\r\n })\r\n\r\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\r\n\r\n useEffect(() => {\r\n if (onStateChange) {\r\n onStateChange(state)\r\n }\r\n }, [state])\r\n\r\n return (\r\n <ViewBox\r\n height=\"100%\"\r\n {...viewBoxProps}\r\n baseClass='datatable'\r\n ref={ref as any}\r\n sx={{\r\n ...viewBoxProps?.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 {!hidePagination && <TablePagination\r\n disabled={_props.skeleton ? true : false}\r\n {...slotProps?.pagination}\r\n total={total \|\| rows.length}\r\n page={state.pagination.page}\r\n perpage={state.pagination.perpage}\r\n perpages={perpages}\r\n slotProps={{\r\n select: {\r\n size: \"small\",\r\n }\r\n }}\r\n onChange={(state: TablePaginationState) => {\r\n update({ pagination: state })\r\n }}\r\n />}\r\n </Stack>\r\n </ViewBox>\r\n )\r\n})\r\n\r\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useState } from 'react'\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, { TablePaginationState } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { DatatableProps, DatatableState } from './types';\r\nimport Skeleton from '../Skeleton';\r\n\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n let [p] = useInterface<any>(\"Datatable\", props, {})\r\n\r\n let _props = useMemo(() => {\r\n let np = { ...p }\r\n\r\n if (typeof np.skeleton === 'number' \|\| np.skeleton === true) {\r\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\r\n let length = np.skeleton === true ? limit : np.skeleton\r\n\r\n if (!np.hideCheckbox) {\r\n np.columns = [{\r\n label: '', field: \"__checkbox\", width: 34\r\n }, ...np.columns]\r\n }\r\n\r\n if (np.rowAction) {\r\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\r\n }\r\n\r\n let columns = np.columns \|\| []\r\n\r\n np.rows = []\r\n for (let i = 0; i < length; i++) {\r\n let r: any = { id: i }\r\n for (let col of columns) {\r\n r[col.field] = \"\"\r\n }\r\n np.rows.push(r)\r\n }\r\n\r\n np.renderRow = (r: any) => {\r\n for (let col of columns) {\r\n r[col.field] = <Skeleton\r\n animation={\"wave\"}\r\n height={16}\r\n radius={.5}\r\n width={\"100%\"}\r\n />\r\n }\r\n return r\r\n }\r\n np.hideCheckbox = true\r\n np.rowAction = undefined\r\n }\r\n return np\r\n }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\r\n\r\n let {\r\n rows,\r\n tabs,\r\n\r\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\r\n defaultState = {},\r\n onStateChange,\r\n\r\n fixedHeader,\r\n hidePagination,\r\n slotProps,\r\n\r\n\r\n // skip props for ViewBox\r\n skeleton,\r\n rowAction,\r\n disableRow,\r\n renderRow,\r\n filters,\r\n hideCheckbox,\r\n hideSearch,\r\n columns,\r\n compact,\r\n\r\n ...viewBoxProps\r\n } = _props\r\n\r\n const [state, setState] = useState<DatatableState>({\r\n selected: defaultState?.selected \|\| [],\r\n selectAll: defaultState?.selectAll \|\| false,\r\n pagination: {\r\n page: defaultState?.page \|\| 1,\r\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\r\n from: defaultState?.from \|\| 1,\r\n to: defaultState?.to \|\| (perpages && perpages.length > 0 ? perpages[0] : 10),\r\n },\r\n tab: tabs ? (defaultState?.tab \|\| tabs[0].value \|\| tabs[0].label.toLowerCase()) : \"\",\r\n search: defaultState?.search \|\| \"\",\r\n sortable: defaultState?.sortable \|\| {},\r\n filters: defaultState?.filter \|\| {}\r\n })\r\n\r\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\r\n\r\n useEffect(() => {\r\n if (onStateChange) {\r\n onStateChange(state)\r\n }\r\n }, [state])\r\n\r\n return (\r\n <ViewBox\r\n height=\"100%\"\r\n {...viewBoxProps}\r\n baseClass='datatable'\r\n ref={ref as any}\r\n sx={{\r\n ...viewBoxProps?.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 {!hidePagination && <TablePagination\r\n disabled={_props.skeleton ? true : false}\r\n {...slotProps?.pagination}\r\n total={total \|\| rows.length}\r\n page={state.pagination.page}\r\n perpage={state.pagination.perpage}\r\n perpages={perpages}\r\n slotProps={{\r\n select: {\r\n size: \"small\",\r\n }\r\n }}\r\n onChange={(state: TablePaginationState) => {\r\n update({ pagination: state })\r\n }}\r\n />}\r\n </Stack>\r\n </ViewBox>\r\n )\r\n})\r\n\r\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}

package/Datatable/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { useEffect, useMemo, useState } from 'react'\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, { TablePaginationState } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { DatatableProps, DatatableState } from './types';\r\nimport Skeleton from '../Skeleton';\r\n\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n let [p] = useInterface<any>(\"Datatable\", props, {})\r\n\r\n let _props = useMemo(() => {\r\n let np = { ...p }\r\n\r\n if (typeof np.skeleton === 'number' \|\| np.skeleton === true) {\r\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\r\n let length = np.skeleton === true ? limit : np.skeleton\r\n\r\n if (!np.hideCheckbox) {\r\n np.columns = [{\r\n label: '', field: \"__checkbox\", width: 34\r\n }, ...np.columns]\r\n }\r\n\r\n if (np.rowAction) {\r\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\r\n }\r\n\r\n let columns = np.columns \|\| []\r\n\r\n np.rows = []\r\n for (let i = 0; i < length; i++) {\r\n let r: any = { id: i }\r\n for (let col of columns) {\r\n r[col.field] = \"\"\r\n }\r\n np.rows.push(r)\r\n }\r\n\r\n np.renderRow = (r: any) => {\r\n for (let col of columns) {\r\n r[col.field] = <Skeleton\r\n animation={\"wave\"}\r\n height={16}\r\n radius={.5}\r\n width={\"100%\"}\r\n />\r\n }\r\n return r\r\n }\r\n np.hideCheckbox = true\r\n np.rowAction = undefined\r\n }\r\n return np\r\n }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\r\n\r\n let {\r\n rows,\r\n tabs,\r\n\r\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\r\n defaultState = {},\r\n onStateChange,\r\n\r\n fixedHeader,\r\n hidePagination,\r\n slotProps,\r\n\r\n\r\n // skip props for ViewBox\r\n skeleton,\r\n rowAction,\r\n disableRow,\r\n renderRow,\r\n filters,\r\n hideCheckbox,\r\n hideSearch,\r\n columns,\r\n compact,\r\n\r\n ...viewBoxProps\r\n } = _props\r\n\r\n const [state, setState] = useState<DatatableState>({\r\n selected: defaultState?.selected \|\| [],\r\n selectAll: defaultState?.selectAll \|\| false,\r\n pagination: {\r\n page: defaultState?.page \|\| 1,\r\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\r\n from: defaultState?.from \|\| 1,\r\n to: defaultState?.to \|\| (perpages && perpages.length > 0 ? perpages[0] : 10),\r\n },\r\n tab: tabs ? (defaultState?.tab \|\| tabs[0].value \|\| tabs[0].label.toLowerCase()) : \"\",\r\n search: defaultState?.search \|\| \"\",\r\n sortable: defaultState?.sortable \|\| {},\r\n filters: defaultState?.filter \|\| {}\r\n })\r\n\r\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\r\n\r\n useEffect(() => {\r\n if (onStateChange) {\r\n onStateChange(state)\r\n }\r\n }, [state])\r\n\r\n return (\r\n <ViewBox\r\n height=\"100%\"\r\n {...viewBoxProps}\r\n baseClass='datatable'\r\n ref={ref as any}\r\n sx={{\r\n ...viewBoxProps?.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 {!hidePagination && <TablePagination\r\n disabled={_props.skeleton ? true : false}\r\n {...slotProps?.pagination}\r\n total={total \|\| rows.length}\r\n page={state.pagination.page}\r\n perpage={state.pagination.perpage}\r\n perpages={perpages}\r\n slotProps={{\r\n select: {\r\n size: \"small\",\r\n }\r\n }}\r\n onChange={(state: TablePaginationState) => {\r\n update({ pagination: state })\r\n }}\r\n />}\r\n </Stack>\r\n </ViewBox>\r\n )\r\n})\r\n\r\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
1	+ {"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { useEffect, useMemo, useState } from 'react'\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, { TablePaginationState } from '../TablePagination'\r\nimport Stack from '../Stack'\r\nimport { DatatableProps, DatatableState } from './types';\r\nimport Skeleton from '../Skeleton';\r\n\r\n\r\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\r\n let [p] = useInterface<any>(\"Datatable\", props, {})\r\n\r\n let _props = useMemo(() => {\r\n let np = { ...p }\r\n\r\n if (typeof np.skeleton === 'number' \|\| np.skeleton === true) {\r\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\r\n let length = np.skeleton === true ? limit : np.skeleton\r\n\r\n if (!np.hideCheckbox) {\r\n np.columns = [{\r\n label: '', field: \"__checkbox\", width: 34\r\n }, ...np.columns]\r\n }\r\n\r\n if (np.rowAction) {\r\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\r\n }\r\n\r\n let columns = np.columns \|\| []\r\n\r\n np.rows = []\r\n for (let i = 0; i < length; i++) {\r\n let r: any = { id: i }\r\n for (let col of columns) {\r\n r[col.field] = \"\"\r\n }\r\n np.rows.push(r)\r\n }\r\n\r\n np.renderRow = (r: any) => {\r\n for (let col of columns) {\r\n r[col.field] = <Skeleton\r\n animation={\"wave\"}\r\n height={16}\r\n radius={.5}\r\n width={\"100%\"}\r\n />\r\n }\r\n return r\r\n }\r\n np.hideCheckbox = true\r\n np.rowAction = undefined\r\n }\r\n return np\r\n }, [p.skeleton, props.columns, props.rowAction, p.hideCheckbox, p.rows])\r\n\r\n let {\r\n rows,\r\n tabs,\r\n\r\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\r\n defaultState = {},\r\n onStateChange,\r\n\r\n fixedHeader,\r\n hidePagination,\r\n slotProps,\r\n\r\n\r\n // skip props for ViewBox\r\n skeleton,\r\n rowAction,\r\n disableRow,\r\n renderRow,\r\n filters,\r\n hideCheckbox,\r\n hideSearch,\r\n columns,\r\n compact,\r\n\r\n ...viewBoxProps\r\n } = _props\r\n\r\n const [state, setState] = useState<DatatableState>({\r\n selected: defaultState?.selected \|\| [],\r\n selectAll: defaultState?.selectAll \|\| false,\r\n pagination: {\r\n page: defaultState?.page \|\| 1,\r\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\r\n from: defaultState?.from \|\| 1,\r\n to: defaultState?.to \|\| (perpages && perpages.length > 0 ? perpages[0] : 10),\r\n },\r\n tab: tabs ? (defaultState?.tab \|\| tabs[0].value \|\| tabs[0].label.toLowerCase()) : \"\",\r\n search: defaultState?.search \|\| \"\",\r\n sortable: defaultState?.sortable \|\| {},\r\n filters: defaultState?.filter \|\| {}\r\n })\r\n\r\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\r\n\r\n useEffect(() => {\r\n if (onStateChange) {\r\n onStateChange(state)\r\n }\r\n }, [state])\r\n\r\n return (\r\n <ViewBox\r\n height=\"100%\"\r\n {...viewBoxProps}\r\n baseClass='datatable'\r\n ref={ref as any}\r\n sx={{\r\n ...viewBoxProps?.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 {!hidePagination && <TablePagination\r\n disabled={_props.skeleton ? true : false}\r\n {...slotProps?.pagination}\r\n total={total \|\| rows.length}\r\n page={state.pagination.page}\r\n perpage={state.pagination.perpage}\r\n perpages={perpages}\r\n slotProps={{\r\n select: {\r\n size: \"small\",\r\n }\r\n }}\r\n onChange={(state: TablePaginationState) => {\r\n update({ pagination: state })\r\n }}\r\n />}\r\n </Stack>\r\n </ViewBox>\r\n )\r\n})\r\n\r\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAaA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;;AAGJ;;;AA2BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;AAIH;AAED;;;;;AAMA;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}

package/Drawer/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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: 220,\r\n medium: 330,\r\n large: 440\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;;"}
1	+ {"version":3,"file":"index.cjs","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: 220,\r\n medium: 330,\r\n large: 440\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;;"}

package/Drawer/index.js.map CHANGED Viewed

	@@ -1 +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: 220,\r\n medium: 330,\r\n large: 440\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;;"}
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: 220,\r\n medium: 330,\r\n large: 440\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;;"}

package/Form/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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;;"}
1	+ {"version":3,"file":"index.cjs","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;;"}

package/Form/index.js.map CHANGED Viewed

	@@ -1 +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;;"}
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;;"}

package/IconButton/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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 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\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n\r\n lineHeight: 1,\r\n fontSize: \"button\",\r\n\r\n bgcolor: \"transparent\",\r\n\r\n \"& svg\": {\r\n fontSize: Math.round((size / 3) * 1.8),\r\n display: \"block\",\r\n width: \"1em\",\r\n height: \"1em\",\r\n flexShrink: 0,\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;;;;AAaK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
1	+ {"version":3,"file":"index.cjs","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 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\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n\r\n lineHeight: 1,\r\n fontSize: \"button\",\r\n\r\n bgcolor: \"transparent\",\r\n\r\n \"& svg\": {\r\n fontSize: Math.round((size / 3) * 1.8),\r\n display: \"block\",\r\n width: \"1em\",\r\n height: \"1em\",\r\n flexShrink: 0,\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;;;;AAaK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}

package/IconButton/index.js.map CHANGED Viewed

	@@ -1 +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 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\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n\r\n lineHeight: 1,\r\n fontSize: \"button\",\r\n\r\n bgcolor: \"transparent\",\r\n\r\n \"& svg\": {\r\n fontSize: Math.round((size / 3) * 1.8),\r\n display: \"block\",\r\n width: \"1em\",\r\n height: \"1em\",\r\n flexShrink: 0,\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;;;;AAaK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}
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 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\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n\r\n lineHeight: 1,\r\n fontSize: \"button\",\r\n\r\n bgcolor: \"transparent\",\r\n\r\n \"& svg\": {\r\n fontSize: Math.round((size / 3) * 1.8),\r\n display: \"block\",\r\n width: \"1em\",\r\n height: \"1em\",\r\n flexShrink: 0,\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;;;;AAaK;AACA;AACA;AACA;AACA;AACA;AAEA;AACA;AACA;AAEA;AACA;AAEA;AAEA;AACI;AACA;AACA;AACA;AACA;AACH;;AAUjB;;"}

package/Image/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","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;;"}
1	+ {"version":3,"file":"index.cjs","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;;"}

package/Image/index.js.map CHANGED Viewed

	@@ -1 +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;;"}
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;;"}

package/Input/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["'use client'\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" \| \"color\" \| \"label\"> & {\r\n value?: string;\r\n type?: TagProps<'input'>['type'];\r\n name?: string;\r\n placeholder?: string;\r\n readOnly?: boolean;\r\n autoFocus?: boolean;\r\n autoComplete?: string;\r\n label?: useBreakpointPropsType<string>;\r\n\r\n onFocus?: (e: React.FocusEvent<any>) => void;\r\n onBlur?: (e: React.FocusEvent<any>) => void;\r\n onChange?: (e: React.ChangeEvent<any>) => void;\r\n onInput?: (e: React.FormEvent<any>) => void;\r\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n fullWidth?: boolean;\r\n\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 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\r\n refs?: {\r\n inputRoot?: React.Ref<\"div\">;\r\n label?: React.Ref<\"label\">;\r\n rootContainer?: React.Ref<\"div\">;\r\n // startIcon?: React.Ref<ReactElement>;\r\n // endIcon?: React.Ref<ReactElement>;\r\n // inputContainer?: React.Ref<\"div\">;\r\n input?: React.Ref<'input' \| 'textarea'>;\r\n helperText?: React.Ref<\"div\">;\r\n };\r\n\r\n slotProps?: {\r\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n label?: Omit<LabelProps, \"children\">;\r\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n input?: Partial<TagProps<T>>;\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n color,\r\n label,\r\n name,\r\n placeholder,\r\n type,\r\n readOnly,\r\n autoFocus,\r\n autoComplete,\r\n onFocus,\r\n onBlur,\r\n onChange,\r\n onKeyDown,\r\n onKeyUp,\r\n\r\n focused,\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 fullWidth,\r\n slotProps,\r\n\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 iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n let _focus = focused \|\| _focused\r\n const inputRef = React.useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\r\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n useEffect(() => {\r\n if (autoFocus) {\r\n setTimeout(() => {\r\n inputRef.current?.focus()\r\n }, 100);\r\n }\r\n }, [autoFocus])\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: 38,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 46,\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 return (\r\n <Tag\r\n width={fullWidth ? \"100%\" : \"auto\"}\r\n {...rest}\r\n ref={ref}\r\n baseClass=\"input-wrapper\"\r\n sxr={{\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: .5,\r\n }}\r\n >\r\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n <Tag\r\n {...slotProps?.inputRoot}\r\n ref={refs?.inputRoot}\r\n baseClass={'input-root'}\r\n sxr={{\r\n width: \"100%\",\r\n overflow: \"hidden\",\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.rootContainer}\r\n ref={refs?.rootContainer}\r\n baseClass='input-root-container'\r\n sxr={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\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 ..._size,\r\n height: multiline ? \"auto\" : _size.height,\r\n minHeight: _size.height,\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 \"& textarea\": {\r\n resize: \"none\"\r\n },\r\n\r\n // ...(!!startIcon && {\r\n // \"& :first-child\": {\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 // flex: \"0 0 auto\",\r\n // },\r\n // }),\r\n\r\n // ...(!!endIcon && {\r\n // \"& :last-child\": {\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 // flex: \"0 0 auto\",\r\n // },\r\n // })\r\n\r\n }}\r\n disabled={disabled \|\| false}\r\n >\r\n {/* {startIcon && <Tag\r\n {...slotProps?.startIcon}\r\n ref={refs?.startIcon}\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 {startIcon}\r\n {/ <Tag\r\n {...slotProps?.inputContainer}\r\n ref={refs?.inputContainer}\r\n baseClass='input-container'\r\n flex={1}\r\n sxr={{\r\n width: \"100%\",\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 \r\n </Tag> /}\r\n <Tag\r\n {...slotProps?.input}\r\n ref={inputMergeRef}\r\n baseClass='input'\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\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 onChange={onChange}\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 onKeyDown={onKeyDown}\r\n onKeyUp={onKeyUp}\r\n name={name}\r\n placeholder={placeholder}\r\n type={type}\r\n readOnly={readOnly}\r\n autoComplete={autoComplete}\r\n />\r\n {/ {endIcon && <Tag\r\n {...slotProps?.endIcon}\r\n ref={refs?.endIcon}\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 {endIcon}\r\n </Tag>\r\n {helperText && <Tag\r\n {...slotProps?.helperText}\r\n ref={refs?.helperText}\r\n baseClass=\"input-helper-text\"\r\n sxr={{\r\n color: error ? \"danger.primary\" : \"text.primary\",\r\n fontSize: \"small\",\r\n lineHeight: \"text\",\r\n fontWeight: 'text',\r\n pl: .5,\r\n }}\r\n >{helperText}</Tag>}\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;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;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;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;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}
1	+ {"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\"use client\";\r\nimport React, { ReactElement, useEffect, useMemo, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps, useMergeRefs } from '@xanui/core';\r\nimport Label, { LabelProps } from '../Label';\r\n\r\nexport type InputProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"size\" \| \"color\" \| \"label\"> & {\r\n value?: string;\r\n type?: TagProps<'input'>['type'];\r\n name?: string;\r\n placeholder?: string;\r\n readOnly?: boolean;\r\n autoFocus?: boolean;\r\n autoComplete?: string;\r\n label?: useBreakpointPropsType<string>;\r\n\r\n onFocus?: (e: React.FocusEvent<any>) => void;\r\n onBlur?: (e: React.FocusEvent<any>) => void;\r\n onChange?: (e: React.ChangeEvent<any>) => void;\r\n onInput?: (e: React.FormEvent<any>) => void;\r\n onKeyDown?: (e: React.KeyboardEvent<any>) => void;\r\n onKeyUp?: (e: React.KeyboardEvent<any>) => void;\r\n\r\n rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n fullWidth?: boolean;\r\n\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 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\r\n refs?: {\r\n inputRoot?: React.Ref<\"div\">;\r\n label?: React.Ref<\"label\">;\r\n rootContainer?: React.Ref<\"div\">;\r\n // startIcon?: React.Ref<ReactElement>;\r\n // endIcon?: React.Ref<ReactElement>;\r\n // inputContainer?: React.Ref<\"div\">;\r\n input?: React.Ref<'input' \| 'textarea'>;\r\n helperText?: React.Ref<\"div\">;\r\n };\r\n\r\n slotProps?: {\r\n inputRoot?: Omit<TagProps<\"div\">, \"children\">;\r\n label?: Omit<LabelProps, \"children\">;\r\n rootContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n // startIcon?: Omit<TagProps<'div'>, \"children\">;\r\n // endIcon?: Omit<TagProps<'div'>, \"children\">;\r\n // inputContainer?: Omit<TagProps<\"div\">, \"children\">;\r\n helperText?: Omit<TagProps<\"div\">, \"children\">;\r\n input?: Partial<TagProps<T>>;\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"div\">({ value, refs, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n color,\r\n label,\r\n name,\r\n placeholder,\r\n type,\r\n readOnly,\r\n autoFocus,\r\n autoComplete,\r\n onFocus,\r\n onBlur,\r\n onChange,\r\n onKeyDown,\r\n onKeyUp,\r\n\r\n focused,\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 fullWidth,\r\n slotProps,\r\n\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 iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n let _focus = focused \|\| _focused\r\n const inputRef = React.useRef<HTMLInputElement \| HTMLTextAreaElement>(null);\r\n const inputMergeRef = useMergeRefs(inputRef, refs?.input as any);\r\n\r\n useEffect(() => {\r\n if (autoFocus) {\r\n setTimeout(() => {\r\n inputRef.current?.focus()\r\n }, 100);\r\n }\r\n }, [autoFocus])\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: 38,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 46,\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 return (\r\n <Tag\r\n width={fullWidth ? \"100%\" : \"auto\"}\r\n {...rest}\r\n ref={ref}\r\n baseClass=\"input-wrapper\"\r\n sxr={{\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: .5,\r\n }}\r\n >\r\n {!!label && <Label {...slotProps?.label} ref={refs?.label}>{label}</Label>}\r\n <Tag\r\n {...slotProps?.inputRoot}\r\n ref={refs?.inputRoot}\r\n baseClass={'input-root'}\r\n sxr={{\r\n width: \"100%\",\r\n overflow: \"hidden\",\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.rootContainer}\r\n ref={refs?.rootContainer}\r\n baseClass='input-root-container'\r\n sxr={{\r\n width: \"100%\",\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\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 ..._size,\r\n height: multiline ? \"auto\" : _size.height,\r\n minHeight: _size.height,\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 \"& textarea\": {\r\n resize: \"none\"\r\n },\r\n\r\n // ...(!!startIcon && {\r\n // \"& :first-child\": {\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 // flex: \"0 0 auto\",\r\n // },\r\n // }),\r\n\r\n // ...(!!endIcon && {\r\n // \"& :last-child\": {\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 // flex: \"0 0 auto\",\r\n // },\r\n // })\r\n\r\n }}\r\n disabled={disabled \|\| false}\r\n >\r\n {/* {startIcon && <Tag\r\n {...slotProps?.startIcon}\r\n ref={refs?.startIcon}\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 {startIcon}\r\n {/ <Tag\r\n {...slotProps?.inputContainer}\r\n ref={refs?.inputContainer}\r\n baseClass='input-container'\r\n flex={1}\r\n sxr={{\r\n width: \"100%\",\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 \r\n </Tag> /}\r\n <Tag\r\n {...slotProps?.input}\r\n ref={inputMergeRef}\r\n baseClass='input'\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\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 onChange={onChange}\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 onKeyDown={onKeyDown}\r\n onKeyUp={onKeyUp}\r\n name={name}\r\n placeholder={placeholder}\r\n type={type}\r\n readOnly={readOnly}\r\n autoComplete={autoComplete}\r\n />\r\n {/ {endIcon && <Tag\r\n {...slotProps?.endIcon}\r\n ref={refs?.endIcon}\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 {endIcon}\r\n </Tag>\r\n {helperText && <Tag\r\n {...slotProps?.helperText}\r\n ref={refs?.helperText}\r\n baseClass=\"input-helper-text\"\r\n sxr={{\r\n color: error ? \"danger.primary\" : \"text.primary\",\r\n fontSize: \"small\",\r\n lineHeight: \"text\",\r\n fontWeight: 'text',\r\n pl: .5,\r\n }}\r\n >{helperText}</Tag>}\r\n </Tag>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\n"],"names":[],"mappings":";;;;;;;;;AA6DA;;;AACI;;AAmCA;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;AAEA;AACA;;;AAGA;;AAEA;;;;;AAKY;;;AAGZ;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;;;;AAWG;AACA;AACA;;AASI;AACA;AACH;AAuBW;;AAEA;AACI;AAEJ;AACH;AAuEG;AACA;AACA;;;AAGA;AACA;AACA;AACH;;AAKG;AACJ;;AAGI;AACJ;;AA8BA;AACA;AACA;AACA;AACH;AAKrB;;"}