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

package/dist/components/tabs/tabs.recipe.js

@@ -0,0 +1,312 @@
+import { tabsAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const tabsSlotRecipe = defineSlotRecipe({
+    slots: tabsAnatomy.keys(),
+    className: 'chakra-tabs',
+    base: {
+        root: {
+            colorPalette: 'gray',
+            '--tabs-trigger-radius': 'radii.control.md',
+            position: 'relative',
+            _horizontal: {
+                display: 'block',
+            },
+            _vertical: {
+                display: 'flex',
+            },
+        },
+        list: {
+            display: 'inline-flex',
+            position: 'relative',
+            isolation: 'isolate',
+            '--tabs-indicator-shadow': 'shadows.xs',
+            '--tabs-indicator-bg': 'colors.bg',
+            minH: 'var(--tabs-height)',
+            _horizontal: {
+                flexDirection: 'row',
+            },
+            _vertical: {
+                flexDirection: 'column',
+            },
+        },
+        trigger: {
+            outline: '0',
+            minW: 'var(--tabs-height)',
+            height: 'var(--tabs-height)',
+            display: 'flex',
+            alignItems: 'center',
+            fontWeight: 'medium',
+            position: 'relative',
+            cursor: 'button',
+            gap: '2',
+            _focusVisible: {
+                zIndex: 1,
+                focusVisibleRing: 'outside',
+            },
+            _disabled: {
+                cursor: 'not-allowed',
+                opacity: 0.5,
+            },
+        },
+        content: {
+            focusVisibleRing: 'inside',
+            _horizontal: {
+                width: '100%',
+                pt: 'var(--tabs-content-padding)',
+            },
+            _vertical: {
+                height: '100%',
+                ps: 'var(--tabs-content-padding)',
+            },
+        },
+        indicator: {
+            width: 'var(--width)',
+            height: 'var(--height)',
+            borderRadius: 'var(--tabs-indicator-radius)',
+            bg: 'var(--tabs-indicator-bg)',
+            shadow: 'var(--tabs-indicator-shadow)',
+            zIndex: -1,
+        },
+    },
+    variants: {
+        fitted: {
+            true: {
+                list: {
+                    display: 'flex',
+                },
+                trigger: {
+                    flex: 1,
+                    textAlign: 'center',
+                    justifyContent: 'center',
+                },
+            },
+        },
+        justify: {
+            start: {
+                list: {
+                    justifyContent: 'flex-start',
+                },
+            },
+            center: {
+                list: {
+                    justifyContent: 'center',
+                },
+            },
+            end: {
+                list: {
+                    justifyContent: 'flex-end',
+                },
+            },
+        },
+        size: {
+            xs: {
+                root: {
+                    '--tabs-height': 'sizes.6',
+                    '--tabs-content-padding': 'spacing.2',
+                },
+                trigger: {
+                    py: '1',
+                    px: '2',
+                    textStyle: 'xs',
+                },
+            },
+            sm: {
+                root: {
+                    '--tabs-height': 'sizes.7',
+                    '--tabs-content-padding': 'spacing.3',
+                },
+                trigger: {
+                    py: '1',
+                    px: '3',
+                    textStyle: 'sm',
+                },
+            },
+            md: {
+                root: {
+                    '--tabs-height': 'sizes.8',
+                    '--tabs-content-padding': 'spacing.4',
+                },
+                trigger: {
+                    py: '2',
+                    px: '4',
+                    textStyle: 'sm',
+                },
+            },
+            lg: {
+                root: {
+                    '--tabs-height': 'sizes.10',
+                    '--tabs-content-padding': 'spacing.4.5',
+                },
+                trigger: {
+                    py: '2',
+                    px: '4.5',
+                    textStyle: 'md',
+                },
+            },
+        },
+        variant: {
+            line: {
+                list: {
+                    display: 'flex',
+                    borderColor: 'border',
+                    _horizontal: {
+                        borderBottomWidth: '1px',
+                    },
+                    _vertical: {
+                        borderEndWidth: '1px',
+                    },
+                },
+                trigger: {
+                    color: 'fg.muted',
+                    _hover: {
+                        color: 'fg.subtle',
+                    },
+                    _disabled: {
+                        _active: { bg: 'initial' },
+                    },
+                    _selected: {
+                        color: 'fg !important',
+                        _horizontal: {
+                            layerStyle: 'indicator.bottom',
+                            '--indicator-offset-y': '-1px',
+                            '--indicator-color': 'colors.colorPalette.solid',
+                        },
+                        _vertical: {
+                            layerStyle: 'indicator.end',
+                            '--indicator-offset-x': '-1px',
+                        },
+                    },
+                },
+            },
+            pills: {
+                list: {
+                    gap: 2,
+                },
+                trigger: {
+                    borderRadius: 'var(--tabs-trigger-radius)',
+                    color: 'fg.muted',
+                    borderWidth: '1px',
+                    borderColor: 'border.emphasized',
+                    _hover: {
+                        bg: 'bg.muted',
+                        color: 'fg.subtle',
+                    },
+                    _selected: {
+                        bg: 'colorPalette.subtle !important',
+                        color: 'colorPalette.fg !important',
+                        borderColor: 'colorPalette.solid/50',
+                    },
+                },
+            },
+            ghost: {
+                list: {
+                    gap: 2,
+                },
+                trigger: {
+                    borderRadius: 'var(--tabs-trigger-radius)',
+                    color: 'fg.muted',
+                    _hover: {
+                        bg: 'bg.muted',
+                        color: 'fg.subtle',
+                    },
+                    _selected: {
+                        bg: 'colorPalette.subtle !important',
+                        color: 'colorPalette.fg !important',
+                    },
+                },
+            },
+            enclosed: {
+                list: {
+                    bg: 'bg.muted',
+                    boxShadow: 'inset',
+                    borderRadius: 'md',
+                    borderWidth: '1px',
+                    minH: 'calc(var(--tabs-height) - 4px)',
+                },
+                trigger: {
+                    justifyContent: 'center',
+                    color: 'fg.muted',
+                    borderRadius: 'var(--tabs-trigger-radius)',
+                    _selected: {
+                        bg: 'bg',
+                        color: 'colorPalette.fg',
+                        shadow: 'sm',
+                    },
+                },
+            },
+            outline: {
+                list: {
+                    '--line-thickness': '1px',
+                    '--line-offset': 'calc(var(--line-thickness) * -1)',
+                    borderColor: 'border',
+                    display: 'flex',
+                    _horizontal: {
+                        _before: {
+                            content: '""',
+                            position: 'absolute',
+                            bottom: '0px',
+                            width: '100%',
+                            borderBottomWidth: 'var(--line-thickness)',
+                            borderBottomColor: 'border',
+                        },
+                    },
+                    _vertical: {
+                        _before: {
+                            content: '""',
+                            position: 'absolute',
+                            insetInline: 'var(--line-offset)',
+                            height: 'calc(100% - calc(var(--line-thickness) * 2))',
+                            borderEndWidth: 'var(--line-thickness)',
+                            borderEndColor: 'border',
+                        },
+                    },
+                },
+                trigger: {
+                    color: 'fg.muted',
+                    borderWidth: '1px',
+                    borderColor: 'transparent',
+                    _selected: {
+                        bg: 'currentBg',
+                        color: 'colorPalette.fg',
+                    },
+                    _horizontal: {
+                        borderTopRadius: 'var(--tabs-trigger-radius)',
+                        marginBottom: 'var(--line-offset)',
+                        marginEnd: { _notLast: 'var(--line-offset)' },
+                        _selected: {
+                            borderColor: 'border',
+                            borderBottomColor: 'transparent',
+                        },
+                    },
+                    _vertical: {
+                        borderStartRadius: 'var(--tabs-trigger-radius)',
+                        marginEnd: 'var(--line-offset)',
+                        marginBottom: { _notLast: 'var(--line-offset)' },
+                        _selected: {
+                            borderColor: 'border',
+                            borderEndColor: 'transparent',
+                        },
+                    },
+                },
+            },
+            plain: {
+                trigger: {
+                    color: 'fg.muted',
+                    _selected: {
+                        color: 'colorPalette.fg',
+                    },
+                    borderRadius: 'var(--tabs-trigger-radius)',
+                    '&[data-selected][data-ssr]': {
+                        bg: 'var(--tabs-indicator-bg)',
+                        shadow: 'var(--tabs-indicator-shadow)',
+                        borderRadius: 'var(--tabs-indicator-radius)',
+                    },
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'line',
+    },
+});

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

@@ -0,0 +1 @@
+export { Tag, type TagProps } from './tag.tsx';

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { Tag } from "./tag.js";

package/dist/components/tag/tag.d.ts

@@ -0,0 +1,8 @@
+import { Tag as ChakraTag } from '@chakra-ui/react/tag';
+export interface TagProps extends ChakraTag.RootProps {
+    startElement?: React.ReactNode;
+    endElement?: React.ReactNode;
+    onClose?: VoidFunction;
+    closable?: boolean;
+}
+export declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/tag/tag.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Tag as ChakraTag } from '@chakra-ui/react/tag';
+export const Tag = forwardRef(function Tag(props, ref) {
+    const { startElement, endElement, onClose, closable = !!onClose, children, ...rest } = props;
+    return (_jsxs(ChakraTag.Root, { ref: ref, ...rest, children: [startElement && (_jsx(ChakraTag.StartElement, { children: startElement })), _jsx(ChakraTag.Label, { children: children }), endElement && (_jsx(ChakraTag.EndElement, { children: endElement })), closable && (_jsx(ChakraTag.EndElement, { children: _jsx(ChakraTag.CloseTrigger, { onClick: onClose }) }))] }));
+});

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

@@ -0,0 +1,95 @@
+export declare const tagSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "closeTrigger" | "endElement" | "startElement", {
+    size: {
+        sm: {
+            root: {
+                px: "1.5";
+                minH: "5";
+                gap: "1";
+                '--tag-avatar-size': "spacing.3.5";
+                '--tag-status-size': "spacing.2";
+                '--tag-element-size': "spacing.3.5";
+                '--tag-element-offset': "spacing.-0.5";
+            };
+            label: {
+                textStyle: "xs";
+            };
+        };
+        md: {
+            root: {
+                px: "2";
+                minH: "6";
+                gap: "1";
+                '--tag-avatar-size': "spacing.4";
+                '--tag-status-size': "spacing.2";
+                '--tag-element-size': "spacing.4";
+                '--tag-element-offset': "spacing.-1";
+            };
+            label: {
+                textStyle: "xs";
+            };
+        };
+        lg: {
+            root: {
+                px: "2.5";
+                minH: "7";
+                gap: "1";
+                '--tag-avatar-size': "spacing.5";
+                '--tag-status-size': "spacing.2";
+                '--tag-element-size': "spacing.5";
+                '--tag-element-offset': "spacing.-1.5";
+            };
+            label: {
+                textStyle: "sm";
+            };
+            closeTrigger: {
+                padding: "2px";
+            };
+        };
+        xl: {
+            root: {
+                px: "3";
+                minH: "8";
+                gap: "1.5";
+                '--tag-avatar-size': "spacing.6";
+                '--tag-status-size': "spacing.2";
+                '--tag-element-size': "spacing.6";
+                '--tag-element-offset': "spacing.-2";
+            };
+            label: {
+                textStyle: "md";
+            };
+            closeTrigger: {
+                padding: "3px";
+            };
+        };
+    };
+    variant: {
+        subtle: {
+            root: {
+                bg: "colorPalette.subtle";
+                color: "colorPalette.fg";
+            } | undefined;
+        };
+        solid: {
+            root: {
+                bg: "colorPalette.solid";
+                color: "colorPalette.contrast";
+            } | undefined;
+        };
+        outline: {
+            root: {
+                color: "colorPalette.fg";
+                shadow: "inset 0 0 0px 1px var(--shadow-color)";
+                shadowColor: "colorPalette.subtle";
+            } | undefined;
+        };
+        surface: {
+            root: {
+                bg: "colorPalette.muted/20";
+                color: "colorPalette.fg";
+                shadow: "inset 0 0 0px 1px var(--shadow-color)";
+                shadowColor: "colorPalette.subtle";
+            } | undefined;
+        };
+    };
+}>;

package/dist/components/tag/tag.recipe.js

@@ -0,0 +1,154 @@
+import { tagAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+import { badgeRecipe } from '../badge/badge.recipe';
+const badgeVariant = badgeRecipe.variants?.variant;
+export const tagSlotRecipe = defineSlotRecipe({
+    slots: tagAnatomy.keys(),
+    className: 'chakra-tag',
+    base: {
+        root: {
+            colorPalette: 'neutral',
+            display: 'inline-flex',
+            alignItems: 'center',
+            verticalAlign: 'top',
+            maxWidth: '100%',
+            userSelect: 'none',
+            borderRadius: 'full',
+            focusVisibleRing: 'outside',
+        },
+        label: {
+            lineClamp: '1',
+        },
+        closeTrigger: {
+            cursor: 'button',
+            position: 'relative',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            outline: '0',
+            borderRadius: 'full',
+            color: 'currentColor',
+            opacity: 0.8,
+            padding: '1px',
+            focusVisibleRing: 'inside',
+            focusRingWidth: '2px',
+            _hover: {
+                opacity: 1,
+                bg: 'colorPalette.subtle',
+            },
+            _after: {
+                content: '""',
+                position: 'absolute',
+                boxSize: '24px',
+                borderRadius: 'full',
+            },
+        },
+        startElement: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0,
+            boxSize: 'var(--tag-element-size)',
+            _icon: { boxSize: '80% !important' },
+            '&:has([data-scope=avatar])': {
+                boxSize: 'var(--tag-avatar-size)',
+                ms: 'var(--tag-element-offset)',
+            },
+            '&:has([class*="status__root"])': {
+                width: 'var(--tag-status-size)',
+            },
+        },
+        endElement: {
+            flexShrink: 0,
+            boxSize: 'var(--tag-element-size)',
+            _icon: { boxSize: '100%' },
+            '&:has(button)': {
+                me: 'var(--tag-element-offset)',
+            },
+        },
+    },
+    variants: {
+        size: {
+            sm: {
+                root: {
+                    px: '1.5',
+                    minH: '5',
+                    gap: '1',
+                    '--tag-avatar-size': 'spacing.3.5',
+                    '--tag-status-size': 'spacing.2',
+                    '--tag-element-size': 'spacing.3.5',
+                    '--tag-element-offset': 'spacing.-0.5',
+                },
+                label: {
+                    textStyle: 'xs',
+                },
+            },
+            md: {
+                root: {
+                    px: '2',
+                    minH: '6',
+                    gap: '1',
+                    '--tag-avatar-size': 'spacing.4',
+                    '--tag-status-size': 'spacing.2',
+                    '--tag-element-size': 'spacing.4',
+                    '--tag-element-offset': 'spacing.-1',
+                },
+                label: {
+                    textStyle: 'xs',
+                },
+            },
+            lg: {
+                root: {
+                    px: '2.5',
+                    minH: '7',
+                    gap: '1',
+                    '--tag-avatar-size': 'spacing.5',
+                    '--tag-status-size': 'spacing.2',
+                    '--tag-element-size': 'spacing.5',
+                    '--tag-element-offset': 'spacing.-1.5',
+                },
+                label: {
+                    textStyle: 'sm',
+                },
+                closeTrigger: {
+                    padding: '2px',
+                },
+            },
+            xl: {
+                root: {
+                    px: '3',
+                    minH: '8',
+                    gap: '1.5',
+                    '--tag-avatar-size': 'spacing.6',
+                    '--tag-status-size': 'spacing.2',
+                    '--tag-element-size': 'spacing.6',
+                    '--tag-element-offset': 'spacing.-2',
+                },
+                label: {
+                    textStyle: 'md',
+                },
+                closeTrigger: {
+                    padding: '3px',
+                },
+            },
+        },
+        variant: {
+            subtle: {
+                root: badgeVariant?.subtle,
+            },
+            solid: {
+                root: badgeVariant?.solid,
+            },
+            outline: {
+                root: badgeVariant?.outline,
+            },
+            surface: {
+                root: badgeVariant?.surface,
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'surface',
+    },
+});

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

@@ -0,0 +1,2 @@
+export { Textarea } from '@chakra-ui/react/textarea';
+export type { TextareaProps } from '@chakra-ui/react/textarea';

package/dist/components/textarea/index.js

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

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

@@ -0,0 +1,65 @@
+export declare const textareaRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    size: {
+        xs: {
+            borderRadius: "control.sm";
+            textStyle: "xs";
+            px: "2";
+            py: "1";
+            scrollPaddingBottom: "1";
+        };
+        sm: {
+            borderRadius: "control.md";
+            textStyle: "sm";
+            px: "2.5";
+            py: "1.5";
+            scrollPaddingBottom: "1.5";
+        };
+        md: {
+            borderRadius: "control.md";
+            textStyle: "sm";
+            px: "3";
+            py: "1.5";
+            scrollPaddingBottom: "1.5";
+        };
+        lg: {
+            borderRadius: "control.lg";
+            textStyle: "md";
+            px: "4";
+            py: "2";
+            scrollPaddingBottom: "2";
+        };
+        xl: {
+            borderRadius: "control.lg";
+            textStyle: "md";
+            px: "4.5";
+            py: "3.5";
+            scrollPaddingBottom: "3.5";
+        };
+    };
+    variant: {
+        outline: {
+            bg: "transparent";
+            borderWidth: "1px";
+            borderColor: "border";
+            focusVisibleRing: "inside";
+            focusRingWidth: number;
+        };
+        subtle: {
+            borderWidth: "1px";
+            borderColor: "transparent";
+            bg: "bg.muted";
+            focusVisibleRing: "inside";
+        };
+        flushed: {
+            bg: "transparent";
+            borderBottomWidth: "1px";
+            borderBottomColor: "border";
+            borderRadius: "0";
+            px: "0";
+            _focusVisible: {
+                borderColor: "var(--focus-color)";
+                boxShadow: "0px 1px 0px 0px var(--focus-color)";
+            };
+        };
+    };
+}>;