@xanui/ui 1.1.63 → 1.1.65

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/useAlert/index.js DELETED
@@ -1,92 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsxs, jsx } from 'react/jsx-runtime';
4
- import { Tag } from '@xanui/core';
5
- import Button from '../Button/index.js';
6
- import useModal from '../useModal/index.js';
7
- import Alert from '../Alert/index.js';
8
- import React from 'react';
9
-
10
- const useAlert = (props) => {
11
- const [loading, setLoading] = React.useState(false);
12
- let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = __rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
13
- hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
14
- hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
15
- size !== null && size !== void 0 ? size : (size = "small");
16
- color !== null && color !== void 0 ? color : (color = 'default');
17
- variant !== null && variant !== void 0 ? variant : (variant = "text");
18
- direction !== null && direction !== void 0 ? direction : (direction = "column");
19
- buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
20
- let sx = {};
21
- switch (buttonPlacement) {
22
- case "start":
23
- sx.justifyContent = 'flex-start';
24
- break;
25
- case "end":
26
- sx.justifyContent = 'flex-end';
27
- break;
28
- case "between":
29
- sx.justifyContent = 'space-between';
30
- break;
31
- case "full":
32
- sx = {
33
- "& button": {
34
- flex: 1
35
- }
36
- };
37
- break;
38
- }
39
- let sizes = {
40
- small: 320,
41
- medium: 400,
42
- large: 600
43
- };
44
- let okcolor = color;
45
- let closecolor = color;
46
- if (color === 'default') {
47
- okcolor = 'brand';
48
- closecolor = 'default';
49
- variant = 'text';
50
- }
51
- else {
52
- if (variant === 'fill') {
53
- okcolor = 'default';
54
- closecolor = 'default';
55
- }
56
- else {
57
- okcolor = color;
58
- closecolor = 'default';
59
- }
60
- }
61
- const modal = useModal(jsxs(Alert, Object.assign({ direction: direction, sx: {
62
- px: 2,
63
- py: 1,
64
- pt: direction === 'row' ? 1 : 2
65
- }, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [typeof content === "function" ? content({
66
- open: () => modal.open(),
67
- close: () => modal.close(),
68
- loading: (is) => setLoading(is),
69
- isLoading: () => loading
70
- }) : content, jsxs(Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsx(Button, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
71
- setLoading(true);
72
- onCancel && await onCancel();
73
- setLoading(false);
74
- modal.close();
75
- }, children: cancelButtonText || "Close" })), jsx(Button, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
76
- setLoading(true);
77
- onConfirm && await onConfirm();
78
- setLoading(false);
79
- modal.close();
80
- }, children: okButtonText || "OK" }))] })] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {
81
- if (clickOutsideToClose && !loading) {
82
- setLoading(true);
83
- onCancel && await onCancel();
84
- setLoading(false);
85
- modal.close();
86
- }
87
- } }));
88
- return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
89
- };
90
-
91
- export { useAlert as default };
92
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\nimport Button, { ButtonProps } from \"../Button\";\nimport useModal, { UseModalProps } from \"../useModal\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport React from \"react\";\nexport type UseAlertContentProps = {\n open: () => void;\n close: () => void;\n loading: (is: boolean) => void;\n isLoading: () => boolean;\n}\n\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\n\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n content: string | UseAlertContent,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: UseTransitionVariantTypes;\n blurMode?: UseModalProps['blurMode'];\n slotProps?: {\n modal?: UseModalProps;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst useAlert = (props: UseAlerProps) => {\n const [loading, setLoading] = React.useState(false)\n let {\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n const modal = useModal(<Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {typeof content === \"function\" ? content({\n open: () => modal.open(),\n close: () => modal.close(),\n loading: (is: boolean) => setLoading(is),\n isLoading: () => loading\n }) : content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n setLoading(true)\n onCancel && await onCancel()\n setLoading(false)\n modal.close()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n setLoading(true)\n onConfirm && await onConfirm()\n setLoading(false)\n modal.close()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>, {\n ...slotProps?.modal,\n size: sizes[size] || size,\n blur: 40,\n blurMode: blurMode || \"transparent\",\n transition: transition || \"zoom\",\n onClickOutside: async () => {\n if (clickOutsideToClose && !loading) {\n setLoading(true)\n onCancel && await onCancel()\n setLoading(false)\n modal.close()\n }\n }\n })\n\n return {\n ...modal,\n loading: (is: boolean) => setLoading(is),\n isLoading: () => loading\n }\n}\n\nexport default useAlert"],"names":[],"mappings":";;;;;;;;;AAuCA;AACI;AACA;;;;;;;;;;AAgCI;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;AASJ;AAGQ;AACA;;AAEH;AAOG;AACA;;AAEA;;;AAkBQ;;;AAGJ;;AAUI;;;;AAaR;;AAEI;;;;AAIR;;AAQR;;"}
@@ -1,38 +0,0 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var jsxRuntime = require('react/jsx-runtime');
5
- var core = require('@xanui/core');
6
- var React = require('react');
7
- var index = require('../Layer/index.cjs');
8
-
9
- const useLayer = (children, props) => {
10
- var _a;
11
- const [open, setOpen] = React.useState(false);
12
- const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
13
- const portal = core.usePortal(jsxRuntime.jsx(index, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
14
- portal.unmount();
15
- if (props === null || props === void 0 ? void 0 : props.onClosed) {
16
- props.onClosed();
17
- }
18
- }, onClickOutside: () => {
19
- if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
20
- props.onClickOutside();
21
- }
22
- else {
23
- setOpen(false);
24
- }
25
- }, children: typeof children === "function" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children })), portalProps);
26
- return {
27
- open: () => {
28
- portal.mount();
29
- setOpen(true);
30
- },
31
- close: () => {
32
- setOpen(false);
33
- },
34
- };
35
- };
36
-
37
- module.exports = useLayer;
38
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { usePortal } from \"@xanui/core\"\nimport { useState } from \"react\"\nimport Layer, { LayerProps } from \"../Layer\"\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\n\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\n slotProps?: LayerProps[\"slotProps\"] & {\n portal?: UsePortalOptions\n }\n}\n\nexport type UseLayerReturn = {\n open: () => void;\n close: () => void;\n}\n\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\n\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\n const [open, setOpen] = useState(false)\n const portalProps = props?.slotProps?.portal || {}\n const portal = usePortal(<Layer\n blur={20}\n {...props}\n open={open}\n onClosed={() => {\n portal.unmount()\n if (props?.onClosed) {\n props.onClosed()\n }\n }}\n onClickOutside={() => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n setOpen(false)\n }\n }}\n >\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\n </Layer>, portalProps)\n\n return {\n open: () => {\n portal.mount()\n setOpen(true)\n },\n close: () => {\n setOpen(false)\n },\n }\n}\n\nexport default useLayer"],"names":[],"mappings":";;;;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
@@ -1,10 +0,0 @@
1
- import { LayerProps } from '../Layer/index.js';
2
- import { UsePortalOptions } from '@xanui/core/hooks/usePortal';
3
-
4
- type UseLayerProps = Omit<LayerProps, "open" | "children" | "slotProps"> & {
5
- slotProps?: LayerProps["slotProps"] & {
6
- portal?: UsePortalOptions;
7
- };
8
- };
9
-
10
- export type { UseLayerProps };
package/useLayer/index.js DELETED
@@ -1,36 +0,0 @@
1
- "use client";
2
- import { jsx } from 'react/jsx-runtime';
3
- import { usePortal } from '@xanui/core';
4
- import { useState } from 'react';
5
- import Layer from '../Layer/index.js';
6
-
7
- const useLayer = (children, props) => {
8
- var _a;
9
- const [open, setOpen] = useState(false);
10
- const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
11
- const portal = usePortal(jsx(Layer, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
12
- portal.unmount();
13
- if (props === null || props === void 0 ? void 0 : props.onClosed) {
14
- props.onClosed();
15
- }
16
- }, onClickOutside: () => {
17
- if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
18
- props.onClickOutside();
19
- }
20
- else {
21
- setOpen(false);
22
- }
23
- }, children: typeof children === "function" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children })), portalProps);
24
- return {
25
- open: () => {
26
- portal.mount();
27
- setOpen(true);
28
- },
29
- close: () => {
30
- setOpen(false);
31
- },
32
- };
33
- };
34
-
35
- export { useLayer as default };
36
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { usePortal } from \"@xanui/core\"\nimport { useState } from \"react\"\nimport Layer, { LayerProps } from \"../Layer\"\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\n\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\n slotProps?: LayerProps[\"slotProps\"] & {\n portal?: UsePortalOptions\n }\n}\n\nexport type UseLayerReturn = {\n open: () => void;\n close: () => void;\n}\n\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\n\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\n const [open, setOpen] = useState(false)\n const portalProps = props?.slotProps?.portal || {}\n const portal = usePortal(<Layer\n blur={20}\n {...props}\n open={open}\n onClosed={() => {\n portal.unmount()\n if (props?.onClosed) {\n props.onClosed()\n }\n }}\n onClickOutside={() => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n setOpen(false)\n }\n }}\n >\n {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\n </Layer>, portalProps)\n\n return {\n open: () => {\n portal.mount()\n setOpen(true)\n },\n close: () => {\n setOpen(false)\n },\n }\n}\n\nexport default useLayer"],"names":[],"mappings":";;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
@@ -1,37 +0,0 @@
1
- "use client";
2
- 'use strict';
3
-
4
- var tslib = require('tslib');
5
- var jsxRuntime = require('react/jsx-runtime');
6
- var index = require('../useLayer/index.cjs');
7
- var core = require('@xanui/core');
8
-
9
- const useModal = (children, props) => {
10
- var _a, _b;
11
- let sizes = {
12
- xs: 420,
13
- sm: 760,
14
- md: 990,
15
- lg: 1120,
16
- xl: 1300,
17
- full: "100%"
18
- };
19
- let _c = props || {}, { size, slotProps } = _c, useLayerProps = tslib.__rest(_c, ["size", "slotProps"]);
20
- size = size !== null && size !== void 0 ? size : "xs";
21
- slotProps = slotProps || {};
22
- const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
23
- const layer = index(() => {
24
- return (jsxRuntime.jsx(core.Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: typeof children === "function" ? children({ open: layer.open, close: layer.close }) : children })));
25
- }, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
26
- if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
27
- props.onClickOutside();
28
- }
29
- else {
30
- layer.close();
31
- }
32
- }, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }) }));
33
- return layer;
34
- };
35
-
36
- module.exports = useModal;
37
- //# sourceMappingURL=index.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.cjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n slotProps?: {\n layer?: UseLayerProps['slotProps'];\n root?: Omit<TagProps<'div'>, \"children\">\n }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n open: () => void;\n close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n let sizes: any = {\n xs: 420,\n sm: 760,\n md: 990,\n lg: 1120,\n xl: 1300,\n full: \"100%\"\n }\n let { size, slotProps, ...useLayerProps } = props || {}\n size = size ?? \"xs\"\n slotProps = slotProps || {} as any\n const root: any = slotProps?.root || {}\n\n const layer = useLayer(() => {\n return (\n <Tag\n {...root}\n sxr={{\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n radius: 2,\n bgcolor: \"background.primary\",\n shadow: 15,\n ...root?.sx\n }}\n baseClass='modal'\n >\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n </Tag>\n )\n }, {\n ...useLayerProps,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n layer.close()\n }\n },\n slotProps: {\n ...slotProps?.layer,\n clickOutside: {\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n ...slotProps?.layer?.clickOutside,\n },\n root: {\n display: \"flex\",\n alignItems: 'center',\n justifyContent: \"center\",\n ...slotProps?.layer?.root,\n }\n }\n })\n\n return layer\n}\n\nexport default useModal;"],"names":[],"mappings":";;;;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
@@ -1,12 +0,0 @@
1
- import { UseLayerProps } from '../useLayer/index.js';
2
- import { TagProps } from '@xanui/core';
3
-
4
- type UseModalProps = Omit<UseLayerProps, "slotProps"> & {
5
- size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | number;
6
- slotProps?: {
7
- layer?: UseLayerProps['slotProps'];
8
- root?: Omit<TagProps<'div'>, "children">;
9
- };
10
- };
11
-
12
- export type { UseModalProps };
package/useModal/index.js DELETED
@@ -1,35 +0,0 @@
1
- "use client";
2
- import { __rest } from 'tslib';
3
- import { jsx } from 'react/jsx-runtime';
4
- import useLayer from '../useLayer/index.js';
5
- import { Tag } from '@xanui/core';
6
-
7
- const useModal = (children, props) => {
8
- var _a, _b;
9
- let sizes = {
10
- xs: 420,
11
- sm: 760,
12
- md: 990,
13
- lg: 1120,
14
- xl: 1300,
15
- full: "100%"
16
- };
17
- let _c = props || {}, { size, slotProps } = _c, useLayerProps = __rest(_c, ["size", "slotProps"]);
18
- size = size !== null && size !== void 0 ? size : "xs";
19
- slotProps = slotProps || {};
20
- const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
21
- const layer = useLayer(() => {
22
- return (jsx(Tag, Object.assign({}, root, { sxr: Object.assign({ maxWidth: sizes[size] || size, width: "100%", radius: 2, bgcolor: "background.primary", shadow: 15 }, root === null || root === void 0 ? void 0 : root.sx), baseClass: 'modal', children: typeof children === "function" ? children({ open: layer.open, close: layer.close }) : children })));
23
- }, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
24
- if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
25
- props.onClickOutside();
26
- }
27
- else {
28
- layer.close();
29
- }
30
- }, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }) }));
31
- return layer;
32
- };
33
-
34
- export { useModal as default };
35
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n slotProps?: {\n layer?: UseLayerProps['slotProps'];\n root?: Omit<TagProps<'div'>, \"children\">\n }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n open: () => void;\n close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n let sizes: any = {\n xs: 420,\n sm: 760,\n md: 990,\n lg: 1120,\n xl: 1300,\n full: \"100%\"\n }\n let { size, slotProps, ...useLayerProps } = props || {}\n size = size ?? \"xs\"\n slotProps = slotProps || {} as any\n const root: any = slotProps?.root || {}\n\n const layer = useLayer(() => {\n return (\n <Tag\n {...root}\n sxr={{\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n radius: 2,\n bgcolor: \"background.primary\",\n shadow: 15,\n ...root?.sx\n }}\n baseClass='modal'\n >\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n </Tag>\n )\n }, {\n ...useLayerProps,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n layer.close()\n }\n },\n slotProps: {\n ...slotProps?.layer,\n clickOutside: {\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n ...slotProps?.layer?.clickOutside,\n },\n root: {\n display: \"flex\",\n alignItems: 'center',\n justifyContent: \"center\",\n ...slotProps?.layer?.root,\n }\n }\n })\n\n return layer\n}\n\nexport default useModal;"],"names":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}