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

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

@@ -0,0 +1,25 @@
+import type { CollectionItem } from '@chakra-ui/react/collection';
+import { Select as SelectPrimitive } from '@chakra-ui/react/select';
+export interface SelectTriggerProps extends SelectPrimitive.ControlProps {
+    clearable?: boolean;
+}
+export declare const SelectTrigger: import("react").ForwardRefExoticComponent<SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface SelectContentProps extends SelectPrimitive.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+}
+export declare const SelectContent: import("react").ForwardRefExoticComponent<SelectContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectItem: import("react").ForwardRefExoticComponent<SelectPrimitive.ItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface SelectValueTextProps extends Omit<SelectPrimitive.ValueTextProps, 'children'> {
+    children?(items: CollectionItem[]): React.ReactNode;
+}
+export declare const SelectValueText: import("react").ForwardRefExoticComponent<SelectValueTextProps & import("react").RefAttributes<HTMLSpanElement>>;
+export interface SelectRootProps<T> extends SelectPrimitive.RootProps<T> {
+}
+export declare const SelectRoot: <T extends CollectionItem>(props: SelectRootProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement;
+export interface SelectItemGroupProps extends SelectPrimitive.ItemGroupProps {
+    label: React.ReactNode;
+}
+export declare const SelectItemGroup: import("react").ForwardRefExoticComponent<SelectItemGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import("react").ForwardRefExoticComponent<SelectPrimitive.LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
+export declare const SelectItemText: import("react").ForwardRefExoticComponent<SelectPrimitive.ItemTextProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/select/select.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Portal } from '@chakra-ui/react/portal';
+import { Select as SelectPrimitive } from '@chakra-ui/react/select';
+import { CloseButton } from "../close-button/index.js";
+export const SelectTrigger = forwardRef(function SelectTrigger(props, ref) {
+    const { children, clearable, ...rest } = props;
+    return (_jsxs(SelectPrimitive.Control, { ...rest, children: [_jsx(SelectPrimitive.Trigger, { ref: ref, children: children }), _jsxs(SelectPrimitive.IndicatorGroup, { children: [clearable && _jsx(SelectClearTrigger, {}), _jsx(SelectPrimitive.Indicator, {})] })] }));
+});
+const SelectClearTrigger = forwardRef(function SelectClearTrigger(props, ref) {
+    return (_jsx(SelectPrimitive.ClearTrigger, { asChild: true, ...props, ref: ref, children: _jsx(CloseButton, { size: "xs", variant: "plain", focusVisibleRing: "inside", focusRingWidth: "2px", pointerEvents: "auto" }) }));
+});
+export const SelectContent = forwardRef(function SelectContent(props, ref) {
+    const { portalled = true, portalRef, ...rest } = props;
+    return (_jsx(Portal, { disabled: !portalled, container: portalRef, children: _jsx(SelectPrimitive.Positioner, { children: _jsx(SelectPrimitive.Content, { ...rest, ref: ref }) }) }));
+});
+export const SelectItem = forwardRef(function SelectItem(props, ref) {
+    const { item, children, ...rest } = props;
+    return (_jsxs(SelectPrimitive.Item, { item: item, ...rest, ref: ref, children: [children, _jsx(SelectPrimitive.ItemIndicator, {})] }, item.value));
+});
+export const SelectValueText = forwardRef(function SelectValueText(props, ref) {
+    const { children, ...rest } = props;
+    return (_jsx(SelectPrimitive.ValueText, { ...rest, ref: ref, children: _jsx(SelectPrimitive.Context, { children: (select) => {
+                const items = select.selectedItems;
+                if (items.length === 0)
+                    return props.placeholder;
+                if (children)
+                    return children(items);
+                if (items.length === 1)
+                    return select.collection.stringifyItem(items[0]);
+                return `${items.length} selected`;
+            } }) }));
+});
+export const SelectRoot = forwardRef(function SelectRoot(props, ref) {
+    return (_jsx(SelectPrimitive.Root, { ...props, ref: ref, positioning: { sameWidth: true, ...props.positioning } }));
+});
+export const SelectItemGroup = forwardRef(function SelectItemGroup(props, ref) {
+    const { children, label, ...rest } = props;
+    return (_jsxs(SelectPrimitive.ItemGroup, { ...rest, ref: ref, children: [_jsx(SelectPrimitive.ItemGroupLabel, { children: label }), children] }));
+});
+export const SelectLabel = SelectPrimitive.Label;
+export const SelectItemText = SelectPrimitive.ItemText;

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

@@ -0,0 +1,155 @@
+export declare const selectSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "label" | "control" | "indicator" | "root" | "item" | "itemIndicator" | "positioner" | "list" | "trigger" | "itemGroup" | "clearTrigger" | "itemGroupLabel" | "itemText" | "valueText" | "indicatorGroup", {
+    variant: {
+        outline: {
+            trigger: {
+                bg: "transparent";
+                borderWidth: "1px";
+                borderColor: "border";
+                _expanded: {
+                    borderColor: "border.emphasized";
+                };
+            };
+        };
+        subtle: {
+            trigger: {
+                borderWidth: "1px";
+                borderColor: "transparent";
+                bg: "bg.muted";
+            };
+        };
+    };
+    size: {
+        xs: {
+            root: {
+                '--select-trigger-height': "sizes.6";
+                '--select-trigger-padding-x': "spacing.2";
+            };
+            content: {
+                p: "1";
+                gap: "1";
+                textStyle: "xs";
+            };
+            trigger: {
+                borderRadius: "sm";
+                textStyle: "xs";
+                gap: "1";
+            };
+            item: {
+                py: "1";
+                px: "2";
+            };
+            itemGroupLabel: {
+                py: "1";
+                px: "2";
+            };
+            indicator: {
+                _icon: {
+                    width: "3.5";
+                    height: "3.5";
+                };
+            };
+        };
+        sm: {
+            root: {
+                '--select-trigger-height': "sizes.7";
+                '--select-trigger-padding-x': "spacing.2.5";
+            };
+            content: {
+                p: "1";
+                textStyle: "sm";
+            };
+            trigger: {
+                borderRadius: "sm";
+                textStyle: "sm";
+                gap: "1";
+            };
+            indicator: {
+                _icon: {
+                    width: "4";
+                    height: "4";
+                };
+            };
+            item: {
+                py: "1";
+                px: "1.5";
+            };
+            itemGroup: {
+                mt: "1";
+            };
+            itemGroupLabel: {
+                py: "1";
+                px: "1.5";
+            };
+        };
+        md: {
+            root: {
+                '--select-trigger-height': "sizes.8";
+                '--select-trigger-padding-x': "spacing.3";
+            };
+            content: {
+                p: "1";
+                textStyle: "sm";
+            };
+            itemGroup: {
+                mt: "1.5";
+            };
+            item: {
+                py: "1.5";
+                px: "2";
+            };
+            itemIndicator: {
+                display: "flex";
+                alignItems: "center";
+                justifyContent: "center";
+            };
+            itemGroupLabel: {
+                py: "1.5";
+                px: "2";
+            };
+            trigger: {
+                borderRadius: "md";
+                textStyle: "sm";
+                gap: "2";
+            };
+            indicator: {
+                _icon: {
+                    width: "4";
+                    height: "4";
+                };
+            };
+        };
+        lg: {
+            root: {
+                '--select-trigger-height': "sizes.10";
+                '--select-trigger-padding-x': "spacing.4";
+            };
+            content: {
+                p: "1.5";
+                textStyle: "md";
+            };
+            itemGroup: {
+                mt: "2";
+            };
+            item: {
+                py: "2";
+                px: "3";
+            };
+            itemGroupLabel: {
+                py: "2";
+                px: "3";
+            };
+            trigger: {
+                borderRadius: "md";
+                textStyle: "md";
+                py: "3";
+                gap: "2";
+            };
+            indicator: {
+                _icon: {
+                    width: "5";
+                    height: "5";
+                };
+            };
+        };
+    };
+}>;

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

@@ -0,0 +1,284 @@
+import { selectAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const selectSlotRecipe = defineSlotRecipe({
+    className: 'chakra-select',
+    slots: selectAnatomy.keys(),
+    base: {
+        root: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1.5',
+            width: 'full',
+        },
+        trigger: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: 'full',
+            minH: 'var(--select-trigger-height)',
+            px: 'var(--select-trigger-padding-x)',
+            userSelect: 'none',
+            textAlign: 'start',
+            focusVisibleRing: 'inside',
+            focusRingWidth: 0,
+            _placeholderShown: {
+                color: 'fg.muted',
+            },
+            _disabled: {
+                layerStyle: 'disabled',
+            },
+            _invalid: {
+                borderColor: 'border.error',
+            },
+            _hover: {
+                borderColor: 'border.emphasized',
+                _focusVisible: {
+                    borderColor: 'var(--focus-ring-color)',
+                },
+            },
+        },
+        indicatorGroup: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: '1',
+            pos: 'absolute',
+            right: '0',
+            top: '0',
+            bottom: '0',
+            px: 'var(--select-trigger-padding-x)',
+            pointerEvents: 'none',
+        },
+        indicator: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: { base: 'fg.muted', _disabled: 'fg.subtle', _invalid: 'fg.error' },
+        },
+        content: {
+            background: 'bg.panel',
+            display: 'flex',
+            flexDirection: 'column',
+            zIndex: 'dropdown',
+            borderRadius: 'l2',
+            outline: 0,
+            maxH: '96',
+            overflowY: 'auto',
+            boxShadow: 'md',
+            _open: {
+                animationStyle: 'slide-fade-in',
+                animationDuration: 'fast',
+            },
+            _closed: {
+                animationStyle: 'slide-fade-out',
+                animationDuration: 'fastest',
+            },
+        },
+        item: {
+            position: 'relative',
+            userSelect: 'none',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '2',
+            cursor: 'option',
+            justifyContent: 'space-between',
+            flex: '1',
+            textAlign: 'start',
+            borderRadius: 'l1',
+            _highlighted: {
+                bg: 'bg.subtle',
+            },
+            _disabled: {
+                pointerEvents: 'none',
+                opacity: '0.5',
+            },
+            _icon: {
+                width: '4',
+                height: '4',
+            },
+        },
+        control: {
+            pos: 'relative',
+        },
+        itemText: {
+            flex: '1',
+        },
+        itemGroup: {
+            _first: { mt: '0' },
+        },
+        itemGroupLabel: {
+            py: '1',
+            fontWeight: 'medium',
+        },
+        label: {
+            fontWeight: 'medium',
+            userSelect: 'none',
+            textStyle: 'sm',
+            _disabled: {
+                layerStyle: 'disabled',
+            },
+        },
+        valueText: {
+            lineClamp: '1',
+            maxW: '80%',
+        },
+    },
+    variants: {
+        variant: {
+            outline: {
+                trigger: {
+                    bg: 'transparent',
+                    borderWidth: '1px',
+                    borderColor: 'border',
+                    _expanded: {
+                        borderColor: 'border.emphasized',
+                    },
+                },
+            },
+            subtle: {
+                trigger: {
+                    borderWidth: '1px',
+                    borderColor: 'transparent',
+                    bg: 'bg.muted',
+                },
+            },
+        },
+        size: {
+            xs: {
+                root: {
+                    '--select-trigger-height': 'sizes.6',
+                    '--select-trigger-padding-x': 'spacing.2',
+                },
+                content: {
+                    p: '1',
+                    gap: '1',
+                    textStyle: 'xs',
+                },
+                trigger: {
+                    borderRadius: 'sm',
+                    textStyle: 'xs',
+                    gap: '1',
+                },
+                item: {
+                    py: '1',
+                    px: '2',
+                },
+                itemGroupLabel: {
+                    py: '1',
+                    px: '2',
+                },
+                indicator: {
+                    _icon: {
+                        width: '3.5',
+                        height: '3.5',
+                    },
+                },
+            },
+            sm: {
+                root: {
+                    '--select-trigger-height': 'sizes.7',
+                    '--select-trigger-padding-x': 'spacing.2.5',
+                },
+                content: {
+                    p: '1',
+                    textStyle: 'sm',
+                },
+                trigger: {
+                    borderRadius: 'sm',
+                    textStyle: 'sm',
+                    gap: '1',
+                },
+                indicator: {
+                    _icon: {
+                        width: '4',
+                        height: '4',
+                    },
+                },
+                item: {
+                    py: '1',
+                    px: '1.5',
+                },
+                itemGroup: {
+                    mt: '1',
+                },
+                itemGroupLabel: {
+                    py: '1',
+                    px: '1.5',
+                },
+            },
+            md: {
+                root: {
+                    '--select-trigger-height': 'sizes.8',
+                    '--select-trigger-padding-x': 'spacing.3',
+                },
+                content: {
+                    p: '1',
+                    textStyle: 'sm',
+                },
+                itemGroup: {
+                    mt: '1.5',
+                },
+                item: {
+                    py: '1.5',
+                    px: '2',
+                },
+                itemIndicator: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+                itemGroupLabel: {
+                    py: '1.5',
+                    px: '2',
+                },
+                trigger: {
+                    borderRadius: 'md',
+                    textStyle: 'sm',
+                    gap: '2',
+                },
+                indicator: {
+                    _icon: {
+                        width: '4',
+                        height: '4',
+                    },
+                },
+            },
+            lg: {
+                root: {
+                    '--select-trigger-height': 'sizes.10',
+                    '--select-trigger-padding-x': 'spacing.4',
+                },
+                content: {
+                    p: '1.5',
+                    textStyle: 'md',
+                },
+                itemGroup: {
+                    mt: '2',
+                },
+                item: {
+                    py: '2',
+                    px: '3',
+                },
+                itemGroupLabel: {
+                    py: '2',
+                    px: '3',
+                },
+                trigger: {
+                    borderRadius: 'md',
+                    textStyle: 'md',
+                    py: '3',
+                    gap: '2',
+                },
+                indicator: {
+                    _icon: {
+                        width: '5',
+                        height: '5',
+                    },
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});

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

@@ -0,0 +1,2 @@
+export { Separator } from '@chakra-ui/react/separator';
+export type { SeparatorProps } from '@chakra-ui/react/separator';

package/dist/components/separator/index.js

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

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

@@ -0,0 +1,37 @@
+export declare const separatorRecipe: import("@chakra-ui/react").RecipeDefinition<{
+    variant: {
+        solid: {
+            borderStyle: "solid";
+        };
+        dashed: {
+            borderStyle: "dashed";
+        };
+        dotted: {
+            borderStyle: "dotted";
+        };
+    };
+    orientation: {
+        vertical: {
+            height: "100%";
+            borderInlineStartWidth: "var(--separator-thickness)";
+        };
+        horizontal: {
+            width: "100%";
+            borderTopWidth: "var(--separator-thickness)";
+        };
+    };
+    size: {
+        xs: {
+            '--separator-thickness': "0.5px";
+        };
+        sm: {
+            '--separator-thickness': "1px";
+        };
+        md: {
+            '--separator-thickness': "2px";
+        };
+        lg: {
+            '--separator-thickness': "3px";
+        };
+    };
+}>;

package/dist/components/separator/separator.recipe.js

@@ -0,0 +1,50 @@
+import { defineRecipe } from '@chakra-ui/react/styled-system';
+export const separatorRecipe = defineRecipe({
+    className: 'chakra-separator',
+    base: {
+        display: 'block',
+        borderColor: 'border',
+    },
+    variants: {
+        variant: {
+            solid: {
+                borderStyle: 'solid',
+            },
+            dashed: {
+                borderStyle: 'dashed',
+            },
+            dotted: {
+                borderStyle: 'dotted',
+            },
+        },
+        orientation: {
+            vertical: {
+                height: '100%',
+                borderInlineStartWidth: 'var(--separator-thickness)',
+            },
+            horizontal: {
+                width: '100%',
+                borderTopWidth: 'var(--separator-thickness)',
+            },
+        },
+        size: {
+            xs: {
+                '--separator-thickness': '0.5px',
+            },
+            sm: {
+                '--separator-thickness': '1px',
+            },
+            md: {
+                '--separator-thickness': '2px',
+            },
+            lg: {
+                '--separator-thickness': '3px',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'sm',
+        variant: 'solid',
+        orientation: 'horizontal',
+    },
+});

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

@@ -0,0 +1 @@
+export { Show, type ShowProps, } from '@chakra-ui/react/show';

package/dist/components/show/index.js

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

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

@@ -0,0 +1,3 @@
+export * as Sidebar from './sidebar.tsx';
+export { useSidebarStyles, useSidebarItemStyles } from './sidebar.context.ts';
+export { useSidebar } from '@saas-ui/core/sidebar';

package/dist/components/sidebar/index.js

@@ -0,0 +1,3 @@
+export * as Sidebar from "./sidebar.js";
+export { useSidebarStyles, useSidebarItemStyles } from "./sidebar.context.js";
+export { useSidebar } from '@saas-ui/core/sidebar';

package/dist/components/sidebar/sidebar-nav-item.recipe.d.ts

@@ -0,0 +1,62 @@
+export declare const sidebarNavItemSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"button" | "item" | "endElement", {
+    variant: {
+        muted: {
+            button: {
+                bg: "transparent";
+                color: "sidebar.accent.fg/85";
+                '--sidebar-item-icon-color': "sidebar.accent.fg/85";
+                _hover: {
+                    bg: "sidebar.accent.bg/90";
+                    color: "sidebar.accent.fg";
+                    '--sidebar-item-icon-color': "sidebar.accent.fg";
+                };
+                _active: {
+                    bg: "sidebar.accent.bg";
+                    color: "sidebar.accent.fg";
+                    '--sidebar-item-icon-color': "sidebar.accent.fg";
+                };
+            };
+        };
+    };
+    size: {
+        sm: {
+            item: {
+                textStyle: "sm";
+            };
+            button: {
+                borderRadius: "control.md";
+                px: number;
+                height: number;
+            };
+            endElement: {
+                pe: "1";
+            };
+        };
+        md: {
+            item: {
+                textStyle: "sm";
+            };
+            button: {
+                borderRadius: "control.md";
+                px: number;
+                height: number;
+            };
+            endElement: {
+                pe: "1";
+            };
+        };
+        lg: {
+            item: {
+                textStyle: "sm";
+            };
+            button: {
+                borderRadius: "control.lg";
+                px: number;
+                height: number;
+            };
+            endElement: {
+                pe: "1";
+            };
+        };
+    };
+}>;