@umami/react-zen 0.123.0 → 0.126.0

package/dist/index.css

@@ -3046,7 +3046,7 @@
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__NDYwM {
+.Button_button__YTAxZ {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3065,86 +3065,89 @@
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__NDYwM:disabled {
+.Button_button__YTAxZ:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__NDYwM:hover {
+.Button_button__YTAxZ:hover {
   color: var(--font-color);
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__NDYwM[data-pressed] {
+.Button_button__YTAxZ[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M {
+.Button_button__YTAxZ.Button_primary__NDFlY {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__NDYwM.Button_primary__OWE0M:hover {
+.Button_button__YTAxZ.Button_primary__NDFlY:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M[data-pressed] {
+.Button_button__YTAxZ.Button_primary__NDFlY[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M:disabled {
+.Button_button__YTAxZ.Button_primary__NDFlY:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__NDYwM.Button_outline__NTQyN {
+.Button_button__YTAxZ.Button_outline__ZjQ3O {
   background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__NDYwM.Button_outline__NTQyN:hover {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:hover {
   border-color: var(--border-color-3);
 }
-.Button_button__NDYwM.Button_outline__NTQyN[data-pressed] {
+.Button_button__YTAxZ.Button_outline__ZjQ3O[data-pressed] {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:disabled {
+  background: var(--base-color-2);
+}
+.Button_button__YTAxZ.Button_quiet__ZWYwN {
   background: transparent;
 }
-.Button_button__NDYwM.Button_quiet__NDFjM:hover {
+.Button_button__YTAxZ.Button_quiet__ZWYwN:hover {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM[data-pressed] {
+.Button_button__YTAxZ.Button_quiet__ZWYwN[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__NDYwM.Button_danger__NDUzM {
+.Button_button__YTAxZ.Button_danger__YTg1M {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:hover {
+.Button_button__YTAxZ.Button_danger__YTg1M:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM[data-pressed] {
+.Button_button__YTAxZ.Button_danger__YTg1M[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:disabled {
+.Button_button__YTAxZ.Button_danger__YTg1M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__NDYwM.Button_sm__NTVjM {
+.Button_button__YTAxZ.Button_sm__ZTAwM {
   font-size: calc(0.9 * var(--font-size));
   padding: calc(0.5 * var(--padding-y)) calc(0.75 * var(--padding-x));
   min-height: calc(0.9 * var(--button-height));
 }
-.Button_button__NDYwM.Button_md__NDE4O {
+.Button_button__YTAxZ.Button_md__MDNjZ {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__NDYwM.Button_lg__NTU4O {
+.Button_button__YTAxZ.Button_lg__Njc0N {
   font-size: calc(1.25 * var(--font-size));
   padding: var(--padding-y) calc(1.25 * var(--padding-x));
   min-height: calc(1.25 * var(--button-height));
 }
-.Button_button__NDYwM.Button_xl__NjFkM {
+.Button_button__YTAxZ.Button_xl__MmUxM {
   font-size: calc(1.5 * var(--font-size));
   padding: calc(1.25 * var(--padding-y)) calc(1.25 * var(--padding-x));
   min-height: calc(1.5 * var(--button-height));
 }
-body a.Button_button__NDYwM {
+body a.Button_button__YTAxZ {
   color: inherit;
   text-decoration: none;
 }
@@ -3219,60 +3222,57 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:d2946ea0055c0d1ebfac02670168114b */
-.Toast_toast__YjU0N {
+.Toast_toast__ODE0M {
   display: grid;
   grid-template-areas: "icon title action" "icon description action";
   grid-template-columns: auto 1fr auto;
   grid-auto-columns: auto;
   align-items: center;
-  background-color: var(--background-color);
+  color: var(--base-color-1);
+  background-color: var(--base-color-12);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-3);
   padding: var(--spacing-4) var(--spacing-5);
   border: var(--border);
   position: relative;
 }
-.Toast_toast__YjU0N:has(.Toast_icon__YmFhZ) {
+.Toast_toast__ODE0M:has(.Toast_icon__ZmRlO) {
   grid-template-columns: auto 1fr auto;
   column-gap: var(--gap);
 }
-.Toast_icon__YmFhZ {
+.Toast_icon__ZmRlO {
   grid-area: icon;
 }
-.Toast_icon__YmFhZ:empty {
+.Toast_icon__ZmRlO:empty {
   display: none;
 }
-.Toast_title__OGRhM {
+.Toast_title__OGFiM {
   grid-area: title;
-  color: var(--font-color);
   font-weight: 700;
 }
-.Toast_description__MDBkN {
+.Toast_description__OTAxY {
   grid-area: description;
 }
-.Toast_action__MjUxO {
+.Toast_action__YzYxM {
   grid-area: action;
   border: 0;
   background: transparent;
 }
-.Toast_close__ZDVjN {
+.Toast_close__ZmMzM {
+  grid-area: action;
   display: none;
   color: currentColor;
-  position: absolute;
-  right: var(--spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
 }
-.Toast_toast__YjU0N:hover .Toast_close__ZDVjN {
+.Toast_toast__ODE0M:hover .Toast_close__ZmMzM {
   display: block;
   cursor: pointer;
 }
-.Toast_toast__YjU0N.Toast_info__ZDRhY {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+.Toast_toast__ODE0M.Toast_success__Y2ZhZ {
+  color: var(--success-font-color);
+  background: var(--success-color);
   border: 0;
 }
-.Toast_toast__YjU0N.Toast_error__NmEwO {
+.Toast_toast__ODE0M.Toast_error__YzE0Y {
   color: var(--danger-font-color);
   background: var(--danger-color);
   border: 0;
@@ -4373,55 +4373,89 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:e3e6aca5943038cfd68ddbab1d1ccf5e */
-.RadioGroup_radiogroup__ZDJlY {
+.RadioGroup_radiogroup__ZjliM {
+  display: grid;
   font-size: var(--font-size);
   color: var(--font-color);
 }
-.RadioGroup_inputs__OTc1Y {
+.RadioGroup_inputs__NjA4N {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=vertical] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=vertical] .RadioGroup_inputs__NjA4N {
   flex-direction: column;
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=horizontal] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
   flex-direction: row;
-  gap: var(--spacing-6);
 }
-.RadioGroup_radio__ZDJiM {
+.RadioGroup_radio__MmE2Z {
   display: flex;
   align-items: center;
   gap: var(--gap);
   forced-color-adjust: none;
-}
-.RadioGroup_radio__ZDJiM:before {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  border: var(--border);
-  background: var(--background-color);
-  border-radius: 20px;
+  cursor: pointer;
   transition: all 200ms;
-  box-shadow: var(--box-shadow);
-}
-.RadioGroup_radio__ZDJiM[data-pressed]:before {
-  border-color: var(--border-color);
-}
-.RadioGroup_radio__ZDJiM[data-selected]:before {
-  border-color: var(--primary-color);
-  border-width: 7px;
-}
-.RadioGroup_radio__ZDJiM[data-selected][data-pressed]:before {
-  border-color: var(--primary-color);
 }
-.RadioGroup_radio__ZDJiM[data-disabled] {
-  color: var(--font-color-muted);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-circle__NzliY {
+  &[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
+    gap: var(--spacing-6);
+  }
+  & .RadioGroup_radio__MmE2Z:before {
+    content: "";
+    display: block;
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border: var(--border);
+    background: var(--background-color);
+    border-radius: 20px;
+    transition: all 200ms;
+    box-shadow: var(--box-shadow);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed]:before {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected]:before {
+    border-color: var(--primary-color);
+    border-width: 7px;
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed]:before {
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled]:before {
+    background-color: var(--base-color-3);
+  }
 }
-.RadioGroup_radio__ZDJiM[data-disabled]:before {
-  background-color: var(--base-color-4);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-box__Mjk3N {
+  & .RadioGroup_radio__MmE2Z {
+    justify-content: center;
+    padding: var(--padding);
+    border: var(--border);
+    border-radius: var(--border-radius);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed] {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    background-color: var(--base-color-3);
+  }
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */

package/dist/index.d.mts

@@ -180,7 +180,7 @@ interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: 'success' | 'error';
     onClose?: (action?: string) => void;
 }
 declare function Toast({ id, message, title, actions, allowClose, variant, className, children, onClose, ...props }: ToastProps): react.JSX.Element;
@@ -205,12 +205,13 @@ declare function useTheme(defaultTheme?: string): {
     setTheme: typeof setTheme;
 };
 
+type ToastVariant = 'success' | 'error';
 interface ToastOptions {
     duration?: number;
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: ToastVariant;
     onClose?: (action?: string) => void;
 }
 interface ToastState extends ToastOptions {
@@ -509,8 +510,9 @@ declare function ProgressCircle({ className, showValue, ...props }: ProgressCirc
 
 interface RadioGroupProps extends RadioGroupProps$1 {
     label?: string;
+    variant?: 'circle' | 'box';
 }
-declare function RadioGroup({ label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ variant, label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
 
 declare function Radio({ children, className, ...props }: RadioProps): react.JSX.Element;
 

package/dist/index.d.ts

@@ -180,7 +180,7 @@ interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: 'success' | 'error';
     onClose?: (action?: string) => void;
 }
 declare function Toast({ id, message, title, actions, allowClose, variant, className, children, onClose, ...props }: ToastProps): react.JSX.Element;
@@ -205,12 +205,13 @@ declare function useTheme(defaultTheme?: string): {
     setTheme: typeof setTheme;
 };
 
+type ToastVariant = 'success' | 'error';
 interface ToastOptions {
     duration?: number;
     title?: string;
     actions?: string[];
     allowClose?: boolean;
-    variant?: 'info' | 'error';
+    variant?: ToastVariant;
     onClose?: (action?: string) => void;
 }
 interface ToastState extends ToastOptions {
@@ -509,8 +510,9 @@ declare function ProgressCircle({ className, showValue, ...props }: ProgressCirc
 
 interface RadioGroupProps extends RadioGroupProps$1 {
     label?: string;
+    variant?: 'circle' | 'box';
 }
-declare function RadioGroup({ label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
+declare function RadioGroup({ variant, label, children, className, ...props }: RadioGroupProps): react.JSX.Element;
 
 declare function Radio({ children, className, ...props }: RadioProps): react.JSX.Element;
 

package/dist/index.js

@@ -26136,7 +26136,7 @@ function FormField({
 var import_classnames7 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
-var Button_default = { "button": "Button_button__NDYwM", "primary": "Button_primary__OWE0M", "outline": "Button_outline__NTQyN", "quiet": "Button_quiet__NDFjM", "danger": "Button_danger__NDUzM", "sm": "Button_sm__NTVjM", "md": "Button_md__NDE4O", "lg": "Button_lg__NTU4O", "xl": "Button_xl__NjFkM" };
+var Button_default = { "button": "Button_button__YTAxZ", "primary": "Button_primary__NDFlY", "outline": "Button_outline__ZjQ3O", "quiet": "Button_quiet__ZWYwN", "danger": "Button_danger__YTg1M", "sm": "Button_sm__ZTAwM", "md": "Button_md__MDNjZ", "lg": "Button_lg__Njc0N", "xl": "Button_xl__MmUxM" };
 
 // src/components/Button.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
@@ -26248,7 +26248,7 @@ function FormSubmitButton({
 var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\toast\Toast.module.css
-var Toast_default = { "toast": "Toast_toast__YjU0N", "icon": "Toast_icon__YmFhZ", "title": "Toast_title__OGRhM", "description": "Toast_description__MDBkN", "action": "Toast_action__MjUxO", "close": "Toast_close__ZDVjN", "info": "Toast_info__ZDRhY", "error": "Toast_error__NmEwO" };
+var Toast_default = { "toast": "Toast_toast__ODE0M", "icon": "Toast_icon__ZmRlO", "title": "Toast_title__OGFiM", "description": "Toast_description__OTAxY", "action": "Toast_action__YzYxM", "close": "Toast_close__ZmMzM", "success": "Toast_success__Y2ZhZ", "error": "Toast_error__YzE0Y" };
 
 // src/components/toast/Toast.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
@@ -26270,15 +26270,24 @@ function Toast({
     title && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: Toast_default.title, children: title }),
     message && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
-      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button2, { className: Toast_default.action, onPress: () => onClose?.(action), children: action }, action);
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Button2,
+        {
+          variant: "outline",
+          className: Toast_default.action,
+          onPress: () => onClose?.(action),
+          children: action
+        },
+        action
+      );
     }),
     !hasActions && allowClose && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       Icon2,
       {
-        size: "sm",
         "aria-hidden": true,
-        className: Toast_default.close,
         "aria-label": "Close",
+        size: "sm",
+        className: Toast_default.close,
         onClick: () => onClose?.(TOAST_CLOSE_ACTION),
         children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(X, {})
       }
@@ -31230,18 +31239,32 @@ function ProgressCircle({ className, showValue, ...props }) {
 var import_classnames42 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
-var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZDJlY", "inputs": "RadioGroup_inputs__OTc1Y", "radio": "RadioGroup_radio__ZDJiM" };
+var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjliM", "inputs": "RadioGroup_inputs__NjA4N", "radio": "RadioGroup_radio__MmE2Z", "variant-circle": "RadioGroup_variant-circle__NzliY", "variant-box": "RadioGroup_variant-box__Mjk3N" };
 
 // src/components/RadioGroup.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
-function RadioGroup2({ label, children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: RadioGroup_default.inputs, children })
-  ] });
+function RadioGroup2({
+  variant = "circle",
+  label,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+    $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
+    {
+      "aria-label": "RadioGroup",
+      ...props,
+      className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, RadioGroup_default[`variant-${variant}`], className),
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Label2, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: RadioGroup_default.inputs, children })
+      ]
+    }
+  );
 }
 function Radio2({ children, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)($b6c3ddc6086f204d$export$d7b12c4107be0d61, { "aria-label": "Radio", ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx

package/dist/index.mjs

@@ -26023,7 +26023,7 @@ function FormField({
 var import_classnames7 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
-var Button_default = { "button": "Button_button__NDYwM", "primary": "Button_primary__OWE0M", "outline": "Button_outline__NTQyN", "quiet": "Button_quiet__NDFjM", "danger": "Button_danger__NDUzM", "sm": "Button_sm__NTVjM", "md": "Button_md__NDE4O", "lg": "Button_lg__NTU4O", "xl": "Button_xl__NjFkM" };
+var Button_default = { "button": "Button_button__YTAxZ", "primary": "Button_primary__NDFlY", "outline": "Button_outline__ZjQ3O", "quiet": "Button_quiet__ZWYwN", "danger": "Button_danger__YTg1M", "sm": "Button_sm__ZTAwM", "md": "Button_md__MDNjZ", "lg": "Button_lg__Njc0N", "xl": "Button_xl__MmUxM" };
 
 // src/components/Button.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
@@ -26135,7 +26135,7 @@ function FormSubmitButton({
 var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\toast\Toast.module.css
-var Toast_default = { "toast": "Toast_toast__YjU0N", "icon": "Toast_icon__YmFhZ", "title": "Toast_title__OGRhM", "description": "Toast_description__MDBkN", "action": "Toast_action__MjUxO", "close": "Toast_close__ZDVjN", "info": "Toast_info__ZDRhY", "error": "Toast_error__NmEwO" };
+var Toast_default = { "toast": "Toast_toast__ODE0M", "icon": "Toast_icon__ZmRlO", "title": "Toast_title__OGFiM", "description": "Toast_description__OTAxY", "action": "Toast_action__YzYxM", "close": "Toast_close__ZmMzM", "success": "Toast_success__Y2ZhZ", "error": "Toast_error__YzE0Y" };
 
 // src/components/toast/Toast.tsx
 import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -26157,15 +26157,24 @@ function Toast({
     title && /* @__PURE__ */ jsx18("div", { className: Toast_default.title, children: title }),
     message && /* @__PURE__ */ jsx18("div", { className: Toast_default.description, children: message }),
     hasActions && actions.map((action) => {
-      return /* @__PURE__ */ jsx18(Button2, { className: Toast_default.action, onPress: () => onClose?.(action), children: action }, action);
+      return /* @__PURE__ */ jsx18(
+        Button2,
+        {
+          variant: "outline",
+          className: Toast_default.action,
+          onPress: () => onClose?.(action),
+          children: action
+        },
+        action
+      );
     }),
     !hasActions && allowClose && /* @__PURE__ */ jsx18(
       Icon2,
       {
-        size: "sm",
         "aria-hidden": true,
-        className: Toast_default.close,
         "aria-label": "Close",
+        size: "sm",
+        className: Toast_default.close,
         onClick: () => onClose?.(TOAST_CLOSE_ACTION),
         children: /* @__PURE__ */ jsx18(X, {})
       }
@@ -31121,18 +31130,32 @@ function ProgressCircle({ className, showValue, ...props }) {
 var import_classnames42 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\RadioGroup.module.css
-var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZDJlY", "inputs": "RadioGroup_inputs__OTc1Y", "radio": "RadioGroup_radio__ZDJiM" };
+var RadioGroup_default = { "radiogroup": "RadioGroup_radiogroup__ZjliM", "inputs": "RadioGroup_inputs__NjA4N", "radio": "RadioGroup_radio__MmE2Z", "variant-circle": "RadioGroup_variant-circle__NzliY", "variant-box": "RadioGroup_variant-box__Mjk3N" };
 
 // src/components/RadioGroup.tsx
 import { jsx as jsx56, jsxs as jsxs31 } from "react/jsx-runtime";
-function RadioGroup2({ label, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs31($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, className), children: [
-    label && /* @__PURE__ */ jsx56(Label2, { children: label }),
-    /* @__PURE__ */ jsx56("div", { className: RadioGroup_default.inputs, children })
-  ] });
+function RadioGroup2({
+  variant = "circle",
+  label,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs31(
+    $b6c3ddc6086f204d$export$a98f0dcb43a68a25,
+    {
+      "aria-label": "RadioGroup",
+      ...props,
+      className: (0, import_classnames42.default)(RadioGroup_default.radiogroup, RadioGroup_default[`variant-${variant}`], className),
+      children: [
+        label && /* @__PURE__ */ jsx56(Label2, { children: label }),
+        /* @__PURE__ */ jsx56("div", { className: RadioGroup_default.inputs, children })
+      ]
+    }
+  );
 }
 function Radio2({ children, className, ...props }) {
-  return /* @__PURE__ */ jsx56($b6c3ddc6086f204d$export$d7b12c4107be0d61, { ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
+  return /* @__PURE__ */ jsx56($b6c3ddc6086f204d$export$d7b12c4107be0d61, { "aria-label": "Radio", ...props, className: (0, import_classnames42.default)(RadioGroup_default.radio, className), children });
 }
 
 // src/components/SearchField.tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.123.0",
+  "version": "0.126.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -237,7 +237,7 @@ html[data-theme='dark'], .dark-theme {
   --highlight-font-color: var(--font-color);
 
   --success-color: var(--accent-color-green);
-  --success-font-color: var(--base-color-1);
+  --success-font-color: var(--base-color-12);
 
   --danger-color: var(--accent-color-red);
   --danger-font-color: var(--base-color-12);
@@ -3364,7 +3364,7 @@ li {
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__NDYwM {
+.Button_button__YTAxZ {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3383,86 +3383,89 @@ li {
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__NDYwM:disabled {
+.Button_button__YTAxZ:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__NDYwM:hover {
+.Button_button__YTAxZ:hover {
   color: var(--font-color);
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__NDYwM[data-pressed] {
+.Button_button__YTAxZ[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M {
+.Button_button__YTAxZ.Button_primary__NDFlY {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__NDYwM.Button_primary__OWE0M:hover {
+.Button_button__YTAxZ.Button_primary__NDFlY:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M[data-pressed] {
+.Button_button__YTAxZ.Button_primary__NDFlY[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__NDYwM.Button_primary__OWE0M:disabled {
+.Button_button__YTAxZ.Button_primary__NDFlY:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__NDYwM.Button_outline__NTQyN {
+.Button_button__YTAxZ.Button_outline__ZjQ3O {
   background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__NDYwM.Button_outline__NTQyN:hover {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:hover {
   border-color: var(--border-color-3);
 }
-.Button_button__NDYwM.Button_outline__NTQyN[data-pressed] {
+.Button_button__YTAxZ.Button_outline__ZjQ3O[data-pressed] {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM {
+.Button_button__YTAxZ.Button_outline__ZjQ3O:disabled {
+  background: var(--base-color-2);
+}
+.Button_button__YTAxZ.Button_quiet__ZWYwN {
   background: transparent;
 }
-.Button_button__NDYwM.Button_quiet__NDFjM:hover {
+.Button_button__YTAxZ.Button_quiet__ZWYwN:hover {
   background: var(--highlight-color);
 }
-.Button_button__NDYwM.Button_quiet__NDFjM[data-pressed] {
+.Button_button__YTAxZ.Button_quiet__ZWYwN[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__NDYwM.Button_danger__NDUzM {
+.Button_button__YTAxZ.Button_danger__YTg1M {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:hover {
+.Button_button__YTAxZ.Button_danger__YTg1M:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM[data-pressed] {
+.Button_button__YTAxZ.Button_danger__YTg1M[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__NDYwM.Button_danger__NDUzM:disabled {
+.Button_button__YTAxZ.Button_danger__YTg1M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__NDYwM.Button_sm__NTVjM {
+.Button_button__YTAxZ.Button_sm__ZTAwM {
   font-size: calc(0.9 * var(--font-size));
   padding: calc(0.5 * var(--padding-y)) calc(0.75 * var(--padding-x));
   min-height: calc(0.9 * var(--button-height));
 }
-.Button_button__NDYwM.Button_md__NDE4O {
+.Button_button__YTAxZ.Button_md__MDNjZ {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__NDYwM.Button_lg__NTU4O {
+.Button_button__YTAxZ.Button_lg__Njc0N {
   font-size: calc(1.25 * var(--font-size));
   padding: var(--padding-y) calc(1.25 * var(--padding-x));
   min-height: calc(1.25 * var(--button-height));
 }
-.Button_button__NDYwM.Button_xl__NjFkM {
+.Button_button__YTAxZ.Button_xl__MmUxM {
   font-size: calc(1.5 * var(--font-size));
   padding: calc(1.25 * var(--padding-y)) calc(1.25 * var(--padding-x));
   min-height: calc(1.5 * var(--button-height));
 }
-body a.Button_button__NDYwM {
+body a.Button_button__YTAxZ {
   color: inherit;
   text-decoration: none;
 }
@@ -3537,60 +3540,57 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:d2946ea0055c0d1ebfac02670168114b */
-.Toast_toast__YjU0N {
+.Toast_toast__ODE0M {
   display: grid;
   grid-template-areas: "icon title action" "icon description action";
   grid-template-columns: auto 1fr auto;
   grid-auto-columns: auto;
   align-items: center;
-  background-color: var(--background-color);
+  color: var(--base-color-1);
+  background-color: var(--base-color-12);
   border-radius: var(--border-radius);
   box-shadow: var(--box-shadow-3);
   padding: var(--spacing-4) var(--spacing-5);
   border: var(--border);
   position: relative;
 }
-.Toast_toast__YjU0N:has(.Toast_icon__YmFhZ) {
+.Toast_toast__ODE0M:has(.Toast_icon__ZmRlO) {
   grid-template-columns: auto 1fr auto;
   column-gap: var(--gap);
 }
-.Toast_icon__YmFhZ {
+.Toast_icon__ZmRlO {
   grid-area: icon;
 }
-.Toast_icon__YmFhZ:empty {
+.Toast_icon__ZmRlO:empty {
   display: none;
 }
-.Toast_title__OGRhM {
+.Toast_title__OGFiM {
   grid-area: title;
-  color: var(--font-color);
   font-weight: 700;
 }
-.Toast_description__MDBkN {
+.Toast_description__OTAxY {
   grid-area: description;
 }
-.Toast_action__MjUxO {
+.Toast_action__YzYxM {
   grid-area: action;
   border: 0;
   background: transparent;
 }
-.Toast_close__ZDVjN {
+.Toast_close__ZmMzM {
+  grid-area: action;
   display: none;
   color: currentColor;
-  position: absolute;
-  right: var(--spacing-3);
-  top: 50%;
-  transform: translateY(-50%);
 }
-.Toast_toast__YjU0N:hover .Toast_close__ZDVjN {
+.Toast_toast__ODE0M:hover .Toast_close__ZmMzM {
   display: block;
   cursor: pointer;
 }
-.Toast_toast__YjU0N.Toast_info__ZDRhY {
-  color: var(--primary-font-color);
-  background: var(--primary-color);
+.Toast_toast__ODE0M.Toast_success__Y2ZhZ {
+  color: var(--success-font-color);
+  background: var(--success-color);
   border: 0;
 }
-.Toast_toast__YjU0N.Toast_error__NmEwO {
+.Toast_toast__ODE0M.Toast_error__YzE0Y {
   color: var(--danger-font-color);
   background: var(--danger-color);
   border: 0;
@@ -4691,55 +4691,89 @@ body a.Button_button__NDYwM {
 }
 
 /* virtual-css:css:e3e6aca5943038cfd68ddbab1d1ccf5e */
-.RadioGroup_radiogroup__ZDJlY {
+.RadioGroup_radiogroup__ZjliM {
+  display: grid;
   font-size: var(--font-size);
   color: var(--font-color);
 }
-.RadioGroup_inputs__OTc1Y {
+.RadioGroup_inputs__NjA4N {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-4);
+  gap: var(--spacing-3);
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=vertical] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=vertical] .RadioGroup_inputs__NjA4N {
   flex-direction: column;
 }
-.RadioGroup_radiogroup__ZDJlY[data-orientation=horizontal] .RadioGroup_inputs__OTc1Y {
+.RadioGroup_radiogroup__ZjliM[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
   flex-direction: row;
-  gap: var(--spacing-6);
 }
-.RadioGroup_radio__ZDJiM {
+.RadioGroup_radio__MmE2Z {
   display: flex;
   align-items: center;
   gap: var(--gap);
   forced-color-adjust: none;
-}
-.RadioGroup_radio__ZDJiM:before {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  border: var(--border);
-  background: var(--background-color);
-  border-radius: 20px;
+  cursor: pointer;
   transition: all 200ms;
-  box-shadow: var(--box-shadow);
-}
-.RadioGroup_radio__ZDJiM[data-pressed]:before {
-  border-color: var(--border-color);
 }
-.RadioGroup_radio__ZDJiM[data-selected]:before {
-  border-color: var(--primary-color);
-  border-width: 7px;
-}
-.RadioGroup_radio__ZDJiM[data-selected][data-pressed]:before {
-  border-color: var(--primary-color);
-}
-.RadioGroup_radio__ZDJiM[data-disabled] {
-  color: var(--font-color-muted);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-circle__NzliY {
+  &[data-orientation=horizontal] .RadioGroup_inputs__NjA4N {
+    gap: var(--spacing-6);
+  }
+  & .RadioGroup_radio__MmE2Z:before {
+    content: "";
+    display: block;
+    width: 20px;
+    height: 20px;
+    box-sizing: border-box;
+    border: var(--border);
+    background: var(--background-color);
+    border-radius: 20px;
+    transition: all 200ms;
+    box-shadow: var(--box-shadow);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed]:before {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected]:before {
+    border-color: var(--primary-color);
+    border-width: 7px;
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed]:before {
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled]:before {
+    background-color: var(--base-color-3);
+  }
 }
-.RadioGroup_radio__ZDJiM[data-disabled]:before {
-  background-color: var(--base-color-4);
+.RadioGroup_radiogroup__ZjliM.RadioGroup_variant-box__Mjk3N {
+  & .RadioGroup_radio__MmE2Z {
+    justify-content: center;
+    padding: var(--padding);
+    border: var(--border);
+    border-radius: var(--border-radius);
+  }
+  & .RadioGroup_radio__MmE2Z[data-pressed] {
+    border-color: var(--border-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-selected][data-pressed] {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    color: var(--font-color-muted);
+    cursor: default;
+  }
+  & .RadioGroup_radio__MmE2Z[data-disabled] {
+    background-color: var(--base-color-3);
+  }
 }
 
 /* virtual-css:css:851dd5366a20c382ffec60997ee93e35 */