@umami/react-zen 0.213.0 → 0.214.0

package/dist/index.css

@@ -3848,7 +3848,7 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_field__YzU1O {
+.TextField_field__Y2NlN {
   display: flex;
   align-items: center;
   padding: 0 var(--padding-x);
@@ -3879,8 +3879,8 @@ body a.Button_button__NGQyO {
     }
   }
 }
-.TextField_field__YzU1O input,
-.TextField_field__YzU1O textarea {
+.TextField_field__Y2NlN input,
+.TextField_field__Y2NlN textarea {
   border: none;
   outline: none;
   padding: var(--padding-y) 0;
@@ -3895,37 +3895,46 @@ body a.Button_button__NGQyO {
     -webkit-appearance: none;
   }
 }
-.TextField_icon__MDJlY {
+.TextField_icon__N2IyN {
   color: var(--font-color-muted);
   cursor: pointer;
   &:hover {
     color: var(--font-color);
   }
 }
-.TextField_novalue__NDg4Y .TextField_icon__MDJlY {
+.TextField_novalue__MzMzN .TextField_icon__N2IyN {
   color: var(--font-color-disabled);
 }
-.TextField_textarea__NTQ3M {
+.TextField_textarea__MWJjN {
   padding: 0;
   & textarea {
     padding: var(--padding);
   }
-  & .TextField_icon__MDJlY {
+  & .TextField_icon__N2IyN {
     position: absolute;
     top: var(--padding-x);
     right: var(--padding-x);
     z-index: 1;
   }
 }
-.TextField_resize-vertical__ZDc3N textarea {
+.TextField_resize-vertical__OWYwN textarea {
   resize: vertical;
 }
-.TextField_resize-horizontal__MzJjY textarea {
+.TextField_resize-horizontal__NDIyN textarea {
   resize: horizontal;
 }
-.TextField_resize-none__ZmUxZ textarea {
+.TextField_resize-none__N2Q4Y textarea {
   resize: none;
 }
+.TextField_field__Y2NlN.TextField_variant-quiet__ZTExY {
+  padding: 0;
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  & input:focus {
+    border-bottom: var(--border);
+  }
+}
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
 .ConfirmationDialog_dialog__YjQzN {

package/dist/index.d.mts

@@ -521,9 +521,10 @@ interface TextFieldProps extends TextFieldProps$1 {
     allowCopy?: boolean;
     asTextArea?: boolean;
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
+    variant?: 'quiet' | 'none';
     onChange?: (e: any) => void;
 }
-declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, resize, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, resize, variant, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
 
 interface InlineEditFieldProps extends TextFieldProps {
     name?: string;

package/dist/index.d.ts

@@ -521,9 +521,10 @@ interface TextFieldProps extends TextFieldProps$1 {
     allowCopy?: boolean;
     asTextArea?: boolean;
     resize?: 'vertical' | 'horizontal' | 'both' | 'none';
+    variant?: 'quiet' | 'none';
     onChange?: (e: any) => void;
 }
-declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, resize, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
+declare function TextField({ value, defaultValue, label, placeholder, allowCopy, asTextArea, resize, variant, onChange, isReadOnly, isDisabled, className, children, ...props }: TextFieldProps): react_jsx_runtime.JSX.Element;
 
 interface InlineEditFieldProps extends TextFieldProps {
     name?: string;

package/dist/index.js

@@ -33501,8 +33501,8 @@ var import_react190 = require("react");
 var import_classnames26 = __toESM(require_classnames());
 
 // src/components/TextField.tsx
-var import_react189 = require("react");
 var import_classnames25 = __toESM(require_classnames());
+var import_react189 = require("react");
 
 // src/components/CopyButton.tsx
 var import_react188 = require("react");
@@ -33529,7 +33529,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__YzU1O", "icon": "TextField_icon__MDJlY", "novalue": "TextField_novalue__NDg4Y", "textarea": "TextField_textarea__NTQ3M", "resize-vertical": "TextField_resize-vertical__ZDc3N", "resize-horizontal": "TextField_resize-horizontal__MzJjY", "resize-none": "TextField_resize-none__ZmUxZ" };
+var TextField_default = { "field": "TextField_field__Y2NlN", "icon": "TextField_icon__N2IyN", "novalue": "TextField_novalue__MzMzN", "textarea": "TextField_textarea__MWJjN", "resize-vertical": "TextField_resize-vertical__OWYwN", "resize-horizontal": "TextField_resize-horizontal__NDIyN", "resize-none": "TextField_resize-none__N2Q4Y", "variant-quiet": "TextField_variant-quiet__ZTExY" };
 
 // src/components/TextField.tsx
 var import_jsx_runtime35 = require("react/jsx-runtime");
@@ -33541,6 +33541,7 @@ function TextField2({
   allowCopy,
   asTextArea,
   resize,
+  variant,
   onChange,
   isReadOnly,
   isDisabled,
@@ -33570,6 +33571,7 @@ function TextField2({
           allowCopy && TextField_default.copy,
           !inputValue && TextField_default.novalue,
           resize && TextField_default[`resize-${resize}`],
+          variant && TextField_default[`variant-${variant}`],
           className
         ),
         value: inputValue,
@@ -34000,10 +34002,9 @@ function InlineEditField({
   const [value, setValue] = (0, import_react196.useState)(defaultValue);
   const [edit, setEdit] = (0, import_react196.useState)(defaultEdit);
   const handleEdit = () => setEdit(true);
-  const handleChange = (e) => {
-    const val = e.target.value;
-    setValue(val);
-    onChange?.(val);
+  const handleChange = (value2) => {
+    setValue(value2);
+    onChange?.(value2);
   };
   const handleCommit = () => {
     setEdit(false);

package/dist/index.mjs

@@ -33376,8 +33376,8 @@ var import_classnames26 = __toESM(require_classnames());
 import { useState as useState11 } from "react";
 
 // src/components/TextField.tsx
-import { useEffect as useEffect9, useState as useState10 } from "react";
 var import_classnames25 = __toESM(require_classnames());
+import { useEffect as useEffect9, useState as useState10 } from "react";
 
 // src/components/CopyButton.tsx
 var import_classnames24 = __toESM(require_classnames());
@@ -33404,7 +33404,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__YzU1O", "icon": "TextField_icon__MDJlY", "novalue": "TextField_novalue__NDg4Y", "textarea": "TextField_textarea__NTQ3M", "resize-vertical": "TextField_resize-vertical__ZDc3N", "resize-horizontal": "TextField_resize-horizontal__MzJjY", "resize-none": "TextField_resize-none__ZmUxZ" };
+var TextField_default = { "field": "TextField_field__Y2NlN", "icon": "TextField_icon__N2IyN", "novalue": "TextField_novalue__MzMzN", "textarea": "TextField_textarea__MWJjN", "resize-vertical": "TextField_resize-vertical__OWYwN", "resize-horizontal": "TextField_resize-horizontal__NDIyN", "resize-none": "TextField_resize-none__N2Q4Y", "variant-quiet": "TextField_variant-quiet__ZTExY" };
 
 // src/components/TextField.tsx
 import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -33416,6 +33416,7 @@ function TextField2({
   allowCopy,
   asTextArea,
   resize,
+  variant,
   onChange,
   isReadOnly,
   isDisabled,
@@ -33445,6 +33446,7 @@ function TextField2({
           allowCopy && TextField_default.copy,
           !inputValue && TextField_default.novalue,
           resize && TextField_default[`resize-${resize}`],
+          variant && TextField_default[`variant-${variant}`],
           className
         ),
         value: inputValue,
@@ -33875,10 +33877,9 @@ function InlineEditField({
   const [value, setValue] = useState14(defaultValue);
   const [edit, setEdit] = useState14(defaultEdit);
   const handleEdit = () => setEdit(true);
-  const handleChange = (e) => {
-    const val = e.target.value;
-    setValue(val);
-    onChange?.(val);
+  const handleChange = (value2) => {
+    setValue(value2);
+    onChange?.(value2);
   };
   const handleCommit = () => {
     setEdit(false);

package/package.json

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

package/styles.css

@@ -4166,7 +4166,7 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:f85c857d13f820fa4badfb09996080b9 */
-.TextField_field__YzU1O {
+.TextField_field__Y2NlN {
   display: flex;
   align-items: center;
   padding: 0 var(--padding-x);
@@ -4197,8 +4197,8 @@ body a.Button_button__NGQyO {
     }
   }
 }
-.TextField_field__YzU1O input,
-.TextField_field__YzU1O textarea {
+.TextField_field__Y2NlN input,
+.TextField_field__Y2NlN textarea {
   border: none;
   outline: none;
   padding: var(--padding-y) 0;
@@ -4213,37 +4213,46 @@ body a.Button_button__NGQyO {
     -webkit-appearance: none;
   }
 }
-.TextField_icon__MDJlY {
+.TextField_icon__N2IyN {
   color: var(--font-color-muted);
   cursor: pointer;
   &:hover {
     color: var(--font-color);
   }
 }
-.TextField_novalue__NDg4Y .TextField_icon__MDJlY {
+.TextField_novalue__MzMzN .TextField_icon__N2IyN {
   color: var(--font-color-disabled);
 }
-.TextField_textarea__NTQ3M {
+.TextField_textarea__MWJjN {
   padding: 0;
   & textarea {
     padding: var(--padding);
   }
-  & .TextField_icon__MDJlY {
+  & .TextField_icon__N2IyN {
     position: absolute;
     top: var(--padding-x);
     right: var(--padding-x);
     z-index: 1;
   }
 }
-.TextField_resize-vertical__ZDc3N textarea {
+.TextField_resize-vertical__OWYwN textarea {
   resize: vertical;
 }
-.TextField_resize-horizontal__MzJjY textarea {
+.TextField_resize-horizontal__NDIyN textarea {
   resize: horizontal;
 }
-.TextField_resize-none__ZmUxZ textarea {
+.TextField_resize-none__N2Q4Y textarea {
   resize: none;
 }
+.TextField_field__Y2NlN.TextField_variant-quiet__ZTExY {
+  padding: 0;
+  border: 0;
+  outline: none;
+  box-shadow: none;
+  & input:focus {
+    border-bottom: var(--border);
+  }
+}
 
 /* virtual-css:css:603e8ab63f869366a7b9c81da6a1d757 */
 .ConfirmationDialog_dialog__YjQzN {