modular-ui-kit-react 1.0.1 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -0
- package/dist/index.cjs +1 -1
- package/dist/index.js +2 -2
- package/dist/modular-ui-kit-react.css +1 -1
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -9,6 +9,9 @@
|
|
|
9
9
|
*Modular UI Kit React* A lightweight, modular React component library powered by SASS and unified design tokens. Built for seamless developer experience and modern web UI consistency.
|
|
10
10
|
_________
|
|
11
11
|
|
|
12
|
+
```import 'modular-ui-kit-react/modular-ui-kit-react.css'```
|
|
13
|
+
|
|
14
|
+
|
|
12
15
|
### ⭐️ MukText ⭐️
|
|
13
16
|
A flexible typography component designed to render consistent text elements (p, h1–h6, span, a, etc.) with standardized styling and semantic control via the as polymorphic prop.
|
|
14
17
|
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("react");var n=({variant:t=`secondary`,align:n=`left`,as:r=`p`,type:i=`muk-body-text`,children:a,className:o=``,...s})=>{let c=[i,`muk-txt--${n}`,`muk-txt--${t}`,o].filter(Boolean).join(` `);return(0,e.jsx)(r,{className:c,...s,children:a})},r=({variant:t=`primary`,type:n=`button`,size:r=`lg`,loading:i=!1,disabled:a=!1,className:o=``,children:s,...c})=>{let l=[`muk-btn`,`muk-btn--${t}`,`muk-btn--${r}`,i?`isLoading`:``,o].filter(Boolean).join(` `);return(0,e.jsx)(`button`,{type:n,className:l,disabled:a||i,"aria-busy":i,...c,children:i?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(`span`,{className:`muk-btn-spinner`,"aria-hidden":`true`}),(0,e.jsx)(`span`,{className:`visually-hidden`,children:`Loading`})]}):(0,e.jsx)(`span`,{className:`muk-btn__content`,children:s})})},i=({variant:t=`primary`,type:n=`button`,size:r=`lg`,loading:i=!1,disabled:a=!1,className:o=``,ariaLabel:s,text:c,children:l,...u})=>{let d=[`muk-btn-icon`,`muk-btn-icon--${t}`,`muk-btn-icon--${r}`,i?`isLoading`:``,c?`has-text`:``,o].filter(Boolean).join(` `);return(0,e.jsx)(`button`,{type:n,className:d,disabled:a||i,"aria-busy":i,"
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react/jsx-runtime"),t=require("react");var n=({variant:t=`secondary`,align:n=`left`,as:r=`p`,type:i=`muk-body-text`,children:a,className:o=``,...s})=>{let c=[i,`muk-txt--${n}`,`muk-txt--${t}`,o].filter(Boolean).join(` `);return(0,e.jsx)(r,{className:c,...s,children:a})},r=({variant:t=`primary`,type:n=`button`,size:r=`lg`,loading:i=!1,disabled:a=!1,className:o=``,children:s,...c})=>{let l=[`muk-btn`,`muk-btn--${t}`,`muk-btn--${r}`,i?`isLoading`:``,o].filter(Boolean).join(` `);return(0,e.jsx)(`button`,{type:n,className:l,disabled:a||i,"aria-busy":i,...c,children:i?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(`span`,{className:`muk-btn-spinner`,"aria-hidden":`true`}),(0,e.jsx)(`span`,{className:`visually-hidden`,children:`Loading`})]}):(0,e.jsx)(`span`,{className:`muk-btn__content`,children:s})})},i=({variant:t=`primary`,type:n=`button`,size:r=`lg`,loading:i=!1,disabled:a=!1,className:o=``,ariaLabel:s,text:c,children:l,...u})=>{let d=[`muk-btn-icon`,`muk-btn-icon--${t}`,`muk-btn-icon--${r}`,i?`isLoading`:``,c?`has-text`:``,o].filter(Boolean).join(` `);return(0,e.jsx)(`button`,{type:n,className:d,disabled:a||i,"aria-busy":i,"aria-label":s?String(s):void 0,...u,children:i?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(`span`,{className:`muk-btn-spinner`,"aria-hidden":`true`}),(0,e.jsx)(`span`,{className:`visually-hidden`,children:`Loading`})]}):(0,e.jsxs)(`span`,{className:`muk-btn-icon__content`,children:[l,c]})})},a=({type:n=`text`,value:r=``,onChange:a,label:o,error:s,hint:c,showPasswordToggle:l=!0,disabled:u=!1,placeholder:d,id:f,className:p=``,...m})=>{let h=(0,t.useId)(),g=f||h,[_,v]=(0,t.useState)(!1),y=n===`password`&&l,b=y?_?`text`:`password`:n,x=[`muk-input`,y?`muk-input-password`:``,p].filter(Boolean).join(` `),S=[`muk-input__field`,s?`is-error`:``].filter(Boolean).join(` `),C=()=>{v(e=>!e)};return(0,e.jsxs)(`div`,{className:x,children:[o&&(0,e.jsx)(`label`,{htmlFor:g,className:`muk-form-label muk-form-label--top`,children:o}),(0,e.jsxs)(`div`,{className:`muk-input__wrapper`,children:[(0,e.jsx)(`input`,{id:g,type:b,value:r,disabled:u,placeholder:d,className:S,onChange:e=>a?.(e.target.value),"aria-invalid":!!s,"aria-describedby":s?`${g}-error`:c?`${g}-hint`:void 0,...m}),y&&(0,e.jsx)(i,{className:`muk-input__button`,onClick:C,ariaLabel:_?`Hide password`:`Show password`,children:_?(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 -960 960 960`,children:(0,e.jsx)(`path`,{d:`M403.5-423.5Q372-455 372-500t31.5-76.5Q435-608 480-608t76.5 31.5Q588-545 588-500t-31.5 76.5Q525-392 480-392t-76.5-31.5ZM480-200q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q141 0 257.5 76T912-520h-91q-52-93-143-146.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280q20 0 40-2t40-6v81q-20 3-40 5t-40 2Zm0-120q22 0 42.5-5t38.5-14q5-50 31.5-90t67.5-64v-7q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm-5-180Zm205 380q-17 0-28.5-11.5T640-160v-120q0-17 11.5-28.5T680-320v-40q0-33 23.5-56.5T760-440q33 0 56.5 23.5T840-360v40q17 0 28.5 11.5T880-280v120q0 17-11.5 28.5T840-120H680Zm40-200h80v-40q0-17-11.5-28.5T760-400q-17 0-28.5 11.5T720-360v40Z`})}):(0,e.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 -960 960 960`,children:(0,e.jsx)(`path`,{d:`M607.5-372.5Q660-425 660-500t-52.5-127.5Q555-680 480-680t-127.5 52.5Q300-575 300-500t52.5 127.5Q405-320 480-320t127.5-52.5Zm-204-51Q372-455 372-500t31.5-76.5Q435-608 480-608t76.5 31.5Q588-545 588-500t-31.5 76.5Q525-392 480-392t-76.5-31.5ZM214-281.5Q94-363 40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200q-146 0-266-81.5ZM480-500Zm207.5 160.5Q782-399 832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280q113 0 207.5-59.5Z`})})})]}),s?(0,e.jsx)(`p`,{className:`muk-form-error`,id:`${g}-error`,children:s}):c?(0,e.jsx)(`p`,{className:`muk-form-hint`,id:`${g}-hint`,children:c}):null]})},o=({value:n=!1,onChange:r,label:i,error:a,hint:o,disabled:s=!1,id:c,className:l=``,...u})=>{let d=(0,t.useId)(),f=c||d,p=[`muk-checkbox`,a?`is-error`:``,s?`is-disabled`:``,l].filter(Boolean).join(` `);return(0,e.jsxs)(`div`,{className:p,children:[(0,e.jsx)(`label`,{htmlFor:f,className:`muk-checkbox__wrapper`,children:(0,e.jsxs)(`div`,{className:`muk-checkbox__data`,children:[(0,e.jsx)(`input`,{type:`checkbox`,className:`muk-checkbox__field`,id:f,checked:n,disabled:s,onChange:e=>r?.(e.target.checked),"aria-invalid":!!a,"aria-describedby":a?`${f}-error`:o?`${f}-hint`:void 0,...u}),(0,e.jsx)(`span`,{className:`muk-checkbox__box`,children:(0,e.jsx)(`span`,{className:`muk-checkbox__check`,children:`✓`})}),i&&(0,e.jsxs)(`span`,{className:`muk-form-label muk-form-label--side`,children:[` `,i]})]})}),(0,e.jsx)(`div`,{className:`muk-checkbox__info`,children:a?(0,e.jsx)(`p`,{className:`muk-form-error`,id:`${f}-error`,children:a}):o?(0,e.jsx)(`p`,{className:`muk-form-hint`,id:`${f}-hint`,children:o}):null})]})},s=({onChange:n,value:r,selectedValue:i,label:a,error:o,hint:s,name:c,disabled:l=!1,id:u,className:d=``,...f})=>{let p=(0,t.useId)(),m=u||p,h=i===void 0?f.checked:i===r,g=[`muk-radio`,o?`is-error`:``,l?`is-disabled`:``,d].filter(Boolean).join(` `);return(0,e.jsxs)(`div`,{className:g,children:[(0,e.jsx)(`label`,{htmlFor:m,className:`muk-radio__wrapper`,children:(0,e.jsxs)(`div`,{className:`muk-radio__data`,children:[(0,e.jsx)(`input`,{type:`radio`,className:`muk-radio__field`,name:c,id:m,checked:h,disabled:l,onChange:()=>n?.(r),"aria-invalid":!!o,"aria-describedby":o?`${m}-error`:s?`${m}-hint`:void 0,...f}),(0,e.jsx)(`span`,{className:`muk-radio__box`,children:(0,e.jsx)(`span`,{className:`muk-radio__circle`,"aria-hidden":`true`})}),a&&(0,e.jsx)(`span`,{className:`muk-form-label muk-form-label--side`,children:a})]})}),(0,e.jsx)(`div`,{className:`muk-radio__info`,children:o?(0,e.jsx)(`p`,{className:`muk-form-error`,id:`${m}-error`,children:o}):s?(0,e.jsx)(`p`,{className:`muk-form-hint`,id:`${m}-hint`,children:s}):null})]})},c=({onChange:n,value:r,options:i=[],label:a,error:o,hint:s,name:c,placeholder:l,disabled:u=!1,id:d,className:f=``,...p})=>{let m=(0,t.useId)(),h=d||m,g=[`muk-select`,o?`is-error`:``,u?`is-disabled`:``,f].filter(Boolean).join(` `);return(0,e.jsxs)(`div`,{className:g,children:[a&&(0,e.jsx)(`label`,{htmlFor:h,className:`muk-form-label muk-form-label--top`,children:a}),(0,e.jsxs)(`div`,{className:`muk-select__wrapper`,children:[(0,e.jsxs)(`select`,{className:`muk-select__field`,name:c,id:h,disabled:u,value:r??``,onChange:e=>n?.(e.target.value),"aria-invalid":!!o,"aria-describedby":o?`${h}-error`:s?`${h}-hint`:void 0,...p,children:[i.map(t=>(0,e.jsx)(`option`,{value:t.value,children:t.label},t.value)),l&&(0,e.jsx)(`option`,{disabled:!0,children:l})]}),(0,e.jsx)(`span`,{className:`muk-select__icon`,children:`↓`})]})]})},l=({value:n=``,onChange:r,label:i,error:a,hint:o,rows:s=6,disabled:c=!1,placeholder:l,id:u,className:d=``,...f})=>{let p=(0,t.useId)(),m=u||p,h=[`muk-textarea`,a?`is-error`:``,c?`is-disabled`:``,d].filter(Boolean).join(` `);return(0,e.jsxs)(`div`,{className:h,children:[i&&(0,e.jsx)(`label`,{htmlFor:m,className:`muk-form-label muk-form-label--top`,children:i}),(0,e.jsx)(`textarea`,{className:`muk-textarea__field`,id:m,value:n,onChange:e=>r?.(e.target.value),placeholder:l,rows:s,disabled:c,"aria-invalid":!!a,"aria-describedby":a?`${m}-error`:o?`${m}-hint`:void 0,...f}),a?(0,e.jsx)(`p`,{className:`muk-form-error`,id:`${m}-error`,children:a}):o?(0,e.jsx)(`p`,{className:`muk-form-hint`,id:`${m}-hint`,children:o}):null]})};exports.MukButton=r,exports.MukCheckbox=o,exports.MukIconButton=i,exports.MukInput=a,exports.MukRadio=s,exports.MukSelect=c,exports.MukText=n,exports.MukTextarea=l;
|
package/dist/index.js
CHANGED
|
@@ -52,7 +52,7 @@ var a = ({ variant: e = "secondary", align: n = "left", as: r = "p", type: i = "
|
|
|
52
52
|
className: p,
|
|
53
53
|
disabled: s || o,
|
|
54
54
|
"aria-busy": o,
|
|
55
|
-
"
|
|
55
|
+
"aria-label": l ? String(l) : void 0,
|
|
56
56
|
...f,
|
|
57
57
|
children: o ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
|
|
58
58
|
className: "muk-btn-spinner",
|
|
@@ -77,7 +77,7 @@ var a = ({ variant: e = "secondary", align: n = "left", as: r = "p", type: i = "
|
|
|
77
77
|
className: C,
|
|
78
78
|
children: [
|
|
79
79
|
c && /* @__PURE__ */ t("label", {
|
|
80
|
-
htmlFor:
|
|
80
|
+
htmlFor: v,
|
|
81
81
|
className: "muk-form-label muk-form-label--top",
|
|
82
82
|
children: c
|
|
83
83
|
}),
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{--muk-text:#eceef2;--muk-text-muted:#8a93a6;--muk-bg:#0b0d11;--muk-bg-soft:#12151c;--muk-bg-card:#171b24;--muk-bg-code:#1e2330;--muk-primary:#6366f1;--muk-primary-hover:#4f46e5;--muk-danger:#ff4a6b;--muk-success:#10b981;--muk-warning:#f59e0b;--muk-font-family:"Inter", system-ui, -apple-system, sans-serif;--muk-font-heading:26px;--muk-font-subheading:19px;--muk-font-body:16px;--muk-caption:14px;--muk-font-heading-md:24px;--muk-font-subheading-md:18px;--muk-font-body-md:15px;--muk-caption-md:13px;--muk-font-heading-sm:20px;--muk-font-subheading-sm:16px;--muk-font-body-sm:14px;--muk-caption-sm:13px;--muk-border-color:#eceef214;--muk-border-width:1px;--muk-border-style:solid;--muk-border-radius:5px;--muk-space-content-sm:6px;--muk-space-content-md:10px;--muk-space-content-lg:14px;--muk-space-container-sm:16px;--muk-space-container-md:24px;--muk-space-container-lg:32px;--muk-transition:all .3s ease-out;--muk-opacity:.4}.muk-wrapper{background:var(--muk-bg);flex-direction:column;min-height:100vh;display:flex}.muk-header{flex:none}.muk-content{flex:1 0 auto;padding:20px 0 0}.muk-footer{background:var(--muk-bg-card);flex:none;padding:20px 0}.muk-footer__wrapper{flex-direction:column;align-items:center;gap:10px;display:flex}.muk-container{max-width:1400px;margin:0 auto;padding:0 20px}.muk-heading{font-size:var(--muk-font-heading);font-weight:600;line-height:34px}.muk-subheading{font-size:var(--muk-font-subheading);font-weight:500;line-height:28px}.muk-body-text{font-size:var(--muk-font-body);font-weight:400;line-height:24px}.muk-caption{font-size:var(--muk-caption);font-weight:400;line-height:24px}@media (width<=1024px){.muk-heading{font-size:var(--muk-font-heading-md);line-height:30px}.muk-subheading{font-size:var(--muk-font-subheading-md);line-height:24px}.muk-body-text{font-size:var(--muk-font-body-md);line-height:22px}.muk-caption{font-size:var(--muk-caption-md);line-height:16px}}@media (width<=767px){.muk-heading{font-size:var(--muk-font-heading-sm);line-height:26px}.muk-subheading{font-size:var(--muk-font-subheading-sm);line-height:22px}.muk-body-text{font-size:var(--muk-font-body-sm);line-height:20px}.muk-caption{font-size:var(--muk-caption-sm);line-height:14px}}a{transition:var(--muk-transition);text-underline-offset:4px;display:block}a:hover{opacity:.8}a:active{opacity:.6;filter:brightness(.9)}*,:before,:after{box-sizing:border-box}:focus,:active,a:focus,a:active{outline:none}body,#app{font-family:var(--muk-font-family)}nav,footer,aside{display:block}html,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background:#232222;height:100%;margin:0;padding:0;font-size:100%;line-height:1.5}input,textarea,button,select{font-family:inherit}select{appearance:none}input::-ms-clear{display:none}button{cursor:pointer;background:0 0;border:none}button::-moz-focus-inner{border:0;padding:0}a,a:visited{cursor:pointer;text-decoration:none}button,a:hover{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:400}ul{padding-inline-start:0}ul li{margin:0;list-style:none}img{max-width:100%;display:block}.muk-shimmer{position:relative;overflow:hidden}.muk-shimmer:before{content:"";background:linear-gradient(to right, transparent 0%, var(--muk-text-muted) 50%, transparent 100%);width:150px;height:100%;animation:2.6s infinite loading;position:absolute;top:0;left:-150px}@keyframes loading{0%{left:-150px}to{left:100%}}.fade-enter-active,.fade-leave-active{transition:opacity .25s}.fade-enter-from,.fade-leave-to{opacity:0}.muk-pop-enter-active{animation:.35s cubic-bezier(.175,.885,.32,1.275) muk-heart-bounce}.muk-pop-leave-active{opacity:0;transition:opacity .1s,transform .1s;transform:scale(.5)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.muk-section{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-container-lg);margin:var(--muk-space-container-lg) 0px}@media (width<=1024px){.muk-section{padding:var(--muk-space-container-md);margin:var(--muk-space-container-md) 0px}}@media (width<=768px){.muk-section{padding:var(--muk-space-container-sm);margin:var(--muk-space-container-sm) 0px}}.muk-section__item{background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-content-lg);margin:var(--muk-space-content-lg) 0px}@media (width<=1024px){.muk-section__item{padding:var(--muk-space-content-md);margin:var(--muk-space-content-md) 0px}}@media (width<=768px){.muk-section__item{padding:var(--muk-space-content-sm);margin:var(--muk-space-content-sm) 0px}}.muk-page__wrapper{flex-direction:column;min-height:100dvh;display:flex}.muk-page__header{flex:none}.muk-page__content{flex:1 0 auto}.muk-page__footer{flex:none}.muk-page__info{padding:30px}.muk-svg-icon{flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.muk-svg-icon svg{width:32px;height:32px;fill:var(--muk-text)}@media (width<=767px){.muk-svg-icon{width:32px;height:32px}.muk-svg-icon svg{width:28px;height:28px}}.muk-txt--primary{color:var(--muk-primary)}.muk-txt--danger{color:var(--muk-danger)}.muk-txt--warning{color:var(--muk-warning)}.muk-txt--success{color:var(--muk-success)}.muk-txt--secondary{color:var(--muk-text)}.muk-txt--muted{color:var(--muk-text-muted)}.muk-txt--left{text-align:left}.muk-txt--center{text-align:center}.muk-txt--right{text-align:right}.muk-btn{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;transition:var(--muk-transition);border:none;outline:none;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-weight:500;line-height:1.2;display:inline-flex}.muk-btn--sm{--spinner-size:14px;padding:3px 14px;font-size:14px}.muk-btn--md{--spinner-size:18px;padding:3px 16px;font-size:15px}.muk-btn--lg{--spinner-size:22px;padding:3px 18px;font-size:16px}.muk-btn--primary{border:var(--muk-border-width) var(--muk-border-style) var(--muk-primary);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-primary);border-radius:10px}.muk-btn--primary:hover:not(:disabled):not(.is-loading){background:var(--muk-primary)}.muk-btn--primary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--primary:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--primary.is-loading{cursor:wait}.muk-btn--secondary{border:var(--muk-border-width) var(--muk-border-style) var(--muk-text-muted);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-text-muted);border-radius:10px}.muk-btn--secondary:hover:not(:disabled):not(.is-loading){background:var(--muk-text-muted)}.muk-btn--secondary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--secondary:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--secondary.is-loading{cursor:wait}.muk-btn--success{border:var(--muk-border-width) var(--muk-border-style) var(--muk-success);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-success);border-radius:10px}.muk-btn--success:hover:not(:disabled):not(.is-loading){background:var(--muk-success)}.muk-btn--success:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--success:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--success.is-loading{cursor:wait}.muk-btn--warning{border:var(--muk-border-width) var(--muk-border-style) var(--muk-warning);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-warning);border-radius:10px}.muk-btn--warning:hover:not(:disabled):not(.is-loading){background:var(--muk-warning)}.muk-btn--warning:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--warning:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--warning.is-loading{cursor:wait}.muk-btn--danger{border:var(--muk-border-width) var(--muk-border-style) var(--muk-danger);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-danger);border-radius:10px}.muk-btn--danger:hover:not(:disabled):not(.is-loading){background:var(--muk-danger)}.muk-btn--danger:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--danger:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--danger.is-loading{cursor:wait}.muk-btn--ghost{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);background:var(--muk-bg-card);color:var(--muk-text-muted);--spinner-color:var(--muk-bg);border-radius:10px}.muk-btn--ghost:hover:not(:disabled):not(.is-loading){filter:brightness(1.1)}.muk-btn--ghost:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--ghost:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--ghost.is-loading{cursor:wait}.muk-btn-spinner{width:var(--spinner-size,18px);height:var(--spinner-size,18px);border:2px solid var(--spinner-color,currentColor);border-right-color:#0000;border-radius:50%;flex-shrink:0;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.muk-btn-icon{cursor:pointer;transition:var(--muk-transition);background:0 0;border:none;justify-content:start;align-items:center;margin:0;padding:0;display:inline-flex}.muk-btn-icon__content{justify-content:flex-start;align-items:center;gap:6px;display:inline-flex}.muk-btn-icon svg{transition:var(--muk-transition);pointer-events:none;width:1em;height:1em;display:block}.muk-btn-icon.has-text{width:auto}.muk-btn-icon--sm{min-width:32px;height:32px;min-height:32px}.muk-btn-icon--sm svg{width:18px;height:18px}.muk-btn-icon--sm span,.muk-btn-icon--sm p{font-size:13px}.muk-btn-icon--sm{--spinner-size:14px}.muk-btn-icon--md{min-width:40px;height:40px;min-height:40px}.muk-btn-icon--md svg{width:22px;height:22px}.muk-btn-icon--md span,.muk-btn-icon--md p{font-size:15px}.muk-btn-icon--md{--spinner-size:18px}.muk-btn-icon--lg{min-width:48px;height:48px;min-height:48px}.muk-btn-icon--lg svg{width:26px;height:26px}.muk-btn-icon--lg span,.muk-btn-icon--lg p{font-size:17px}.muk-btn-icon--lg{--spinner-size:22px}.muk-btn-icon--primary{color:var(--muk-primary);background:0 0}.muk-btn-icon--primary svg{fill:currentColor}.muk-btn-icon--primary:hover:not(:disabled):not(.is-loading){color:var(--muk-primary-hover)}.muk-btn-icon--primary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--primary:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--primary.is-loading{cursor:wait}.muk-btn-icon--secondary{color:var(--muk-text);background:0 0}.muk-btn-icon--secondary svg{fill:currentColor}.muk-btn-icon--secondary:hover:not(:disabled):not(.is-loading){color:var(--muk-primary-hover)}.muk-btn-icon--secondary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--secondary:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--secondary.is-loading{cursor:wait}.muk-btn-icon--success{color:var(--muk-success);background:0 0}.muk-btn-icon--success svg{fill:currentColor}.muk-btn-icon--success:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.muk-btn-icon--success:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--success:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--success.is-loading{cursor:wait}.muk-btn-icon--warning{color:var(--muk-warning);background:0 0}.muk-btn-icon--warning svg{fill:currentColor}.muk-btn-icon--warning:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.muk-btn-icon--warning:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--warning:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--warning.is-loading{cursor:wait}.muk-btn-icon--danger{color:var(--muk-danger);background:0 0}.muk-btn-icon--danger svg{fill:currentColor}.muk-btn-icon--danger:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.muk-btn-icon--danger:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--danger:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--danger.is-loading{cursor:wait}.muk-btn-icon--ghost{color:var(--muk-text-muted);background:0 0}.muk-btn-icon--ghost svg{fill:currentColor}.muk-btn-icon--ghost:hover:not(:disabled):not(.is-loading){color:var(--muk-text)}.muk-btn-icon--ghost:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--ghost:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--ghost.is-loading{cursor:wait}.muk-input{flex-direction:column;display:flex}.muk-input__wrapper{flex-direction:row;align-items:center;display:flex;position:relative}.muk-input__field{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-input__field:focus,.muk-input__field:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-input__field:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-input__field.is-error{border-color:var(--muk-danger)}.muk-input__field.is-error:focus,.muk-input__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-input__field{width:100%}.muk-input__button{position:absolute;top:0;right:20px}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(98%)sepia(1%)saturate(678%)hue-rotate(181deg)brightness(98%)contrast(94%)}.muk-form-error{color:var(--muk-danger);font-size:13px}.muk-form-hint{color:var(--muk-text-muted);font-size:13px}.muk-form-label{color:var(--muk-text);font-size:13px}.muk-form-label--top{margin:20px 0 10px}.muk-form-label--side{margin:10px}.muk-form__item{background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-content-lg);margin:var(--muk-space-content-lg) 0px}@media (width<=1024px){.muk-form__item{padding:var(--muk-space-content-md);margin:var(--muk-space-content-md) 0px}}@media (width<=768px){.muk-form__item{padding:var(--muk-space-content-sm);margin:var(--muk-space-content-sm) 0px}}.muk-form__actions{background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-content-lg);margin:var(--muk-space-content-lg) 0px}@media (width<=1024px){.muk-form__actions{padding:var(--muk-space-content-md);margin:var(--muk-space-content-md) 0px}}@media (width<=768px){.muk-form__actions{padding:var(--muk-space-content-sm);margin:var(--muk-space-content-sm) 0px}}.muk-form__actions{flex-direction:row;justify-content:start;align-items:center;gap:10px;display:flex}.muk-checkbox{position:relative}.muk-checkbox__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.muk-checkbox__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex}.muk-checkbox__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.muk-checkbox__field:focus-visible+.muk-checkbox__box{border-color:var(--muk-primary-hover)}.muk-checkbox__field:checked+.muk-checkbox__box{border-color:var(--muk-primary)}.muk-checkbox__field:checked+.muk-checkbox__box .muk-checkbox__check{transform:scale(1)}.muk-checkbox__field:disabled+.muk-checkbox__box{opacity:var(--muk-opacity);cursor:not-allowed}.muk-checkbox__box{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-checkbox__box:focus,.muk-checkbox__box:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-checkbox__box:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-checkbox__box.is-error{border-color:var(--muk-danger)}.muk-checkbox__box.is-error:focus,.muk-checkbox__box.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-checkbox__box{border-radius:0;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:4px;display:flex}.muk-checkbox__check{color:var(--muk-text);transition:var(--muk-transition);border-radius:50%;transform:scale(0)}.muk-radio{position:relative}.muk-radio__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.muk-radio__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex;position:relative}.muk-radio__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.muk-radio__field:checked+.muk-radio__box{border-color:var(--muk-primary)}.muk-radio__field:checked+.muk-radio__box .muk-radio__circle{background:var(--muk-text);transform:scale(1)}.muk-radio__field:disabled+.muk-radio__box{opacity:var(--muk-opacity);cursor:not-allowed}.muk-radio__box{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-radio__box:focus,.muk-radio__box:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-radio__box:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-radio__box.is-error{border-color:var(--muk-danger)}.muk-radio__box.is-error:focus,.muk-radio__box.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-radio__box{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:5px;display:flex}.muk-radio__circle{transition:var(--muk-transition);background:0 0;border-radius:50%;flex-shrink:0;width:10px;height:10px;display:block;transform:scale(0)}.muk-select{flex-direction:column;display:flex}.muk-select__wrapper{position:relative}.muk-select__field{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-select__field:focus,.muk-select__field:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-select__field:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-select__field.is-error{border-color:var(--muk-danger)}.muk-select__field.is-error:focus,.muk-select__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-select__field{cursor:pointer;width:100%}.muk-select__icon{pointer-events:none;color:var(--muk-text-muted);font-size:14px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.muk-textarea{flex-direction:column;display:flex}.muk-textarea__field{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-textarea__field:focus,.muk-textarea__field:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-textarea__field:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-textarea__field.is-error{border-color:var(--muk-danger)}.muk-textarea__field.is-error:focus,.muk-textarea__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-textarea__field{resize:vertical;min-height:120px}.muk-textarea__field::placeholder{color:var(--muk-text-muted)}
|
|
1
|
+
@import "https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap";:root{--muk-text:#edf2f7;--muk-text-muted:#8292a6;--muk-bg:#0a0e17;--muk-bg-soft:#101624;--muk-bg-card:#172033;--muk-bg-code:#202b45;--muk-primary:#2563eb;--muk-primary-hover:#1d4ed8;--muk-danger:#f43f5e;--muk-success:#10b981;--muk-warning:#f59e0b;--muk-font-family:"Montserrat", sans-serif;--muk-font-heading:26px;--muk-font-subheading:19px;--muk-font-body:16px;--muk-caption:14px;--muk-font-heading-md:24px;--muk-font-subheading-md:18px;--muk-font-body-md:15px;--muk-caption-md:13px;--muk-font-heading-sm:20px;--muk-font-subheading-sm:16px;--muk-font-body-sm:14px;--muk-caption-sm:13px;--muk-border-color:#eceef214;--muk-border-width:1px;--muk-border-style:solid;--muk-border-radius:7px;--muk-space-content-sm:6px;--muk-space-content-md:10px;--muk-space-content-lg:14px;--muk-space-container-sm:16px;--muk-space-container-md:24px;--muk-space-container-lg:26px;--muk-transition:all .3s ease-out;--muk-opacity:.4}.muk-wrapper{background:var(--muk-bg);flex-direction:column;min-height:100vh;display:flex}.muk-header{flex:none}.muk-content{flex:1 0 auto;padding:20px 0 0}.muk-footer{background:var(--muk-bg-card);flex:none;padding:20px 0}.muk-footer__wrapper{flex-direction:column;align-items:center;gap:10px;display:flex}.muk-container{max-width:1400px;margin:0 auto;padding:0 20px}.muk-heading{font-size:var(--muk-font-heading);font-family:Source Code Pro,monospace;font-weight:600;line-height:34px}.muk-subheading{font-size:var(--muk-font-subheading);font-weight:500;line-height:28px}.muk-body-text{font-size:var(--muk-font-body);font-weight:400;line-height:24px}.muk-caption{font-size:var(--muk-caption);font-weight:400;line-height:24px}@media (width<=1024px){.muk-heading{font-size:var(--muk-font-heading-md);line-height:30px}.muk-subheading{font-size:var(--muk-font-subheading-md);line-height:24px}.muk-body-text{font-size:var(--muk-font-body-md);line-height:22px}.muk-caption{font-size:var(--muk-caption-md);line-height:16px}}@media (width<=767px){.muk-heading{font-size:var(--muk-font-heading-sm);line-height:26px}.muk-subheading{font-size:var(--muk-font-subheading-sm);line-height:22px}.muk-body-text{font-size:var(--muk-font-body-sm);line-height:20px}.muk-caption{font-size:var(--muk-caption-sm);line-height:14px}}a{transition:var(--muk-transition);text-underline-offset:4px;display:block}a:hover{opacity:.8}a:active{opacity:.6;filter:brightness(.9)}*,:before,:after{box-sizing:border-box}:focus,:active,a:focus,a:active{outline:none}body,#app{font-family:var(--muk-font-family)}nav,footer,aside{display:block}html,body{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;background:#232222;height:100%;margin:0;padding:0;font-size:100%;line-height:1.5}input,textarea,button,select{font-family:inherit}select{appearance:none}input::-ms-clear{display:none}button{cursor:pointer;background:0 0;border:none}button::-moz-focus-inner{border:0;padding:0}a,a:visited{cursor:pointer;text-decoration:none}button,a:hover{text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:400}ul{padding-inline-start:0}ul li{margin:0;list-style:none}img{max-width:100%;display:block}.muk-shimmer{position:relative;overflow:hidden}.muk-shimmer:before{content:"";background:linear-gradient(to right, transparent 0%, var(--muk-text-muted) 50%, transparent 100%);width:150px;height:100%;animation:2.6s infinite loading;position:absolute;top:0;left:-150px}@keyframes loading{0%{left:-150px}to{left:100%}}.fade-enter-active,.fade-leave-active,.fade-exit-active{transition:opacity .25s}.fade-enter-from,.fade-leave-to,.fade-exit-to{opacity:0}.muk-pop-enter-active{animation:.35s cubic-bezier(.175,.885,.32,1.275) muk-heart-bounce}.muk-pop-leave-active{opacity:0;transition:opacity .1s,transform .1s;transform:scale(.5)}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.muk-section{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-container-lg);margin:var(--muk-space-container-lg) 0px}@media (width<=1024px){.muk-section{padding:var(--muk-space-container-md);margin:var(--muk-space-container-md) 0px}}@media (width<=768px){.muk-section{padding:var(--muk-space-container-sm);margin:var(--muk-space-container-sm) 0px}}.muk-section__item{background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-content-lg);margin:var(--muk-space-content-lg) 0px}@media (width<=1024px){.muk-section__item{padding:var(--muk-space-content-md);margin:var(--muk-space-content-md) 0px}}@media (width<=768px){.muk-section__item{padding:var(--muk-space-content-sm);margin:var(--muk-space-content-sm) 0px}}.muk-page__wrapper{flex-direction:column;min-height:100dvh;display:flex}.muk-page__header{flex:none}.muk-page__content{flex:1 0 auto}.muk-page__footer{flex:none}.muk-page__info{padding:30px}.muk-svg-icon{flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.muk-svg-icon svg{width:32px;height:32px;fill:var(--muk-text)}@media (width<=767px){.muk-svg-icon{width:32px;height:32px}.muk-svg-icon svg{width:28px;height:28px}}.muk-txt--primary{color:var(--muk-primary)}.muk-txt--danger{color:var(--muk-danger)}.muk-txt--warning{color:var(--muk-warning)}.muk-txt--success{color:var(--muk-success)}.muk-txt--secondary{color:var(--muk-text)}.muk-txt--muted{color:var(--muk-text-muted)}.muk-txt--left{text-align:left}.muk-txt--center{text-align:center}.muk-txt--right{text-align:right}.muk-btn{-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;transition:var(--muk-transition);border:none;outline:none;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-weight:500;line-height:1.2;display:inline-flex}.muk-btn--sm{--spinner-size:14px;padding:3px 14px;font-size:14px}.muk-btn--md{--spinner-size:18px;padding:3px 16px;font-size:15px}.muk-btn--lg{--spinner-size:22px;padding:3px 18px;font-size:16px}.muk-btn--primary{border:var(--muk-border-width) var(--muk-border-style) var(--muk-primary);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-primary);border-radius:10px}.muk-btn--primary:hover:not(:disabled):not(.is-loading){background:var(--muk-primary)}.muk-btn--primary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--primary:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--primary.is-loading{cursor:wait}.muk-btn--secondary{border:var(--muk-border-width) var(--muk-border-style) var(--muk-text-muted);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-text-muted);border-radius:10px}.muk-btn--secondary:hover:not(:disabled):not(.is-loading){background:var(--muk-text-muted)}.muk-btn--secondary:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--secondary:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--secondary.is-loading{cursor:wait}.muk-btn--success{border:var(--muk-border-width) var(--muk-border-style) var(--muk-success);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-success);border-radius:10px}.muk-btn--success:hover:not(:disabled):not(.is-loading){background:var(--muk-success)}.muk-btn--success:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--success:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--success.is-loading{cursor:wait}.muk-btn--warning{border:var(--muk-border-width) var(--muk-border-style) var(--muk-warning);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-warning);border-radius:10px}.muk-btn--warning:hover:not(:disabled):not(.is-loading){background:var(--muk-warning)}.muk-btn--warning:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--warning:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--warning.is-loading{cursor:wait}.muk-btn--danger{border:var(--muk-border-width) var(--muk-border-style) var(--muk-danger);background:var(--muk-bg-card);color:var(--muk-text);--spinner-color:var(--muk-danger);border-radius:10px}.muk-btn--danger:hover:not(:disabled):not(.is-loading){background:var(--muk-danger)}.muk-btn--danger:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--danger:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--danger.is-loading{cursor:wait}.muk-btn--ghost{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);background:var(--muk-bg-card);color:var(--muk-text-muted);--spinner-color:var(--muk-bg);border-radius:10px}.muk-btn--ghost:hover:not(:disabled):not(.is-loading){filter:brightness(1.1)}.muk-btn--ghost:active:not(:disabled):not(.is-loading){filter:brightness(.9);transform:scale(.97)}.muk-btn--ghost:disabled{cursor:not-allowed;opacity:var(--muk-opacity);transform:none}.muk-btn--ghost.is-loading{cursor:wait}.muk-btn-spinner{width:var(--spinner-size,18px);height:var(--spinner-size,18px);border:2px solid var(--spinner-color,currentColor);border-right-color:#0000;border-radius:50%;flex-shrink:0;animation:.8s linear infinite spin;display:inline-block}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.muk-btn-icon{cursor:pointer;transition:var(--muk-transition);background:0 0;border:none;justify-content:start;align-items:center;margin:0;padding:0;display:inline-flex}.muk-btn-icon__content{justify-content:flex-start;align-items:center;gap:6px;display:inline-flex}.muk-btn-icon svg{transition:var(--muk-transition);pointer-events:none;width:1em;height:1em;display:block}.muk-btn-icon.has-text{width:auto}.muk-btn-icon--sm{min-width:32px;height:32px;min-height:32px}.muk-btn-icon--sm svg{width:18px;height:18px}.muk-btn-icon--sm span,.muk-btn-icon--sm p{font-size:13px}.muk-btn-icon--sm{--spinner-size:14px}.muk-btn-icon--md{min-width:40px;height:40px;min-height:40px}.muk-btn-icon--md svg{width:22px;height:22px}.muk-btn-icon--md span,.muk-btn-icon--md p{font-size:15px}.muk-btn-icon--md{--spinner-size:18px}.muk-btn-icon--lg{min-width:48px;height:48px;min-height:48px}.muk-btn-icon--lg svg{width:26px;height:26px}.muk-btn-icon--lg span,.muk-btn-icon--lg p{font-size:17px}.muk-btn-icon--lg{--spinner-size:22px}.muk-btn-icon--primary{color:var(--muk-primary);background:0 0}.muk-btn-icon--primary svg{fill:currentColor}.muk-btn-icon--primary:hover:not(:disabled):not(.is-loading){color:var(--muk-primary-hover)}.muk-btn-icon--primary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--primary:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--primary.is-loading{cursor:wait}.muk-btn-icon--secondary{color:var(--muk-text);background:0 0}.muk-btn-icon--secondary svg{fill:currentColor}.muk-btn-icon--secondary:hover:not(:disabled):not(.is-loading){color:var(--muk-primary-hover)}.muk-btn-icon--secondary:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--secondary:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--secondary.is-loading{cursor:wait}.muk-btn-icon--success{color:var(--muk-success);background:0 0}.muk-btn-icon--success svg{fill:currentColor}.muk-btn-icon--success:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.muk-btn-icon--success:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--success:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--success.is-loading{cursor:wait}.muk-btn-icon--warning{color:var(--muk-warning);background:0 0}.muk-btn-icon--warning svg{fill:currentColor}.muk-btn-icon--warning:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.muk-btn-icon--warning:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--warning:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--warning.is-loading{cursor:wait}.muk-btn-icon--danger{color:var(--muk-danger);background:0 0}.muk-btn-icon--danger svg{fill:currentColor}.muk-btn-icon--danger:hover:not(:disabled):not(.is-loading){filter:brightness(1.2)}.muk-btn-icon--danger:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--danger:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--danger.is-loading{cursor:wait}.muk-btn-icon--ghost{color:var(--muk-text-muted);background:0 0}.muk-btn-icon--ghost svg{fill:currentColor}.muk-btn-icon--ghost:hover:not(:disabled):not(.is-loading){color:var(--muk-text)}.muk-btn-icon--ghost:active:not(:disabled):not(.is-loading){transform:scale(.92)}.muk-btn-icon--ghost:disabled{opacity:var(--muk-opacity);cursor:not-allowed;transform:none}.muk-btn-icon--ghost.is-loading{cursor:wait}.muk-input{flex-direction:column;display:flex}.muk-input__wrapper{flex-direction:row;align-items:center;display:flex;position:relative}.muk-input__field{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-input__field:focus,.muk-input__field:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-input__field:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-input__field.is-error{border-color:var(--muk-danger)}.muk-input__field.is-error:focus,.muk-input__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-input__field{width:100%}.muk-input__button{position:absolute;top:0;right:20px}input[type=date]::-webkit-calendar-picker-indicator{filter:invert(98%)sepia(1%)saturate(678%)hue-rotate(181deg)brightness(98%)contrast(94%)}.muk-form-error{color:var(--muk-danger);font-size:13px}.muk-form-hint{color:var(--muk-text-muted);font-size:13px}.muk-form-label{color:var(--muk-text);font-size:13px}.muk-form-label--top{margin:20px 0 10px}.muk-form-label--side{margin:10px}.muk-form__item{background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-content-lg);margin:var(--muk-space-content-lg) 0px}@media (width<=1024px){.muk-form__item{padding:var(--muk-space-content-md);margin:var(--muk-space-content-md) 0px}}@media (width<=768px){.muk-form__item{padding:var(--muk-space-content-sm);margin:var(--muk-space-content-sm) 0px}}.muk-form__actions{background:var(--muk-bg-card);width:100%;transition:var(--muk-transition);padding:var(--muk-space-content-lg);margin:var(--muk-space-content-lg) 0px}@media (width<=1024px){.muk-form__actions{padding:var(--muk-space-content-md);margin:var(--muk-space-content-md) 0px}}@media (width<=768px){.muk-form__actions{padding:var(--muk-space-content-sm);margin:var(--muk-space-content-sm) 0px}}.muk-form__actions{flex-direction:row;justify-content:start;align-items:center;gap:10px;display:flex}.muk-checkbox{position:relative}.muk-checkbox__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.muk-checkbox__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex}.muk-checkbox__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.muk-checkbox__field:focus-visible+.muk-checkbox__box{border-color:var(--muk-primary-hover)}.muk-checkbox__field:checked+.muk-checkbox__box{border-color:var(--muk-primary)}.muk-checkbox__field:checked+.muk-checkbox__box .muk-checkbox__check{transform:scale(1)}.muk-checkbox__field:disabled+.muk-checkbox__box{opacity:var(--muk-opacity);cursor:not-allowed}.muk-checkbox__box{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-checkbox__box:focus,.muk-checkbox__box:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-checkbox__box:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-checkbox__box.is-error{border-color:var(--muk-danger)}.muk-checkbox__box.is-error:focus,.muk-checkbox__box.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-checkbox__box{border-radius:0;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:4px;display:flex}.muk-checkbox__check{color:var(--muk-text);transition:var(--muk-transition);border-radius:50%;transform:scale(0)}.muk-radio{position:relative}.muk-radio__wrapper{cursor:pointer;flex-direction:column;width:100%;display:flex}.muk-radio__data{-webkit-user-select:none;user-select:none;align-items:center;margin-bottom:6px;display:inline-flex;position:relative}.muk-radio__field{opacity:0;appearance:none;width:0;height:0;position:absolute}.muk-radio__field:checked+.muk-radio__box{border-color:var(--muk-primary)}.muk-radio__field:checked+.muk-radio__box .muk-radio__circle{background:var(--muk-text);transform:scale(1)}.muk-radio__field:disabled+.muk-radio__box{opacity:var(--muk-opacity);cursor:not-allowed}.muk-radio__box{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-radio__box:focus,.muk-radio__box:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-radio__box:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-radio__box.is-error{border-color:var(--muk-danger)}.muk-radio__box.is-error:focus,.muk-radio__box.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-radio__box{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;margin-bottom:5px;display:flex}.muk-radio__circle{transition:var(--muk-transition);background:0 0;border-radius:50%;flex-shrink:0;width:10px;height:10px;display:block;transform:scale(0)}.muk-select{flex-direction:column;display:flex}.muk-select__wrapper{position:relative}.muk-select__field{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-select__field:focus,.muk-select__field:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-select__field:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-select__field.is-error{border-color:var(--muk-danger)}.muk-select__field.is-error:focus,.muk-select__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-select__field{cursor:pointer;width:100%}.muk-select__icon{pointer-events:none;color:var(--muk-text-muted);font-size:14px;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.muk-textarea{flex-direction:column;display:flex}.muk-textarea__field{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);background:var(--muk-bg-soft);padding:var(--muk-space-content-md);transition:var(--muk-transition);color:var(--muk-text);margin-top:5px}.muk-textarea__field:focus,.muk-textarea__field:focus-visible{border-color:var(--muk-primary-hover);box-shadow:0 0 0 4px rgba(var(--muk-primary), .15);outline:none}.muk-textarea__field:disabled{opacity:var(--muk-opacity);cursor:not-allowed}.muk-textarea__field.is-error{border-color:var(--muk-danger)}.muk-textarea__field.is-error:focus,.muk-textarea__field.is-error:focus-visible{box-shadow:0 0 0 4px rgba(var(--muk-danger), .15);border-color:var(--muk-danger)!important}.muk-textarea__field{resize:vertical;min-height:120px}.muk-textarea__field::placeholder{color:var(--muk-text-muted)}
|
|
2
2
|
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "modular-ui-kit-react",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A modular, accessible TypeScript-driven UI library for React.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -60,6 +60,7 @@
|
|
|
60
60
|
"@types/node": "^24.19.2",
|
|
61
61
|
"@types/react": "^19.3.0",
|
|
62
62
|
"@types/react-dom": "^19.3.0",
|
|
63
|
+
"@types/react-transition-group": "^4.4.12",
|
|
63
64
|
"@vitejs/plugin-react": "^6.1.2",
|
|
64
65
|
"eslint": "^10.13.0",
|
|
65
66
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
@@ -74,5 +75,8 @@
|
|
|
74
75
|
"vite": "^8.3.4",
|
|
75
76
|
"vite-plugin-dts": "^4.5.4",
|
|
76
77
|
"vite-plugin-lib-inject-css": "^2.2.2"
|
|
78
|
+
},
|
|
79
|
+
"dependencies": {
|
|
80
|
+
"react-transition-group": "^4.4.5"
|
|
77
81
|
}
|
|
78
82
|
}
|