@xanui/ui 1.1.17 → 1.1.18
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 +18 -3
- package/Accordion/index.js.map +1 -1
- package/Accordion/index.mjs +15 -2
- package/Accordion/index.mjs.map +1 -1
- package/Alert/index.js +24 -5
- package/Alert/index.js.map +1 -1
- package/Alert/index.mjs +19 -2
- package/Alert/index.mjs.map +1 -1
- package/Avatar/index.js +13 -2
- package/Avatar/index.js.map +1 -1
- package/Avatar/index.mjs +11 -2
- package/Avatar/index.mjs.map +1 -1
- package/Badge/index.js +12 -2
- package/Badge/index.js.map +1 -1
- package/Badge/index.mjs +10 -2
- package/Badge/index.mjs.map +1 -1
- package/Box/index.js +12 -2
- package/Box/index.js.map +1 -1
- package/Box/index.mjs +10 -2
- package/Box/index.mjs.map +1 -1
- package/Button/index.js +17 -4
- package/Button/index.js.map +1 -1
- package/Button/index.mjs +13 -2
- package/Button/index.mjs.map +1 -1
- package/ButtonGroup/index.js +12 -2
- package/ButtonGroup/index.js.map +1 -1
- package/ButtonGroup/index.mjs +10 -2
- package/ButtonGroup/index.mjs.map +1 -1
- package/Calendar/index.js +35 -16
- package/Calendar/index.js.map +1 -1
- package/Calendar/index.mjs +19 -2
- package/Calendar/index.mjs.map +1 -1
- package/CalendarInput/index.js +23 -4
- package/CalendarInput/index.js.map +1 -1
- package/CalendarInput/index.mjs +19 -2
- package/CalendarInput/index.mjs.map +1 -1
- package/Checkbox/index.js +16 -2
- package/Checkbox/index.js.map +1 -1
- package/Checkbox/index.mjs +14 -2
- package/Checkbox/index.mjs.map +1 -1
- package/Chip/index.js +14 -3
- package/Chip/index.js.map +1 -1
- package/Chip/index.mjs +11 -2
- package/Chip/index.mjs.map +1 -1
- package/CircleProgress/index.js +13 -2
- package/CircleProgress/index.js.map +1 -1
- package/CircleProgress/index.mjs +11 -2
- package/CircleProgress/index.mjs.map +1 -1
- package/ClickOutside/index.js +13 -2
- package/ClickOutside/index.js.map +1 -1
- package/ClickOutside/index.mjs +11 -2
- package/ClickOutside/index.mjs.map +1 -1
- package/Collaps/index.js +12 -2
- package/Collaps/index.js.map +1 -1
- package/Collaps/index.mjs +10 -2
- package/Collaps/index.mjs.map +1 -1
- package/Container/index.js +12 -2
- package/Container/index.js.map +1 -1
- package/Container/index.mjs +10 -2
- package/Container/index.mjs.map +1 -1
- package/Datatable/FilterBox.js +22 -7
- package/Datatable/FilterBox.js.map +1 -1
- package/Datatable/FilterBox.mjs +15 -2
- package/Datatable/FilterBox.mjs.map +1 -1
- package/Datatable/Row.js +25 -7
- package/Datatable/Row.js.map +1 -1
- package/Datatable/Row.mjs +18 -2
- package/Datatable/Row.mjs.map +1 -1
- package/Datatable/SelectedBox.js +15 -4
- package/Datatable/SelectedBox.js.map +1 -1
- package/Datatable/SelectedBox.mjs +11 -2
- package/Datatable/SelectedBox.mjs.map +1 -1
- package/Datatable/Table.js +16 -4
- package/Datatable/Table.js.map +1 -1
- package/Datatable/Table.mjs +12 -2
- package/Datatable/Table.mjs.map +1 -1
- package/Datatable/TableHead.js +22 -5
- package/Datatable/TableHead.js.map +1 -1
- package/Datatable/TableHead.mjs +17 -2
- package/Datatable/TableHead.mjs.map +1 -1
- package/Datatable/index.js +20 -4
- package/Datatable/index.js.map +1 -1
- package/Datatable/index.mjs +16 -2
- package/Datatable/index.mjs.map +1 -1
- package/Divider/index.js +12 -2
- package/Divider/index.js.map +1 -1
- package/Divider/index.mjs +10 -2
- package/Divider/index.mjs.map +1 -1
- package/Drawer/index.js +16 -4
- package/Drawer/index.js.map +1 -1
- package/Drawer/index.mjs +12 -2
- package/Drawer/index.mjs.map +1 -1
- package/Form/index.js +13 -2
- package/Form/index.js.map +1 -1
- package/Form/index.mjs +11 -2
- package/Form/index.mjs.map +1 -1
- package/GridContainer/index.js +12 -2
- package/GridContainer/index.js.map +1 -1
- package/GridContainer/index.mjs +10 -2
- package/GridContainer/index.mjs.map +1 -1
- package/GridItem/index.js +12 -2
- package/GridItem/index.js.map +1 -1
- package/GridItem/index.mjs +10 -2
- package/GridItem/index.mjs.map +1 -1
- package/IconButton/index.js +15 -3
- package/IconButton/index.js.map +1 -1
- package/IconButton/index.mjs +12 -2
- package/IconButton/index.mjs.map +1 -1
- package/Image/index.js +13 -2
- package/Image/index.js.map +1 -1
- package/Image/index.mjs +11 -2
- package/Image/index.mjs.map +1 -1
- package/Input/index.js +15 -3
- package/Input/index.js.map +1 -1
- package/Input/index.mjs +12 -2
- package/Input/index.mjs.map +1 -1
- package/Label/index.js +12 -2
- package/Label/index.js.map +1 -1
- package/Label/index.mjs +10 -2
- package/Label/index.mjs.map +1 -1
- package/Layer/index.js +17 -4
- package/Layer/index.js.map +1 -1
- package/Layer/index.mjs +13 -2
- package/Layer/index.mjs.map +1 -1
- package/LineProgress/index.js +13 -2
- package/LineProgress/index.js.map +1 -1
- package/LineProgress/index.mjs +11 -2
- package/LineProgress/index.mjs.map +1 -1
- package/List/index.js +12 -2
- package/List/index.js.map +1 -1
- package/List/index.mjs +10 -2
- package/List/index.mjs.map +1 -1
- package/ListItem/index.js +14 -3
- package/ListItem/index.js.map +1 -1
- package/ListItem/index.mjs +11 -2
- package/ListItem/index.mjs.map +1 -1
- package/LoadingBox/index.js +14 -3
- package/LoadingBox/index.js.map +1 -1
- package/LoadingBox/index.mjs +11 -2
- package/LoadingBox/index.mjs.map +1 -1
- package/Menu/index.js +16 -3
- package/Menu/index.js.map +1 -1
- package/Menu/index.mjs +13 -2
- package/Menu/index.mjs.map +1 -1
- package/Modal/index.js +15 -3
- package/Modal/index.js.map +1 -1
- package/Modal/index.mjs +12 -2
- package/Modal/index.mjs.map +1 -1
- package/NoSSR/index.js +10 -2
- package/NoSSR/index.js.map +1 -1
- package/NoSSR/index.mjs +8 -2
- package/NoSSR/index.mjs.map +1 -1
- package/Option/index.js +13 -3
- package/Option/index.js.map +1 -1
- package/Option/index.mjs +10 -2
- package/Option/index.mjs.map +1 -1
- package/Paper/index.js +12 -2
- package/Paper/index.js.map +1 -1
- package/Paper/index.mjs +10 -2
- package/Paper/index.mjs.map +1 -1
- package/Portal/index.js +13 -2
- package/Portal/index.js.map +1 -1
- package/Portal/index.mjs +11 -2
- package/Portal/index.mjs.map +1 -1
- package/Radio/index.js +15 -3
- package/Radio/index.js.map +1 -1
- package/Radio/index.mjs +12 -2
- package/Radio/index.mjs.map +1 -1
- package/Scrollbar/index.js +13 -2
- package/Scrollbar/index.js.map +1 -1
- package/Scrollbar/index.mjs +11 -2
- package/Scrollbar/index.mjs.map +1 -1
- package/Select/index.js +22 -5
- package/Select/index.js.map +1 -1
- package/Select/index.mjs +17 -2
- package/Select/index.mjs.map +1 -1
- package/Stack/index.js +12 -2
- package/Stack/index.js.map +1 -1
- package/Stack/index.mjs +10 -2
- package/Stack/index.mjs.map +1 -1
- package/Switch/index.js +13 -2
- package/Switch/index.js.map +1 -1
- package/Switch/index.mjs +11 -2
- package/Switch/index.mjs.map +1 -1
- package/Tab/index.js +15 -3
- package/Tab/index.js.map +1 -1
- package/Tab/index.mjs +12 -2
- package/Tab/index.mjs.map +1 -1
- package/Table/index.js +14 -3
- package/Table/index.js.map +1 -1
- package/Table/index.mjs +11 -2
- package/Table/index.mjs.map +1 -1
- package/TableBody/index.js +12 -2
- package/TableBody/index.js.map +1 -1
- package/TableBody/index.mjs +10 -2
- package/TableBody/index.mjs.map +1 -1
- package/TableCell/index.js +12 -2
- package/TableCell/index.js.map +1 -1
- package/TableCell/index.mjs +10 -2
- package/TableCell/index.mjs.map +1 -1
- package/TableFooter/index.js +12 -2
- package/TableFooter/index.js.map +1 -1
- package/TableFooter/index.mjs +10 -2
- package/TableFooter/index.mjs.map +1 -1
- package/TableHead/index.js +12 -2
- package/TableHead/index.js.map +1 -1
- package/TableHead/index.mjs +10 -2
- package/TableHead/index.mjs.map +1 -1
- package/TablePagination/index.js +23 -6
- package/TablePagination/index.js.map +1 -1
- package/TablePagination/index.mjs +17 -2
- package/TablePagination/index.mjs.map +1 -1
- package/TableRow/index.js +12 -2
- package/TableRow/index.js.map +1 -1
- package/TableRow/index.mjs +10 -2
- package/TableRow/index.mjs.map +1 -1
- package/Tabs/index.js +13 -2
- package/Tabs/index.js.map +1 -1
- package/Tabs/index.mjs +11 -2
- package/Tabs/index.mjs.map +1 -1
- package/Text/index.js +12 -2
- package/Text/index.js.map +1 -1
- package/Text/index.mjs +10 -2
- package/Text/index.mjs.map +1 -1
- package/Toast/index.js +18 -4
- package/Toast/index.js.map +1 -1
- package/Toast/index.mjs +14 -2
- package/Toast/index.mjs.map +1 -1
- package/Tooltip/index.js +14 -3
- package/Tooltip/index.js.map +1 -1
- package/Tooltip/index.mjs +11 -2
- package/Tooltip/index.mjs.map +1 -1
- package/ViewBox/index.js +14 -3
- package/ViewBox/index.js.map +1 -1
- package/ViewBox/index.mjs +11 -2
- package/ViewBox/index.mjs.map +1 -1
- package/index.js +116 -1
- package/index.js.map +1 -1
- package/index.mjs +56 -1
- package/index.mjs.map +1 -1
- package/package.json +3 -12
- package/useAlert/index.js +19 -5
- package/useAlert/index.js.map +1 -1
- package/useAlert/index.mjs +14 -2
- package/useAlert/index.mjs.map +1 -1
- package/useBlurCss/index.js +10 -2
- package/useBlurCss/index.js.map +1 -1
- package/useBlurCss/index.mjs +8 -2
- package/useBlurCss/index.mjs.map +1 -1
- package/useCorner/index.js +7 -2
- package/useCorner/index.js.map +1 -1
- package/useCorner/index.mjs +4 -1
- package/useCorner/index.mjs.map +1 -1
- package/useLayer/index.js +14 -3
- package/useLayer/index.js.map +1 -1
- package/useLayer/index.mjs +11 -2
- package/useLayer/index.mjs.map +1 -1
- package/useModal/index.js +14 -3
- package/useModal/index.js.map +1 -1
- package/useModal/index.mjs +11 -2
- package/useModal/index.mjs.map +1 -1
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":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type LabelProps<T extends TagComponentType = \"label\"> = TagProps<T>\n\nconst Label = React.forwardRef(<T extends TagComponentType = \"label\">({ children, ...rest }: LabelProps<T>, ref: React.Ref<any>) => {\n return <Tag\n component='label'\n {...rest}\n sxr={{\n display: \"inline-flex\",\n alignItems: \"center\",\n verticalAlign: \"middle\",\n fontSize: \"text\",\n gap: .4,\n color: \"text.primary\",\n userSelect: \"none\",\n cursor: \"pointer\",\n fontWeight: \"500\",\n }}\n baseClass='label'\n ref={ref}\n >{children}</Tag>\n})\n\nexport default Label"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAoC,EAAE,GAAmB,KAAI;AAA7D,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,OAAOA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,OAAO,EAAA,EACb,IAAI,EAAA,EACR,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,GAAG,EAAE,EAAE;AACP,YAAA,KAAK,EAAE,cAAc;AACrB,YAAA,UAAU,EAAE,MAAM;AAClB,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,UAAU,EAAE,KAAK;SACpB,EACD,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AACrB,CAAC;;;;"}
|
package/Layer/index.js
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var tslib = require('tslib');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@xanui/core');
|
|
8
|
+
var index = require('../useBlurCss/index.js');
|
|
9
|
+
var index$1 = require('../ClickOutside/index.js');
|
|
10
|
+
|
|
11
|
+
const Layer = (_a) => {
|
|
2
12
|
var _b, _c, _d;
|
|
3
13
|
var { children, open } = _a, props = tslib.__rest(_a, ["children", "open"]);
|
|
4
14
|
let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = core.useInterface("Layer", props, {});
|
|
@@ -12,7 +22,7 @@
|
|
|
12
22
|
blurMode = p.blurMode;
|
|
13
23
|
const [closed, setClosed] = React.useState(!open);
|
|
14
24
|
placement = placement || "bottom-left";
|
|
15
|
-
const blurCss = blur ? index
|
|
25
|
+
const blurCss = blur ? index(blur, blurMode) : {};
|
|
16
26
|
React.useEffect(() => {
|
|
17
27
|
if (closed && open) {
|
|
18
28
|
setClosed(false);
|
|
@@ -26,7 +36,7 @@
|
|
|
26
36
|
setClosed(true);
|
|
27
37
|
onClosed && onClosed();
|
|
28
38
|
}, children: children }));
|
|
29
|
-
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
|
|
39
|
+
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 })) }));
|
|
30
40
|
};
|
|
31
41
|
Layer.open = (children, props) => {
|
|
32
42
|
const l = core.Renderar.render(Layer, Object.assign(Object.assign({ open: true }, props), { children, onClosed: () => {
|
|
@@ -46,4 +56,7 @@ Layer.open = (children, props) => {
|
|
|
46
56
|
};
|
|
47
57
|
Layer.close = () => {
|
|
48
58
|
core.Renderar.unrender(Layer);
|
|
49
|
-
};
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
module.exports = Layer;
|
|
62
|
+
//# sourceMappingURL=index.js.map
|
package/Layer/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
package/Layer/index.mjs
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { __rest } from 'tslib';
|
|
3
|
+
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
4
|
+
import { useState, useEffect } from 'react';
|
|
5
|
+
import { useInterface, useBreakpointProps, Transition, Tag, Renderar } from '@xanui/core';
|
|
6
|
+
import useBlurCss from '../useBlurCss/index.mjs';
|
|
7
|
+
import ClickOutside from '../ClickOutside/index.mjs';
|
|
8
|
+
|
|
9
|
+
const Layer = (_a) => {
|
|
2
10
|
var _b, _c, _d;
|
|
3
11
|
var { children, open } = _a, props = __rest(_a, ["children", "open"]);
|
|
4
12
|
let [{ onClickOutside, placement, transition, zIndex, blur, blurMode, onOpen, onOpened, onClose, onClosed, slotProps }] = useInterface("Layer", props, {});
|
|
@@ -46,4 +54,7 @@ Layer.open = (children, props) => {
|
|
|
46
54
|
};
|
|
47
55
|
Layer.close = () => {
|
|
48
56
|
Renderar.unrender(Layer);
|
|
49
|
-
};
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
export { Layer as default };
|
|
60
|
+
//# sourceMappingURL=index.mjs.map
|
package/Layer/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
package/LineProgress/index.js
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var tslib = require('tslib');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@xanui/core');
|
|
8
|
+
|
|
9
|
+
const LineProgress = React.forwardRef((_a, ref) => {
|
|
2
10
|
var _b, _c;
|
|
3
11
|
var { children } = _a, props = tslib.__rest(_a, ["children"]);
|
|
4
12
|
const uid = "line-progress" + React.useId().replace(":", "");
|
|
@@ -45,4 +53,7 @@
|
|
|
45
53
|
"100%": { left: "100%", width: "100%" }
|
|
46
54
|
}
|
|
47
55
|
} }) }));
|
|
48
|
-
});
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
module.exports = LineProgress;
|
|
59
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
|
package/LineProgress/index.mjs
CHANGED
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
import { __rest } from 'tslib';
|
|
3
|
+
import { jsx } from 'react/jsx-runtime';
|
|
4
|
+
import React, { useId } from 'react';
|
|
5
|
+
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
6
|
+
|
|
7
|
+
const LineProgress = React.forwardRef((_a, ref) => {
|
|
2
8
|
var _b, _c;
|
|
3
9
|
var { children } = _a, props = __rest(_a, ["children"]);
|
|
4
10
|
const uid = "line-progress" + useId().replace(":", "");
|
|
@@ -45,4 +51,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{use
|
|
|
45
51
|
"100%": { left: "100%", width: "100%" }
|
|
46
52
|
}
|
|
47
53
|
} }) }));
|
|
48
|
-
});
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export { LineProgress as default };
|
|
57
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":[
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/LineProgress/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useId } from \"react\"\nimport { Tag, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType } from '@xanui/core';\n\nexport type LineProgressProps = {\n children?: ReactElement;\n thumbSize?: useBreakpointPropsType<number>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n value?: useBreakpointPropsType<number>;\n hideTrack?: useBreakpointPropsType<boolean>;\n speed?: useBreakpointPropsType<number>;\n}\n\n\nconst LineProgress = React.forwardRef(({ children, ...props }: LineProgressProps, ref: React.Ref<any>) => {\n const uid = \"line-progress\" + useId().replace(\":\", \"\")\n let [{ color, value, thumbSize, hideTrack, speed }] = useInterface<any>(\"LineProgress\", props, {})\n const _p: any = {}\n if (thumbSize) _p.thumbSize = thumbSize\n if (color) _p.color = color\n if (value) _p.value = value\n if (hideTrack) _p.hideTrack = hideTrack\n if (speed) _p.speed = speed\n const p: any = useBreakpointProps(_p)\n\n thumbSize = p.thumbSize ?? 4\n color = p.color ?? \"brand\"\n value = p.value\n hideTrack = p.hideTrack\n speed = p.speed\n\n let isVal = typeof value === 'number'\n if (isVal && (value as number) > 100) value = 100\n\n return (\n <Tag\n baseClass='line-progress'\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n width: '100%',\n height: thumbSize,\n position: \"relative\",\n overflow: \"hidden\",\n bgcolor: hideTrack ? \"transparent\" : (color === 'default' ? `text.primary` : `${color}.soft.primary`),\n radius: 2,\n }}\n ref={ref}\n >\n <Tag\n component=\"span\"\n baseClass=\"line-progress-thumb\"\n sxr={{\n bgcolor: color === 'default' ? `divider` : `${color}`,\n width: isVal ? `${value}%` : \"50%\",\n height: thumbSize,\n position: \"absolute\",\n left: 0,\n animation: isVal ? \"none\" : `${uid} ${speed ?? 1}s linear infinite`,\n [`@keyframes ${uid}`]: {\n \"0%\": { left: \"-40%\" },\n \"50%\": { left: \"20%\", width: \"80%\" },\n \"100%\": { left: \"100%\", width: \"100%\" }\n }\n }}\n />\n </Tag >\n )\n})\n\nexport default LineProgress\n\n"],"names":[],"mappings":";;;;;;AAcA;;AAAuC;AACnC;;;AAGA;AAAe;AACf;AAAW;AACX;AAAW;AACX;AAAe;AACf;AAAW;AACX;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAMY;AACA;AACA;AACA;AACA;AACA;;AAEA;AACH;AAOO;;AAEA;AACA;AACA;AACA;AACA;AACI;;;AAGH;;AAKrB;;"}
|
package/List/index.js
CHANGED
|
@@ -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 List = React.forwardRef((_a, ref) => {
|
|
2
9
|
var _b, _c, _d, _e;
|
|
3
10
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
4
11
|
let [_f] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant } = _f, props = tslib.__rest(_f, ["sx", "color", "variant", "hoverColor", "hoverVariant"]);
|
|
@@ -46,4 +53,7 @@
|
|
|
46
53
|
}, "& .list-item-subtitle": {
|
|
47
54
|
color: template.primary.color
|
|
48
55
|
} }) }), (sx || {})), ref: ref, children: children })));
|
|
49
|
-
});
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
module.exports = List;
|
|
59
|
+
//# sourceMappingURL=index.js.map
|
package/List/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"soft\"\n\n const template = useColorTemplate(color, variant)\n const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: \"1px solid\",\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template.primary,\n \"& .list-item-icon\": {\n color: template.primary.color\n },\n \"& .list-item-text\": {\n color: template.primary.color\n },\n \"& .list-item-subtitle\": {\n color: template.primary.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"soft\"\n\n const template = useColorTemplate(color, variant)\n const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: \"1px solid\",\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template.primary,\n \"& .list-item-icon\": {\n color: template.primary.color\n },\n \"& .list-item-text\": {\n color: template.primary.color\n },\n \"& .list-item-subtitle\": {\n color: template.primary.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag"],"mappings":"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"}
|
package/List/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 { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/core';
|
|
5
|
+
|
|
6
|
+
const List = React.forwardRef((_a, ref) => {
|
|
2
7
|
var _b, _c, _d, _e;
|
|
3
8
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
4
9
|
let [_f] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant } = _f, props = __rest(_f, ["sx", "color", "variant", "hoverColor", "hoverVariant"]);
|
|
@@ -46,4 +51,7 @@ import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React from
|
|
|
46
51
|
}, "& .list-item-subtitle": {
|
|
47
52
|
color: template.primary.color
|
|
48
53
|
} }) }), (sx || {})), ref: ref, children: children })));
|
|
49
|
-
});
|
|
54
|
+
});
|
|
55
|
+
|
|
56
|
+
export { List as default };
|
|
57
|
+
//# sourceMappingURL=index.mjs.map
|
package/List/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"soft\"\n\n const template = useColorTemplate(color, variant)\n const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: \"1px solid\",\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template.primary,\n \"& .list-item-icon\": {\n color: template.primary.color\n },\n \"& .list-item-text\": {\n color: template.primary.color\n },\n \"& .list-item-subtitle\": {\n color: template.primary.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color'> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n}\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n hoverColor = p.hoverColor ?? \"default\"\n hoverVariant = p.hoverVariant ?? \"soft\"\n\n const template = useColorTemplate(color, variant)\n const hoverTemplate = useColorTemplate(hoverColor, hoverVariant)\n\n let sxOutline: any = {}\n if (hoverVariant == 'outline' || variant === 'outline') {\n sxOutline = {\n \"& .list-item\": {\n border: \"1px solid\",\n borderColor: \"transparent\"\n }\n }\n }\n\n return (\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n ...sxOutline,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : hoverTemplate.primary.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template.primary,\n \"& .list-item-icon\": {\n color: template.primary.color\n },\n \"& .list-item-text\": {\n color: template.primary.color\n },\n \"& .list-item-subtitle\": {\n color: template.primary.color\n },\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default List"],"names":["_jsx"],"mappings":"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"}
|
package/ListItem/index.js
CHANGED
|
@@ -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.js');
|
|
8
|
+
|
|
9
|
+
const ListItem = React.forwardRef((_a, ref) => {
|
|
2
10
|
var { children, startIcon, endIcon, subtitle } = _a, rest = tslib.__rest(_a, ["children", "startIcon", "endIcon", "subtitle"]);
|
|
3
11
|
let [_b] = core.useInterface("ListItem", rest, {}), { selected } = _b, props = tslib.__rest(_b, ["selected"]);
|
|
4
12
|
const _p = {};
|
|
@@ -22,5 +30,8 @@
|
|
|
22
30
|
p: 1,
|
|
23
31
|
whiteSpace: "nowrap",
|
|
24
32
|
flexShrink: "0",
|
|
25
|
-
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index
|
|
26
|
-
});
|
|
33
|
+
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsxRuntime.jsx(core.Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxRuntime.jsxs(core.Tag, { flex: 1, children: [jsxRuntime.jsx(index, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsxRuntime.jsx(index, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsxRuntime.jsx(core.Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
module.exports = ListItem;
|
|
37
|
+
//# sourceMappingURL=index.js.map
|
package/ListItem/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Text"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Text"],"mappings":"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"}
|
package/ListItem/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 from 'react';
|
|
4
|
+
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
+
import Text from '../Text/index.mjs';
|
|
6
|
+
|
|
7
|
+
const ListItem = React.forwardRef((_a, ref) => {
|
|
2
8
|
var { children, startIcon, endIcon, subtitle } = _a, rest = __rest(_a, ["children", "startIcon", "endIcon", "subtitle"]);
|
|
3
9
|
let [_b] = useInterface("ListItem", rest, {}), { selected } = _b, props = __rest(_b, ["selected"]);
|
|
4
10
|
const _p = {};
|
|
@@ -23,4 +29,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
|
|
|
23
29
|
whiteSpace: "nowrap",
|
|
24
30
|
flexShrink: "0",
|
|
25
31
|
}, baseClass: 'list-item', classNames: [{ "list-item-selected": selected }, ...(props.classNames || [])], ref: ref, children: [startIcon && jsx(Tag, { mr: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: startIcon }), jsxs(Tag, { flex: 1, children: [jsx(Text, { variant: "text", className: 'list-item-text', component: typeof children === "string" || typeof children === "number" ? "p" : "div", children: children }), subtitle && jsx(Text, { variant: "text", fontSize: "button", className: 'list-item-subtitle', component: typeof subtitle === "string" || typeof subtitle === "number" ? "p" : "div", children: subtitle })] }), endIcon && jsx(Tag, { ml: 1, component: "span", display: "inline-block", className: 'list-item-icon', children: endIcon })] })));
|
|
26
|
-
});
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
export { ListItem as default };
|
|
35
|
+
//# sourceMappingURL=index.mjs.map
|
package/ListItem/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/ListItem/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport Text from '../Text';\n\n\nexport type ListItemProps<T extends TagComponentType = \"li\"> = TagProps<T> & {\n selected?: boolean;\n subtitle?: useBreakpointPropsType<string | ReactElement>;\n startIcon?: useBreakpointPropsType<ReactElement>;\n endIcon?: useBreakpointPropsType<ReactElement>;\n}\n\nconst ListItem = React.forwardRef(<T extends TagComponentType = \"li\">({ children, startIcon, endIcon, subtitle, ...rest }: ListItemProps<T>, ref: React.Ref<any>) => {\n let [{ selected, ...props }] = useInterface<any>(\"ListItem\", rest, {})\n const _p: any = {}\n if (subtitle) _p.subtitle = subtitle\n if (startIcon) _p.startIcon = startIcon\n if (endIcon) _p.endIcon = endIcon\n const p: any = useBreakpointProps(_p)\n\n subtitle = p.subtitle\n startIcon = p.startIcon\n endIcon = p.endIcon\n\n return (\n <Tag\n component='li'\n {...props}\n sxr={{\n alignItems: \"center\",\n display: \"flex\",\n flexDirection: \"row\",\n userSelect: \"none\",\n cursor: \"pointer\",\n lineHeight: 1.4,\n p: 1,\n whiteSpace: \"nowrap\",\n flexShrink: \"0\",\n }}\n baseClass='list-item'\n classNames={[{ \"list-item-selected\": selected as boolean }, ...(props.classNames || [])]}\n ref={ref}\n >\n {startIcon && <Tag mr={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{startIcon as any}</Tag>}\n <Tag flex={1}>\n <Text\n variant=\"text\"\n className='list-item-text'\n component={typeof children === \"string\" || typeof children === \"number\" ? \"p\" : \"div\"}\n >\n {children}\n </Text>\n {\n subtitle && <Text\n variant=\"text\"\n fontSize=\"button\"\n className='list-item-subtitle'\n component={typeof subtitle === \"string\" || typeof subtitle === \"number\" ? \"p\" : \"div\"}\n >{subtitle as any}</Text>\n }\n </Tag>\n {endIcon && <Tag ml={1} component=\"span\" display=\"inline-block\" className='list-item-icon'>{endIcon as any}</Tag>}\n </Tag>\n )\n})\n\nexport default ListItem"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
package/LoadingBox/index.js
CHANGED
|
@@ -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('../CircleProgress/index.js');
|
|
8
|
+
|
|
9
|
+
const LoadingBox = React.forwardRef((_a, ref) => {
|
|
2
10
|
var _b;
|
|
3
11
|
var { children } = _a, props = tslib.__rest(_a, ["children"]);
|
|
4
12
|
let [_c] = core.useInterface("LoadingBox", props, {}), { loading, color, slotProps } = _c, rest = tslib.__rest(_c, ["loading", "color", "slotProps"]);
|
|
@@ -17,5 +25,8 @@
|
|
|
17
25
|
display: "flex",
|
|
18
26
|
justifyContent: "center",
|
|
19
27
|
alignItems: "center",
|
|
20
|
-
}, children: jsxRuntime.jsx(index
|
|
21
|
-
});
|
|
28
|
+
}, children: jsxRuntime.jsx(index, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsxRuntime.jsx(core.Tag, { disabled: loading, children: children })] })));
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
module.exports = LoadingBox;
|
|
32
|
+
//# sourceMappingURL=index.js.map
|
package/LoadingBox/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n loading?: boolean;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n slotProps?: {\n CircleProgress?: Omit<CircleProgressProps, \"value\">\n }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n const _p: any = {}\n if (color) _p.color = color\n const p: any = useBreakpointProps(_p)\n color = p.color ?? \"brand\"\n\n return (\n <Tag\n baseClass='loading-box'\n {...rest}\n sxr={{\n position: \"relative\",\n display: \"inline-block\",\n overflow: \"hidden\",\n ...((rest as any).sx || {})\n }}\n ref={ref}\n >\n {loading && <Tag\n baseClass=\"loading-box-container\"\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n color=\"brand\"\n hideTrack\n {...slotProps?.CircleProgress}\n />\n </Tag>}\n <Tag\n disabled={loading}\n >\n {children}\n </Tag>\n </Tag>\n )\n})\n\nexport default LoadingBox\n\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","CircleProgress"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n loading?: boolean;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n slotProps?: {\n CircleProgress?: Omit<CircleProgressProps, \"value\">\n }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n const _p: any = {}\n if (color) _p.color = color\n const p: any = useBreakpointProps(_p)\n color = p.color ?? \"brand\"\n\n return (\n <Tag\n baseClass='loading-box'\n {...rest}\n sxr={{\n position: \"relative\",\n display: \"inline-block\",\n overflow: \"hidden\",\n ...((rest as any).sx || {})\n }}\n ref={ref}\n >\n {loading && <Tag\n baseClass=\"loading-box-container\"\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n color=\"brand\"\n hideTrack\n {...slotProps?.CircleProgress}\n />\n </Tag>}\n <Tag\n disabled={loading}\n >\n {children}\n </Tag>\n </Tag>\n )\n})\n\nexport default LoadingBox\n\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","CircleProgress"],"mappings":";;;;;;;;AAeA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAAA,YAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACzF,IAAI,CAAA,EAAA,CAAA,GAA2CC,iBAAY,CAAM,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,EAApF,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAAD,YAAA,CAAA,EAAA,EAApC,CAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAsC,CAA8C;IACzF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAE1B,QACIC,gBAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,aAAa,IACnB,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,KACb,IAAY,CAAC,EAAE,IAAI,EAAE,EAAC,EAE/B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAIC,eAACD,QAAG,EAAA,EACZ,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,QAAA,EAEDC,cAAA,CAACC,KAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAA,IAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAA,CAC/B,EAAA,CACA,EACND,cAAA,CAACD,QAAG,EAAA,EACA,QAAQ,EAAE,OAAO,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACP,CAAA,EAAA,CAAA,CACJ;AAEd,CAAC;;;;"}
|
package/LoadingBox/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 from 'react';
|
|
4
|
+
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
+
import CircleProgress from '../CircleProgress/index.mjs';
|
|
6
|
+
|
|
7
|
+
const LoadingBox = React.forwardRef((_a, ref) => {
|
|
2
8
|
var _b;
|
|
3
9
|
var { children } = _a, props = __rest(_a, ["children"]);
|
|
4
10
|
let [_c] = useInterface("LoadingBox", props, {}), { loading, color, slotProps } = _c, rest = __rest(_c, ["loading", "color", "slotProps"]);
|
|
@@ -18,4 +24,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
|
|
|
18
24
|
justifyContent: "center",
|
|
19
25
|
alignItems: "center",
|
|
20
26
|
}, children: jsx(CircleProgress, Object.assign({ color: "brand", hideTrack: true }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.CircleProgress)) }), jsx(Tag, { disabled: loading, children: children })] })));
|
|
21
|
-
});
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export { LoadingBox as default };
|
|
30
|
+
//# sourceMappingURL=index.mjs.map
|
package/LoadingBox/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n loading?: boolean;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n slotProps?: {\n CircleProgress?: Omit<CircleProgressProps, \"value\">\n }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n const _p: any = {}\n if (color) _p.color = color\n const p: any = useBreakpointProps(_p)\n color = p.color ?? \"brand\"\n\n return (\n <Tag\n baseClass='loading-box'\n {...rest}\n sxr={{\n position: \"relative\",\n display: \"inline-block\",\n overflow: \"hidden\",\n ...((rest as any).sx || {})\n }}\n ref={ref}\n >\n {loading && <Tag\n baseClass=\"loading-box-container\"\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n color=\"brand\"\n hideTrack\n {...slotProps?.CircleProgress}\n />\n </Tag>}\n <Tag\n disabled={loading}\n >\n {children}\n </Tag>\n </Tag>\n )\n})\n\nexport default LoadingBox\n\n"],"names":["_jsxs","_jsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/LoadingBox/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, UseColorTemplateColor, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress';\n\n\nexport type LoadingBoxProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n loading?: boolean;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n slotProps?: {\n CircleProgress?: Omit<CircleProgressProps, \"value\">\n }\n\n}\n\nconst LoadingBox = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...props }: LoadingBoxProps<T>, ref: React.Ref<any>) => {\n let [{ loading, color, slotProps, ...rest }] = useInterface<any>(\"LoadingBox\", props, {})\n const _p: any = {}\n if (color) _p.color = color\n const p: any = useBreakpointProps(_p)\n color = p.color ?? \"brand\"\n\n return (\n <Tag\n baseClass='loading-box'\n {...rest}\n sxr={{\n position: \"relative\",\n display: \"inline-block\",\n overflow: \"hidden\",\n ...((rest as any).sx || {})\n }}\n ref={ref}\n >\n {loading && <Tag\n baseClass=\"loading-box-container\"\n sxr={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n zIndex: 1,\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n }}\n >\n <CircleProgress\n color=\"brand\"\n hideTrack\n {...slotProps?.CircleProgress}\n />\n </Tag>}\n <Tag\n disabled={loading}\n >\n {children}\n </Tag>\n </Tag>\n )\n})\n\nexport default LoadingBox\n\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAeA,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,KAAK,GAAA,MAAA,CAAA,EAAA,EAApB,YAAsB,CAAF;IACzF,IAAI,CAAA,EAAA,CAAA,GAA2C,YAAY,CAAM,YAAY,EAAE,KAAK,EAAE,EAAE,CAAC,EAApF,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAA,GAAA,EAAW,EAAN,IAAI,GAAA,MAAA,CAAA,EAAA,EAApC,CAAA,SAAA,EAAA,OAAA,EAAA,WAAA,CAAsC,CAA8C;IACzF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,OAAO;IAE1B,QACIA,KAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,aAAa,IACnB,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,QAAQ,KACb,IAAY,CAAC,EAAE,IAAI,EAAE,EAAC,EAE/B,GAAG,EAAE,GAAG,aAEP,OAAO,IAAIC,IAAC,GAAG,EAAA,EACZ,SAAS,EAAC,uBAAuB,EACjC,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,UAAU;AACpB,oBAAA,GAAG,EAAE,CAAC;AACN,oBAAA,IAAI,EAAE,CAAC;AACP,oBAAA,KAAK,EAAE,CAAC;AACR,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,MAAM,EAAE,CAAC;AACT,oBAAA,OAAO,EAAE,MAAM;AACf,oBAAA,cAAc,EAAE,QAAQ;AACxB,oBAAA,UAAU,EAAE,QAAQ;AACvB,iBAAA,EAAA,QAAA,EAEDA,GAAA,CAAC,cAAc,EAAA,MAAA,CAAA,MAAA,CAAA,EACX,KAAK,EAAC,OAAO,EACb,SAAS,EAAA,IAAA,EAAA,EACL,SAAS,KAAA,IAAA,IAAT,SAAS,uBAAT,SAAS,CAAE,cAAc,CAAA,CAC/B,EAAA,CACA,EACNA,GAAA,CAAC,GAAG,EAAA,EACA,QAAQ,EAAE,OAAO,EAAA,QAAA,EAEhB,QAAQ,EAAA,CACP,CAAA,EAAA,CAAA,CACJ;AAEd,CAAC;;;;"}
|
package/Menu/index.js
CHANGED
|
@@ -1,4 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
"use client";
|
|
2
|
+
'use strict';
|
|
3
|
+
|
|
4
|
+
var tslib = require('tslib');
|
|
5
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var core = require('@xanui/core');
|
|
8
|
+
var index = require('../Portal/index.js');
|
|
9
|
+
var index$1 = require('../ClickOutside/index.js');
|
|
10
|
+
|
|
11
|
+
const placements = [
|
|
2
12
|
"top",
|
|
3
13
|
"top-left",
|
|
4
14
|
"top-right",
|
|
@@ -121,7 +131,7 @@ const Menu = (_a) => {
|
|
|
121
131
|
}, [closed, target, placement]);
|
|
122
132
|
if (closed)
|
|
123
133
|
return null;
|
|
124
|
-
return (jsxRuntime.jsx(index
|
|
134
|
+
return (jsxRuntime.jsx(index, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.portal, { children: jsxRuntime.jsx(index$1, { onClickOutside: (e) => {
|
|
125
135
|
if (e.target !== target) {
|
|
126
136
|
onClickOutside && onClickOutside(e);
|
|
127
137
|
}
|
|
@@ -130,4 +140,7 @@ const Menu = (_a) => {
|
|
|
130
140
|
setClosed(true);
|
|
131
141
|
(_b = (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.transition) === null || _a === void 0 ? void 0 : _a.onClosed) === null || _b === void 0 ? void 0 : _b.call(_a);
|
|
132
142
|
}, children: jsxRuntime.jsx(core.Tag, Object.assign({ baseClass: "menu-content" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: Object.assign({ overflow: "hidden", bgcolor: "background.primary", shadow: 2, radius: 1, transformOrigin: getTransformOrigin(placed) }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.content) === null || _b === void 0 ? void 0 : _b.sx), children: children })) })) }) })));
|
|
133
|
-
};
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
module.exports = Menu;
|
|
146
|
+
//# sourceMappingURL=index.js.map
|