@saas-ui/react 3.0.0-alpha.17 → 3.0.0-alpha.18

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.18
+
+### Minor Changes
+
+- eb02362: Improved GridList recipe
+
+### Patch Changes
+
+- e7fe684: Export Pagination Context component
+- eb02362: Add missing PaginationPageTextProps export
+- Updated dependencies [eb02362]
+  - @saas-ui/core@3.0.0-alpha.5
+
 ## 3.0.0-alpha.17
 
 ### Minor Changes

package/dist/{chunk-5ILYOY27.js → chunk-MLJN6IOJ.js}

@@ -11,6 +11,7 @@ import {
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
+  Context: () => Context,
   Ellipsis: () => Ellipsis,
   Item: () => Item,
   Items: () => Items,
@@ -67,7 +68,6 @@ var PrevButton = forwardRef(function PaginationPrevTrigger(props, ref) {
 var NextButton = forwardRef(function PaginationNextTrigger(props, ref) {
   var _a;
   const { size, variantMap: variantMap2 } = useRootProps();
-  const { nextPage } = usePaginationContext();
   return /* @__PURE__ */ jsx(ChakraPagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ jsx(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ jsx(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
@@ -89,6 +89,7 @@ var PageText = forwardRef(
 );
 var PrevTrigger = ChakraPagination.PrevTrigger;
 var NextTrigger = ChakraPagination.NextTrigger;
+var Context = ChakraPagination.Context;
 
 export {
   pagination_exports

package/dist/components/grid-list/index.d.cts

@@ -2,13 +2,13 @@ import * as react from 'react';
 import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
 
-interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+interface GridListRootProps extends GridList.RootProps, HTMLChakraProps<'div'>, SlotRecipeProps<'suiGridList'> {
 }
-declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface GridListItemProps extends HTMLChakraProps<'div'> {
+declare const GridListRoot: react.ForwardRefExoticComponent<GridList.RootProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends GridList.ItemProps, HTMLChakraProps<'div'> {
 }
 declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
-interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+interface GridListHeaderProps extends GridList.HeaderProps, HTMLChakraProps<'header'> {
 }
 declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
 interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {

package/dist/components/grid-list/index.d.ts

@@ -2,13 +2,13 @@ import * as react from 'react';
 import { HTMLChakraProps, SlotRecipeProps } from '@chakra-ui/react';
 import { GridList } from '@saas-ui/core/grid-list';
 
-interface GridListRootProps extends GridList.RootProps, Omit<HTMLChakraProps<'div'>, 'children'>, SlotRecipeProps<'suiGridList'> {
+interface GridListRootProps extends GridList.RootProps, HTMLChakraProps<'div'>, SlotRecipeProps<'suiGridList'> {
 }
-declare const GridListRoot: react.ForwardRefExoticComponent<Omit<GridList.RootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-interface GridListItemProps extends HTMLChakraProps<'div'> {
+declare const GridListRoot: react.ForwardRefExoticComponent<GridList.RootProps & react.RefAttributes<HTMLDivElement>>;
+interface GridListItemProps extends GridList.ItemProps, HTMLChakraProps<'div'> {
 }
 declare const GridListItem: react.ForwardRefExoticComponent<GridListItemProps & react.RefAttributes<HTMLDivElement>>;
-interface GridListHeaderProps extends HTMLChakraProps<'header'> {
+interface GridListHeaderProps extends GridList.HeaderProps, HTMLChakraProps<'header'> {
 }
 declare const GridListHeader: react.ForwardRefExoticComponent<GridListHeaderProps & react.RefAttributes<HTMLDivElement>>;
 interface GridListCellProps extends GridList.CellProps, HTMLChakraProps<'div'> {

package/dist/components/pagination/index.cjs

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(pagination_exports2);
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
+  Context: () => Context,
   Ellipsis: () => Ellipsis,
   Item: () => Item,
   Items: () => Items,
@@ -186,7 +187,6 @@ var PrevButton = (0, import_react2.forwardRef)(function PaginationPrevTrigger(pr
 var NextButton = (0, import_react2.forwardRef)(function PaginationNextTrigger(props, ref) {
   var _a;
   const { size, variantMap: variantMap2 } = useRootProps();
-  const { nextPage } = (0, import_react3.usePaginationContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
@@ -208,6 +208,7 @@ var PageText = (0, import_react2.forwardRef)(
 );
 var PrevTrigger = import_react3.Pagination.PrevTrigger;
 var NextTrigger = import_react3.Pagination.NextTrigger;
+var Context = import_react3.Pagination.Context;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Pagination

package/dist/components/pagination/index.d.cts

@@ -1,3 +1,4 @@
+import * as _ark_ui_react from '@ark-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { Pagination, ButtonProps, TextProps } from '@chakra-ui/react';
@@ -19,19 +20,22 @@ interface PageTextProps extends TextProps {
 declare const PageText: react.ForwardRefExoticComponent<PageTextProps & react.RefAttributes<HTMLParagraphElement>>;
 declare const PrevTrigger: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const NextTrigger: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Context: (props: _ark_ui_react.PaginationContextProps) => react.ReactNode;
 
+declare const pagination_Context: typeof Context;
 declare const pagination_Ellipsis: typeof Ellipsis;
 declare const pagination_Item: typeof Item;
 declare const pagination_Items: typeof Items;
 declare const pagination_NextButton: typeof NextButton;
 declare const pagination_NextTrigger: typeof NextTrigger;
 declare const pagination_PageText: typeof PageText;
+type pagination_PageTextProps = PageTextProps;
 declare const pagination_PrevButton: typeof PrevButton;
 declare const pagination_PrevTrigger: typeof PrevTrigger;
 declare const pagination_Root: typeof Root;
 type pagination_RootProps = RootProps;
 declare namespace pagination {
-  export { pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
+  export { pagination_Context as Context, pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, type pagination_PageTextProps as PageTextProps, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
 }
 
 export { pagination as Pagination };

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

@@ -1,3 +1,4 @@
+import * as _ark_ui_react from '@ark-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { Pagination, ButtonProps, TextProps } from '@chakra-ui/react';
@@ -19,19 +20,22 @@ interface PageTextProps extends TextProps {
 declare const PageText: react.ForwardRefExoticComponent<PageTextProps & react.RefAttributes<HTMLParagraphElement>>;
 declare const PrevTrigger: react.ForwardRefExoticComponent<Pagination.PrevTriggerProps & react.RefAttributes<HTMLButtonElement>>;
 declare const NextTrigger: react.ForwardRefExoticComponent<Pagination.NextTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const Context: (props: _ark_ui_react.PaginationContextProps) => react.ReactNode;
 
+declare const pagination_Context: typeof Context;
 declare const pagination_Ellipsis: typeof Ellipsis;
 declare const pagination_Item: typeof Item;
 declare const pagination_Items: typeof Items;
 declare const pagination_NextButton: typeof NextButton;
 declare const pagination_NextTrigger: typeof NextTrigger;
 declare const pagination_PageText: typeof PageText;
+type pagination_PageTextProps = PageTextProps;
 declare const pagination_PrevButton: typeof PrevButton;
 declare const pagination_PrevTrigger: typeof PrevTrigger;
 declare const pagination_Root: typeof Root;
 type pagination_RootProps = RootProps;
 declare namespace pagination {
-  export { pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
+  export { pagination_Context as Context, pagination_Ellipsis as Ellipsis, pagination_Item as Item, pagination_Items as Items, pagination_NextButton as NextButton, pagination_NextTrigger as NextTrigger, pagination_PageText as PageText, type pagination_PageTextProps as PageTextProps, pagination_PrevButton as PrevButton, pagination_PrevTrigger as PrevTrigger, pagination_Root as Root, type pagination_RootProps as RootProps };
 }
 
 export { pagination as Pagination };

package/dist/components/pagination/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   pagination_exports
-} from "../../chunk-5ILYOY27.js";
+} from "../../chunk-MLJN6IOJ.js";
 import "../../chunk-4TPVIHNO.js";
 import "../../chunk-RTMS5TJN.js";
 export {

package/dist/index.cjs

@@ -2270,7 +2270,7 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
     position: {
       static: {
         root: {
-          height: "100vh"
+          height: "100dvh"
         }
       },
       fullscreen: {
@@ -2281,18 +2281,12 @@ var appShellSlotRecipe = (0, import_react28.defineSlotRecipe)({
       }
     },
     variant: {
-      plain: {},
-      raised: {
-        main: {
-          boxShadow: "xs",
-          zIndex: "layer-1"
-        }
-      }
+      plain: {}
     }
   },
   defaultVariants: {
     position: "static",
-    variant: "raised"
+    variant: "plain"
   }
 });
 
@@ -2303,7 +2297,6 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
   slots: ["root", "item", "header", "cell"],
   base: {
     root: {
-      py: 2,
       position: "relative"
     },
     item: {
@@ -2312,35 +2305,14 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
       alignItems: "center",
       justifyContent: "space-between",
       flex: 1,
-      cursor: "pointer",
       userSelect: "none",
-      transitionProperty: "common",
-      transitionDuration: "normal",
       borderRadius: "inherit",
       outline: "none",
-      _hover: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
       _focusVisible: {
         boxShadow: "outline"
       },
-      _focus: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
-      _active: {
-        bg: "blackAlpha.100",
-        _dark: {
-          bg: "whiteAlpha.100"
-        }
-      },
       _disabled: {
-        cursor: "inherit",
+        cursor: "disabled",
         opacity: 0.5,
         _hover: {
           bg: "transparent",
@@ -2362,50 +2334,92 @@ var gridListSlotRecipe = (0, import_react29.defineSlotRecipe)({
       position: "sticky",
       fontSize: "md",
       fontWeight: "semibold",
-      color: "muted"
+      color: "fg.muted"
     },
     cell: {
-      display: "flex",
       flexShrink: 0
     }
   },
   variants: {
+    interactive: {
+      true: {
+        item: {
+          cursor: "button",
+          transitionProperty: "bg",
+          transitionDuration: "fast",
+          _hover: {
+            bg: "bg.subtle"
+          },
+          _active: {
+            bg: "bg.subtle"
+          }
+        }
+      }
+    },
+    variant: {
+      simple: {},
+      rounded: {
+        item: {
+          borderRadius: "md",
+          mb: 0.5
+        }
+      }
+    },
     size: {
       sm: {
         root: {
-          fontSize: "sm"
+          textStyle: "sm",
+          py: 0.5
         },
         item: {
           py: 1,
-          px: 1
+          px: 2,
+          gap: 1
         },
         header: {
           py: 1,
-          px: 1
-        },
-        cell: {
-          px: 1
+          px: 2
         }
       },
       md: {
         root: {
-          fontSize: "md"
+          textStyle: "md",
+          py: 1
         },
         item: {
           py: 2,
-          px: 2
+          px: 3,
+          gap: 2
         },
         header: {
           py: 2,
-          px: 2
-        },
-        cell: {
-          px: 2
+          px: 3
         }
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "rounded",
+      size: "sm",
+      css: {
+        root: {
+          p: 1
+        }
+      }
+    },
+    {
+      variant: "rounded",
+      size: "md",
+      css: {
+        root: {
+          p: 2
+        }
+      }
+    }
+  ],
   defaultVariants: {
+    variant: "simple",
     size: "md"
   }
 });
@@ -2488,7 +2502,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
       top: 0,
       insetX: 0,
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       transitionTimingFunction: "ease-in-out",
       _hidden: {
         transform: "translateY(-100%)"
@@ -2524,7 +2538,7 @@ var navbarSlotRecipe = (0, import_react31.defineSlotRecipe)({
       boxSizing: "border-box",
       borderRadius: "md",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       lineHeight: 1,
       _focusVisible: {
         outline: "none",
@@ -4570,7 +4584,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
       display: "inline-flex",
       alignItems: "center",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       cursor: "text",
       _hover: {
         bg: "bg.muted"
@@ -4585,7 +4599,7 @@ var editableSlotRecipe = (0, import_react48.defineSlotRecipe)({
       py: "1",
       px: "1",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       width: "full",
       focusVisibleRing: "inside",
       focusRingWidth: "2px",
@@ -9718,6 +9732,7 @@ var MenuTrigger = import_react136.Menu.Trigger;
 // src/components/pagination/pagination.tsx
 var pagination_exports = {};
 __export(pagination_exports, {
+  Context: () => Context,
   Ellipsis: () => Ellipsis,
   Item: () => Item,
   Items: () => Items,
@@ -9767,7 +9782,6 @@ var PrevButton = (0, import_react137.forwardRef)(function PaginationPrevTrigger(
 var NextButton = (0, import_react137.forwardRef)(function PaginationNextTrigger(props, ref) {
   var _a7;
   const { size, variantMap: variantMap2 } = useRootProps();
-  const { nextPage } = (0, import_react138.usePaginationContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react138.IconButton, { variant: variantMap2.default, size, children: (_a7 = props.children) != null ? _a7 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
@@ -9789,6 +9803,7 @@ var PageText = (0, import_react137.forwardRef)(
 );
 var PrevTrigger = import_react138.Pagination.PrevTrigger;
 var NextTrigger = import_react138.Pagination.NextTrigger;
+var Context = import_react138.Pagination.Context;
 
 // src/components/password-input/password-input.tsx
 var import_react141 = require("react");

package/dist/index.js

@@ -1,33 +1,29 @@
+import {
+  Tooltip
+} from "./chunk-QSNSWCTM.js";
 import {
   Toaster,
   toast
 } from "./chunk-HELHPHIQ.js";
-import {
-  Tooltip
-} from "./chunk-QSNSWCTM.js";
 import {
   colors
 } from "./chunk-3MO37LYW.js";
 import {
-  SearchInput
-} from "./chunk-46ISJZBS.js";
+  Radio,
+  RadioGroup
+} from "./chunk-WYLMBMAH.js";
 import {
   SegmentedControl
 } from "./chunk-SKXSBAOS.js";
+import {
+  SearchInput
+} from "./chunk-46ISJZBS.js";
 import {
   namespace_exports as namespace_exports3
 } from "./chunk-BU7QENBQ.js";
-import {
-  Persona,
-  PersonaAvatar,
-  defaultPresenceOptions
-} from "./chunk-4VH4IGVF.js";
 import {
   steps_exports
 } from "./chunk-VZG7EJ64.js";
-import {
-  Switch
-} from "./chunk-SA3OGTOO.js";
 import {
   sidebar_exports,
   useSidebar,
@@ -35,12 +31,8 @@ import {
   useSidebarStyles
 } from "./chunk-GGAKUS66.js";
 import {
-  loading_overlay_exports,
-  useLoadingOverlayStyles
-} from "./chunk-7VSTNV2B.js";
-import {
-  Spinner
-} from "./chunk-32JGENDB.js";
+  Switch
+} from "./chunk-SA3OGTOO.js";
 import {
   menu_exports
 } from "./chunk-C7B3ELC4.js";
@@ -51,33 +43,41 @@ import {
   NumberInput
 } from "./chunk-ULAJ3JEO.js";
 import {
-  pagination_exports
-} from "./chunk-5ILYOY27.js";
+  loading_overlay_exports,
+  useLoadingOverlayStyles
+} from "./chunk-7VSTNV2B.js";
+import {
+  Spinner
+} from "./chunk-32JGENDB.js";
 import {
   PasswordInput
 } from "./chunk-CD2JUFI2.js";
 import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
+  pagination_exports
+} from "./chunk-MLJN6IOJ.js";
 import {
-  Radio,
-  RadioGroup
-} from "./chunk-WYLMBMAH.js";
+  Persona,
+  PersonaAvatar,
+  defaultPresenceOptions
+} from "./chunk-4VH4IGVF.js";
 import {
-  namespace_exports
-} from "./chunk-72LEGXHY.js";
+  PinInput
+} from "./chunk-2EUACKRH.js";
 import {
   namespace_exports as namespace_exports2
 } from "./chunk-WS5XGFSL.js";
 import {
   EmptyState
 } from "./chunk-FJFNGSPL.js";
+import {
+  grid_list_exports
+} from "./chunk-NSD5HRIP.js";
 import {
   IconBadge
 } from "./chunk-I2RXEKTB.js";
 import {
-  grid_list_exports
-} from "./chunk-NSD5HRIP.js";
+  namespace_exports
+} from "./chunk-72LEGXHY.js";
 import "./chunk-KTLWEUNW.js";
 import {
   InputGroup
@@ -2305,7 +2305,7 @@ var appShellSlotRecipe = defineSlotRecipe({
     position: {
       static: {
         root: {
-          height: "100vh"
+          height: "100dvh"
         }
       },
       fullscreen: {
@@ -2316,18 +2316,12 @@ var appShellSlotRecipe = defineSlotRecipe({
       }
     },
     variant: {
-      plain: {},
-      raised: {
-        main: {
-          boxShadow: "xs",
-          zIndex: "layer-1"
-        }
-      }
+      plain: {}
     }
   },
   defaultVariants: {
     position: "static",
-    variant: "raised"
+    variant: "plain"
   }
 });
 
@@ -2338,7 +2332,6 @@ var gridListSlotRecipe = defineSlotRecipe2({
   slots: ["root", "item", "header", "cell"],
   base: {
     root: {
-      py: 2,
       position: "relative"
     },
     item: {
@@ -2347,35 +2340,14 @@ var gridListSlotRecipe = defineSlotRecipe2({
       alignItems: "center",
       justifyContent: "space-between",
       flex: 1,
-      cursor: "pointer",
       userSelect: "none",
-      transitionProperty: "common",
-      transitionDuration: "normal",
       borderRadius: "inherit",
       outline: "none",
-      _hover: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
       _focusVisible: {
         boxShadow: "outline"
       },
-      _focus: {
-        bg: "blackAlpha.50",
-        _dark: {
-          bg: "whiteAlpha.50"
-        }
-      },
-      _active: {
-        bg: "blackAlpha.100",
-        _dark: {
-          bg: "whiteAlpha.100"
-        }
-      },
       _disabled: {
-        cursor: "inherit",
+        cursor: "disabled",
         opacity: 0.5,
         _hover: {
           bg: "transparent",
@@ -2397,50 +2369,92 @@ var gridListSlotRecipe = defineSlotRecipe2({
       position: "sticky",
       fontSize: "md",
       fontWeight: "semibold",
-      color: "muted"
+      color: "fg.muted"
     },
     cell: {
-      display: "flex",
       flexShrink: 0
     }
   },
   variants: {
+    interactive: {
+      true: {
+        item: {
+          cursor: "button",
+          transitionProperty: "bg",
+          transitionDuration: "fast",
+          _hover: {
+            bg: "bg.subtle"
+          },
+          _active: {
+            bg: "bg.subtle"
+          }
+        }
+      }
+    },
+    variant: {
+      simple: {},
+      rounded: {
+        item: {
+          borderRadius: "md",
+          mb: 0.5
+        }
+      }
+    },
     size: {
       sm: {
         root: {
-          fontSize: "sm"
+          textStyle: "sm",
+          py: 0.5
         },
         item: {
           py: 1,
-          px: 1
+          px: 2,
+          gap: 1
         },
         header: {
           py: 1,
-          px: 1
-        },
-        cell: {
-          px: 1
+          px: 2
         }
       },
       md: {
         root: {
-          fontSize: "md"
+          textStyle: "md",
+          py: 1
         },
         item: {
           py: 2,
-          px: 2
+          px: 3,
+          gap: 2
         },
         header: {
           py: 2,
-          px: 2
-        },
-        cell: {
-          px: 2
+          px: 3
         }
       }
     }
   },
+  compoundVariants: [
+    {
+      variant: "rounded",
+      size: "sm",
+      css: {
+        root: {
+          p: 1
+        }
+      }
+    },
+    {
+      variant: "rounded",
+      size: "md",
+      css: {
+        root: {
+          p: 2
+        }
+      }
+    }
+  ],
   defaultVariants: {
+    variant: "simple",
     size: "md"
   }
 });
@@ -2523,7 +2537,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
       top: 0,
       insetX: 0,
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       transitionTimingFunction: "ease-in-out",
       _hidden: {
         transform: "translateY(-100%)"
@@ -2559,7 +2573,7 @@ var navbarSlotRecipe = defineSlotRecipe4({
       boxSizing: "border-box",
       borderRadius: "md",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       lineHeight: 1,
       _focusVisible: {
         outline: "none",
@@ -4608,7 +4622,7 @@ var editableSlotRecipe = defineSlotRecipe21({
       display: "inline-flex",
       alignItems: "center",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       cursor: "text",
       _hover: {
         bg: "bg.muted"
@@ -4623,7 +4637,7 @@ var editableSlotRecipe = defineSlotRecipe21({
       py: "1",
       px: "1",
       transitionProperty: "common",
-      transitionDuration: "normal",
+      transitionDuration: "moderate",
       width: "full",
       focusVisibleRing: "inside",
       focusRingWidth: "2px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-alpha.17",
+  "version": "3.0.0-alpha.18",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -70,7 +70,7 @@
   },
   "dependencies": {
     "@ark-ui/react": "^4.4.4",
-    "@saas-ui/core": "3.0.0-alpha.4",
+    "@saas-ui/core": "3.0.0-alpha.5",
     "@saas-ui/hooks": "3.0.0-alpha.4"
   },
   "peerDependencies": {