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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @saas-ui/react
 
+## 3.0.0-alpha.14
+
+### Patch Changes
+
+- 0067207: Fixed issue where paddingStart would not apply to grouped inputs
+- 0067207: Added 4.5 spacing
+
+## 3.0.0-alpha.13
+
+### Patch Changes
+
+- b51aff9: Improved form components recipes sizing
+- b51aff9: Fixed passing menu button props to button component
+
 ## 3.0.0-alpha.12
 
 ### Patch Changes

package/dist/{chunk-6LOMIKR5.js → chunk-44ZA3TYW.js}

@@ -16,9 +16,10 @@ __export(steps_exports, {
   List: () => StepsList,
   NextTrigger: () => StepsNextTrigger,
   PrevTrigger: () => StepsPrevTrigger,
-  Root: () => StepsRoot
+  Root: () => StepsRoot,
+  useContext: () => useStepsContext
 });
-import { Box, Steps as ChakraSteps } from "@chakra-ui/react";
+import { Box, Steps as ChakraSteps, useStepsContext } from "@chakra-ui/react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var StepsItem = (props) => {
   const { title, description, completedIcon, icon, ...rest } = props;

package/dist/{chunk-JGHXJ3PI.js → chunk-KK77TYNL.js}

@@ -84,7 +84,7 @@ var MenuTriggerItem = forwardRef(
 );
 var MenuButton = forwardRef(
   function MenuButton2(props, ref) {
-    return /* @__PURE__ */ jsx(MenuTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ jsx(Button, {}) });
+    return /* @__PURE__ */ jsx(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ jsx(Button, { ...props }) });
   }
 );
 var MenuRadioItemGroup = ChakraMenu.RadioItemGroup;

package/dist/components/menu/index.cjs

@@ -231,7 +231,7 @@ var MenuTriggerItem = (0, import_react4.forwardRef)(
 );
 var MenuButton = (0, import_react4.forwardRef)(
   function MenuButton2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { ...props }) });
   }
 );
 var MenuRadioItemGroup = import_react5.Menu.RadioItemGroup;

package/dist/components/menu/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   menu_exports
-} from "../../chunk-JGHXJ3PI.js";
+} from "../../chunk-KK77TYNL.js";
 import "../../chunk-KTLWEUNW.js";
 import "../../chunk-BCNPBZZK.js";
 import "../../chunk-VDXTEASE.js";

package/dist/components/steps/index.cjs

@@ -35,7 +35,8 @@ __export(steps_exports, {
   List: () => StepsList,
   NextTrigger: () => StepsNextTrigger,
   PrevTrigger: () => StepsPrevTrigger,
-  Root: () => StepsRoot
+  Root: () => StepsRoot,
+  useContext: () => import_react2.useStepsContext
 });
 var import_react2 = require("@chakra-ui/react");
 

package/dist/components/steps/index.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Steps } from '@chakra-ui/react';
+import { Steps, useStepsContext } from '@chakra-ui/react';
 
 interface StepInfoProps {
     title?: React.ReactNode;
@@ -25,7 +25,7 @@ declare const StepsNextTrigger: (props: Steps.NextTriggerProps) => react_jsx_run
 declare const StepsPrevTrigger: (props: Steps.PrevTriggerProps) => react_jsx_runtime.JSX.Element;
 
 declare namespace steps {
-  export { StepsCompletedContent as CompletedContent, StepsContent as Content, StepsIndicator as Indicator, type StepsIndicatorProps as IndicatorProps, StepsItem as Item, type StepsItemProps as ItemProps, StepsList as List, StepsNextTrigger as NextTrigger, StepsPrevTrigger as PrevTrigger, StepsRoot as Root, type StepsRootProps as RootProps };
+  export { StepsCompletedContent as CompletedContent, StepsContent as Content, StepsIndicator as Indicator, type StepsIndicatorProps as IndicatorProps, StepsItem as Item, type StepsItemProps as ItemProps, StepsList as List, StepsNextTrigger as NextTrigger, StepsPrevTrigger as PrevTrigger, StepsRoot as Root, type StepsRootProps as RootProps, useStepsContext as useContext };
 }
 
 export { steps as Steps };

package/dist/components/steps/index.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Steps } from '@chakra-ui/react';
+import { Steps, useStepsContext } from '@chakra-ui/react';
 
 interface StepInfoProps {
     title?: React.ReactNode;
@@ -25,7 +25,7 @@ declare const StepsNextTrigger: (props: Steps.NextTriggerProps) => react_jsx_run
 declare const StepsPrevTrigger: (props: Steps.PrevTriggerProps) => react_jsx_runtime.JSX.Element;
 
 declare namespace steps {
-  export { StepsCompletedContent as CompletedContent, StepsContent as Content, StepsIndicator as Indicator, type StepsIndicatorProps as IndicatorProps, StepsItem as Item, type StepsItemProps as ItemProps, StepsList as List, StepsNextTrigger as NextTrigger, StepsPrevTrigger as PrevTrigger, StepsRoot as Root, type StepsRootProps as RootProps };
+  export { StepsCompletedContent as CompletedContent, StepsContent as Content, StepsIndicator as Indicator, type StepsIndicatorProps as IndicatorProps, StepsItem as Item, type StepsItemProps as ItemProps, StepsList as List, StepsNextTrigger as NextTrigger, StepsPrevTrigger as PrevTrigger, StepsRoot as Root, type StepsRootProps as RootProps, useStepsContext as useContext };
 }
 
 export { steps as Steps };

package/dist/components/steps/index.js

@@ -1,7 +1,7 @@
 'use client'
 import {
   steps_exports
-} from "../../chunk-6LOMIKR5.js";
+} from "../../chunk-44ZA3TYW.js";
 import "../../chunk-KTLWEUNW.js";
 import "../../chunk-VDXTEASE.js";
 import "../../chunk-RTMS5TJN.js";

package/dist/index.cjs

@@ -421,7 +421,7 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
         minW: "8",
         textStyle: "sm",
         borderRadius: "md",
-        px: "3"
+        px: "2.5"
       },
       md: {
         gap: "2",
@@ -429,7 +429,7 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
         minW: "8",
         borderRadius: "md",
         textStyle: "sm",
-        px: "4"
+        px: "3"
       },
       lg: {
         gap: "3",
@@ -437,7 +437,7 @@ var buttonRecipe = (0, import_react5.defineRecipe)({
         minW: "10",
         borderRadius: "lg",
         textStyle: "md",
-        px: "5"
+        px: "4.5"
       },
       xl: {
         gap: "3",
@@ -722,14 +722,14 @@ var checkmarkRecipe = (0, import_react9.defineRecipe)({
         boxSize: "3"
       },
       sm: {
-        boxSize: "4"
+        boxSize: "3.5"
       },
       md: {
-        boxSize: "5",
+        boxSize: "4",
         p: "0.5"
       },
       lg: {
-        boxSize: "6",
+        boxSize: "5",
         p: "0.5"
       }
     },
@@ -886,7 +886,6 @@ var inputRecipe = (0, import_react14.defineRecipe)({
     position: "relative",
     appearance: "none",
     textAlign: "start",
-    borderRadius: "l2",
     _disabled: {
       layerStyle: "disabled"
     },
@@ -902,28 +901,33 @@ var inputRecipe = (0, import_react14.defineRecipe)({
   variants: {
     size: {
       xs: {
+        borderRadius: "sm",
         textStyle: "xs",
         px: "2",
-        "--input-height": "sizes.8"
+        "--input-height": "sizes.6"
       },
       sm: {
+        borderRadius: "sm",
         textStyle: "sm",
         px: "2.5",
-        "--input-height": "sizes.9"
+        "--input-height": "sizes.7"
       },
       md: {
+        borderRadius: "md",
         textStyle: "sm",
         px: "3",
-        "--input-height": "sizes.10"
+        "--input-height": "sizes.8"
       },
       lg: {
+        borderRadius: "lg",
         textStyle: "md",
-        px: "4",
-        "--input-height": "sizes.11"
+        px: "4.5",
+        "--input-height": "sizes.10"
       },
       xl: {
+        borderRadius: "lg",
         textStyle: "md",
-        px: "4.5",
+        px: "6",
         "--input-height": "sizes.12"
       }
     },
@@ -1201,13 +1205,13 @@ var radiomarkRecipe = (0, import_react19.defineRecipe)({
         boxSize: "3"
       },
       sm: {
-        boxSize: "4"
+        boxSize: "3.5"
       },
       md: {
-        boxSize: "5"
+        boxSize: "4"
       },
       lg: {
-        boxSize: "6"
+        boxSize: "5"
       }
     }
   },
@@ -1397,7 +1401,6 @@ var textareaRecipe = (0, import_react24.defineRecipe)({
     position: "relative",
     appearance: "none",
     textAlign: "start",
-    borderRadius: "l2",
     _disabled: {
       layerStyle: "disabled"
     },
@@ -1411,30 +1414,35 @@ var textareaRecipe = (0, import_react24.defineRecipe)({
   variants: {
     size: {
       xs: {
+        borderRadius: "sm",
         textStyle: "xs",
         px: "2",
         py: "1.5",
         scrollPaddingBottom: "1.5"
       },
       sm: {
+        borderRadius: "sm",
         textStyle: "sm",
         px: "2.5",
         py: "2",
         scrollPaddingBottom: "2"
       },
       md: {
+        borderRadius: "md",
         textStyle: "sm",
         px: "3",
         py: "2",
         scrollPaddingBottom: "2"
       },
       lg: {
+        borderRadius: "md",
         textStyle: "md",
         px: "4",
         py: "3",
         scrollPaddingBottom: "3"
       },
       xl: {
+        borderRadius: "lg",
         textStyle: "md",
         px: "4.5",
         py: "3.5",
@@ -5121,7 +5129,6 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
       width: "full",
       minH: "var(--select-trigger-height)",
       px: "var(--select-trigger-padding-x)",
-      borderRadius: "l2",
       userSelect: "none",
       textAlign: "start",
       focusVisibleRing: "inside",
@@ -5183,7 +5190,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
       textAlign: "start",
       borderRadius: "l1",
       _highlighted: {
-        bg: { _light: "bg.muted", _dark: "bg.emphasized" }
+        bg: "bg.subtle"
       },
       _disabled: {
         pointerEvents: "none",
@@ -5243,7 +5250,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
     size: {
       xs: {
         root: {
-          "--select-trigger-height": "sizes.8",
+          "--select-trigger-height": "sizes.6",
           "--select-trigger-padding-x": "spacing.2"
         },
         content: {
@@ -5252,6 +5259,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
           textStyle: "xs"
         },
         trigger: {
+          borderRadius: "sm",
           textStyle: "xs",
           gap: "1"
         },
@@ -5272,7 +5280,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
       },
       sm: {
         root: {
-          "--select-trigger-height": "sizes.9",
+          "--select-trigger-height": "sizes.7",
           "--select-trigger-padding-x": "spacing.2.5"
         },
         content: {
@@ -5280,6 +5288,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
           textStyle: "sm"
         },
         trigger: {
+          borderRadius: "sm",
           textStyle: "sm",
           gap: "1"
         },
@@ -5303,7 +5312,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
       },
       md: {
         root: {
-          "--select-trigger-height": "sizes.10",
+          "--select-trigger-height": "sizes.8",
           "--select-trigger-padding-x": "spacing.3"
         },
         content: {
@@ -5327,6 +5336,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
           px: "2"
         },
         trigger: {
+          borderRadius: "md",
           textStyle: "sm",
           gap: "2"
         },
@@ -5339,7 +5349,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
       },
       lg: {
         root: {
-          "--select-trigger-height": "sizes.12",
+          "--select-trigger-height": "sizes.10",
           "--select-trigger-padding-x": "spacing.4"
         },
         content: {
@@ -5358,6 +5368,7 @@ var selectSlotRecipe = (0, import_react55.defineSlotRecipe)({
           px: "3"
         },
         trigger: {
+          borderRadius: "md",
           textStyle: "md",
           py: "3",
           gap: "2"
@@ -5654,7 +5665,15 @@ var pinInputSlotRecipe = (0, import_react58.defineSlotRecipe)({
     }
   },
   variants: {
-    size: mapEntries(variants2.size, (key, value) => [key, { input: value }]),
+    size: mapEntries(variants2.size, (key, value) => [
+      key,
+      {
+        input: {
+          ...value,
+          px: 0
+        }
+      }
+    ]),
     variant: mapEntries(variants2.variant, (key, value) => [
       key,
       { input: value }
@@ -8708,6 +8727,7 @@ var spacing = import_react93.defineTokens.spacing({
   3: { value: scaleToken("0.75rem") },
   3.5: { value: scaleToken("0.875rem") },
   4: { value: scaleToken("1rem") },
+  4.5: { value: scaleToken("1.125rem") },
   5: { value: scaleToken("1.25rem") },
   6: { value: scaleToken("1.5rem") },
   7: { value: scaleToken("1.75rem") },
@@ -9635,7 +9655,7 @@ var MenuTriggerItem = (0, import_react136.forwardRef)(
 );
 var MenuButton = (0, import_react136.forwardRef)(
   function MenuButton2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuTrigger, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, {}) });
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuTrigger, { ref, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Button, { ...props }) });
   }
 );
 var MenuRadioItemGroup = import_react137.Menu.RadioItemGroup;
@@ -10429,28 +10449,6 @@ var SidebarNavButtonEndElement = withItemContext(import_sidebar.Sidebar.NavItemE
 // src/components/sidebar/index.ts
 var import_sidebar2 = require("@saas-ui/core/sidebar");
 
-// src/components/toaster/toaster.tsx
-var import_react156 = require("@chakra-ui/react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var toast = (0, import_react156.createToaster)({
-  placement: "bottom-end",
-  pauseOnPageIdle: true
-});
-var Toaster = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
-    var _a7;
-    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react156.Toast.Root, { width: { md: "sm" }, children: [
-      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Toast.Indicator, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react156.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
-        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Toast.Title, { children: toast2.title }),
-        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Toast.Description, { children: toast2.description })
-      ] }),
-      toast2.action && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Toast.ActionTrigger, { children: toast2.action.label }),
-      ((_a7 = toast2.meta) == null ? void 0 : _a7.closable) && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Toast.CloseTrigger, {})
-    ] });
-  } }) });
-};
-
 // src/components/steps/steps.tsx
 var steps_exports = {};
 __export(steps_exports, {
@@ -10461,72 +10459,95 @@ __export(steps_exports, {
   List: () => StepsList,
   NextTrigger: () => StepsNextTrigger,
   PrevTrigger: () => StepsPrevTrigger,
-  Root: () => StepsRoot
+  Root: () => StepsRoot,
+  useContext: () => import_react156.useStepsContext
 });
-var import_react157 = require("@chakra-ui/react");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react156 = require("@chakra-ui/react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var StepsItem = (props) => {
   const { title, description, completedIcon, icon, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Item, { ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Steps.Trigger, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-        import_react157.Steps.Status,
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react156.Steps.Item, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react156.Steps.Trigger, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react156.Steps.Status,
         {
-          complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CheckIcon, {}),
-          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {})
+          complete: completedIcon || /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CheckIcon, {}),
+          incomplete: icon || /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Number, {})
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StepInfo, { title, description })
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StepInfo, { title, description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Separator, {})
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Separator, {})
   ] });
 };
 var StepInfo = (props) => {
   const { title, description } = props;
   if (title && description) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Box, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
+    return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react156.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Title, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Description, { children: description })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Title, { children: title }),
-    description && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Description, { children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Title, { children: title }),
+    description && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Description, { children: description })
   ] });
 };
 var StepsIndicator = (props) => {
-  const { icon = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Number, {}), completedIcon } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.Status, { complete: completedIcon, incomplete: icon }) });
+  const { icon = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Number, {}), completedIcon } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Indicator, { children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.Status, { complete: completedIcon, incomplete: icon }) });
 };
-var StepsList = import_react157.Steps.List;
-var StepsRoot = import_react157.Steps.Root;
-var StepsContent = import_react157.Steps.Content;
-var StepsCompletedContent = import_react157.Steps.CompletedContent;
+var StepsList = import_react156.Steps.List;
+var StepsRoot = import_react156.Steps.Root;
+var StepsContent = import_react156.Steps.Content;
+var StepsCompletedContent = import_react156.Steps.CompletedContent;
 var StepsNextTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.NextTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.NextTrigger, { ...props });
 };
 var StepsPrevTrigger = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Steps.PrevTrigger, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react156.Steps.PrevTrigger, { ...props });
 };
 
 // src/components/switch/switch.tsx
-var import_react158 = require("@chakra-ui/react");
-var import_react159 = require("react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
-var Switch = (0, import_react159.forwardRef)(
+var import_react157 = require("@chakra-ui/react");
+var import_react158 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var Switch = (0, import_react158.forwardRef)(
   function Switch2(props, ref) {
     const { inputProps, children, rootRef, trackLabel, thumbLabel, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react158.Switch.Control, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
-        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Switch.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Switch.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react157.Switch.Control, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Switch.Thumb, { children: thumbLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Switch.ThumbIndicator, { fallback: thumbLabel == null ? void 0 : thumbLabel.off, children: thumbLabel == null ? void 0 : thumbLabel.on }) }),
+        trackLabel && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Switch.Indicator, { fallback: trackLabel.off, children: trackLabel.on })
       ] }),
-      children != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react158.Switch.Label, { children })
+      children != null && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react157.Switch.Label, { children })
     ] });
   }
 );
 
+// src/components/toaster/toaster.tsx
+var import_react159 = require("@chakra-ui/react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var toast = (0, import_react159.createToaster)({
+  placement: "bottom-end",
+  pauseOnPageIdle: true
+});
+var Toaster = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Toaster, { toaster: toast, insetInline: { mdDown: "4" }, children: (toast2) => {
+    var _a7;
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react159.Toast.Root, { width: { md: "sm" }, children: [
+      toast2.type === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Spinner, { size: "sm", color: "colorPalette.solid" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Toast.Indicator, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react159.Stack, { gap: "1", flex: "1", maxWidth: "100%", children: [
+        toast2.title && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Toast.Title, { children: toast2.title }),
+        toast2.description && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Toast.Description, { children: toast2.description })
+      ] }),
+      toast2.action && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Toast.ActionTrigger, { children: toast2.action.label }),
+      ((_a7 = toast2.meta) == null ? void 0 : _a7.closable) && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react159.Toast.CloseTrigger, {})
+    ] });
+  } }) });
+};
+
 // src/components/tooltip/tooltip.tsx
 var import_react160 = require("react");
 var import_react161 = require("@chakra-ui/react");

package/dist/index.d.cts

@@ -31,10 +31,10 @@ export { Select } from './components/select/index.cjs';
 export { SegmentedControl, SegmentedControlProps } from './components/segmented-control/index.cjs';
 export { Sidebar, useSidebarItemStyles, useSidebarStyles } from './components/sidebar/index.cjs';
 export { useSidebar } from '@saas-ui/core/sidebar';
-export { Toaster, ToasterProps, toast } from './components/toaster/index.cjs';
 export { Spinner, SpinnerProps } from './components/spinner/index.cjs';
 export { Steps } from './components/steps/index.cjs';
 export { Switch, SwitchProps } from './components/switch/index.cjs';
+export { Toaster, ToasterProps, toast } from './components/toaster/index.cjs';
 export { Tooltip, TooltipProps } from './components/tooltip/index.cjs';
 import '@ark-ui/react/dialog';
 import '@ark-ui/react';

package/dist/index.d.ts

@@ -31,10 +31,10 @@ export { Select } from './components/select/index.js';
 export { SegmentedControl, SegmentedControlProps } from './components/segmented-control/index.js';
 export { Sidebar, useSidebarItemStyles, useSidebarStyles } from './components/sidebar/index.js';
 export { useSidebar } from '@saas-ui/core/sidebar';
-export { Toaster, ToasterProps, toast } from './components/toaster/index.js';
 export { Spinner, SpinnerProps } from './components/spinner/index.js';
 export { Steps } from './components/steps/index.js';
 export { Switch, SwitchProps } from './components/switch/index.js';
+export { Toaster, ToasterProps, toast } from './components/toaster/index.js';
 export { Tooltip, TooltipProps } from './components/tooltip/index.js';
 import '@ark-ui/react/dialog';
 import '@ark-ui/react';

package/dist/index.js

@@ -1,25 +1,18 @@
 import {
-  Toaster,
-  toast
-} from "./chunk-HELHPHIQ.js";
+  Tooltip
+} from "./chunk-QSNSWCTM.js";
 import {
   colors
 } from "./chunk-3MO37LYW.js";
-import {
-  SearchInput
-} from "./chunk-LIYUBUOP.js";
 import {
   SegmentedControl
 } from "./chunk-SKXSBAOS.js";
+import {
+  SearchInput
+} from "./chunk-LIYUBUOP.js";
 import {
   namespace_exports as namespace_exports3
 } from "./chunk-S3CQW7GD.js";
-import {
-  steps_exports
-} from "./chunk-6LOMIKR5.js";
-import {
-  Switch
-} from "./chunk-SA3OGTOO.js";
 import {
   sidebar_exports,
   useSidebar,
@@ -27,8 +20,18 @@ import {
   useSidebarStyles
 } from "./chunk-GGAKUS66.js";
 import {
-  Tooltip
-} from "./chunk-QSNSWCTM.js";
+  Switch
+} from "./chunk-SA3OGTOO.js";
+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,23 +42,20 @@ import {
 import {
   navbar_exports
 } from "./chunk-Q6SNJJO2.js";
-import {
-  menu_exports
-} from "./chunk-JGHXJ3PI.js";
 import {
   NumberInput
 } from "./chunk-ULAJ3JEO.js";
 import {
   PasswordInput
 } from "./chunk-CD2JUFI2.js";
+import {
+  PinInput
+} from "./chunk-2EUACKRH.js";
 import {
   Persona,
   PersonaAvatar,
   defaultPresenceOptions
 } from "./chunk-M7FOBCOV.js";
-import {
-  PinInput
-} from "./chunk-2EUACKRH.js";
 import {
   Radio,
   RadioGroup
@@ -454,7 +454,7 @@ var buttonRecipe = defineRecipe({
         minW: "8",
         textStyle: "sm",
         borderRadius: "md",
-        px: "3"
+        px: "2.5"
       },
       md: {
         gap: "2",
@@ -462,7 +462,7 @@ var buttonRecipe = defineRecipe({
         minW: "8",
         borderRadius: "md",
         textStyle: "sm",
-        px: "4"
+        px: "3"
       },
       lg: {
         gap: "3",
@@ -470,7 +470,7 @@ var buttonRecipe = defineRecipe({
         minW: "10",
         borderRadius: "lg",
         textStyle: "md",
-        px: "5"
+        px: "4.5"
       },
       xl: {
         gap: "3",
@@ -755,14 +755,14 @@ var checkmarkRecipe = defineRecipe5({
         boxSize: "3"
       },
       sm: {
-        boxSize: "4"
+        boxSize: "3.5"
       },
       md: {
-        boxSize: "5",
+        boxSize: "4",
         p: "0.5"
       },
       lg: {
-        boxSize: "6",
+        boxSize: "5",
         p: "0.5"
       }
     },
@@ -919,7 +919,6 @@ var inputRecipe = defineRecipe10({
     position: "relative",
     appearance: "none",
     textAlign: "start",
-    borderRadius: "l2",
     _disabled: {
       layerStyle: "disabled"
     },
@@ -935,28 +934,33 @@ var inputRecipe = defineRecipe10({
   variants: {
     size: {
       xs: {
+        borderRadius: "sm",
         textStyle: "xs",
         px: "2",
-        "--input-height": "sizes.8"
+        "--input-height": "sizes.6"
       },
       sm: {
+        borderRadius: "sm",
         textStyle: "sm",
         px: "2.5",
-        "--input-height": "sizes.9"
+        "--input-height": "sizes.7"
       },
       md: {
+        borderRadius: "md",
         textStyle: "sm",
         px: "3",
-        "--input-height": "sizes.10"
+        "--input-height": "sizes.8"
       },
       lg: {
+        borderRadius: "lg",
         textStyle: "md",
-        px: "4",
-        "--input-height": "sizes.11"
+        px: "4.5",
+        "--input-height": "sizes.10"
       },
       xl: {
+        borderRadius: "lg",
         textStyle: "md",
-        px: "4.5",
+        px: "6",
         "--input-height": "sizes.12"
       }
     },
@@ -1234,13 +1238,13 @@ var radiomarkRecipe = defineRecipe15({
         boxSize: "3"
       },
       sm: {
-        boxSize: "4"
+        boxSize: "3.5"
       },
       md: {
-        boxSize: "5"
+        boxSize: "4"
       },
       lg: {
-        boxSize: "6"
+        boxSize: "5"
       }
     }
   },
@@ -1430,7 +1434,6 @@ var textareaRecipe = defineRecipe20({
     position: "relative",
     appearance: "none",
     textAlign: "start",
-    borderRadius: "l2",
     _disabled: {
       layerStyle: "disabled"
     },
@@ -1444,30 +1447,35 @@ var textareaRecipe = defineRecipe20({
   variants: {
     size: {
       xs: {
+        borderRadius: "sm",
         textStyle: "xs",
         px: "2",
         py: "1.5",
         scrollPaddingBottom: "1.5"
       },
       sm: {
+        borderRadius: "sm",
         textStyle: "sm",
         px: "2.5",
         py: "2",
         scrollPaddingBottom: "2"
       },
       md: {
+        borderRadius: "md",
         textStyle: "sm",
         px: "3",
         py: "2",
         scrollPaddingBottom: "2"
       },
       lg: {
+        borderRadius: "md",
         textStyle: "md",
         px: "4",
         py: "3",
         scrollPaddingBottom: "3"
       },
       xl: {
+        borderRadius: "lg",
         textStyle: "md",
         px: "4.5",
         py: "3.5",
@@ -5157,7 +5165,6 @@ var selectSlotRecipe = defineSlotRecipe28({
       width: "full",
       minH: "var(--select-trigger-height)",
       px: "var(--select-trigger-padding-x)",
-      borderRadius: "l2",
       userSelect: "none",
       textAlign: "start",
       focusVisibleRing: "inside",
@@ -5219,7 +5226,7 @@ var selectSlotRecipe = defineSlotRecipe28({
       textAlign: "start",
       borderRadius: "l1",
       _highlighted: {
-        bg: { _light: "bg.muted", _dark: "bg.emphasized" }
+        bg: "bg.subtle"
       },
       _disabled: {
         pointerEvents: "none",
@@ -5279,7 +5286,7 @@ var selectSlotRecipe = defineSlotRecipe28({
     size: {
       xs: {
         root: {
-          "--select-trigger-height": "sizes.8",
+          "--select-trigger-height": "sizes.6",
           "--select-trigger-padding-x": "spacing.2"
         },
         content: {
@@ -5288,6 +5295,7 @@ var selectSlotRecipe = defineSlotRecipe28({
           textStyle: "xs"
         },
         trigger: {
+          borderRadius: "sm",
           textStyle: "xs",
           gap: "1"
         },
@@ -5308,7 +5316,7 @@ var selectSlotRecipe = defineSlotRecipe28({
       },
       sm: {
         root: {
-          "--select-trigger-height": "sizes.9",
+          "--select-trigger-height": "sizes.7",
           "--select-trigger-padding-x": "spacing.2.5"
         },
         content: {
@@ -5316,6 +5324,7 @@ var selectSlotRecipe = defineSlotRecipe28({
           textStyle: "sm"
         },
         trigger: {
+          borderRadius: "sm",
           textStyle: "sm",
           gap: "1"
         },
@@ -5339,7 +5348,7 @@ var selectSlotRecipe = defineSlotRecipe28({
       },
       md: {
         root: {
-          "--select-trigger-height": "sizes.10",
+          "--select-trigger-height": "sizes.8",
           "--select-trigger-padding-x": "spacing.3"
         },
         content: {
@@ -5363,6 +5372,7 @@ var selectSlotRecipe = defineSlotRecipe28({
           px: "2"
         },
         trigger: {
+          borderRadius: "md",
           textStyle: "sm",
           gap: "2"
         },
@@ -5375,7 +5385,7 @@ var selectSlotRecipe = defineSlotRecipe28({
       },
       lg: {
         root: {
-          "--select-trigger-height": "sizes.12",
+          "--select-trigger-height": "sizes.10",
           "--select-trigger-padding-x": "spacing.4"
         },
         content: {
@@ -5394,6 +5404,7 @@ var selectSlotRecipe = defineSlotRecipe28({
           px: "3"
         },
         trigger: {
+          borderRadius: "md",
           textStyle: "md",
           py: "3",
           gap: "2"
@@ -5690,7 +5701,15 @@ var pinInputSlotRecipe = defineSlotRecipe31({
     }
   },
   variants: {
-    size: mapEntries(variants2.size, (key, value) => [key, { input: value }]),
+    size: mapEntries(variants2.size, (key, value) => [
+      key,
+      {
+        input: {
+          ...value,
+          px: 0
+        }
+      }
+    ]),
     variant: mapEntries(variants2.variant, (key, value) => [
       key,
       { input: value }
@@ -8423,6 +8442,7 @@ var spacing = defineTokens14.spacing({
   3: { value: scaleToken("0.75rem") },
   3.5: { value: scaleToken("0.875rem") },
   4: { value: scaleToken("1rem") },
+  4.5: { value: scaleToken("1.125rem") },
   5: { value: scaleToken("1.25rem") },
   6: { value: scaleToken("1.5rem") },
   7: { value: scaleToken("1.75rem") },

package/package.json

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