@xanui/ui 1.1.50 → 1.1.51

package/readme.md

@@ -1,104 +1,104 @@
-# Xanui Library
-
-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.
-
-## Highlights
-
-- **Unified prop surface** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
-- **Production-ready defaults** – the color palette, typography scale, shadows, and radii mirror modern SaaS expectations yet remain overridable.
-- **Server compatible** – SSR-safe patterns ensure components render on the server and hydrate cleanly on the client.
-- **Documentation first** – each component ships with a dedicated Markdown guide in `docs/`, ready for consumption by the upcoming Next.js documentation site.
-- **Hooks & utilities** – helpers such as `useClickOutside` mirror the component APIs so lower-level integrations feel consistent.
-
-## Installation
-
-```bash
-npm install @xanui/ui
-
-```
-
-Required peer packages (`react`, `react-dom`, `@xanui/core`, `@xanui/icons`) should already exist in your project; otherwise, install them alongside Xanui.
-
-## Quick Start
-
-```tsx
-import ThemeProvider from '@xanui/ui/ThemeProvider';
-import Box from '@xanui/ui/Box';
-import Button from '@xanui/ui/Button';
-
-export default function App() {
-  return (
-    <ThemeProvider theme="light">
-      <Box p={3} gap={2} display="flex" flexDirection="column">
-        <h1>Welcome</h1>
-        <Button color="brand" onClick={() => alert('Hello from Xanui!')}>
-          Get Started
-        </Button>
-      </Box>
-    </ThemeProvider>
-  );
-}
-```
-
-### Theming and Tokens
-
-`ThemeProvider` injects the active token set from `@xanui/core`. At the component level you can:
-
-- Provide responsive props (`{ xs: 'column', md: 'row' }`) via `useBreakpointProps`.
-- Override styles with `sx`/`sxr` objects or custom CSS classes via `baseClass`.
-- Extend color templates by registering new palettes in the core theme manager.
-
-## Documentation & Examples
-
-- **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/`).
-- **Playground** – `example/` contains runnable demos that mirror the documentation examples.
-
-Once the Next.js docs site scaffolding is complete, run it with:
-
-```bash
-cd documentation
-npm install
-npm run dev
-```
-
-## Component Index
-
-| Category               | Components                                                                                                                                                      | Docs                                                                                                                                                                                                                                                    |
-| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| 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`                                                                                |
-| 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`                                                                                                                                                     |
-| 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`                                                                       |
-| 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` |
-| 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`                                                                                    |
-| 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`                                                                                                                      |
-
-> The full list is available in `docs/`. Each entry adheres to the shared documentation template for easy navigation and consistency.
-
-## Local Development
-
-```bash
-npm install
-npm run start   # runs makepack dev server plus the example playground
-npm run build   # bundles the library via makepack
-```
-
-The development workflow encourages updating `docs/` alongside the corresponding component so examples stay truthful. The `example/` playground hot-reloads component changes for rapid iteration.
-
-## Contributing
-
-1. Fork this repository and clone your fork.
-2. Install dependencies via `npm install`.
-3. Implement your change (component, hook, docs, or tooling) inside `src/` and update/author `docs/<Component>.md` accordingly.
-4. Run `npm run start` to validate the example playground and lint output.
-5. Open a pull request with a clear description, screenshots when UI changes occur, and reference to relevant documentation updates.
-
-Guidelines:
-
-- Keep new components aligned with the `TagProps` surface (spacing, layout, color tokens, responsive props).
-- Provide at least one example in `example/` when adding new UI patterns.
-- Maintain the established documentation structure (overview, basic example, props table, scenario demos).
-
-## License
-
-Distributed under the MIT License. Refer to `LICENSE` for full text.
-
+# Xanui Library
+
+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.
+
+## Highlights
+
+- **Unified prop surface** – every component extends the `Tag` API, so spacing, layout, breakpoints, and system tokens behave identically across the library.
+- **Production-ready defaults** – the color palette, typography scale, shadows, and radii mirror modern SaaS expectations yet remain overridable.
+- **Server compatible** – SSR-safe patterns ensure components render on the server and hydrate cleanly on the client.
+- **Documentation first** – each component ships with a dedicated Markdown guide in `docs/`, ready for consumption by the upcoming Next.js documentation site.
+- **Hooks & utilities** – helpers such as `useClickOutside` mirror the component APIs so lower-level integrations feel consistent.
+
+## Installation
+
+```bash
+npm install @xanui/ui
+
+```
+
+Required peer packages (`react`, `react-dom`, `@xanui/core`, `@xanui/icons`) should already exist in your project; otherwise, install them alongside Xanui.
+
+## Quick Start
+
+```tsx
+import ThemeProvider from '@xanui/ui/ThemeProvider';
+import Box from '@xanui/ui/Box';
+import Button from '@xanui/ui/Button';
+
+export default function App() {
+  return (
+    <ThemeProvider theme="light">
+      <Box p={3} gap={2} display="flex" flexDirection="column">
+        <h1>Welcome</h1>
+        <Button color="brand" onClick={() => alert('Hello from Xanui!')}>
+          Get Started
+        </Button>
+      </Box>
+    </ThemeProvider>
+  );
+}
+```
+
+### Theming and Tokens
+
+`ThemeProvider` injects the active token set from `@xanui/core`. At the component level you can:
+
+- Provide responsive props (`{ xs: 'column', md: 'row' }`) via `useBreakpointProps`.
+- Override styles with `sx`/`sxr` objects or custom CSS classes via `baseClass`.
+- Extend color templates by registering new palettes in the core theme manager.
+
+## Documentation & Examples
+
+- **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/`).
+- **Playground** – `example/` contains runnable demos that mirror the documentation examples.
+
+Once the Next.js docs site scaffolding is complete, run it with:
+
+```bash
+cd documentation
+npm install
+npm run dev
+```
+
+## Component Index
+
+| Category               | Components                                                                                                                                                      | Docs                                                                                                                                                                                                                                                    |
+| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 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`                                                                                |
+| 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`                                                                                                                                                     |
+| 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`                                                                       |
+| 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` |
+| 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`                                                                                    |
+| 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`                                                                                                                      |
+
+> The full list is available in `docs/`. Each entry adheres to the shared documentation template for easy navigation and consistency.
+
+## Local Development
+
+```bash
+npm install
+npm run start   # runs makepack dev server plus the example playground
+npm run build   # bundles the library via makepack
+```
+
+The development workflow encourages updating `docs/` alongside the corresponding component so examples stay truthful. The `example/` playground hot-reloads component changes for rapid iteration.
+
+## Contributing
+
+1. Fork this repository and clone your fork.
+2. Install dependencies via `npm install`.
+3. Implement your change (component, hook, docs, or tooling) inside `src/` and update/author `docs/<Component>.md` accordingly.
+4. Run `npm run start` to validate the example playground and lint output.
+5. Open a pull request with a clear description, screenshots when UI changes occur, and reference to relevant documentation updates.
+
+Guidelines:
+
+- Keep new components aligned with the `TagProps` surface (spacing, layout, color tokens, responsive props).
+- Provide at least one example in `example/` when adding new UI patterns.
+- Maintain the established documentation structure (overview, basic example, props table, scenario demos).
+
+## License
+
+Distributed under the MIT License. Refer to `LICENSE` for full text.
+

package/useAlert/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n    open: () => void;\r\n    close: () => void;\r\n    loading: (is: boolean) => void;\r\n    isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n    content: string | UseAlertContent,\r\n    size?: \"small\" | \"medium\" | \"large\" | number;\r\n    closeButton?: boolean;\r\n    clickOutsideToClose?: boolean;\r\n    okButtonText?: string;\r\n    cancelButtonText?: string;\r\n    hideOkButton?: boolean;\r\n    hideCancelButton?: boolean;\r\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n    variant?: \"text\" | \"fill\"\r\n    onConfirm?: () => Promise<void> | void;\r\n    onCancel?: () => Promise<void> | void;\r\n    transition?: UseTransitionVariantTypes;\r\n    blurMode?: UseModalProps['blurMode'];\r\n    slotProps?: {\r\n        modal?: UseModalProps;\r\n        okButton?: Omit<ButtonProps, \"children\">;\r\n        closeButton?: Omit<ButtonProps, \"children\">;\r\n    }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n    const [loading, setLoading] = React.useState(false)\r\n    let {\r\n        content,\r\n        size,\r\n        color,\r\n        direction,\r\n        variant,\r\n        closeButton,\r\n        clickOutsideToClose,\r\n        okButtonText,\r\n        cancelButtonText,\r\n        hideOkButton,\r\n        hideCancelButton,\r\n        buttonPlacement,\r\n        onConfirm,\r\n        onCancel,\r\n        transition,\r\n        blurMode,\r\n        slotProps,\r\n        ...rest\r\n    } = props\r\n\r\n    hideOkButton ??= false\r\n    hideCancelButton ??= false\r\n\r\n    size ??= \"small\"\r\n    color ??= 'default'\r\n    variant ??= \"text\"\r\n    direction ??= \"column\"\r\n    buttonPlacement ??= \"end\"\r\n    let sx: any = {};\r\n\r\n    switch (buttonPlacement) {\r\n        case \"start\":\r\n            sx.justifyContent = 'flex-start'\r\n            break;\r\n        case \"end\":\r\n            sx.justifyContent = 'flex-end'\r\n            break;\r\n        case \"between\":\r\n            sx.justifyContent = 'space-between'\r\n            break;\r\n        case \"full\":\r\n            sx = {\r\n                \"& button\": {\r\n                    flex: 1\r\n                }\r\n            }\r\n            break;\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 320,\r\n        medium: 400,\r\n        large: 600\r\n    }\r\n\r\n    let okcolor = color\r\n    let closecolor = color\r\n    if (color === 'default') {\r\n        okcolor = 'brand'\r\n        closecolor = 'default'\r\n        variant = 'text'\r\n    } else {\r\n        if (variant === 'fill') {\r\n            okcolor = 'default'\r\n            closecolor = 'default'\r\n        } else {\r\n            okcolor = color\r\n            closecolor = 'default'\r\n        }\r\n    }\r\n\r\n    const modal = useModal(<Alert\r\n        direction={direction}\r\n        sx={{\r\n            px: 2,\r\n            py: 1,\r\n            pt: direction === 'row' ? 1 : 2\r\n        }}\r\n        color={color}\r\n        variant={variant}\r\n        onClose={closeButton ? close : undefined}\r\n        {...rest}\r\n    >\r\n        {typeof content === \"function\" ? content({\r\n            open: () => modal.open(),\r\n            close: () => modal.close(),\r\n            loading: (is: boolean) => setLoading(is),\r\n            isLoading: () => loading\r\n        }) : content}\r\n        <Tag\r\n            sxr={{\r\n                display: \"flex\",\r\n                gap: 1,\r\n                pt: 4,\r\n                flexDirection: \"row\",\r\n                ...sx,\r\n            }}\r\n        >\r\n            {!hideCancelButton && <Button\r\n                disabled={loading}\r\n                color={closecolor}\r\n                variant=\"fill\"\r\n                {...slotProps?.closeButton}\r\n                onClick={async () => {\r\n                    setLoading(true)\r\n                    onCancel && await onCancel()\r\n                    setLoading(false)\r\n                    modal.close()\r\n                }}\r\n            >{cancelButtonText || \"Close\"}</Button>}\r\n            <Button\r\n                loading={loading}\r\n                color={okcolor}\r\n                variant=\"fill\"\r\n                {...slotProps?.okButton}\r\n\r\n                onClick={async () => {\r\n                    setLoading(true)\r\n                    onConfirm && await onConfirm()\r\n                    setLoading(false)\r\n                    modal.close()\r\n                }}\r\n            >{okButtonText || \"OK\"}</Button>\r\n        </Tag>\r\n    </Alert>, {\r\n        ...slotProps?.modal,\r\n        size: sizes[size] || size,\r\n        blur: 40,\r\n        blurMode: blurMode || \"transparent\",\r\n        transition: transition || \"zoom\",\r\n        onClickOutside: async () => {\r\n            if (clickOutsideToClose && !loading) {\r\n                setLoading(true)\r\n                onCancel && await onCancel()\r\n                setLoading(false)\r\n                modal.close()\r\n            }\r\n        }\r\n    })\r\n\r\n    return {\r\n        ...modal,\r\n        loading: (is: boolean) => setLoading(is),\r\n        isLoading: () => loading\r\n    }\r\n}\r\n\r\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;;"}
+{"version":3,"file":"index.cjs","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;;"}

package/useAlert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useAlert/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Tag, UseTransitionVariantTypes } from \"@xanui/core\"\r\nimport Button, { ButtonProps } from \"../Button\";\r\nimport useModal, { UseModalProps } from \"../useModal\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport React from \"react\";\r\nexport type UseAlertContentProps = {\r\n    open: () => void;\r\n    close: () => void;\r\n    loading: (is: boolean) => void;\r\n    isLoading: () => boolean;\r\n}\r\n\r\nexport type UseAlertContent = React.ReactElement | ((props: UseAlertContentProps) => React.ReactElement)\r\n\r\nexport type UseAlerProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\r\n    content: string | UseAlertContent,\r\n    size?: \"small\" | \"medium\" | \"large\" | number;\r\n    closeButton?: boolean;\r\n    clickOutsideToClose?: boolean;\r\n    okButtonText?: string;\r\n    cancelButtonText?: string;\r\n    hideOkButton?: boolean;\r\n    hideCancelButton?: boolean;\r\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\r\n    variant?: \"text\" | \"fill\"\r\n    onConfirm?: () => Promise<void> | void;\r\n    onCancel?: () => Promise<void> | void;\r\n    transition?: UseTransitionVariantTypes;\r\n    blurMode?: UseModalProps['blurMode'];\r\n    slotProps?: {\r\n        modal?: UseModalProps;\r\n        okButton?: Omit<ButtonProps, \"children\">;\r\n        closeButton?: Omit<ButtonProps, \"children\">;\r\n    }\r\n}\r\n\r\n\r\nconst useAlert = (props: UseAlerProps) => {\r\n    const [loading, setLoading] = React.useState(false)\r\n    let {\r\n        content,\r\n        size,\r\n        color,\r\n        direction,\r\n        variant,\r\n        closeButton,\r\n        clickOutsideToClose,\r\n        okButtonText,\r\n        cancelButtonText,\r\n        hideOkButton,\r\n        hideCancelButton,\r\n        buttonPlacement,\r\n        onConfirm,\r\n        onCancel,\r\n        transition,\r\n        blurMode,\r\n        slotProps,\r\n        ...rest\r\n    } = props\r\n\r\n    hideOkButton ??= false\r\n    hideCancelButton ??= false\r\n\r\n    size ??= \"small\"\r\n    color ??= 'default'\r\n    variant ??= \"text\"\r\n    direction ??= \"column\"\r\n    buttonPlacement ??= \"end\"\r\n    let sx: any = {};\r\n\r\n    switch (buttonPlacement) {\r\n        case \"start\":\r\n            sx.justifyContent = 'flex-start'\r\n            break;\r\n        case \"end\":\r\n            sx.justifyContent = 'flex-end'\r\n            break;\r\n        case \"between\":\r\n            sx.justifyContent = 'space-between'\r\n            break;\r\n        case \"full\":\r\n            sx = {\r\n                \"& button\": {\r\n                    flex: 1\r\n                }\r\n            }\r\n            break;\r\n    }\r\n\r\n    let sizes: any = {\r\n        small: 320,\r\n        medium: 400,\r\n        large: 600\r\n    }\r\n\r\n    let okcolor = color\r\n    let closecolor = color\r\n    if (color === 'default') {\r\n        okcolor = 'brand'\r\n        closecolor = 'default'\r\n        variant = 'text'\r\n    } else {\r\n        if (variant === 'fill') {\r\n            okcolor = 'default'\r\n            closecolor = 'default'\r\n        } else {\r\n            okcolor = color\r\n            closecolor = 'default'\r\n        }\r\n    }\r\n\r\n    const modal = useModal(<Alert\r\n        direction={direction}\r\n        sx={{\r\n            px: 2,\r\n            py: 1,\r\n            pt: direction === 'row' ? 1 : 2\r\n        }}\r\n        color={color}\r\n        variant={variant}\r\n        onClose={closeButton ? close : undefined}\r\n        {...rest}\r\n    >\r\n        {typeof content === \"function\" ? content({\r\n            open: () => modal.open(),\r\n            close: () => modal.close(),\r\n            loading: (is: boolean) => setLoading(is),\r\n            isLoading: () => loading\r\n        }) : content}\r\n        <Tag\r\n            sxr={{\r\n                display: \"flex\",\r\n                gap: 1,\r\n                pt: 4,\r\n                flexDirection: \"row\",\r\n                ...sx,\r\n            }}\r\n        >\r\n            {!hideCancelButton && <Button\r\n                disabled={loading}\r\n                color={closecolor}\r\n                variant=\"fill\"\r\n                {...slotProps?.closeButton}\r\n                onClick={async () => {\r\n                    setLoading(true)\r\n                    onCancel && await onCancel()\r\n                    setLoading(false)\r\n                    modal.close()\r\n                }}\r\n            >{cancelButtonText || \"Close\"}</Button>}\r\n            <Button\r\n                loading={loading}\r\n                color={okcolor}\r\n                variant=\"fill\"\r\n                {...slotProps?.okButton}\r\n\r\n                onClick={async () => {\r\n                    setLoading(true)\r\n                    onConfirm && await onConfirm()\r\n                    setLoading(false)\r\n                    modal.close()\r\n                }}\r\n            >{okButtonText || \"OK\"}</Button>\r\n        </Tag>\r\n    </Alert>, {\r\n        ...slotProps?.modal,\r\n        size: sizes[size] || size,\r\n        blur: 40,\r\n        blurMode: blurMode || \"transparent\",\r\n        transition: transition || \"zoom\",\r\n        onClickOutside: async () => {\r\n            if (clickOutsideToClose && !loading) {\r\n                setLoading(true)\r\n                onCancel && await onCancel()\r\n                setLoading(false)\r\n                modal.close()\r\n            }\r\n        }\r\n    })\r\n\r\n    return {\r\n        ...modal,\r\n        loading: (is: boolean) => setLoading(is),\r\n        isLoading: () => loading\r\n    }\r\n}\r\n\r\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;;"}
+{"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;;"}

package/useBlurCss/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n   return useMemo(() => {\r\n      let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n      if (typeof window === 'undefined' || mode === 'transparent') {\r\n         return transparent\r\n      }\r\n      const d = _d || (_d = window.document.createElement(\"div\").style)\r\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n   }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":["useMemo","alpha"],"mappings":";;;;;AAGA,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;;;;"}
+{"version":3,"file":"index.cjs","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":";;;;;AAGA,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.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useBlurCss/index.tsx"],"sourcesContent":["import { useMemo } from \"react\"\r\nimport { alpha } from \"@xanui/core\";\r\n\r\nlet _d: CSSStyleDeclaration;\r\n\r\nconst useBlurCss = (blur: number, mode?: \"transparent\" | \"blur\") => {\r\n   return useMemo(() => {\r\n      let transparent = { bgcolor: alpha(\"#000000\", blur / 100) }\r\n      if (typeof window === 'undefined' || mode === 'transparent') {\r\n         return transparent\r\n      }\r\n      const d = _d || (_d = window.document.createElement(\"div\").style)\r\n      return d['backdropFilter'] !== undefined ? { backdropFilter: `blur(${(blur / 100) * 10}px)` } : transparent\r\n   }, [blur])\r\n}\r\n\r\n\r\nexport default useBlurCss"],"names":[],"mappings":";;;AAGA,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;;;;"}
+{"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":[],"mappings":";;;AAGA,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;;;;"}

package/useCorner/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n    switch (type) {\r\n        case 'square':\r\n            return {\r\n                radius: 0\r\n            }\r\n        case 'rounded':\r\n            return {\r\n                radius: 1\r\n            }\r\n        case 'circle':\r\n            return {\r\n                radius: 100\r\n            }\r\n    }\r\n    return {}\r\n}\r\n\r\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;;;;"}
+{"version":3,"file":"index.cjs","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;;;;"}

package/useCorner/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useCorner/index.ts"],"sourcesContent":["\r\nexport type UseCornerTypes = \"square\" | \"rounded\" | \"circle\"\r\nconst useCorner = (type?: UseCornerTypes): object => {\r\n    switch (type) {\r\n        case 'square':\r\n            return {\r\n                radius: 0\r\n            }\r\n        case 'rounded':\r\n            return {\r\n                radius: 1\r\n            }\r\n        case 'circle':\r\n            return {\r\n                radius: 100\r\n            }\r\n    }\r\n    return {}\r\n}\r\n\r\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;;;;"}
+{"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":"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;;;;"}

package/useLayer/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n   slotProps?: LayerProps[\"slotProps\"] & {\r\n      portal?: UsePortalOptions\r\n   }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n   const [open, setOpen] = useState(false)\r\n   const portalProps = props?.slotProps?.portal || {}\r\n   const portal = usePortal(<Layer\r\n      blur={20}\r\n      {...props}\r\n      open={open}\r\n      onClosed={() => {\r\n         portal.unmount()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }}\r\n      onClickOutside={() => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            setOpen(false)\r\n         }\r\n      }}\r\n   >\r\n      {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n   </Layer>, portalProps)\r\n\r\n   return {\r\n      open: () => {\r\n         portal.mount()\r\n         setOpen(true)\r\n      },\r\n      close: () => {\r\n         setOpen(false)\r\n      },\r\n   }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
+{"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;;"}

package/useLayer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useLayer/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { usePortal } from \"@xanui/core\"\r\nimport { useState } from \"react\"\r\nimport Layer, { LayerProps } from \"../Layer\"\r\nimport { UsePortalOptions } from \"@xanui/core/hooks/usePortal\"\r\n\r\nexport type UseLayerProps = Omit<LayerProps, \"open\" | \"children\" | \"slotProps\"> & {\r\n   slotProps?: LayerProps[\"slotProps\"] & {\r\n      portal?: UsePortalOptions\r\n   }\r\n}\r\n\r\nexport type UseLayerReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nexport type UseLayerChildren = React.ReactElement | ((props: UseLayerReturn) => React.ReactElement)\r\n\r\nconst useLayer = (children: UseLayerChildren, props?: UseLayerProps): UseLayerReturn => {\r\n   const [open, setOpen] = useState(false)\r\n   const portalProps = props?.slotProps?.portal || {}\r\n   const portal = usePortal(<Layer\r\n      blur={20}\r\n      {...props}\r\n      open={open}\r\n      onClosed={() => {\r\n         portal.unmount()\r\n         if (props?.onClosed) {\r\n            props.onClosed()\r\n         }\r\n      }}\r\n      onClickOutside={() => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            setOpen(false)\r\n         }\r\n      }}\r\n   >\r\n      {typeof children === \"function\" ? children({ open: () => setOpen(true), close: () => setOpen(false) }) : children}\r\n   </Layer>, portalProps)\r\n\r\n   return {\r\n      open: () => {\r\n         portal.mount()\r\n         setOpen(true)\r\n      },\r\n      close: () => {\r\n         setOpen(false)\r\n      },\r\n   }\r\n}\r\n\r\nexport default useLayer"],"names":[],"mappings":";;;;;;AAoBA;;;AAEG;;;;;;AAUG;;;;;;;AAOA;;;;;;;;;;AAcN;;"}
+{"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;;"}

package/useModal/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n   slotProps?: {\r\n      layer?: UseLayerProps['slotProps'];\r\n      root?: Omit<TagProps<'div'>, \"children\">\r\n   }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n   let sizes: any = {\r\n      xs: 420,\r\n      sm: 760,\r\n      md: 990,\r\n      lg: 1120,\r\n      xl: 1300,\r\n      full: \"100%\"\r\n   }\r\n   let { size, slotProps, ...useLayerProps } = props || {}\r\n   size = size ?? \"xs\"\r\n   slotProps = slotProps || {} as any\r\n   const root: any = slotProps?.root || {}\r\n\r\n   const layer = useLayer(() => {\r\n      return (\r\n         <Tag\r\n            {...root}\r\n            sxr={{\r\n               maxWidth: sizes[size as any] || size,\r\n               width: \"100%\",\r\n               radius: 2,\r\n               bgcolor: \"background.primary\",\r\n               shadow: 15,\r\n               ...root?.sx\r\n            }}\r\n            baseClass='modal'\r\n         >\r\n            {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n         </Tag>\r\n      )\r\n   }, {\r\n      ...useLayerProps,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            layer.close()\r\n         }\r\n      },\r\n      slotProps: {\r\n         ...slotProps?.layer,\r\n         clickOutside: {\r\n            maxWidth: sizes[size as any] || size,\r\n            width: \"100%\",\r\n            ...slotProps?.layer?.clickOutside,\r\n         },\r\n         root: {\r\n            display: \"flex\",\r\n            alignItems: 'center',\r\n            justifyContent: \"center\",\r\n            ...slotProps?.layer?.root,\r\n         }\r\n      }\r\n   })\r\n\r\n   return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
+{"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;;"}

package/useModal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport useLayer, { UseLayerProps } from \"../useLayer\";\r\nimport { Tag, TagProps } from '@xanui/core'\r\n\r\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\r\n   size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\r\n   slotProps?: {\r\n      layer?: UseLayerProps['slotProps'];\r\n      root?: Omit<TagProps<'div'>, \"children\">\r\n   }\r\n}\r\n\r\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\r\n\r\nexport type UseModalReturn = {\r\n   open: () => void;\r\n   close: () => void;\r\n}\r\n\r\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\r\n\r\n   let sizes: any = {\r\n      xs: 420,\r\n      sm: 760,\r\n      md: 990,\r\n      lg: 1120,\r\n      xl: 1300,\r\n      full: \"100%\"\r\n   }\r\n   let { size, slotProps, ...useLayerProps } = props || {}\r\n   size = size ?? \"xs\"\r\n   slotProps = slotProps || {} as any\r\n   const root: any = slotProps?.root || {}\r\n\r\n   const layer = useLayer(() => {\r\n      return (\r\n         <Tag\r\n            {...root}\r\n            sxr={{\r\n               maxWidth: sizes[size as any] || size,\r\n               width: \"100%\",\r\n               radius: 2,\r\n               bgcolor: \"background.primary\",\r\n               shadow: 15,\r\n               ...root?.sx\r\n            }}\r\n            baseClass='modal'\r\n         >\r\n            {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\r\n         </Tag>\r\n      )\r\n   }, {\r\n      ...useLayerProps,\r\n      onClickOutside: () => {\r\n         if (props?.onClickOutside) {\r\n            props.onClickOutside()\r\n         } else {\r\n            layer.close()\r\n         }\r\n      },\r\n      slotProps: {\r\n         ...slotProps?.layer,\r\n         clickOutside: {\r\n            maxWidth: sizes[size as any] || size,\r\n            width: \"100%\",\r\n            ...slotProps?.layer?.clickOutside,\r\n         },\r\n         root: {\r\n            display: \"flex\",\r\n            alignItems: 'center',\r\n            justifyContent: \"center\",\r\n            ...slotProps?.layer?.root,\r\n         }\r\n      }\r\n   })\r\n\r\n   return layer\r\n}\r\n\r\nexport default useModal;"],"names":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
+{"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;;"}