@xanui/ui 1.1.8 → 1.1.10
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.
- package/Accordion/{index.js → index.cjs} +17 -3
- package/Accordion/index.cjs.map +1 -0
- package/Accordion/index.mjs +14 -2
- package/Accordion/index.mjs.map +1 -1
- package/Alert/{index.js → index.cjs} +23 -5
- package/Alert/index.cjs.map +1 -0
- package/Alert/index.mjs +18 -2
- package/Alert/index.mjs.map +1 -1
- package/Avatar/{index.js → index.cjs} +13 -2
- package/Avatar/index.cjs.map +1 -0
- package/Avatar/index.mjs +11 -2
- package/Avatar/index.mjs.map +1 -1
- package/Badge/{index.js → index.cjs} +12 -2
- package/Badge/index.cjs.map +1 -0
- package/Badge/index.mjs +10 -2
- package/Badge/index.mjs.map +1 -1
- package/Box/index.cjs +14 -0
- package/Box/index.cjs.map +1 -0
- package/Box/index.mjs +10 -2
- package/Box/index.mjs.map +1 -1
- package/Button/{index.js → index.cjs} +16 -4
- package/Button/index.cjs.map +1 -0
- package/Button/index.mjs +12 -2
- package/Button/index.mjs.map +1 -1
- package/ButtonGroup/{index.js → index.cjs} +12 -2
- package/ButtonGroup/index.cjs.map +1 -0
- package/ButtonGroup/index.mjs +10 -2
- package/ButtonGroup/index.mjs.map +1 -1
- package/Calendar/{index.js → index.cjs} +34 -16
- package/Calendar/index.cjs.map +1 -0
- package/Calendar/index.mjs +18 -2
- package/Calendar/index.mjs.map +1 -1
- package/CalendarInput/index.cjs +29 -0
- package/CalendarInput/index.cjs.map +1 -0
- package/CalendarInput/index.mjs +18 -2
- package/CalendarInput/index.mjs.map +1 -1
- package/Checkbox/{index.js → index.cjs} +15 -2
- package/Checkbox/index.cjs.map +1 -0
- package/Checkbox/index.mjs +13 -2
- package/Checkbox/index.mjs.map +1 -1
- package/Chip/{index.js → index.cjs} +14 -3
- package/Chip/index.cjs.map +1 -0
- package/Chip/index.mjs +11 -2
- package/Chip/index.mjs.map +1 -1
- package/CircleProgress/{index.js → index.cjs} +12 -2
- package/CircleProgress/index.cjs.map +1 -0
- package/CircleProgress/index.mjs +10 -2
- package/CircleProgress/index.mjs.map +1 -1
- package/ClickOutside/{index.js → index.cjs} +15 -6
- package/ClickOutside/index.cjs.map +1 -0
- package/ClickOutside/index.d.ts +4 -3
- package/ClickOutside/index.mjs +13 -6
- package/ClickOutside/index.mjs.map +1 -1
- package/Collaps/{index.js → index.cjs} +14 -4
- package/Collaps/index.cjs.map +1 -0
- package/Collaps/index.mjs +12 -4
- package/Collaps/index.mjs.map +1 -1
- package/Container/{index.js → index.cjs} +12 -2
- package/Container/index.cjs.map +1 -0
- package/Container/index.mjs +10 -2
- package/Container/index.mjs.map +1 -1
- package/Datatable/FilterBox.cjs +33 -0
- package/Datatable/FilterBox.cjs.map +1 -0
- package/Datatable/FilterBox.mjs +14 -2
- package/Datatable/FilterBox.mjs.map +1 -1
- package/Datatable/{Row.js → Row.cjs} +24 -7
- package/Datatable/Row.cjs.map +1 -0
- package/Datatable/Row.mjs +17 -2
- package/Datatable/Row.mjs.map +1 -1
- package/Datatable/SelectedBox.cjs +22 -0
- package/Datatable/SelectedBox.cjs.map +1 -0
- package/Datatable/SelectedBox.mjs +11 -2
- package/Datatable/SelectedBox.mjs.map +1 -1
- package/Datatable/Table.cjs +22 -0
- package/Datatable/Table.cjs.map +1 -0
- package/Datatable/Table.mjs +11 -2
- package/Datatable/Table.mjs.map +1 -1
- package/Datatable/{TableHead.js → TableHead.cjs} +18 -5
- package/Datatable/TableHead.cjs.map +1 -0
- package/Datatable/TableHead.mjs +13 -2
- package/Datatable/TableHead.mjs.map +1 -1
- package/Datatable/index.cjs +50 -0
- package/Datatable/index.cjs.map +1 -0
- package/Datatable/index.mjs +15 -2
- package/Datatable/index.mjs.map +1 -1
- package/Divider/{index.js → index.cjs} +12 -2
- package/Divider/index.cjs.map +1 -0
- package/Divider/index.mjs +10 -2
- package/Divider/index.mjs.map +1 -1
- package/Drawer/{index.js → index.cjs} +17 -6
- package/Drawer/index.cjs.map +1 -0
- package/Drawer/index.mjs +13 -4
- package/Drawer/index.mjs.map +1 -1
- package/Form/{index.js → index.cjs} +12 -2
- package/Form/index.cjs.map +1 -0
- package/Form/index.mjs +10 -2
- package/Form/index.mjs.map +1 -1
- package/GridContainer/{index.js → index.cjs} +12 -2
- package/GridContainer/index.cjs.map +1 -0
- package/GridContainer/index.mjs +10 -2
- package/GridContainer/index.mjs.map +1 -1
- package/GridItem/{index.js → index.cjs} +12 -2
- package/GridItem/index.cjs.map +1 -0
- package/GridItem/index.mjs +10 -2
- package/GridItem/index.mjs.map +1 -1
- package/IconButton/{index.js → index.cjs} +14 -3
- package/IconButton/index.cjs.map +1 -0
- package/IconButton/index.mjs +11 -2
- package/IconButton/index.mjs.map +1 -1
- package/Image/{index.js → index.cjs} +12 -2
- package/Image/index.cjs.map +1 -0
- package/Image/index.mjs +10 -2
- package/Image/index.mjs.map +1 -1
- package/Input/{index.js → index.cjs} +17 -6
- package/Input/index.cjs.map +1 -0
- package/Input/index.mjs +14 -5
- package/Input/index.mjs.map +1 -1
- package/Label/{index.js → index.cjs} +12 -2
- package/Label/index.cjs.map +1 -0
- package/Label/index.mjs +10 -2
- package/Label/index.mjs.map +1 -1
- package/Layer/{index.js → index.cjs} +20 -7
- package/Layer/index.cjs.map +1 -0
- package/Layer/index.mjs +17 -6
- package/Layer/index.mjs.map +1 -1
- package/LineProgress/{index.js → index.cjs} +12 -2
- package/LineProgress/index.cjs.map +1 -0
- package/LineProgress/index.mjs +10 -2
- package/LineProgress/index.mjs.map +1 -1
- package/List/{index.js → index.cjs} +12 -2
- package/List/index.cjs.map +1 -0
- package/List/index.mjs +10 -2
- package/List/index.mjs.map +1 -1
- package/ListItem/{index.js → index.cjs} +14 -3
- package/ListItem/index.cjs.map +1 -0
- package/ListItem/index.mjs +11 -2
- package/ListItem/index.mjs.map +1 -1
- package/LoadingBox/{index.js → index.cjs} +14 -3
- package/LoadingBox/index.cjs.map +1 -0
- package/LoadingBox/index.mjs +11 -2
- package/LoadingBox/index.mjs.map +1 -1
- package/Menu/index.cjs +145 -0
- package/Menu/index.cjs.map +1 -0
- package/Menu/index.d.ts +4 -4
- package/Menu/index.mjs +125 -29
- package/Menu/index.mjs.map +1 -1
- package/Modal/{index.js → index.cjs} +14 -3
- package/Modal/index.cjs.map +1 -0
- package/Modal/index.mjs +11 -2
- package/Modal/index.mjs.map +1 -1
- package/NoSSR/index.cjs +14 -0
- package/NoSSR/index.cjs.map +1 -0
- package/NoSSR/index.mjs +7 -2
- package/NoSSR/index.mjs.map +1 -1
- package/Option/index.cjs +14 -0
- package/Option/index.cjs.map +1 -0
- package/Option/index.mjs +10 -2
- package/Option/index.mjs.map +1 -1
- package/Paper/{index.js → index.cjs} +12 -2
- package/Paper/index.cjs.map +1 -0
- package/Paper/index.mjs +10 -2
- package/Paper/index.mjs.map +1 -1
- package/Portal/index.cjs +26 -0
- package/Portal/index.cjs.map +1 -0
- package/Portal/index.d.ts +1 -2
- package/Portal/index.mjs +18 -13
- package/Portal/index.mjs.map +1 -1
- package/Radio/index.cjs +16 -0
- package/Radio/index.cjs.map +1 -0
- package/Radio/index.mjs +12 -2
- package/Radio/index.mjs.map +1 -1
- package/Scrollbar/{index.js → index.cjs} +12 -2
- package/Scrollbar/index.cjs.map +1 -0
- package/Scrollbar/index.mjs +10 -2
- package/Scrollbar/index.mjs.map +1 -1
- package/Select/{index.js → index.cjs} +21 -5
- package/Select/index.cjs.map +1 -0
- package/Select/index.mjs +16 -2
- package/Select/index.mjs.map +1 -1
- package/Stack/index.cjs +17 -0
- package/Stack/index.cjs.map +1 -0
- package/Stack/index.mjs +10 -2
- package/Stack/index.mjs.map +1 -1
- package/Switch/{index.js → index.cjs} +12 -2
- package/Switch/index.cjs.map +1 -0
- package/Switch/index.mjs +10 -2
- package/Switch/index.mjs.map +1 -1
- package/Tab/index.cjs +16 -0
- package/Tab/index.cjs.map +1 -0
- package/Tab/index.mjs +11 -2
- package/Tab/index.mjs.map +1 -1
- package/Table/{index.js → index.cjs} +14 -3
- package/Table/index.cjs.map +1 -0
- package/Table/index.mjs +11 -2
- package/Table/index.mjs.map +1 -1
- package/TableBody/index.cjs +14 -0
- package/TableBody/index.cjs.map +1 -0
- package/TableBody/index.mjs +10 -2
- package/TableBody/index.mjs.map +1 -1
- package/TableCell/{index.js → index.cjs} +12 -2
- package/TableCell/index.cjs.map +1 -0
- package/TableCell/index.mjs +10 -2
- package/TableCell/index.mjs.map +1 -1
- package/TableFooter/index.cjs +14 -0
- package/TableFooter/index.cjs.map +1 -0
- package/TableFooter/index.mjs +10 -2
- package/TableFooter/index.mjs.map +1 -1
- package/TableHead/index.cjs +14 -0
- package/TableHead/index.cjs.map +1 -0
- package/TableHead/index.mjs +10 -2
- package/TableHead/index.mjs.map +1 -1
- package/TablePagination/{index.js → index.cjs} +22 -6
- package/TablePagination/index.cjs.map +1 -0
- package/TablePagination/index.mjs +16 -2
- package/TablePagination/index.mjs.map +1 -1
- package/TableRow/index.cjs +14 -0
- package/TableRow/index.cjs.map +1 -0
- package/TableRow/index.mjs +10 -2
- package/TableRow/index.mjs.map +1 -1
- package/Tabs/{index.js → index.cjs} +13 -3
- package/Tabs/index.cjs.map +1 -0
- package/Tabs/index.mjs +11 -3
- package/Tabs/index.mjs.map +1 -1
- package/Text/{index.js → index.cjs} +12 -2
- package/Text/index.cjs.map +1 -0
- package/Text/index.mjs +10 -2
- package/Text/index.mjs.map +1 -1
- package/Toast/{index.js → index.cjs} +17 -4
- package/Toast/index.cjs.map +1 -0
- package/Toast/index.mjs +13 -2
- package/Toast/index.mjs.map +1 -1
- package/Tooltip/{index.js → index.cjs} +14 -4
- package/Tooltip/index.cjs.map +1 -0
- package/Tooltip/index.mjs +11 -3
- package/Tooltip/index.mjs.map +1 -1
- package/ViewBox/{index.js → index.cjs} +14 -3
- package/ViewBox/index.cjs.map +1 -0
- package/ViewBox/index.mjs +11 -2
- package/ViewBox/index.mjs.map +1 -1
- package/index.cjs +116 -0
- package/index.cjs.map +1 -0
- package/index.mjs +56 -1
- package/index.mjs.map +1 -1
- package/package.json +4 -14
- package/readme.md +104 -104
- package/useAlert/{index.js → index.cjs} +18 -5
- package/useAlert/index.cjs.map +1 -0
- package/useAlert/index.d.ts +2 -2
- package/useAlert/index.mjs +13 -2
- package/useAlert/index.mjs.map +1 -1
- package/useBlurCss/{index.js → index.cjs} +10 -2
- package/useBlurCss/index.cjs.map +1 -0
- package/useBlurCss/index.mjs +8 -2
- package/useBlurCss/index.mjs.map +1 -1
- package/useCorner/{index.js → index.cjs} +7 -2
- package/useCorner/index.cjs.map +1 -0
- package/useCorner/index.mjs +4 -1
- package/useCorner/index.mjs.map +1 -1
- package/useLayer/{index.js → index.cjs} +13 -3
- package/useLayer/index.cjs.map +1 -0
- package/useLayer/index.mjs +10 -2
- package/useLayer/index.mjs.map +1 -1
- package/useModal/{index.js → index.cjs} +13 -3
- package/useModal/index.cjs.map +1 -0
- package/useModal/index.mjs +10 -2
- package/useModal/index.mjs.map +1 -1
- package/Accordion/index.js.map +0 -1
- package/Alert/index.js.map +0 -1
- package/Avatar/index.js.map +0 -1
- package/Badge/index.js.map +0 -1
- package/Box/index.js +0 -4
- package/Box/index.js.map +0 -1
- package/Button/index.js.map +0 -1
- package/ButtonGroup/index.js.map +0 -1
- package/Calendar/index.js.map +0 -1
- package/CalendarInput/index.js +0 -11
- package/CalendarInput/index.js.map +0 -1
- package/Checkbox/index.js.map +0 -1
- package/Chip/index.js.map +0 -1
- package/CircleProgress/index.js.map +0 -1
- package/ClickOutside/index.js.map +0 -1
- package/Collaps/index.js.map +0 -1
- package/Container/index.js.map +0 -1
- package/Datatable/FilterBox.js +0 -19
- package/Datatable/FilterBox.js.map +0 -1
- package/Datatable/Row.js.map +0 -1
- package/Datatable/SelectedBox.js +0 -11
- package/Datatable/SelectedBox.js.map +0 -1
- package/Datatable/Table.js +0 -11
- package/Datatable/Table.js.map +0 -1
- package/Datatable/TableHead.js.map +0 -1
- package/Datatable/index.js +0 -35
- package/Datatable/index.js.map +0 -1
- package/Divider/index.js.map +0 -1
- package/Drawer/index.js.map +0 -1
- package/Form/index.js.map +0 -1
- package/GridContainer/index.js.map +0 -1
- package/GridItem/index.js.map +0 -1
- package/IconButton/index.js.map +0 -1
- package/Image/index.js.map +0 -1
- package/Input/index.js.map +0 -1
- package/Label/index.js.map +0 -1
- package/Layer/index.js.map +0 -1
- package/LineProgress/index.js.map +0 -1
- package/List/index.js.map +0 -1
- package/ListItem/index.js.map +0 -1
- package/LoadingBox/index.js.map +0 -1
- package/Menu/getOrigin.js +0 -42
- package/Menu/getOrigin.js.map +0 -1
- package/Menu/getOrigin.mjs +0 -42
- package/Menu/getOrigin.mjs.map +0 -1
- package/Menu/index.js +0 -47
- package/Menu/index.js.map +0 -1
- package/Menu/placedMenu.d.ts +0 -5
- package/Menu/placedMenu.js +0 -95
- package/Menu/placedMenu.js.map +0 -1
- package/Menu/placedMenu.mjs +0 -95
- package/Menu/placedMenu.mjs.map +0 -1
- package/Modal/index.js.map +0 -1
- package/NoSSR/index.js +0 -7
- package/NoSSR/index.js.map +0 -1
- package/Option/index.js +0 -4
- package/Option/index.js.map +0 -1
- package/Paper/index.js.map +0 -1
- package/Portal/index.js +0 -19
- package/Portal/index.js.map +0 -1
- package/Radio/index.js +0 -4
- package/Radio/index.js.map +0 -1
- package/Scrollbar/index.js.map +0 -1
- package/Select/index.js.map +0 -1
- package/Stack/index.js +0 -7
- package/Stack/index.js.map +0 -1
- package/Switch/index.js.map +0 -1
- package/Tab/index.js +0 -5
- package/Tab/index.js.map +0 -1
- package/Table/index.js.map +0 -1
- package/TableBody/index.js +0 -4
- package/TableBody/index.js.map +0 -1
- package/TableCell/index.js.map +0 -1
- package/TableFooter/index.js +0 -4
- package/TableFooter/index.js.map +0 -1
- package/TableHead/index.js +0 -4
- package/TableHead/index.js.map +0 -1
- package/TablePagination/index.js.map +0 -1
- package/TableRow/index.js +0 -4
- package/TableRow/index.js.map +0 -1
- package/Tabs/index.js.map +0 -1
- package/Text/index.js.map +0 -1
- package/Toast/index.js.map +0 -1
- package/Tooltip/index.js.map +0 -1
- package/ViewBox/index.js.map +0 -1
- package/index.js +0 -1
- package/index.js.map +0 -1
- package/useAlert/index.js.map +0 -1
- package/useBlurCss/index.js.map +0 -1
- package/useCorner/index.js.map +0 -1
- package/useLayer/index.js.map +0 -1
- package/useModal/index.js.map +0 -1
package/IconButton/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
|
|
5
|
+
import useCorner from '../useCorner/index.mjs';
|
|
6
|
+
|
|
7
|
+
const IconButton = React.forwardRef((_a, ref) => {
|
|
2
8
|
var _b, _c;
|
|
3
9
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
4
10
|
rest.sx = rest.sx || {};
|
|
@@ -45,4 +51,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
45
51
|
fontSize: (size / 3) * 2
|
|
46
52
|
}
|
|
47
53
|
}, hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), children: children })));
|
|
48
|
-
});
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export { IconButton as default };
|
|
57
|
+
//# sourceMappingURL=index.mjs.map
|
package/IconButton/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner from '../useCorner'\n\n\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\n}\n\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\n rest.sx = (rest as any).sx || {};\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\n\n const _p: any = {}\n if (size) _p.size = size\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (corner) _p.corner = corner\n const p: any = useBreakpointProps(_p)\n\n size = p.size ?? \"medium\"\n color = p.color\n variant = p.variant\n corner = p.corner ?? \"circle\"\n\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\n const cornerCss = useCorner(corner)\n\n if (size === 'small') {\n size = 28\n } else if (size === 'medium') {\n size = 34\n } else if (size === 'large') {\n size = 52\n }\n\n\n return (\n <Tag\n component='button'\n ref={ref}\n {...cornerCss}\n {..._props}\n {...template.primary}\n baseClass='icon-button'\n sxr={{\n border: 0,\n radius: size,\n height: size,\n width: size,\n cursor: \"pointer\",\n fontFamily: \"inherit\",\n display: \"inline-flex\",\n flexDirection: \"row\",\n alignItems: \"center\",\n justifyContent: \"center\",\n bgcolor: \"transparent\",\n fontSize: (size / 5) * 2,\n \"& svg\": {\n fontSize: (size / 3) * 2\n }\n }}\n hover={{\n ...template.secondary,\n ...((_props as any)?.hover || {})\n }}\n >\n {children}\n </Tag>\n )\n})\n// const IconButton = forwardRef(_IconButton) as unknown as typeof _IconButton\nexport default IconButton\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/IconButton/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useColorTemplate, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\nimport useCorner from '../useCorner'\r\n\r\n\r\nexport type IconButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\"> & {\r\n size?: useBreakpointPropsType<number | \"small\" | \"medium\" | \"large\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n corner?: useBreakpointPropsType<\"square\" | \"rounded\" | \"circle\">;\r\n}\r\n\r\nconst IconButton = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: IconButtonProps<T>, ref: React.Ref<any>) => {\r\n rest.sx = (rest as any).sx || {};\r\n let [{ variant, corner, color, size, ..._props }] = useInterface<any>(\"IconButton\", rest, {})\r\n\r\n const _p: any = {}\r\n if (size) _p.size = size\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (corner) _p.corner = corner\r\n const p: any = useBreakpointProps(_p)\r\n\r\n size = p.size ?? \"medium\"\r\n color = p.color\r\n variant = p.variant\r\n corner = p.corner ?? \"circle\"\r\n\r\n let template = useColorTemplate(color || \"brand\", variant || \"fill\")\r\n const cornerCss = useCorner(corner)\r\n\r\n if (size === 'small') {\r\n size = 28\r\n } else if (size === 'medium') {\r\n size = 34\r\n } else if (size === 'large') {\r\n size = 52\r\n }\r\n\r\n\r\n return (\r\n <Tag\r\n component='button'\r\n ref={ref}\r\n {...cornerCss}\r\n {..._props}\r\n {...template.primary}\r\n baseClass='icon-button'\r\n sxr={{\r\n border: 0,\r\n radius: size,\r\n height: size,\r\n width: size,\r\n cursor: \"pointer\",\r\n fontFamily: \"inherit\",\r\n display: \"inline-flex\",\r\n flexDirection: \"row\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n bgcolor: \"transparent\",\r\n fontSize: (size / 5) * 2,\r\n \"& svg\": {\r\n fontSize: (size / 3) * 2\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":["_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const Image = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children, src, alt, errorView } = _a, rest = tslib.__rest(_a, ["children", "src", "alt", "errorView"]);
|
|
3
10
|
const [faild, setFaild] = React.useState();
|
|
4
11
|
if (faild === false) {
|
|
@@ -13,4 +20,7 @@
|
|
|
13
20
|
setFaild(false);
|
|
14
21
|
rest.onError && rest.onError(e);
|
|
15
22
|
}, ref: ref })));
|
|
16
|
-
});
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
module.exports = Image;
|
|
26
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\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":["__rest","useState","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyD,EAAE,GAAQ,KAAI;AAAvE,IAAA,IAAA,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAxC,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,EAAA,WAAA,CAA0C,CAAF;IACxG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAGC,cAAQ,EAAW;AAE7C,IAAA,IAAI,KAAK,KAAK,KAAK,EAAE;AACjB,QAAA,IAAI,CAAC,GAAG,SAAS,KAAI,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,CAAA,IAAI,QAAQ;QAC7D,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAW,EAAA,EACf,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA,EACD,SAAS,EAAC,KAAK,EACf,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,CAAC,EAAA,CAAA,CAAO;IAElB;AACA,IAAA,QACID,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,OAAO,EAAA,EACb,IAAW,EAAA,EACf,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC1C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC;;;;"}
|
package/Image/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React, { useState } from 'react';
|
|
4
|
+
import { Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const Image = React.forwardRef((_a, ref) => {
|
|
2
7
|
var { children, src, alt, errorView } = _a, rest = __rest(_a, ["children", "src", "alt", "errorView"]);
|
|
3
8
|
const [faild, setFaild] = useState();
|
|
4
9
|
if (faild === false) {
|
|
@@ -13,4 +18,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
13
18
|
setFaild(false);
|
|
14
19
|
rest.onError && rest.onError(e);
|
|
15
20
|
}, ref: ref })));
|
|
16
|
-
});
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
export { Image as default };
|
|
24
|
+
//# sourceMappingURL=index.mjs.map
|
package/Image/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type ImageProps<T extends TagComponentType = \"img\"> = TagProps<T> & {\n errorView?: ReactElement\n}\n\nconst Image = React.forwardRef(<T extends TagComponentType = \"img\">({ children, src, alt, errorView, ...rest }: ImageProps<T>, ref: any) => {\n const [faild, setFaild] = useState<boolean>()\n\n if (faild === false) {\n let t = errorView || alt?.charAt(0).toUpperCase() || children\n return (\n <Tag\n src={src}\n {...rest as any}\n sxr={{\n display: \"inline-flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n component=\"div\"\n baseClass='image'\n ref={ref}\n >{t}</Tag>\n )\n }\n return (\n <Tag\n objectFit=\"cover\"\n {...rest as any}\n component=\"img\"\n alt={alt}\n src={src}\n baseClass='image'\n onError={(e) => {\n setFaild(false)\n rest.onError && rest.onError(e as any)\n }}\n ref={ref}\n />\n )\n})\n\nexport default Image\n\n\n"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Image/index.tsx"],"sourcesContent":["\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":["_jsx"],"mappings":";;;;;AAQA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAAyD,EAAE,GAAQ,KAAI;AAAvE,IAAA,IAAA,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAxC,CAAA,UAAA,EAAA,KAAA,EAAA,KAAA,EAAA,WAAA,CAA0C,CAAF;IACxG,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,EAAW;AAE7C,IAAA,IAAI,KAAK,KAAK,KAAK,EAAE;AACjB,QAAA,IAAI,CAAC,GAAG,SAAS,KAAI,GAAG,KAAA,IAAA,IAAH,GAAG,KAAA,MAAA,GAAA,MAAA,GAAH,GAAG,CAAE,MAAM,CAAC,CAAC,CAAA,CAAE,WAAW,EAAE,CAAA,IAAI,QAAQ;QAC7D,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,GAAG,EAAE,GAAG,EAAA,EACJ,IAAW,EAAA,EACf,GAAG,EAAE;AACD,gBAAA,OAAO,EAAE,aAAa;AACtB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,UAAU,EAAE,QAAQ;AACvB,aAAA,EACD,SAAS,EAAC,KAAK,EACf,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,CAAC,EAAA,CAAA,CAAO;IAElB;AACA,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,OAAO,EAAA,EACb,IAAW,EAAA,EACf,SAAS,EAAC,KAAK,EACf,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,OAAO,EACjB,OAAO,EAAE,CAAC,CAAC,KAAI;YACX,QAAQ,CAAC,KAAK,CAAC;YACf,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,CAAQ,CAAC;AAC1C,QAAA,CAAC,EACD,GAAG,EAAE,GAAG,EAAA,CAAA,CACV;AAEV,CAAC;;;;"}
|
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
var index = require('../Text/index.cjs');
|
|
8
|
+
|
|
9
|
+
const Input = React.forwardRef((_a, ref) => {
|
|
2
10
|
var _b, _c, _d;
|
|
3
11
|
var { value } = _a, props = tslib.__rest(_a, ["value"]);
|
|
4
12
|
let [_e, theme] = core.useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = tslib.__rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
|
|
@@ -110,13 +118,13 @@
|
|
|
110
118
|
borderRadius: 1,
|
|
111
119
|
px: 1,
|
|
112
120
|
py: .5,
|
|
113
|
-
}, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsxRuntime.jsx(core.Tag, { sxr: {
|
|
121
|
+
}, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsxRuntime.jsx(core.Tag, { flex: "0 0 auto", sxr: {
|
|
114
122
|
height: "100%",
|
|
115
123
|
alignItems: 'center',
|
|
116
124
|
justifyContent: "center",
|
|
117
125
|
display: "flex",
|
|
118
126
|
color: error ? "danger.primary" : "text.secondary",
|
|
119
|
-
}, baseClass: "input-start-icon", children: startIcon }), jsxRuntime.jsx(core.Tag, { sxr: {
|
|
127
|
+
}, baseClass: "input-start-icon", children: startIcon }), jsxRuntime.jsx(core.Tag, { flex: 1, sxr: {
|
|
120
128
|
display: "flex",
|
|
121
129
|
alignItems: "center",
|
|
122
130
|
flex: 1,
|
|
@@ -144,11 +152,14 @@
|
|
|
144
152
|
}, onBlur: (e) => {
|
|
145
153
|
focused !== null && focused !== void 0 ? focused : setFocused(false);
|
|
146
154
|
onBlur && onBlur(e);
|
|
147
|
-
} })) }), endIcon && jsxRuntime.jsx(core.Tag, { sxr: {
|
|
155
|
+
} })) }), endIcon && jsxRuntime.jsx(core.Tag, { flex: "0 0 auto", sxr: {
|
|
148
156
|
height: "100%",
|
|
149
157
|
alignItems: 'center',
|
|
150
158
|
justifyContent: "center",
|
|
151
159
|
display: 'flex',
|
|
152
160
|
color: error ? "danger.primary" : "text.secondary",
|
|
153
|
-
}, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsxRuntime.jsx(index
|
|
154
|
-
});
|
|
161
|
+
}, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsxRuntime.jsx(index, { pl: .5, height: _size.height, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary", children: helperText })] }));
|
|
162
|
+
});
|
|
163
|
+
|
|
164
|
+
module.exports = Input;
|
|
165
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\n\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\r\n startIcon?: useBreakpointPropsType<ReactElement>;\r\n endIcon?: useBreakpointPropsType<ReactElement>;\r\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n focused?: boolean;\r\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\r\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n error?: boolean;\r\n helperText?: useBreakpointPropsType<string>;\r\n multiline?: boolean;\r\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n slotProps?: {\r\n container?: Omit<TagProps<\"div\">, \"children\">\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n onFocus,\r\n color,\r\n onBlur,\r\n focused,\r\n containerRef,\r\n disabled,\r\n variant,\r\n error,\r\n helperText,\r\n multiline,\r\n size,\r\n rows,\r\n minRows,\r\n maxRows,\r\n slotProps,\r\n ...rest\r\n }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n const _p: any = {}\r\n if (startIcon) _p.startIcon = startIcon\r\n if (endIcon) _p.endIcon = endIcon\r\n if (iconPlacement) _p.iconPlacement = iconPlacement\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (helperText) _p.helperText = helperText\r\n if (size) _p.size = size\r\n if (rows) _p.rows = rows\r\n if (minRows) _p.minRows = minRows\r\n if (maxRows) _p.maxRows = maxRows\r\n const p: any = useBreakpointProps(_p)\r\n startIcon = p.startIcon\r\n endIcon = p.endIcon\r\n iconPlacement = p.iconPlacement\r\n color = p.color ?? \"brand\"\r\n variant = p.variant ?? \"fill\"\r\n helperText = p.helperText\r\n size = p.size ?? 'medium'\r\n rows = p.rows\r\n minRows = p.minRows\r\n maxRows = p.maxRows\r\n\r\n ref ??= useRef(null);\r\n iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n const conRef: any = useRef(null)\r\n let _focus = focused || _focused\r\n\r\n useEffect(() => {\r\n if (containerRef) {\r\n (containerRef as any).current = conRef?.current\r\n }\r\n }, [containerRef])\r\n\r\n let _rows = useMemo(() => {\r\n if (rows) return rows\r\n if (value && multiline) {\r\n let lines = (value as string).split(`\\n`).length\r\n if (minRows && minRows > lines) {\r\n return minRows\r\n } else if (maxRows && maxRows < lines) {\r\n return maxRows\r\n } else {\r\n return lines\r\n }\r\n }\r\n }, [value]) || 1\r\n\r\n const sizes: any = {\r\n small: {\r\n height: 40,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 48,\r\n gap: 1,\r\n fontSize: \"text\"\r\n },\r\n large: {\r\n height: 52,\r\n gap: 1,\r\n fontSize: 'big'\r\n }\r\n }\r\n\r\n const _size = sizes[size]\r\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n borderColor = error ? \"danger.primary\" : borderColor\r\n let multiprops: any = {}\r\n if (multiline) {\r\n multiprops = {\r\n rows: _rows,\r\n sx: {\r\n resize: \"none\"\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if ((ref as any).current) {\r\n (ref as any).current.style.height = \"auto\";\r\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n }\r\n }, [value]);\r\n\r\n return (\r\n <Tag\r\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n >\r\n <Tag\r\n {...slotProps?.container}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\r\n minWidth: 150,\r\n transitionProperty: \"border, box-shadow, background\",\r\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n border: variant === \"text\" ? 0 : \"1px solid\",\r\n borderColor: borderColor,\r\n borderRadius: 1,\r\n px: 1,\r\n py: .5,\r\n }}\r\n baseClass='input-container'\r\n disabled={disabled || false}\r\n ref={conRef}\r\n {..._size}\r\n height={multiline ? \"auto\" : _size.height}\r\n minHeight={_size.height}\r\n >\r\n {startIcon && <Tag\r\n flex={\"0 0 auto\"}\r\n sxr={{\r\n height: \"100%\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n display: \"flex\",\r\n color: error ? \"danger.primary\" : \"text.secondary\",\r\n }}\r\n baseClass=\"input-start-icon\"\r\n >{startIcon}</Tag>}\r\n <Tag\r\n flex={1}\r\n sxr={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n flex: 1,\r\n minHeight: _size.height,\r\n \"& textarea\": {\r\n resize: \"none\"\r\n },\r\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n \"-webkit-text-fill-color\": \"text.primary\",\r\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n transition: \"background-color 5000s ease-in-out 0s\"\r\n } as any\r\n }}\r\n >\r\n <Tag\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\r\n {...rest}\r\n sxr={{\r\n border: 0,\r\n outline: 0,\r\n bgcolor: \"transparent\",\r\n color: error ? \"danger.primary\" : \"text.primary\",\r\n fontSize: _size.fontSize,\r\n height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n width: \"100%\",\r\n maxHeight: 200,\r\n }}\r\n value={value}\r\n baseClass='input-box'\r\n ref={ref}\r\n onFocus={(e: any) => {\r\n focused ?? setFocused(true)\r\n onFocus && onFocus(e)\r\n }}\r\n onBlur={(e: any) => {\r\n focused ?? setFocused(false)\r\n onBlur && onBlur(e)\r\n }}\r\n />\r\n </Tag>\r\n {endIcon && <Tag\r\n flex={\"0 0 auto\"}\r\n sxr={{\r\n height: \"100%\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n display: 'flex',\r\n color: error ? \"danger.primary\" : \"text.secondary\",\r\n }}\r\n baseClass=\"input-end-icon\"\r\n >{endIcon}</Tag>}\r\n </Tag>\r\n {helperText && <Text\r\n pl={.5}\r\n height={_size.height}\r\n className=\"input-helper-text\"\r\n fontSize=\"small\"\r\n color={error ? \"danger.primary\" : \"text.primary\"}\r\n >{helperText}</Text>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\n"],"names":["__rest","useInterface","useBreakpointProps","useRef","useState","useEffect","useMemo","_jsxs","Tag","_jsx","Text"],"mappings":"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"}
|
package/Input/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React, { useRef, useState, useEffect, useMemo } from 'react';
|
|
4
|
+
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
+
import Text from '../Text/index.mjs';
|
|
6
|
+
|
|
7
|
+
const Input = React.forwardRef((_a, ref) => {
|
|
2
8
|
var _b, _c, _d;
|
|
3
9
|
var { value } = _a, props = __rest(_a, ["value"]);
|
|
4
10
|
let [_e, theme] = useInterface("Input", props, {}), { startIcon, endIcon, iconPlacement, onFocus, color, onBlur, focused, containerRef, disabled, variant, error, helperText, multiline, size, rows, minRows, maxRows, slotProps } = _e, rest = __rest(_e, ["startIcon", "endIcon", "iconPlacement", "onFocus", "color", "onBlur", "focused", "containerRef", "disabled", "variant", "error", "helperText", "multiline", "size", "rows", "minRows", "maxRows", "slotProps"]);
|
|
@@ -110,13 +116,13 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
|
|
|
110
116
|
borderRadius: 1,
|
|
111
117
|
px: 1,
|
|
112
118
|
py: .5,
|
|
113
|
-
}, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsx(Tag, { sxr: {
|
|
119
|
+
}, baseClass: 'input-container', disabled: disabled || false, ref: conRef }, _size, { height: multiline ? "auto" : _size.height, minHeight: _size.height, children: [startIcon && jsx(Tag, { flex: "0 0 auto", sxr: {
|
|
114
120
|
height: "100%",
|
|
115
121
|
alignItems: 'center',
|
|
116
122
|
justifyContent: "center",
|
|
117
123
|
display: "flex",
|
|
118
124
|
color: error ? "danger.primary" : "text.secondary",
|
|
119
|
-
}, baseClass: "input-start-icon", children: startIcon }), jsx(Tag, { sxr: {
|
|
125
|
+
}, baseClass: "input-start-icon", children: startIcon }), jsx(Tag, { flex: 1, sxr: {
|
|
120
126
|
display: "flex",
|
|
121
127
|
alignItems: "center",
|
|
122
128
|
flex: 1,
|
|
@@ -144,11 +150,14 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
|
|
|
144
150
|
}, onBlur: (e) => {
|
|
145
151
|
focused !== null && focused !== void 0 ? focused : setFocused(false);
|
|
146
152
|
onBlur && onBlur(e);
|
|
147
|
-
} })) }), endIcon && jsx(Tag, { sxr: {
|
|
153
|
+
} })) }), endIcon && jsx(Tag, { flex: "0 0 auto", sxr: {
|
|
148
154
|
height: "100%",
|
|
149
155
|
alignItems: 'center',
|
|
150
156
|
justifyContent: "center",
|
|
151
157
|
display: 'flex',
|
|
152
158
|
color: error ? "danger.primary" : "text.secondary",
|
|
153
159
|
}, baseClass: "input-end-icon", children: endIcon })] })), helperText && jsx(Text, { pl: .5, height: _size.height, className: "input-helper-text", fontSize: "small", color: error ? "danger.primary" : "text.primary", children: helperText })] }));
|
|
154
|
-
});
|
|
160
|
+
});
|
|
161
|
+
|
|
162
|
+
export { Input as default };
|
|
163
|
+
//# sourceMappingURL=index.mjs.map
|
package/Input/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport Text from '../Text';\n\n\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\n focused?: boolean;\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\n error?: boolean;\n helperText?: useBreakpointPropsType<string>;\n multiline?: boolean;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n rows?: useBreakpointPropsType<number>;\n minRows?: useBreakpointPropsType<number>;\n maxRows?: useBreakpointPropsType<number>;\n slotProps?: {\n container?: Omit<TagProps<\"div\">, \"children\">\n }\n}\n\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\n let [{\n startIcon,\n endIcon,\n iconPlacement,\n onFocus,\n color,\n onBlur,\n focused,\n containerRef,\n disabled,\n variant,\n error,\n helperText,\n multiline,\n size,\n rows,\n minRows,\n maxRows,\n slotProps,\n ...rest\n }, theme] = useInterface<any>(\"Input\", props, {})\n const _p: any = {}\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n if (iconPlacement) _p.iconPlacement = iconPlacement\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (helperText) _p.helperText = helperText\n if (size) _p.size = size\n if (rows) _p.rows = rows\n if (minRows) _p.minRows = minRows\n if (maxRows) _p.maxRows = maxRows\n const p: any = useBreakpointProps(_p)\n startIcon = p.startIcon\n endIcon = p.endIcon\n iconPlacement = p.iconPlacement\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n helperText = p.helperText\n size = p.size ?? 'medium'\n rows = p.rows\n minRows = p.minRows\n maxRows = p.maxRows\n\n ref ??= useRef(null);\n iconPlacement ??= multiline ? \"end\" : \"center\"\n if (!value) iconPlacement = 'center'\n\n const [_focused, setFocused] = useState(false)\n const conRef: any = useRef(null)\n let _focus = focused || _focused\n\n useEffect(() => {\n if (containerRef) {\n (containerRef as any).current = conRef?.current\n }\n }, [containerRef])\n\n let _rows = useMemo(() => {\n if (rows) return rows\n if (value && multiline) {\n let lines = (value as string).split(`\\n`).length\n if (minRows && minRows > lines) {\n return minRows\n } else if (maxRows && maxRows < lines) {\n return maxRows\n } else {\n return lines\n }\n }\n }, [value]) || 1\n\n const sizes: any = {\n small: {\n height: 40,\n gap: .5,\n fontSize: 'button',\n },\n medium: {\n height: 48,\n gap: 1,\n fontSize: \"text\"\n },\n large: {\n height: 52,\n gap: 1,\n fontSize: 'big'\n }\n }\n\n const _size = sizes[size]\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\n borderColor = error ? \"danger.primary\" : borderColor\n let multiprops: any = {}\n if (multiline) {\n multiprops = {\n rows: _rows,\n sx: {\n resize: \"none\"\n }\n }\n }\n\n useEffect(() => {\n if ((ref as any).current) {\n (ref as any).current.style.height = \"auto\";\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\n }\n }, [value]);\n\n return (\n <Tag\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\n >\n <Tag\n {...slotProps?.container}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\n flexWrap: \"nowrap\",\n minWidth: 150,\n transitionProperty: \"border, box-shadow, background\",\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\n border: variant === \"text\" ? 0 : \"1px solid\",\n borderColor: borderColor,\n borderRadius: 1,\n px: 1,\n py: .5,\n }}\n baseClass='input-container'\n disabled={disabled || false}\n ref={conRef}\n {..._size}\n height={multiline ? \"auto\" : _size.height}\n minHeight={_size.height}\n >\n {startIcon && <Tag\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: \"flex\",\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-start-icon\"\n >{startIcon}</Tag>}\n <Tag\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n flex: 1,\n minHeight: _size.height,\n \"& textarea\": {\n resize: \"none\"\n },\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\n \"-webkit-text-fill-color\": \"text.primary\",\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\n transition: \"background-color 5000s ease-in-out 0s\"\n } as any\n }}\n >\n <Tag\n component={multiline ? 'textarea' : 'input'}\n {...multiprops}\n {...rest}\n sxr={{\n border: 0,\n outline: 0,\n bgcolor: \"transparent\",\n color: error ? \"danger.primary\" : \"text.primary\",\n fontSize: _size.fontSize,\n height: multiline ? \"auto\" : _size.height + \"px!important\",\n width: \"100%\",\n maxHeight: 200,\n }}\n value={value}\n baseClass='input-box'\n ref={ref}\n onFocus={(e: any) => {\n focused ?? setFocused(true)\n onFocus && onFocus(e)\n }}\n onBlur={(e: any) => {\n focused ?? setFocused(false)\n onBlur && onBlur(e)\n }}\n />\n </Tag>\n {endIcon && <Tag\n sxr={{\n height: \"100%\",\n alignItems: 'center',\n justifyContent: \"center\",\n display: 'flex',\n color: error ? \"danger.primary\" : \"text.secondary\",\n }}\n baseClass=\"input-end-icon\"\n >{endIcon}</Tag>}\n </Tag>\n {helperText && <Text\n pl={.5}\n height={_size.height}\n className=\"input-helper-text\"\n fontSize=\"small\"\n color={error ? \"danger.primary\" : \"text.primary\"}\n >{helperText}</Text>}\n </Tag>\n )\n})\n\nexport default Input\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Input/index.tsx"],"sourcesContent":["\r\nimport React, { MutableRefObject, ReactElement, useEffect, useMemo, useRef, useState } from 'react';\r\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useBreakpointPropsType, useInterface, useBreakpointProps } from '@xanui/core';\r\nimport Text from '../Text';\r\n\r\n\r\n\r\nexport type InputProps<T extends TagComponentType = \"input\"> = Omit<TagProps<T>, \"size\" | \"color\"> & {\r\n startIcon?: useBreakpointPropsType<ReactElement>;\r\n endIcon?: useBreakpointPropsType<ReactElement>;\r\n iconPlacement?: useBreakpointPropsType<\"start\" | \"center\" | \"end\">;\r\n focused?: boolean;\r\n color?: useBreakpointPropsType<Omit<UseColorTemplateColor, \"default\">>;\r\n containerRef?: MutableRefObject<HTMLDivElement | undefined>;\r\n variant?: useBreakpointPropsType<\"fill\" | \"outline\" | \"text\">;\r\n error?: boolean;\r\n helperText?: useBreakpointPropsType<string>;\r\n multiline?: boolean;\r\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\r\n rows?: useBreakpointPropsType<number>;\r\n minRows?: useBreakpointPropsType<number>;\r\n maxRows?: useBreakpointPropsType<number>;\r\n slotProps?: {\r\n container?: Omit<TagProps<\"div\">, \"children\">\r\n }\r\n}\r\n\r\nconst Input = React.forwardRef(<T extends TagComponentType = \"input\">({ value, ...props }: InputProps<T>, ref?: React.Ref<any>) => {\r\n let [{\r\n startIcon,\r\n endIcon,\r\n iconPlacement,\r\n onFocus,\r\n color,\r\n onBlur,\r\n focused,\r\n containerRef,\r\n disabled,\r\n variant,\r\n error,\r\n helperText,\r\n multiline,\r\n size,\r\n rows,\r\n minRows,\r\n maxRows,\r\n slotProps,\r\n ...rest\r\n }, theme] = useInterface<any>(\"Input\", props, {})\r\n\r\n const _p: any = {}\r\n if (startIcon) _p.startIcon = startIcon\r\n if (endIcon) _p.endIcon = endIcon\r\n if (iconPlacement) _p.iconPlacement = iconPlacement\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n if (helperText) _p.helperText = helperText\r\n if (size) _p.size = size\r\n if (rows) _p.rows = rows\r\n if (minRows) _p.minRows = minRows\r\n if (maxRows) _p.maxRows = maxRows\r\n const p: any = useBreakpointProps(_p)\r\n startIcon = p.startIcon\r\n endIcon = p.endIcon\r\n iconPlacement = p.iconPlacement\r\n color = p.color ?? \"brand\"\r\n variant = p.variant ?? \"fill\"\r\n helperText = p.helperText\r\n size = p.size ?? 'medium'\r\n rows = p.rows\r\n minRows = p.minRows\r\n maxRows = p.maxRows\r\n\r\n ref ??= useRef(null);\r\n iconPlacement ??= multiline ? \"end\" : \"center\"\r\n if (!value) iconPlacement = 'center'\r\n\r\n const [_focused, setFocused] = useState(false)\r\n const conRef: any = useRef(null)\r\n let _focus = focused || _focused\r\n\r\n useEffect(() => {\r\n if (containerRef) {\r\n (containerRef as any).current = conRef?.current\r\n }\r\n }, [containerRef])\r\n\r\n let _rows = useMemo(() => {\r\n if (rows) return rows\r\n if (value && multiline) {\r\n let lines = (value as string).split(`\\n`).length\r\n if (minRows && minRows > lines) {\r\n return minRows\r\n } else if (maxRows && maxRows < lines) {\r\n return maxRows\r\n } else {\r\n return lines\r\n }\r\n }\r\n }, [value]) || 1\r\n\r\n const sizes: any = {\r\n small: {\r\n height: 40,\r\n gap: .5,\r\n fontSize: 'button',\r\n },\r\n medium: {\r\n height: 48,\r\n gap: 1,\r\n fontSize: \"text\"\r\n },\r\n large: {\r\n height: 52,\r\n gap: 1,\r\n fontSize: 'big'\r\n }\r\n }\r\n\r\n const _size = sizes[size]\r\n let borderColor = _focus ? color : (variant === \"fill\" ? \"transparent\" : \"divider\")\r\n borderColor = error ? \"danger.primary\" : borderColor\r\n let multiprops: any = {}\r\n if (multiline) {\r\n multiprops = {\r\n rows: _rows,\r\n sx: {\r\n resize: \"none\"\r\n }\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if ((ref as any).current) {\r\n (ref as any).current.style.height = \"auto\";\r\n (ref as any).current.style.height = `${(ref as any).current.scrollHeight}px`;\r\n }\r\n }, [value]);\r\n\r\n return (\r\n <Tag\r\n baseClass={`input${_focus ? \" input-focused\" : \"\"}`}\r\n >\r\n <Tag\r\n {...slotProps?.container}\r\n sxr={{\r\n display: \"flex\",\r\n flexDirection: \"row\",\r\n alignItems: iconPlacement === 'center' ? iconPlacement : `flex-${iconPlacement}`,\r\n flexWrap: \"nowrap\",\r\n minWidth: 150,\r\n transitionProperty: \"border, box-shadow, background\",\r\n bgcolor: error ? \"danger.soft.primary\" : variant === \"fill\" ? \"background.secondary\" : \"background.primary\",\r\n border: variant === \"text\" ? 0 : \"1px solid\",\r\n borderColor: borderColor,\r\n borderRadius: 1,\r\n px: 1,\r\n py: .5,\r\n }}\r\n baseClass='input-container'\r\n disabled={disabled || false}\r\n ref={conRef}\r\n {..._size}\r\n height={multiline ? \"auto\" : _size.height}\r\n minHeight={_size.height}\r\n >\r\n {startIcon && <Tag\r\n flex={\"0 0 auto\"}\r\n sxr={{\r\n height: \"100%\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n display: \"flex\",\r\n color: error ? \"danger.primary\" : \"text.secondary\",\r\n }}\r\n baseClass=\"input-start-icon\"\r\n >{startIcon}</Tag>}\r\n <Tag\r\n flex={1}\r\n sxr={{\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n flex: 1,\r\n minHeight: _size.height,\r\n \"& textarea\": {\r\n resize: \"none\"\r\n },\r\n \"& input:-webkit-autofill,& input:-webkit-autofill:hover, & input:-webkit-autofill:focus,& input:-webkit-autofill:active\": {\r\n \"-webkit-text-fill-color\": \"text.primary\",\r\n \"box-shadow\": `0 0 0px 1000px ${variant === \"fill\" ? theme.colors.background.secondary : theme.colors.background.primary} inset`,\r\n transition: \"background-color 5000s ease-in-out 0s\"\r\n } as any\r\n }}\r\n >\r\n <Tag\r\n component={multiline ? 'textarea' : 'input'}\r\n {...multiprops}\r\n {...rest}\r\n sxr={{\r\n border: 0,\r\n outline: 0,\r\n bgcolor: \"transparent\",\r\n color: error ? \"danger.primary\" : \"text.primary\",\r\n fontSize: _size.fontSize,\r\n height: multiline ? \"auto\" : _size.height + \"px!important\",\r\n width: \"100%\",\r\n maxHeight: 200,\r\n }}\r\n value={value}\r\n baseClass='input-box'\r\n ref={ref}\r\n onFocus={(e: any) => {\r\n focused ?? setFocused(true)\r\n onFocus && onFocus(e)\r\n }}\r\n onBlur={(e: any) => {\r\n focused ?? setFocused(false)\r\n onBlur && onBlur(e)\r\n }}\r\n />\r\n </Tag>\r\n {endIcon && <Tag\r\n flex={\"0 0 auto\"}\r\n sxr={{\r\n height: \"100%\",\r\n alignItems: 'center',\r\n justifyContent: \"center\",\r\n display: 'flex',\r\n color: error ? \"danger.primary\" : \"text.secondary\",\r\n }}\r\n baseClass=\"input-end-icon\"\r\n >{endIcon}</Tag>}\r\n </Tag>\r\n {helperText && <Text\r\n pl={.5}\r\n height={_size.height}\r\n className=\"input-helper-text\"\r\n fontSize=\"small\"\r\n color={error ? \"danger.primary\" : \"text.primary\"}\r\n >{helperText}</Text>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Input\r\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const Label = React.forwardRef((_a, ref) => {
|
|
2
9
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
3
10
|
return jsxRuntime.jsx(core.Tag, Object.assign({ component: 'label' }, rest, { sxr: {
|
|
4
11
|
display: "inline-flex",
|
|
@@ -11,4 +18,7 @@
|
|
|
11
18
|
cursor: "pointer",
|
|
12
19
|
fontWeight: "500",
|
|
13
20
|
}, baseClass: 'label', ref: ref, children: children }));
|
|
14
|
-
});
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
module.exports = Label;
|
|
24
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n return <Tag\r\n component='label'\r\n {...rest}\r\n sxr={{\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n verticalAlign: \"middle\",\r\n fontSize: \"text\",\r\n gap: .4,\r\n color: \"text.primary\",\r\n userSelect: \"none\",\r\n cursor: \"pointer\",\r\n fontWeight: \"500\",\r\n }}\r\n baseClass='label'\r\n ref={ref}\r\n >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
|
package/Label/index.mjs
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx } from 'react/jsx-runtime';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const Label = React.forwardRef((_a, ref) => {
|
|
2
7
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
3
8
|
return jsx(Tag, Object.assign({ component: 'label' }, rest, { sxr: {
|
|
4
9
|
display: "inline-flex",
|
|
@@ -11,4 +16,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
11
16
|
cursor: "pointer",
|
|
12
17
|
fontWeight: "500",
|
|
13
18
|
}, baseClass: 'label', ref: ref, children: children }));
|
|
14
|
-
});
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
export { Label as default };
|
|
22
|
+
//# sourceMappingURL=index.mjs.map
|
package/Label/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n return <Tag\n component='label'\n {...rest}\n sxr={{\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"middle\",\n fontSize: \"text\",\n gap: .4,\n color: \"text.primary\",\n userSelect: \"none\",\n cursor: \"pointer\",\n fontWeight: \"500\",\n }}\n baseClass='label'\n ref={ref}\n >{children}</Tag>\n})\n\nexport default Label"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Label/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\r\n\r\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\r\n\r\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\r\n return <Tag\r\n component='label'\r\n {...rest}\r\n sxr={{\r\n display: \"inline-flex\",\r\n alignItems: \"center\",\r\n verticalAlign: \"middle\",\r\n fontSize: \"text\",\r\n gap: .4,\r\n color: \"text.primary\",\r\n userSelect: \"none\",\r\n cursor: \"pointer\",\r\n fontWeight: \"500\",\r\n }}\r\n baseClass='label'\r\n ref={ref}\r\n >{children}</Tag>\r\n})\r\n\r\nexport default Label"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
|
|
@@ -1,4 +1,13 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
var index = require('../useBlurCss/index.cjs');
|
|
8
|
+
var index$1 = require('../ClickOutside/index.cjs');
|
|
9
|
+
|
|
10
|
+
const Layer = (_a) => {
|
|
2
11
|
var _b, _c, _d;
|
|
3
12
|
var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
|
|
4
13
|
let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = core.useInterface("Layer", props, {});
|
|
@@ -12,7 +21,7 @@
|
|
|
12
21
|
blurMode = p.blurMode;
|
|
13
22
|
const [closed, setClosed] = React.useState(!open);
|
|
14
23
|
placement = placement || "bottom-left";
|
|
15
|
-
const blurCss = blur ? index
|
|
24
|
+
const blurCss = blur ? index(blur, blurMode) : {};
|
|
16
25
|
React.useEffect(() => {
|
|
17
26
|
if (closed && open) {
|
|
18
27
|
setClosed(false);
|
|
@@ -22,10 +31,11 @@
|
|
|
22
31
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
23
32
|
let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
|
|
24
33
|
let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
34
|
+
let content = jsxRuntime.jsx(core.Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
|
|
35
|
+
setClosed(true);
|
|
36
|
+
onClosed && onClosed();
|
|
37
|
+
}, children: children }));
|
|
38
|
+
return (jsxRuntime.jsx(core.Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsxRuntime.jsx(index$1, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
|
|
29
39
|
};
|
|
30
40
|
Layer.open = (children, props) => {
|
|
31
41
|
const l = core.Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
|
|
@@ -45,4 +55,7 @@ Layer.open = (children, props) => {
|
|
|
45
55
|
};
|
|
46
56
|
Layer.close = () => {
|
|
47
57
|
core.Renderar.unrender(Layer);
|
|
48
|
-
};
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
module.exports = Layer;
|
|
61
|
+
//# sourceMappingURL=index.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n open: boolean;\r\n children: ReactNode;\r\n transition?: TransitionProps['variant'];\r\n zIndex?: number;\r\n blur?: useBreakpointPropsType<number>\r\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n onClickOutside?: () => void;\r\n onOpen?: Function;\r\n onOpened?: Function;\r\n onClose?: Function;\r\n onClosed?: Function;\r\n slotProps?: {\r\n root?: Omit<TagProps<\"div\">, \"children\">;\r\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n content?: Omit<TagProps<\"div\">, \"children\">;\r\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\r\n }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n let [{\r\n onClickOutside,\r\n placement,\r\n transition,\r\n zIndex,\r\n blur,\r\n blurMode,\r\n onOpen,\r\n onOpened,\r\n onClose,\r\n onClosed,\r\n slotProps\r\n }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n const _p: any = {}\r\n if (blur) _p.blur = blur\r\n if (blurMode) _p.blurMode = blurMode\r\n const p: any = useBreakpointProps(_p)\r\n\r\n blur = p.blur\r\n blurMode = p.blurMode\r\n\r\n const [closed, setClosed] = useState(!open)\r\n placement = placement || \"bottom-left\"\r\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n useEffect(() => {\r\n if (closed && open) {\r\n setClosed(false)\r\n }\r\n }, [open])\r\n\r\n if (closed) return <></>\r\n let duration = slotProps?.transition?.duration || 300\r\n let delay = slotProps?.transition?.delay || 0\r\n\r\n let content = <Transition\r\n duration={duration}\r\n delay={delay}\r\n easing=\"standard\"\r\n variant={transition || \"zoomOver\"}\r\n {...slotProps?.transition}\r\n open={open}\r\n onOpen={onOpen}\r\n onOpened={onOpened}\r\n onClose={onClose}\r\n onClosed={() => {\r\n setClosed(true)\r\n onClosed && onClosed()\r\n }}\r\n >\r\n {children}\r\n </Transition>\r\n\r\n return (\r\n <Transition\r\n duration={duration}\r\n delay={delay}\r\n easing=\"smooth\"\r\n variant={\"fade\"}\r\n open={open}\r\n >\r\n <Tag\r\n baseClass=\"layer\"\r\n {...slotProps?.root}\r\n sxr={{\r\n ...slotProps?.root?.sx,\r\n position: \"fixed\",\r\n zIndex: 1500 + (zIndex || 0),\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0,\r\n width: \"100%\",\r\n height: \"100%\",\r\n ...blurCss\r\n }}\r\n >\r\n {\r\n onClickOutside ? <ClickOutside\r\n {...slotProps?.clickOutside}\r\n onClickOutside={onClickOutside || (() => { })}\r\n >\r\n {content}\r\n </ClickOutside> : content\r\n }\r\n </Tag>\r\n </Transition>\r\n )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n const l = Renderar.render(Layer as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n Renderar.unrender(Layer as any)\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }\r\n })\r\n return {\r\n open: () => {\r\n l.updateProps({ open: true })\r\n },\r\n close: () => {\r\n l.updateProps({ open: false })\r\n },\r\n }\r\n}\r\nLayer.close = () => {\r\n Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":["__rest","useInterface","useBreakpointProps","useState","useBlurCss","useEffect","_jsx","Transition","Tag","ClickOutside","Renderar"],"mappings":"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"}
|
package/Layer/index.mjs
CHANGED
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
import {__rest
|
|
1
|
+
import { __rest } from 'tslib';
|
|
2
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
3
|
+
import { useState, useEffect } from 'react';
|
|
4
|
+
import { useInterface, useBreakpointProps, Transition, Tag, Renderar } from '@xanui/core';
|
|
5
|
+
import useBlurCss from '../useBlurCss/index.mjs';
|
|
6
|
+
import ClickOutside from '../ClickOutside/index.mjs';
|
|
7
|
+
|
|
8
|
+
const Layer = (_a) => {
|
|
2
9
|
var _b, _c, _d;
|
|
3
10
|
var { children, open } = _a, props = __rest(_a, ["children", "open"]);
|
|
4
11
|
let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = useInterface("Layer", props, {});
|
|
@@ -22,10 +29,11 @@ import {__rest}from'tslib';import {jsx,Fragment}from'react/jsx-runtime';import {
|
|
|
22
29
|
return jsx(Fragment, {});
|
|
23
30
|
let duration = ((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _b === void 0 ? void 0 : _b.duration) || 300;
|
|
24
31
|
let delay = ((_c = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _c === void 0 ? void 0 : _c.delay) || 0;
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
32
|
+
let content = jsx(Transition, Object.assign({ duration: duration, delay: delay, easing: "standard", variant: transition || "zoomOver" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition, { open: open, onOpen: onOpen, onOpened: onOpened, onClose: onClose, onClosed: () => {
|
|
33
|
+
setClosed(true);
|
|
34
|
+
onClosed && onClosed();
|
|
35
|
+
}, children: children }));
|
|
36
|
+
return (jsx(Transition, { duration: duration, delay: delay, easing: "smooth", variant: "fade", open: open, children: jsx(Tag, Object.assign({ baseClass: "layer" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.root, { sxr: Object.assign(Object.assign(Object.assign({}, (_d = slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) === null || _d === void 0 ? void 0 : _d.sx), { position: "fixed", zIndex: 1500 + (zIndex || 0), top: 0, left: 0, bottom: 0, right: 0, width: "100%", height: "100%" }), blurCss), children: onClickOutside ? jsx(ClickOutside, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.clickOutside, { onClickOutside: onClickOutside || (() => { }), children: content })) : content })) }));
|
|
29
37
|
};
|
|
30
38
|
Layer.open = (children, props) => {
|
|
31
39
|
const l = Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
|
|
@@ -45,4 +53,7 @@ Layer.open = (children, props) => {
|
|
|
45
53
|
};
|
|
46
54
|
Layer.close = () => {
|
|
47
55
|
Renderar.unrender(Layer);
|
|
48
|
-
};
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export { Layer as default };
|
|
59
|
+
//# sourceMappingURL=index.mjs.map
|
package/Layer/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react'\r\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\r\nimport useBlurCss from '../useBlurCss';\r\nimport { Renderar } from \"@xanui/core\";\r\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\r\n\r\nexport type LayerProps = {\r\n open: boolean;\r\n children: ReactNode;\r\n transition?: TransitionProps['variant'];\r\n zIndex?: number;\r\n blur?: useBreakpointPropsType<number>\r\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\r\n onClickOutside?: () => void;\r\n onOpen?: Function;\r\n onOpened?: Function;\r\n onClose?: Function;\r\n onClosed?: Function;\r\n slotProps?: {\r\n root?: Omit<TagProps<\"div\">, \"children\">;\r\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\r\n content?: Omit<TagProps<\"div\">, \"children\">;\r\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\r\n }\r\n}\r\n\r\nconst Layer = ({ children, open, ...props }: LayerProps) => {\r\n let [{\r\n onClickOutside,\r\n placement,\r\n transition,\r\n zIndex,\r\n blur,\r\n blurMode,\r\n onOpen,\r\n onOpened,\r\n onClose,\r\n onClosed,\r\n slotProps\r\n }] = useInterface<any>(\"Layer\", props, {})\r\n\r\n const _p: any = {}\r\n if (blur) _p.blur = blur\r\n if (blurMode) _p.blurMode = blurMode\r\n const p: any = useBreakpointProps(_p)\r\n\r\n blur = p.blur\r\n blurMode = p.blurMode\r\n\r\n const [closed, setClosed] = useState(!open)\r\n placement = placement || \"bottom-left\"\r\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\r\n\r\n useEffect(() => {\r\n if (closed && open) {\r\n setClosed(false)\r\n }\r\n }, [open])\r\n\r\n if (closed) return <></>\r\n let duration = slotProps?.transition?.duration || 300\r\n let delay = slotProps?.transition?.delay || 0\r\n\r\n let content = <Transition\r\n duration={duration}\r\n delay={delay}\r\n easing=\"standard\"\r\n variant={transition || \"zoomOver\"}\r\n {...slotProps?.transition}\r\n open={open}\r\n onOpen={onOpen}\r\n onOpened={onOpened}\r\n onClose={onClose}\r\n onClosed={() => {\r\n setClosed(true)\r\n onClosed && onClosed()\r\n }}\r\n >\r\n {children}\r\n </Transition>\r\n\r\n return (\r\n <Transition\r\n duration={duration}\r\n delay={delay}\r\n easing=\"smooth\"\r\n variant={\"fade\"}\r\n open={open}\r\n >\r\n <Tag\r\n baseClass=\"layer\"\r\n {...slotProps?.root}\r\n sxr={{\r\n ...slotProps?.root?.sx,\r\n position: \"fixed\",\r\n zIndex: 1500 + (zIndex || 0),\r\n top: 0,\r\n left: 0,\r\n bottom: 0,\r\n right: 0,\r\n width: \"100%\",\r\n height: \"100%\",\r\n ...blurCss\r\n }}\r\n >\r\n {\r\n onClickOutside ? <ClickOutside\r\n {...slotProps?.clickOutside}\r\n onClickOutside={onClickOutside || (() => { })}\r\n >\r\n {content}\r\n </ClickOutside> : content\r\n }\r\n </Tag>\r\n </Transition>\r\n )\r\n}\r\n\r\n\r\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\r\n const l = Renderar.render(Layer as any, {\r\n open: true,\r\n ...props,\r\n children,\r\n onClosed: () => {\r\n Renderar.unrender(Layer as any)\r\n if (props?.onClosed) {\r\n props.onClosed()\r\n }\r\n }\r\n })\r\n return {\r\n open: () => {\r\n l.updateProps({ open: true })\r\n },\r\n close: () => {\r\n l.updateProps({ open: false })\r\n },\r\n }\r\n}\r\nLayer.close = () => {\r\n Renderar.unrender(Layer as any)\r\n}\r\nexport default Layer"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
'use strict';
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var tslib = require('tslib');
|
|
4
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var core = require('@xanui/core');
|
|
7
|
+
|
|
8
|
+
const LineProgress = React.forwardRef((_a, ref) => {
|
|
2
9
|
var _b, _c;
|
|
3
10
|
var { children } = _a, props = tslib.__rest(_a, ["children"]);
|
|
4
11
|
const uid = "line-progress" + React.useId().replace(":", "");
|
|
@@ -45,4 +52,7 @@
|
|
|
45
52
|
"100%": { left: "100%", width: "100%" }
|
|
46
53
|
}
|
|
47
54
|
} }) }));
|
|
48
|
-
});
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
module.exports = LineProgress;
|
|
58
|
+
//# sourceMappingURL=index.cjs.map
|