@saas-ui/react 3.0.0-next.27 → 3.0.0-next.29

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

@@ -48,7 +48,7 @@ export const actionBarSlotRecipe = defineSlotRecipe({
             textStyle: 'sm',
             px: '4',
             py: '1',
-            borderRadius: 'l2',
+            borderRadius: 'control.md',
             borderWidth: '1px',
             borderStyle: 'dashed',
         },

package/dist/components/app-shell/app-shell.d.ts

@@ -1,7 +1,7 @@
 import { type HTMLChakraProps, type SlotRecipeProps } from '@chakra-ui/react/styled-system';
 declare const useAppShellStyles: () => Record<string, import("@chakra-ui/react").SystemStyleObject>;
 export { useAppShellStyles };
-export interface AppShellProps extends HTMLChakraProps<'div'> {
+export interface AppShellBaseProps {
     /**
      * The top header navigation
      */
@@ -18,12 +18,8 @@ export interface AppShellProps extends HTMLChakraProps<'div'> {
      * The footer
      */
     footer?: React.ReactNode;
-    /**
-     * The main content
-     */
-    children: React.ReactNode;
 }
-export interface AppShellRootProps extends Omit<AppShellProps, 'position'>, SlotRecipeProps<'suiAppShell'> {
+export interface AppShellRootProps extends HTMLChakraProps<'div'>, SlotRecipeProps<'suiAppShell'> {
 }
 /**
  * The App Shell defines the main structure of your app.
@@ -37,4 +33,6 @@ export declare const AppShellContent: import("react").ForwardRefExoticComponent<
 export interface AppShellMainProps extends HTMLChakraProps<'div'> {
 }
 export declare const AppShellMain: import("react").ForwardRefExoticComponent<AppShellMainProps & import("react").RefAttributes<HTMLDivElement>>;
-export declare const AppShell: import("react").ForwardRefExoticComponent<AppShellRootProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AppShellProps extends AppShellBaseProps, HTMLChakraProps<'div'> {
+}
+export declare const AppShell: import("react").ForwardRefExoticComponent<AppShellProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/app-shell/app-shell.recipe.d.ts

@@ -1,11 +1,6 @@
-export declare const appShellSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "main", {
-    position: {
-        static: {
-            root: {
-                height: "100dvh";
-            };
-        };
-        fullscreen: {
+export declare const appShellSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"root" | "content" | "main", {
+    fullscreen: {
+        true: {
             root: {
                 position: "fixed";
                 inset: number;

package/dist/components/app-shell/app-shell.recipe.js

@@ -6,6 +6,7 @@ export const appShellSlotRecipe = defineSlotRecipe({
         root: {
             display: 'flex',
             flexDirection: 'column',
+            height: '100dvh',
         },
         content: {
             display: 'flex',
@@ -21,13 +22,8 @@ export const appShellSlotRecipe = defineSlotRecipe({
         },
     },
     variants: {
-        position: {
-            static: {
-                root: {
-                    height: '100dvh',
-                },
-            },
-            fullscreen: {
+        fullscreen: {
+            true: {
                 root: {
                     position: 'fixed',
                     inset: 0,
@@ -39,7 +35,7 @@ export const appShellSlotRecipe = defineSlotRecipe({
         },
     },
     defaultVariants: {
-        position: 'static',
+        fullscreen: false,
         variant: 'plain',
     },
 });

package/dist/components/breadcrumb/breadcrumb.recipe.js

@@ -13,7 +13,7 @@ export const breadcrumbSlotRecipe = defineSlotRecipe({
         link: {
             outline: '0',
             textDecoration: 'none',
-            borderRadius: 'l1',
+            borderRadius: 'control.sm',
             focusRing: 'outside',
             display: 'inline-flex',
             alignItems: 'center',

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

@@ -67,7 +67,10 @@ export declare const buttonRecipe: import("@chakra-ui/react").RecipeDefinition<{
             bg: "colorPalette.solid";
             color: "colorPalette.contrast";
             '--btn-shadow': "shadows.sm";
-            boxShadow: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+            boxShadow: {
+                base: "0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+                _dark: " 0px 1px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)";
+            };
             textShadow: "0 1px 2px rgba(0,0,0,0.3)";
             overflow: "clip";
             _after: {

package/dist/components/button/button.recipe.js

@@ -97,7 +97,10 @@ export const buttonRecipe = defineRecipe({
                 bg: 'colorPalette.solid',
                 color: 'colorPalette.contrast',
                 '--btn-shadow': 'shadows.sm',
-                boxShadow: '0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+                boxShadow: {
+                    base: '0 0 0 1px rgba(0,0,0,0.25) inset, 0px 2px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+                    _dark: ' 0px 1px 0px 0px rgba(255,255,255,0.2) inset, var(--btn-shadow)',
+                },
                 textShadow: '0 1px 2px rgba(0,0,0,0.3)',
                 overflow: 'clip',
                 _after: {

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

@@ -1,4 +1,4 @@
-export declare const cardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "root" | "title" | "header" | "body" | "footer", {
+export declare const cardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "body" | "root" | "title" | "header" | "footer", {
     size: {
         sm: {
             root: {

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

@@ -1,4 +1,4 @@
-export declare const checkboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "root" | "group" | "indicator" | "control", {
+export declare const checkboxSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"label" | "control" | "indicator" | "root" | "group", {
     size: {
         xs: {
             root: {

package/dist/components/checkbox-card/checkbox-card.recipe.d.ts

@@ -1,4 +1,4 @@
-export declare const checkboxCardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "label" | "root" | "indicator" | "control" | "addon", {
+export declare const checkboxCardSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "label" | "control" | "indicator" | "root" | "addon", {
     size: {
         sm: {
             root: {

package/dist/components/checkbox-card/checkbox-card.recipe.js

@@ -6,11 +6,12 @@ export const checkboxCardSlotRecipe = defineSlotRecipe({
     className: 'chakra-checkbox-card',
     base: {
         root: {
+            colorPalette: 'accent',
             display: 'flex',
             flexDirection: 'column',
             userSelect: 'none',
             position: 'relative',
-            borderRadius: 'l2',
+            borderRadius: 'panel.md',
             flex: '1',
             focusVisibleRing: 'outside',
             _disabled: {
@@ -26,7 +27,7 @@ export const checkboxCardSlotRecipe = defineSlotRecipe({
             display: 'inline-flex',
             flex: '1',
             position: 'relative',
-            borderRadius: 'inherit',
+            borderRadius: 'panel.md',
             justifyContent: 'var(--checkbox-card-justify)',
             alignItems: 'var(--checkbox-card-align)',
         },

package/dist/components/code/code.recipe.js

@@ -7,7 +7,7 @@ export const codeRecipe = defineRecipe({
         fontFamily: 'mono',
         alignItems: 'center',
         display: 'inline-flex',
-        borderRadius: 'l2',
+        borderRadius: 'indicator.md',
     },
     variants,
     defaultVariants,

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

@@ -1 +1 @@
-export declare const collapsibleSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "root" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "root" | "trigger">>;
+export declare const collapsibleSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "indicator" | "root" | "trigger", import("@chakra-ui/react").SlotRecipeVariantRecord<"content" | "indicator" | "root" | "trigger">>;

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

@@ -1,4 +1,4 @@
-export declare const dialogSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"content" | "description" | "backdrop" | "positioner" | "closeTrigger" | "title" | "header" | "body" | "footer" | "trigger", {
+export declare const dialogSlotRecipe: import("@chakra-ui/react").SlotRecipeDefinition<"description" | "content" | "body" | "backdrop" | "positioner" | "closeTrigger" | "title" | "header" | "footer" | "trigger", {
     variant: {
         dialog: {};
         confirm: {

package/dist/components/drawer/drawer.recipe.js

@@ -84,6 +84,11 @@ export const drawerSlotRecipe = defineSlotRecipe({
         description: {
             color: 'fg.muted',
         },
+        closeTrigger: {
+            position: 'absolute',
+            top: '4',
+            right: '4',
+        },
     },
     variants: {
         size: {

package/dist/components/editable/editable.recipe.js

@@ -5,7 +5,7 @@ const sharedStyles = defineStyle({
     fontWeight: 'inherit',
     textAlign: 'inherit',
     bg: 'transparent',
-    borderRadius: 'l2',
+    borderRadius: 'control.md',
 });
 export const editableSlotRecipe = defineSlotRecipe({
     slots: editableAnatomy.keys(),

package/dist/components/kbd/kbd.recipe.js

@@ -11,7 +11,7 @@ export const kbdRecipe = defineRecipe({
         wordSpacing: '-0.5em',
         userSelect: 'none',
         px: '1',
-        borderRadius: 'l2',
+        borderRadius: 'indicator.md',
     },
     variants: {
         variant: {

package/dist/components/link/link.recipe.js

@@ -7,7 +7,7 @@ export const linkRecipe = defineRecipe({
         outline: 'none',
         gap: '1.5',
         cursor: 'pointer',
-        borderRadius: 'l1',
+        borderRadius: 'control.sm',
         focusRing: 'outside',
     },
     variants: {

package/dist/components/menu/menu.js

@@ -1,6 +1,7 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import { Flex } from '@chakra-ui/react';
 import { Menu as ChakraMenu } from '@chakra-ui/react/menu';
 import { Portal } from '@chakra-ui/react/portal';
 import { Button } from "../button/index.js";
@@ -22,7 +23,7 @@ const MenuRadioItem = forwardRef(function MenuRadioItem(props, ref) {
 });
 const MenuItemIndicator = forwardRef(function MenuItemIndicator(props, ref) {
     const { children = _jsx(CheckIcon, {}), ...rest } = props;
-    return (_jsx(ChakraMenu.ItemIndicator, { ref: ref, ...rest, children: children }));
+    return (_jsx(Flex, { alignItems: "center", justifyContent: "center", w: "4", children: _jsx(ChakraMenu.ItemIndicator, { ref: ref, ...rest, children: children }) }));
 });
 const MenuItemGroup = forwardRef(function MenuItemGroup(props, ref) {
     const { title, children, ...rest } = props;

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

@@ -27,6 +27,7 @@ export declare const menuSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
                 textStyle: "xs";
                 py: "1";
                 px: "1.5";
+                ps: "var(--menu-item-inset, {sizes.1.5})";
             };
             itemGroupLabel: {
                 textStyle: "xs";
@@ -44,6 +45,7 @@ export declare const menuSlotRecipe: import("@chakra-ui/react").SlotRecipeDefini
                 textStyle: "sm";
                 py: "1.5";
                 px: "2";
+                ps: "var(--menu-item-inset, {sizes.2})";
             };
             itemGroupLabel: {
                 textStyle: "sm";

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

@@ -97,6 +97,7 @@ export const menuSlotRecipe = defineSlotRecipe({
                     textStyle: 'xs',
                     py: '1',
                     px: '1.5',
+                    ps: 'var(--menu-item-inset, {sizes.1.5})',
                 },
                 itemGroupLabel: {
                     textStyle: 'xs',
@@ -114,6 +115,7 @@ export const menuSlotRecipe = defineSlotRecipe({
                     textStyle: 'sm',
                     py: '1.5',
                     px: '2',
+                    ps: 'var(--menu-item-inset, {sizes.2})',
                 },
                 itemGroupLabel: {
                     textStyle: 'sm',

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

@@ -16,7 +16,7 @@ export const nativeSelectSlotRecipe = defineSlotRecipe({
             minWidth: '0',
             outline: '0',
             appearance: 'none',
-            borderRadius: 'l2',
+            borderRadius: 'control.md',
             _disabled: {
                 layerStyle: 'disabled',
             },