@umami/react-zen 0.135.0 → 0.137.0

package/dist/index.css

@@ -3054,7 +3054,7 @@
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__YTAxZ {
+.Button_button__ZGNlZ {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3073,89 +3073,102 @@
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__YTAxZ:disabled {
+.Button_button__ZGNlZ:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__YTAxZ:hover {
+.Button_button__ZGNlZ:hover {
   color: var(--font-color);
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__YTAxZ[data-pressed] {
+.Button_button__ZGNlZ[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__YTAxZ.Button_primary__NDFlY {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__YTAxZ.Button_primary__NDFlY:hover {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__YTAxZ.Button_primary__NDFlY[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__YTAxZ.Button_primary__NDFlY:disabled {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM {
   background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O:hover {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM:hover {
   border-color: var(--border-color-3);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM[data-pressed] {
   background: var(--highlight-color);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O:disabled {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM:disabled {
   background: var(--base-color-2);
 }
-.Button_button__YTAxZ.Button_quiet__ZWYwN {
+.Button_button__ZGNlZ.Button_variant-quiet__YzZjO {
   background: transparent;
 }
-.Button_button__YTAxZ.Button_quiet__ZWYwN:hover {
+.Button_button__ZGNlZ.Button_variant-quiet__YzZjO:hover {
   background: var(--highlight-color);
 }
-.Button_button__YTAxZ.Button_quiet__ZWYwN[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-quiet__YzZjO[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__YTAxZ.Button_danger__YTg1M {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__YTAxZ.Button_danger__YTg1M:hover {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__YTAxZ.Button_danger__YTg1M[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__YTAxZ.Button_danger__YTg1M:disabled {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__YTAxZ.Button_sm__ZTAwM {
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ {
+  border: 0;
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ:hover {
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ[data-pressed] {
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ:disabled {
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_sm__ODlkM {
   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__YTAxZ.Button_md__MDNjZ {
+.Button_button__ZGNlZ.Button_md__ZTU2M {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__YTAxZ.Button_lg__Njc0N {
+.Button_button__ZGNlZ.Button_lg__NWJjO {
   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__YTAxZ.Button_xl__MmUxM {
+.Button_button__ZGNlZ.Button_xl__MmYwY {
   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__YTAxZ {
+body a.Button_button__ZGNlZ {
   color: inherit;
   text-decoration: none;
 }

package/dist/index.d.mts

@@ -172,10 +172,9 @@ interface FormFieldArrayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
 declare function FormFieldArray({ name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1 {
-    variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
+    variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'wrapper';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     asChild?: boolean;
-    slot?: string;
     children?: ReactNode;
 }
 declare function Button({ variant, size, asChild, preventFocusOnPress, className, children, ...props }: ButtonProps): react.JSX.Element;
@@ -444,8 +443,11 @@ interface ListProps extends ListBoxProps<any> {
     separatorProperty?: string;
     highlightColor?: string;
     showCheckmark?: boolean;
+    label?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
 }
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, className, style, children, ...props }: ListProps): react.JSX.Element;
+declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends ListBoxItemProps<any> {
     showCheckmark?: boolean;
 }

package/dist/index.d.ts

@@ -172,10 +172,9 @@ interface FormFieldArrayProps extends Omit<HTMLAttributes<HTMLDivElement>, 'chil
 declare function FormFieldArray({ name, description, label, rules, className, children, ...props }: FormFieldArrayProps): react.JSX.Element;
 
 interface ButtonProps extends ButtonProps$1 {
-    variant?: 'primary' | 'secondary' | 'outline' | 'quiet' | 'danger' | 'zero';
+    variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'wrapper';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     asChild?: boolean;
-    slot?: string;
     children?: ReactNode;
 }
 declare function Button({ variant, size, asChild, preventFocusOnPress, className, children, ...props }: ButtonProps): react.JSX.Element;
@@ -444,8 +443,11 @@ interface ListProps extends ListBoxProps<any> {
     separatorProperty?: string;
     highlightColor?: string;
     showCheckmark?: boolean;
+    label?: string;
+    value?: string[];
+    onChange?: (value: string[]) => void;
 }
-declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, className, style, children, ...props }: ListProps): react.JSX.Element;
+declare function List({ items, idProperty, labelProperty, separatorProperty, highlightColor, showCheckmark, label, value, onChange, className, selectedKeys, defaultSelectedKeys, onSelectionChange, style, children, ...props }: ListProps): react.JSX.Element;
 interface ListItemProps extends ListBoxItemProps<any> {
     showCheckmark?: boolean;
 }

package/dist/index.js

@@ -26421,12 +26421,12 @@ function FormFieldArray({
 var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
-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" };
+var Button_default = { "button": "Button_button__ZGNlZ", "variant-primary": "Button_variant-primary__YjM5O", "variant-outline": "Button_variant-outline__YTkyM", "variant-quiet": "Button_variant-quiet__YzZjO", "variant-danger": "Button_variant-danger__ZGY0M", "variant-zero": "Button_variant-zero__ZjhhZ", "sm": "Button_sm__ODlkM", "md": "Button_md__ZTU2M", "lg": "Button_lg__NWJjO", "xl": "Button_xl__MmYwY" };
 
 // src/components/Button.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
 function Button2({
-  variant = "secondary",
+  variant,
   size = "md",
   asChild,
   preventFocusOnPress = true,
@@ -26444,7 +26444,7 @@ function Button2({
       className: (0, import_classnames9.default)(
         Button_default.button,
         className,
-        variant && Button_default[variant],
+        variant && Button_default[`variant-${variant}`],
         size && Button_default[size]
       ),
       children
@@ -31251,29 +31251,47 @@ function List({
   separatorProperty = "separatpr",
   highlightColor,
   showCheckmark = true,
+  label,
+  value,
+  onChange,
   className,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
   style,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-    $eed445e0843c11d0$export$41f133550aa26f48,
-    {
-      "aria-label": "list",
-      ...props,
-      items,
-      className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
-      style: { ...style, ...getHighlightColor(highlightColor) },
-      children: children || items?.map((item) => {
-        const id = item[idProperty] || item.toString();
-        const label = item[labelProperty] || item.toString();
-        return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react183.Fragment, { children: [
-          item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
-          /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListItem, { id, className: List_default.item, children: label })
-        ] }, id);
-      })
+  const handleSelectionChange = (keys) => {
+    onSelectionChange?.(keys);
+    if (keys !== "all") {
+      onChange?.([...keys].map(String));
     }
-  );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Label2, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      $eed445e0843c11d0$export$41f133550aa26f48,
+      {
+        "aria-label": "list",
+        ...props,
+        selectedKeys: value || selectedKeys,
+        defaultSelectedKeys: value || defaultSelectedKeys,
+        items,
+        className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
+        onSelectionChange: handleSelectionChange,
+        style: { ...style, ...getHighlightColor(highlightColor) },
+        children: children || items?.map((item) => {
+          const id = item[idProperty] || item.toString();
+          const label2 = item[labelProperty] || item.toString();
+          return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react183.Fragment, { children: [
+            item[separatorProperty] && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ListItem, { id, className: List_default.item, children: label2 })
+          ] }, id);
+        })
+      }
+    )
+  ] });
 }
 function ListItem({
   id,

package/dist/index.mjs

@@ -26306,12 +26306,12 @@ function FormFieldArray({
 var import_classnames9 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Button.module.css
-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" };
+var Button_default = { "button": "Button_button__ZGNlZ", "variant-primary": "Button_variant-primary__YjM5O", "variant-outline": "Button_variant-outline__YTkyM", "variant-quiet": "Button_variant-quiet__YzZjO", "variant-danger": "Button_variant-danger__ZGY0M", "variant-zero": "Button_variant-zero__ZjhhZ", "sm": "Button_sm__ODlkM", "md": "Button_md__ZTU2M", "lg": "Button_lg__NWJjO", "xl": "Button_xl__MmYwY" };
 
 // src/components/Button.tsx
 import { jsx as jsx16 } from "react/jsx-runtime";
 function Button2({
-  variant = "secondary",
+  variant,
   size = "md",
   asChild,
   preventFocusOnPress = true,
@@ -26329,7 +26329,7 @@ function Button2({
       className: (0, import_classnames9.default)(
         Button_default.button,
         className,
-        variant && Button_default[variant],
+        variant && Button_default[`variant-${variant}`],
         size && Button_default[size]
       ),
       children
@@ -31128,7 +31128,7 @@ function getHighlightColor(color) {
 var List_default = { "list": "List_list__ZTQ5M", "separator": "List_separator__Zjk5Y", "section": "List_section__MDgwZ", "header": "List_header__MjUxO", "item": "List_item__NTg2Z", "checkmark": "List_checkmark__M2M5Y", "hideCheckmark": "List_hideCheckmark__YmNlM" };
 
 // src/components/List.tsx
-import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
 function List({
   items,
   idProperty = "id",
@@ -31136,29 +31136,47 @@ function List({
   separatorProperty = "separatpr",
   highlightColor,
   showCheckmark = true,
+  label,
+  value,
+  onChange,
   className,
+  selectedKeys,
+  defaultSelectedKeys,
+  onSelectionChange,
   style,
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx48(
-    $eed445e0843c11d0$export$41f133550aa26f48,
-    {
-      "aria-label": "list",
-      ...props,
-      items,
-      className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
-      style: { ...style, ...getHighlightColor(highlightColor) },
-      children: children || items?.map((item) => {
-        const id = item[idProperty] || item.toString();
-        const label = item[labelProperty] || item.toString();
-        return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-          item[separatorProperty] && /* @__PURE__ */ jsx48($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
-          /* @__PURE__ */ jsx48(ListItem, { id, className: List_default.item, children: label })
-        ] }, id);
-      })
+  const handleSelectionChange = (keys) => {
+    onSelectionChange?.(keys);
+    if (keys !== "all") {
+      onChange?.([...keys].map(String));
     }
-  );
+  };
+  return /* @__PURE__ */ jsxs25(Fragment8, { children: [
+    label && /* @__PURE__ */ jsx48(Label2, { children: label }),
+    /* @__PURE__ */ jsx48(
+      $eed445e0843c11d0$export$41f133550aa26f48,
+      {
+        "aria-label": "list",
+        ...props,
+        selectedKeys: value || selectedKeys,
+        defaultSelectedKeys: value || defaultSelectedKeys,
+        items,
+        className: (0, import_classnames33.default)(List_default.list, className, !showCheckmark && List_default.hideCheckmark),
+        onSelectionChange: handleSelectionChange,
+        style: { ...style, ...getHighlightColor(highlightColor) },
+        children: children || items?.map((item) => {
+          const id = item[idProperty] || item.toString();
+          const label2 = item[labelProperty] || item.toString();
+          return /* @__PURE__ */ jsxs25(Fragment7, { children: [
+            item[separatorProperty] && /* @__PURE__ */ jsx48($431f98aba6844401$export$1ff3c3f08ae963c0, { className: List_default.separator }),
+            /* @__PURE__ */ jsx48(ListItem, { id, className: List_default.item, children: label2 })
+          ] }, id);
+        })
+      }
+    )
+  ] });
 }
 function ListItem({
   id,
@@ -31321,12 +31339,12 @@ function NavMenuItem({ isSelected, className, children, ...props }) {
 // src/components/PasswordField.tsx
 import { useState as useState15 } from "react";
 var import_classnames39 = __toESM(require_classnames());
-import { Fragment as Fragment8, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs29 } from "react/jsx-runtime";
 function PasswordField({ label, className, ...props }) {
   const [show, setShow] = useState15(false);
   const type = show ? "text" : "password";
   const handleShowPassword = () => setShow((state) => !state);
-  return /* @__PURE__ */ jsxs29(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs29(Fragment9, { children: [
     label && /* @__PURE__ */ jsx54(Label2, { children: label }),
     /* @__PURE__ */ jsxs29($bcdf0525bf22703d$export$2c73285ae9390cec, { "aria-label": "Password", ...props, className: (0, import_classnames39.default)(TextField_default.field, className), children: [
       /* @__PURE__ */ jsx54($3985021b0ad6602f$export$f5b8910cec6cf069, { type }),
@@ -31354,10 +31372,10 @@ var import_classnames41 = __toESM(require_classnames());
 var ProgressBar_default = { "progressbar": "ProgressBar_progressbar__YzdlO", "track": "ProgressBar_track__YzgzY", "fill": "ProgressBar_fill__ZTJlM", "value": "ProgressBar_value__NDk1Z" };
 
 // src/components/ProgressBar.tsx
-import { Fragment as Fragment9, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs30 } from "react/jsx-runtime";
 function ProgressBar2({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx56($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames41.default)(ProgressBar_default.progressbar, className), children: ({ percentage = 0, valueText }) => {
-    return /* @__PURE__ */ jsxs30(Fragment9, { children: [
+    return /* @__PURE__ */ jsxs30(Fragment10, { children: [
       /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.track, children: /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.fill, style: { width: `${percentage}%` } }) }),
       showPercentage && /* @__PURE__ */ jsx56("div", { className: ProgressBar_default.value, children: valueText })
     ] });
@@ -31371,13 +31389,13 @@ var import_classnames42 = __toESM(require_classnames());
 var ProgressCircle_default = { "progresscircle": "ProgressCircle_progresscircle__NGMyY", "track": "ProgressCircle_track__YzY2M", "fill": "ProgressCircle_fill__ZmMzM", "value": "ProgressCircle_value__YjM0Y" };
 
 // src/components/ProgressCircle.tsx
-import { Fragment as Fragment10, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressCircle({ className, showPercentage, ...props }) {
   return /* @__PURE__ */ jsx57($0393f8ab869a0f1a$export$c17561cb55d4db30, { ...props, className: (0, import_classnames42.default)(ProgressCircle_default.progresscircle, className), children: ({ percentage = 0, valueText }) => {
     const radius = 45;
     const circumference = radius * 2 * Math.PI;
     const offset = circumference - percentage / 100 * circumference;
-    return /* @__PURE__ */ jsxs31(Fragment10, { children: [
+    return /* @__PURE__ */ jsxs31(Fragment11, { children: [
       /* @__PURE__ */ jsxs31("svg", { viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg", children: [
         /* @__PURE__ */ jsx57("circle", { className: ProgressCircle_default.track, cx: "50", cy: "50", r: "45" }),
         /* @__PURE__ */ jsx57(
@@ -31432,7 +31450,7 @@ function Radio2({ children, className, ...props }) {
 // src/components/SearchField.tsx
 import { useState as useState16, useEffect as useEffect12 } from "react";
 var import_classnames44 = __toESM(require_classnames());
-import { Fragment as Fragment11, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx59, jsxs as jsxs33 } from "react/jsx-runtime";
 function SearchField2({
   label,
   placeholder,
@@ -31463,7 +31481,7 @@ function SearchField2({
       onSearch?.(searchValue);
     }
   }, [searchValue, delay]);
-  return /* @__PURE__ */ jsxs33(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment12, { children: [
     label && /* @__PURE__ */ jsx59(Label2, { children: label }),
     /* @__PURE__ */ jsxs33(
       $440f4836bcb56932$export$b94867ecbd698f21,
@@ -31661,7 +31679,7 @@ var import_classnames47 = __toESM(require_classnames());
 var Slider_default = { "slider": "Slider_slider__MjBhO", "header": "Slider_header__ZTE2M", "track": "Slider_track__ODk5M", "fill": "Slider_fill__YzdhM", "thumb": "Slider_thumb__NGEzM" };
 
 // src/components/Slider.tsx
-import { Fragment as Fragment12, jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx62, jsxs as jsxs36 } from "react/jsx-runtime";
 function Slider2({ className, showValue = true, label, ...props }) {
   return /* @__PURE__ */ jsxs36($6f909507e6374d18$export$472062a354075cee, { ...props, className: (0, import_classnames47.default)(Slider_default.slider, className), children: [
     /* @__PURE__ */ jsxs36("div", { className: Slider_default.header, children: [
@@ -31670,7 +31688,7 @@ function Slider2({ className, showValue = true, label, ...props }) {
     ] }),
     /* @__PURE__ */ jsx62($6f909507e6374d18$export$105594979f116971, { className: Slider_default.track, children: ({ state }) => {
       const isHorizontal = state.orientation === "horizontal";
-      return /* @__PURE__ */ jsxs36(Fragment12, { children: [
+      return /* @__PURE__ */ jsxs36(Fragment13, { children: [
         /* @__PURE__ */ jsx62(
           "div",
           {
@@ -31715,10 +31733,10 @@ var import_classnames49 = __toESM(require_classnames());
 var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track__ZWU0O", "knob": "Switch_knob__YjFmZ" };
 
 // src/components/Switch.tsx
-import { Fragment as Fragment13, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
 function Switch2({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs38(Fragment13, { children: [
+  return /* @__PURE__ */ jsxs38(Fragment14, { children: [
     label && /* @__PURE__ */ jsx64(Label2, { children: label }),
     /* @__PURE__ */ jsxs38(
       $8e59e948500a8fe1$export$b5d5cf8927ab7262,
@@ -31810,10 +31828,10 @@ var import_classnames51 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment14, jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
 function Toggle({ label, children, className, ...props }) {
   const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ jsxs40(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment15, { children: [
     label && /* @__PURE__ */ jsx67(Label2, { children: label }),
     /* @__PURE__ */ jsx67(
       $efde0372d7a700fe$export$d2b052e7b4be1756,

package/package.json

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

package/styles.css

@@ -3372,7 +3372,7 @@ li {
 }
 
 /* virtual-css:css:616ae3b49446388ff62e911490fa55d8 */
-.Button_button__YTAxZ {
+.Button_button__ZGNlZ {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3391,89 +3391,102 @@ li {
   line-height: 1.5;
   --button-height: calc(1.5 * var(--font-size) + 2 * var(--padding-y)) ;
 }
-.Button_button__YTAxZ:disabled {
+.Button_button__ZGNlZ:disabled {
   color: var(--font-color-muted);
   pointer-events: none;
 }
-.Button_button__YTAxZ:hover {
+.Button_button__ZGNlZ:hover {
   color: var(--font-color);
   background: color-mix(in srgb, var(--base-color-3), 5% var(--dark-color));
 }
-.Button_button__YTAxZ[data-pressed] {
+.Button_button__ZGNlZ[data-pressed] {
   background: color-mix(in srgb, var(--base-color-3), 10% var(--dark-color));
 }
-.Button_button__YTAxZ.Button_primary__NDFlY {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O {
   color: var(--primary-font-color) !important;
   background: var(--primary-color);
 }
-.Button_button__YTAxZ.Button_primary__NDFlY:hover {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O:hover {
   background: color-mix(in srgb, var(--primary-color), 10% var(--primary-font-color));
 }
-.Button_button__YTAxZ.Button_primary__NDFlY[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O[data-pressed] {
   background: color-mix(in srgb, var(--primary-color), 20% var(--primary-font-color));
 }
-.Button_button__YTAxZ.Button_primary__NDFlY:disabled {
+.Button_button__ZGNlZ.Button_variant-primary__YjM5O:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-9);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM {
   background: var(--background-color);
   border: var(--border);
   box-shadow: var(--box-shadow-1);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O:hover {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM:hover {
   border-color: var(--border-color-3);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM[data-pressed] {
   background: var(--highlight-color);
 }
-.Button_button__YTAxZ.Button_outline__ZjQ3O:disabled {
+.Button_button__ZGNlZ.Button_variant-outline__YTkyM:disabled {
   background: var(--base-color-2);
 }
-.Button_button__YTAxZ.Button_quiet__ZWYwN {
+.Button_button__ZGNlZ.Button_variant-quiet__YzZjO {
   background: transparent;
 }
-.Button_button__YTAxZ.Button_quiet__ZWYwN:hover {
+.Button_button__ZGNlZ.Button_variant-quiet__YzZjO:hover {
   background: var(--highlight-color);
 }
-.Button_button__YTAxZ.Button_quiet__ZWYwN[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-quiet__YzZjO[data-pressed] {
   background: color-mix(in srgb, var(--highlight-color), 5% var(--dark-color));
 }
-.Button_button__YTAxZ.Button_danger__YTg1M {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M {
   color: var(--light-color);
   background: var(--danger-color);
 }
-.Button_button__YTAxZ.Button_danger__YTg1M:hover {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M:hover {
   background: color-mix(in srgb, var(--danger-color), 6% black);
 }
-.Button_button__YTAxZ.Button_danger__YTg1M[data-pressed] {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M[data-pressed] {
   background: color-mix(in srgb, var(--danger-color), 12% black);
 }
-.Button_button__YTAxZ.Button_danger__YTg1M:disabled {
+.Button_button__ZGNlZ.Button_variant-danger__ZGY0M:disabled {
   color: var(--primary-font-color);
   background: var(--base-color-8);
 }
-.Button_button__YTAxZ.Button_sm__ZTAwM {
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ {
+  border: 0;
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ:hover {
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ[data-pressed] {
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_variant-zero__ZjhhZ:disabled {
+  background: transparent;
+}
+.Button_button__ZGNlZ.Button_sm__ODlkM {
   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__YTAxZ.Button_md__MDNjZ {
+.Button_button__ZGNlZ.Button_md__ZTU2M {
   font-size: var(--font-size);
   padding: var(--padding);
   min-height: var(--button-height);
 }
-.Button_button__YTAxZ.Button_lg__Njc0N {
+.Button_button__ZGNlZ.Button_lg__NWJjO {
   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__YTAxZ.Button_xl__MmUxM {
+.Button_button__ZGNlZ.Button_xl__MmYwY {
   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__YTAxZ {
+body a.Button_button__ZGNlZ {
   color: inherit;
   text-decoration: none;
 }