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

package/dist/components/checkbox-card/checkbox-card.recipe.js

@@ -0,0 +1,201 @@
+import { checkboxCardAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+import { checkmarkRecipe } from "../checkmark/checkmark.recipe.js";
+export const checkboxCardSlotRecipe = defineSlotRecipe({
+    slots: checkboxCardAnatomy.keys(),
+    className: 'chakra-checkbox-card',
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            userSelect: 'none',
+            position: 'relative',
+            borderRadius: 'l2',
+            flex: '1',
+            focusVisibleRing: 'outside',
+            _disabled: {
+                opacity: '0.8',
+                borderColor: 'border.subtle',
+            },
+            _invalid: {
+                outline: '2px solid',
+                outlineColor: 'border.error',
+            },
+        },
+        control: {
+            display: 'inline-flex',
+            flex: '1',
+            position: 'relative',
+            borderRadius: 'inherit',
+            justifyContent: 'var(--checkbox-card-justify)',
+            alignItems: 'var(--checkbox-card-align)',
+        },
+        label: {
+            fontWeight: 'medium',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
+            _disabled: {
+                opacity: '0.5',
+            },
+        },
+        description: {
+            opacity: '0.64',
+            textStyle: 'sm',
+        },
+        addon: {
+            _disabled: {
+                opacity: '0.5',
+            },
+        },
+        indicator: checkmarkRecipe.base,
+        content: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: '1',
+            gap: '1',
+            justifyContent: 'var(--checkbox-card-justify)',
+            alignItems: 'var(--checkbox-card-align)',
+        },
+    },
+    variants: {
+        size: {
+            sm: {
+                root: {
+                    textStyle: 'sm',
+                },
+                control: {
+                    padding: '3',
+                    gap: '1.5',
+                },
+                addon: {
+                    px: '3',
+                    py: '1.5',
+                    borderTopWidth: '1px',
+                },
+                indicator: checkmarkRecipe.variants?.size.sm,
+            },
+            md: {
+                root: {
+                    textStyle: 'sm',
+                },
+                control: {
+                    padding: '4',
+                    gap: '2.5',
+                },
+                addon: {
+                    px: '4',
+                    py: '2',
+                    borderTopWidth: '1px',
+                },
+                indicator: checkmarkRecipe.variants?.size.md,
+            },
+            lg: {
+                root: {
+                    textStyle: 'md',
+                },
+                control: {
+                    padding: '4',
+                    gap: '3.5',
+                },
+                addon: {
+                    px: '4',
+                    py: '2',
+                    borderTopWidth: '1px',
+                },
+                indicator: checkmarkRecipe.variants?.size.lg,
+            },
+        },
+        variant: {
+            surface: {
+                root: {
+                    borderWidth: '1px',
+                    borderColor: 'border',
+                    _checked: {
+                        bg: 'colorPalette.subtle',
+                        color: 'colorPalette.fg',
+                        borderColor: 'colorPalette.muted',
+                    },
+                    _disabled: {
+                        bg: 'bg.muted',
+                    },
+                },
+                indicator: checkmarkRecipe.variants?.variant.solid,
+            },
+            subtle: {
+                root: {
+                    bg: 'bg.muted',
+                },
+                control: {
+                    _checked: {
+                        bg: 'colorPalette.muted',
+                        color: 'colorPalette.fg',
+                    },
+                },
+                indicator: checkmarkRecipe.variants?.variant.plain,
+            },
+            outline: {
+                root: {
+                    borderWidth: '1px',
+                    borderColor: 'border',
+                    _checked: {
+                        boxShadow: '0 0 0 1px var(--shadow-color)',
+                        boxShadowColor: 'colorPalette.solid',
+                        borderColor: 'colorPalette.solid',
+                    },
+                },
+                indicator: checkmarkRecipe.variants?.variant.solid,
+            },
+            solid: {
+                root: {
+                    borderWidth: '1px',
+                    _checked: {
+                        bg: 'colorPalette.solid',
+                        color: 'colorPalette.contrast',
+                        borderColor: 'colorPalette.solid',
+                    },
+                },
+                indicator: checkmarkRecipe.variants?.variant.inverted,
+            },
+        },
+        justify: {
+            start: {
+                root: { '--checkbox-card-justify': 'flex-start' },
+            },
+            end: {
+                root: { '--checkbox-card-justify': 'flex-end' },
+            },
+            center: {
+                root: { '--checkbox-card-justify': 'center' },
+            },
+        },
+        align: {
+            start: {
+                root: { '--checkbox-card-align': 'flex-start' },
+                content: { textAlign: 'start' },
+            },
+            end: {
+                root: { '--checkbox-card-align': 'flex-end' },
+                content: { textAlign: 'end' },
+            },
+            center: {
+                root: { '--checkbox-card-align': 'center' },
+                content: { textAlign: 'center' },
+            },
+        },
+        orientation: {
+            vertical: {
+                control: { flexDirection: 'column' },
+            },
+            horizontal: {
+                control: { flexDirection: 'row' },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+        align: 'start',
+        orientation: 'horizontal',
+    },
+});

package/dist/components/checkbox-card/index.d.ts

@@ -0,0 +1 @@
+export { CheckboxCard, type CheckboxCardProps } from './checkbox-card.tsx';

package/dist/components/checkbox-card/index.js

@@ -0,0 +1 @@
+export { CheckboxCard } from "./checkbox-card.js";

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

@@ -0,0 +1,54 @@
+export declare const checkmarkRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        xs: {
+            boxSize: "3";
+        };
+        sm: {
+            boxSize: "3.5";
+        };
+        md: {
+            boxSize: "4";
+            p: "0.5";
+        };
+        lg: {
+            boxSize: "5";
+            p: "0.5";
+        };
+    };
+    variant: {
+        solid: {
+            borderColor: "border";
+            '&:is([data-state=checked], [data-state=indeterminate])': {
+                bg: "colorPalette.solid";
+                color: "colorPalette.contrast";
+                borderColor: "colorPalette.solid";
+            };
+        };
+        outline: {
+            borderColor: "border";
+            '&:is([data-state=checked], [data-state=indeterminate])': {
+                color: "colorPalette.fg";
+                borderColor: "colorPalette.solid";
+            };
+        };
+        subtle: {
+            bg: "colorPalette.muted";
+            borderColor: "colorPalette.muted";
+            '&:is([data-state=checked], [data-state=indeterminate])': {
+                color: "colorPalette.fg";
+            };
+        };
+        plain: {
+            '&:is([data-state=checked], [data-state=indeterminate])': {
+                color: "colorPalette.fg";
+            };
+        };
+        inverted: {
+            borderColor: "border";
+            color: "colorPalette.fg";
+            '&:is([data-state=checked], [data-state=indeterminate])': {
+                borderColor: "colorPalette.solid";
+            };
+        };
+    };
+}>;

package/dist/components/checkmark/checkmark.recipe.js

@@ -0,0 +1,80 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const checkmarkRecipe = defineRecipe({
+    className: 'chakra-checkmark',
+    base: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flexShrink: '0',
+        color: 'white',
+        borderWidth: '1px',
+        borderColor: 'transparent',
+        borderRadius: 'l1',
+        focusVisibleRing: 'outside',
+        _invalid: {
+            colorPalette: 'red',
+            borderColor: 'border.error',
+        },
+        _disabled: {
+            opacity: '0.5',
+        },
+    },
+    variants: {
+        size: {
+            xs: {
+                boxSize: '3',
+            },
+            sm: {
+                boxSize: '3.5',
+            },
+            md: {
+                boxSize: '4',
+                p: '0.5',
+            },
+            lg: {
+                boxSize: '5',
+                p: '0.5',
+            },
+        },
+        variant: {
+            solid: {
+                borderColor: 'border',
+                '&:is([data-state=checked], [data-state=indeterminate])': {
+                    bg: 'colorPalette.solid',
+                    color: 'colorPalette.contrast',
+                    borderColor: 'colorPalette.solid',
+                },
+            },
+            outline: {
+                borderColor: 'border',
+                '&:is([data-state=checked], [data-state=indeterminate])': {
+                    color: 'colorPalette.fg',
+                    borderColor: 'colorPalette.solid',
+                },
+            },
+            subtle: {
+                bg: 'colorPalette.muted',
+                borderColor: 'colorPalette.muted',
+                '&:is([data-state=checked], [data-state=indeterminate])': {
+                    color: 'colorPalette.fg',
+                },
+            },
+            plain: {
+                '&:is([data-state=checked], [data-state=indeterminate])': {
+                    color: 'colorPalette.fg',
+                },
+            },
+            inverted: {
+                borderColor: 'border',
+                color: 'colorPalette.fg',
+                '&:is([data-state=checked], [data-state=indeterminate])': {
+                    borderColor: 'colorPalette.solid',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'solid',
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export { Checkmark, type CheckmarkProps } from '@chakra-ui/react/checkmark';

package/dist/components/checkmark/index.js

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

package/dist/components/client-only/index.d.ts

@@ -0,0 +1 @@
+export { ClientOnly, type ClientOnlyProps, } from '@chakra-ui/react/client-only';

package/dist/components/client-only/index.js

@@ -0,0 +1 @@
+export { ClientOnly, } from '@chakra-ui/react/client-only';

package/dist/components/clipboard/clipboard.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Clipboard as ChakraClipboard } from '@chakra-ui/react/clipboard';
+import { type ButtonProps } from '../button';
+import { type IconButtonProps } from '../icon-button';
+import { type InputProps } from '../input';
+interface ClipboardButtonProps extends ButtonProps {
+    icon?: React.ReactNode;
+    copiedIcon?: React.ReactNode;
+    copied?: string;
+}
+declare const ClipboardButton: React.ForwardRefExoticComponent<ClipboardButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ClipboardIconButtonProps extends IconButtonProps {
+    icon?: React.ReactNode;
+    copiedIcon?: React.ReactNode;
+}
+declare const ClipboardIconButton: React.ForwardRefExoticComponent<ClipboardIconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const ClipboardInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const ClipboardRoot: React.ForwardRefExoticComponent<ChakraClipboard.RootProps & React.RefAttributes<HTMLDivElement>>;
+declare const ClipboardLabel: React.ForwardRefExoticComponent<ChakraClipboard.LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export { ClipboardButton as Button, ClipboardIconButton as IconButton, ClipboardInput as Input, ClipboardLabel as Label, ClipboardRoot as Root, };
+type ClipboardRootProps = ChakraClipboard.RootProps;
+export type { ClipboardRootProps as RootProps };

package/dist/components/clipboard/clipboard.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Clipboard as ChakraClipboard } from '@chakra-ui/react/clipboard';
+import { Button } from '../button';
+import { IconButton } from '../icon-button';
+import { CheckIcon, CopyIcon } from '../icons';
+import { Input } from '../input';
+const ClipboardIcon = React.forwardRef(function ClipboardIndicator(props, ref) {
+    const { children = _jsx(CopyIcon, {}), copied = _jsx(CheckIcon, {}), ...rest } = props;
+    return (_jsx(ChakraClipboard.Indicator, { copied: copied, ...rest, ref: ref, children: children }));
+});
+const ClipboardCopyText = React.forwardRef(function ClipboardCopyText(props, ref) {
+    const { children = 'Copy', copied = 'Copied', ...rest } = props;
+    return (_jsx(ChakraClipboard.Indicator, { copied: copied, ...rest, ref: ref, children: children }));
+});
+const ClipboardButton = React.forwardRef(function ClipboardButton(props, ref) {
+    const { icon, copiedIcon, copied, children, ...rest } = props;
+    return (_jsx(ChakraClipboard.Trigger, { asChild: true, children: _jsxs(Button, { ref: ref, ...rest, children: [_jsx(ClipboardIcon, { copied: copiedIcon, children: icon }), _jsx(ClipboardCopyText, { copied: copied, children: children })] }) }));
+});
+const ClipboardIconButton = React.forwardRef(function ClipboardIconButton(props, ref) {
+    const { icon, copiedIcon, ...rest } = props;
+    return (_jsx(ChakraClipboard.Trigger, { asChild: true, children: _jsx(IconButton, { ref: ref, size: "xs", ...rest, children: _jsx(ClipboardIcon, { copied: copiedIcon, children: icon }) }) }));
+});
+const ClipboardInput = React.forwardRef(function ClipboardInputElement(props, ref) {
+    return (_jsx(ChakraClipboard.Input, { asChild: true, children: _jsx(Input, { ref: ref, ...props }) }));
+});
+const ClipboardRoot = ChakraClipboard.Root;
+const ClipboardLabel = ChakraClipboard.Label;
+export { ClipboardButton as Button, ClipboardIconButton as IconButton, ClipboardInput as Input, ClipboardLabel as Label, ClipboardRoot as Root, };

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

@@ -0,0 +1,3 @@
+export * as Clipboard from './clipboard';
+export { useClipboard } from '@chakra-ui/react/clipboard';
+export type { UseClipboardReturn } from '@chakra-ui/react/clipboard';

package/dist/components/clipboard/index.js

@@ -0,0 +1,2 @@
+export * as Clipboard from './clipboard';
+export { useClipboard } from '@chakra-ui/react/clipboard';

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

@@ -0,0 +1,4 @@
+import { type IconButtonProps } from '../icon-button';
+export interface CloseButtonProps extends IconButtonProps {
+}
+export declare const CloseButton: import("react").ForwardRefExoticComponent<CloseButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { IconButton as ChakraIconButton, } from '../icon-button';
+import { CloseIcon } from "../icons/icons.js";
+export const CloseButton = forwardRef(function CloseButton(props, ref) {
+    return (_jsx(ChakraIconButton, { variant: "ghost", "aria-label": "Close", ref: ref, ...props, children: props.children ?? _jsx(CloseIcon, {}) }));
+});

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

@@ -0,0 +1,2 @@
+export { CloseButton } from './close-button.tsx';
+export type { CloseButtonProps } from './close-button.tsx';

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

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

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

@@ -0,0 +1,48 @@
+export declare const codeRecipe: 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/code/code.recipe.js

@@ -0,0 +1,14 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+import { badgeRecipe } from "../badge/badge.recipe.js";
+const { variants, defaultVariants } = badgeRecipe;
+export const codeRecipe = defineRecipe({
+    className: 'chakra-code',
+    base: {
+        fontFamily: 'mono',
+        alignItems: 'center',
+        display: 'inline-flex',
+        borderRadius: 'l2',
+    },
+    variants,
+    defaultVariants,
+});

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

@@ -0,0 +1 @@
+export { Code, type CodeProps } from '@chakra-ui/react/code';

package/dist/components/code/index.js

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

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

@@ -0,0 +1 @@
+export declare const collapsibleSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "root" | "trigger">>;

package/dist/components/collapsible/collapsible.recipe.js

@@ -0,0 +1,19 @@
+import { collapsibleAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const collapsibleSlotRecipe = defineSlotRecipe({
+    slots: collapsibleAnatomy.keys(),
+    className: 'chakra-collapsible',
+    base: {
+        content: {
+            _open: {
+                animationName: 'expand-height, fade-in',
+                animationDuration: 'moderate',
+            },
+            _closed: {
+                animationName: 'collapse-height, fade-out',
+                animationDuration: 'moderate',
+                overflow: 'hidden',
+            },
+        },
+    },
+});

package/dist/components/color-swatch/index.d.ts

@@ -0,0 +1 @@
+export { ColorSwatch, type ColorSwatchProps, type ColorSwatchBaseProps, ColorSwatchMix, type ColorSwatchMixProps, ColorSwatchPropsProvider, } from '@chakra-ui/react/color-swatch';

package/dist/components/color-swatch/index.js

@@ -0,0 +1 @@
+export { ColorSwatch, ColorSwatchMix, ColorSwatchPropsProvider, } from '@chakra-ui/react/color-swatch';

package/dist/components/command/command.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { type HTMLChakraProps, UnstyledProp } from '@chakra-ui/react/styled-system';
+import type { RecipeProps } from '../../types.ts';
+import type { CommandVariantProps } from './command.recipe.ts';
+export interface CommandBaseProps extends RecipeProps<'suiCommand', CommandVariantProps>, UnstyledProp {
+}
+export interface CommandProps extends HTMLChakraProps<'span'>, CommandBaseProps, CommandVariantProps {
+    /**
+     * The modifiers to use for the command.
+     * @default ['then', 'or', '+']
+     */
+    modifiers?: Array<string>;
+}
+export declare const Command: React.FC<CommandProps>;

package/dist/components/command/command.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { createRecipeContext, } from '@chakra-ui/react/styled-system';
+import { Kbd } from "../kbd/index.js";
+const { withContext } = createRecipeContext({
+    key: 'suiCommand',
+});
+export const Command = (props) => {
+    const { children, modifiers, ...rest } = props;
+    if (typeof children !== 'string') {
+        return _jsx(_Fragment, { children: children });
+    }
+    const keys = children.split(/\s|\+/);
+    return (_jsx(StyledCommand, { ...rest, children: keys.map((key) => (_jsx(Key, { modifiers: modifiers, size: props.size, children: key }, key))) }));
+};
+const StyledCommand = withContext('span');
+const Key = (props) => {
+    const { modifiers = ['then', 'or', '+'], children, ...rest } = props;
+    if (typeof children !== 'string') {
+        return _jsx(_Fragment, { children: children });
+    }
+    if (modifiers.includes(children)) {
+        return _jsx("span", { children: children });
+    }
+    return _jsx(Kbd, { ...rest, children: children });
+};

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

@@ -0,0 +1,15 @@
+import { type RecipeVariantProps } from '@chakra-ui/react/styled-system';
+export declare const commandRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        sm: {
+            fontSize: "xs";
+        };
+        md: {
+            fontSize: "sm";
+        };
+        lg: {
+            fontSize: "md";
+        };
+    };
+}>;
+export type CommandVariantProps = RecipeVariantProps<typeof commandRecipe>;

package/dist/components/command/command.recipe.js

@@ -0,0 +1,34 @@
+import { defineRecipe, } from '@chakra-ui/react/styled-system';
+export const commandRecipe = defineRecipe({
+    className: 'sui-command',
+    base: {
+        colorPalette: 'gray',
+        display: 'inline-flex',
+        gap: 1,
+        color: 'fg.muted',
+        '[role=tooltip] > &': {
+            ms: 1,
+            _before: {
+                content: '"•"',
+                me: 1,
+                fontSize: 'xs',
+            },
+        },
+    },
+    variants: {
+        size: {
+            sm: {
+                fontSize: 'xs',
+            },
+            md: {
+                fontSize: 'sm',
+            },
+            lg: {
+                fontSize: 'md',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

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

@@ -0,0 +1 @@
+export { Command } from './command.tsx';

package/dist/components/command/index.js

@@ -0,0 +1 @@
+export { Command } from "./command.js";

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

@@ -0,0 +1,14 @@
+export declare const containerRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    centerContent: {
+        true: {
+            display: "flex";
+            flexDirection: "column";
+            alignItems: "center";
+        };
+    };
+    fluid: {
+        true: {
+            maxWidth: "full";
+        };
+    };
+}>;