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

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Sidebar, useSidebar } from '@saas-ui/core/sidebar';
+import { ClassNamesProvider, StylesProvider, useRecipeResult, withContext, withItemContext, withItemProvider, } from "./sidebar.context.js";
+const SidebarProvider = function SidebarProvider(props) {
+    return (_jsx(Sidebar.Provider, { ...props, children: _jsx(RecipeProvider, { ...props, children: props.children }) }));
+};
+function RecipeProvider(props) {
+    const { mode } = useSidebar();
+    const { styles, classNames } = useRecipeResult({
+        ...props,
+        mode,
+    });
+    return (_jsx(StylesProvider, { value: styles, children: _jsx(ClassNamesProvider, { value: classNames, children: props.children }) }));
+}
+/**
+ * Side navigation, commonly used as the primary navigation
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarRoot = withContext(Sidebar.Root, 'root');
+/**
+ * Button that toggles the sidebar visibility.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarTrigger = withContext(Sidebar.Trigger, 'trigger', {
+    forwardAsChild: true,
+});
+/**
+ * Opens the sidebar when hovering over the trigger.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarFlyoutTrigger = withContext(Sidebar.FlyoutTrigger, 'flyoutTrigger', {
+    forwardAsChild: true,
+});
+/**
+ * Overlay shown when sidebar is open on mobile.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarBackdrop = withContext(Sidebar.Backdrop, 'backdrop', {
+    forwardAsChild: true,
+});
+/**
+ * Sidebar header section.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarHeader = withContext(Sidebar.Header, 'header');
+/**
+ * Sidebar body section, used for the main content of the sidebar.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarBody = withContext(Sidebar.Body, 'body');
+/**
+ * Sidebar footer section.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarFooter = withContext(Sidebar.Footer, 'footer');
+/**
+ * Sidebar track section.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarTrack = withContext(Sidebar.Track, 'track', {
+    forwardAsChild: true,
+});
+const SidebarGroup = withContext(Sidebar.Group, 'group', {
+    defaultProps: {
+        role: 'group',
+    },
+});
+const SidebarGroupHeader = withContext(Sidebar.GroupHeader, 'groupHeader');
+const SidebarGroupTitle = withContext(Sidebar.GroupTitle, 'groupTitle');
+const SidebarGroupEndElement = withContext(Sidebar.GroupEndElement, 'groupEndElement');
+const SidebarGroupContent = withContext(Sidebar.GroupContent, 'groupContent');
+const SidebarNavItem = withItemProvider(Sidebar.NavItem, 'item');
+const SidebarNavButton = withItemContext(Sidebar.NavButton, 'button', {
+    forwardAsChild: true,
+});
+const SidebarNavButtonEndElement = withItemContext(Sidebar.NavItemEndElement, 'endElement', {
+    defaultProps: {
+        'data-slot': 'endElement',
+    },
+});
+const SidebarContext = Sidebar.Context;
+export { SidebarProvider as Provider, SidebarContext as Context, SidebarRoot as Root, SidebarTrigger as Trigger, SidebarFlyoutTrigger as FlyoutTrigger, SidebarBackdrop as Backdrop, SidebarHeader as Header, SidebarBody as Body, SidebarFooter as Footer, SidebarTrack as Track, SidebarGroup as Group, SidebarGroupHeader as GroupHeader, SidebarGroupTitle as GroupTitle, SidebarGroupEndElement as GroupEndElement, SidebarGroupContent as GroupContent, SidebarNavItem as NavItem, SidebarNavButton as NavButton, SidebarNavButtonEndElement as NavButtonEndElement, };

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

@@ -0,0 +1,89 @@
+export declare const sidebarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"body" | "backdrop" | "root" | "header" | "footer" | "group" | "trigger" | "track" | "flyoutTrigger" | "groupHeader" | "groupTitle" | "groupEndElement" | "groupContent", {
+    mode: {
+        collapsible: {
+            root: {
+                base: {
+                    position: "fixed";
+                    height: "100dvh";
+                    zIndex: "layer-3";
+                };
+                md: {
+                    position: "relative";
+                    height: "auto";
+                    zIndex: "unset";
+                };
+                width: "var(--sidebar-width, 280px)";
+                maxWidth: ("100vw" | "var(--sidebar-max-width, 320px)")[];
+                minWidth: "var(--sidebar-min-width, 220px)";
+                bg: "sidebar.bg";
+                transitionProperty: "margin-left";
+                _open: {
+                    marginLeft: number;
+                    transitionDuration: "moderate";
+                    transitionTimingFunction: "bounce-in";
+                };
+                _closed: {
+                    marginLeft: "calc(var(--sidebar-width, 280px) * -1)";
+                    transitionDuration: "fast";
+                    transitionTimingFunction: "bounce-out";
+                };
+            };
+        };
+        flyout: {
+            root: {
+                position: "fixed";
+                top: number;
+                left: number;
+                bottom: number;
+                zIndex: "var(--sidebar-z-index)";
+                width: "var(--sidebar-width, 280px)";
+                maxWidth: ("100vw" | "var(--sidebar-max-width, 320px)")[];
+                minWidth: "var(--sidebar-min-width, 220px)";
+                bg: "sidebar.bg";
+                borderColor: "sidebar.border";
+                boxShadow: "none";
+                borderWidth: "1px";
+                borderRadius: "lg";
+                _open: {
+                    transitionDuration: "moderate";
+                    transitionTimingFunction: "ease-out";
+                    boxShadow: "lg";
+                };
+                _closed: {
+                    left: "calc(var(--sidebar-width, 280px) * -1)";
+                    transitionDuration: "fast";
+                    transitionTimingFunction: "ease-in-out";
+                };
+            };
+            flyoutTrigger: {
+                display: "block";
+                position: "absolute";
+                '--sidebar-flyout-trigger-z-index': "zIndex.layer-3";
+                zIndex: "calc(var(--sidebar-flyout-trigger-z-index) - 1)";
+                height: "100%";
+                width: "8px";
+            };
+            track: {
+                top: "8px";
+                bottom: "8px";
+            };
+        };
+        compact: {};
+    };
+    size: {
+        md: {
+            header: {
+                px: number;
+            };
+            body: {
+                px: number;
+            };
+            footer: {
+                px: number;
+            };
+            groupEndElement: {
+                pe: "1";
+            };
+        };
+    };
+}>;

package/dist/components/sidebar/sidebar.recipe.js

@@ -0,0 +1,236 @@
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const sidebarSlotRecipe = defineSlotRecipe({
+    className: 'sui-sidebar',
+    slots: [
+        'root',
+        'backdrop',
+        'header',
+        'body',
+        'footer',
+        'trigger',
+        'flyoutTrigger',
+        'group',
+        'groupHeader',
+        'groupTitle',
+        'groupEndElement',
+        'groupContent',
+        'track',
+    ],
+    base: {
+        root: {
+            '--sidebar-z-index': 'zIndex.layer-3',
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        backdrop: {
+            bg: 'blackAlpha.200',
+            position: 'fixed',
+            inset: 0,
+            '--sidebar-backdrop-z-index': 'zIndex.layer-3',
+            zIndex: 'calc(var(--sidebar-backdrop-z-index) - 2)',
+            _open: {
+                animationName: 'fade-in',
+                animationDuration: 'slow',
+            },
+            _closed: {
+                animationName: 'fade-out',
+                animationDuration: 'moderate',
+            },
+        },
+        trigger: {
+            display: 'inline-flex',
+            appearance: 'none',
+            alignItems: 'center',
+            justifyContent: 'center',
+            userSelect: 'none',
+            whiteSpace: 'nowrap',
+            verticalAlign: 'middle',
+            outline: 'none',
+        },
+        header: {
+            display: 'flex',
+            flexDirection: 'row',
+            py: 2,
+        },
+        body: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 4,
+            flex: 1,
+            py: 3,
+            overflowY: 'auto',
+        },
+        footer: {
+            display: 'flex',
+            flexDirection: 'column',
+            py: 2,
+        },
+        group: {
+            position: 'relative',
+        },
+        groupHeader: {
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 1,
+            height: 6,
+            borderRadius: 'md',
+            fontSize: 'xs',
+            transitionProperty: 'common',
+            transitionDuration: 'fast',
+            // @ts-expect-error
+            _groupCollapsible: {
+                cursor: 'button',
+                userSelect: 'none',
+                _hover: {
+                    bg: 'sidebar.accent.bg/80',
+                },
+            },
+        },
+        groupTitle: {
+            display: 'flex',
+            alignItems: 'center',
+            flex: 1,
+            px: 2,
+            fontWeight: 'medium',
+            color: 'sidebar.fg/70',
+        },
+        groupEndElement: {
+            '& > button': {
+                boxSize: 6,
+                _hover: {
+                    bg: 'transparent',
+                },
+            },
+        },
+        groupContent: {
+            pt: 1,
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        track: {
+            display: 'flex',
+            justifyContent: 'center',
+            position: 'absolute',
+            top: 0,
+            right: '-4px',
+            bottom: 0,
+            width: '7px',
+            cursor: 'button',
+            _after: {
+                content: '""',
+                display: 'block',
+                height: '100%',
+                width: '2px',
+                opacity: 0,
+                transitionProperty: 'opacity',
+                transitionDuration: 'fast',
+                transitionDelay: '0.2s',
+                bg: 'sidebar.accent.fg/60',
+                pointerEvents: 'none',
+            },
+            _hover: {
+                _after: {
+                    opacity: 1,
+                },
+            },
+        },
+        flyoutTrigger: {
+            display: 'none',
+        },
+    },
+    variants: {
+        mode: {
+            collapsible: {
+                root: {
+                    base: {
+                        position: 'fixed',
+                        height: '100dvh',
+                        zIndex: 'layer-3',
+                    },
+                    md: {
+                        position: 'relative',
+                        height: 'auto',
+                        zIndex: 'unset',
+                    },
+                    width: 'var(--sidebar-width, 280px)',
+                    maxWidth: ['100vw', 'var(--sidebar-max-width, 320px)'],
+                    minWidth: 'var(--sidebar-min-width, 220px)',
+                    bg: 'sidebar.bg',
+                    transitionProperty: 'margin-left',
+                    _open: {
+                        marginLeft: 0,
+                        transitionDuration: 'moderate',
+                        transitionTimingFunction: 'bounce-in',
+                    },
+                    _closed: {
+                        marginLeft: 'calc(var(--sidebar-width, 280px) * -1)',
+                        transitionDuration: 'fast',
+                        transitionTimingFunction: 'bounce-out',
+                    },
+                },
+            },
+            flyout: {
+                root: {
+                    position: 'fixed',
+                    top: 2,
+                    left: 2,
+                    bottom: 2,
+                    zIndex: 'var(--sidebar-z-index)',
+                    width: 'var(--sidebar-width, 280px)',
+                    maxWidth: ['100vw', 'var(--sidebar-max-width, 320px)'],
+                    minWidth: 'var(--sidebar-min-width, 220px)',
+                    bg: 'sidebar.bg',
+                    borderColor: 'sidebar.border',
+                    boxShadow: 'none',
+                    borderWidth: '1px',
+                    borderRadius: 'lg',
+                    _open: {
+                        transitionDuration: 'moderate',
+                        transitionTimingFunction: 'ease-out',
+                        boxShadow: 'lg',
+                    },
+                    _closed: {
+                        left: 'calc(var(--sidebar-width, 280px) * -1)',
+                        transitionDuration: 'fast',
+                        transitionTimingFunction: 'ease-in-out',
+                    },
+                },
+                flyoutTrigger: {
+                    display: 'block',
+                    position: 'absolute',
+                    '--sidebar-flyout-trigger-z-index': 'zIndex.layer-3',
+                    zIndex: 'calc(var(--sidebar-flyout-trigger-z-index) - 1)',
+                    height: '100%',
+                    width: '8px',
+                },
+                track: {
+                    top: '8px',
+                    bottom: '8px',
+                },
+            },
+            compact: {},
+        },
+        size: {
+            md: {
+                header: {
+                    px: 3,
+                },
+                body: {
+                    px: 3,
+                },
+                footer: {
+                    px: 3,
+                },
+                groupEndElement: {
+                    pe: '1',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        mode: 'collapsible',
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export { Skeleton, type SkeletonProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, } from './skeleton.tsx';

package/dist/components/skeleton/index.js

@@ -0,0 +1 @@
+export { Skeleton, SkeletonCircle, SkeletonText, } from "./skeleton.js";

package/dist/components/skeleton/skeleton.d.ts

@@ -0,0 +1,12 @@
+import { type CircleProps } from '@chakra-ui/react/box';
+import type { SkeletonProps as ChakraSkeletonProps } from '@chakra-ui/react/skeleton';
+export interface SkeletonCircleProps extends ChakraSkeletonProps {
+    size?: CircleProps['size'];
+}
+export declare const SkeletonCircle: (props: SkeletonCircleProps) => import("react/jsx-runtime").JSX.Element;
+export interface SkeletonTextProps extends ChakraSkeletonProps {
+    noOfLines?: number;
+}
+export declare const SkeletonText: import("react").ForwardRefExoticComponent<SkeletonTextProps & import("react").RefAttributes<HTMLDivElement>>;
+export type SkeletonProps = ChakraSkeletonProps;
+export declare const Skeleton: import("react").ForwardRefExoticComponent<ChakraSkeletonProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/skeleton/skeleton.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Circle } from '@chakra-ui/react/box';
+import { Skeleton as ChakraSkeleton } from '@chakra-ui/react/skeleton';
+import { Stack } from '@chakra-ui/react/stack';
+export const SkeletonCircle = (props) => {
+    const { size, ...rest } = props;
+    return (_jsx(Circle, { size: size, asChild: true, children: _jsx(ChakraSkeleton, { ...rest }) }));
+};
+export const SkeletonText = forwardRef(function SkeletonText(props, ref) {
+    const { noOfLines = 3, gap, ...rest } = props;
+    return (_jsx(Stack, { gap: gap, width: "full", ref: ref, children: Array.from({ length: noOfLines }).map((_, index) => (_jsx(ChakraSkeleton, { height: "4", ...props, _last: { maxW: '80%' }, ...rest }, index))) }));
+});
+export const Skeleton = ChakraSkeleton;

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

@@ -0,0 +1,40 @@
+export declare const skeletonRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    loading: {
+        true: {
+            borderRadius: "l2";
+            boxShadow: "none";
+            backgroundClip: "padding-box";
+            cursor: "default";
+            color: "transparent";
+            pointerEvents: "none";
+            userSelect: "none";
+            flexShrink: "0";
+            '&::before, &::after, *': {
+                visibility: "hidden";
+            };
+        };
+        false: {
+            background: "unset";
+            animation: "fade-in var(--fade-duration, 0.1s) ease-out !important";
+        };
+    };
+    variant: {
+        pulse: {
+            background: "bg.emphasized";
+            animation: "pulse";
+            animationDuration: "var(--duration, 1.2s)";
+        };
+        shine: {
+            '--animate-from': "200%";
+            '--animate-to': "-200%";
+            '--start-color': "colors.bg.muted";
+            '--end-color': "colors.bg.emphasized";
+            backgroundImage: "linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))";
+            backgroundSize: "400% 100%";
+            animation: "bg-position var(--duration, 5s) ease-in-out infinite";
+        };
+        none: {
+            animation: "none";
+        };
+    };
+}>;

package/dist/components/skeleton/skeleton.recipe.js

@@ -0,0 +1,49 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const skeletonRecipe = defineRecipe({
+    className: 'chakra-skeleton',
+    base: {},
+    variants: {
+        loading: {
+            true: {
+                borderRadius: 'l2',
+                boxShadow: 'none',
+                backgroundClip: 'padding-box',
+                cursor: 'default',
+                color: 'transparent',
+                pointerEvents: 'none',
+                userSelect: 'none',
+                flexShrink: '0',
+                '&::before, &::after, *': {
+                    visibility: 'hidden',
+                },
+            },
+            false: {
+                background: 'unset',
+                animation: 'fade-in var(--fade-duration, 0.1s) ease-out !important',
+            },
+        },
+        variant: {
+            pulse: {
+                background: 'bg.emphasized',
+                animation: 'pulse',
+                animationDuration: 'var(--duration, 1.2s)',
+            },
+            shine: {
+                '--animate-from': '200%',
+                '--animate-to': '-200%',
+                '--start-color': 'colors.bg.muted',
+                '--end-color': 'colors.bg.emphasized',
+                backgroundImage: 'linear-gradient(270deg,var(--start-color),var(--end-color),var(--end-color),var(--start-color))',
+                backgroundSize: '400% 100%',
+                animation: 'bg-position var(--duration, 5s) ease-in-out infinite',
+            },
+            none: {
+                animation: 'none',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'pulse',
+        loading: true,
+    },
+});

package/dist/components/skip-nav/index.d.ts

@@ -0,0 +1 @@
+export { SkipNavContent, type SkipNavContentProps, SkipNavLink, type SkipNavLinkProps, } from '@chakra-ui/react/skip-nav';

package/dist/components/skip-nav/index.js

@@ -0,0 +1 @@
+export { SkipNavContent, SkipNavLink, } from '@chakra-ui/react/skip-nav';

package/dist/components/skip-nav-link/index.d.ts

@@ -0,0 +1 @@
+export { SkipNavLink, SkipNavContent, type SkipNavContentProps, type SkipNavLinkProps, } from '@chakra-ui/react/skip-nav';

package/dist/components/skip-nav-link/index.js

@@ -0,0 +1 @@
+export { SkipNavLink, SkipNavContent, } from '@chakra-ui/react/skip-nav';

package/dist/components/skip-nav-link/skip-nav-link.recipe.d.ts

@@ -0,0 +1 @@
+export declare const skipNavLinkRecipe: import("@chakra-ui/react").RecipeDefinition<import("@chakra-ui/react").RecipeVariantRecord>;

package/dist/components/skip-nav-link/skip-nav-link.recipe.js

@@ -0,0 +1,31 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const skipNavLinkRecipe = defineRecipe({
+    className: 'chakra-skip-nav',
+    base: {
+        display: 'inline-flex',
+        bg: 'bg.panel',
+        padding: '2.5',
+        borderRadius: 'l2',
+        fontWeight: 'semibold',
+        focusVisibleRing: 'outside',
+        textStyle: 'sm',
+        // visually hidden
+        userSelect: 'none',
+        border: '0',
+        height: '1px',
+        width: '1px',
+        margin: '-1px',
+        outline: '0',
+        overflow: 'hidden',
+        position: 'absolute',
+        clip: 'rect(0 0 0 0)',
+        _focusVisible: {
+            clip: 'auto',
+            width: 'auto',
+            height: 'auto',
+            position: 'fixed',
+            top: '6',
+            insetStart: '6',
+        },
+    },
+});

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

@@ -0,0 +1 @@
+export { Slider, type SliderProps } from './slider.tsx';

package/dist/components/slider/index.js

@@ -0,0 +1 @@
+export { Slider } from "./slider.js";

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,9 @@
+import { Slider as ChakraSlider } from '@chakra-ui/react/slider';
+export interface SliderProps extends ChakraSlider.RootProps {
+    marks?: Array<number | {
+        value: number;
+        label: React.ReactNode;
+    }>;
+    label?: React.ReactNode;
+}
+export declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/slider/slider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Slider as ChakraSlider } from '@chakra-ui/react/slider';
+export const Slider = forwardRef(function Slider(props, ref) {
+    const { marks: marksProp, label, ...rest } = props;
+    const value = props.defaultValue ?? props.value;
+    const marks = marksProp?.map((mark) => {
+        if (typeof mark === 'number')
+            return { value: mark, label: undefined };
+        return mark;
+    });
+    const hasMarkLabel = !!marks?.some((mark) => mark.label);
+    return (_jsxs(ChakraSlider.Root, { ref: ref, thumbAlignment: "center", ...rest, children: [label && (_jsx(ChakraSlider.Label, { fontWeight: "medium", children: label })), _jsxs(ChakraSlider.Control, { mb: hasMarkLabel ? '4' : undefined, children: [_jsx(ChakraSlider.Track, { children: _jsx(ChakraSlider.Range, {}) }), value?.map((_, index) => (_jsx(ChakraSlider.Thumb, { index: index, children: _jsx(ChakraSlider.HiddenInput, {}) }, index)))] }), marks?.length && (_jsx(ChakraSlider.MarkerGroup, { children: marks.map((mark, index) => {
+                    const value = typeof mark === 'number' ? mark : mark.value;
+                    const label = typeof mark === 'number' ? undefined : mark.label;
+                    return (_jsxs(ChakraSlider.Marker, { value: value, children: [_jsx(ChakraSlider.MarkerIndicator, {}), label] }, index));
+                }) }))] }));
+});