@saas-ui/react 3.0.0-next.4 → 3.0.0-next.40

package/dist/components/sidebar/sidebar.js

@@ -0,0 +1,96 @@
+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";
+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,
+});
+/**
+ * Sidebar inset.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/sidebar
+ */
+const SidebarInset = withContext('div', 'inset');
+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, SidebarInset as Inset, 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,108 @@
+export declare const sidebarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"inset" | "body" | "backdrop" | "root" | "header" | "footer" | "group" | "trigger" | "track" | "flyoutTrigger" | "groupHeader" | "groupTitle" | "groupEndElement" | "groupContent", {
+    variant: {
+        sidebar: {
+            root: {
+                borderRightWidth: "1px";
+                borderLeftColor: "sidebar.border";
+            };
+            inset: {};
+        };
+        inset: {
+            inset: {
+                borderColor: "sidebar.border";
+                borderWidth: "1px";
+                borderRadius: "panel.md";
+                marginBlock: "var(--inset-gap, {spacing.2})";
+                marginEnd: "var(--inset-gap, {spacing.2})";
+                overflow: "clip";
+            };
+        };
+    };
+    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,280 @@
+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',
+        'inset',
+    ],
+    base: {
+        root: {
+            '--sidebar-z-index': 'zIndex.layer-3',
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        backdrop: {
+            layerStyle: 'backdrop',
+            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',
+        },
+        inset: {
+            height: '100%',
+            minHeight: '0',
+            display: 'flex',
+            flexDirection: 'column',
+            bg: 'bg.content',
+        },
+    },
+    variants: {
+        variant: {
+            sidebar: {
+                root: {
+                    borderRightWidth: '1px',
+                    borderLeftColor: 'sidebar.border',
+                },
+                inset: {},
+            },
+            inset: {
+                inset: {
+                    borderColor: 'sidebar.border',
+                    borderWidth: '1px',
+                    borderRadius: 'panel.md',
+                    marginBlock: 'var(--inset-gap, {spacing.2})',
+                    marginEnd: 'var(--inset-gap, {spacing.2})',
+                    overflow: 'clip',
+                },
+            },
+        },
+        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',
+                },
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            variant: 'inset',
+            mode: 'collapsible',
+            css: {
+                root: {
+                    py: 'var(--inset-gap, {spacing.2})',
+                    _closed: {
+                        '& [class*="__inset"]': {
+                            ps: 'var(--inset-gap, {spacing.2})',
+                        },
+                    },
+                },
+            },
+        },
+    ],
+    defaultVariants: {
+        variant: 'sidebar',
+        mode: 'collapsible',
+        size: 'md',
+    },
+});

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

@@ -1,6 +1 @@
-export { Skeleton_alias_1 as Skeleton } from '../../_tsup-dts-rollup.js';
-export { SkeletonProps_alias_1 as SkeletonProps } from '../../_tsup-dts-rollup.js';
-export { SkeletonCircle_alias_1 as SkeletonCircle } from '../../_tsup-dts-rollup.js';
-export { SkeletonCircleProps_alias_1 as SkeletonCircleProps } from '../../_tsup-dts-rollup.js';
-export { SkeletonText_alias_1 as SkeletonText } from '../../_tsup-dts-rollup.js';
-export { SkeletonTextProps_alias_1 as SkeletonTextProps } from '../../_tsup-dts-rollup.js';
+export { Skeleton, type SkeletonProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, } from './skeleton.tsx';

package/dist/components/skeleton/index.js

@@ -1,12 +1 @@
-'use client'
-import {
-  Skeleton,
-  SkeletonCircle,
-  SkeletonText
-} from "../../chunk-UEXUCHDD.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  Skeleton,
-  SkeletonCircle,
-  SkeletonText
-};
+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,41 @@
+export declare const skeletonRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    loading: {
+        true: {
+            borderRadius: "panel.md";
+            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";
+            background: "bg.muted";
+        };
+    };
+}>;

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

@@ -0,0 +1,50 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const skeletonRecipe = defineRecipe({
+    className: 'chakra-skeleton',
+    base: {},
+    variants: {
+        loading: {
+            true: {
+                borderRadius: 'panel.md',
+                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',
+                background: 'bg.muted',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'pulse',
+        loading: true,
+    },
+});

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

@@ -1,4 +1 @@
-export { SkipNavContent_alias_1 as SkipNavContent } from '../../_tsup-dts-rollup.js';
-export { SkipNavContentProps_alias_1 as SkipNavContentProps } from '../../_tsup-dts-rollup.js';
-export { SkipNavLink_alias_1 as SkipNavLink } from '../../_tsup-dts-rollup.js';
-export { SkipNavLinkProps_alias_1 as SkipNavLinkProps } from '../../_tsup-dts-rollup.js';
+export { SkipNavContent, type SkipNavContentProps, SkipNavLink, type SkipNavLinkProps, } from '@chakra-ui/react/skip-nav';

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

@@ -1,10 +1 @@
-'use client'
-import {
-  SkipNavContent,
-  SkipNavLink
-} from "../../chunk-GDDJYUWM.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  SkipNavContent,
-  SkipNavLink
-};
+export { SkipNavContent, SkipNavLink, } from '@chakra-ui/react/skip-nav';

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

@@ -1,4 +1 @@
-export { SkipNavLink_alias_2 as SkipNavLink } from '../../_tsup-dts-rollup.js';
-export { SkipNavContent_alias_2 as SkipNavContent } from '../../_tsup-dts-rollup.js';
-export { SkipNavContentProps_alias_2 as SkipNavContentProps } from '../../_tsup-dts-rollup.js';
-export { SkipNavLinkProps_alias_2 as SkipNavLinkProps } from '../../_tsup-dts-rollup.js';
+export { SkipNavLink, SkipNavContent, type SkipNavContentProps, type SkipNavLinkProps, } from '@chakra-ui/react/skip-nav';

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

@@ -1,12 +1 @@
-'use client'
-import "../../chunk-RTMS5TJN.js";
-
-// src/components/skip-nav-link/index.ts
-import {
-  SkipNavLink,
-  SkipNavContent
-} from "@chakra-ui/react/skip-nav";
-export {
-  SkipNavContent,
-  SkipNavLink
-};
+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>;