@saas-ui/react 3.0.0-alpha.25 → 3.0.0-alpha.26

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.26
+
+### Patch Changes
+
+- c51e12c: Improved radii tokens
+
 ## 3.0.0-alpha.25
 
 ### Minor Changes

package/dist/index.cjs

@@ -220,10 +220,10 @@ var globalCss = (0, import_react3.defineGlobalStyles)({
     "--global-font-body": "fonts.body",
     "--global-color-border": "colors.border",
     "--cursor-button": "default",
-    "--radius-factor": "1",
-    "--radius-control": "1",
-    "--radius-panel": "1",
-    "--radius-indicator": "1",
+    // '--radius-factor': '1',
+    // '--radius-control': '1',
+    // '--radius-panel': '1',
+    // '--radius-indicator': '1',
     "--radius-full": "9999px",
     "--scale-factor": "1",
     "--overlay-translucency": "90%",
@@ -477,7 +477,7 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         h: "6",
         minW: "6",
         textStyle: "xs",
-        borderRadius: "sm",
+        borderRadius: "control.sm",
         px: "2"
       },
       sm: {
@@ -485,14 +485,14 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         h: "7",
         minW: "7",
         textStyle: "sm",
-        borderRadius: "md",
+        borderRadius: "control.md",
         px: "2.5"
       },
       md: {
         gap: "2",
         h: "8",
         minW: "8",
-        borderRadius: "md",
+        borderRadius: "control.md",
         textStyle: "sm",
         px: "3"
       },
@@ -500,7 +500,7 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         gap: "3",
         h: "10",
         minW: "10",
-        borderRadius: "lg",
+        borderRadius: "control.lg",
         textStyle: "md",
         px: "4.5"
       },
@@ -508,7 +508,7 @@ var buttonRecipe = (0, import_react6.defineRecipe)({
         gap: "3",
         h: "12",
         minW: "12",
-        borderRadius: "lg",
+        borderRadius: "control.lg",
         textStyle: "lg",
         px: "6"
       }
@@ -2230,35 +2230,35 @@ var semanticRadii = import_react26.defineSemanticTokens.radii({
   l3: { value: "{radii.md}" },
   control: {
     sm: {
-      value: "calc({radii.xs} * var(--scale-factor) * var(--radius-control))"
+      value: "calc({radii.xs} * var(--scale-factor, 1) * var(--radius-control, 1))"
     },
     md: {
-      value: "calc({radii.sm} * var(--scale-factor) * var(--radius-control))"
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-control, 1))"
     },
     lg: {
-      value: "calc({radii.md} * var(--scale-factor) * var(--radius-control))"
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-control, 1))"
     }
   },
   panel: {
     sm: {
-      value: "calc({radii.sm} * var(--scale-factor) * var(--radius-panel))"
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-panel, 1))"
     },
     md: {
-      value: "calc({radii.md} * var(--scale-factor) * var(--radius-panel))"
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-panel, 1  ))"
     },
     lg: {
-      value: "calc({radii.lg} * var(--scale-factor) * var(--radius-panel))"
+      value: "calc({radii.lg} * var(--scale-factor, 1) * var(--radius-panel, 1))"
     }
   },
   indicator: {
     sm: {
-      value: "calc({radii.xs} * var(--scale-factor) * var(--radius-indicator))"
+      value: "calc({radii.xs} * var(--scale-factor, 1) * var(--radius-indicator, 1))"
     },
     md: {
-      value: "calc({radii.sm} * var(--scale-factor) * var(--radius-indicator))"
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-indicator, 1  ))"
     },
     lg: {
-      value: "calc({radii.md} * var(--scale-factor) * var(--radius-indicator))"
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-indicator, 1))"
     }
   }
 });
@@ -4029,18 +4029,44 @@ var sidebarNavItemSlotRecipe = (0, import_react42.defineSlotRecipe)({
       }
     },
     size: {
+      sm: {
+        item: {
+          fontSize: "sm"
+        },
+        button: {
+          borderRadius: "control.md",
+          px: 1.5,
+          height: 7
+        },
+        endElement: {
+          pe: "1"
+        }
+      },
       md: {
         item: {
           fontSize: "sm"
         },
         button: {
-          borderRadius: "md",
-          px: 2,
+          borderRadius: "control.md",
+          px: 3,
           height: 8
         },
         endElement: {
           pe: "1"
         }
+      },
+      lg: {
+        item: {
+          fontSize: "sm"
+        },
+        button: {
+          borderRadius: "control.lg",
+          px: 3,
+          height: 10
+        },
+        endElement: {
+          pe: "1"
+        }
       }
     }
   },

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
-  Status
-} from "./chunk-YKSY7UOM.js";
+  Tag
+} from "./chunk-IEWHAXXU.js";
 import {
   Toaster,
   toast
@@ -17,15 +17,18 @@ import {
 import {
   SegmentedControl
 } from "./chunk-SKXSBAOS.js";
+import {
+  Status
+} from "./chunk-YKSY7UOM.js";
+import {
+  steps_exports
+} from "./chunk-VZG7EJ64.js";
 import {
   sidebar_exports,
   useSidebar,
   useSidebarItemStyles,
   useSidebarStyles
 } from "./chunk-U23VDAWJ.js";
-import {
-  steps_exports
-} from "./chunk-VZG7EJ64.js";
 import {
   Switch
 } from "./chunk-SA3OGTOO.js";
@@ -35,14 +38,8 @@ import {
   useTabsStyles
 } from "./chunk-IVLUAUU5.js";
 import {
-  Tag
-} from "./chunk-IEWHAXXU.js";
-import {
-  NumberInput
-} from "./chunk-S5J6REMC.js";
-import {
-  pagination_exports
-} from "./chunk-MLJN6IOJ.js";
+  navbar_exports
+} from "./chunk-Q6SNJJO2.js";
 import {
   PasswordInput
 } from "./chunk-K2SPPLAY.js";
@@ -51,31 +48,38 @@ import {
   PersonaAvatar,
   defaultPresenceOptions
 } from "./chunk-GWC5GCMW.js";
-import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
 import {
   popover_exports
 } from "./chunk-KE5AC3TZ.js";
+import {
+  PinInput
+} from "./chunk-2EUACKRH.js";
 import {
   Radio,
   RadioGroup
 } from "./chunk-WYLMBMAH.js";
+import {
+  menu_exports
+} from "./chunk-KFXNVUEZ.js";
 import {
   SearchInput
 } from "./chunk-46ISJZBS.js";
 import {
-  IconButton
-} from "./chunk-MS2ELLDY.js";
+  EmptyState
+} from "./chunk-NGGISORT.js";
 import {
   IconBadge
 } from "./chunk-I2RXEKTB.js";
-import {
-  InputGroup
-} from "./chunk-PKI6YH2V.js";
+import "./chunk-KTLWEUNW.js";
 import {
   Link
 } from "./chunk-TZBAM4AD.js";
+import {
+  SuiContext,
+  SuiProvider,
+  useLink,
+  useSui
+} from "./chunk-O2WVT2BP.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -84,18 +88,14 @@ import {
   Spinner
 } from "./chunk-32JGENDB.js";
 import {
-  menu_exports
-} from "./chunk-KFXNVUEZ.js";
-import "./chunk-KTLWEUNW.js";
+  pagination_exports
+} from "./chunk-MLJN6IOJ.js";
 import {
-  navbar_exports
-} from "./chunk-Q6SNJJO2.js";
+  NumberInput
+} from "./chunk-S5J6REMC.js";
 import {
-  SuiContext,
-  SuiProvider,
-  useLink,
-  useSui
-} from "./chunk-O2WVT2BP.js";
+  InputGroup
+} from "./chunk-PKI6YH2V.js";
 import {
   Command
 } from "./chunk-UASXI64E.js";
@@ -103,15 +103,12 @@ import {
   DataList,
   useDataListStyles
 } from "./chunk-52XM5VXJ.js";
-import {
-  drawer_exports
-} from "./chunk-6MMPBMKN.js";
-import {
-  EmptyState
-} from "./chunk-NGGISORT.js";
 import {
   dialog_exports
 } from "./chunk-CZVNG73V.js";
+import {
+  drawer_exports
+} from "./chunk-6MMPBMKN.js";
 import "./chunk-JMYI6YXR.js";
 import {
   file_upload_exports
@@ -123,6 +120,9 @@ import "./chunk-4TPVIHNO.js";
 import {
   grid_list_exports
 } from "./chunk-NSD5HRIP.js";
+import {
+  IconButton
+} from "./chunk-MS2ELLDY.js";
 import {
   AppShell
 } from "./chunk-6ZNR6N2K.js";
@@ -273,10 +273,10 @@ var globalCss = defineGlobalStyles({
     "--global-font-body": "fonts.body",
     "--global-color-border": "colors.border",
     "--cursor-button": "default",
-    "--radius-factor": "1",
-    "--radius-control": "1",
-    "--radius-panel": "1",
-    "--radius-indicator": "1",
+    // '--radius-factor': '1',
+    // '--radius-control': '1',
+    // '--radius-panel': '1',
+    // '--radius-indicator': '1',
     "--radius-full": "9999px",
     "--scale-factor": "1",
     "--overlay-translucency": "90%",
@@ -530,7 +530,7 @@ var buttonRecipe = defineRecipe2({
         h: "6",
         minW: "6",
         textStyle: "xs",
-        borderRadius: "sm",
+        borderRadius: "control.sm",
         px: "2"
       },
       sm: {
@@ -538,14 +538,14 @@ var buttonRecipe = defineRecipe2({
         h: "7",
         minW: "7",
         textStyle: "sm",
-        borderRadius: "md",
+        borderRadius: "control.md",
         px: "2.5"
       },
       md: {
         gap: "2",
         h: "8",
         minW: "8",
-        borderRadius: "md",
+        borderRadius: "control.md",
         textStyle: "sm",
         px: "3"
       },
@@ -553,7 +553,7 @@ var buttonRecipe = defineRecipe2({
         gap: "3",
         h: "10",
         minW: "10",
-        borderRadius: "lg",
+        borderRadius: "control.lg",
         textStyle: "md",
         px: "4.5"
       },
@@ -561,7 +561,7 @@ var buttonRecipe = defineRecipe2({
         gap: "3",
         h: "12",
         minW: "12",
-        borderRadius: "lg",
+        borderRadius: "control.lg",
         textStyle: "lg",
         px: "6"
       }
@@ -2283,35 +2283,35 @@ var semanticRadii = defineSemanticTokens2.radii({
   l3: { value: "{radii.md}" },
   control: {
     sm: {
-      value: "calc({radii.xs} * var(--scale-factor) * var(--radius-control))"
+      value: "calc({radii.xs} * var(--scale-factor, 1) * var(--radius-control, 1))"
     },
     md: {
-      value: "calc({radii.sm} * var(--scale-factor) * var(--radius-control))"
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-control, 1))"
     },
     lg: {
-      value: "calc({radii.md} * var(--scale-factor) * var(--radius-control))"
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-control, 1))"
     }
   },
   panel: {
     sm: {
-      value: "calc({radii.sm} * var(--scale-factor) * var(--radius-panel))"
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-panel, 1))"
     },
     md: {
-      value: "calc({radii.md} * var(--scale-factor) * var(--radius-panel))"
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-panel, 1  ))"
     },
     lg: {
-      value: "calc({radii.lg} * var(--scale-factor) * var(--radius-panel))"
+      value: "calc({radii.lg} * var(--scale-factor, 1) * var(--radius-panel, 1))"
     }
   },
   indicator: {
     sm: {
-      value: "calc({radii.xs} * var(--scale-factor) * var(--radius-indicator))"
+      value: "calc({radii.xs} * var(--scale-factor, 1) * var(--radius-indicator, 1))"
     },
     md: {
-      value: "calc({radii.sm} * var(--scale-factor) * var(--radius-indicator))"
+      value: "calc({radii.sm} * var(--scale-factor, 1) * var(--radius-indicator, 1  ))"
     },
     lg: {
-      value: "calc({radii.md} * var(--scale-factor) * var(--radius-indicator))"
+      value: "calc({radii.md} * var(--scale-factor, 1) * var(--radius-indicator, 1))"
     }
   }
 });
@@ -4085,18 +4085,44 @@ var sidebarNavItemSlotRecipe = defineSlotRecipe15({
       }
     },
     size: {
+      sm: {
+        item: {
+          fontSize: "sm"
+        },
+        button: {
+          borderRadius: "control.md",
+          px: 1.5,
+          height: 7
+        },
+        endElement: {
+          pe: "1"
+        }
+      },
       md: {
         item: {
           fontSize: "sm"
         },
         button: {
-          borderRadius: "md",
-          px: 2,
+          borderRadius: "control.md",
+          px: 3,
           height: 8
         },
         endElement: {
           pe: "1"
         }
+      },
+      lg: {
+        item: {
+          fontSize: "sm"
+        },
+        button: {
+          borderRadius: "control.lg",
+          px: 3,
+          height: 10
+        },
+        endElement: {
+          pe: "1"
+        }
       }
     }
   },

package/package.json

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