@xanui/ui 1.1.10 → 1.1.12
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.cjs → index.js} +3 -17
- package/Accordion/index.js.map +1 -0
- package/Accordion/index.mjs +2 -14
- package/Accordion/index.mjs.map +1 -1
- package/Alert/{index.cjs → index.js} +5 -23
- package/Alert/index.js.map +1 -0
- package/Alert/index.mjs +2 -18
- package/Alert/index.mjs.map +1 -1
- package/Avatar/{index.cjs → index.js} +2 -13
- package/Avatar/index.js.map +1 -0
- package/Avatar/index.mjs +2 -11
- package/Avatar/index.mjs.map +1 -1
- package/Badge/{index.cjs → index.js} +2 -12
- package/Badge/index.js.map +1 -0
- package/Badge/index.mjs +2 -10
- package/Badge/index.mjs.map +1 -1
- package/Box/index.js +4 -0
- package/Box/index.js.map +1 -0
- package/Box/index.mjs +2 -10
- package/Box/index.mjs.map +1 -1
- package/Button/{index.cjs → index.js} +4 -16
- package/Button/index.js.map +1 -0
- package/Button/index.mjs +2 -12
- package/Button/index.mjs.map +1 -1
- package/ButtonGroup/{index.cjs → index.js} +2 -12
- package/ButtonGroup/index.js.map +1 -0
- package/ButtonGroup/index.mjs +2 -10
- package/ButtonGroup/index.mjs.map +1 -1
- package/Calendar/{index.cjs → index.js} +16 -34
- package/Calendar/index.js.map +1 -0
- package/Calendar/index.mjs +2 -18
- package/Calendar/index.mjs.map +1 -1
- package/CalendarInput/index.js +11 -0
- package/CalendarInput/index.js.map +1 -0
- package/CalendarInput/index.mjs +2 -18
- package/CalendarInput/index.mjs.map +1 -1
- package/Checkbox/{index.cjs → index.js} +2 -15
- package/Checkbox/index.js.map +1 -0
- package/Checkbox/index.mjs +2 -13
- package/Checkbox/index.mjs.map +1 -1
- package/Chip/{index.cjs → index.js} +3 -14
- package/Chip/index.js.map +1 -0
- package/Chip/index.mjs +2 -11
- package/Chip/index.mjs.map +1 -1
- package/CircleProgress/{index.cjs → index.js} +2 -12
- package/CircleProgress/index.js.map +1 -0
- package/CircleProgress/index.mjs +2 -10
- package/CircleProgress/index.mjs.map +1 -1
- package/ClickOutside/{index.cjs → index.js} +2 -12
- package/ClickOutside/index.js.map +1 -0
- package/ClickOutside/index.mjs +2 -10
- package/ClickOutside/index.mjs.map +1 -1
- package/Collaps/{index.cjs → index.js} +2 -12
- package/Collaps/index.js.map +1 -0
- package/Collaps/index.mjs +2 -10
- package/Collaps/index.mjs.map +1 -1
- package/Container/{index.cjs → index.js} +2 -12
- package/Container/index.js.map +1 -0
- package/Container/index.mjs +2 -10
- package/Container/index.mjs.map +1 -1
- package/Datatable/FilterBox.js +19 -0
- package/Datatable/FilterBox.js.map +1 -0
- package/Datatable/FilterBox.mjs +2 -14
- package/Datatable/FilterBox.mjs.map +1 -1
- package/Datatable/{Row.cjs → Row.js} +7 -24
- package/Datatable/Row.js.map +1 -0
- package/Datatable/Row.mjs +2 -17
- package/Datatable/Row.mjs.map +1 -1
- package/Datatable/SelectedBox.js +11 -0
- package/Datatable/SelectedBox.js.map +1 -0
- package/Datatable/SelectedBox.mjs +2 -11
- package/Datatable/SelectedBox.mjs.map +1 -1
- package/Datatable/Table.js +11 -0
- package/Datatable/Table.js.map +1 -0
- package/Datatable/Table.mjs +2 -11
- package/Datatable/Table.mjs.map +1 -1
- package/Datatable/{TableHead.cjs → TableHead.js} +5 -18
- package/Datatable/TableHead.js.map +1 -0
- package/Datatable/TableHead.mjs +2 -13
- package/Datatable/TableHead.mjs.map +1 -1
- package/Datatable/index.js +35 -0
- package/Datatable/index.js.map +1 -0
- package/Datatable/index.mjs +2 -15
- package/Datatable/index.mjs.map +1 -1
- package/Divider/{index.cjs → index.js} +2 -12
- package/Divider/index.js.map +1 -0
- package/Divider/index.mjs +2 -10
- package/Divider/index.mjs.map +1 -1
- package/Drawer/{index.cjs → index.js} +4 -15
- package/Drawer/index.js.map +1 -0
- package/Drawer/index.mjs +2 -11
- package/Drawer/index.mjs.map +1 -1
- package/Form/{index.cjs → index.js} +2 -12
- package/Form/index.js.map +1 -0
- package/Form/index.mjs +2 -10
- package/Form/index.mjs.map +1 -1
- package/GridContainer/{index.cjs → index.js} +2 -12
- package/GridContainer/index.js.map +1 -0
- package/GridContainer/index.mjs +2 -10
- package/GridContainer/index.mjs.map +1 -1
- package/GridItem/{index.cjs → index.js} +2 -12
- package/GridItem/index.js.map +1 -0
- package/GridItem/index.mjs +2 -10
- package/GridItem/index.mjs.map +1 -1
- package/IconButton/{index.cjs → index.js} +3 -14
- package/IconButton/index.js.map +1 -0
- package/IconButton/index.mjs +2 -11
- package/IconButton/index.mjs.map +1 -1
- package/Image/{index.cjs → index.js} +2 -12
- package/Image/index.js.map +1 -0
- package/Image/index.mjs +2 -10
- package/Image/index.mjs.map +1 -1
- package/Input/{index.cjs → index.js} +3 -14
- package/Input/index.js.map +1 -0
- package/Input/index.mjs +3 -12
- package/Input/index.mjs.map +1 -1
- package/Label/{index.cjs → index.js} +2 -12
- package/Label/index.js.map +1 -0
- package/Label/index.mjs +2 -10
- package/Label/index.mjs.map +1 -1
- package/Layer/{index.cjs → index.js} +4 -16
- package/Layer/index.js.map +1 -0
- package/Layer/index.mjs +2 -12
- package/Layer/index.mjs.map +1 -1
- package/LineProgress/{index.cjs → index.js} +2 -12
- package/LineProgress/index.js.map +1 -0
- package/LineProgress/index.mjs +2 -10
- package/LineProgress/index.mjs.map +1 -1
- package/List/{index.cjs → index.js} +2 -12
- package/List/index.js.map +1 -0
- package/List/index.mjs +2 -10
- package/List/index.mjs.map +1 -1
- package/ListItem/{index.cjs → index.js} +3 -14
- package/ListItem/index.js.map +1 -0
- package/ListItem/index.mjs +2 -11
- package/ListItem/index.mjs.map +1 -1
- package/LoadingBox/{index.cjs → index.js} +3 -14
- package/LoadingBox/index.js.map +1 -0
- package/LoadingBox/index.mjs +2 -11
- package/LoadingBox/index.mjs.map +1 -1
- package/Menu/{index.cjs → index.js} +3 -15
- package/Menu/index.js.map +1 -0
- package/Menu/index.mjs +2 -12
- package/Menu/index.mjs.map +1 -1
- package/Modal/{index.cjs → index.js} +3 -14
- package/Modal/index.js.map +1 -0
- package/Modal/index.mjs +2 -11
- package/Modal/index.mjs.map +1 -1
- package/NoSSR/index.js +7 -0
- package/NoSSR/index.js.map +1 -0
- package/NoSSR/index.mjs +2 -7
- package/NoSSR/index.mjs.map +1 -1
- package/Option/index.js +4 -0
- package/Option/index.js.map +1 -0
- package/Option/index.mjs +2 -10
- package/Option/index.mjs.map +1 -1
- package/Paper/{index.cjs → index.js} +2 -12
- package/Paper/index.js.map +1 -0
- package/Paper/index.mjs +2 -10
- package/Paper/index.mjs.map +1 -1
- package/Portal/{index.cjs → index.js} +2 -12
- package/Portal/index.js.map +1 -0
- package/Portal/index.mjs +2 -10
- package/Portal/index.mjs.map +1 -1
- package/Radio/index.js +4 -0
- package/Radio/index.js.map +1 -0
- package/Radio/index.mjs +2 -12
- package/Radio/index.mjs.map +1 -1
- package/Scrollbar/{index.cjs → index.js} +2 -12
- package/Scrollbar/index.js.map +1 -0
- package/Scrollbar/index.mjs +2 -10
- package/Scrollbar/index.mjs.map +1 -1
- package/Select/{index.cjs → index.js} +5 -21
- package/Select/index.js.map +1 -0
- package/Select/index.mjs +2 -16
- package/Select/index.mjs.map +1 -1
- package/Stack/index.js +7 -0
- package/Stack/index.js.map +1 -0
- package/Stack/index.mjs +2 -10
- package/Stack/index.mjs.map +1 -1
- package/Switch/{index.cjs → index.js} +2 -12
- package/Switch/index.js.map +1 -0
- package/Switch/index.mjs +2 -10
- package/Switch/index.mjs.map +1 -1
- package/Tab/index.js +5 -0
- package/Tab/index.js.map +1 -0
- package/Tab/index.mjs +2 -11
- package/Tab/index.mjs.map +1 -1
- package/Table/{index.cjs → index.js} +3 -14
- package/Table/index.js.map +1 -0
- package/Table/index.mjs +2 -11
- package/Table/index.mjs.map +1 -1
- package/TableBody/index.js +4 -0
- package/TableBody/index.js.map +1 -0
- package/TableBody/index.mjs +2 -10
- package/TableBody/index.mjs.map +1 -1
- package/TableCell/{index.cjs → index.js} +2 -12
- package/TableCell/index.js.map +1 -0
- package/TableCell/index.mjs +2 -10
- package/TableCell/index.mjs.map +1 -1
- package/TableFooter/index.js +4 -0
- package/TableFooter/index.js.map +1 -0
- package/TableFooter/index.mjs +2 -10
- package/TableFooter/index.mjs.map +1 -1
- package/TableHead/index.js +4 -0
- package/TableHead/index.js.map +1 -0
- package/TableHead/index.mjs +2 -10
- package/TableHead/index.mjs.map +1 -1
- package/TablePagination/{index.cjs → index.js} +6 -22
- package/TablePagination/index.js.map +1 -0
- package/TablePagination/index.mjs +2 -16
- package/TablePagination/index.mjs.map +1 -1
- package/TableRow/index.js +4 -0
- package/TableRow/index.js.map +1 -0
- package/TableRow/index.mjs +2 -10
- package/TableRow/index.mjs.map +1 -1
- package/Tabs/{index.cjs → index.js} +2 -12
- package/Tabs/index.js.map +1 -0
- package/Tabs/index.mjs +2 -10
- package/Tabs/index.mjs.map +1 -1
- package/Text/{index.cjs → index.js} +2 -12
- package/Text/index.js.map +1 -0
- package/Text/index.mjs +2 -10
- package/Text/index.mjs.map +1 -1
- package/Toast/{index.cjs → index.js} +4 -17
- package/Toast/index.js.map +1 -0
- package/Toast/index.mjs +2 -13
- package/Toast/index.mjs.map +1 -1
- package/Tooltip/{index.cjs → index.js} +3 -13
- package/Tooltip/index.js.map +1 -0
- package/Tooltip/index.mjs +2 -10
- package/Tooltip/index.mjs.map +1 -1
- package/ViewBox/{index.cjs → index.js} +3 -14
- package/ViewBox/index.js.map +1 -0
- package/ViewBox/index.mjs +2 -11
- package/ViewBox/index.mjs.map +1 -1
- package/index.d.ts +55 -55
- package/index.js +1 -0
- package/index.js.map +1 -0
- package/index.mjs +1 -56
- package/index.mjs.map +1 -1
- package/package.json +15 -8
- package/readme.md +104 -104
- package/useAlert/{index.cjs → index.js} +5 -18
- package/useAlert/index.js.map +1 -0
- package/useAlert/index.mjs +2 -13
- package/useAlert/index.mjs.map +1 -1
- package/useBlurCss/{index.cjs → index.js} +2 -10
- package/useBlurCss/index.js.map +1 -0
- package/useBlurCss/index.mjs +2 -8
- package/useBlurCss/index.mjs.map +1 -1
- package/useCorner/{index.cjs → index.js} +2 -7
- package/useCorner/index.js.map +1 -0
- package/useCorner/index.mjs +1 -4
- package/useCorner/index.mjs.map +1 -1
- package/useLayer/{index.cjs → index.js} +3 -13
- package/useLayer/index.js.map +1 -0
- package/useLayer/index.mjs +2 -10
- package/useLayer/index.mjs.map +1 -1
- package/useModal/{index.cjs → index.js} +3 -13
- package/useModal/index.js.map +1 -0
- package/useModal/index.mjs +2 -10
- package/useModal/index.mjs.map +1 -1
- package/Accordion/index.cjs.map +0 -1
- package/Alert/index.cjs.map +0 -1
- package/Avatar/index.cjs.map +0 -1
- package/Badge/index.cjs.map +0 -1
- package/Box/index.cjs +0 -14
- package/Box/index.cjs.map +0 -1
- package/Button/index.cjs.map +0 -1
- package/ButtonGroup/index.cjs.map +0 -1
- package/Calendar/index.cjs.map +0 -1
- package/CalendarInput/index.cjs +0 -29
- package/CalendarInput/index.cjs.map +0 -1
- package/Checkbox/index.cjs.map +0 -1
- package/Chip/index.cjs.map +0 -1
- package/CircleProgress/index.cjs.map +0 -1
- package/ClickOutside/index.cjs.map +0 -1
- package/Collaps/index.cjs.map +0 -1
- package/Container/index.cjs.map +0 -1
- package/Datatable/FilterBox.cjs +0 -33
- package/Datatable/FilterBox.cjs.map +0 -1
- package/Datatable/Row.cjs.map +0 -1
- package/Datatable/SelectedBox.cjs +0 -22
- package/Datatable/SelectedBox.cjs.map +0 -1
- package/Datatable/Table.cjs +0 -22
- package/Datatable/Table.cjs.map +0 -1
- package/Datatable/TableHead.cjs.map +0 -1
- package/Datatable/index.cjs +0 -50
- package/Datatable/index.cjs.map +0 -1
- package/Divider/index.cjs.map +0 -1
- package/Drawer/index.cjs.map +0 -1
- package/Form/index.cjs.map +0 -1
- package/GridContainer/index.cjs.map +0 -1
- package/GridItem/index.cjs.map +0 -1
- package/IconButton/index.cjs.map +0 -1
- package/Image/index.cjs.map +0 -1
- package/Input/index.cjs.map +0 -1
- package/Label/index.cjs.map +0 -1
- package/Layer/index.cjs.map +0 -1
- package/LineProgress/index.cjs.map +0 -1
- package/List/index.cjs.map +0 -1
- package/ListItem/index.cjs.map +0 -1
- package/LoadingBox/index.cjs.map +0 -1
- package/Menu/index.cjs.map +0 -1
- package/Modal/index.cjs.map +0 -1
- package/NoSSR/index.cjs +0 -14
- package/NoSSR/index.cjs.map +0 -1
- package/Option/index.cjs +0 -14
- package/Option/index.cjs.map +0 -1
- package/Paper/index.cjs.map +0 -1
- package/Portal/index.cjs.map +0 -1
- package/Radio/index.cjs +0 -16
- package/Radio/index.cjs.map +0 -1
- package/Scrollbar/index.cjs.map +0 -1
- package/Select/index.cjs.map +0 -1
- package/Stack/index.cjs +0 -17
- package/Stack/index.cjs.map +0 -1
- package/Switch/index.cjs.map +0 -1
- package/Tab/index.cjs +0 -16
- package/Tab/index.cjs.map +0 -1
- package/Table/index.cjs.map +0 -1
- package/TableBody/index.cjs +0 -14
- package/TableBody/index.cjs.map +0 -1
- package/TableCell/index.cjs.map +0 -1
- package/TableFooter/index.cjs +0 -14
- package/TableFooter/index.cjs.map +0 -1
- package/TableHead/index.cjs +0 -14
- package/TableHead/index.cjs.map +0 -1
- package/TablePagination/index.cjs.map +0 -1
- package/TableRow/index.cjs +0 -14
- package/TableRow/index.cjs.map +0 -1
- package/Tabs/index.cjs.map +0 -1
- package/Text/index.cjs.map +0 -1
- package/Toast/index.cjs.map +0 -1
- package/Tooltip/index.cjs.map +0 -1
- package/ViewBox/index.cjs.map +0 -1
- package/index.cjs +0 -116
- package/index.cjs.map +0 -1
- package/useAlert/index.cjs.map +0 -1
- package/useBlurCss/index.cjs.map +0 -1
- package/useCorner/index.cjs.map +0 -1
- package/useLayer/index.cjs.map +0 -1
- package/useModal/index.cjs.map +0 -1
package/package.json
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xanui/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.12",
|
|
4
4
|
"description": "",
|
|
5
|
-
"
|
|
6
|
-
"access": "public"
|
|
7
|
-
},
|
|
5
|
+
"private": false,
|
|
8
6
|
"main": "./index.js",
|
|
9
7
|
"module": "./index.mjs",
|
|
10
8
|
"types": "./index.d.ts",
|
|
@@ -14,6 +12,15 @@
|
|
|
14
12
|
"pretty-class": "^1.0.8",
|
|
15
13
|
"react-state-bucket": "^1.2.6"
|
|
16
14
|
},
|
|
15
|
+
"devDependencies": {
|
|
16
|
+
"@types/react": "^19.1.8",
|
|
17
|
+
"@types/react-dom": "^19.1.6",
|
|
18
|
+
"makepack": "^1.7.15",
|
|
19
|
+
"react": "^19.1.0",
|
|
20
|
+
"react-dom": "^19.1.0",
|
|
21
|
+
"tslib": "^2.8.1",
|
|
22
|
+
"typescript": "^5.9.3"
|
|
23
|
+
},
|
|
17
24
|
"keywords": [],
|
|
18
25
|
"sideEffects": false,
|
|
19
26
|
"exports": {
|
|
@@ -23,9 +30,9 @@
|
|
|
23
30
|
"types": "./index.d.ts"
|
|
24
31
|
},
|
|
25
32
|
"./*": {
|
|
26
|
-
"import": "
|
|
27
|
-
"require": "
|
|
28
|
-
"types": "
|
|
33
|
+
"import": "./*/index.mjs",
|
|
34
|
+
"require": "./*/index.js",
|
|
35
|
+
"types": "./*/index.d.ts"
|
|
29
36
|
}
|
|
30
37
|
}
|
|
31
|
-
}
|
|
38
|
+
}
|
package/readme.md
CHANGED
|
@@ -1,104 +1,104 @@
|
|
|
1
|
-
# XanUI UI Library
|
|
2
|
-
|
|
3
|
-
XanUI is a React design-system toolkit powered by `@xanui/core`. It combines low-level primitives (e.g., `Box`, `Stack`, `Layer`) with application-ready components (e.g., `Accordion`, `Modal`, `Datatable`, `Toast`) so product teams can build polished surfaces quickly while keeping full control over styling tokens.
|
|
4
|
-
|
|
5
|
-
## Highlights
|
|
6
|
-
|
|
7
|
-
- **Unified prop surface** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
|
|
8
|
-
- **Production-ready defaults** – the color palette, typography scale, shadows, and radii mirror modern SaaS expectations yet remain overridable.
|
|
9
|
-
- **Server compatible** – SSR-safe patterns ensure components render on the server and hydrate cleanly on the client.
|
|
10
|
-
- **Documentation first** – each component ships with a dedicated Markdown guide in `docs/`, ready for consumption by the upcoming Next.js documentation site.
|
|
11
|
-
- **Hooks & utilities** – helpers such as `useClickOutside` mirror the component APIs so lower-level integrations feel consistent.
|
|
12
|
-
|
|
13
|
-
## Installation
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
npm install @xanui/ui
|
|
17
|
-
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
Required peer packages (`react`, `react-dom`, `@xanui/core`, `@xanui/icons`) should already exist in your project; otherwise, install them alongside XanUI.
|
|
21
|
-
|
|
22
|
-
## Quick Start
|
|
23
|
-
|
|
24
|
-
```tsx
|
|
25
|
-
import ThemeProvider from '@xanui/ui/ThemeProvider';
|
|
26
|
-
import Box from '@xanui/ui/Box';
|
|
27
|
-
import Button from '@xanui/ui/Button';
|
|
28
|
-
|
|
29
|
-
export default function App() {
|
|
30
|
-
return (
|
|
31
|
-
<ThemeProvider theme="light">
|
|
32
|
-
<Box p={3} gap={2} display="flex" flexDirection="column">
|
|
33
|
-
<h1>Welcome</h1>
|
|
34
|
-
<Button color="brand" onClick={() => alert('Hello from XanUI!')}>
|
|
35
|
-
Get Started
|
|
36
|
-
</Button>
|
|
37
|
-
</Box>
|
|
38
|
-
</ThemeProvider>
|
|
39
|
-
);
|
|
40
|
-
}
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
### Theming and Tokens
|
|
44
|
-
|
|
45
|
-
`ThemeProvider` injects the active token set from `@xanui/core`. At the component level you can:
|
|
46
|
-
|
|
47
|
-
- Provide responsive props (`{ xs: 'column', md: 'row' }`) via `useBreakpointProps`.
|
|
48
|
-
- Override styles with `sx`/`sxr` objects or custom CSS classes via `baseClass`.
|
|
49
|
-
- Extend color templates by registering new palettes in the core theme manager.
|
|
50
|
-
|
|
51
|
-
## Documentation & Examples
|
|
52
|
-
|
|
53
|
-
- **Component guides** – `docs/<Component>.md` follows a consistent structure (overview → basic example → props table → scenario examples). These files serve both as standalone references and as the content source for the forthcoming Next.js docs site (`documentation/`).
|
|
54
|
-
- **Playground** – `example/` contains runnable demos that mirror the documentation examples.
|
|
55
|
-
|
|
56
|
-
Once the Next.js docs site scaffolding is complete, run it with:
|
|
57
|
-
|
|
58
|
-
```bash
|
|
59
|
-
cd documentation
|
|
60
|
-
npm install
|
|
61
|
-
npm run dev
|
|
62
|
-
```
|
|
63
|
-
|
|
64
|
-
## Component Index
|
|
65
|
-
|
|
66
|
-
| Category | Components | Docs |
|
|
67
|
-
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
68
|
-
| Layout & Surfaces | Box, Stack, Container, GridContainer, GridItem, Paper, Layer, ViewBox, Divider | `docs/Box.md`, `docs/Stack.md`, `docs/Container.md`, `docs/GridContainer.md`, `docs/GridItem.md`, `docs/Paper.md`, `docs/Layer.md`, `docs/ViewBox.md`, `docs/Divider.md` |
|
|
69
|
-
| Navigation | Tabs, Tab, List, ListItem, Menu, Drawer | `docs/Tabs.md`, `docs/Tab.md`, `docs/List.md`, `docs/ListItem.md`, `docs/Menu.md`, `docs/Drawer.md` |
|
|
70
|
-
| Data Display | Table (and TableBody/TableCell/TableFooter/TableHead/TablePagination/TableRow), Datatable, Chip, Avatar, Image, Badge, CircleProgress, LineProgress, LoadingBox | `docs/Table*.md`, `docs/Datatable.md`, `docs/Chip.md`, `docs/Avatar.md`, `docs/Image.md`, `docs/Badge.md`, `docs/CircleProgress.md`, `docs/LineProgress.md`, `docs/LoadingBox.md` |
|
|
71
|
-
| Inputs & Forms | Button, ButtonGroup, IconButton, Form, Input, Select, Option, Checkbox, Radio, Switch, Calendar, CalendarInput, Label | `docs/Button.md`, `docs/ButtonGroup.md`, `docs/IconButton.md`, `docs/Form.md`, `docs/Input.md`, `docs/Select.md`, `docs/Option.md`, `docs/Checkbox.md`, `docs/Radio.md`, `docs/Switch.md`, `docs/Calendar.md`, `docs/CalendarInput.md`, `docs/Label.md` |
|
|
72
|
-
| Disclosure & Feedback | Accordion, Collaps, Alert, Toast, Tooltip, Modal, Portal, Scrollbar, Toast, NoSSR | `docs/Accordion.md`, `docs/Collaps.md`, `docs/Alert.md`, `docs/Toast.md`, `docs/Tooltip.md`, `docs/Modal.md`, `docs/Portal.md`, `docs/Scrollbar.md`, `docs/NoSSR.md` |
|
|
73
|
-
| Typography & Utilities | Text, ThemeProvider, ClickOutside, useCorner, useClickOutside, View helpers | `docs/Text.md`, `docs/ThemeProvider.md`, `docs/ClickOutside.md`, `docs/useCorner.md`, `docs/useClickOutside.md`, `docs/ViewBox.md` |
|
|
74
|
-
|
|
75
|
-
> The full list is available in `docs/`. Each entry adheres to the shared documentation template for easy navigation and consistency.
|
|
76
|
-
|
|
77
|
-
## Local Development
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
npm install
|
|
81
|
-
npm run start # runs makepack dev server plus the example playground
|
|
82
|
-
npm run build # bundles the library via makepack
|
|
83
|
-
```
|
|
84
|
-
|
|
85
|
-
The development workflow encourages updating `docs/` alongside the corresponding component so examples stay truthful. The `example/` playground hot-reloads component changes for rapid iteration.
|
|
86
|
-
|
|
87
|
-
## Contributing
|
|
88
|
-
|
|
89
|
-
1. Fork this repository and clone your fork.
|
|
90
|
-
2. Install dependencies via `npm install`.
|
|
91
|
-
3. Implement your change (component, hook, docs, or tooling) inside `src/` and update/author `docs/<Component>.md` accordingly.
|
|
92
|
-
4. Run `npm run start` to validate the example playground and lint output.
|
|
93
|
-
5. Open a pull request with a clear description, screenshots when UI changes occur, and reference to relevant documentation updates.
|
|
94
|
-
|
|
95
|
-
Guidelines:
|
|
96
|
-
|
|
97
|
-
- Keep new components aligned with the `TagProps` surface (spacing, layout, color tokens, responsive props).
|
|
98
|
-
- Provide at least one example in `example/` when adding new UI patterns.
|
|
99
|
-
- Maintain the established documentation structure (overview, basic example, props table, scenario demos).
|
|
100
|
-
|
|
101
|
-
## License
|
|
102
|
-
|
|
103
|
-
Distributed under the MIT License. Refer to `LICENSE` for full text.
|
|
104
|
-
|
|
1
|
+
# XanUI UI Library
|
|
2
|
+
|
|
3
|
+
XanUI is a React design-system toolkit powered by `@xanui/core`. It combines low-level primitives (e.g., `Box`, `Stack`, `Layer`) with application-ready components (e.g., `Accordion`, `Modal`, `Datatable`, `Toast`) so product teams can build polished surfaces quickly while keeping full control over styling tokens.
|
|
4
|
+
|
|
5
|
+
## Highlights
|
|
6
|
+
|
|
7
|
+
- **Unified prop surface** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
|
|
8
|
+
- **Production-ready defaults** – the color palette, typography scale, shadows, and radii mirror modern SaaS expectations yet remain overridable.
|
|
9
|
+
- **Server compatible** – SSR-safe patterns ensure components render on the server and hydrate cleanly on the client.
|
|
10
|
+
- **Documentation first** – each component ships with a dedicated Markdown guide in `docs/`, ready for consumption by the upcoming Next.js documentation site.
|
|
11
|
+
- **Hooks & utilities** – helpers such as `useClickOutside` mirror the component APIs so lower-level integrations feel consistent.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @xanui/ui
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
Required peer packages (`react`, `react-dom`, `@xanui/core`, `@xanui/icons`) should already exist in your project; otherwise, install them alongside XanUI.
|
|
21
|
+
|
|
22
|
+
## Quick Start
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
import ThemeProvider from '@xanui/ui/ThemeProvider';
|
|
26
|
+
import Box from '@xanui/ui/Box';
|
|
27
|
+
import Button from '@xanui/ui/Button';
|
|
28
|
+
|
|
29
|
+
export default function App() {
|
|
30
|
+
return (
|
|
31
|
+
<ThemeProvider theme="light">
|
|
32
|
+
<Box p={3} gap={2} display="flex" flexDirection="column">
|
|
33
|
+
<h1>Welcome</h1>
|
|
34
|
+
<Button color="brand" onClick={() => alert('Hello from XanUI!')}>
|
|
35
|
+
Get Started
|
|
36
|
+
</Button>
|
|
37
|
+
</Box>
|
|
38
|
+
</ThemeProvider>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Theming and Tokens
|
|
44
|
+
|
|
45
|
+
`ThemeProvider` injects the active token set from `@xanui/core`. At the component level you can:
|
|
46
|
+
|
|
47
|
+
- Provide responsive props (`{ xs: 'column', md: 'row' }`) via `useBreakpointProps`.
|
|
48
|
+
- Override styles with `sx`/`sxr` objects or custom CSS classes via `baseClass`.
|
|
49
|
+
- Extend color templates by registering new palettes in the core theme manager.
|
|
50
|
+
|
|
51
|
+
## Documentation & Examples
|
|
52
|
+
|
|
53
|
+
- **Component guides** – `docs/<Component>.md` follows a consistent structure (overview → basic example → props table → scenario examples). These files serve both as standalone references and as the content source for the forthcoming Next.js docs site (`documentation/`).
|
|
54
|
+
- **Playground** – `example/` contains runnable demos that mirror the documentation examples.
|
|
55
|
+
|
|
56
|
+
Once the Next.js docs site scaffolding is complete, run it with:
|
|
57
|
+
|
|
58
|
+
```bash
|
|
59
|
+
cd documentation
|
|
60
|
+
npm install
|
|
61
|
+
npm run dev
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
## Component Index
|
|
65
|
+
|
|
66
|
+
| Category | Components | Docs |
|
|
67
|
+
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
68
|
+
| Layout & Surfaces | Box, Stack, Container, GridContainer, GridItem, Paper, Layer, ViewBox, Divider | `docs/Box.md`, `docs/Stack.md`, `docs/Container.md`, `docs/GridContainer.md`, `docs/GridItem.md`, `docs/Paper.md`, `docs/Layer.md`, `docs/ViewBox.md`, `docs/Divider.md` |
|
|
69
|
+
| Navigation | Tabs, Tab, List, ListItem, Menu, Drawer | `docs/Tabs.md`, `docs/Tab.md`, `docs/List.md`, `docs/ListItem.md`, `docs/Menu.md`, `docs/Drawer.md` |
|
|
70
|
+
| Data Display | Table (and TableBody/TableCell/TableFooter/TableHead/TablePagination/TableRow), Datatable, Chip, Avatar, Image, Badge, CircleProgress, LineProgress, LoadingBox | `docs/Table*.md`, `docs/Datatable.md`, `docs/Chip.md`, `docs/Avatar.md`, `docs/Image.md`, `docs/Badge.md`, `docs/CircleProgress.md`, `docs/LineProgress.md`, `docs/LoadingBox.md` |
|
|
71
|
+
| Inputs & Forms | Button, ButtonGroup, IconButton, Form, Input, Select, Option, Checkbox, Radio, Switch, Calendar, CalendarInput, Label | `docs/Button.md`, `docs/ButtonGroup.md`, `docs/IconButton.md`, `docs/Form.md`, `docs/Input.md`, `docs/Select.md`, `docs/Option.md`, `docs/Checkbox.md`, `docs/Radio.md`, `docs/Switch.md`, `docs/Calendar.md`, `docs/CalendarInput.md`, `docs/Label.md` |
|
|
72
|
+
| Disclosure & Feedback | Accordion, Collaps, Alert, Toast, Tooltip, Modal, Portal, Scrollbar, Toast, NoSSR | `docs/Accordion.md`, `docs/Collaps.md`, `docs/Alert.md`, `docs/Toast.md`, `docs/Tooltip.md`, `docs/Modal.md`, `docs/Portal.md`, `docs/Scrollbar.md`, `docs/NoSSR.md` |
|
|
73
|
+
| Typography & Utilities | Text, ThemeProvider, ClickOutside, useCorner, useClickOutside, View helpers | `docs/Text.md`, `docs/ThemeProvider.md`, `docs/ClickOutside.md`, `docs/useCorner.md`, `docs/useClickOutside.md`, `docs/ViewBox.md` |
|
|
74
|
+
|
|
75
|
+
> The full list is available in `docs/`. Each entry adheres to the shared documentation template for easy navigation and consistency.
|
|
76
|
+
|
|
77
|
+
## Local Development
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm install
|
|
81
|
+
npm run start # runs makepack dev server plus the example playground
|
|
82
|
+
npm run build # bundles the library via makepack
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
The development workflow encourages updating `docs/` alongside the corresponding component so examples stay truthful. The `example/` playground hot-reloads component changes for rapid iteration.
|
|
86
|
+
|
|
87
|
+
## Contributing
|
|
88
|
+
|
|
89
|
+
1. Fork this repository and clone your fork.
|
|
90
|
+
2. Install dependencies via `npm install`.
|
|
91
|
+
3. Implement your change (component, hook, docs, or tooling) inside `src/` and update/author `docs/<Component>.md` accordingly.
|
|
92
|
+
4. Run `npm run start` to validate the example playground and lint output.
|
|
93
|
+
5. Open a pull request with a clear description, screenshots when UI changes occur, and reference to relevant documentation updates.
|
|
94
|
+
|
|
95
|
+
Guidelines:
|
|
96
|
+
|
|
97
|
+
- Keep new components aligned with the `TagProps` surface (spacing, layout, color tokens, responsive props).
|
|
98
|
+
- Provide at least one example in `example/` when adding new UI patterns.
|
|
99
|
+
- Maintain the established documentation structure (overview, basic example, props table, scenario demos).
|
|
100
|
+
|
|
101
|
+
## License
|
|
102
|
+
|
|
103
|
+
Distributed under the MIT License. Refer to `LICENSE` for full text.
|
|
104
|
+
|
|
@@ -1,14 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var core = require('@xanui/core');
|
|
6
|
-
var index$2 = require('../Button/index.cjs');
|
|
7
|
-
var index = require('../useModal/index.cjs');
|
|
8
|
-
var index$1 = require('../Alert/index.cjs');
|
|
9
|
-
var React = require('react');
|
|
10
|
-
|
|
11
|
-
const useAlert = (props) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),index$2=require('../Button/index.js'),index=require('../useModal/index.js'),index$1=require('../Alert/index.js'),React=require('react');const useAlert = (props) => {
|
|
12
2
|
const [loading, setLoading] = React.useState(false);
|
|
13
3
|
let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = tslib.__rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
|
|
14
4
|
hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
|
|
@@ -59,7 +49,7 @@ const useAlert = (props) => {
|
|
|
59
49
|
closecolor = 'default';
|
|
60
50
|
}
|
|
61
51
|
}
|
|
62
|
-
const modal = index(jsxRuntime.jsxs(index$1, Object.assign({ direction: direction, sx: {
|
|
52
|
+
const modal = index.default(jsxRuntime.jsxs(index$1.default, Object.assign({ direction: direction, sx: {
|
|
63
53
|
px: 2,
|
|
64
54
|
py: 1,
|
|
65
55
|
pt: direction === 'row' ? 1 : 2
|
|
@@ -68,12 +58,12 @@ const useAlert = (props) => {
|
|
|
68
58
|
close: () => modal.close(),
|
|
69
59
|
loading: (is) => setLoading(is),
|
|
70
60
|
isLoading: () => loading
|
|
71
|
-
}) : content, jsxRuntime.jsxs(core.Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsxRuntime.jsx(index$2, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
|
|
61
|
+
}) : content, jsxRuntime.jsxs(core.Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsxRuntime.jsx(index$2.default, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
|
|
72
62
|
setLoading(true);
|
|
73
63
|
onCancel && await onCancel();
|
|
74
64
|
setLoading(false);
|
|
75
65
|
modal.close();
|
|
76
|
-
}, children: cancelButtonText || "Close" })), jsxRuntime.jsx(index$2, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
|
|
66
|
+
}, children: cancelButtonText || "Close" })), jsxRuntime.jsx(index$2.default, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
|
|
77
67
|
setLoading(true);
|
|
78
68
|
onConfirm && await onConfirm();
|
|
79
69
|
setLoading(false);
|
|
@@ -87,7 +77,4 @@ const useAlert = (props) => {
|
|
|
87
77
|
}
|
|
88
78
|
} }));
|
|
89
79
|
return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
|
|
90
|
-
};
|
|
91
|
-
|
|
92
|
-
module.exports = useAlert;
|
|
93
|
-
//# sourceMappingURL=index.cjs.map
|
|
80
|
+
};exports.default=useAlert;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\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":["__rest","useModal","_jsxs","Alert","Tag","_jsx","Button"],"mappings":"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"}
|
package/useAlert/index.mjs
CHANGED
|
@@ -1,12 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { Tag } from '@xanui/core';
|
|
4
|
-
import Button from '../Button/index.mjs';
|
|
5
|
-
import useModal from '../useModal/index.mjs';
|
|
6
|
-
import Alert from '../Alert/index.mjs';
|
|
7
|
-
import React from 'react';
|
|
8
|
-
|
|
9
|
-
const useAlert = (props) => {
|
|
1
|
+
import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import {Tag}from'@xanui/core';import Button from'../Button/index.mjs';import useModal from'../useModal/index.mjs';import Alert from'../Alert/index.mjs';import React from'react';const useAlert = (props) => {
|
|
10
2
|
const [loading, setLoading] = React.useState(false);
|
|
11
3
|
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"]);
|
|
12
4
|
hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
|
|
@@ -85,7 +77,4 @@ const useAlert = (props) => {
|
|
|
85
77
|
}
|
|
86
78
|
} }));
|
|
87
79
|
return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
|
|
88
|
-
};
|
|
89
|
-
|
|
90
|
-
export { useAlert as default };
|
|
91
|
-
//# sourceMappingURL=index.mjs.map
|
|
80
|
+
};export{useAlert as default};//# sourceMappingURL=index.mjs.map
|
package/useAlert/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\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":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
var core = require('@xanui/core');
|
|
5
|
-
|
|
6
|
-
let _d;
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var React=require('react'),core=require('@xanui/core');let _d;
|
|
7
2
|
const useBlurCss = (blur, mode) => {
|
|
8
3
|
return React.useMemo(() => {
|
|
9
4
|
let transparent = { bgcolor: core.alpha("#000000", blur / 100) };
|
|
@@ -13,7 +8,4 @@ const useBlurCss = (blur, mode) => {
|
|
|
13
8
|
const d = _d || (_d = window.document.createElement("div").style);
|
|
14
9
|
return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
|
|
15
10
|
}, [blur]);
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
module.exports = useBlurCss;
|
|
19
|
-
//# sourceMappingURL=index.cjs.map
|
|
11
|
+
};exports.default=useBlurCss;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport default useBlurCss"],"names":["useMemo","alpha"],"mappings":"6HAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAOA,aAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAEC,UAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb"}
|
package/useBlurCss/index.mjs
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { alpha } from '@xanui/core';
|
|
3
|
-
|
|
4
|
-
let _d;
|
|
1
|
+
import {useMemo}from'react';import {alpha}from'@xanui/core';let _d;
|
|
5
2
|
const useBlurCss = (blur, mode) => {
|
|
6
3
|
return useMemo(() => {
|
|
7
4
|
let transparent = { bgcolor: alpha("#000000", blur / 100) };
|
|
@@ -11,7 +8,4 @@ const useBlurCss = (blur, mode) => {
|
|
|
11
8
|
const d = _d || (_d = window.document.createElement("div").style);
|
|
12
9
|
return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent;
|
|
13
10
|
}, [blur]);
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export { useBlurCss as default };
|
|
17
|
-
//# sourceMappingURL=index.mjs.map
|
|
11
|
+
};export{useBlurCss as default};//# sourceMappingURL=index.mjs.map
|
package/useBlurCss/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\nimport { alpha } from \"@xanui/core\";\n\nlet _d: CSSStyleDeclaration;\n\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\n return useMemo(() => {\n let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\n if (typeof window === 'undefined' || mode === 'transparent') {\n return transparent\n }\n const d = _d || (_d = window.document.createElement(\"div\").style)\n return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\n }, [blur])\n}\n\n\nexport default useBlurCss"],"names":[],"mappings":"4DAGA,IAAI,EAAuB;AAE3B,MAAM,UAAU,GAAG,CAAC,IAAY,EAAE,IAA6B,KAAI;IAChE,OAAO,OAAO,CAAC,MAAK;AACjB,QAAA,IAAI,WAAW,GAAG,EAAE,OAAO,EAAE,KAAK,CAAC,SAAS,EAAE,IAAI,GAAG,GAAG,CAAC,EAAE;QAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,IAAI,IAAI,KAAK,aAAa,EAAE;AAC1D,YAAA,OAAO,WAAW;QACrB;AACA,QAAA,MAAM,CAAC,GAAG,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QACjE,OAAO,CAAC,CAAC,gBAAgB,CAAC,KAAK,SAAS,GAAG,EAAE,cAAc,EAAE,CAAA,KAAA,EAAQ,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAA,GAAA,CAAK,EAAE,GAAG,WAAW;AAC9G,IAAA,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC;AACb"}
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
const useCorner = (type) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});const useCorner = (type) => {
|
|
4
2
|
switch (type) {
|
|
5
3
|
case 'square':
|
|
6
4
|
return {
|
|
@@ -16,7 +14,4 @@ const useCorner = (type) => {
|
|
|
16
14
|
};
|
|
17
15
|
}
|
|
18
16
|
return {};
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
module.exports = useCorner;
|
|
22
|
-
//# sourceMappingURL=index.cjs.map
|
|
17
|
+
};exports.default=useCorner;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n switch (type) {\n case 'square':\n return {\n radius: 0\n }\n case 'rounded':\n return {\n radius: 1\n }\n case 'circle':\n return {\n radius: 100\n }\n }\n return {}\n}\n\nexport default useCorner"],"names":[],"mappings":"sEAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb"}
|
package/useCorner/index.mjs
CHANGED
package/useCorner/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\nconst useCorner = (type?: UseCornerTypes): object => {\n switch (type) {\n case 'square':\n return {\n radius: 0\n }\n case 'rounded':\n return {\n radius: 1\n }\n case 'circle':\n return {\n radius: 100\n }\n }\n return {}\n}\n\nexport default useCorner"],"names":[],"mappings":"AAEA,MAAM,SAAS,GAAG,CAAC,IAAqB,KAAY;IAChD,QAAQ,IAAI;AACR,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,SAAS;YACV,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;AACL,QAAA,KAAK,QAAQ;YACT,OAAO;AACH,gBAAA,MAAM,EAAE;aACX;;AAET,IAAA,OAAO,EAAE;AACb"}
|
|
@@ -1,15 +1,8 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var core = require('@xanui/core');
|
|
5
|
-
var React = require('react');
|
|
6
|
-
var index = require('../Layer/index.cjs');
|
|
7
|
-
|
|
8
|
-
const useLayer = (children, props) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var jsxRuntime=require('react/jsx-runtime'),core=require('@xanui/core'),React=require('react'),index=require('../Layer/index.js');const useLayer = (children, props) => {
|
|
9
2
|
var _a;
|
|
10
3
|
const [open, setOpen] = React.useState(false);
|
|
11
4
|
const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
|
|
12
|
-
const portal = core.usePortal(jsxRuntime.jsx(index, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
|
|
5
|
+
const portal = core.usePortal(jsxRuntime.jsx(index.default, Object.assign({ blur: 20 }, props, { open: open, onClosed: () => {
|
|
13
6
|
portal.unmount();
|
|
14
7
|
if (props === null || props === void 0 ? void 0 : props.onClosed) {
|
|
15
8
|
props.onClosed();
|
|
@@ -31,7 +24,4 @@ const useLayer = (children, props) => {
|
|
|
31
24
|
setOpen(false);
|
|
32
25
|
},
|
|
33
26
|
};
|
|
34
|
-
};
|
|
35
|
-
|
|
36
|
-
module.exports = useLayer;
|
|
37
|
-
//# sourceMappingURL=index.cjs.map
|
|
27
|
+
};exports.default=useLayer;//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["import { 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":["useState","usePortal","_jsx","Layer"],"mappings":"wMAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAoB;;IACpF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,EAAE;IAClD,MAAM,MAAM,GAAGC,cAAS,CAACC,eAACC,aAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAC5B,IAAI,EAAE,EAAE,IACJ,KAAK,EAAA,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAK;YACZ,MAAM,CAAC,OAAO,EAAE;YAChB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,OAAO,CAAC,KAAK,CAAC;YACjB;AACH,QAAA,CAAC,YAEA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,QAAQ,IAC5G,EAAE,WAAW,CAAC;IAEtB,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,IAAI,CAAC;QAChB,CAAC;QACD,KAAK,EAAE,MAAK;YACT,OAAO,CAAC,KAAK,CAAC;QACjB,CAAC;KACH;AACJ"}
|
package/useLayer/index.mjs
CHANGED
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { usePortal } from '@xanui/core';
|
|
3
|
-
import { useState } from 'react';
|
|
4
|
-
import Layer from '../Layer/index.mjs';
|
|
5
|
-
|
|
6
|
-
const useLayer = (children, props) => {
|
|
1
|
+
import {jsx}from'react/jsx-runtime';import {usePortal}from'@xanui/core';import {useState}from'react';import Layer from'../Layer/index.mjs';const useLayer = (children, props) => {
|
|
7
2
|
var _a;
|
|
8
3
|
const [open, setOpen] = useState(false);
|
|
9
4
|
const portalProps = ((_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.portal) || {};
|
|
@@ -29,7 +24,4 @@ const useLayer = (children, props) => {
|
|
|
29
24
|
setOpen(false);
|
|
30
25
|
},
|
|
31
26
|
};
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export { useLayer as default };
|
|
35
|
-
//# sourceMappingURL=index.mjs.map
|
|
27
|
+
};export{useLayer as default};//# sourceMappingURL=index.mjs.map
|
package/useLayer/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["import { usePortal } from \"@xanui/core\"\
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["import { 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":["_jsx"],"mappings":"2IAkBA,MAAM,QAAQ,GAAG,CAAC,QAA0B,EAAE,KAAqB,KAAoB;;IACpF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,WAAW,GAAG,CAAA,CAAA,EAAA,GAAA,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,MAAM,KAAI,EAAE;IAClD,MAAM,MAAM,GAAG,SAAS,CAACA,IAAC,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EAC5B,IAAI,EAAE,EAAE,IACJ,KAAK,EAAA,EACT,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,MAAK;YACZ,MAAM,CAAC,OAAO,EAAE;YAChB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,QAAQ,EAAE;gBAClB,KAAK,CAAC,QAAQ,EAAE;YACnB;AACH,QAAA,CAAC,EACD,cAAc,EAAE,MAAK;YAClB,IAAI,KAAK,aAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,cAAc,EAAE;gBACxB,KAAK,CAAC,cAAc,EAAE;YACzB;iBAAO;gBACJ,OAAO,CAAC,KAAK,CAAC;YACjB;AACH,QAAA,CAAC,YAEA,OAAO,QAAQ,KAAK,UAAU,GAAG,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,QAAQ,IAC5G,EAAE,WAAW,CAAC;IAEtB,OAAO;QACJ,IAAI,EAAE,MAAK;YACR,MAAM,CAAC,KAAK,EAAE;YACd,OAAO,CAAC,IAAI,CAAC;QAChB,CAAC;QACD,KAAK,EAAE,MAAK;YACT,OAAO,CAAC,KAAK,CAAC;QACjB,CAAC;KACH;AACJ"}
|
|
@@ -1,11 +1,4 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var tslib = require('tslib');
|
|
4
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var index = require('../useLayer/index.cjs');
|
|
6
|
-
var core = require('@xanui/core');
|
|
7
|
-
|
|
8
|
-
const useModal = (children, props) => {
|
|
1
|
+
'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),index=require('../useLayer/index.js'),core=require('@xanui/core');const useModal = (children, props) => {
|
|
9
2
|
var _a;
|
|
10
3
|
let sizes = {
|
|
11
4
|
xs: 420,
|
|
@@ -19,7 +12,7 @@ const useModal = (children, props) => {
|
|
|
19
12
|
size = size !== null && size !== void 0 ? size : "xs";
|
|
20
13
|
slotProps = slotProps || {};
|
|
21
14
|
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
22
|
-
const layer = index(() => {
|
|
15
|
+
const layer = index.default(() => {
|
|
23
16
|
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 })));
|
|
24
17
|
}, Object.assign(Object.assign({}, useLayerProps), { onClickOutside: () => {
|
|
25
18
|
if (props === null || props === void 0 ? void 0 : props.onClickOutside) {
|
|
@@ -30,7 +23,4 @@ const useModal = (children, props) => {
|
|
|
30
23
|
}
|
|
31
24
|
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.root) }) }));
|
|
32
25
|
return layer;
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
module.exports = useModal;
|
|
36
|
-
//# sourceMappingURL=index.cjs.map
|
|
26
|
+
};exports.default=useModal;//# sourceMappingURL=index.js.map
|