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

package/dist/components/loading-overlay/loading-overlay.recipe.js

@@ -0,0 +1,60 @@
+import { defineSlotRecipe } from '@chakra-ui/react';
+export const loadingOverlaySlotRecipe = defineSlotRecipe({
+    className: 'sui-loading-overlay',
+    slots: ['root', 'text'],
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            p: 4,
+            transitionProperty: 'opacity',
+            transitionDuration: 'slower',
+            _open: {
+                opacity: 1,
+            },
+            _closed: {
+                opacity: 0,
+            },
+        },
+    },
+    variants: {
+        variant: {
+            fill: {
+                root: {
+                    flex: 1,
+                    height: '100%',
+                    bg: {
+                        base: 'whiteAlpha.400',
+                        _dark: 'blackAlpha.400',
+                    },
+                },
+            },
+            fullscreen: {
+                root: {
+                    position: 'fixed',
+                    inset: 0,
+                    zIndex: 'modal',
+                    bg: {
+                        base: 'white',
+                        _dark: 'gray.800',
+                    },
+                },
+            },
+            overlay: {
+                root: {
+                    position: 'absolute',
+                    inset: 0,
+                    bg: {
+                        base: 'whiteAlpha.300',
+                        _dark: 'blackAlpha.300',
+                    },
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        variant: 'fill',
+    },
+});

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

@@ -0,0 +1 @@
+export { LocaleProvider, type LocaleProviderProps, useLocaleContext, } from '@chakra-ui/react/locale';

package/dist/components/locale/index.js

@@ -0,0 +1 @@
+export { LocaleProvider, useLocaleContext, } from '@chakra-ui/react/locale';

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

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

package/dist/components/mark/index.js

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

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

@@ -0,0 +1,16 @@
+export declare const markRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    variant: {
+        subtle: {
+            bg: "colorPalette.subtle";
+            color: "inherit";
+        };
+        solid: {
+            bg: "colorPalette.solid";
+            color: "colorPalette.contrast";
+        };
+        text: {
+            fontWeight: "medium";
+        };
+        plain: {};
+    };
+}>;

package/dist/components/mark/mark.recipe.js

@@ -0,0 +1,25 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const markRecipe = defineRecipe({
+    className: 'chakra-mark',
+    base: {
+        bg: 'transparent',
+        color: 'inherit',
+        whiteSpace: 'nowrap',
+    },
+    variants: {
+        variant: {
+            subtle: {
+                bg: 'colorPalette.subtle',
+                color: 'inherit',
+            },
+            solid: {
+                bg: 'colorPalette.solid',
+                color: 'colorPalette.contrast',
+            },
+            text: {
+                fontWeight: 'medium',
+            },
+            plain: {},
+        },
+    },
+});

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

@@ -0,0 +1 @@
+export * as Menu from './menu.tsx';

package/dist/components/menu/index.js

@@ -0,0 +1 @@
+export * as Menu from "./menu.js";

package/dist/components/menu/menu.d.ts

@@ -0,0 +1,41 @@
+import { Menu as ChakraMenu } from '@chakra-ui/react/menu';
+import { type ButtonProps } from '../button/index.ts';
+interface MenuContentProps extends ChakraMenu.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+}
+declare const MenuContent: import("react").ForwardRefExoticComponent<MenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuArrow: import("react").ForwardRefExoticComponent<ChakraMenu.ArrowProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuCheckboxItemProps extends ChakraMenu.CheckboxItemProps {
+    startElement?: React.ReactNode;
+    endElement?: React.ReactNode;
+}
+declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<MenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuRadioItemProps extends ChakraMenu.RadioItemProps {
+    startElement?: React.ReactNode;
+    endElement?: React.ReactNode;
+}
+declare const MenuRadioItem: import("react").ForwardRefExoticComponent<MenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuItemIndicator: import("react").ForwardRefExoticComponent<ChakraMenu.ItemIndicatorProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuItemGroup: import("react").ForwardRefExoticComponent<ChakraMenu.ItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuTriggerItemProps extends ChakraMenu.ItemProps {
+    startIcon?: React.ReactNode;
+}
+declare const MenuTriggerItem: import("react").ForwardRefExoticComponent<MenuTriggerItemProps & import("react").RefAttributes<HTMLDivElement>>;
+interface MenuButtonProps extends ButtonProps, ChakraMenu.TriggerProps {
+}
+declare const MenuButton: import("react").ForwardRefExoticComponent<MenuButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const MenuRadioItemGroup: import("react").ForwardRefExoticComponent<ChakraMenu.RadioItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuContextTrigger: import("react").ForwardRefExoticComponent<ChakraMenu.ContextTriggerProps & import("react").RefAttributes<HTMLElement>>;
+declare const MenuRoot: import("react").FC<ChakraMenu.RootProps>;
+declare const MenuSeparator: import("react").ForwardRefExoticComponent<ChakraMenu.SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuContext: (props: import("@ark-ui/react").MenuContextProps) => import("react").ReactNode;
+declare const MenuItem: import("react").ForwardRefExoticComponent<ChakraMenu.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuItemText: import("react").ForwardRefExoticComponent<ChakraMenu.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const MenuItemCommand: import("react").ForwardRefExoticComponent<ChakraMenu.CommandProps & import("react").RefAttributes<HTMLElement>>;
+declare const MenuTrigger: import("react").ForwardRefExoticComponent<ChakraMenu.TriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export { MenuRoot as Root, MenuContent as Content, MenuArrow as Arrow, MenuCheckboxItem as CheckboxItem, MenuRadioItem as RadioItem, MenuItemIndicator as ItemIndicator, MenuItemGroup as ItemGroup, MenuTriggerItem as TriggerItem, MenuRadioItemGroup as RadioItemGroup, MenuContextTrigger as ContextTrigger, MenuSeparator as Separator, MenuItem as Item, MenuItemText as ItemText, MenuItemCommand as ItemCommand, MenuTrigger as Trigger, MenuButton as Button, MenuContext as Context, };
+type MenuRootProps = ChakraMenu.RootProps;
+type MenuTriggerProps = ChakraMenu.TriggerProps;
+type MenuItemProps = ChakraMenu.ItemProps;
+export type { MenuRootProps as RootProps, MenuContentProps as ContentProps, MenuTriggerProps as TriggerProps, MenuTriggerItemProps as TriggerItemProps, MenuItemProps as ItemProps, MenuButtonProps as ButtonProps, MenuRadioItemProps as RadioItemProps, };

package/dist/components/menu/menu.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Menu as ChakraMenu } from '@chakra-ui/react/menu';
+import { Portal } from '@chakra-ui/react/portal';
+import { Button } from "../button/index.js";
+import { CheckIcon, ChevronRightIcon } from "../icons/index.js";
+const MenuContent = forwardRef(function MenuContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return (_jsx(Portal, { disabled: !portalled, container: portalRef, children: _jsx(ChakraMenu.Positioner, { children: _jsx(ChakraMenu.Content, { ref: ref, ...rest }) }) }));
+});
+const MenuArrow = forwardRef(function MenuArrow(props, ref) {
+    return (_jsx(ChakraMenu.Arrow, { ref: ref, ...props, children: _jsx(ChakraMenu.ArrowTip, {}) }));
+});
+const MenuCheckboxItem = forwardRef(function MenuCheckboxItem(props, ref) {
+    const { children, startElement, endElement, ...rest } = props;
+    return (_jsxs(ChakraMenu.CheckboxItem, { ref: ref, ...rest, children: [startElement, _jsx(ChakraMenu.ItemText, { children: children }), endElement] }));
+});
+const MenuRadioItem = forwardRef(function MenuRadioItem(props, ref) {
+    const { children, startElement, endElement, ...rest } = props;
+    return (_jsxs(ChakraMenu.RadioItem, { ref: ref, ...rest, children: [startElement, _jsx(ChakraMenu.ItemText, { children: children }), endElement] }));
+});
+const MenuItemIndicator = forwardRef(function MenuItemIndicator(props, ref) {
+    const { children = _jsx(CheckIcon, {}), ...rest } = props;
+    return (_jsx(ChakraMenu.ItemIndicator, { ref: ref, ...rest, children: children }));
+});
+const MenuItemGroup = forwardRef(function MenuItemGroup(props, ref) {
+    const { title, children, ...rest } = props;
+    return (_jsxs(ChakraMenu.ItemGroup, { ref: ref, ...rest, children: [title && (_jsx(ChakraMenu.ItemGroupLabel, { userSelect: "none", children: title })), children] }));
+});
+const MenuTriggerItem = forwardRef(function MenuTriggerItem(props, ref) {
+    const { startIcon, children, ...rest } = props;
+    return (_jsxs(ChakraMenu.TriggerItem, { ref: ref, ...rest, children: [startIcon, children, _jsx(ChevronRightIcon, {})] }));
+});
+const MenuButton = forwardRef(function MenuButton(props, ref) {
+    return (_jsx(MenuTrigger, { ref: ref, asChild: true, children: _jsx(Button, { ...props }) }));
+});
+const MenuRadioItemGroup = ChakraMenu.RadioItemGroup;
+const MenuContextTrigger = ChakraMenu.ContextTrigger;
+const MenuRoot = ChakraMenu.Root;
+const MenuSeparator = ChakraMenu.Separator;
+const MenuContext = ChakraMenu.Context;
+const MenuItem = ChakraMenu.Item;
+const MenuItemText = ChakraMenu.ItemText;
+const MenuItemCommand = ChakraMenu.ItemCommand;
+const MenuTrigger = ChakraMenu.Trigger;
+export { MenuRoot as Root, MenuContent as Content, MenuArrow as Arrow, MenuCheckboxItem as CheckboxItem, MenuRadioItem as RadioItem, MenuItemIndicator as ItemIndicator, MenuItemGroup as ItemGroup, MenuTriggerItem as TriggerItem, MenuRadioItemGroup as RadioItemGroup, MenuContextTrigger as ContextTrigger, MenuSeparator as Separator, MenuItem as Item, MenuItemText as ItemText, MenuItemCommand as ItemCommand, MenuTrigger as Trigger, MenuButton as Button, MenuContext as Context, };

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

@@ -0,0 +1,55 @@
+export declare const menuSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "item" | "itemIndicator" | "positioner" | "separator" | "trigger" | "itemGroup" | "arrow" | "arrowTip" | "contextTrigger" | "itemGroupLabel" | "itemText" | "triggerItem" | "itemCommand", {
+    variant: {
+        subtle: {
+            item: {
+                _highlighted: {
+                    bg: "bg.subtle";
+                };
+            };
+        };
+        solid: {
+            item: {
+                _highlighted: {
+                    bg: "colorPalette.solid";
+                    color: "colorPalette.contrast";
+                };
+            };
+        };
+    };
+    size: {
+        sm: {
+            content: {
+                minW: "8rem";
+                padding: "0.5";
+            };
+            item: {
+                gap: "1";
+                textStyle: "xs";
+                py: "1";
+                px: "1.5";
+            };
+            itemGroupLabel: {
+                textStyle: "xs";
+                py: "1";
+                px: "1.5";
+            };
+        };
+        md: {
+            content: {
+                minW: "8rem";
+                padding: "1";
+            };
+            item: {
+                gap: "2";
+                textStyle: "sm";
+                py: "1.5";
+                px: "2";
+            };
+            itemGroupLabel: {
+                textStyle: "sm";
+                py: "1.5";
+                px: "2";
+            };
+        };
+    };
+}>;

package/dist/components/menu/menu.recipe.js

@@ -0,0 +1,130 @@
+import { menuAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const menuSlotRecipe = defineSlotRecipe({
+    className: 'chakra-menu',
+    slots: menuAnatomy.keys(),
+    base: {
+        content: {
+            layerStyle: 'overlay',
+            boxShadow: 'md',
+            borderWidth: '1px',
+            borderColor: 'border',
+            outline: 0,
+            color: 'fg',
+            maxHeight: 'var(--available-height)',
+            '--menu-z-index': 'zIndex.layer-3',
+            zIndex: 'calc(var(--menu-z-index) + var(--layer-index, 0))',
+            overflow: 'hidden',
+            _open: {
+                animationStyle: 'slide-fade-in',
+                animationDuration: 'fast',
+            },
+            _closed: {
+                animationStyle: 'slide-fade-out',
+                animationDuration: 'faster',
+            },
+        },
+        item: {
+            textDecoration: 'none',
+            color: 'fg',
+            userSelect: 'none',
+            borderRadius: 'control.md',
+            width: '100%',
+            display: 'flex',
+            cursor: 'menuitem',
+            alignItems: 'center',
+            textAlign: 'start',
+            position: 'relative',
+            flex: '0 0 auto',
+            outline: 0,
+            _disabled: {
+                layerStyle: 'disabled',
+            },
+        },
+        itemText: {
+            flex: '1',
+        },
+        itemGroupLabel: {
+            textStyle: 'sm',
+            color: 'fg.subtle',
+        },
+        indicator: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: '0',
+        },
+        itemCommand: {
+            opacity: '0.6',
+            textStyle: 'xs',
+            ms: 'auto',
+            ps: '4',
+            letterSpacing: 'widest',
+        },
+        separator: {
+            height: '1px',
+            bg: 'bg.muted',
+            my: '1',
+            mx: '-1',
+        },
+    },
+    variants: {
+        variant: {
+            subtle: {
+                item: {
+                    _highlighted: {
+                        bg: 'bg.subtle',
+                    },
+                },
+            },
+            solid: {
+                item: {
+                    _highlighted: {
+                        bg: 'colorPalette.solid',
+                        color: 'colorPalette.contrast',
+                    },
+                },
+            },
+        },
+        size: {
+            sm: {
+                content: {
+                    minW: '8rem',
+                    padding: '0.5',
+                },
+                item: {
+                    gap: '1',
+                    textStyle: 'xs',
+                    py: '1',
+                    px: '1.5',
+                },
+                itemGroupLabel: {
+                    textStyle: 'xs',
+                    py: '1',
+                    px: '1.5',
+                },
+            },
+            md: {
+                content: {
+                    minW: '8rem',
+                    padding: '1',
+                },
+                item: {
+                    gap: '2',
+                    textStyle: 'sm',
+                    py: '1.5',
+                    px: '2',
+                },
+                itemGroupLabel: {
+                    textStyle: 'sm',
+                    py: '1.5',
+                    px: '2',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'subtle',
+    },
+});

package/dist/components/native-select/index.d.ts

@@ -0,0 +1,2 @@
+export { NativeSelect } from './native-select';
+export type { NativeSelectProps } from './native-select';

package/dist/components/native-select/index.js

@@ -0,0 +1 @@
+export { NativeSelect } from './native-select';

package/dist/components/native-select/native-select.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { NativeSelect as Select } from '@chakra-ui/react/native-select';
+export interface NativeSelectProps extends Select.RootProps {
+    icon?: React.ReactNode;
+    placeholder?: string;
+}
+export declare const NativeSelect: React.ForwardRefExoticComponent<NativeSelectProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/native-select/native-select.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { NativeSelect as Select } from '@chakra-ui/react/native-select';
+import { ChevronDownIcon } from '../icons';
+export const NativeSelect = React.forwardRef(function NativeSelect(props, ref) {
+    const { icon = _jsx(ChevronDownIcon, {}), placeholder, children, ...rest } = props;
+    return (_jsx(Select.Root, { ref: ref, ...rest, children: _jsxs(Select.Field, { placeholder: placeholder, children: [children, _jsx(Select.Indicator, { children: icon })] }) }));
+});

package/dist/components/native-select/native-select.recipe.d.ts

@@ -0,0 +1,90 @@
+export declare const nativeSelectSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"indicator" | "root" | "field", {
+    variant: {
+        outline: {
+            field: {
+                bg: "transparent";
+                borderWidth: "1px";
+                borderColor: "border";
+                _expanded: {
+                    borderColor: "border.emphasized";
+                };
+            } | undefined;
+        };
+        subtle: {
+            field: {
+                borderWidth: "1px";
+                borderColor: "transparent";
+                bg: "bg.muted";
+            } | undefined;
+        };
+        plain: {
+            field: {
+                bg: "transparent";
+                color: "fg";
+                focusRingWidth: "2px";
+            };
+        };
+    };
+    size: {
+        xs: {
+            field: {
+                textStyle: "xs";
+                ps: "2";
+                pe: "6";
+                height: "6";
+            };
+            indicator: {
+                textStyle: "sm";
+                insetEnd: "1.5";
+            };
+        };
+        sm: {
+            field: {
+                textStyle: "sm";
+                ps: "2.5";
+                pe: "8";
+                height: "8";
+            };
+            indicator: {
+                textStyle: "md";
+                insetEnd: "2";
+            };
+        };
+        md: {
+            field: {
+                textStyle: "sm";
+                ps: "3";
+                pe: "8";
+                height: "10";
+            };
+            indicator: {
+                textStyle: "lg";
+                insetEnd: "2";
+            };
+        };
+        lg: {
+            field: {
+                textStyle: "md";
+                ps: "4";
+                pe: "8";
+                height: "11";
+            };
+            indicator: {
+                textStyle: "xl";
+                insetEnd: "3";
+            };
+        };
+        xl: {
+            field: {
+                textStyle: "md";
+                ps: "4.5";
+                pe: "10";
+                height: "12";
+            };
+            indicator: {
+                textStyle: "xl";
+                insetEnd: "3";
+            };
+        };
+    };
+}>;

package/dist/components/native-select/native-select.recipe.js

@@ -0,0 +1,134 @@
+import { nativeSelectAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+import { selectSlotRecipe } from "../select/select.recipe.js";
+export const nativeSelectSlotRecipe = defineSlotRecipe({
+    className: 'chakra-native-select',
+    slots: nativeSelectAnatomy.keys(),
+    base: {
+        root: {
+            height: 'fit-content',
+            display: 'flex',
+            width: '100%',
+            position: 'relative',
+        },
+        field: {
+            width: '100%',
+            minWidth: '0',
+            outline: '0',
+            appearance: 'none',
+            borderRadius: 'l2',
+            _disabled: {
+                layerStyle: 'disabled',
+            },
+            _invalid: {
+                borderColor: 'border.error',
+            },
+            focusVisibleRing: 'inside',
+            lineHeight: 'normal',
+            '& > option, & > optgroup': {
+                bg: 'inherit',
+            },
+        },
+        indicator: {
+            position: 'absolute',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            top: '50%',
+            transform: 'translateY(-50%)',
+            height: '100%',
+            color: 'fg.muted',
+            _disabled: {
+                opacity: '0.5',
+            },
+            _invalid: {
+                color: 'fg.error',
+            },
+            _icon: {
+                width: '1em',
+                height: '1em',
+            },
+        },
+    },
+    variants: {
+        variant: {
+            outline: {
+                field: selectSlotRecipe.variants?.variant.outline.trigger,
+            },
+            subtle: {
+                field: selectSlotRecipe.variants?.variant.subtle.trigger,
+            },
+            plain: {
+                field: {
+                    bg: 'transparent',
+                    color: 'fg',
+                    focusRingWidth: '2px',
+                },
+            },
+        },
+        size: {
+            xs: {
+                field: {
+                    textStyle: 'xs',
+                    ps: '2',
+                    pe: '6',
+                    height: '6',
+                },
+                indicator: {
+                    textStyle: 'sm',
+                    insetEnd: '1.5',
+                },
+            },
+            sm: {
+                field: {
+                    textStyle: 'sm',
+                    ps: '2.5',
+                    pe: '8',
+                    height: '8',
+                },
+                indicator: {
+                    textStyle: 'md',
+                    insetEnd: '2',
+                },
+            },
+            md: {
+                field: {
+                    textStyle: 'sm',
+                    ps: '3',
+                    pe: '8',
+                    height: '10',
+                },
+                indicator: {
+                    textStyle: 'lg',
+                    insetEnd: '2',
+                },
+            },
+            lg: {
+                field: {
+                    textStyle: 'md',
+                    ps: '4',
+                    pe: '8',
+                    height: '11',
+                },
+                indicator: {
+                    textStyle: 'xl',
+                    insetEnd: '3',
+                },
+            },
+            xl: {
+                field: {
+                    textStyle: 'md',
+                    ps: '4.5',
+                    pe: '10',
+                    height: '12',
+                },
+                indicator: {
+                    textStyle: 'xl',
+                    insetEnd: '3',
+                },
+            },
+        },
+    },
+    defaultVariants: selectSlotRecipe.defaultVariants,
+});

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

@@ -0,0 +1 @@
+export * as Navbar from './navbar.tsx';

package/dist/components/navbar/index.js

@@ -0,0 +1 @@
+export * as Navbar from "./navbar.js";

package/dist/components/navbar/navbar.context.d.ts

@@ -0,0 +1 @@
+export declare const withProvider: <T, P>(Component: React.ElementType<any>, slot: string, options?: import("@chakra-ui/react").WithProviderOptions<P> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P> & import("react").RefAttributes<T>>, withContext: <T, P_1>(Component: React.ElementType<any>, slot?: string | undefined, options?: import("@chakra-ui/react").WithContextOptions<P_1> | undefined) => import("react").ForwardRefExoticComponent<import("react").PropsWithoutRef<P_1> & import("react").RefAttributes<T>>, useNavbarStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>;

package/dist/components/navbar/navbar.context.js

@@ -0,0 +1,4 @@
+import { createSlotRecipeContext } from '@chakra-ui/react';
+export const { withProvider, withContext, useStyles: useNavbarStyles, } = createSlotRecipeContext({
+    key: 'suiNavbar',
+});