@umami/react-zen 0.134.0 → 0.136.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;
@@ -551,8 +550,8 @@ declare function SearchField({ label, placeholder, value, defaultValue, delay, o
 
 interface SelectProps extends SelectProps$1<HTMLSelectElement> {
     items?: any[];
-    value?: string;
-    defaultValue?: string;
+    value?: string | number;
+    defaultValue?: string | number;
     label?: string;
     isLoading?: boolean;
     allowSearch?: 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;
@@ -551,8 +550,8 @@ declare function SearchField({ label, placeholder, value, defaultValue, delay, o
 
 interface SelectProps extends SelectProps$1<HTMLSelectElement> {
     items?: any[];
-    value?: string;
-    defaultValue?: string;
+    value?: string | number;
+    defaultValue?: string | number;
     label?: string;
     isLoading?: boolean;
     allowSearch?: 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umami/react-zen",
-  "version": "0.134.0",
+  "version": "0.136.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;
 }