@saas-ui/react 3.0.0-next.16 → 3.0.0-next.18

package/dist/components/toaster/toaster.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Portal } from '@chakra-ui/react/portal';
+import { Stack } from '@chakra-ui/react/stack';
+import { Toaster as ChakraToaster, Toast, createToaster, } from '@chakra-ui/react/toast';
+import { CloseButton } from "../close-button/index.js";
+import { Spinner } from "../spinner/index.js";
+const defaultOptions = {
+    placement: 'bottom-end',
+    pauseOnPageIdle: true,
+};
+export let toast = createToaster(defaultOptions);
+export const Toaster = (props) => {
+    const { closable: defaultClosable = true, ...options } = props || {};
+    const toaster = useMemo(() => {
+        toast = createToaster({
+            ...defaultOptions,
+            ...options,
+        });
+        return toast;
+    }, [options]);
+    return (_jsx(Portal, { children: _jsx(ChakraToaster, { toaster: toaster, insetInline: { mdDown: '4' }, children: (toast) => {
+                const closable = toast.meta?.closable === false
+                    ? false
+                    : defaultClosable && toast.type !== 'loading';
+                return (_jsxs(ToastRoot, { children: [toast.type === 'loading' ? (_jsx(Spinner, { size: "sm", color: "colorPalette.solid", mt: "0.5" })) : (_jsx(Toast.Indicator, {})), _jsxs(Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [toast.title && _jsx(Toast.Title, { children: toast.title }), toast.description && (_jsx(Toast.Description, { children: toast.description })), toast.action && (_jsx(Toast.ActionTrigger, { children: toast.action.label }))] }), closable !== false && (_jsx(Toast.CloseTrigger, { asChild: true, children: _jsx(CloseButton, { size: "xs" }) }))] }));
+            } }) }));
+};
+/**
+ * Since the height of the toast is dynamic, we need to set the height
+ * in the CSS variable `--toast-height` so css transitions can be applied.
+ */
+function ToastRoot(props) {
+    const [rect, setRect] = useState();
+    const rectCallbackRef = useCallback((el) => {
+        setRect(el?.getBoundingClientRect());
+    }, []);
+    return (_jsx(Toast.Root, { ref: rectCallbackRef, width: { md: 'sm' }, css: {
+            '--toast-height': `${rect?.height}px`,
+        }, children: props.children }));
+}

package/dist/components/toggle/index.d.ts

@@ -1 +1 @@
-export { Toggle_alias_1 as Toggle } from '../../_tsup-dts-rollup.js';
+export { Toggle } from '@chakra-ui/react/toggle';

package/dist/components/toggle/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Toggle
-} from "../../chunk-PEVIP5UT.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Toggle
-};
+export { Toggle } from '@chakra-ui/react/toggle';

package/dist/components/toggle-tip/index.d.ts

@@ -1,2 +1 @@
-export { ToggleTip_alias_1 as ToggleTip } from '../../_tsup-dts-rollup.js';
-export { ToggleTipProps_alias_1 as ToggleTipProps } from '../../_tsup-dts-rollup.js';
+export { ToggleTip, type ToggleTipProps } from './toggle-tip.tsx';

package/dist/components/toggle-tip/index.js

@@ -1,15 +1 @@
-'use client'
-import {
-  ToggleTip
-} from "../../chunk-QITSWCWX.js";
-import "../../chunk-FVUEAELO.js";
-import "../../chunk-UZUMIWPJ.js";
-import "../../chunk-JMYI6YXR.js";
-import "../../chunk-U2CWQDXE.js";
-import "../../chunk-OJZPPAT6.js";
-import "../../chunk-5HVAMQYO.js";
-import "../../chunk-XRQQE2AC.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  ToggleTip
-};
+export { ToggleTip } from "./toggle-tip.js";

package/dist/components/toggle-tip/toggle-tip.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Popover } from '../popover/index.ts';
+export interface ToggleTipProps extends Popover.RootProps {
+    /**
+     * Whether to show the arrow.
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Whether to portall the content.
+     * @default true
+     */
+    portalled?: boolean;
+    /**
+     * The ref to the portal.
+     */
+    portalRef?: React.RefObject<HTMLElement>;
+    /**
+     * The content to display in the tooltip.
+     */
+    content?: React.ReactNode;
+    /**
+     * The trigger element.
+     */
+    children: React.ReactNode;
+}
+export declare const ToggleTip: React.ForwardRefExoticComponent<ToggleTipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/toggle-tip/toggle-tip.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Popover } from "../popover/index.js";
+import { Portal } from "../portal/index.js";
+export const ToggleTip = React.forwardRef(function ToggleTip(props, ref) {
+    const { showArrow, children, portalled = true, content, portalRef, ...rest } = props;
+    return (_jsxs(Popover.Root, { ...rest, positioning: { ...rest.positioning, gutter: 4 }, children: [_jsx(Popover.Trigger, { asChild: true, children: children }), _jsx(Portal, { disabled: !portalled, container: portalRef, children: _jsxs(Popover.Content, { width: "auto", px: "2", py: "1", textStyle: "xs", rounded: "sm", ref: ref, children: [showArrow && _jsx(Popover.Arrow, {}), content] }) })] }));
+});

package/dist/components/tooltip/index.d.ts

@@ -1,2 +1 @@
-export { TooltipProps_alias_1 as TooltipProps } from '../../_tsup-dts-rollup.js';
-export { Tooltip_alias_1 as Tooltip } from '../../_tsup-dts-rollup.js';
+export * from './tooltip.tsx';

package/dist/components/tooltip/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Tooltip
-} from "../../chunk-7MCVXFWM.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Tooltip
-};
+export * from "./tooltip.js";

package/dist/components/tooltip/tooltip.d.ts

@@ -0,0 +1,10 @@
+import { Tooltip as ChakraTooltip } from '@chakra-ui/react/tooltip';
+export interface TooltipProps extends ChakraTooltip.RootProps {
+    showArrow?: boolean;
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+    content: React.ReactNode;
+    contentProps?: ChakraTooltip.ContentProps;
+    disabled?: boolean;
+}
+export declare const Tooltip: import("react").ForwardRefExoticComponent<TooltipProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/tooltip/tooltip.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Portal } from '@chakra-ui/react/portal';
+import { Tooltip as ChakraTooltip } from '@chakra-ui/react/tooltip';
+export const Tooltip = forwardRef(function Tooltip(props, ref) {
+    const { showArrow, children, disabled, portalled, content, contentProps, portalRef, ...rest } = props;
+    if (disabled)
+        return children;
+    return (_jsxs(ChakraTooltip.Root, { ...rest, children: [_jsx(ChakraTooltip.Trigger, { asChild: true, children: children }), _jsx(Portal, { disabled: !portalled, container: portalRef, children: _jsx(ChakraTooltip.Positioner, { children: _jsxs(ChakraTooltip.Content, { ref: ref, ...contentProps, children: [showArrow && (_jsx(ChakraTooltip.Arrow, { children: _jsx(ChakraTooltip.ArrowTip, {}) })), content] }) }) })] }));
+});

package/dist/components/tooltip/tooltip.recipe.d.ts

@@ -0,0 +1,10 @@
+export declare const tooltipSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "trigger" | "arrow" | "arrowTip", {
+    variant: {
+        inverted: {
+            content: {
+                '--tooltip-bg': "colors.bg.inverted";
+                color: "fg.inverted";
+            };
+        };
+    };
+}>;

package/dist/components/tooltip/tooltip.recipe.js

@@ -0,0 +1,52 @@
+import { tooltipAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const tooltipSlotRecipe = defineSlotRecipe({
+    slots: tooltipAnatomy.keys(),
+    className: 'chakra-tooltip',
+    base: {
+        content: {
+            '--tooltip-bg': 'colors.bg',
+            display: 'flex',
+            alignItems: 'center',
+            bg: 'var(--tooltip-bg)',
+            color: 'fg',
+            px: '2.5',
+            py: '1',
+            borderRadius: 'l2',
+            fontWeight: 'medium',
+            textStyle: 'xs',
+            boxShadow: 'md',
+            maxW: 'xs',
+            zIndex: 'tooltip',
+            transformOrigin: 'var(--transform-origin)',
+            _open: {
+                animationStyle: 'scale-fade-in',
+                animationDuration: 'fast',
+            },
+            _closed: {
+                animationStyle: 'scale-fade-out',
+                animationDuration: 'fast',
+            },
+        },
+        arrow: {
+            '--arrow-size': 'sizes.2',
+            '--arrow-background': 'var(--tooltip-bg)',
+            zIndex: '-1',
+        },
+        arrowTip: {
+            borderTopWidth: '1px',
+            borderInlineStartWidth: '1px',
+            borderColor: 'var(--tooltip-bg)',
+        },
+    },
+    variants: {
+        variant: {
+            inverted: {
+                content: {
+                    '--tooltip-bg': 'colors.bg.inverted',
+                    color: 'fg.inverted',
+                },
+            },
+        },
+    },
+});

package/dist/components/typography/index.d.ts

@@ -1,8 +1 @@
-export { Em_alias_1 as Em } from '../../_tsup-dts-rollup.js';
-export { EmProps_alias_1 as EmProps } from '../../_tsup-dts-rollup.js';
-export { Heading_alias_2 as Heading } from '../../_tsup-dts-rollup.js';
-export { HeadingProps_alias_2 as HeadingProps } from '../../_tsup-dts-rollup.js';
-export { Strong_alias_1 as Strong } from '../../_tsup-dts-rollup.js';
-export { StrongProps_alias_1 as StrongProps } from '../../_tsup-dts-rollup.js';
-export { Text_alias_1 as Text } from '../../_tsup-dts-rollup.js';
-export { TextProps_alias_1 as TextProps } from '../../_tsup-dts-rollup.js';
+export { Em, type EmProps, Heading, type HeadingProps, Strong, type StrongProps, Text, type TextProps, } from '@chakra-ui/react/typography';

package/dist/components/typography/index.js

@@ -1,14 +1 @@
-'use client'
-import {
-  Em,
-  Heading,
-  Strong,
-  Text
-} from "../../chunk-J5UCKCIO.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Em,
-  Heading,
-  Strong,
-  Text
-};
+export { Em, Heading, Strong, Text, } from '@chakra-ui/react/typography';

package/dist/components/visually-hidden/index.d.ts

@@ -1 +1 @@
-export { VisuallyHidden_alias_1 as VisuallyHidden } from '../../_tsup-dts-rollup.js';
+export { VisuallyHidden } from '@chakra-ui/react/visually-hidden';

package/dist/components/visually-hidden/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  VisuallyHidden
-} from "../../chunk-HHTTORZ6.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  VisuallyHidden
-};
+export { VisuallyHidden } from '@chakra-ui/react/visually-hidden';

package/dist/components/wrap/index.d.ts

@@ -1,2 +1 @@
-export { Wrap_alias_1 as Wrap } from '../../_tsup-dts-rollup.js';
-export { WrapProps_alias_1 as WrapProps } from '../../_tsup-dts-rollup.js';
+export { Wrap, type WrapProps } from '@chakra-ui/react/wrap';

package/dist/components/wrap/index.js

@@ -1,8 +1 @@
-'use client'
-import {
-  Wrap
-} from "../../chunk-LGLJ2QUW.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Wrap
-};
+export { Wrap } from '@chakra-ui/react/wrap';