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

package/dist/components/app-shell/app-shell.d.ts

@@ -0,0 +1,40 @@
+import { type HTMLChakraProps, type SlotRecipeProps } from '@chakra-ui/react/styled-system';
+declare const useAppShellStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>;
+export { useAppShellStyles };
+export interface AppShellProps extends HTMLChakraProps<'div'> {
+    /**
+     * The top header navigation
+     */
+    header?: React.ReactNode;
+    /**
+     * Main sidebar, positioned on the left
+     */
+    sidebar?: React.ReactElement;
+    /**
+     * Secondary sidebar, positioned on the right
+     */
+    aside?: React.ReactNode;
+    /**
+     * The footer
+     */
+    footer?: React.ReactNode;
+    /**
+     * The main content
+     */
+    children: React.ReactNode;
+}
+export interface AppShellRootProps extends Omit<AppShellProps, 'position'>, SlotRecipeProps<'suiAppShell'> {
+}
+/**
+ * The App Shell defines the main structure of your app.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/app-shell
+ */
+export declare const AppShellRoot: import("react").ForwardRefExoticComponent<AppShellRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AppShellContentProps extends HTMLChakraProps<'div'> {
+}
+export declare const AppShellContent: import("react").ForwardRefExoticComponent<AppShellContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AppShellMainProps extends HTMLChakraProps<'div'> {
+}
+export declare const AppShellMain: import("react").ForwardRefExoticComponent<AppShellMainProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const AppShell: import("react").ForwardRefExoticComponent<AppShellRootProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/app-shell/app-shell.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { createSlotRecipeContext, } from '@chakra-ui/react/styled-system';
+////////////////////////////////////////////////////////////////////////////////////
+const { withProvider, withContext, useStyles: useAppShellStyles, } = createSlotRecipeContext({
+    key: 'suiAppShell',
+});
+export { useAppShellStyles };
+/**
+ * The App Shell defines the main structure of your app.
+ *
+ * @see Docs https://saas-ui.dev/docs/components/layout/app-shell
+ */
+export const AppShellRoot = withProvider('div', 'root', { forwardAsChild: true });
+export const AppShellContent = withContext('div', 'content', { forwardAsChild: true });
+export const AppShellMain = withContext('div', 'main', { forwardAsChild: true });
+export const AppShell = forwardRef((props, ref) => {
+    const { header, sidebar, aside, footer, children, ...rootProps } = props;
+    return (_jsxs(AppShellRoot, { ref: ref, ...rootProps, children: [header, _jsxs(AppShellContent, { children: [sidebar, _jsx(AppShellMain, { children: children }), aside] }), footer] }));
+});
+AppShell.displayName = 'AppShell';

package/dist/components/app-shell/app-shell.recipe.d.ts

@@ -0,0 +1,18 @@
+export declare const appShellSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "main", {
+    position: {
+        static: {
+            root: {
+                height: "100dvh";
+            };
+        };
+        fullscreen: {
+            root: {
+                position: "fixed";
+                inset: number;
+            };
+        };
+    };
+    variant: {
+        plain: {};
+    };
+}>;

package/dist/components/app-shell/app-shell.recipe.js

@@ -0,0 +1,45 @@
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const appShellSlotRecipe = defineSlotRecipe({
+    className: 'sui-app-shell',
+    slots: ['root', 'content', 'main'],
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+        },
+        content: {
+            display: 'flex',
+            flex: 1,
+            minWidth: 0,
+            minHeight: 0,
+        },
+        main: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            minWidth: 0,
+        },
+    },
+    variants: {
+        position: {
+            static: {
+                root: {
+                    height: '100dvh',
+                },
+            },
+            fullscreen: {
+                root: {
+                    position: 'fixed',
+                    inset: 0,
+                },
+            },
+        },
+        variant: {
+            plain: {},
+        },
+    },
+    defaultVariants: {
+        position: 'static',
+        variant: 'plain',
+    },
+});

package/dist/components/app-shell/index.d.ts

@@ -0,0 +1,2 @@
+export { AppShell } from './app-shell';
+export type { AppShellProps } from './app-shell';

package/dist/components/app-shell/index.js

@@ -0,0 +1 @@
+export { AppShell } from './app-shell';

package/dist/components/aspect-ratio/index.d.ts

@@ -0,0 +1 @@
+export { AspectRatio, type AspectRatioProps, } from '@chakra-ui/react/aspect-ratio';

package/dist/components/aspect-ratio/index.js

@@ -0,0 +1 @@
+export { AspectRatio, } from '@chakra-ui/react/aspect-ratio';

package/dist/components/avatar/avatar.d.ts

@@ -0,0 +1,17 @@
+import { Avatar as ChakraAvatar } from '@chakra-ui/react/avatar';
+import { type GroupProps } from '@chakra-ui/react/group';
+import type { SlotRecipeProps } from '@chakra-ui/react/styled-system';
+type ImageProps = React.ImgHTMLAttributes<HTMLImageElement>;
+export interface AvatarProps extends ChakraAvatar.RootProps {
+    name?: string;
+    src?: string;
+    srcSet?: string;
+    loading?: ImageProps['loading'];
+    icon?: React.ReactElement;
+    fallback?: React.ReactNode;
+}
+export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLDivElement>>;
+interface AvatarGroupProps extends GroupProps, SlotRecipeProps<'avatar'> {
+}
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/avatar/avatar.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Avatar as ChakraAvatar } from '@chakra-ui/react/avatar';
+import { Group } from '@chakra-ui/react/group';
+export const Avatar = forwardRef(function Avatar(props, ref) {
+    const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props;
+    return (_jsxs(ChakraAvatar.Root, { ref: ref, ...rest, children: [_jsx(AvatarFallback, { name: name, icon: icon, children: fallback }), _jsx(ChakraAvatar.Image, { src: src, srcSet: srcSet, loading: loading }), children] }));
+});
+const AvatarFallback = forwardRef(function AvatarFallback(props, ref) {
+    const { name, icon, children, ...rest } = props;
+    return (_jsxs(ChakraAvatar.Fallback, { ref: ref, ...rest, children: [children, name != null && children == null && _jsx(_Fragment, { children: getInitials(name) }), name == null && children == null && (_jsx(ChakraAvatar.Icon, { asChild: !!icon, children: icon }))] }));
+});
+function getInitials(name) {
+    const names = name.trim().split(' ');
+    const firstName = names[0] != null ? names[0] : '';
+    const lastName = names.length > 1 ? names[names.length - 1] : '';
+    return firstName && lastName
+        ? `${firstName.charAt(0)}${lastName.charAt(0)}`
+        : firstName.charAt(0);
+}
+export const AvatarGroup = forwardRef(function AvatarGroup(props, ref) {
+    const { size, variant, borderless, ...rest } = props;
+    return (_jsx(ChakraAvatar.PropsProvider, { value: { size, variant, borderless }, children: _jsx(Group, { gap: "0", spaceX: "-3", ref: ref, ...rest }) }));
+});

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

@@ -0,0 +1,89 @@
+export declare const avatarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "image" | "fallback", {
+    size: {
+        full: {
+            root: {
+                '--avatar-size': "100%";
+                '--avatar-font-size': "calc(var(--tag-avatar-size) / 2)";
+            };
+        };
+        '2xs': {
+            root: {
+                '--avatar-size': "sizes.5";
+            };
+        };
+        xs: {
+            root: {
+                '--avatar-size': "sizes.6";
+            };
+        };
+        sm: {
+            root: {
+                '--avatar-size': "sizes.9";
+            };
+        };
+        md: {
+            root: {
+                '--avatar-size': "sizes.12";
+            };
+        };
+        lg: {
+            root: {
+                '--avatar-size': "sizes.14";
+            };
+        };
+        xl: {
+            root: {
+                '--avatar-size': "sizes.16";
+            };
+        };
+        '2xl': {
+            root: {
+                '--avatar-font-size': "calc(var(--avatar-size) / 2)";
+                '--avatar-size': "sizes.20";
+            };
+        };
+    };
+    variant: {
+        solid: {
+            root: {
+                bg: "colorPalette.solid";
+                color: "colorPalette.contrast";
+            };
+        };
+        subtle: {
+            root: {
+                bg: "colorPalette.muted";
+                color: "colorPalette.fg";
+            };
+        };
+        outline: {
+            root: {
+                color: "colorPalette.fg";
+                borderWidth: "1px";
+                borderColor: "colorPalette.muted";
+            };
+        };
+    };
+    shape: {
+        square: {};
+        rounded: {
+            root: {
+                '--avatar-radius': "radii.l3";
+            };
+        };
+        full: {
+            root: {
+                '--avatar-radius': "radii.full";
+            };
+        };
+    };
+    borderless: {
+        true: {
+            root: {
+                '&[data-group-item]': {
+                    borderWidth: "0px";
+                };
+            };
+        };
+    };
+}>;

package/dist/components/avatar/avatar.recipe.js

@@ -0,0 +1,130 @@
+import { avatarAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const avatarSlotRecipe = defineSlotRecipe({
+    slots: avatarAnatomy.keys(),
+    className: 'chakra-avatar',
+    base: {
+        root: {
+            '--avatar-font-size': 'calc(var(--avatar-size) / 2)',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontWeight: 'medium',
+            position: 'relative',
+            verticalAlign: 'top',
+            flexShrink: '0',
+            userSelect: 'none',
+            width: 'var(--avatar-size)',
+            height: 'var(--avatar-size)',
+            fontSize: 'var(--avatar-font-size)',
+            borderRadius: 'var(--avatar-radius)',
+            '&[data-group-item]': {
+                borderWidth: '2px',
+                borderColor: 'bg',
+            },
+        },
+        image: {
+            width: '100%',
+            height: '100%',
+            objectFit: 'cover',
+            borderRadius: 'var(--avatar-radius)',
+        },
+        fallback: {
+            lineHeight: '1',
+            textTransform: 'uppercase',
+            fontWeight: 'medium',
+            fontSize: 'var(--avatar-font-size)',
+            borderRadius: 'var(--avatar-radius)',
+        },
+    },
+    variants: {
+        size: {
+            full: {
+                root: {
+                    '--avatar-size': '100%',
+                    '--avatar-font-size': 'calc(var(--tag-avatar-size) / 2)',
+                },
+            },
+            '2xs': {
+                root: {
+                    '--avatar-size': 'sizes.5',
+                },
+            },
+            xs: {
+                root: {
+                    '--avatar-size': 'sizes.6',
+                },
+            },
+            sm: {
+                root: {
+                    '--avatar-size': 'sizes.9',
+                },
+            },
+            md: {
+                root: {
+                    '--avatar-size': 'sizes.12',
+                },
+            },
+            lg: {
+                root: {
+                    '--avatar-size': 'sizes.14',
+                },
+            },
+            xl: {
+                root: {
+                    '--avatar-size': 'sizes.16',
+                },
+            },
+            '2xl': {
+                root: {
+                    '--avatar-font-size': 'calc(var(--avatar-size) / 2)',
+                    '--avatar-size': 'sizes.20',
+                },
+            },
+        },
+        variant: {
+            solid: {
+                root: {
+                    bg: 'colorPalette.solid',
+                    color: 'colorPalette.contrast',
+                },
+            },
+            subtle: {
+                root: {
+                    bg: 'colorPalette.muted',
+                    color: 'colorPalette.fg',
+                },
+            },
+            outline: {
+                root: {
+                    color: 'colorPalette.fg',
+                    borderWidth: '1px',
+                    borderColor: 'colorPalette.muted',
+                },
+            },
+        },
+        shape: {
+            square: {},
+            rounded: {
+                root: { '--avatar-radius': 'radii.l3' },
+            },
+            full: {
+                root: { '--avatar-radius': 'radii.full' },
+            },
+        },
+        borderless: {
+            true: {
+                root: {
+                    '&[data-group-item]': {
+                        borderWidth: '0px',
+                    },
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        shape: 'full',
+        variant: 'solid',
+    },
+});

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

@@ -0,0 +1,2 @@
+export { Avatar, AvatarGroup } from './avatar.tsx';
+export type { AvatarProps } from './avatar.tsx';

package/dist/components/avatar/index.js

@@ -0,0 +1 @@
+export { Avatar, AvatarGroup } from "./avatar.js";

package/dist/components/back-button/back-button.d.ts

@@ -0,0 +1,7 @@
+import { type ButtonProps } from '@chakra-ui/react';
+export interface BackButtonProps extends ButtonProps {
+    'aria-label'?: string;
+    href?: string;
+    children?: React.ReactNode;
+}
+export declare const BackButton: import("react").ForwardRefExoticComponent<BackButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/back-button/back-button.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconButton } from '@chakra-ui/react';
+import { ArrowLeftIcon } from "../icons/icons.js";
+import { Link } from "../link/index.js";
+export const BackButton = forwardRef((props, ref) => {
+    const { href, variant = 'ghost', mr = 2, children, ...rest } = props;
+    let content = children || _jsx(ArrowLeftIcon, {});
+    if (href) {
+        content = _jsx(Link, { href: href, children: content });
+    }
+    return (_jsx(IconButton, { ref: ref, "aria-label": "Go back", variant: variant, mr: mr, ...rest, children: content }));
+});

package/dist/components/back-button/index.d.ts

@@ -0,0 +1,2 @@
+export { BackButton } from './back-button.tsx';
+export type { BackButtonProps } from './back-button.tsx';

package/dist/components/back-button/index.js

@@ -0,0 +1 @@
+export { BackButton } from "./back-button.js";

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

@@ -0,0 +1,48 @@
+export declare const badgeRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    variant: {
+        solid: {
+            bg: "colorPalette.solid";
+            color: "colorPalette.contrast";
+        };
+        subtle: {
+            bg: "colorPalette.subtle";
+            color: "colorPalette.fg";
+        };
+        outline: {
+            color: "colorPalette.fg";
+            shadow: "inset 0 0 0px 1px var(--shadow-color)";
+            shadowColor: "colorPalette.subtle";
+        };
+        surface: {
+            bg: "colorPalette.muted/20";
+            color: "colorPalette.fg";
+            shadow: "inset 0 0 0px 1px var(--shadow-color)";
+            shadowColor: "colorPalette.subtle";
+        };
+        plain: {
+            color: "colorPalette.fg";
+        };
+    };
+    size: {
+        xs: {
+            textStyle: "2xs";
+            px: "1";
+            minH: "4";
+        };
+        sm: {
+            textStyle: "xs";
+            px: "1.5";
+            minH: "5";
+        };
+        md: {
+            textStyle: "sm";
+            px: "2";
+            minH: "6";
+        };
+        lg: {
+            textStyle: "sm";
+            px: "2.5";
+            minH: "7";
+        };
+    };
+}>;

package/dist/components/badge/badge.recipe.js

@@ -0,0 +1,66 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const badgeRecipe = defineRecipe({
+    className: 'chakra-badge',
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        borderRadius: 'full',
+        gap: '1',
+        fontWeight: 'medium',
+        fontVariantNumeric: 'tabular-nums',
+        whiteSpace: 'nowrap',
+        userSelect: 'none',
+    },
+    variants: {
+        variant: {
+            solid: {
+                bg: 'colorPalette.solid',
+                color: 'colorPalette.contrast',
+            },
+            subtle: {
+                bg: 'colorPalette.subtle',
+                color: 'colorPalette.fg',
+            },
+            outline: {
+                color: 'colorPalette.fg',
+                shadow: 'inset 0 0 0px 1px var(--shadow-color)',
+                shadowColor: 'colorPalette.subtle',
+            },
+            surface: {
+                bg: 'colorPalette.muted/20',
+                color: 'colorPalette.fg',
+                shadow: 'inset 0 0 0px 1px var(--shadow-color)',
+                shadowColor: 'colorPalette.subtle',
+            },
+            plain: {
+                color: 'colorPalette.fg',
+            },
+        },
+        size: {
+            xs: {
+                textStyle: '2xs',
+                px: '1',
+                minH: '4',
+            },
+            sm: {
+                textStyle: 'xs',
+                px: '1.5',
+                minH: '5',
+            },
+            md: {
+                textStyle: 'sm',
+                px: '2',
+                minH: '6',
+            },
+            lg: {
+                textStyle: 'sm',
+                px: '2.5',
+                minH: '7',
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'subtle',
+        size: 'sm',
+    },
+});

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

@@ -0,0 +1 @@
+export { Badge, BadgePropsProvider, type BadgeProps, } from '@chakra-ui/react/badge';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { Badge, BadgePropsProvider, } from '@chakra-ui/react/badge';

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

@@ -0,0 +1 @@
+export { Bleed, type BleedProps, } from '@chakra-ui/react/bleed';

package/dist/components/bleed/index.js

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

package/dist/components/blockquote/blockquote.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Blockquote as ChakraBlockquote } from '@chakra-ui/react';
+export interface BlockquoteProps extends ChakraBlockquote.RootProps {
+    cite?: React.ReactNode;
+    citeUrl?: string;
+    icon?: React.ReactNode;
+    showDash?: boolean;
+}
+export declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/blockquote/blockquote.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Blockquote as ChakraBlockquote } from '@chakra-ui/react';
+export const Blockquote = React.forwardRef(function Blockquote(props, ref) {
+    const { children, cite, citeUrl, showDash, icon, ...rest } = props;
+    return (_jsxs(ChakraBlockquote.Root, { ref: ref, ...rest, children: [icon, _jsx(ChakraBlockquote.Content, { cite: citeUrl, children: children }), cite && (_jsxs(ChakraBlockquote.Caption, { children: [showDash ? _jsx(_Fragment, { children: "\u2014" }) : null, " ", _jsx("cite", { children: cite })] }))] }));
+});

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

@@ -0,0 +1,52 @@
+export declare const blockquoteSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "icon" | "caption", {
+    justify: {
+        start: {
+            root: {
+                alignItems: "flex-start";
+                textAlign: "start";
+            };
+        };
+        center: {
+            root: {
+                alignItems: "center";
+                textAlign: "center";
+            };
+        };
+        end: {
+            root: {
+                alignItems: "flex-end";
+                textAlign: "end";
+            };
+        };
+    };
+    variant: {
+        subtle: {
+            root: {
+                paddingX: "5";
+                borderStartWidth: "4px";
+                borderStartColor: "colorPalette.muted";
+            };
+            icon: {
+                color: "colorPalette.fg";
+            };
+        };
+        solid: {
+            root: {
+                paddingX: "5";
+                borderStartWidth: "4px";
+                borderStartColor: "colorPalette.solid";
+            };
+            icon: {
+                color: "colorPalette.solid";
+            };
+        };
+        plain: {
+            root: {
+                paddingX: "5";
+            };
+            icon: {
+                color: "colorPalette.solid";
+            };
+        };
+    };
+}>;