@eightshift/ui-components 5.6.1 → 6.0.0

package/dist/components/toggle/switch.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { a as $64fa3d84918910a7$export$29f1550f4b0d4415, l as $df56164dff5785e2$export$4338b53315abf666, m as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$ef03459518577ad4, h as $64fa3d84918910a7$export$4d86445c2cf5e3, b as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-cvK1vxO7.js";
+import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, k as $df56164dff5785e2$export$4338b53315abf666, l as $5dc95899b306f630$export$c9058316764c140e, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, a as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../../utils-DGpXyJOJ.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import React__default, { forwardRef, createContext } from "react";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-CzN79ary.js";
-import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-DSBDAfdw.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-BRDW3y7-.js";
-import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-CgnIuZJ2.js";
-import { c as clsx } from "../../lite-DVmmD_-j.js";
+import $dbSRa$react__default, { forwardRef, createContext } from "react";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-VkXJjsru.js";
+import { $ as $d2c8e2b0480f3f34$export$cbe85ee05b554577 } from "../../useToggle-BZhaYwZl.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
+import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
+import { $ as $5c3e21d68f1c4674$export$439d29a4e110a164 } from "../../VisuallyHidden-DTUuKFiI.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 function $b418ec0c85c52f27$export$d853f7095ae95f88(props, state, ref) {
   let { labelProps, inputProps, isSelected, isPressed, isDisabled, isReadOnly } = $d2c8e2b0480f3f34$export$cbe85ee05b554577(props, state, ref);
   return {
@@ -59,7 +59,7 @@ const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef(fun
   });
   delete DOMProps.id;
   delete DOMProps.onClick;
-  return /* @__PURE__ */ React__default.createElement("label", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("label", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, labelProps, hoverProps, renderProps),
     ref,
     slot: props.slot || void 0,
@@ -70,9 +70,9 @@ const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef(fun
     "data-focus-visible": isFocusVisible || void 0,
     "data-disabled": isDisabled || void 0,
     "data-readonly": isReadOnly || void 0
-  }, /* @__PURE__ */ React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, {
     elementType: "span"
-  }, /* @__PURE__ */ React__default.createElement("input", {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement("input", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(inputProps, focusProps),
     ref: inputRef
   })), renderProps.children);
@@ -88,8 +88,12 @@ const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef(fun
  * @param {string} [props.id] - The ID of the switch.
  * @param {string} [props.className] - Classes to pass to the switch.
  * @param {boolean} [props.isIndeterminate] - If `true`, the switch will render in an indeterminate state.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
+ * @param {SwitchSize} [props.size='default'] - The size of the switch.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
+ * @typedef {'default' | 'medium' | 'small'} SwitchSize
+ *
  * @returns {JSX.Element} The Switch component.
  *
  * @example
@@ -103,7 +107,150 @@ const $8e59e948500a8fe1$export$b5d5cf8927ab7262 = /* @__PURE__ */ forwardRef(fun
  * @preserve
  */
 const Switch2 = (props) => {
-  const { checked, onChange, disabled, id, children, className, isIndeterminate, hidden, ...rest } = props;
+  const { checked, onChange, disabled, id, children, className, isIndeterminate, flat, hidden, size = "default", ...rest } = props;
+  const outsideClasses = cva(
+    [
+      "es:flex es:shrink-0 es:items-center",
+      "es:rounded-full",
+      "es:transition es:duration-300",
+      "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/30 es:group-focus-visible:inset-ring-accent-500",
+      "es:inset-ring",
+      className
+    ],
+    {
+      variants: {
+        size: {
+          small: "es:h-3 es:w-5 es:p-0.5",
+          medium: "es:h-4.5 es:w-7.5 es:p-0.75",
+          default: "es:h-6 es:w-10 es:p-1"
+        },
+        disabled: {
+          false: [!flat && "es:shadow-xs es:shadow-black/5", "es:cursor-pointer"]
+        }
+      },
+      compoundVariants: [
+        {
+          checked: false,
+          disabled: false,
+          class: [
+            "es:inset-ring-secondary-400 es:bg-white es:bg-linear-to-r es:from-secondary-800/1 es:to-secondary-800/3",
+            "es:hover:bg-surface-100",
+            "es:group-hover:inset-ring-surface-400"
+          ]
+        },
+        {
+          checked: true,
+          disabled: false,
+          class: [
+            "es:bg-accent-500",
+            "es:bg-linear-to-r es:from-accent-800/0 es:to-accent-800/25",
+            "es:inset-ring-accent-800/30",
+            "es:inset-shadow-xs es:inset-shadow-accent-50/25",
+            "es:group-focus-visible:inset-ring-accent-800"
+          ]
+        },
+        {
+          checked: false,
+          disabled: true,
+          class: ["es:inset-ring-secondary-300 es:bg-white"]
+        },
+        {
+          checked: true,
+          disabled: true,
+          class: ["es:inset-ring-secondary-300 es:bg-secondary-300"]
+        }
+      ],
+      defaultVariants: {
+        disabled: false,
+        checked: false,
+        size: "default"
+      }
+    }
+  );
+  const thumbClasses = cva(["es:block es:rounded-full es:will-change-transform", "es:shrink-0", "es:no-webkit-highlight", "es:transition es:ease-spring-bouncy es:duration-400"], {
+    variants: {
+      disabled: {
+        false: [!flat && "es:shadow-xs es:shadow-black/5"]
+      },
+      checked: {
+        false: "es:not-pressed:scale-90",
+        true: "es:scale-110"
+      },
+      size: {
+        small: "es:size-2",
+        medium: "es:size-3",
+        default: "es:size-4"
+      }
+    },
+    compoundVariants: [
+      {
+        checked: true,
+        indeterminate: false,
+        size: "small",
+        class: "es:translate-x-2"
+      },
+      {
+        checked: true,
+        indeterminate: false,
+        size: "medium",
+        class: "es:translate-x-3"
+      },
+      {
+        checked: true,
+        indeterminate: false,
+        size: "default",
+        class: "es:translate-x-4"
+      },
+      {
+        checked: false,
+        indeterminate: true,
+        size: "small",
+        class: "es:translate-x-1"
+      },
+      {
+        checked: false,
+        indeterminate: true,
+        size: "medium",
+        class: "es:translate-x-1.5"
+      },
+      {
+        checked: false,
+        indeterminate: true,
+        size: "default",
+        class: "es:translate-x-2"
+      },
+      {
+        checked: false,
+        indeterminate: true,
+        class: "es:scale-100"
+      },
+      {
+        checked: false,
+        disabled: false,
+        class: ["es:bg-secondary-500", "es:group-hover:bg-surface-500"]
+      },
+      {
+        checked: true,
+        disabled: false,
+        class: ["es:bg-accent-50", "es:bg-linear-to-br es:from-white/10 es:to-white/20", "es:shadow-xs es:shadow-accent-950/20"]
+      },
+      {
+        checked: false,
+        disabled: true,
+        class: ["es:bg-secondary-400"]
+      },
+      {
+        checked: true,
+        disabled: true,
+        class: ["es:bg-white"]
+      }
+    ],
+    defaultVariants: {
+      disabled: false,
+      checked: false,
+      size: "default"
+    }
+  });
   if (hidden) {
     return null;
   }
@@ -114,43 +261,31 @@ const Switch2 = (props) => {
       isDisabled: disabled,
       isSelected: checked ?? false,
       onChange,
-      className: "es:group es:flex es:items-center es:justify-between es:gap-2 es:any-focus:outline-hidden",
+      className: "es:group es:flex es:items-center es:justify-between es:gap-2.5 es:any-focus:outline-hidden",
       ...rest,
       children: [
         children,
-        /* @__PURE__ */ jsx("div", { className: clsx("es:flex es:shrink-0 es:items-center es:justify-center es:min-h-6.5", className), children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: clsx(
-              "es:shrink-0 es:group-not-disabled:cursor-pointer es:no-webkit-highlight",
-              "es:h-5 es:w-9 es:p-[0.1875rem] es:rounded-full",
-              "es:bg-radial-[circle_at_75%_50%]",
-              "es:border es:inset-ring es:inset-shadow-xs",
-              "es:transition",
-              "es:group-focus-visible:ring-2 es:group-focus-visible:ring-accent-500/50 es:group-focus-visible:border-accent-600",
-              !checked && !disabled && "es:border-secondary-400 es:inset-ring-secondary-100 es:from-white es:to-secondary-100",
-              checked && !disabled && "es:border-accent-700/75 es:inset-ring-accent-500 es:to-accent-500 es:from-accent-600 es:shadow-accent-600/30",
-              disabled && "es:cursor-default es:border-secondary-300 es:from-white es:to-secondary-50 es:inset-ring-0 es:inset-shadow-secondary-100",
-              !disabled && "es:shadow-sm"
-            ),
+            className: outsideClasses({
+              checked: checked ?? false,
+              disabled: Boolean(disabled),
+              size
+            }),
             children: /* @__PURE__ */ jsx(
-              "span",
+              "div",
               {
-                className: clsx(
-                  "es:block es:size-3 es:rounded-full es:border es:will-change-transform es:bg-radial",
-                  "es:transition es:motion-ease-spring-bouncy es:ease-[var(--motion-spring-bouncy)] es:duration-200",
-                  !checked && "es:scale-95",
-                  !checked && !disabled && "es:border-secondary-500 es:from-secondary-500 es:to-secondary-600",
-                  checked && "es:translate-x-4",
-                  checked && !disabled && "es:border-accent-600/20 es:from-white es:to-accent-500/30 es:from-40% es:bg-white es:shadow-sm es:shadow-accent-900/60",
-                  disabled && "es:border-secondary-300",
-                  checked && disabled && "es:bg-secondary-200",
-                  isIndeterminate && "es:translate-x-2 es:scale-100"
-                )
+                className: thumbClasses({
+                  checked: checked ?? false,
+                  disabled: Boolean(disabled),
+                  indeterminate: Boolean(isIndeterminate),
+                  size
+                })
               }
             )
           }
-        ) })
+        )
       ]
     }
   );

package/dist/components/toggle/toggle.js

@@ -1,7 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-DWVaNd2E.js";
+import { $ as $01b77f81d0f07f68$export$b04be29aa201d4f5 } from "../../Label-D8a3eYb-.js";
 import { Switch } from "./switch.js";
 import { RichLabel } from "../rich-label/rich-label.js";
+import { c as clsx } from "../../lite-DVmmD_-j.js";
 /**
  * A toggle switch with a label and optional icon and subtitle.
  *
@@ -16,6 +17,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @param {string} [props.className] - Classes to pass to the toggle switch.
  * @param {string} [props.labelClassName] - Classes to pass to the label.
  * @param {boolean} [props.isIndeterminate] - If `true`, the switch will render in an indeterminate state.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat. Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The Toggle component.
@@ -33,7 +35,7 @@ import { RichLabel } from "../rich-label/rich-label.js";
  * @preserve
  */
 const Toggle = (props) => {
-  const { checked, onChange, icon, label, subtitle, disabled, className, labelClassName, isIndeterminate, hidden } = props;
+  const { checked, onChange, icon, label, subtitle, disabled, className, labelClassName, isIndeterminate, flat, hidden } = props;
   if (hidden) {
     return null;
   }
@@ -45,6 +47,7 @@ const Toggle = (props) => {
       disabled,
       className,
       isIndeterminate,
+      flat,
       children: /* @__PURE__ */ jsx(
         RichLabel,
         {
@@ -52,7 +55,7 @@ const Toggle = (props) => {
           icon,
           label,
           subtitle,
-          className: labelClassName,
+          className: clsx("es:py-2", labelClassName),
           fullWidth: true
         }
       )

package/dist/components/toggle-button/toggle-button.js

@@ -1,13 +1,13 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { p as $ff5963eb1fccf552$export$e08e3b67e392101e, b as $3ef42575df84b30b$export$9d1611c77c2fe928, a as $64fa3d84918910a7$export$29f1550f4b0d4415, h as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-cvK1vxO7.js";
+import { o as $ff5963eb1fccf552$export$e08e3b67e392101e, a as $3ef42575df84b30b$export$9d1611c77c2fe928, $ as $64fa3d84918910a7$export$29f1550f4b0d4415, g as $64fa3d84918910a7$export$4d86445c2cf5e3 } from "../../utils-DGpXyJOJ.js";
 import { $ as $1d5b8b8664671ef2$export$c9549807523555e0 } from "../../SelectionIndicator-D7WMzeAW.js";
-import React__default, { createContext, forwardRef, useContext } from "react";
+import $dbSRa$react__default, { createContext, forwardRef, useContext } from "react";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../../filterDOMProps-D2C6R0DK.js";
-import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-CzN79ary.js";
-import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-v9ngEj50.js";
-import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-Cgm0R4Cf.js";
-import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-BRDW3y7-.js";
-import { c as cva } from "../../index-Dq3gT5pW.js";
+import { $ as $3017fa7ffdddec74$export$8042c6c013fd5226 } from "../../useToggleState-VkXJjsru.js";
+import { $ as $701a24aa0da5b062$export$ea18c227d4417cc3 } from "../../useButton-DdZrS1Kz.js";
+import { a as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../../useFocusRing-D3b7Kh4P.js";
+import { w as $6179b936705e76d3$export$ae780daf29e6d456 } from "../../useHover-Bycb7BsD.js";
+import { c as cva } from "../../index-BHpUy2Ix.js";
 import { Tooltip } from "../tooltip/tooltip.js";
 function $55f54f7887471b58$export$51e84d46ca0bc451(props, state, ref) {
   const { isSelected } = state;
@@ -91,7 +91,7 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
   });
   delete DOMProps.id;
   delete DOMProps.onClick;
-  return /* @__PURE__ */ React__default.createElement("button", {
+  return /* @__PURE__ */ $dbSRa$react__default.createElement("button", {
     ...$3ef42575df84b30b$export$9d1611c77c2fe928(DOMProps, renderProps, buttonProps, focusProps, hoverProps),
     ref,
     slot: props.slot || void 0,
@@ -101,7 +101,7 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
     "data-selected": isSelected || void 0,
     "data-hovered": isHovered || void 0,
     "data-focus-visible": isFocusVisible || void 0
-  }, /* @__PURE__ */ React__default.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, {
+  }, /* @__PURE__ */ $dbSRa$react__default.createElement($1d5b8b8664671ef2$export$c9549807523555e0.Provider, {
     value: {
       isSelected
     }
@@ -127,12 +127,13 @@ const $efde0372d7a700fe$export$d2b052e7b4be1756 = /* @__PURE__ */ forwardRef(fun
  * @param {Function} [props.onChange] - Function to run when the toggle state changes.
  * @param {string} [props.wrapperClassName] - Classes to pass to the tooltip wrapper.
  * @param {TooltipProps} [props.tooltipProps] - Props to pass to the tooltip.
+ * @param {boolean} [props.flat] - If `true`, component will look more flat (applies only to `default` type). Useful for nested layer of controls.
  * @param {boolean} [props.hidden] - If `true`, the component is not rendered.
  *
  * @returns {JSX.Element} The ToggleButton component.
  *
  * @typedef {'small' | 'default' | 'large'} ToggleButtonSize
- * @typedef {'default'| 'ghost'} ToggleButtonType
+ * @typedef {'default'| 'ghost' | 'simple'} ToggleButtonType
  *
  * @example
  * const [selected, setSelected] = useState(false);
@@ -166,6 +167,7 @@ const ToggleButton2 = (props) => {
     onChange,
     wrapperClassName,
     tooltipProps,
+    flat,
     hidden,
     "aria-label": ariaLabel,
     ...other
@@ -175,89 +177,171 @@ const ToggleButton2 = (props) => {
   }
   const componentClasses = cva(
     [
-      "es:flex es:items-center es:gap-1",
-      "es:transition es:duration-300 es:border es:text-sm",
-      "es:any-focus:outline-hidden es:focus-visible:z-10",
-      "es:focus-visible:ring-2 es:focus-visible:ring-accent-500/50",
-      "es:focus-visible:border-accent-500",
-      "es:btn-group-mid:rounded-none",
-      "es:btn-group-h-start:rounded-r-none es:btn-group-v-start:rounded-b-none",
-      "es:btn-group-h-end:rounded-l-none es:btn-group-v-end:rounded-t-none",
-      "es:enabled:not-pending:cursor-pointer",
+      'es:font-variation-["wdth"_80,"YTLC"_520,"wdth"_64,"wght"_375]',
+      "es:flex es:items-center",
+      "es:transition-plus es:duration-300 es:ease-spring-snappy es:text-13",
+      "es:any-focus:outline-hidden",
+      "es:focus-visible:ring-2",
       "es:shrink-0",
-      "es:pending:shadow-none! es:pending:cursor-wait",
-      "es:bg-radial-[at_50%_125%]",
-      icon && children ? "es:justify-start" : "es:justify-center",
+      "es:text-box-trim",
+      "es:leading-none",
+      "es:icon:size-5",
+      !disabled && "es:cursor-pointer",
+      icon && children ? "es:justify-start" : "es:justify-center-safe",
       className
     ],
     {
       variants: {
         size: {
-          small: "es:icon:size-5 es:rounded-7",
-          default: "es:icon:size-5 es:rounded-10",
-          large: "es:icon:size-6 es:rounded-xl"
+          small: "es:gap-0.75",
+          default: "es:gap-1.25",
+          large: "es:gap-1.5"
+        },
+        selected: {
+          false: [
+            "es:btn-group-h:not-pressed:not-after-current:not-first:rounded-l-sm",
+            "es:btn-group-h:not-pressed:not-before-current:not-last:rounded-r-sm",
+            "es:btn-group-v:not-pressed:not-after-current:not-first:rounded-t-sm",
+            "es:btn-group-v:not-pressed:not-before-current:not-last:rounded-b-sm"
+          ]
         }
       },
       compoundVariants: [
+        {
+          size: "small",
+          selected: true,
+          class: "es:rounded-14"
+        },
+        {
+          size: "default",
+          selected: true,
+          class: "es:rounded-18"
+        },
+        {
+          size: "large",
+          selected: true,
+          class: "es:rounded-3xl"
+        },
+        {
+          size: "small",
+          selected: false,
+          class: "es:rounded-md es:hover:rounded-10! es:pressed:rounded-14!"
+        },
+        {
+          size: "default",
+          selected: false,
+          class: "es:rounded-10 es:hover:rounded-xl! es:pressed:rounded-18!"
+        },
+        {
+          size: "large",
+          selected: false,
+          class: "es:rounded-xl es:hover:rounded-2xl! es:pressed:rounded-3xl!"
+        },
+        // Default
         {
           type: "default",
           disabled: false,
           selected: false,
           class: [
             "es:text-black",
-            "es:from-white es:to-secondary-50",
-            "es:border-secondary-300",
-            "es:inset-ring es:inset-ring-secondary-100",
-            "es:inset-shadow-xs es:inset-shadow-secondary-100/50",
-            "es:shadow-sm",
-            "es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm es:hover:inset-shadow-secondary-100 es:hover:to-secondary-100 es:hover:inset-ring-secondary-100",
-            "es:hover:text-accent-950",
-            "es:focus-visible:text-accent-950"
+            "es:bg-linear-to-b es:from-black/2 es:to-black/4 es:from-25% es:bg-white",
+            "es:inset-ring es:inset-ring-secondary-800/20",
+            "es:inset-shadow-sm es:inset-shadow-white/75",
+            !flat && "es:shadow-xs es:shadow-black/5",
+            "es:hover:bg-surface-100 es:hover:text-accent-900 es:hover:inset-ring-surface-300 es:hover:inset-shadow-white/10",
+            "es:pressed:bg-surface-100 es:pressed:text-accent-950 es:pressed:inset-ring-surface-300 es:pressed:inset-shadow-white/10",
+            "es:focus-visible:ring-accent-500/30 es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:bg-accent-50"
           ]
         },
         {
-          type: ["default", "ghost"],
+          type: "default",
           disabled: false,
           selected: true,
           class: [
-            "es:text-white",
-            "es:from-accent-500 es:to-accent-600",
-            "es:border-accent-700",
+            'es:font-variation-["wdth"_80,"YTLC"_520,"wdth"_64,"wght"_375,"GRAD"_150]',
+            "es:any-icon:drop-shadow-xs es:any-icon:drop-shadow-accent-800/25",
+            "es:text-white es:text-shadow-xs es:text-shadow-accent-900/30",
+            "es:bg-linear-to-b es:from-accent-800/10 es:to-accent-800/30 es:bg-accent-500 es:from-30%",
             "es:inset-ring es:inset-ring-accent-600",
-            "es:inset-shadow-xs es:inset-shadow-accent-400/75",
-            "es:focus-visible:border-accent-700",
-            "es:focus-visible:inset-ring es:focus-visible:inset-ring-accent-600",
-            "es:focus-visible:inset-shadow-xs es:focus-visible:inset-shadow-accent-400",
-            "es:shadow es:shadow-accent-600/30 es:enabled:hover:shadow-md es:enabled:active:shadow-sm es:enabled:pressed:shadow-sm"
+            "es:inset-shadow-sm es:inset-shadow-accent-50/25",
+            !flat && "es:shadow-xs es:shadow-accent-900/30",
+            "es:hover:from-accent-800/20 es:hover:to-accent-800/40",
+            "es:pressed:from-accent-800/30 es:pressed:to-accent-800/50",
+            "es:focus-visible:ring-accent-500/30 es:focus-visible:inset-ring-accent-700 es:focus-visible:bg-accent-600"
           ]
         },
+        // Simple
+        {
+          type: "simple",
+          disabled: false,
+          selected: false,
+          class: [
+            "es:text-black",
+            "es:bg-secondary-50 es:bg-linear-to-br es:from-surface-500/2 es:to-surface-500/10",
+            "es:hover:bg-surface-100 es:hover:text-accent-900 es:hover:inset-ring-surface-300 es:hover:inset-shadow-white/10 es:hover:to-accent-700/5",
+            "es:pressed:bg-surface-100 es:pressed:text-accent-950 es:pressed:inset-ring-surface-300 es:pressed:inset-shadow-white/10",
+            "es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:text-accent-950 es:focus-visible:inset-ring-accent-500 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:bg-accent-50"
+          ]
+        },
+        {
+          type: "simple",
+          disabled: false,
+          selected: true,
+          class: [
+            "es:text-white",
+            "es:bg-linear-to-br es:from-accent-600/55 es:to-accent-600/90 es:text-white",
+            "es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:inset-ring-accent-500 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:bg-accent-50",
+            "es:inset-ring es:inset-ring-accent-800/15"
+          ]
+        },
+        // Ghost
         {
           type: "ghost",
           disabled: false,
           selected: false,
           class: [
-            "es:border-accent-500/0 es:text-secondary-700",
-            "es:hover:bg-accent-500/10 es:hover:text-accent-700",
-            "es:active:bg-accent-50 es:pressed:bg-accent-50 es:active:text-accent-950 es:pressed:text-accent-950",
-            "es:focus-visible:text-accent-700",
-            "es:inset-ring es:inset-ring-accent-600/0",
-            "es:inset-shadow-xs es:inset-shadow-accent-400/0"
+            "es:bg-white",
+            "es:bg-linear-to-br es:from-surface-200/0 es:to-surface-200/0 es:text-secondary-700",
+            "es:hover:from-surface-200/30 es:hover:to-surface-200/50 es:hover:text-accent-950",
+            "es:pressed:from-accent-600/5 es:pressed:to-accent-600/15 es:pressed:text-accent-900",
+            "es:focus-visible:bg-accent-50 es:focus-visible:text-accent-950 es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:inset-ring-accent-500"
           ]
         },
         {
+          type: "ghost",
+          disabled: false,
+          selected: true,
+          class: [
+            "es:bg-white",
+            "es:bg-linear-to-br es:from-accent-600/70 es:to-accent-600/90 es:text-white",
+            "es:inset-ring es:inset-ring-accent-800/15",
+            "es:focus-visible:bg-accent-50 es:focus-visible:inset-ring es:focus-visible:ring-accent-500/30 es:focus-visible:inset-shadow-accent-300/10 es:focus-visible:inset-ring-accent-500"
+          ]
+        },
+        {
+          type: ["default"],
+          disabled: true,
+          class: [
+            "es:bg-linear-to-br es:from-secondary-50 es:to-secondary-100",
+            "es:text-secondary-400 es:any-icon:text-secondary-400/50",
+            "es:inset-ring es:inset-ring-secondary-200"
+          ]
+        },
+        {
+          type: ["ghost"],
           disabled: true,
-          class: "es:disabled:border-zinc-300 es:disabled:text-zinc-400 es:border es:shadow-none es:disabled:inset-shadow-transparent es:disabled:inset-ring-0"
+          class: ["es:text-secondary-500 es:any-icon:text-secondary-500/50"]
         },
         // Sizes.
         {
           size: "small",
           iconOnly: false,
-          class: "es:h-7 es:min-w-7"
+          class: "es:h-8 es:min-w-8"
         },
         {
           size: "small",
           iconOnly: true,
-          class: "es:size-7"
+          class: "es:size-8"
         },
         {
           size: "small",
@@ -269,7 +353,7 @@ const ToggleButton2 = (props) => {
           size: "small",
           hasIcon: true,
           iconOnly: false,
-          class: "es:px-1"
+          class: "es:px-1.5"
         },
         {
           size: "default",
@@ -285,13 +369,13 @@ const ToggleButton2 = (props) => {
           size: "default",
           hasIcon: false,
           iconOnly: false,
-          class: "es:px-2"
+          class: "es:px-2.5"
         },
         {
           size: "default",
           hasIcon: true,
           iconOnly: false,
-          class: "es:px-1.5"
+          class: "es:px-2"
         },
         {
           size: "large",
@@ -307,13 +391,13 @@ const ToggleButton2 = (props) => {
           size: "large",
           hasIcon: false,
           iconOnly: false,
-          class: "es:px-4"
+          class: "es:px-3"
         },
         {
           size: "large",
           hasIcon: true,
           iconOnly: false,
-          class: "es:px-2"
+          class: "es:px-2.5"
         }
       ],
       defaultVariants: {