modular-ui-kit-react 1.0.1 → 1.1.0
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 +25 -4
- package/dist/index.cjs +1 -1
- package/dist/index.js +31 -3
- package/dist/modular-ui-kit-react.css +1 -1
- package/dist/src/lib/components/feedback/MukEmptyState.d.ts +11 -0
- package/dist/src/lib/index.d.ts +3 -1
- package/dist/src/lib/types/ui.types.d.ts +1 -0
- package/dist/src/lib/utils/formatSize.d.ts +1 -0
- 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
|
|
|
@@ -103,7 +106,7 @@ _________
|
|
|
103
106
|
An accessible and customizable checkbox component with a custom visual box, flexible label positioning, and support for error and hint validation states. It handles boolean states (checked/unchecked) seamlessly while maintaining native HTML input accessibility (aria-invalid, aria-describedby).
|
|
104
107
|
|
|
105
108
|
|
|
106
|
-
|
|
109
|
+
#### MukCheckbox Props
|
|
107
110
|
|
|
108
111
|
| Prop | Type | Default | Description |
|
|
109
112
|
| :--- | :--- | :--- | :--- |
|
|
@@ -121,7 +124,7 @@ _________
|
|
|
121
124
|
An accessible and customizable radio button component designed to work seamlessly within group selections. It supports custom selection states, side labels, and built-in error/hint validation messages, while fully respecting native HTML radio accessibility standards (aria-invalid, aria-describedby).
|
|
122
125
|
|
|
123
126
|
|
|
124
|
-
|
|
127
|
+
#### MukRadio Props
|
|
125
128
|
|
|
126
129
|
| Prop | Type | Default | Description |
|
|
127
130
|
| :--- | :--- | :--- | :--- |
|
|
@@ -141,7 +144,7 @@ _________
|
|
|
141
144
|
|
|
142
145
|
An accessible dropdown select component built over the native HTML `<select>` element. It accepts a list of options, supports custom placeholders, labels, built-in validation states (errors and hints), and maintains full accessibility standards (aria-invalid, aria-describedby).
|
|
143
146
|
|
|
144
|
-
|
|
147
|
+
#### MukSelect Props
|
|
145
148
|
|
|
146
149
|
| Prop | Type | Default | Description |
|
|
147
150
|
| :--- | :--- | :--- | :--- |
|
|
@@ -161,7 +164,7 @@ _________
|
|
|
161
164
|
|
|
162
165
|
A flexible and accessible multi-line text input component built over the native HTML `<textarea>`. It supports custom rows, auto-generated unique IDs, top labels, and built-in error/hint validation states while maintaining strict accessibility standards (`aria-invalid`, `aria-describedby`).
|
|
163
166
|
|
|
164
|
-
|
|
167
|
+
#### MukTextarea Props
|
|
165
168
|
|
|
166
169
|
| Prop | Type | Default | Description |
|
|
167
170
|
| :--- | :--- | :--- | :--- |
|
|
@@ -174,3 +177,21 @@ A flexible and accessible multi-line text input component built over the native
|
|
|
174
177
|
| `error` | `string` | — | Error message string. Applies `is-error` style and takes precedence over hint. |
|
|
175
178
|
| `id` | `string` | `useId()` | Unique identifier for the textarea, automatically generated if not provided. |
|
|
176
179
|
| `disabled` | `boolean` | `false` | Disables user interaction and applies disabled visual styles. |
|
|
180
|
+
|
|
181
|
+
_________
|
|
182
|
+
|
|
183
|
+
### ⭐️ MukEmptyState ⭐️
|
|
184
|
+
|
|
185
|
+
A dedicated feedback component designed to display empty data states, missing content, or search results that yielded no matches. It supports customizable titles, descriptions, sizing constraints, visual variants, and a custom action slot for user recovery actions (such as buttons or links).
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
#### MukEmptyState Props
|
|
189
|
+
|
|
190
|
+
| Prop | Type | Default | Description |
|
|
191
|
+
| :--- | :--- | :--- | :--- |
|
|
192
|
+
| `title` | `string` | `"No data available"` | The main heading of the empty state (rendered as an `h3` subheading). |
|
|
193
|
+
| `description` | `string` | `"There is nothing to display here at the moment. Please try refreshing the page"` | Explanatory text guiding the user on what happened or what to do next. |
|
|
194
|
+
| `variant` | `UIEmptyStateVariant` | `'secondary'` | Visual style preset (`secondary`, `primary`). |
|
|
195
|
+
| `width` | `string \| number` | — | Component width (handled by `formatSize`, supports numbers for `px` or string values like `"100%"`). |
|
|
196
|
+
| `height` | `string \| number` | — | Component height (also handled via `formatSize`). |
|
|
197
|
+
| `action` | `ReactNode` | — | Slot for interactive actions (e.g., a "Create Project" or "Refresh" button). |
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react/jsx-runtime"),l=require("react");l=s(l,1);var u=({variant:e=`secondary`,align:t=`left`,as:n=`p`,type:r=`muk-body-text`,children:i,className:a=``,...o})=>{let s=[r,`muk-txt--${t}`,`muk-txt--${e}`,a].filter(Boolean).join(` `);return(0,c.jsx)(n,{className:s,...o,children:i})},d=({variant:e=`primary`,type:t=`button`,size:n=`lg`,loading:r=!1,disabled:i=!1,className:a=``,children:o,...s})=>{let l=[`muk-btn`,`muk-btn--${e}`,`muk-btn--${n}`,r?`isLoading`:``,a].filter(Boolean).join(` `);return(0,c.jsx)(`button`,{type:t,className:l,disabled:i||r,"aria-busy":r,...s,children:r?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{className:`muk-btn-spinner`,"aria-hidden":`true`}),(0,c.jsx)(`span`,{className:`visually-hidden`,children:`Loading`})]}):(0,c.jsx)(`span`,{className:`muk-btn__content`,children:o})})},f=({variant:e=`primary`,type:t=`button`,size:n=`lg`,loading:r=!1,disabled:i=!1,className:a=``,ariaLabel:o,text:s,children:l,...u})=>{let d=[`muk-btn-icon`,`muk-btn-icon--${e}`,`muk-btn-icon--${n}`,r?`isLoading`:``,s?`has-text`:``,a].filter(Boolean).join(` `);return(0,c.jsx)(`button`,{type:t,className:d,disabled:i||r,"aria-busy":r,"aria-label":o?String(o):void 0,...u,children:r?(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(`span`,{className:`muk-btn-spinner`,"aria-hidden":`true`}),(0,c.jsx)(`span`,{className:`visually-hidden`,children:`Loading`})]}):(0,c.jsxs)(`span`,{className:`muk-btn-icon__content`,children:[l,s]})})},p=({type:e=`text`,value:t=``,onChange:n,label:r,error:i,hint:a,showPasswordToggle:o=!0,disabled:s=!1,placeholder:u,id:d,className:p=``,...m})=>{let h=(0,l.useId)(),g=d||h,[_,v]=(0,l.useState)(!1),y=e===`password`&&o,b=y?_?`text`:`password`:e,x=[`muk-input`,y?`muk-input-password`:``,p].filter(Boolean).join(` `),S=[`muk-input__field`,i?`is-error`:``].filter(Boolean).join(` `),C=()=>{v(e=>!e)};return(0,c.jsxs)(`div`,{className:x,children:[r&&(0,c.jsx)(`label`,{htmlFor:g,className:`muk-form-label muk-form-label--top`,children:r}),(0,c.jsxs)(`div`,{className:`muk-input__wrapper`,children:[(0,c.jsx)(`input`,{id:g,type:b,value:t,disabled:s,placeholder:u,className:S,onChange:e=>n?.(e.target.value),"aria-invalid":!!i,"aria-describedby":i?`${g}-error`:a?`${g}-hint`:void 0,...m}),y&&(0,c.jsx)(f,{className:`muk-input__button`,onClick:C,ariaLabel:_?`Hide password`:`Show password`,children:_?(0,c.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 -960 960 960`,children:(0,c.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,c.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 -960 960 960`,children:(0,c.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`})})})]}),i?(0,c.jsx)(`p`,{className:`muk-form-error`,id:`${g}-error`,children:i}):a?(0,c.jsx)(`p`,{className:`muk-form-hint`,id:`${g}-hint`,children:a}):null]})},m=({value:e=!1,onChange:t,label:n,error:r,hint:i,disabled:a=!1,id:o,className:s=``,...u})=>{let d=(0,l.useId)(),f=o||d,p=[`muk-checkbox`,r?`is-error`:``,a?`is-disabled`:``,s].filter(Boolean).join(` `);return(0,c.jsxs)(`div`,{className:p,children:[(0,c.jsx)(`label`,{htmlFor:f,className:`muk-checkbox__wrapper`,children:(0,c.jsxs)(`div`,{className:`muk-checkbox__data`,children:[(0,c.jsx)(`input`,{type:`checkbox`,className:`muk-checkbox__field`,id:f,checked:e,disabled:a,onChange:e=>t?.(e.target.checked),"aria-invalid":!!r,"aria-describedby":r?`${f}-error`:i?`${f}-hint`:void 0,...u}),(0,c.jsx)(`span`,{className:`muk-checkbox__box`,children:(0,c.jsx)(`span`,{className:`muk-checkbox__check`,children:`✓`})}),n&&(0,c.jsxs)(`span`,{className:`muk-form-label muk-form-label--side`,children:[` `,n]})]})}),(0,c.jsx)(`div`,{className:`muk-checkbox__info`,children:r?(0,c.jsx)(`p`,{className:`muk-form-error`,id:`${f}-error`,children:r}):i?(0,c.jsx)(`p`,{className:`muk-form-hint`,id:`${f}-hint`,children:i}):null})]})},h=({onChange:e,value:t,selectedValue:n,label:r,error:i,hint:a,name:o,disabled:s=!1,id:u,className:d=``,...f})=>{let p=(0,l.useId)(),m=u||p,h=n===void 0?f.checked:n===t,g=[`muk-radio`,i?`is-error`:``,s?`is-disabled`:``,d].filter(Boolean).join(` `);return(0,c.jsxs)(`div`,{className:g,children:[(0,c.jsx)(`label`,{htmlFor:m,className:`muk-radio__wrapper`,children:(0,c.jsxs)(`div`,{className:`muk-radio__data`,children:[(0,c.jsx)(`input`,{type:`radio`,className:`muk-radio__field`,name:o,id:m,checked:h,disabled:s,onChange:()=>e?.(t),"aria-invalid":!!i,"aria-describedby":i?`${m}-error`:a?`${m}-hint`:void 0,...f}),(0,c.jsx)(`span`,{className:`muk-radio__box`,children:(0,c.jsx)(`span`,{className:`muk-radio__circle`,"aria-hidden":`true`})}),r&&(0,c.jsx)(`span`,{className:`muk-form-label muk-form-label--side`,children:r})]})}),(0,c.jsx)(`div`,{className:`muk-radio__info`,children:i?(0,c.jsx)(`p`,{className:`muk-form-error`,id:`${m}-error`,children:i}):a?(0,c.jsx)(`p`,{className:`muk-form-hint`,id:`${m}-hint`,children:a}):null})]})},g=({onChange:e,value:t,options:n=[],label:r,error:i,hint:a,name:o,placeholder:s,disabled:u=!1,id:d,className:f=``,...p})=>{let m=(0,l.useId)(),h=d||m,g=[`muk-select`,i?`is-error`:``,u?`is-disabled`:``,f].filter(Boolean).join(` `);return(0,c.jsxs)(`div`,{className:g,children:[r&&(0,c.jsx)(`label`,{htmlFor:h,className:`muk-form-label muk-form-label--top`,children:r}),(0,c.jsxs)(`div`,{className:`muk-select__wrapper`,children:[(0,c.jsxs)(`select`,{className:`muk-select__field`,name:o,id:h,disabled:u,value:t??``,onChange:t=>e?.(t.target.value),"aria-invalid":!!i,"aria-describedby":i?`${h}-error`:a?`${h}-hint`:void 0,...p,children:[n.map(e=>(0,c.jsx)(`option`,{value:e.value,children:e.label},e.value)),s&&(0,c.jsx)(`option`,{disabled:!0,children:s})]}),(0,c.jsx)(`span`,{className:`muk-select__icon`,children:`↓`})]})]})},_=({value:e=``,onChange:t,label:n,error:r,hint:i,rows:a=6,disabled:o=!1,placeholder:s,id:u,className:d=``,...f})=>{let p=(0,l.useId)(),m=u||p,h=[`muk-textarea`,r?`is-error`:``,o?`is-disabled`:``,d].filter(Boolean).join(` `);return(0,c.jsxs)(`div`,{className:h,children:[n&&(0,c.jsx)(`label`,{htmlFor:m,className:`muk-form-label muk-form-label--top`,children:n}),(0,c.jsx)(`textarea`,{className:`muk-textarea__field`,id:m,value:e,onChange:e=>t?.(e.target.value),placeholder:s,rows:a,disabled:o,"aria-invalid":!!r,"aria-describedby":r?`${m}-error`:i?`${m}-hint`:void 0,...f}),r?(0,c.jsx)(`p`,{className:`muk-form-error`,id:`${m}-error`,children:r}):i?(0,c.jsx)(`p`,{className:`muk-form-hint`,id:`${m}-hint`,children:i}):null]})};function v(e){if(e!=null)return typeof e==`number`?`${e}px`:e}var y=({variant:e=`secondary`,title:t=`No data available`,description:n=`There is nothing to display here at the moment. Please try refreshing the page`,width:r,height:i,action:a})=>{let o={width:v(r),height:v(i)};return(0,c.jsxs)(`div`,{className:`muk-empty-state muk-empty-state--${e}`,style:o,children:[(0,c.jsxs)(`div`,{className:`muk-empty-state__text`,children:[(0,c.jsx)(u,{as:`h3`,type:`muk-subheading`,children:t}),(0,c.jsx)(u,{children:n})]}),a&&(0,c.jsx)(`div`,{className:`muk-empty-state__actions`,children:a})]})};exports.MukButton=d,exports.MukCheckbox=m,exports.MukEmptyState=y,exports.MukIconButton=f,exports.MukInput=p,exports.MukRadio=h,exports.MukSelect=g,exports.MukText=u,exports.MukTextarea=_;
|
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
|
}),
|
|
@@ -303,4 +303,32 @@ var a = ({ variant: e = "secondary", align: n = "left", as: r = "p", type: i = "
|
|
|
303
303
|
});
|
|
304
304
|
};
|
|
305
305
|
//#endregion
|
|
306
|
-
|
|
306
|
+
//#region src/lib/utils/formatSize.ts
|
|
307
|
+
function p(e) {
|
|
308
|
+
if (e != null) return typeof e == "number" ? `${e}px` : e;
|
|
309
|
+
}
|
|
310
|
+
//#endregion
|
|
311
|
+
//#region src/lib/components/feedback/MukEmptyState.tsx
|
|
312
|
+
var m = ({ variant: e = "secondary", title: r = "No data available", description: i = "There is nothing to display here at the moment. Please try refreshing the page", width: o, height: s, action: c }) => {
|
|
313
|
+
let l = {
|
|
314
|
+
width: p(o),
|
|
315
|
+
height: p(s)
|
|
316
|
+
};
|
|
317
|
+
return /* @__PURE__ */ n("div", {
|
|
318
|
+
className: `muk-empty-state muk-empty-state--${e}`,
|
|
319
|
+
style: l,
|
|
320
|
+
children: [/* @__PURE__ */ n("div", {
|
|
321
|
+
className: "muk-empty-state__text",
|
|
322
|
+
children: [/* @__PURE__ */ t(a, {
|
|
323
|
+
as: "h3",
|
|
324
|
+
type: "muk-subheading",
|
|
325
|
+
children: r
|
|
326
|
+
}), /* @__PURE__ */ t(a, { children: i })]
|
|
327
|
+
}), c && /* @__PURE__ */ t("div", {
|
|
328
|
+
className: "muk-empty-state__actions",
|
|
329
|
+
children: c
|
|
330
|
+
})]
|
|
331
|
+
});
|
|
332
|
+
};
|
|
333
|
+
//#endregion
|
|
334
|
+
export { o as MukButton, l as MukCheckbox, m as MukEmptyState, s as MukIconButton, c as MukInput, u as MukRadio, d as MukSelect, a as MukText, f as MukTextarea };
|
|
@@ -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)}.muk-empty-state{border:var(--muk-border-width) var(--muk-border-style) var(--muk-bg);border-radius:var(--muk-border-radius);text-align:center;flex-direction:column;justify-content:center;align-items:center;padding:10px;display:flex}.muk-empty-state__text p,.muk-empty-state__text h3{text-align:center}.muk-empty-state__actions{justify-content:center;display:flex}.muk-empty-state--secondary{border-color:var(--muk-text)}.muk-empty-state--primary{border-color:var(--muk-primary)}.muk-empty-state--primary p,.muk-empty-state--primary h3,.muk-empty-state--primary a{color:var(--muk-primary)}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { default as React, FC } from 'react';
|
|
2
|
+
import { UIEmptyStateVariant } from '../../types/ui.types';
|
|
3
|
+
export interface MukEmptyStateProps {
|
|
4
|
+
title?: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
variant?: UIEmptyStateVariant;
|
|
7
|
+
width?: string | number;
|
|
8
|
+
height?: string | number;
|
|
9
|
+
action?: React.ReactNode;
|
|
10
|
+
}
|
|
11
|
+
export declare const MukEmptyState: FC<MukEmptyStateProps>;
|
package/dist/src/lib/index.d.ts
CHANGED
|
@@ -6,6 +6,7 @@ export { MukCheckbox } from './components/form/MukCheckbox';
|
|
|
6
6
|
export { MukRadio } from './components/form/MukRadio';
|
|
7
7
|
export { MukSelect } from './components/form/MukSelect';
|
|
8
8
|
export { MukTextarea } from './components/form/MukTextarea';
|
|
9
|
+
export { MukEmptyState } from './components/feedback/MukEmptyState';
|
|
9
10
|
export type { MukTextProps } from './components/typography/MukText';
|
|
10
11
|
export type { MukButtonProps } from './components/buttons/MukButton';
|
|
11
12
|
export type { MukIconButtonProps } from './components/buttons/MukIconButton';
|
|
@@ -14,4 +15,5 @@ export type { MukCheckboxProps } from './components/form/MukCheckbox';
|
|
|
14
15
|
export type { MukRadioProps } from './components/form/MukRadio';
|
|
15
16
|
export type { MukSelectProps, MukSelectOption } from './components/form/MukSelect';
|
|
16
17
|
export type { MukTextareaProps } from './components/form/MukTextarea';
|
|
17
|
-
export type {
|
|
18
|
+
export type { MukEmptyStateProps } from './components/feedback/MukEmptyState';
|
|
19
|
+
export type { UIVariant, UISize, UITextType, UITextAlign, UITextVariant, UIButtonVariant, UIButtonType, UIInputType, UIEmptyStateVariant } from './types/ui.types';
|
|
@@ -6,3 +6,4 @@ export type UITextVariant = UIVariant | 'muted';
|
|
|
6
6
|
export type UIButtonVariant = UIVariant | 'ghost';
|
|
7
7
|
export type UIButtonType = "button" | "submit" | "reset";
|
|
8
8
|
export type UIInputType = "text" | "email" | "password" | "search" | "date" | "tel" | "number";
|
|
9
|
+
export type UIEmptyStateVariant = 'secondary' | 'primary';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function formatSize(value?: string | number): string | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "modular-ui-kit-react",
|
|
3
|
-
"version": "1.0
|
|
3
|
+
"version": "1.1.0",
|
|
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
|
}
|