@umami/react-zen 0.138.0 → 0.140.0

package/dist/index.css

@@ -3238,48 +3238,48 @@ body a.Button_button__ZGNlZ {
 }
 
 /* virtual-css:css:6431f1954dbf33e1f5f76d4a337f4621 */
-.Spinner_spinner__NzQxN {
+.Spinner_spinner__MTMxM {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
 }
-.Spinner_spinner__NzQxN svg {
+.Spinner_spinner__MTMxM svg {
   fill: none;
   font-size: 16px;
   stroke-width: 0.15em;
   transform-origin: center center;
-  animation: Spinner_spinner-rotate__ZTEzZ 1.6s linear infinite;
+  animation: Spinner_spinner-rotate__OGQxM 1.6s linear infinite;
 }
-.Spinner_track__ZTMzN {
+.Spinner_track__OTY4N {
   stroke: var(--base-color-4);
 }
-.Spinner_fill__YjgzN {
+.Spinner_fill__ZTQ1Y {
   stroke: var(--primary-color);
   stroke-linecap: square;
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
-  animation: Spinner_spinner-dash__MzhkY 1.2s ease-in-out infinite;
+  animation: Spinner_spinner-dash__OGIyZ 1.2s ease-in-out infinite;
 }
-.Spinner_size-sm__MDI2O svg {
+.Spinner_size-sm__NWRlY svg {
   width: 16px;
   height: 16px;
 }
-.Spinner_size-md__MzYzY svg {
-  width: 24px;
-  height: 24px;
+.Spinner_size-md__ODY2Y svg {
+  width: 28px;
+  height: 28px;
 }
-.Spinner_size-lg__ZGIxM svg {
+.Spinner_size-lg__NDBhO svg {
   width: 48px;
   height: 48px;
 }
-.Spinner_quiet__ZDVkM .Spinner_track__ZTMzN {
+.Spinner_quiet__ZDgxO .Spinner_track__OTY4N {
   display: none;
 }
-.Spinner_disabled__YjU4M .Spinner_fill__YjgzN {
+.Spinner_disabled__YjY4N .Spinner_fill__ZTQ1Y {
   stroke: var(--base-color-12);
 }
-@keyframes Spinner_spinner-rotate__ZTEzZ {
+@keyframes Spinner_spinner-rotate__OGQxM {
   0% {
     transform: rotate(0deg);
   }
@@ -3287,7 +3287,7 @@ body a.Button_button__ZGNlZ {
     transform: rotate(360deg);
   }
 }
-@keyframes Spinner_spinner-dash__MzhkY {
+@keyframes Spinner_spinner-dash__OGIyZ {
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -3724,7 +3724,7 @@ body a.Button_button__ZGNlZ {
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_field__YWQzN {
+.TextField_field__M2I5M {
   display: flex;
   align-items: center;
   padding: 0 var(--padding-x);
@@ -3755,8 +3755,8 @@ body a.Button_button__ZGNlZ {
     }
   }
 }
-.TextField_field__YWQzN input,
-.TextField_field__YWQzN textarea {
+.TextField_field__M2I5M input,
+.TextField_field__M2I5M textarea {
   border: none;
   outline: none;
   padding: var(--padding-y) 0;
@@ -3771,11 +3771,25 @@ body a.Button_button__ZGNlZ {
     -webkit-appearance: none;
   }
 }
-.TextField_textarea__YWRmM {
+.TextField_icon__YmQ2Y {
+  color: var(--font-color-muted);
+  cursor: pointer;
+  &:hover {
+    color: var(--font-color);
+  }
+}
+.TextField_textarea__OTEyY {
   padding: 0;
   & textarea {
     padding: var(--padding);
   }
+  & .TextField_icon__YmQ2Y {
+    position: absolute;
+    top: var(--padding-x);
+    right: var(--padding-x);
+    background-color: var(--background-color);
+    z-index: 1;
+  }
 }
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */

package/dist/index.d.mts

@@ -172,7 +172,7 @@ 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' | 'outline' | 'quiet' | 'danger' | 'wrapper';
+    variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     asChild?: boolean;
     children?: ReactNode;

package/dist/index.d.ts

@@ -172,7 +172,7 @@ 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' | 'outline' | 'quiet' | 'danger' | 'wrapper';
+    variant?: 'primary' | 'outline' | 'quiet' | 'danger' | 'zero';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     asChild?: boolean;
     children?: ReactNode;

package/dist/index.js

@@ -26467,12 +26467,12 @@ function FormResetButton({ values = {}, children, onPress, ...props }) {
 var import_classnames10 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Spinner.module.css
-var Spinner_default = { "spinner": "Spinner_spinner__NzQxN", "spinner-rotate": "Spinner_spinner-rotate__ZTEzZ", "track": "Spinner_track__ZTMzN", "fill": "Spinner_fill__YjgzN", "spinner-dash": "Spinner_spinner-dash__MzhkY", "size-sm": "Spinner_size-sm__MDI2O", "size-md": "Spinner_size-md__MzYzY", "size-lg": "Spinner_size-lg__ZGIxM", "quiet": "Spinner_quiet__ZDVkM", "disabled": "Spinner_disabled__YjU4M" };
+var Spinner_default = { "spinner": "Spinner_spinner__MTMxM", "spinner-rotate": "Spinner_spinner-rotate__OGQxM", "track": "Spinner_track__OTY4N", "fill": "Spinner_fill__ZTQ1Y", "spinner-dash": "Spinner_spinner-dash__OGIyZ", "size-sm": "Spinner_size-sm__NWRlY", "size-md": "Spinner_size-md__ODY2Y", "size-lg": "Spinner_size-lg__NDBhO", "quiet": "Spinner_quiet__ZDgxO", "disabled": "Spinner_disabled__YjY4N" };
 
 // src/components/Spinner.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function Spinner(props) {
-  const { size = "lg", quiet, className, isDisabled, ...domProps } = props;
+  const { size = "md", quiet, className, isDisabled, ...domProps } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
@@ -30690,7 +30690,7 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
-var TextField_default = { "field": "TextField_field__YWQzN", "textarea": "TextField_textarea__YWRmM" };
+var TextField_default = { "field": "TextField_field__M2I5M", "icon": "TextField_icon__YmQ2Y", "textarea": "TextField_textarea__OTEyY" };
 
 // src/components/TextField.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
@@ -30724,14 +30724,19 @@ function TextField2({
       {
         "aria-label": "Text",
         ...props,
-        className: (0, import_classnames22.default)(TextField_default.field, asTextArea && TextField_default.textarea, className),
+        className: (0, import_classnames22.default)(
+          TextField_default.field,
+          asTextArea && TextField_default.textarea,
+          allowCopy && TextField_default.copy,
+          className
+        ),
         value: inputValue,
         isReadOnly,
         isDisabled,
         onChange: handleChange,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Component, { placeholder }),
-          allowCopy && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CopyButton, { value: inputValue })
+          allowCopy && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CopyButton, { value: inputValue, className: TextField_default.icon })
         ]
       }
     )
@@ -31846,21 +31851,12 @@ var Switch_default = { "switch": "Switch_switch__NzI0O", "track": "Switch_track_
 // src/components/Switch.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");
 function Switch2({ label, children, className, ...props }) {
-  const isSelected = typeof props.value !== "undefined" ? !!props.value : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(import_jsx_runtime64.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(Column, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Label2, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
-      $8e59e948500a8fe1$export$b5d5cf8927ab7262,
-      {
-        ...props,
-        isSelected,
-        className: (0, import_classnames49.default)(Switch_default.switch, className),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: Switch_default.knob }) }),
-          children
-        ]
-      }
-    )
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames49.default)(Switch_default.switch, className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: Switch_default.track, children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: Switch_default.knob }) }),
+      children
+    ] })
   ] });
 }
 

package/dist/index.mjs

@@ -26352,12 +26352,12 @@ function FormResetButton({ values = {}, children, onPress, ...props }) {
 var import_classnames10 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Spinner.module.css
-var Spinner_default = { "spinner": "Spinner_spinner__NzQxN", "spinner-rotate": "Spinner_spinner-rotate__ZTEzZ", "track": "Spinner_track__ZTMzN", "fill": "Spinner_fill__YjgzN", "spinner-dash": "Spinner_spinner-dash__MzhkY", "size-sm": "Spinner_size-sm__MDI2O", "size-md": "Spinner_size-md__MzYzY", "size-lg": "Spinner_size-lg__ZGIxM", "quiet": "Spinner_quiet__ZDVkM", "disabled": "Spinner_disabled__YjU4M" };
+var Spinner_default = { "spinner": "Spinner_spinner__MTMxM", "spinner-rotate": "Spinner_spinner-rotate__OGQxM", "track": "Spinner_track__OTY4N", "fill": "Spinner_fill__ZTQ1Y", "spinner-dash": "Spinner_spinner-dash__OGIyZ", "size-sm": "Spinner_size-sm__NWRlY", "size-md": "Spinner_size-md__ODY2Y", "size-lg": "Spinner_size-lg__NDBhO", "quiet": "Spinner_quiet__ZDgxO", "disabled": "Spinner_disabled__YjY4N" };
 
 // src/components/Spinner.tsx
 import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
 function Spinner(props) {
-  const { size = "lg", quiet, className, isDisabled, ...domProps } = props;
+  const { size = "md", quiet, className, isDisabled, ...domProps } = props;
   return /* @__PURE__ */ jsx18(
     "div",
     {
@@ -30575,7 +30575,7 @@ function CopyButton({ value, timeout = TIMEOUT, className, children, ...props })
 }
 
 // css-modules:E:\dev\umami-react-zen\src\components\TextField.module.css
-var TextField_default = { "field": "TextField_field__YWQzN", "textarea": "TextField_textarea__YWRmM" };
+var TextField_default = { "field": "TextField_field__M2I5M", "icon": "TextField_icon__YmQ2Y", "textarea": "TextField_textarea__OTEyY" };
 
 // src/components/TextField.tsx
 import { Fragment as Fragment4, jsx as jsx36, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -30609,14 +30609,19 @@ function TextField2({
       {
         "aria-label": "Text",
         ...props,
-        className: (0, import_classnames22.default)(TextField_default.field, asTextArea && TextField_default.textarea, className),
+        className: (0, import_classnames22.default)(
+          TextField_default.field,
+          asTextArea && TextField_default.textarea,
+          allowCopy && TextField_default.copy,
+          className
+        ),
         value: inputValue,
         isReadOnly,
         isDisabled,
         onChange: handleChange,
         children: [
           /* @__PURE__ */ jsx36(Component, { placeholder }),
-          allowCopy && /* @__PURE__ */ jsx36(CopyButton, { value: inputValue })
+          allowCopy && /* @__PURE__ */ jsx36(CopyButton, { value: inputValue, className: TextField_default.icon })
         ]
       }
     )
@@ -31733,23 +31738,14 @@ 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 Fragment14, jsx as jsx64, jsxs as jsxs38 } from "react/jsx-runtime";
+import { 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(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs38(Column, { children: [
     label && /* @__PURE__ */ jsx64(Label2, { children: label }),
-    /* @__PURE__ */ jsxs38(
-      $8e59e948500a8fe1$export$b5d5cf8927ab7262,
-      {
-        ...props,
-        isSelected,
-        className: (0, import_classnames49.default)(Switch_default.switch, className),
-        children: [
-          /* @__PURE__ */ jsx64("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx64("div", { className: Switch_default.knob }) }),
-          children
-        ]
-      }
-    )
+    /* @__PURE__ */ jsxs38($8e59e948500a8fe1$export$b5d5cf8927ab7262, { ...props, className: (0, import_classnames49.default)(Switch_default.switch, className), children: [
+      /* @__PURE__ */ jsx64("div", { className: Switch_default.track, children: /* @__PURE__ */ jsx64("div", { className: Switch_default.knob }) }),
+      children
+    ] })
   ] });
 }
 
@@ -31828,10 +31824,10 @@ var import_classnames51 = __toESM(require_classnames());
 var Toggle_default = { "toggle": "Toggle_toggle__OWVjZ" };
 
 // src/components/Toggle.tsx
-import { Fragment as Fragment15, jsx as jsx67, jsxs as jsxs40 } from "react/jsx-runtime";
+import { Fragment as Fragment14, 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(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs40(Fragment14, { 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.138.0",
+  "version": "0.140.0",
   "description": "Modern, minimalist React component library",
   "author": "Umami <hello@umami.is>",
   "license": "MIT",

package/styles.css

@@ -3556,48 +3556,48 @@ body a.Button_button__ZGNlZ {
 }
 
 /* virtual-css:css:6431f1954dbf33e1f5f76d4a337f4621 */
-.Spinner_spinner__NzQxN {
+.Spinner_spinner__MTMxM {
   position: relative;
   display: inline-flex;
   justify-content: center;
   align-items: center;
 }
-.Spinner_spinner__NzQxN svg {
+.Spinner_spinner__MTMxM svg {
   fill: none;
   font-size: 16px;
   stroke-width: 0.15em;
   transform-origin: center center;
-  animation: Spinner_spinner-rotate__ZTEzZ 1.6s linear infinite;
+  animation: Spinner_spinner-rotate__OGQxM 1.6s linear infinite;
 }
-.Spinner_track__ZTMzN {
+.Spinner_track__OTY4N {
   stroke: var(--base-color-4);
 }
-.Spinner_fill__YjgzN {
+.Spinner_fill__ZTQ1Y {
   stroke: var(--primary-color);
   stroke-linecap: square;
   stroke-dasharray: 1, 200;
   stroke-dashoffset: 0;
-  animation: Spinner_spinner-dash__MzhkY 1.2s ease-in-out infinite;
+  animation: Spinner_spinner-dash__OGIyZ 1.2s ease-in-out infinite;
 }
-.Spinner_size-sm__MDI2O svg {
+.Spinner_size-sm__NWRlY svg {
   width: 16px;
   height: 16px;
 }
-.Spinner_size-md__MzYzY svg {
-  width: 24px;
-  height: 24px;
+.Spinner_size-md__ODY2Y svg {
+  width: 28px;
+  height: 28px;
 }
-.Spinner_size-lg__ZGIxM svg {
+.Spinner_size-lg__NDBhO svg {
   width: 48px;
   height: 48px;
 }
-.Spinner_quiet__ZDVkM .Spinner_track__ZTMzN {
+.Spinner_quiet__ZDgxO .Spinner_track__OTY4N {
   display: none;
 }
-.Spinner_disabled__YjU4M .Spinner_fill__YjgzN {
+.Spinner_disabled__YjY4N .Spinner_fill__ZTQ1Y {
   stroke: var(--base-color-12);
 }
-@keyframes Spinner_spinner-rotate__ZTEzZ {
+@keyframes Spinner_spinner-rotate__OGQxM {
   0% {
     transform: rotate(0deg);
   }
@@ -3605,7 +3605,7 @@ body a.Button_button__ZGNlZ {
     transform: rotate(360deg);
   }
 }
-@keyframes Spinner_spinner-dash__MzhkY {
+@keyframes Spinner_spinner-dash__OGIyZ {
   0% {
     stroke-dasharray: 1, 200;
     stroke-dashoffset: 0;
@@ -4042,7 +4042,7 @@ body a.Button_button__ZGNlZ {
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_field__YWQzN {
+.TextField_field__M2I5M {
   display: flex;
   align-items: center;
   padding: 0 var(--padding-x);
@@ -4073,8 +4073,8 @@ body a.Button_button__ZGNlZ {
     }
   }
 }
-.TextField_field__YWQzN input,
-.TextField_field__YWQzN textarea {
+.TextField_field__M2I5M input,
+.TextField_field__M2I5M textarea {
   border: none;
   outline: none;
   padding: var(--padding-y) 0;
@@ -4089,11 +4089,25 @@ body a.Button_button__ZGNlZ {
     -webkit-appearance: none;
   }
 }
-.TextField_textarea__YWRmM {
+.TextField_icon__YmQ2Y {
+  color: var(--font-color-muted);
+  cursor: pointer;
+  &:hover {
+    color: var(--font-color);
+  }
+}
+.TextField_textarea__OTEyY {
   padding: 0;
   & textarea {
     padding: var(--padding);
   }
+  & .TextField_icon__YmQ2Y {
+    position: absolute;
+    top: var(--padding-x);
+    right: var(--padding-x);
+    background-color: var(--background-color);
+    z-index: 1;
+  }
 }
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */