@saas-ui/react 3.0.0-next.14 → 3.0.0-next.16

package/dist/preset.cjs

@@ -5368,16 +5368,116 @@ var numberInputSlotRecipe = (0, import_styled_system45.defineSlotRecipe)({
   }
 });
 
-// src/components/persona/persona.recipe.ts
+// src/components/page/page.recipe.ts
 var import_styled_system46 = require("@chakra-ui/react/styled-system");
-var baseStyleLabel = (0, import_styled_system46.defineStyle)({
+var slots = [
+  "root",
+  "header",
+  "headerContent",
+  "heading",
+  "headerFooter",
+  "title",
+  "description",
+  "body"
+];
+var pageSlotRecipe = (0, import_styled_system46.defineSlotRecipe)({
+  className: "sui-page",
+  slots,
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      flex: 1,
+      minH: 0
+    },
+    title: {
+      fontWeight: "medium",
+      fontSize: "sm"
+    },
+    description: {
+      color: "fg.muted",
+      fontSize: "xs"
+    },
+    body: {
+      flex: 1,
+      overflowY: "auto",
+      p: 4
+    }
+  },
+  variants: {
+    variant: {
+      panel: {
+        root: {
+          "--page-bg-color": "colors.bg.muted",
+          bg: "color-mix(in srgb, var(--page-bg-color) 50%, white)",
+          zIndex: 1
+        },
+        header: {
+          "--page-header-row-height": "40px",
+          display: "grid",
+          gridTemplateAreas: `"nav heading actions"
+               "footer footer footer"`,
+          gridTemplateColumns: "auto max-content 1fr",
+          gridTemplateRows: "minmax(var(--page-header-row-height), auto)",
+          columnGap: 2,
+          alignItems: "center",
+          justifyContent: "stretch",
+          flexShrink: 0,
+          px: 3,
+          borderBottomWidth: "1px"
+        },
+        title: {
+          me: 4
+        }
+      },
+      settings: {
+        root: {
+          overflowY: "auto",
+          px: 4
+        },
+        header: {
+          flexDirection: "row",
+          alignItems: "center",
+          mb: {
+            base: 4,
+            lg: 8
+          },
+          minH: 24
+        },
+        heading: {
+          py: {
+            base: 4,
+            lg: 8
+          }
+        },
+        title: {
+          textStyle: "2xl"
+        },
+        description: {
+          textStyle: "md"
+        },
+        body: {
+          overflow: "visible",
+          p: 0
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "panel"
+  }
+});
+
+// src/components/persona/persona.recipe.ts
+var import_styled_system47 = require("@chakra-ui/react/styled-system");
+var baseStyleLabel = (0, import_styled_system47.defineStyle)({
   overflow: "hidden",
   whiteSpace: "nowrap",
   textOverflow: "ellipsis",
   minW: 0,
   color: "fg"
 });
-var personaSlotRecipe = (0, import_styled_system46.defineSlotRecipe)({
+var personaSlotRecipe = (0, import_styled_system47.defineSlotRecipe)({
   className: "sui-persona",
   slots: [
     "root",
@@ -5478,9 +5578,9 @@ var personaSlotRecipe = (0, import_styled_system46.defineSlotRecipe)({
 
 // src/components/pin-input/pin-input.recipe.ts
 var import_anatomy24 = require("@chakra-ui/react/anatomy");
-var import_styled_system47 = require("@chakra-ui/react/styled-system");
+var import_styled_system48 = require("@chakra-ui/react/styled-system");
 var { variants: variants2, defaultVariants: defaultVariants2 } = inputRecipe;
-var pinInputSlotRecipe = (0, import_styled_system47.defineSlotRecipe)({
+var pinInputSlotRecipe = (0, import_styled_system48.defineSlotRecipe)({
   className: "chakra-pin-input",
   slots: import_anatomy24.pinInputAnatomy.keys(),
   base: {
@@ -5510,8 +5610,8 @@ var pinInputSlotRecipe = (0, import_styled_system47.defineSlotRecipe)({
 
 // src/components/popover/popover.recipe.ts
 var import_anatomy25 = require("@chakra-ui/react/anatomy");
-var import_styled_system48 = require("@chakra-ui/react/styled-system");
-var popoverSlotRecipe = (0, import_styled_system48.defineSlotRecipe)({
+var import_styled_system49 = require("@chakra-ui/react/styled-system");
+var popoverSlotRecipe = (0, import_styled_system49.defineSlotRecipe)({
   className: "chakra-popover",
   slots: import_anatomy25.popoverAnatomy.keys(),
   base: {
@@ -5597,8 +5697,8 @@ var popoverSlotRecipe = (0, import_styled_system48.defineSlotRecipe)({
 
 // src/components/progress-circle/progress-circle.recipe.ts
 var import_anatomy26 = require("@chakra-ui/react/anatomy");
-var import_styled_system49 = require("@chakra-ui/react/styled-system");
-var progressCircleSlotRecipe = (0, import_styled_system49.defineSlotRecipe)({
+var import_styled_system50 = require("@chakra-ui/react/styled-system");
+var progressCircleSlotRecipe = (0, import_styled_system50.defineSlotRecipe)({
   className: "chakra-progress-circle",
   slots: import_anatomy26.progressAnatomy.keys(),
   base: {
@@ -5690,8 +5790,8 @@ var progressCircleSlotRecipe = (0, import_styled_system49.defineSlotRecipe)({
 
 // src/components/progress/progress.recipe.ts
 var import_anatomy27 = require("@chakra-ui/react/anatomy");
-var import_styled_system50 = require("@chakra-ui/react/styled-system");
-var progressSlotRecipe = (0, import_styled_system50.defineSlotRecipe)({
+var import_styled_system51 = require("@chakra-ui/react/styled-system");
+var progressSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
   slots: import_anatomy27.progressAnatomy.keys(),
   className: "chakra-progress",
   base: {
@@ -5812,8 +5912,8 @@ var progressSlotRecipe = (0, import_styled_system50.defineSlotRecipe)({
 
 // src/components/radio-card/radio-card.recipe.ts
 var import_anatomy28 = require("@chakra-ui/react/anatomy");
-var import_styled_system51 = require("@chakra-ui/react/styled-system");
-var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
+var import_styled_system52 = require("@chakra-ui/react/styled-system");
+var radioCardSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
   className: "chakra-radio-card",
   slots: import_anatomy28.radioCardAnatomy.keys(),
   base: {
@@ -6022,8 +6122,8 @@ var radioCardSlotRecipe = (0, import_styled_system51.defineSlotRecipe)({
 
 // src/components/radio-group/radio-group.recipe.ts
 var import_anatomy29 = require("@chakra-ui/react/anatomy");
-var import_styled_system52 = require("@chakra-ui/react/styled-system");
-var radioGroupSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
+var import_styled_system53 = require("@chakra-ui/react/styled-system");
+var radioGroupSlotRecipe = (0, import_styled_system53.defineSlotRecipe)({
   className: "chakra-radio-group",
   slots: import_anatomy29.radioGroupAnatomy.keys(),
   base: {
@@ -6084,8 +6184,8 @@ var radioGroupSlotRecipe = (0, import_styled_system52.defineSlotRecipe)({
 
 // src/components/rating-group/rating-group.recipe.ts
 var import_anatomy30 = require("@chakra-ui/react/anatomy");
-var import_styled_system53 = require("@chakra-ui/react/styled-system");
-var ratingGroupSlotRecipe = (0, import_styled_system53.defineSlotRecipe)({
+var import_styled_system54 = require("@chakra-ui/react/styled-system");
+var ratingGroupSlotRecipe = (0, import_styled_system54.defineSlotRecipe)({
   className: "chakra-rating-group",
   slots: import_anatomy30.ratingGroupAnatomy.keys(),
   base: {
@@ -6167,10 +6267,75 @@ var ratingGroupSlotRecipe = (0, import_styled_system53.defineSlotRecipe)({
   }
 });
 
+// src/components/section/section.recipe.ts
+var import_styled_system55 = require("@chakra-ui/react/styled-system");
+var slots2 = ["root", "header", "title", "description", "body"];
+var sectionSlotRecipe = (0, import_styled_system55.defineSlotRecipe)({
+  className: "sui-section",
+  slots: slots2,
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column"
+    },
+    header: {
+      flexShrink: 0,
+      mb: 4
+    },
+    title: {
+      textStyle: "heading",
+      fontWeight: "semibold",
+      lineHeight: "110%",
+      letterSpacing: "-1%",
+      mb: 1
+    },
+    description: {
+      color: "fg.muted",
+      fontSize: "md",
+      "& a": {
+        fontWeight: "medium",
+        color: "fg"
+      }
+    },
+    body: {
+      flex: 1,
+      minWidth: 0
+    }
+  },
+  variants: {
+    variant: {
+      annotated: {
+        root: {
+          flexDirection: {
+            base: "column",
+            md: "row"
+          },
+          mt: 4
+        },
+        header: {
+          width: {
+            base: "full",
+            md: "30%"
+          },
+          mb: {
+            base: 4,
+            md: 0
+          },
+          pe: {
+            base: 4,
+            md: 8
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {}
+});
+
 // src/components/segmented-control/segment-group.recipe.ts
 var import_anatomy31 = require("@chakra-ui/react/anatomy");
-var import_styled_system54 = require("@chakra-ui/react/styled-system");
-var segmentGroupSlotRecipe = (0, import_styled_system54.defineSlotRecipe)({
+var import_styled_system56 = require("@chakra-ui/react/styled-system");
+var segmentGroupSlotRecipe = (0, import_styled_system56.defineSlotRecipe)({
   className: "chakra-segment-group",
   slots: import_anatomy31.segmentGroupAnatomy.keys(),
   base: {
@@ -6409,8 +6574,8 @@ var sidebarNavItemSlotRecipe = (0, import_react10.defineSlotRecipe)({
 });
 
 // src/components/sidebar/sidebar.recipe.ts
-var import_styled_system55 = require("@chakra-ui/react/styled-system");
-var sidebarSlotRecipe = (0, import_styled_system55.defineSlotRecipe)({
+var import_styled_system57 = require("@chakra-ui/react/styled-system");
+var sidebarSlotRecipe = (0, import_styled_system57.defineSlotRecipe)({
   className: "sui-sidebar",
   slots: [
     "root",
@@ -6648,8 +6813,8 @@ var sidebarSlotRecipe = (0, import_styled_system55.defineSlotRecipe)({
 
 // src/components/slider/slider.recipe.ts
 var import_anatomy32 = require("@chakra-ui/react/anatomy");
-var import_styled_system56 = require("@chakra-ui/react/styled-system");
-var sliderSlotRecipe = (0, import_styled_system56.defineSlotRecipe)({
+var import_styled_system58 = require("@chakra-ui/react/styled-system");
+var sliderSlotRecipe = (0, import_styled_system58.defineSlotRecipe)({
   className: "chakra-slider",
   slots: import_anatomy32.sliderAnatomy.keys(),
   base: {
@@ -6825,8 +6990,8 @@ var sliderSlotRecipe = (0, import_styled_system56.defineSlotRecipe)({
 
 // src/components/stat/stat.recipe.ts
 var import_anatomy33 = require("@chakra-ui/react/anatomy");
-var import_styled_system57 = require("@chakra-ui/react/styled-system");
-var statSlotRecipe = (0, import_styled_system57.defineSlotRecipe)({
+var import_styled_system59 = require("@chakra-ui/react/styled-system");
+var statSlotRecipe = (0, import_styled_system59.defineSlotRecipe)({
   className: "chakra-stat",
   slots: import_anatomy33.statAnatomy.keys(),
   base: {
@@ -6903,8 +7068,8 @@ var statSlotRecipe = (0, import_styled_system57.defineSlotRecipe)({
 
 // src/components/status/status.recipe.ts
 var import_anatomy34 = require("@chakra-ui/react/anatomy");
-var import_styled_system58 = require("@chakra-ui/react/styled-system");
-var statusSlotRecipe = (0, import_styled_system58.defineSlotRecipe)({
+var import_styled_system60 = require("@chakra-ui/react/styled-system");
+var statusSlotRecipe = (0, import_styled_system60.defineSlotRecipe)({
   className: "chakra-status",
   slots: import_anatomy34.statusAnatomy.keys(),
   base: {
@@ -6949,8 +7114,8 @@ var statusSlotRecipe = (0, import_styled_system58.defineSlotRecipe)({
 
 // src/components/steps/steps.recipe.ts
 var import_anatomy35 = require("@chakra-ui/react/anatomy");
-var import_styled_system59 = require("@chakra-ui/react/styled-system");
-var stepsSlotRecipe = (0, import_styled_system59.defineSlotRecipe)({
+var import_styled_system61 = require("@chakra-ui/react/styled-system");
+var stepsSlotRecipe = (0, import_styled_system61.defineSlotRecipe)({
   className: "chakra-steps",
   slots: import_anatomy35.stepsAnatomy.keys(),
   base: {
@@ -7164,8 +7329,8 @@ var stepsSlotRecipe = (0, import_styled_system59.defineSlotRecipe)({
 
 // src/components/switch/switch.recipe.ts
 var import_anatomy36 = require("@chakra-ui/react/anatomy");
-var import_styled_system60 = require("@chakra-ui/react/styled-system");
-var switchSlotRecipe = (0, import_styled_system60.defineSlotRecipe)({
+var import_styled_system62 = require("@chakra-ui/react/styled-system");
+var switchSlotRecipe = (0, import_styled_system62.defineSlotRecipe)({
   slots: import_anatomy36.switchAnatomy.keys(),
   className: "chakra-switch",
   base: {
@@ -7322,8 +7487,8 @@ var switchSlotRecipe = (0, import_styled_system60.defineSlotRecipe)({
 
 // src/components/table/table.recipe.ts
 var import_anatomy37 = require("@chakra-ui/react/anatomy");
-var import_styled_system61 = require("@chakra-ui/react/styled-system");
-var tableSlotRecipe = (0, import_styled_system61.defineSlotRecipe)({
+var import_styled_system63 = require("@chakra-ui/react/styled-system");
+var tableSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
   className: "chakra-table",
   slots: import_anatomy37.tableAnatomy.keys(),
   base: {
@@ -7485,8 +7650,8 @@ var tableSlotRecipe = (0, import_styled_system61.defineSlotRecipe)({
 
 // src/components/tabs/tabs.recipe.ts
 var import_anatomy38 = require("@chakra-ui/react/anatomy");
-var import_styled_system62 = require("@chakra-ui/react/styled-system");
-var tabsSlotRecipe = (0, import_styled_system62.defineSlotRecipe)({
+var import_styled_system64 = require("@chakra-ui/react/styled-system");
+var tabsSlotRecipe = (0, import_styled_system64.defineSlotRecipe)({
   slots: import_anatomy38.tabsAnatomy.keys(),
   className: "chakra-tabs",
   base: {
@@ -7799,9 +7964,9 @@ var tabsSlotRecipe = (0, import_styled_system62.defineSlotRecipe)({
 
 // src/components/tag/tag.recipe.ts
 var import_anatomy39 = require("@chakra-ui/react/anatomy");
-var import_styled_system63 = require("@chakra-ui/react/styled-system");
+var import_styled_system65 = require("@chakra-ui/react/styled-system");
 var badgeVariant = badgeRecipe.variants?.variant;
-var tagSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
+var tagSlotRecipe = (0, import_styled_system65.defineSlotRecipe)({
   slots: import_anatomy39.tagAnatomy.keys(),
   className: "chakra-tag",
   base: {
@@ -7954,8 +8119,8 @@ var tagSlotRecipe = (0, import_styled_system63.defineSlotRecipe)({
 
 // src/components/timeline/timeline.recipe.ts
 var import_anatomy40 = require("@chakra-ui/react/anatomy");
-var import_styled_system64 = require("@chakra-ui/react/styled-system");
-var timelineSlotRecipe = (0, import_styled_system64.defineSlotRecipe)({
+var import_styled_system66 = require("@chakra-ui/react/styled-system");
+var timelineSlotRecipe = (0, import_styled_system66.defineSlotRecipe)({
   slots: import_anatomy40.timelineAnatomy.keys(),
   className: "chakra-timeline",
   base: {
@@ -8090,8 +8255,8 @@ var timelineSlotRecipe = (0, import_styled_system64.defineSlotRecipe)({
 
 // src/components/toaster/toast.recipe.ts
 var import_anatomy41 = require("@chakra-ui/react/anatomy");
-var import_styled_system65 = require("@chakra-ui/react/styled-system");
-var toastSlotRecipe = (0, import_styled_system65.defineSlotRecipe)({
+var import_styled_system67 = require("@chakra-ui/react/styled-system");
+var toastSlotRecipe = (0, import_styled_system67.defineSlotRecipe)({
   slots: import_anatomy41.toastAnatomy.keys(),
   className: "chakra-toast",
   base: {
@@ -8182,8 +8347,8 @@ var toastSlotRecipe = (0, import_styled_system65.defineSlotRecipe)({
 
 // src/components/tooltip/tooltip.recipe.ts
 var import_anatomy42 = require("@chakra-ui/react/anatomy");
-var import_styled_system66 = require("@chakra-ui/react/styled-system");
-var tooltipSlotRecipe = (0, import_styled_system66.defineSlotRecipe)({
+var import_styled_system68 = require("@chakra-ui/react/styled-system");
+var tooltipSlotRecipe = (0, import_styled_system68.defineSlotRecipe)({
   slots: import_anatomy42.tooltipAnatomy.keys(),
   className: "chakra-tooltip",
   base: {
@@ -8286,7 +8451,9 @@ var slotRecipes = {
   suiGridList: gridListSlotRecipe,
   suiNavbar: navbarSlotRecipe,
   suiSidebar: sidebarSlotRecipe,
-  suiSidebarNavItem: sidebarNavItemSlotRecipe
+  suiSidebarNavItem: sidebarNavItemSlotRecipe,
+  suiPage: pageSlotRecipe,
+  suiSection: sectionSlotRecipe
 };
 
 // src/theme/text-styles.ts

package/dist/preset.js

@@ -2,7 +2,7 @@
 import {
   defaultConfig,
   defaultSystem
-} from "./chunk-RBG43JK2.js";
+} from "./chunk-LFITUDGB.js";
 import "./chunk-QAAKAKP7.js";
 import "./chunk-RTMS5TJN.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-next.14",
+  "version": "3.0.0-next.16",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {
@@ -82,8 +82,8 @@
   },
   "dependencies": {
     "@ark-ui/react": "^5.2.0",
-    "@saas-ui/core": "3.0.0-next.2",
-    "@saas-ui/hooks": "3.0.0-next.0"
+    "@saas-ui/core": "3.0.0-next.3",
+    "@saas-ui/hooks": "3.0.0-next.1"
   },
   "peerDependencies": {
     "@chakra-ui/react": "^3.13.0",

package/dist/{chunk-OWFY465Z.js → chunk-QITSWCWX.js}

@@ -1,10 +1,10 @@
 'use client'
-import {
-  Portal
-} from "./chunk-UZUMIWPJ.js";
 import {
   popover_exports
 } from "./chunk-FVUEAELO.js";
+import {
+  Portal
+} from "./chunk-UZUMIWPJ.js";
 
 // src/components/toggle-tip/toggle-tip.tsx
 import * as React from "react";