@saas-ui/react 3.0.0-alpha.22 → 3.0.0-alpha.23

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.23
+
+### Patch Changes
+
+- 8ac704a: Improved tag recipe and support status component.
+
 ## 3.0.0-alpha.22
 
 ### Minor Changes

package/dist/{chunk-Q6IC3BTH.js → chunk-YKSY7UOM.js}

@@ -8,8 +8,8 @@ var Status = forwardRef(
   function Status2(props, ref) {
     const { children, value, ...rest } = props;
     const color = value ? `status.${value}` : void 0;
-    return /* @__PURE__ */ jsxs(ChakraStatus.Root, { ref, bg: color, ...rest, children: [
-      /* @__PURE__ */ jsx(ChakraStatus.Indicator, {}),
+    return /* @__PURE__ */ jsxs(ChakraStatus.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ jsx(ChakraStatus.Indicator, { bg: color }),
       children
     ] });
   }

package/dist/components/status/index.cjs

@@ -33,8 +33,8 @@ var Status = (0, import_react.forwardRef)(
   function Status2(props, ref) {
     const { children, value, ...rest } = props;
     const color = value ? `status.${value}` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Status.Root, { ref, bg: color, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Status.Indicator, {}),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Status.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Status.Indicator, { bg: color }),
       children
     ] });
   }

package/dist/components/status/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   Status
-} from "../../chunk-Q6IC3BTH.js";
+} from "../../chunk-YKSY7UOM.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   Status

package/dist/index.cjs

@@ -1565,6 +1565,20 @@ var semanticColors = import_react25.defineSemanticTokens.colors({
       value: { _light: "{colors.gray.400}", _dark: "{colors.gray.400}" }
     }
   },
+  status: {
+    success: {
+      value: { _light: "{colors.green.500}", _dark: "{colors.green.500}" }
+    },
+    error: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.500}" }
+    },
+    warning: {
+      value: { _light: "{colors.orange.500}", _dark: "{colors.orange.500}" }
+    },
+    info: {
+      value: { _light: "{colors.blue.500}", _dark: "{colors.blue.500}" }
+    }
+  },
   sidebar: {
     bg: {
       value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
@@ -3703,11 +3717,14 @@ var tagSlotRecipe = (0, import_react39.defineSlotRecipe)({
       justifyContent: "center",
       flexShrink: 0,
       boxSize: "var(--tag-element-size)",
+      _icon: { boxSize: "80% !important" },
       "&:has([data-scope=avatar])": {
         boxSize: "var(--tag-avatar-size)",
         ms: "var(--tag-element-offset)"
       },
-      _icon: { boxSize: "100%" }
+      '&:has([class*="status__root"])': {
+        width: "var(--tag-status-size)"
+      }
     },
     endElement: {
       flexShrink: 0,
@@ -3726,6 +3743,7 @@ var tagSlotRecipe = (0, import_react39.defineSlotRecipe)({
           minH: "5",
           gap: "1",
           "--tag-avatar-size": "spacing.3.5",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.3.5",
           "--tag-element-offset": "spacing.-0.5"
         },
@@ -3739,6 +3757,7 @@ var tagSlotRecipe = (0, import_react39.defineSlotRecipe)({
           minH: "6",
           gap: "1",
           "--tag-avatar-size": "spacing.4",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.4",
           "--tag-element-offset": "spacing.-1"
         },
@@ -3752,6 +3771,7 @@ var tagSlotRecipe = (0, import_react39.defineSlotRecipe)({
           minH: "7",
           gap: "1",
           "--tag-avatar-size": "spacing.5",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.5",
           "--tag-element-offset": "spacing.-1.5"
         },
@@ -3768,11 +3788,12 @@ var tagSlotRecipe = (0, import_react39.defineSlotRecipe)({
           minH: "8",
           gap: "1.5",
           "--tag-avatar-size": "spacing.6",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.6",
           "--tag-element-offset": "spacing.-2"
         },
         label: {
-          textStyle: "sm"
+          textStyle: "md"
         },
         closeTrigger: {
           padding: "3px"
@@ -10756,8 +10777,8 @@ var Status = (0, import_react159.forwardRef)(
   function Status2(props, ref) {
     const { children, value, ...rest } = props;
     const color = value ? `status.${value}` : void 0;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react160.Status.Root, { ref, bg: color, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react160.Status.Indicator, {}),
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react160.Status.Root, { ref, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react160.Status.Indicator, { bg: color }),
       children
     ] });
   }

package/dist/index.js

@@ -1,9 +1,9 @@
 import {
-  sidebar_exports,
-  useSidebar,
-  useSidebarItemStyles,
-  useSidebarStyles
-} from "./chunk-U23VDAWJ.js";
+  Status
+} from "./chunk-YKSY7UOM.js";
+import {
+  steps_exports
+} from "./chunk-VZG7EJ64.js";
 import {
   Switch
 } from "./chunk-SA3OGTOO.js";
@@ -17,45 +17,42 @@ import {
 import {
   Tooltip
 } from "./chunk-QSNSWCTM.js";
-import {
-  steps_exports
-} from "./chunk-VZG7EJ64.js";
-import {
-  Status
-} from "./chunk-Q6IC3BTH.js";
 import {
   colors
 } from "./chunk-3MO37LYW.js";
 import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
+  PasswordInput
+} from "./chunk-CD2JUFI2.js";
 import {
   Persona,
   PersonaAvatar,
   defaultPresenceOptions
 } from "./chunk-GWC5GCMW.js";
+import {
+  PinInput
+} from "./chunk-2EUACKRH.js";
 import {
   Radio,
   RadioGroup
 } from "./chunk-WYLMBMAH.js";
-import {
-  SegmentedControl
-} from "./chunk-SKXSBAOS.js";
 import {
   SearchInput
 } from "./chunk-46ISJZBS.js";
+import {
+  SegmentedControl
+} from "./chunk-SKXSBAOS.js";
 import {
   namespace_exports as namespace_exports3
 } from "./chunk-BU7QENBQ.js";
 import {
-  navbar_exports
-} from "./chunk-Q6SNJJO2.js";
-import {
-  IconButton
-} from "./chunk-MS2ELLDY.js";
+  sidebar_exports,
+  useSidebar,
+  useSidebarItemStyles,
+  useSidebarStyles
+} from "./chunk-U23VDAWJ.js";
 import {
-  menu_exports
-} from "./chunk-KFXNVUEZ.js";
+  Link
+} from "./chunk-TZBAM4AD.js";
 import {
   loading_overlay_exports,
   useLoadingOverlayStyles
@@ -64,8 +61,12 @@ import {
   Spinner
 } from "./chunk-32JGENDB.js";
 import {
-  Link
-} from "./chunk-TZBAM4AD.js";
+  menu_exports
+} from "./chunk-KFXNVUEZ.js";
+import "./chunk-KTLWEUNW.js";
+import {
+  navbar_exports
+} from "./chunk-Q6SNJJO2.js";
 import {
   SuiContext,
   SuiProvider,
@@ -75,49 +76,48 @@ import {
 import {
   NumberInput
 } from "./chunk-S5J6REMC.js";
-import {
-  pagination_exports
-} from "./chunk-MLJN6IOJ.js";
-import {
-  PasswordInput
-} from "./chunk-CD2JUFI2.js";
 import {
   InputGroup
 } from "./chunk-PKI6YH2V.js";
+import {
+  pagination_exports
+} from "./chunk-MLJN6IOJ.js";
 import {
   Command
 } from "./chunk-UASXI64E.js";
 import {
   namespace_exports
 } from "./chunk-EQ7Q6HRE.js";
-import {
-  EmptyState
-} from "./chunk-FJFNGSPL.js";
 import {
   namespace_exports as namespace_exports2
 } from "./chunk-VJ4NCA6R.js";
 import {
   CloseButton
 } from "./chunk-BKYGKH3L.js";
+import "./chunk-4TPVIHNO.js";
+import {
+  EmptyState
+} from "./chunk-FJFNGSPL.js";
 import {
   grid_list_exports
 } from "./chunk-NSD5HRIP.js";
-import "./chunk-KTLWEUNW.js";
-import "./chunk-4TPVIHNO.js";
 import {
   IconBadge
 } from "./chunk-I2RXEKTB.js";
+import {
+  IconButton
+} from "./chunk-MS2ELLDY.js";
 import {
   AppShell
 } from "./chunk-6ZNR6N2K.js";
+import {
+  Badge
+} from "./chunk-INV6RT5B.js";
 import "./chunk-YHQ5JGCC.js";
 import {
   Avatar,
   AvatarGroup
 } from "./chunk-JO4WJVYO.js";
-import {
-  Badge
-} from "./chunk-INV6RT5B.js";
 import {
   breadcrumb_exports
 } from "./chunk-TT4C5VXB.js";
@@ -1609,6 +1609,20 @@ var semanticColors = defineSemanticTokens.colors({
       value: { _light: "{colors.gray.400}", _dark: "{colors.gray.400}" }
     }
   },
+  status: {
+    success: {
+      value: { _light: "{colors.green.500}", _dark: "{colors.green.500}" }
+    },
+    error: {
+      value: { _light: "{colors.red.500}", _dark: "{colors.red.500}" }
+    },
+    warning: {
+      value: { _light: "{colors.orange.500}", _dark: "{colors.orange.500}" }
+    },
+    info: {
+      value: { _light: "{colors.blue.500}", _dark: "{colors.blue.500}" }
+    }
+  },
   sidebar: {
     bg: {
       value: { _light: "{colors.gray.100}", _dark: "{colors.gray.900}" }
@@ -3750,11 +3764,14 @@ var tagSlotRecipe = defineSlotRecipe12({
       justifyContent: "center",
       flexShrink: 0,
       boxSize: "var(--tag-element-size)",
+      _icon: { boxSize: "80% !important" },
       "&:has([data-scope=avatar])": {
         boxSize: "var(--tag-avatar-size)",
         ms: "var(--tag-element-offset)"
       },
-      _icon: { boxSize: "100%" }
+      '&:has([class*="status__root"])': {
+        width: "var(--tag-status-size)"
+      }
     },
     endElement: {
       flexShrink: 0,
@@ -3773,6 +3790,7 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "5",
           gap: "1",
           "--tag-avatar-size": "spacing.3.5",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.3.5",
           "--tag-element-offset": "spacing.-0.5"
         },
@@ -3786,6 +3804,7 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "6",
           gap: "1",
           "--tag-avatar-size": "spacing.4",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.4",
           "--tag-element-offset": "spacing.-1"
         },
@@ -3799,6 +3818,7 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "7",
           gap: "1",
           "--tag-avatar-size": "spacing.5",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.5",
           "--tag-element-offset": "spacing.-1.5"
         },
@@ -3815,11 +3835,12 @@ var tagSlotRecipe = defineSlotRecipe12({
           minH: "8",
           gap: "1.5",
           "--tag-avatar-size": "spacing.6",
+          "--tag-status-size": "spacing.2",
           "--tag-element-size": "spacing.6",
           "--tag-element-offset": "spacing.-2"
         },
         label: {
-          textStyle: "sm"
+          textStyle: "md"
         },
         closeTrigger: {
           padding: "3px"

package/package.json

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