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

package/dist/index.js

@@ -4,12 +4,12 @@ import {
 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";
@@ -19,6 +19,9 @@ import {
   useSidebarItemStyles,
   useSidebarStyles
 } from "./chunk-GGAKUS66.js";
+import {
+  steps_exports
+} from "./chunk-44ZA3TYW.js";
 import {
   Switch
 } from "./chunk-SA3OGTOO.js";
@@ -26,12 +29,6 @@ import {
   Toaster,
   toast
 } from "./chunk-HELHPHIQ.js";
-import {
-  steps_exports
-} from "./chunk-44ZA3TYW.js";
-import {
-  menu_exports
-} from "./chunk-KK77TYNL.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -39,6 +36,9 @@ import {
 import {
   Spinner
 } from "./chunk-32JGENDB.js";
+import {
+  menu_exports
+} from "./chunk-KK77TYNL.js";
 import {
   navbar_exports
 } from "./chunk-Q6SNJJO2.js";
@@ -48,14 +48,14 @@ import {
 import {
   PasswordInput
 } from "./chunk-CD2JUFI2.js";
-import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
 import {
   Persona,
   PersonaAvatar,
   defaultPresenceOptions
-} from "./chunk-M7FOBCOV.js";
+} from "./chunk-4VH4IGVF.js";
+import {
+  PinInput
+} from "./chunk-2EUACKRH.js";
 import {
   Radio,
   RadioGroup
@@ -110,7 +110,7 @@ import {
 import "./chunk-VDXTEASE.js";
 import {
   Command
-} from "./chunk-4TR3AOMG.js";
+} from "./chunk-UASXI64E.js";
 import "./chunk-RTMS5TJN.js";
 
 // src/preset.ts
@@ -590,6 +590,7 @@ var commandRecipe = defineRecipe2({
     colorPalette: "gray",
     display: "inline-flex",
     gap: 1,
+    color: "fg.muted",
     "[role=tooltip] > &": {
       ms: 1,
       _before: {
@@ -598,6 +599,22 @@ var commandRecipe = defineRecipe2({
         fontSize: "xs"
       }
     }
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: "xs"
+      },
+      md: {
+        fontSize: "sm"
+      },
+      lg: {
+        fontSize: "md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
   }
 });
 
@@ -1043,7 +1060,7 @@ var kbdRecipe = defineRecipe12({
     display: "inline-flex",
     alignItems: "center",
     fontWeight: "medium",
-    fontFamily: "mono",
+    fontFamily: "body",
     flexShrink: "0",
     whiteSpace: "nowrap",
     wordSpacing: "-0.5em",
@@ -1078,18 +1095,18 @@ var kbdRecipe = defineRecipe12({
         height: "4.5"
       },
       md: {
-        textStyle: "sm",
+        textStyle: "xs",
         height: "5"
       },
       lg: {
-        textStyle: "md",
+        textStyle: "sm",
         height: "6"
       }
     }
   },
   defaultVariants: {
     size: "md",
-    variant: "raised"
+    variant: "subtle"
   }
 });
 
@@ -2621,6 +2638,7 @@ var personaSlotRecipe = defineSlotRecipe5({
   ],
   base: {
     root: {
+      "--presence-border-color": "var(--bg-currentcolor)",
       display: "flex",
       flexDirection: "row",
       alignItems: "center"
@@ -2632,11 +2650,11 @@ var personaSlotRecipe = defineSlotRecipe5({
       position: "absolute",
       bottom: 0,
       right: 0,
-      boxSize: "1em",
-      transform: "translate(15%, 15%)",
-      borderWidth: "0.15em",
+      boxSize: "calc(var(--avatar-size) / 3)",
+      transform: "translate(12%, 12%)",
+      borderWidth: "0.10em",
       borderRadius: "50%",
-      borderColor: "bg.panel",
+      borderColor: "var(--presence-border-color)",
       bg: "var(--persona-presence)"
     },
     details: {
@@ -2657,8 +2675,14 @@ var personaSlotRecipe = defineSlotRecipe5({
   },
   variants: {
     size: {
+      "2xs": {
+        details: { ms: 1 },
+        label: { fontSize: "2xs" },
+        secondaryLabel: { display: "none" },
+        tertiaryLabel: { display: "none" }
+      },
       xs: {
-        details: { ms: 2 },
+        details: { ms: 1.5 },
         label: { fontSize: "xs" },
         secondaryLabel: { display: "none" },
         tertiaryLabel: { display: "none" }
@@ -2686,6 +2710,12 @@ var personaSlotRecipe = defineSlotRecipe5({
         label: { fontSize: "lg" },
         secondaryLabel: { fontSize: "md" },
         tertiaryLabel: { fontSize: "md" }
+      },
+      "2xl": {
+        details: { ms: 4 },
+        label: { fontSize: "xl" },
+        secondaryLabel: { fontSize: "lg" },
+        tertiaryLabel: { fontSize: "lg" }
       }
     }
   },
@@ -3368,6 +3398,7 @@ var avatarSlotRecipe = defineSlotRecipe11({
   className: "chakra-avatar",
   base: {
     root: {
+      "--avatar-font-size": "calc(var(--avatar-size) / 2)",
       display: "inline-flex",
       alignItems: "center",
       justifyContent: "center",
@@ -3409,44 +3440,38 @@ var avatarSlotRecipe = defineSlotRecipe11({
       },
       "2xs": {
         root: {
-          "--avatar-font-size": "fontSizes.2xs",
-          "--avatar-size": "sizes.6"
+          "--avatar-size": "sizes.5"
         }
       },
       xs: {
         root: {
-          "--avatar-font-size": "fontSizes.xs",
-          "--avatar-size": "sizes.8"
+          "--avatar-size": "sizes.6"
         }
       },
       sm: {
         root: {
-          "--avatar-font-size": "fontSizes.sm",
           "--avatar-size": "sizes.9"
         }
       },
       md: {
         root: {
-          "--avatar-font-size": "fontSizes.md",
-          "--avatar-size": "sizes.10"
+          "--avatar-size": "sizes.12"
         }
       },
       lg: {
         root: {
-          "--avatar-font-size": "fontSizes.md",
-          "--avatar-size": "sizes.11"
+          "--avatar-size": "sizes.14"
         }
       },
       xl: {
         root: {
-          "--avatar-font-size": "fontSizes.lg",
-          "--avatar-size": "sizes.12"
+          "--avatar-size": "sizes.16"
         }
       },
       "2xl": {
         root: {
-          "--avatar-font-size": "fontSizes.xl",
-          "--avatar-size": "sizes.16"
+          "--avatar-font-size": "calc(var(--avatar-size) / 2)",
+          "--avatar-size": "sizes.20"
         }
       }
     },
@@ -7969,9 +7994,11 @@ var tooltipSlotRecipe = defineSlotRecipe49({
   className: "chakra-tooltip",
   base: {
     content: {
-      "--tooltip-bg": "colors.bg.inverted",
+      "--tooltip-bg": "colors.bg",
+      display: "flex",
+      alignItems: "center",
       bg: "var(--tooltip-bg)",
-      color: "fg.inverted",
+      color: "fg",
       px: "2.5",
       py: "1",
       borderRadius: "l2",
@@ -7992,13 +8019,24 @@ var tooltipSlotRecipe = defineSlotRecipe49({
     },
     arrow: {
       "--arrow-size": "sizes.2",
-      "--arrow-background": "var(--tooltip-bg)"
+      "--arrow-background": "var(--tooltip-bg)",
+      zIndex: "-1"
     },
     arrowTip: {
       borderTopWidth: "1px",
       borderInlineStartWidth: "1px",
       borderColor: "var(--tooltip-bg)"
     }
+  },
+  variants: {
+    variant: {
+      inverted: {
+        content: {
+          "--tooltip-bg": "colors.bg.inverted",
+          color: "fg.inverted"
+        }
+      }
+    }
   }
 });
 
@@ -8179,20 +8217,20 @@ 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.75rem") },
-  xs: { value: scaleToken("0.8125rem") },
-  sm: { value: scaleToken("0.875rem") },
-  md: { value: scaleToken("1rem") },
-  lg: { value: scaleToken("1.125rem") },
-  xl: { value: scaleToken("1.25rem") },
-  "2xl": { value: scaleToken("1.5rem") },
-  "3xl": { value: scaleToken("1.875rem") },
-  "4xl": { value: scaleToken("2.25rem") },
-  "5xl": { value: scaleToken("3rem") },
-  "6xl": { value: scaleToken("3.75rem") },
-  "7xl": { value: scaleToken("4.5rem") },
-  "8xl": { value: scaleToken("6rem") },
-  "9xl": { value: scaleToken("8rem") }
+  "2xs": { value: scaleToken("0.625rem") },
+  xs: { value: scaleToken("0.75rem") },
+  sm: { value: scaleToken("0.8125rem") },
+  md: { value: scaleToken("0.875rem") },
+  lg: { value: scaleToken("1rem") },
+  xl: { value: scaleToken("1.125rem") },
+  "2xl": { value: scaleToken("1.25rem") },
+  "3xl": { value: scaleToken("1.5rem") },
+  "4xl": { value: scaleToken("1.875rem") },
+  "5xl": { value: scaleToken("2.25rem") },
+  "6xl": { value: scaleToken("3rem") },
+  "7xl": { value: scaleToken("3.75rem") },
+  "8xl": { value: scaleToken("4.5rem") },
+  "9xl": { value: scaleToken("6rem") }
 });
 
 // src/theme/tokens/font-weights.ts

package/package.json

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