@umami/react-zen 0.148.0 → 0.149.0

package/dist/index.css

@@ -4621,37 +4621,41 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:e81ca83878ceb2dba8f2cfa72b015b4c */
-.Sidebar_sidenav__OGRiM {
+:root {
+  --sidebar-expanded-width: 260px;
+  --sidebar-collapsed-width: 68px;
+}
+.Sidebar_sidebar__YWUyN {
   height: 100%;
   font-size: var(--font-size);
   border-right: 1px solid var(--border-color);
-  width: 200px;
+  width: var(--sidebar-expanded-width);
   overflow: hidden;
   transition: width 0.1s ease-out;
 }
-.Sidebar_header__ZTZhN {
+.Sidebar_header__MmM1Y {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.Sidebar_name__YWUwM {
+.Sidebar_name__ZjQ0Z {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_section__NDE3M {
+.Sidebar_section__MWE3N {
   padding: var(--spacing-3);
   overflow: hidden;
 }
-.Sidebar_title__Njc2M {
+.Sidebar_title__NDMwM {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_content__YmIwN {
+.Sidebar_content__MDBlM {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ {
+.Sidebar_item__ZDA4Z {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -4665,61 +4669,61 @@ body a.Button_button__MDE1O {
   white-space: nowrap;
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ:hover {
+.Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_label__MWUzO {
+.Sidebar_label__ODNmM {
   opacity: 1;
   width: 100%;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM .Sidebar_label__MWUzO {
+.Sidebar_collapsed__ZGE3M .Sidebar_label__ODNmM {
   opacity: 0;
   width: 0;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM {
-  width: 68px;
+.Sidebar_collapsed__ZGE3M {
+  width: var(--sidebar-collapsed-width);
   transition: width 0.2s ease-in-out;
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z {
   color: var(--font-color-muted);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ:hover {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ.Sidebar_selected__MTdkY {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z.Sidebar_selected__ZTk5M {
   color: var(--font-color);
 }
-.Sidebar_variant-quiet__MzFlN {
+.Sidebar_variant-quiet__ODNlY {
   background: transparent;
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-1__ZTY2M {
+.Sidebar_variant-1__ZWRiO {
   background: var(--base-color-1);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-2__YzU0O {
+.Sidebar_variant-2__YzNlO {
   background: var(--base-color-2);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-3);
   }
 }
-.Sidebar_variant-3__YWRmM {
+.Sidebar_variant-3__YmZiN {
   background: var(--base-color-3);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-4);
   }
 }
-.Sidebar_sidenav__OGRiM.Sidebar_noborder__ODBlM {
+.Sidebar_sidebar__YWUyN.Sidebar_noborder__ZjYwZ {
   border: 0;
 }
 
@@ -4845,55 +4849,57 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:cbe0b95a27006b7a9f50c85d359272dc */
-.Switch_switch__NTVjN {
+:root {
+  --switch-knob-size: 16px;
+  --switch-knob-border-size: 2px;
+}
+.Switch_switch__ODFhM {
   position: relative;
   display: flex;
   align-items: center;
   font-size: var(--font-size);
   color: var(--font-color);
   gap: var(--gap);
-  --knob-size: 16px;
-  --knob-border-size: 2px;
 }
-.Switch_track__MTE2N {
+.Switch_track__YTU0N {
   position: relative;
   display: flex;
   align-items: center;
-  width: calc((var(--knob-size) + var(--knob-border-size)) * 2);
-  height: calc(var(--knob-size) + var(--knob-border-size) * 2);
-  border: var(--knob-border-size) solid transparent;
-  border-radius: calc(var(--knob-size) + var(--knob-border-size) * 2);
+  width: calc((var(--switch-knob-size) + var(--switch-knob-border-size)) * 2);
+  height: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
+  border: var(--switch-knob-border-size) solid transparent;
+  border-radius: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
   background: var(--base-color-3);
   transition: background-color 0.2s;
   cursor: pointer;
   outline: 1px solid var(--border-color);
 }
-.Switch_knob__OWYwN {
-  width: var(--knob-size);
-  height: var(--knob-size);
+.Switch_knob__YWNjN {
+  width: var(--switch-knob-size);
+  height: var(--switch-knob-size);
   border-radius: 100%;
   background: var(--background-color);
   transition: all 0.2s;
   box-shadow: var(--box-shadow-2);
   outline: 1px solid var(--border-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-selected] .Switch_track__YTU0N {
   outline-color: var(--primary-color);
   background: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_knob__OWYwN {
-  margin-left: var(--knob-size);
+.Switch_switch__ODFhM[data-selected] .Switch_knob__YWNjN {
+  margin-left: var(--switch-knob-size);
   outline-color: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-disabled] {
+.Switch_switch__ODFhM[data-disabled] {
   color: var(--font-color-disabled);
   pointer-events: none;
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-disabled] .Switch_track__YTU0N {
   background: var(--base-color-3);
   outline-color: var(--base-color-3);
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_knob__OWYwN {
+.Switch_switch__ODFhM[data-disabled] .Switch_knob__YWNjN {
   background: var(--base-color-1);
   outline-color: var(--base-color-1);
 }

package/dist/index.js

@@ -31751,7 +31751,7 @@ var import_react189 = require("react");
 var import_classnames46 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Sidebar.module.css
-var Sidebar_default = { "sidenav": "Sidebar_sidenav__OGRiM", "header": "Sidebar_header__ZTZhN", "name": "Sidebar_name__YWUwM", "section": "Sidebar_section__NDE3M", "title": "Sidebar_title__Njc2M", "content": "Sidebar_content__YmIwN", "item": "Sidebar_item__ZDVjZ", "label": "Sidebar_label__MWUzO", "collapsed": "Sidebar_collapsed__ZjFkM", "muted": "Sidebar_muted__YjM1M", "selected": "Sidebar_selected__MTdkY", "variant-quiet": "Sidebar_variant-quiet__MzFlN", "variant-1": "Sidebar_variant-1__ZTY2M", "variant-2": "Sidebar_variant-2__YzU0O", "variant-3": "Sidebar_variant-3__YWRmM", "noborder": "Sidebar_noborder__ODBlM" };
+var Sidebar_default = { "sidebar": "Sidebar_sidebar__YWUyN", "header": "Sidebar_header__MmM1Y", "name": "Sidebar_name__ZjQ0Z", "section": "Sidebar_section__MWE3N", "title": "Sidebar_title__NDMwM", "content": "Sidebar_content__MDBlM", "item": "Sidebar_item__ZDA4Z", "label": "Sidebar_label__ODNmM", "collapsed": "Sidebar_collapsed__ZGE3M", "muted": "Sidebar_muted__ZGI2O", "selected": "Sidebar_selected__ZTk5M", "variant-quiet": "Sidebar_variant-quiet__ODNlY", "variant-1": "Sidebar_variant-1__ZWRiO", "variant-2": "Sidebar_variant-2__YzNlO", "variant-3": "Sidebar_variant-3__YmZiN", "noborder": "Sidebar_noborder__ZjYwZ" };
 
 // src/components/Sidebar.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -31770,7 +31770,7 @@ function Sidebar({
     {
       ...props,
       className: (0, import_classnames46.default)(
-        Sidebar_default.sidenav,
+        Sidebar_default.sidebar,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
         variant && Sidebar_default[`variant-${variant}`],
@@ -31889,7 +31889,7 @@ function StatusLight(props) {
 var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Switch.module.css
-var Switch_default = { "switch": "Switch_switch__NTVjN", "track": "Switch_track__MTE2N", "knob": "Switch_knob__OWYwN" };
+var Switch_default = { "switch": "Switch_switch__ODFhM", "track": "Switch_track__YTU0N", "knob": "Switch_knob__YWNjN" };
 
 // src/components/Switch.tsx
 var import_jsx_runtime64 = require("react/jsx-runtime");

package/dist/index.mjs

@@ -31639,7 +31639,7 @@ var import_classnames46 = __toESM(require_classnames());
 import { createContext as createContext4, useContext as useContext6 } from "react";
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Sidebar.module.css
-var Sidebar_default = { "sidenav": "Sidebar_sidenav__OGRiM", "header": "Sidebar_header__ZTZhN", "name": "Sidebar_name__YWUwM", "section": "Sidebar_section__NDE3M", "title": "Sidebar_title__Njc2M", "content": "Sidebar_content__YmIwN", "item": "Sidebar_item__ZDVjZ", "label": "Sidebar_label__MWUzO", "collapsed": "Sidebar_collapsed__ZjFkM", "muted": "Sidebar_muted__YjM1M", "selected": "Sidebar_selected__MTdkY", "variant-quiet": "Sidebar_variant-quiet__MzFlN", "variant-1": "Sidebar_variant-1__ZTY2M", "variant-2": "Sidebar_variant-2__YzU0O", "variant-3": "Sidebar_variant-3__YWRmM", "noborder": "Sidebar_noborder__ODBlM" };
+var Sidebar_default = { "sidebar": "Sidebar_sidebar__YWUyN", "header": "Sidebar_header__MmM1Y", "name": "Sidebar_name__ZjQ0Z", "section": "Sidebar_section__MWE3N", "title": "Sidebar_title__NDMwM", "content": "Sidebar_content__MDBlM", "item": "Sidebar_item__ZDA4Z", "label": "Sidebar_label__ODNmM", "collapsed": "Sidebar_collapsed__ZGE3M", "muted": "Sidebar_muted__ZGI2O", "selected": "Sidebar_selected__ZTk5M", "variant-quiet": "Sidebar_variant-quiet__ODNlY", "variant-1": "Sidebar_variant-1__ZWRiO", "variant-2": "Sidebar_variant-2__YzNlO", "variant-3": "Sidebar_variant-3__YmZiN", "noborder": "Sidebar_noborder__ZjYwZ" };
 
 // src/components/Sidebar.tsx
 import { jsx as jsx61, jsxs as jsxs36 } from "react/jsx-runtime";
@@ -31658,7 +31658,7 @@ function Sidebar({
     {
       ...props,
       className: (0, import_classnames46.default)(
-        Sidebar_default.sidenav,
+        Sidebar_default.sidebar,
         isCollapsed && Sidebar_default.collapsed,
         muteItems && Sidebar_default.muted,
         variant && Sidebar_default[`variant-${variant}`],
@@ -31777,7 +31777,7 @@ function StatusLight(props) {
 var import_classnames49 = __toESM(require_classnames());
 
 // css-modules:/Users/mikecao/Development/umami-software/react-zen/src/components/Switch.module.css
-var Switch_default = { "switch": "Switch_switch__NTVjN", "track": "Switch_track__MTE2N", "knob": "Switch_knob__OWYwN" };
+var Switch_default = { "switch": "Switch_switch__ODFhM", "track": "Switch_track__YTU0N", "knob": "Switch_knob__YWNjN" };
 
 // src/components/Switch.tsx
 import { jsx as jsx64, jsxs as jsxs39 } from "react/jsx-runtime";

package/package.json

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

package/styles.css

@@ -4939,37 +4939,41 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:e81ca83878ceb2dba8f2cfa72b015b4c */
-.Sidebar_sidenav__OGRiM {
+:root {
+  --sidebar-expanded-width: 260px;
+  --sidebar-collapsed-width: 68px;
+}
+.Sidebar_sidebar__YWUyN {
   height: 100%;
   font-size: var(--font-size);
   border-right: 1px solid var(--border-color);
-  width: 200px;
+  width: var(--sidebar-expanded-width);
   overflow: hidden;
   transition: width 0.1s ease-out;
 }
-.Sidebar_header__ZTZhN {
+.Sidebar_header__MmM1Y {
   display: flex;
   align-items: center;
   gap: var(--gap);
   padding: var(--padding);
 }
-.Sidebar_name__YWUwM {
+.Sidebar_name__ZjQ0Z {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_section__NDE3M {
+.Sidebar_section__MWE3N {
   padding: var(--spacing-3);
   overflow: hidden;
 }
-.Sidebar_title__Njc2M {
+.Sidebar_title__NDMwM {
   font-weight: var(--font-weight-bold);
 }
-.Sidebar_content__YmIwN {
+.Sidebar_content__MDBlM {
   display: grid;
   min-height: 40px;
   gap: var(--gap);
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ {
+.Sidebar_item__ZDA4Z {
   display: flex;
   align-items: center;
   justify-content: flex-start;
@@ -4983,61 +4987,61 @@ body a.Button_button__MDE1O {
   white-space: nowrap;
   overflow: hidden;
 }
-.Sidebar_item__ZDVjZ:hover {
+.Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_label__MWUzO {
+.Sidebar_label__ODNmM {
   opacity: 1;
   width: 100%;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM .Sidebar_label__MWUzO {
+.Sidebar_collapsed__ZGE3M .Sidebar_label__ODNmM {
   opacity: 0;
   width: 0;
   transition: all 0.3s;
 }
-.Sidebar_collapsed__ZjFkM {
-  width: 68px;
+.Sidebar_collapsed__ZGE3M {
+  width: var(--sidebar-collapsed-width);
   transition: width 0.2s ease-in-out;
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z {
   color: var(--font-color-muted);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ:hover {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z:hover {
   color: var(--font-color);
 }
-.Sidebar_muted__YjM1M .Sidebar_item__ZDVjZ.Sidebar_selected__MTdkY {
+.Sidebar_muted__ZGI2O .Sidebar_item__ZDA4Z.Sidebar_selected__ZTk5M {
   color: var(--font-color);
 }
-.Sidebar_variant-quiet__MzFlN {
+.Sidebar_variant-quiet__ODNlY {
   background: transparent;
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-1__ZTY2M {
+.Sidebar_variant-1__ZWRiO {
   background: var(--base-color-1);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-2);
   }
 }
-.Sidebar_variant-2__YzU0O {
+.Sidebar_variant-2__YzNlO {
   background: var(--base-color-2);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-3);
   }
 }
-.Sidebar_variant-3__YWRmM {
+.Sidebar_variant-3__YmZiN {
   background: var(--base-color-3);
-  & .Sidebar_item__ZDVjZ:hover,
-  .Sidebar_selected__MTdkY {
+  & .Sidebar_item__ZDA4Z:hover,
+  .Sidebar_selected__ZTk5M {
     background: var(--base-color-4);
   }
 }
-.Sidebar_sidenav__OGRiM.Sidebar_noborder__ODBlM {
+.Sidebar_sidebar__YWUyN.Sidebar_noborder__ZjYwZ {
   border: 0;
 }
 
@@ -5163,55 +5167,57 @@ body a.Button_button__MDE1O {
 }
 
 /* virtual-css:css:cbe0b95a27006b7a9f50c85d359272dc */
-.Switch_switch__NTVjN {
+:root {
+  --switch-knob-size: 16px;
+  --switch-knob-border-size: 2px;
+}
+.Switch_switch__ODFhM {
   position: relative;
   display: flex;
   align-items: center;
   font-size: var(--font-size);
   color: var(--font-color);
   gap: var(--gap);
-  --knob-size: 16px;
-  --knob-border-size: 2px;
 }
-.Switch_track__MTE2N {
+.Switch_track__YTU0N {
   position: relative;
   display: flex;
   align-items: center;
-  width: calc((var(--knob-size) + var(--knob-border-size)) * 2);
-  height: calc(var(--knob-size) + var(--knob-border-size) * 2);
-  border: var(--knob-border-size) solid transparent;
-  border-radius: calc(var(--knob-size) + var(--knob-border-size) * 2);
+  width: calc((var(--switch-knob-size) + var(--switch-knob-border-size)) * 2);
+  height: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
+  border: var(--switch-knob-border-size) solid transparent;
+  border-radius: calc(var(--switch-knob-size) + var(--switch-knob-border-size) * 2);
   background: var(--base-color-3);
   transition: background-color 0.2s;
   cursor: pointer;
   outline: 1px solid var(--border-color);
 }
-.Switch_knob__OWYwN {
-  width: var(--knob-size);
-  height: var(--knob-size);
+.Switch_knob__YWNjN {
+  width: var(--switch-knob-size);
+  height: var(--switch-knob-size);
   border-radius: 100%;
   background: var(--background-color);
   transition: all 0.2s;
   box-shadow: var(--box-shadow-2);
   outline: 1px solid var(--border-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-selected] .Switch_track__YTU0N {
   outline-color: var(--primary-color);
   background: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-selected] .Switch_knob__OWYwN {
-  margin-left: var(--knob-size);
+.Switch_switch__ODFhM[data-selected] .Switch_knob__YWNjN {
+  margin-left: var(--switch-knob-size);
   outline-color: var(--primary-color);
 }
-.Switch_switch__NTVjN[data-disabled] {
+.Switch_switch__ODFhM[data-disabled] {
   color: var(--font-color-disabled);
   pointer-events: none;
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_track__MTE2N {
+.Switch_switch__ODFhM[data-disabled] .Switch_track__YTU0N {
   background: var(--base-color-3);
   outline-color: var(--base-color-3);
 }
-.Switch_switch__NTVjN[data-disabled] .Switch_knob__OWYwN {
+.Switch_switch__ODFhM[data-disabled] .Switch_knob__YWNjN {
   background: var(--base-color-1);
   outline-color: var(--base-color-1);
 }