@saas-ui/react 3.0.0-next.2 → 3.0.0-next.21

package/dist/components/textarea/textarea.recipe.js

@@ -0,0 +1,90 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const textareaRecipe = defineRecipe({
+    className: 'chakra-textarea',
+    base: {
+        width: '100%',
+        minWidth: '0',
+        outline: '0',
+        position: 'relative',
+        appearance: 'none',
+        textAlign: 'start',
+        _disabled: {
+            layerStyle: 'disabled',
+        },
+        '--focus-color': 'colors.colorPalette.focusRing',
+        '--error-color': 'colors.border.error',
+        _invalid: {
+            focusRingColor: 'var(--error-color)',
+            borderColor: 'var(--error-color)',
+        },
+    },
+    variants: {
+        size: {
+            xs: {
+                borderRadius: 'control.sm',
+                textStyle: 'xs',
+                px: '2',
+                py: '1',
+                scrollPaddingBottom: '1',
+            },
+            sm: {
+                borderRadius: 'control.md',
+                textStyle: 'sm',
+                px: '2.5',
+                py: '1.5',
+                scrollPaddingBottom: '1.5',
+            },
+            md: {
+                borderRadius: 'control.md',
+                textStyle: 'sm',
+                px: '3',
+                py: '1.5',
+                scrollPaddingBottom: '1.5',
+            },
+            lg: {
+                borderRadius: 'control.lg',
+                textStyle: 'md',
+                px: '4',
+                py: '2',
+                scrollPaddingBottom: '2',
+            },
+            xl: {
+                borderRadius: 'control.lg',
+                textStyle: 'md',
+                px: '4.5',
+                py: '3.5',
+                scrollPaddingBottom: '3.5',
+            },
+        },
+        variant: {
+            outline: {
+                bg: 'transparent',
+                borderWidth: '1px',
+                borderColor: 'border',
+                focusVisibleRing: 'inside',
+                focusRingWidth: 0,
+            },
+            subtle: {
+                borderWidth: '1px',
+                borderColor: 'transparent',
+                bg: 'bg.muted',
+                focusVisibleRing: 'inside',
+            },
+            flushed: {
+                bg: 'transparent',
+                borderBottomWidth: '1px',
+                borderBottomColor: 'border',
+                borderRadius: '0',
+                px: '0',
+                _focusVisible: {
+                    borderColor: 'var(--focus-color)',
+                    boxShadow: '0px 1px 0px 0px var(--focus-color)',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});

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

@@ -0,0 +1,62 @@
+export declare const timelineSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "indicator" | "root" | "item" | "separator" | "title" | "connector", {
+    variant: {
+        subtle: {
+            indicator: {
+                bg: "bg.muted";
+            };
+        };
+        solid: {
+            indicator: {
+                bg: "bg.inverted";
+                color: "fg.inverted";
+            };
+        };
+        outline: {
+            indicator: {
+                bg: "bg";
+                borderWidth: "2px";
+            };
+        };
+        plain: {};
+    };
+    size: {
+        sm: {
+            root: {
+                '--timeline-indicator-size': "sizes.4";
+                '--timeline-font-size': "fontSizes.2xs";
+            };
+            title: {
+                textStyle: "xs";
+            };
+        };
+        md: {
+            root: {
+                '--timeline-indicator-size': "sizes.5";
+                '--timeline-font-size': "fontSizes.xs";
+            };
+            title: {
+                textStyle: "sm";
+            };
+        };
+        lg: {
+            root: {
+                '--timeline-indicator-size': "sizes.6";
+                '--timeline-font-size': "fontSizes.xs";
+            };
+            title: {
+                mt: "0.5";
+                textStyle: "sm";
+            };
+        };
+        xl: {
+            root: {
+                '--timeline-indicator-size': "sizes.8";
+                '--timeline-font-size': "fontSizes.sm";
+            };
+            title: {
+                mt: "1.5";
+                textStyle: "sm";
+            };
+        };
+    };
+}>;

package/dist/components/timeline/timeline.recipe.js

@@ -0,0 +1,134 @@
+import { timelineAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const timelineSlotRecipe = defineSlotRecipe({
+    slots: timelineAnatomy.keys(),
+    className: 'chakra-timeline',
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            width: 'full',
+            '--timeline-thickness': '1px',
+            '--timeline-gutter': '4px',
+        },
+        item: {
+            display: 'flex',
+            position: 'relative',
+            alignItems: 'flex-start',
+            flexShrink: 0,
+            gap: '4',
+            _last: {
+                '& :where(.chakra-timeline__separator)': { display: 'none' },
+            },
+        },
+        separator: {
+            position: 'absolute',
+            borderStartWidth: 'var(--timeline-thickness)',
+            ms: 'calc(-1 * var(--timeline-thickness) / 2)',
+            insetInlineStart: 'calc(var(--timeline-indicator-size) / 2)',
+            insetBlock: '0',
+            borderColor: 'border',
+        },
+        indicator: {
+            outline: '2px solid {colors.bg}',
+            position: 'relative',
+            flexShrink: '0',
+            boxSize: 'var(--timeline-indicator-size)',
+            fontSize: 'var(--timeline-font-size)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            borderRadius: 'full',
+            fontWeight: 'medium',
+        },
+        connector: {
+            alignSelf: 'stretch',
+            position: 'relative',
+        },
+        content: {
+            pb: '6',
+            display: 'flex',
+            flexDirection: 'column',
+            width: 'full',
+            gap: '2',
+        },
+        title: {
+            display: 'flex',
+            fontWeight: 'medium',
+            flexWrap: 'wrap',
+            gap: '1.5',
+            alignItems: 'center',
+            mt: 'var(--timeline-margin)',
+        },
+        description: {
+            color: 'fg.muted',
+            textStyle: 'xs',
+        },
+    },
+    variants: {
+        variant: {
+            subtle: {
+                indicator: {
+                    bg: 'bg.muted',
+                },
+            },
+            solid: {
+                indicator: {
+                    bg: 'bg.inverted',
+                    color: 'fg.inverted',
+                },
+            },
+            outline: {
+                indicator: {
+                    bg: 'bg',
+                    borderWidth: '2px',
+                },
+            },
+            plain: {},
+        },
+        size: {
+            sm: {
+                root: {
+                    '--timeline-indicator-size': 'sizes.4',
+                    '--timeline-font-size': 'fontSizes.2xs',
+                },
+                title: {
+                    textStyle: 'xs',
+                },
+            },
+            md: {
+                root: {
+                    '--timeline-indicator-size': 'sizes.5',
+                    '--timeline-font-size': 'fontSizes.xs',
+                },
+                title: {
+                    textStyle: 'sm',
+                },
+            },
+            lg: {
+                root: {
+                    '--timeline-indicator-size': 'sizes.6',
+                    '--timeline-font-size': 'fontSizes.xs',
+                },
+                title: {
+                    mt: '0.5',
+                    textStyle: 'sm',
+                },
+            },
+            xl: {
+                root: {
+                    '--timeline-indicator-size': 'sizes.8',
+                    '--timeline-font-size': 'fontSizes.sm',
+                },
+                title: {
+                    mt: '1.5',
+                    textStyle: 'sm',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'solid',
+    },
+});

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

@@ -0,0 +1,2 @@
+export { Toaster, toast } from './toaster.tsx';
+export type { ToasterProps } from './toaster.tsx';

package/dist/components/toaster/index.js

@@ -0,0 +1 @@
+export { Toaster, toast } from "./toaster.js";

package/dist/components/toaster/toast.recipe.d.ts

@@ -0,0 +1 @@
+export declare const toastSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "indicator" | "root" | "closeTrigger" | "title" | "actionTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"description" | "indicator" | "root" | "closeTrigger" | "title" | "actionTrigger">>;

package/dist/components/toaster/toast.recipe.js

@@ -0,0 +1,90 @@
+import { toastAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const toastSlotRecipe = defineSlotRecipe({
+    slots: toastAnatomy.keys(),
+    className: 'chakra-toast',
+    base: {
+        root: {
+            width: 'full',
+            display: 'flex',
+            alignItems: 'flex-start',
+            position: 'relative',
+            gap: '2',
+            py: '3',
+            ps: '3',
+            pe: '6',
+            borderRadius: 'md',
+            borderWidth: '1px',
+            translate: 'var(--x) var(--y)',
+            scale: 'var(--scale)',
+            zIndex: 'var(--z-index)',
+            height: 'var(--height, var(--toast-height))',
+            opacity: 'var(--opacity)',
+            willChange: 'translate, opacity, scale, height',
+            transition: 'translate 400ms, scale 400ms, opacity 400ms, height 200ms, box-shadow 200ms',
+            transitionTimingFunction: 'bounce-in',
+            _closed: {
+                transition: 'translate 400ms, scale 400ms, height 200ms, opacity 200ms',
+                transitionTimingFunction: 'bounce-out',
+            },
+            bg: 'bg.panel',
+            color: 'fg',
+            boxShadow: 'lg',
+            overflow: 'hidden',
+            '--toast-indicated-color': 'colors.fg.muted',
+            '&[data-type=warning]': {
+                '--toast-indicated-color': 'colors.fg.warning',
+            },
+            '&[data-type=success]': {
+                '--toast-indicated-color': 'colors.fg.success',
+            },
+            '&[data-type=error]': {
+                '--toast-indicated-color': 'colors.fg.error',
+            },
+            '&[data-overlap]': {
+                _before: {
+                    content: '""',
+                    position: 'absolute',
+                    inset: '0',
+                    maskImage: 'linear-gradient(to bottom, transparent, black 50%)',
+                },
+            },
+        },
+        title: {
+            fontWeight: 'medium',
+            textStyle: 'sm',
+            marginEnd: '2',
+        },
+        description: {
+            display: 'inline',
+            textStyle: 'sm',
+            opacity: '0.8',
+        },
+        indicator: {
+            flexShrink: '0',
+            boxSize: '5',
+            color: 'var(--toast-indicated-color)',
+        },
+        actionTrigger: {
+            cursor: 'button',
+            textStyle: 'sm',
+            fontWeight: 'medium',
+            height: '6',
+            px: '3',
+            ms: '-3',
+            borderRadius: 'sm',
+            alignSelf: 'flex-start',
+            transition: 'background 200ms',
+            color: 'colorPalette.solid/80',
+            _hover: {
+                bg: 'bg.subtle',
+                color: 'colorPalette.solid',
+            },
+        },
+        closeTrigger: {
+            position: 'absolute',
+            top: '2',
+            insetEnd: '2',
+        },
+    },
+});

package/dist/components/toaster/toaster.d.ts

@@ -0,0 +1,6 @@
+import { type CreateToasterProps } from '@chakra-ui/react/toast';
+export declare let toast: import("@zag-js/toast").Store<any>;
+export interface ToasterProps extends Partial<CreateToasterProps> {
+    closable?: boolean;
+}
+export declare const Toaster: (props?: ToasterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export { Toggle } from '@chakra-ui/react/toggle';

package/dist/components/toggle/index.js

@@ -0,0 +1 @@
+export { Toggle } from '@chakra-ui/react/toggle';

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

@@ -0,0 +1 @@
+export { Toggle } from '@chakra-ui/react/toggle';

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

@@ -0,0 +1 @@
+export { Toggle } from '@chakra-ui/react/toggle';

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

@@ -0,0 +1 @@
+export { ToggleTip, type ToggleTipProps } from './toggle-tip.tsx';

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

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+export * from './tooltip.tsx';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+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

@@ -0,0 +1 @@
+export { Em, type EmProps, Heading, type HeadingProps, Strong, type StrongProps, Text, type TextProps, } from '@chakra-ui/react/typography';

package/dist/components/typography/index.js

@@ -0,0 +1 @@
+export { Em, Heading, Strong, Text, } from '@chakra-ui/react/typography';

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

@@ -0,0 +1 @@
+export { Wrap, type WrapProps } from '@chakra-ui/react/wrap';

package/dist/components/wrap/index.js

@@ -0,0 +1 @@
+export { Wrap } from '@chakra-ui/react/wrap';