@saas-ui/react 3.0.0-alpha.10 → 3.0.0-alpha.12

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.12
+
+### Patch Changes
+
+- 61ce1b5: Fixed sidebar item end element positioning
+
+## 3.0.0-alpha.11
+
+### Patch Changes
+
+- 19309d4: Improved Sidebar recipe with beter balance and added --sidebar-item-icon-color variable
+- 19309d4: Improved font size balance
+
 ## 3.0.0-alpha.10
 
 ### Patch Changes

package/dist/index.cjs

@@ -554,6 +554,7 @@ var import_react6 = require("@chakra-ui/react");
 var commandRecipe = (0, import_react6.defineRecipe)({
   className: "sui-command",
   base: {
+    colorPalette: "gray",
     display: "inline-flex",
     gap: 1,
     "[role=tooltip] > &": {
@@ -2656,7 +2657,9 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
   slots: ["item", "button", "endElement"],
   base: {
     item: {
-      position: "relative"
+      position: "relative",
+      fontSize: "sm",
+      py: "1px"
     },
     button: {
       display: "flex",
@@ -2672,7 +2675,8 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
       transitionDuration: "fast",
       focusVisibleRing: "outside",
       "& > svg": {
-        boxSize: 4
+        boxSize: 4,
+        color: "var(--sidebar-item-icon-color)"
       },
       '&:has([data-slot="endElement"])': {
         pe: 0
@@ -2680,7 +2684,8 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
     },
     endElement: {
       display: "flex",
-      gap: "1px"
+      gap: "1px",
+      ms: "auto"
     }
   },
   variants: {
@@ -2689,13 +2694,16 @@ var sidebarNavItemSlotRecipe = (0, import_react33.defineSlotRecipe)({
         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"
+            color: "sidebar.accent.fg",
+            "--sidebar-item-icon-color": "sidebar.accent.fg"
           },
           _active: {
             bg: "sidebar.accent.bg",
-            color: "sidebar.accent.fg"
+            color: "sidebar.accent.fg",
+            "--sidebar-item-icon-color": "sidebar.accent.fg"
           }
         }
       }
@@ -2825,9 +2833,9 @@ var sidebarSlotRecipe = (0, import_react34.defineSlotRecipe)({
       }
     },
     groupContent: {
+      pt: 1,
       display: "flex",
-      flexDirection: "column",
-      gap: "1"
+      flexDirection: "column"
     },
     track: {
       display: "flex",
@@ -8437,8 +8445,8 @@ var easings = import_react85.defineTokens.easings({
 // src/theme/tokens/font-sizes.ts
 var import_react86 = require("@chakra-ui/react");
 var fontSizes = import_react86.defineTokens.fontSizes({
-  "2xs": { value: scaleToken("0.65rem") },
-  xs: { value: scaleToken("0.725rem") },
+  "2xs": { value: scaleToken("0.75rem") },
+  xs: { value: scaleToken("0.8125rem") },
   sm: { value: scaleToken("0.875rem") },
   md: { value: scaleToken("1rem") },
   lg: { value: scaleToken("1.125rem") },

package/dist/index.js

@@ -1,24 +1,19 @@
 import {
-  Tooltip
-} from "./chunk-QSNSWCTM.js";
+  Toaster,
+  toast
+} from "./chunk-HELHPHIQ.js";
 import {
   colors
 } from "./chunk-3MO37LYW.js";
-import {
-  SegmentedControl
-} from "./chunk-SKXSBAOS.js";
 import {
   SearchInput
 } from "./chunk-LIYUBUOP.js";
+import {
+  SegmentedControl
+} from "./chunk-SKXSBAOS.js";
 import {
   namespace_exports as namespace_exports3
 } from "./chunk-S3CQW7GD.js";
-import {
-  sidebar_exports,
-  useSidebar,
-  useSidebarItemStyles,
-  useSidebarStyles
-} from "./chunk-GGAKUS66.js";
 import {
   steps_exports
 } from "./chunk-6LOMIKR5.js";
@@ -26,9 +21,14 @@ import {
   Switch
 } from "./chunk-SA3OGTOO.js";
 import {
-  Toaster,
-  toast
-} from "./chunk-HELHPHIQ.js";
+  sidebar_exports,
+  useSidebar,
+  useSidebarItemStyles,
+  useSidebarStyles
+} from "./chunk-GGAKUS66.js";
+import {
+  Tooltip
+} from "./chunk-QSNSWCTM.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -36,12 +36,12 @@ import {
 import {
   Spinner
 } from "./chunk-32JGENDB.js";
-import {
-  menu_exports
-} from "./chunk-JGHXJ3PI.js";
 import {
   navbar_exports
 } from "./chunk-Q6SNJJO2.js";
+import {
+  menu_exports
+} from "./chunk-JGHXJ3PI.js";
 import {
   NumberInput
 } from "./chunk-ULAJ3JEO.js";
@@ -98,12 +98,12 @@ import {
 import {
   breadcrumb_exports
 } from "./chunk-TT4C5VXB.js";
-import {
-  Checkbox
-} from "./chunk-L356FPLY.js";
 import {
   Button
 } from "./chunk-BCNPBZZK.js";
+import {
+  Checkbox
+} from "./chunk-L356FPLY.js";
 import {
   CloseButton
 } from "./chunk-FZW2DYK3.js";
@@ -587,6 +587,7 @@ import { defineRecipe as defineRecipe2 } from "@chakra-ui/react";
 var commandRecipe = defineRecipe2({
   className: "sui-command",
   base: {
+    colorPalette: "gray",
     display: "inline-flex",
     gap: 1,
     "[role=tooltip] > &": {
@@ -2589,7 +2590,10 @@ var navbarSlotRecipe = defineSlotRecipe4({
 });
 
 // src/components/persona/persona.recipe.ts
-import { defineSlotRecipe as defineSlotRecipe5, defineStyle } from "@chakra-ui/react";
+import {
+  defineSlotRecipe as defineSlotRecipe5,
+  defineStyle
+} from "@chakra-ui/react";
 var baseStyleLabel = defineStyle({
   overflow: "hidden",
   whiteSpace: "nowrap",
@@ -2689,7 +2693,9 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
   slots: ["item", "button", "endElement"],
   base: {
     item: {
-      position: "relative"
+      position: "relative",
+      fontSize: "sm",
+      py: "1px"
     },
     button: {
       display: "flex",
@@ -2705,7 +2711,8 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
       transitionDuration: "fast",
       focusVisibleRing: "outside",
       "& > svg": {
-        boxSize: 4
+        boxSize: 4,
+        color: "var(--sidebar-item-icon-color)"
       },
       '&:has([data-slot="endElement"])': {
         pe: 0
@@ -2713,7 +2720,8 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
     },
     endElement: {
       display: "flex",
-      gap: "1px"
+      gap: "1px",
+      ms: "auto"
     }
   },
   variants: {
@@ -2722,13 +2730,16 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe6({
         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"
+            color: "sidebar.accent.fg",
+            "--sidebar-item-icon-color": "sidebar.accent.fg"
           },
           _active: {
             bg: "sidebar.accent.bg",
-            color: "sidebar.accent.fg"
+            color: "sidebar.accent.fg",
+            "--sidebar-item-icon-color": "sidebar.accent.fg"
           }
         }
       }
@@ -2858,9 +2869,9 @@ var sidebarSlotRecipe = defineSlotRecipe7({
       }
     },
     groupContent: {
+      pt: 1,
       display: "flex",
-      flexDirection: "column",
-      gap: "1"
+      flexDirection: "column"
     },
     track: {
       display: "flex",
@@ -8149,8 +8160,8 @@ var easings = defineTokens7.easings({
 // src/theme/tokens/font-sizes.ts
 import { defineTokens as defineTokens8 } from "@chakra-ui/react";
 var fontSizes = defineTokens8.fontSizes({
-  "2xs": { value: scaleToken("0.65rem") },
-  xs: { value: scaleToken("0.725rem") },
+  "2xs": { value: scaleToken("0.75rem") },
+  xs: { value: scaleToken("0.8125rem") },
   sm: { value: scaleToken("0.875rem") },
   md: { value: scaleToken("1rem") },
   lg: { value: scaleToken("1.125rem") },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saas-ui/react",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "description": "Saas UI - The React component library for startups.",
   "type": "module",
   "exports": {