@umami/react-zen 0.175.0 → 0.177.0

package/dist/index.css

@@ -4170,7 +4170,7 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:685b6ac8ab5c6b43c34d2fc83c3b107d */
-.Loading_loading__MzE0Y {
+.Loading_loading__M2YyY {
   position: relative;
   display: flex;
   justify-content: center;
@@ -4178,7 +4178,7 @@ body a.Button_button__NGQyO {
   flex: 1;
   pointer-events: none;
 }
-.Loading_page__OWMxN {
+.Loading_absolute__N2IxN {
   position: absolute;
   top: 0;
   left: 0;
@@ -4186,15 +4186,15 @@ body a.Button_button__NGQyO {
   bottom: 0;
   margin: auto;
 }
-.Loading_center__ZWRmO {
+.Loading_center__ZmUzM {
   margin: auto;
 }
-.Loading_inline__NmJkY {
+.Loading_inline__MTFhM {
   display: inline-flex;
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__MDc3M {
+.Menu_menu__MDZlN {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -4203,21 +4203,22 @@ body a.Button_button__NGQyO {
   background: var(--background-color);
   overflow: hidden;
 }
-.Menu_separator__MWI1M {
+.Menu_separator__ZmMzZ {
   border-bottom: var(--border);
   margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OTMzY:not(:last-child) {
+.Menu_section__OGU4Y:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__YjkwY {
+.Menu_header__YmNkN {
   font-size: var(--font-size-3);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__ODRkY {
+.Menu_item__YjkxY {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--gap);
   font-size: var(--font-size);
   color: var(--font-color);
@@ -4228,30 +4229,36 @@ body a.Button_button__NGQyO {
   outline: none;
   width: 100%;
 }
-.Menu_item__ODRkY[data-disabled] {
+.Menu_item__YjkxY[data-disabled] {
   color: var(--font-color-disabled);
 }
-.Menu_item__ODRkY[data-focus],
-.Menu_item__ODRkY[data-focus-visible] {
+.Menu_item__YjkxY[data-focus],
+.Menu_item__YjkxY[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY:hover {
+.Menu_item__YjkxY:hover {
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY[data-selected] {
+.Menu_item__YjkxY[data-selected] {
   font-weight: bold;
-  & .Menu_checkmark__ZmU2Y {
+  & .Menu_checkmark__OTM5Y {
     display: flex;
     justify-content: flex-end;
   }
 }
-.Menu_checkmark__ZmU2Y {
+.Menu_checkmark__OTM5Y {
   display: none;
 }
-.Menu_hideCheckmark__NGQ4Y .Menu_checkmark__ZmU2Y {
+.Menu_hideCheckmark__NWJjY .Menu_checkmark__OTM5Y {
   display: none;
 }
+.Menu_label__YjgwY {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap);
+}
 
 /* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
 .Modal_overlay__MzBhO {
@@ -4962,18 +4969,19 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:c0d584d0daeaec1be71f8a50d43bf66c */
-.ThemeButton_button__Zjc5N {
-  width: 50px;
+.ThemeButton_button__YjE1Y {
+  width: 42px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
 }
-.ThemeButton_button__Zjc5N > div {
+.ThemeButton_button__YjE1Y > div {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
+  width: 50px;
 }
 
 /* virtual-css:css:9e5c8c52b82d4f77f80ba529f88ddc39 */

package/dist/index.d.mts

@@ -471,10 +471,10 @@ declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
 interface LoadingProps {
     size?: 'sm' | 'md' | 'lg';
     icon?: 'dots' | 'spinner';
-    position?: 'page' | 'center' | 'inline';
+    placement?: 'absolute' | 'center' | 'inline';
     className?: string;
 }
-declare function Loading(props: LoadingProps): react.JSX.Element;
+declare function Loading({ size, placement, icon, className, ...props }: LoadingProps): react.JSX.Element;
 
 interface MenuProps extends MenuProps$1<any> {
     className?: string;

package/dist/index.d.ts

@@ -471,10 +471,10 @@ declare function Label({ className, ...props }: LabelProps): react.JSX.Element;
 interface LoadingProps {
     size?: 'sm' | 'md' | 'lg';
     icon?: 'dots' | 'spinner';
-    position?: 'page' | 'center' | 'inline';
+    placement?: 'absolute' | 'center' | 'inline';
     className?: string;
 }
-declare function Loading(props: LoadingProps): react.JSX.Element;
+declare function Loading({ size, placement, icon, className, ...props }: LoadingProps): react.JSX.Element;
 
 interface MenuProps extends MenuProps$1<any> {
     className?: string;

package/dist/index.js

@@ -33562,14 +33562,19 @@ function InlineEditField({
 var import_classnames35 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Loading.module.css
-var Loading_default = { "loading": "Loading_loading__MzE0Y", "page": "Loading_page__OWMxN", "center": "Loading_center__ZWRmO", "inline": "Loading_inline__NmJkY" };
+var Loading_default = { "loading": "Loading_loading__M2YyY", "absolute": "Loading_absolute__N2IxN", "center": "Loading_center__ZmUzM", "inline": "Loading_inline__MTFhM" };
 
 // src/components/Loading.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function Loading(props) {
-  const { size, position = "inline", icon = "spinner", className, ...domProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ...domProps, className: (0, import_classnames35.default)(Loading_default.loading, className, Loading_default[position]), children: [
-    icon === "dots" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Dots, {}),
+function Loading({
+  size,
+  placement = "inline",
+  icon = "spinner",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ...props, className: (0, import_classnames35.default)(Loading_default.loading, className, Loading_default[placement]), children: [
+    icon === "dots" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Dots, { size }),
     icon === "spinner" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Spinner, { size })
   ] });
 }
@@ -33578,7 +33583,7 @@ function Loading(props) {
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__MDc3M", "separator": "Menu_separator__MWI1M", "section": "Menu_section__OTMzY", "header": "Menu_header__YjkwY", "item": "Menu_item__ODRkY", "checkmark": "Menu_checkmark__ZmU2Y", "hideCheckmark": "Menu_hideCheckmark__NGQ4Y" };
+var Menu_default = { "menu": "Menu_menu__MDZlN", "separator": "Menu_separator__ZmMzZ", "section": "Menu_section__OGU4Y", "header": "Menu_header__YmNkN", "item": "Menu_item__YjkxY", "checkmark": "Menu_checkmark__OTM5Y", "hideCheckmark": "Menu_hideCheckmark__NWJjY", "label": "Menu_label__YjgwY" };
 
 // src/components/Menu.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
@@ -33587,7 +33592,7 @@ function Menu2({ className, children, ...props }) {
 }
 function MenuItem2({ showChecked = true, children, className, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames36.default)(Menu_default.item, className), children: [
-    children,
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: Menu_default.label, children }),
     showChecked && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { "aria-hidden": "true", className: Menu_default.checkmark, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Icon2, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Check, {}) }) })
   ] });
 }
@@ -33983,7 +33988,7 @@ function Select2({
               autoFocus: true
             }
           ),
-          isLoading && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Loading, { icon: "dots", position: "center", size: "sm" }),
+          isLoading && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Loading, { icon: "dots", placement: "center", size: "sm" }),
           /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             List,
             {
@@ -34179,7 +34184,7 @@ function TabPanel2({ children, ...props }) {
 var import_classnames51 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ThemeButton.module.css
-var ThemeButton_default = { "button": "ThemeButton_button__Zjc5N" };
+var ThemeButton_default = { "button": "ThemeButton_button__YjE1Y" };
 
 // src/components/ThemeButton.tsx
 var import_jsx_runtime67 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -33445,14 +33445,19 @@ function InlineEditField({
 var import_classnames35 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Loading.module.css
-var Loading_default = { "loading": "Loading_loading__MzE0Y", "page": "Loading_page__OWMxN", "center": "Loading_center__ZWRmO", "inline": "Loading_inline__NmJkY" };
+var Loading_default = { "loading": "Loading_loading__M2YyY", "absolute": "Loading_absolute__N2IxN", "center": "Loading_center__ZmUzM", "inline": "Loading_inline__MTFhM" };
 
 // src/components/Loading.tsx
 import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
-function Loading(props) {
-  const { size, position = "inline", icon = "spinner", className, ...domProps } = props;
-  return /* @__PURE__ */ jsxs27("div", { ...domProps, className: (0, import_classnames35.default)(Loading_default.loading, className, Loading_default[position]), children: [
-    icon === "dots" && /* @__PURE__ */ jsx50(Dots, {}),
+function Loading({
+  size,
+  placement = "inline",
+  icon = "spinner",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs27("div", { ...props, className: (0, import_classnames35.default)(Loading_default.loading, className, Loading_default[placement]), children: [
+    icon === "dots" && /* @__PURE__ */ jsx50(Dots, { size }),
     icon === "spinner" && /* @__PURE__ */ jsx50(Spinner, { size })
   ] });
 }
@@ -33461,7 +33466,7 @@ function Loading(props) {
 var import_classnames36 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\Menu.module.css
-var Menu_default = { "menu": "Menu_menu__MDc3M", "separator": "Menu_separator__MWI1M", "section": "Menu_section__OTMzY", "header": "Menu_header__YjkwY", "item": "Menu_item__ODRkY", "checkmark": "Menu_checkmark__ZmU2Y", "hideCheckmark": "Menu_hideCheckmark__NGQ4Y" };
+var Menu_default = { "menu": "Menu_menu__MDZlN", "separator": "Menu_separator__ZmMzZ", "section": "Menu_section__OGU4Y", "header": "Menu_header__YmNkN", "item": "Menu_item__YjkxY", "checkmark": "Menu_checkmark__OTM5Y", "hideCheckmark": "Menu_hideCheckmark__NWJjY", "label": "Menu_label__YjgwY" };
 
 // src/components/Menu.tsx
 import { jsx as jsx51, jsxs as jsxs28 } from "react/jsx-runtime";
@@ -33470,7 +33475,7 @@ function Menu2({ className, children, ...props }) {
 }
 function MenuItem2({ showChecked = true, children, className, ...props }) {
   return /* @__PURE__ */ jsxs28($3674c52c6b3c5bce$export$2ce376c2cc3355c8, { ...props, className: (0, import_classnames36.default)(Menu_default.item, className), children: [
-    children,
+    /* @__PURE__ */ jsx51("div", { className: Menu_default.label, children }),
     showChecked && /* @__PURE__ */ jsx51("div", { "aria-hidden": "true", className: Menu_default.checkmark, children: /* @__PURE__ */ jsx51(Icon2, { children: /* @__PURE__ */ jsx51(Check, {}) }) })
   ] });
 }
@@ -33870,7 +33875,7 @@ function Select2({
               autoFocus: true
             }
           ),
-          isLoading && /* @__PURE__ */ jsx61(Loading, { icon: "dots", position: "center", size: "sm" }),
+          isLoading && /* @__PURE__ */ jsx61(Loading, { icon: "dots", placement: "center", size: "sm" }),
           /* @__PURE__ */ jsx61(
             List,
             {
@@ -34066,7 +34071,7 @@ function TabPanel2({ children, ...props }) {
 var import_classnames51 = __toESM(require_classnames());
 
 // css-modules:E:\dev\umami-react-zen\src\components\ThemeButton.module.css
-var ThemeButton_default = { "button": "ThemeButton_button__Zjc5N" };
+var ThemeButton_default = { "button": "ThemeButton_button__YjE1Y" };
 
 // src/components/ThemeButton.tsx
 import { jsx as jsx67, jsxs as jsxs41 } from "react/jsx-runtime";

package/package.json

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

package/styles.css

@@ -4488,7 +4488,7 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:685b6ac8ab5c6b43c34d2fc83c3b107d */
-.Loading_loading__MzE0Y {
+.Loading_loading__M2YyY {
   position: relative;
   display: flex;
   justify-content: center;
@@ -4496,7 +4496,7 @@ body a.Button_button__NGQyO {
   flex: 1;
   pointer-events: none;
 }
-.Loading_page__OWMxN {
+.Loading_absolute__N2IxN {
   position: absolute;
   top: 0;
   left: 0;
@@ -4504,15 +4504,15 @@ body a.Button_button__NGQyO {
   bottom: 0;
   margin: auto;
 }
-.Loading_center__ZWRmO {
+.Loading_center__ZmUzM {
   margin: auto;
 }
-.Loading_inline__NmJkY {
+.Loading_inline__MTFhM {
   display: inline-flex;
 }
 
 /* virtual-css:css:3130df15a3cfaee8cb812b182afb7ee1 */
-.Menu_menu__MDc3M {
+.Menu_menu__MDZlN {
   min-width: 200px;
   border: var(--border);
   border-radius: var(--border-radius);
@@ -4521,21 +4521,22 @@ body a.Button_button__NGQyO {
   background: var(--background-color);
   overflow: hidden;
 }
-.Menu_separator__MWI1M {
+.Menu_separator__ZmMzZ {
   border-bottom: var(--border);
   margin: var(--spacing-2) calc(-1 * var(--spacing-3));
 }
-.Menu_section__OTMzY:not(:last-child) {
+.Menu_section__OGU4Y:not(:last-child) {
   margin-bottom: var(--spacing-4);
 }
-.Menu_header__YjkwY {
+.Menu_header__YmNkN {
   font-size: var(--font-size-3);
   font-weight: var(--font-weight-bold);
   padding: var(--padding);
 }
-.Menu_item__ODRkY {
+.Menu_item__YjkxY {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: var(--gap);
   font-size: var(--font-size);
   color: var(--font-color);
@@ -4546,30 +4547,36 @@ body a.Button_button__NGQyO {
   outline: none;
   width: 100%;
 }
-.Menu_item__ODRkY[data-disabled] {
+.Menu_item__YjkxY[data-disabled] {
   color: var(--font-color-disabled);
 }
-.Menu_item__ODRkY[data-focus],
-.Menu_item__ODRkY[data-focus-visible] {
+.Menu_item__YjkxY[data-focus],
+.Menu_item__YjkxY[data-focus-visible] {
   outline: var(--outline);
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY:hover {
+.Menu_item__YjkxY:hover {
   background: var(--highlight-color);
 }
-.Menu_item__ODRkY[data-selected] {
+.Menu_item__YjkxY[data-selected] {
   font-weight: bold;
-  & .Menu_checkmark__ZmU2Y {
+  & .Menu_checkmark__OTM5Y {
     display: flex;
     justify-content: flex-end;
   }
 }
-.Menu_checkmark__ZmU2Y {
+.Menu_checkmark__OTM5Y {
   display: none;
 }
-.Menu_hideCheckmark__NGQ4Y .Menu_checkmark__ZmU2Y {
+.Menu_hideCheckmark__NWJjY .Menu_checkmark__OTM5Y {
   display: none;
 }
+.Menu_label__YjgwY {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap);
+}
 
 /* virtual-css:css:593a0302ed618f22d0e6c3631ec684d2 */
 .Modal_overlay__MzBhO {
@@ -5280,18 +5287,19 @@ body a.Button_button__NGQyO {
 }
 
 /* virtual-css:css:c0d584d0daeaec1be71f8a50d43bf66c */
-.ThemeButton_button__Zjc5N {
-  width: 50px;
+.ThemeButton_button__YjE1Y {
+  width: 42px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
 }
-.ThemeButton_button__Zjc5N > div {
+.ThemeButton_button__YjE1Y > div {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
+  width: 50px;
 }
 
 /* virtual-css:css:9e5c8c52b82d4f77f80ba529f88ddc39 */