@saas-ui/react 3.0.0-next.3 → 3.0.0-next.30

package/dist/colors.d.ts

@@ -1 +1 @@
-export { colors } from './_tsup-dts-rollup.js';
+export { colors } from './theme/tokens/colors.ts';

package/dist/colors.js

@@ -1,8 +1 @@
-'use client'
-import {
-  colors
-} from "./chunk-QAAKAKP7.js";
-import "./chunk-RTMS5TJN.js";
-export {
-  colors
-};
+export { colors } from "./theme/tokens/colors.js";

package/dist/components/accordion/accordion.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { Accordion } from '@chakra-ui/react/accordion';
+export interface ItemTriggerProps extends Accordion.ItemTriggerProps {
+    indicatorIcon?: React.ReactNode;
+    indicatorPlacement?: 'start' | 'end';
+}
+export declare const ItemTrigger: React.ForwardRefExoticComponent<ItemTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface ItemContentProps extends Accordion.ItemContentProps {
+}
+export declare const ItemContent: React.ForwardRefExoticComponent<ItemContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Root: React.ForwardRefExoticComponent<Accordion.RootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const Item: React.ForwardRefExoticComponent<Accordion.ItemProps & React.RefAttributes<HTMLDivElement>>;
+export type RootProps = Accordion.RootProps;
+export type ItemProps = Accordion.ItemProps;

package/dist/components/accordion/accordion.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Accordion } from '@chakra-ui/react/accordion';
+import { ChevronRightIcon } from "../icons/icons.js";
+export const ItemTrigger = React.forwardRef(function AccordionItemTrigger(props, ref) {
+    const { children, indicatorPlacement = 'end', indicatorIcon = _jsx(ChevronRightIcon, {}), ...rest } = props;
+    const indicator = (_jsx(Accordion.ItemIndicator, { children: indicatorIcon }));
+    return (_jsxs(Accordion.ItemTrigger, { ...rest, ref: ref, children: [indicatorPlacement === 'start' && indicator, children, indicatorPlacement === 'end' && indicator] }));
+});
+export const ItemContent = React.forwardRef(function AccordionItemContent(props, ref) {
+    return (_jsx(Accordion.ItemContent, { children: _jsx(Accordion.ItemBody, { ...props, ref: ref }) }));
+});
+export const Root = Accordion.Root;
+export const Item = Accordion.Item;

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

@@ -0,0 +1,75 @@
+export declare const accordionSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "item" | "itemTrigger" | "itemContent" | "itemIndicator" | "itemBody", {
+    variant: {
+        outline: {
+            item: {
+                borderBottomWidth: "1px";
+            };
+        };
+        subtle: {
+            itemTrigger: {
+                px: "var(--accordion-padding-x)";
+            };
+            itemContent: {
+                px: "var(--accordion-padding-x)";
+            };
+            item: {
+                borderRadius: "var(--accordion-radius)";
+                _open: {
+                    bg: "colorPalette.subtle";
+                };
+            };
+        };
+        enclosed: {
+            root: {
+                borderWidth: "1px";
+                borderRadius: "var(--accordion-radius)";
+                divideY: string;
+                overflow: "hidden";
+            };
+            itemTrigger: {
+                px: "var(--accordion-padding-x)";
+            };
+            itemContent: {
+                px: "var(--accordion-padding-x)";
+            };
+            item: {
+                _open: {
+                    bg: "bg.subtle";
+                };
+            };
+        };
+        plain: {};
+    };
+    size: {
+        sm: {
+            root: {
+                '--accordion-padding-x': "spacing.3";
+                '--accordion-padding-y': "spacing.2";
+            };
+            itemTrigger: {
+                textStyle: "sm";
+                py: "var(--accordion-padding-y)";
+            };
+        };
+        md: {
+            root: {
+                '--accordion-padding-x': "spacing.4";
+                '--accordion-padding-y': "spacing.2";
+            };
+            itemTrigger: {
+                textStyle: "md";
+                py: "var(--accordion-padding-y)";
+            };
+        };
+        lg: {
+            root: {
+                '--accordion-padding-x': "spacing.4.5";
+                '--accordion-padding-y': "spacing.2.5";
+            };
+            itemTrigger: {
+                textStyle: "lg";
+                py: "var(--accordion-padding-y)";
+            };
+        };
+    };
+}>;

package/dist/components/accordion/accordion.recipe.js

@@ -0,0 +1,139 @@
+import { accordionAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const accordionSlotRecipe = defineSlotRecipe({
+    className: 'chakra-accordion',
+    slots: accordionAnatomy.keys(),
+    base: {
+        root: {
+            width: 'full',
+            '--accordion-radius': 'radii.panel.md',
+        },
+        item: {
+            overflowAnchor: 'none',
+        },
+        itemTrigger: {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            width: 'full',
+            outline: '0',
+            gap: '3',
+            fontWeight: 'medium',
+            borderRadius: 'var(--accordion-radius)',
+            _focusVisible: {
+                outline: '2px solid',
+                outlineColor: 'colorPalette.focusRing',
+            },
+            _disabled: {
+                layerStyle: 'disabled',
+            },
+        },
+        itemBody: {
+            pt: 'var(--accordion-padding-y)',
+            pb: 'calc(var(--accordion-padding-y) * 2)',
+        },
+        itemContent: {
+            overflow: 'hidden',
+            borderRadius: 'var(--accordion-radius)',
+            _open: {
+                animationName: 'expand-height, fade-in',
+                animationDuration: 'moderate',
+            },
+            _closed: {
+                animationName: 'collapse-height, fade-out',
+                animationDuration: 'moderate',
+            },
+        },
+        itemIndicator: {
+            transition: 'rotate 0.2s',
+            transformOrigin: 'center',
+            color: 'fg.subtle',
+            _open: {
+                rotate: '90deg',
+            },
+            _icon: {
+                width: '1.2em',
+                height: '1.2em',
+            },
+        },
+    },
+    variants: {
+        variant: {
+            outline: {
+                item: {
+                    borderBottomWidth: '1px',
+                },
+            },
+            subtle: {
+                itemTrigger: {
+                    px: 'var(--accordion-padding-x)',
+                },
+                itemContent: {
+                    px: 'var(--accordion-padding-x)',
+                },
+                item: {
+                    borderRadius: 'var(--accordion-radius)',
+                    _open: {
+                        bg: 'colorPalette.subtle',
+                    },
+                },
+            },
+            enclosed: {
+                root: {
+                    borderWidth: '1px',
+                    borderRadius: 'var(--accordion-radius)',
+                    divideY: '1px',
+                    overflow: 'hidden',
+                },
+                itemTrigger: {
+                    px: 'var(--accordion-padding-x)',
+                },
+                itemContent: {
+                    px: 'var(--accordion-padding-x)',
+                },
+                item: {
+                    _open: {
+                        bg: 'bg.subtle',
+                    },
+                },
+            },
+            plain: {},
+        },
+        size: {
+            sm: {
+                root: {
+                    '--accordion-padding-x': 'spacing.3',
+                    '--accordion-padding-y': 'spacing.2',
+                },
+                itemTrigger: {
+                    textStyle: 'sm',
+                    py: 'var(--accordion-padding-y)',
+                },
+            },
+            md: {
+                root: {
+                    '--accordion-padding-x': 'spacing.4',
+                    '--accordion-padding-y': 'spacing.2',
+                },
+                itemTrigger: {
+                    textStyle: 'md',
+                    py: 'var(--accordion-padding-y)',
+                },
+            },
+            lg: {
+                root: {
+                    '--accordion-padding-x': 'spacing.4.5',
+                    '--accordion-padding-y': 'spacing.2.5',
+                },
+                itemTrigger: {
+                    textStyle: 'lg',
+                    py: 'var(--accordion-padding-y)',
+                },
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        variant: 'outline',
+    },
+});

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

@@ -1 +1 @@
-export { Accordion_alias_1 as Accordion } from '../../_tsup-dts-rollup.js';
+export * as Accordion from './accordion.tsx';

package/dist/components/accordion/index.js

@@ -1,9 +1 @@
-'use client'
-import {
-  accordion_exports
-} from "../../chunk-KB6NR2HZ.js";
-import "../../chunk-OME35FUG.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  accordion_exports as Accordion
-};
+export * as Accordion from "./accordion.js";

package/dist/components/action-bar/action-bar.d.ts

@@ -0,0 +1,16 @@
+import { ActionBar } from '@chakra-ui/react/action-bar';
+interface ActionBarContentProps extends ActionBar.ContentProps {
+    portalled?: boolean;
+    portalRef?: React.RefObject<HTMLElement>;
+}
+export declare const Root: import("react").FC<ActionBar.RootProps>;
+export declare const SelectionTrigger: import("react").ForwardRefExoticComponent<ActionBar.SelectionTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const Separator: import("react").ForwardRefExoticComponent<ActionBar.SeparatorProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Content: import("react").ForwardRefExoticComponent<ActionBarContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CloseButton: import("react").ForwardRefExoticComponent<ActionBar.CloseTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export type RootProps = ActionBar.RootProps;
+export type SelectionTriggerProps = ActionBar.SelectionTriggerProps;
+export type SeparatorProps = ActionBar.SeparatorProps;
+export type ContentProps = ActionBarContentProps;
+export type CloseTriggerProps = ActionBar.CloseTriggerProps;
+export {};

package/dist/components/action-bar/action-bar.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { ActionBar } from '@chakra-ui/react/action-bar';
+import { Portal } from '@chakra-ui/react/portal';
+import { CloseButton as CloseButtonBase } from "../close-button/index.js";
+const ActionBarContent = forwardRef(function ActionBarContent(props, ref) {
+    const { children, portalled = true, portalRef, ...rest } = props;
+    return (_jsx(Portal, { disabled: !portalled, container: portalRef, children: _jsx(ActionBar.Positioner, { children: _jsx(ActionBar.Content, { ref: ref, ...rest, asChild: false, children: children }) }) }));
+});
+const ActionBarCloseButton = forwardRef(function ActionBarCloseTrigger(props, ref) {
+    return (_jsx(ActionBar.CloseTrigger, { ...props, asChild: true, ref: ref, children: _jsx(CloseButtonBase, { size: "sm" }) }));
+});
+export const Root = ActionBar.Root;
+export const SelectionTrigger = ActionBar.SelectionTrigger;
+export const Separator = ActionBar.Separator;
+export const Content = ActionBarContent;
+export const CloseButton = ActionBarCloseButton;

package/dist/components/action-bar/action-bar.recipe.d.ts

@@ -0,0 +1 @@
+export declare const actionBarSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "positioner" | "separator" | "selectionTrigger" | "closeTrigger">>;

package/dist/components/action-bar/action-bar.recipe.js

@@ -0,0 +1,56 @@
+import { actionBarAnatomy } from '@chakra-ui/react/anatomy';
+import { defineSlotRecipe } from '@chakra-ui/react/styled-system';
+export const actionBarSlotRecipe = defineSlotRecipe({
+    className: 'chakra-action-bar',
+    slots: actionBarAnatomy.keys(),
+    base: {
+        positioner: {
+            position: 'fixed',
+            display: 'flex',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            insetInline: '0',
+            top: 'unset',
+            bottom: 'calc(env(safe-area-inset-bottom) + 20px)',
+        },
+        content: {
+            bg: 'bg.panel',
+            shadow: 'md',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '3',
+            borderRadius: 'panel.md',
+            py: '2.5',
+            px: '3',
+            pointerEvents: 'auto',
+            // Stabilize the position of the action bar when the scrollbar is hidden
+            // by using the scrollbar width to offset the position.
+            translate: 'calc(-1 * var(--scrollbar-width) / 2) 0px',
+            _open: {
+                animationName: 'slide-from-bottom, fade-in',
+                animationDuration: 'moderate',
+            },
+            _closed: {
+                animationName: 'slide-to-bottom, fade-out',
+                animationDuration: 'faster',
+            },
+        },
+        separator: {
+            width: '1px',
+            height: '5',
+            bg: 'border',
+        },
+        selectionTrigger: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: '2',
+            alignSelf: 'stretch',
+            textStyle: 'sm',
+            px: '4',
+            py: '1',
+            borderRadius: 'control.md',
+            borderWidth: '1px',
+            borderStyle: 'dashed',
+        },
+    },
+});

package/dist/components/action-bar/index.d.ts

@@ -1 +1 @@
-export { ActionBar_alias_1 as ActionBar } from '../../_tsup-dts-rollup.js';
+export * as ActionBar from './action-bar.tsx';

package/dist/components/action-bar/index.js

@@ -1,13 +1 @@
-'use client'
-import {
-  action_bar_exports
-} from "../../chunk-K7BMQECB.js";
-import "../../chunk-JMYI6YXR.js";
-import "../../chunk-WZUKOJGI.js";
-import "../../chunk-OJZPPAT6.js";
-import "../../chunk-5HVAMQYO.js";
-import "../../chunk-OME35FUG.js";
-import "../../chunk-RTMS5TJN.js";
-export {
-  action_bar_exports as ActionBar
-};
+export * as ActionBar from "./action-bar.js";

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,10 @@
+import { Alert as AlertPrimitive } from '@chakra-ui/react/alert';
+export interface AlertProps extends Omit<AlertPrimitive.RootProps, 'title'> {
+    startElement?: React.ReactNode;
+    endElement?: React.ReactNode;
+    title?: React.ReactNode;
+    icon?: React.ReactElement;
+    closable?: boolean;
+    onClose?: () => void;
+}
+export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/alert/alert.js

@@ -0,0 +1,9 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Alert as AlertPrimitive } from '@chakra-ui/react/alert';
+import { CloseButton } from "../close-button/index.js";
+export const Alert = forwardRef(function Alert(props, ref) {
+    const { title, children, icon, closable, onClose, startElement, endElement, ...rest } = props;
+    return (_jsxs(AlertPrimitive.Root, { ref: ref, ...rest, children: [startElement || (_jsx(AlertPrimitive.Indicator, { children: icon })), children ? (_jsxs(AlertPrimitive.Content, { children: [_jsx(AlertPrimitive.Title, { children: title }), _jsx(AlertPrimitive.Description, { children: children })] })) : (_jsx(AlertPrimitive.Title, { flex: "1", children: title })), endElement, closable && (_jsx(CloseButton, { size: "sm", pos: "relative", top: "-2", insetEnd: "-2", alignSelf: "flex-start", onClick: onClose }))] }));
+});

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

@@ -0,0 +1,120 @@
+export declare const alertSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "indicator" | "root" | "title", {
+    status: {
+        info: {
+            root: {
+                colorPalette: "blue";
+            };
+        };
+        warning: {
+            root: {
+                colorPalette: "orange";
+            };
+        };
+        success: {
+            root: {
+                colorPalette: "green";
+            };
+        };
+        error: {
+            root: {
+                colorPalette: "red";
+            };
+        };
+        neutral: {
+            root: {
+                colorPalette: "gray";
+            };
+        };
+    };
+    inline: {
+        true: {
+            content: {
+                display: "inline-flex";
+                flexDirection: "row";
+                alignItems: "center";
+            };
+        };
+        false: {
+            content: {
+                display: "flex";
+                flexDirection: "column";
+            };
+        };
+    };
+    variant: {
+        subtle: {
+            root: {
+                bg: "colorPalette.subtle";
+                color: "colorPalette.fg";
+            };
+        };
+        surface: {
+            root: {
+                bg: "colorPalette.subtle";
+                color: "colorPalette.fg";
+                shadow: "inset 0 0 0px 1px var(--shadow-color)";
+                shadowColor: "colorPalette.solid";
+            };
+            indicator: {
+                color: "colorPalette.fg";
+            };
+        };
+        outline: {
+            root: {
+                color: "colorPalette.fg";
+                shadow: "inset 0 0 0px 1px var(--shadow-color)";
+                shadowColor: "colorPalette.subtle";
+            };
+            indicator: {
+                color: "colorPalette.fg";
+            };
+        };
+        solid: {
+            root: {
+                bg: "colorPalette.solid";
+                color: "colorPalette.contrast";
+            };
+            indicator: {
+                color: "colorPalette.contrast";
+            };
+        };
+    };
+    size: {
+        sm: {
+            root: {
+                gap: "2";
+                px: "3";
+                py: "3";
+                textStyle: "xs";
+                borderRadius: "panel.sm";
+            };
+            indicator: {
+                textStyle: "lg";
+            };
+        };
+        md: {
+            root: {
+                gap: "3";
+                px: "4";
+                py: "4";
+                textStyle: "sm";
+                borderRadius: "panel.md";
+            };
+            indicator: {
+                textStyle: "xl";
+            };
+        };
+        lg: {
+            root: {
+                gap: "3";
+                px: "4";
+                py: "4";
+                textStyle: "md";
+                borderRadius: "panel.lg";
+            };
+            indicator: {
+                textStyle: "2xl";
+            };
+        };
+    };
+}>;