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

package/dist/components/steps/steps.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react/box';
+import { Steps as ChakraSteps, useStepsContext } from '@chakra-ui/react/steps';
+import { CheckIcon } from "../icons/index.js";
+const StepsItem = (props) => {
+    const { title, description, completedIcon, icon, ...rest } = props;
+    return (_jsxs(ChakraSteps.Item, { ...rest, children: [_jsxs(ChakraSteps.Trigger, { children: [_jsx(ChakraSteps.Indicator, { children: _jsx(ChakraSteps.Status, { complete: completedIcon || _jsx(CheckIcon, {}), incomplete: icon || _jsx(ChakraSteps.Number, {}) }) }), _jsx(StepInfo, { title: title, description: description })] }), _jsx(ChakraSteps.Separator, {})] }));
+};
+const StepInfo = (props) => {
+    const { title, description } = props;
+    if (title && description) {
+        return (_jsxs(Box, { children: [_jsx(ChakraSteps.Title, { children: title }), _jsx(ChakraSteps.Description, { children: description })] }));
+    }
+    return (_jsxs(_Fragment, { children: [title && _jsx(ChakraSteps.Title, { children: title }), description && (_jsx(ChakraSteps.Description, { children: description }))] }));
+};
+const StepsIndicator = (props) => {
+    const { icon = _jsx(ChakraSteps.Number, {}), completedIcon } = props;
+    return (_jsx(ChakraSteps.Indicator, { children: _jsx(ChakraSteps.Status, { complete: completedIcon, incomplete: icon }) }));
+};
+const StepsList = ChakraSteps.List;
+const StepsRoot = ChakraSteps.Root;
+const StepsContent = ChakraSteps.Content;
+const StepsCompletedContent = ChakraSteps.CompletedContent;
+const StepsNextTrigger = (props) => {
+    return _jsx(ChakraSteps.NextTrigger, { ...props });
+};
+const StepsPrevTrigger = (props) => {
+    return _jsx(ChakraSteps.PrevTrigger, { ...props });
+};
+export { StepsRoot as Root, StepsContent as Content, StepsCompletedContent as CompletedContent, StepsList as List, StepsIndicator as Indicator, StepsItem as Item, StepsNextTrigger as NextTrigger, StepsPrevTrigger as PrevTrigger, useStepsContext as useContext, };

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

@@ -0,0 +1,142 @@
+export declare const stepsSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "progress" | "indicator" | "root" | "item" | "separator" | "title" | "list" | "trigger" | "nextTrigger" | "prevTrigger", {
+    orientation: {
+        vertical: {
+            root: {
+                flexDirection: "row";
+                height: "100%";
+            };
+            list: {
+                flexDirection: "column";
+                alignItems: "flex-start";
+            };
+            separator: {
+                position: "absolute";
+                width: "var(--steps-thickness)";
+                height: "100%";
+                maxHeight: "calc(100% - var(--steps-size) - var(--steps-gutter) * 2)";
+                top: "calc(var(--steps-size) + var(--steps-gutter))";
+                insetStart: "calc(var(--steps-size) / 2 - 1px)";
+            };
+            item: {
+                alignItems: "flex-start";
+            };
+        };
+        horizontal: {
+            root: {
+                flexDirection: "column";
+                width: "100%";
+            };
+            list: {
+                flexDirection: "row";
+                alignItems: "center";
+            };
+            separator: {
+                width: "100%";
+                height: "var(--steps-thickness)";
+                marginX: "var(--steps-gutter)";
+            };
+            item: {
+                alignItems: "center";
+            };
+        };
+    };
+    variant: {
+        solid: {
+            indicator: {
+                _incomplete: {
+                    borderWidth: "var(--steps-thickness)";
+                };
+                _current: {
+                    bg: "colorPalette.muted";
+                    borderWidth: "var(--steps-thickness)";
+                    borderColor: "colorPalette.solid";
+                    color: "colorPalette.fg";
+                };
+                _complete: {
+                    bg: "colorPalette.solid";
+                    borderColor: "colorPalette.solid";
+                    color: "colorPalette.contrast";
+                };
+            };
+            separator: {
+                _complete: {
+                    bg: "colorPalette.solid";
+                };
+            };
+        };
+        subtle: {
+            indicator: {
+                _incomplete: {
+                    bg: "bg.muted";
+                };
+                _current: {
+                    bg: "colorPalette.muted";
+                    color: "colorPalette.fg";
+                };
+                _complete: {
+                    bg: "colorPalette.emphasized";
+                    color: "colorPalette.fg";
+                };
+            };
+            separator: {
+                _complete: {
+                    bg: "colorPalette.emphasized";
+                };
+            };
+        };
+    };
+    size: {
+        xs: {
+            root: {
+                gap: "2.5";
+            };
+            list: {
+                '--steps-size': "sizes.6";
+                '--steps-icon-size': "sizes.3.5";
+                textStyle: "xs";
+            };
+            title: {
+                textStyle: "sm";
+            };
+        };
+        sm: {
+            root: {
+                gap: "3";
+            };
+            list: {
+                '--steps-size': "sizes.8";
+                '--steps-icon-size': "sizes.4";
+                textStyle: "xs";
+            };
+            title: {
+                textStyle: "sm";
+            };
+        };
+        md: {
+            root: {
+                gap: "4";
+            };
+            list: {
+                '--steps-size': "sizes.10";
+                '--steps-icon-size': "sizes.4";
+                textStyle: "sm";
+            };
+            title: {
+                textStyle: "sm";
+            };
+        };
+        lg: {
+            root: {
+                gap: "6";
+            };
+            list: {
+                '--steps-size': "sizes.11";
+                '--steps-icon-size': "sizes.5";
+                textStyle: "md";
+            };
+            title: {
+                textStyle: "md";
+            };
+        };
+    };
+}>;

package/dist/components/steps/steps.recipe.js

@@ -0,0 +1,213 @@
+import { stepsAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const stepsSlotRecipe = defineSlotRecipe({
+    className: 'chakra-steps',
+    slots: stepsAnatomy.keys(),
+    base: {
+        root: {
+            display: 'flex',
+            width: 'full',
+        },
+        list: {
+            display: 'flex',
+            justifyContent: 'space-between',
+            '--steps-gutter': 'spacing.3',
+            '--steps-thickness': '2px',
+        },
+        title: {
+            fontWeight: 'medium',
+            color: 'fg',
+        },
+        description: {
+            color: 'fg.muted',
+        },
+        separator: {
+            bg: 'border',
+            flex: '1',
+        },
+        indicator: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            flexShrink: '0',
+            borderRadius: 'full',
+            fontWeight: 'medium',
+            width: 'var(--steps-size)',
+            height: 'var(--steps-size)',
+            _icon: {
+                flexShrink: '0',
+                width: 'var(--steps-icon-size)',
+                height: 'var(--steps-icon-size)',
+            },
+        },
+        item: {
+            position: 'relative',
+            display: 'flex',
+            flex: '1 0 0',
+            '&:last-of-type': {
+                flex: 'initial',
+                '& [data-part=separator]': {
+                    display: 'none',
+                },
+            },
+        },
+        trigger: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '3',
+            textAlign: 'start',
+            focusVisibleRing: 'outside',
+            borderRadius: 'l2',
+        },
+        content: {
+            focusVisibleRing: 'outside',
+        },
+    },
+    variants: {
+        orientation: {
+            vertical: {
+                root: {
+                    flexDirection: 'row',
+                    height: '100%',
+                },
+                list: {
+                    flexDirection: 'column',
+                    alignItems: 'flex-start',
+                },
+                separator: {
+                    position: 'absolute',
+                    width: 'var(--steps-thickness)',
+                    height: '100%',
+                    maxHeight: 'calc(100% - var(--steps-size) - var(--steps-gutter) * 2)',
+                    top: 'calc(var(--steps-size) + var(--steps-gutter))',
+                    insetStart: 'calc(var(--steps-size) / 2 - 1px)',
+                },
+                item: {
+                    alignItems: 'flex-start',
+                },
+            },
+            horizontal: {
+                root: {
+                    flexDirection: 'column',
+                    width: '100%',
+                },
+                list: {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                },
+                separator: {
+                    width: '100%',
+                    height: 'var(--steps-thickness)',
+                    marginX: 'var(--steps-gutter)',
+                },
+                item: {
+                    alignItems: 'center',
+                },
+            },
+        },
+        variant: {
+            solid: {
+                indicator: {
+                    _incomplete: {
+                        borderWidth: 'var(--steps-thickness)',
+                    },
+                    _current: {
+                        bg: 'colorPalette.muted',
+                        borderWidth: 'var(--steps-thickness)',
+                        borderColor: 'colorPalette.solid',
+                        color: 'colorPalette.fg',
+                    },
+                    _complete: {
+                        bg: 'colorPalette.solid',
+                        borderColor: 'colorPalette.solid',
+                        color: 'colorPalette.contrast',
+                    },
+                },
+                separator: {
+                    _complete: {
+                        bg: 'colorPalette.solid',
+                    },
+                },
+            },
+            subtle: {
+                indicator: {
+                    _incomplete: {
+                        bg: 'bg.muted',
+                    },
+                    _current: {
+                        bg: 'colorPalette.muted',
+                        color: 'colorPalette.fg',
+                    },
+                    _complete: {
+                        bg: 'colorPalette.emphasized',
+                        color: 'colorPalette.fg',
+                    },
+                },
+                separator: {
+                    _complete: {
+                        bg: 'colorPalette.emphasized',
+                    },
+                },
+            },
+        },
+        size: {
+            xs: {
+                root: {
+                    gap: '2.5',
+                },
+                list: {
+                    '--steps-size': 'sizes.6',
+                    '--steps-icon-size': 'sizes.3.5',
+                    textStyle: 'xs',
+                },
+                title: {
+                    textStyle: 'sm',
+                },
+            },
+            sm: {
+                root: {
+                    gap: '3',
+                },
+                list: {
+                    '--steps-size': 'sizes.8',
+                    '--steps-icon-size': 'sizes.4',
+                    textStyle: 'xs',
+                },
+                title: {
+                    textStyle: 'sm',
+                },
+            },
+            md: {
+                root: {
+                    gap: '4',
+                },
+                list: {
+                    '--steps-size': 'sizes.10',
+                    '--steps-icon-size': 'sizes.4',
+                    textStyle: 'sm',
+                },
+                title: {
+                    textStyle: 'sm',
+                },
+            },
+            lg: {
+                root: {
+                    gap: '6',
+                },
+                list: {
+                    '--steps-size': 'sizes.11',
+                    '--steps-icon-size': 'sizes.5',
+                    textStyle: 'md',
+                },
+                title: {
+                    textStyle: 'md',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'solid',
+        orientation: 'horizontal',
+    },
+});

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

@@ -0,0 +1,2 @@
+export { Switch } from './switch.tsx';
+export type { SwitchProps } from './switch.tsx';

package/dist/components/switch/index.js

@@ -0,0 +1 @@
+export { Switch } from "./switch.js";

package/dist/components/switch/switch.d.ts

@@ -0,0 +1,14 @@
+import { Switch as ChakraSwitch } from '@chakra-ui/react/switch';
+export interface SwitchProps extends ChakraSwitch.RootProps {
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    rootRef?: React.Ref<HTMLLabelElement>;
+    trackLabel?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+    thumbLabel?: {
+        on: React.ReactNode;
+        off: React.ReactNode;
+    };
+}
+export declare const Switch: import("react").ForwardRefExoticComponent<SwitchProps & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/switch/switch.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Switch as ChakraSwitch } from '@chakra-ui/react/switch';
+export const Switch = forwardRef(function Switch(props, ref) {
+    const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
+    return (_jsxs(ChakraSwitch.Root, { ref: rootRef, ...rest, children: [_jsx(ChakraSwitch.HiddenInput, { ref: ref, ...inputProps }), _jsxs(ChakraSwitch.Control, { children: [_jsx(ChakraSwitch.Thumb, { children: thumbLabel && (_jsx(ChakraSwitch.ThumbIndicator, { fallback: thumbLabel?.off, children: thumbLabel?.on })) }), trackLabel && (_jsx(ChakraSwitch.Indicator, { fallback: trackLabel.off, children: trackLabel.on }))] }), children != null && (_jsx(ChakraSwitch.Label, { children: children }))] }));
+});

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

@@ -0,0 +1,77 @@
+export declare const switchSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "indicator" | "root" | "thumb", {
+    variant: {
+        solid: {
+            control: {
+                borderRadius: "full";
+                bg: "bg.emphasized";
+                focusVisibleRing: "outside";
+                _checked: {
+                    bg: "colorPalette.solid";
+                };
+            };
+            thumb: {
+                bg: "white";
+                width: "var(--switch-height)";
+                height: "var(--switch-height)";
+                scale: "0.8";
+                boxShadow: "sm";
+                _checked: {
+                    bg: "colorPalette.contrast";
+                };
+            };
+        };
+        raised: {
+            control: {
+                borderRadius: "full";
+                height: "calc(var(--switch-height) / 2)";
+                bg: "bg.muted";
+                boxShadow: "inset";
+                _checked: {
+                    bg: "colorPalette.solid/60";
+                };
+            };
+            thumb: {
+                width: "var(--switch-height)";
+                height: "var(--switch-height)";
+                position: "relative";
+                top: "calc(var(--switch-height) * -0.25)";
+                bg: "white";
+                boxShadow: "xs";
+                focusVisibleRing: "outside";
+                _checked: {
+                    bg: "colorPalette.solid";
+                };
+            };
+        };
+    };
+    size: {
+        xs: {
+            root: {
+                '--switch-width': "sizes.6";
+                '--switch-height': "sizes.3";
+                '--switch-indicator-font-size': "fontSizes.xs";
+            };
+        };
+        sm: {
+            root: {
+                '--switch-width': "sizes.8";
+                '--switch-height': "sizes.4";
+                '--switch-indicator-font-size': "fontSizes.xs";
+            };
+        };
+        md: {
+            root: {
+                '--switch-width': "sizes.10";
+                '--switch-height': "sizes.5";
+                '--switch-indicator-font-size': "fontSizes.sm";
+            };
+        };
+        lg: {
+            root: {
+                '--switch-width': "sizes.12";
+                '--switch-height': "sizes.6";
+                '--switch-indicator-font-size': "fontSizes.md";
+            };
+        };
+    };
+}>;

package/dist/components/switch/switch.recipe.js

@@ -0,0 +1,156 @@
+import { switchAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const switchSlotRecipe = defineSlotRecipe({
+    slots: switchAnatomy.keys(),
+    className: 'chakra-switch',
+    base: {
+        root: {
+            display: 'inline-flex',
+            gap: '2.5',
+            alignItems: 'center',
+            position: 'relative',
+            verticalAlign: 'middle',
+            '--switch-diff': 'calc(var(--switch-width) - var(--switch-height))',
+            '--switch-x': {
+                base: 'var(--switch-diff)',
+                _rtl: 'calc(var(--switch-diff) * -1)',
+            },
+        },
+        label: {
+            lineHeight: '1',
+            userSelect: 'none',
+            fontSize: 'sm',
+            fontWeight: 'medium',
+            _disabled: {
+                opacity: '0.5',
+            },
+        },
+        indicator: {
+            position: 'absolute',
+            height: 'var(--switch-height)',
+            width: 'var(--switch-height)',
+            fontSize: 'var(--switch-indicator-font-size)',
+            fontWeight: 'medium',
+            flexShrink: 0,
+            userSelect: 'none',
+            display: 'grid',
+            placeContent: 'center',
+            transition: 'inset-inline-start 0.12s ease',
+            insetInlineStart: 'calc(var(--switch-x) - 2px)',
+            _checked: {
+                insetInlineStart: '2px',
+            },
+        },
+        control: {
+            display: 'inline-flex',
+            gap: '0.5rem',
+            flexShrink: 0,
+            justifyContent: 'flex-start',
+            cursor: 'switch',
+            borderRadius: 'full',
+            position: 'relative',
+            width: 'var(--switch-width)',
+            height: 'var(--switch-height)',
+            _disabled: {
+                opacity: '0.5',
+                cursor: 'not-allowed',
+            },
+            _invalid: {
+                focusRingColor: 'border.error',
+            },
+        },
+        thumb: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            transitionProperty: 'translate',
+            transitionDuration: 'fast',
+            borderRadius: 'inherit',
+            _checked: {
+                translate: 'var(--switch-x) 0',
+            },
+        },
+    },
+    variants: {
+        variant: {
+            solid: {
+                control: {
+                    borderRadius: 'full',
+                    bg: 'bg.emphasized',
+                    focusVisibleRing: 'outside',
+                    _checked: {
+                        bg: 'colorPalette.solid',
+                    },
+                },
+                thumb: {
+                    bg: 'white',
+                    width: 'var(--switch-height)',
+                    height: 'var(--switch-height)',
+                    scale: '0.8',
+                    boxShadow: 'sm',
+                    _checked: {
+                        bg: 'colorPalette.contrast',
+                    },
+                },
+            },
+            raised: {
+                control: {
+                    borderRadius: 'full',
+                    height: 'calc(var(--switch-height) / 2)',
+                    bg: 'bg.muted',
+                    boxShadow: 'inset',
+                    _checked: {
+                        bg: 'colorPalette.solid/60',
+                    },
+                },
+                thumb: {
+                    width: 'var(--switch-height)',
+                    height: 'var(--switch-height)',
+                    position: 'relative',
+                    top: 'calc(var(--switch-height) * -0.25)',
+                    bg: 'white',
+                    boxShadow: 'xs',
+                    focusVisibleRing: 'outside',
+                    _checked: {
+                        bg: 'colorPalette.solid',
+                    },
+                },
+            },
+        },
+        size: {
+            xs: {
+                root: {
+                    '--switch-width': 'sizes.6',
+                    '--switch-height': 'sizes.3',
+                    '--switch-indicator-font-size': 'fontSizes.xs',
+                },
+            },
+            sm: {
+                root: {
+                    '--switch-width': 'sizes.8',
+                    '--switch-height': 'sizes.4',
+                    '--switch-indicator-font-size': 'fontSizes.xs',
+                },
+            },
+            md: {
+                root: {
+                    '--switch-width': 'sizes.10',
+                    '--switch-height': 'sizes.5',
+                    '--switch-indicator-font-size': 'fontSizes.sm',
+                },
+            },
+            lg: {
+                root: {
+                    '--switch-width': 'sizes.12',
+                    '--switch-height': 'sizes.6',
+                    '--switch-indicator-font-size': 'fontSizes.md',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'solid',
+        size: 'md',
+    },
+});