modular-ui-kit-react 0.0.0-stage → 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Eugenia
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,176 @@
-# Temporary Holding Version
+# modular-ui-kit-react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[![NPM Version](https://img.shields.io/npm/v/modular-ui-kit-react?color=42b883)](https://www.npmjs.com/package/modular-ui-kit-react)
+
+[![NPM Downloads](https://img.shields.io/npm/dm/modular-ui-kit-react?color=35495e)](https://www.npmjs.com/package/modular-ui-kit-react)
+
+[![GitHub Clones](https://img.shields.io/badge/dynamic/json?color=success&label=Clone&query=count&url=https://gist.githubusercontent.com/eugenia-vitinschii/e3f532a4d6ca634ade757fa0cea0aea9/raw/clone.json&logo=github)](https://github.com/MShawon/github-clone-count-badge)
+
+*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.
+_________
+
+### ⭐️ MukText ⭐️
+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.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `as` | `ElementType` | `'p'` | Polymorphic prop. The underlying HTML element or React component to render (`'p'`, `'h1'`–`'h6'`, `'span'`, `'a'`, etc.). |
+| `type` | `UITextType` | `'muk-body-text'` | Applies typography preset styles (`muk-heading`, `muk-subheading`, `muk-body-text`, `muk-caption`). |
+| `variant` | `UITextVariant` | `'secondary'` | Sets the text color theme (`primary`, `secondary`, `danger`, `warning`, `muted`). |
+| `align` | `UITextAlign` | `'left'` | Text alignment (`left`, `center`, `right`). |
+| `children` | `ReactNode` | — | Text or elements to be rendered inside the component. |
+
+#### Usage Example
+
+```ts
+import { MukText } from 'modular-ui-kit-react';
+
+// Heading
+<MukText as="h1" type="muk-heading" variant="primary">
+  Main Header
+</MukText>
+
+// Interactive Link
+<MukText as="a" href="https://example.com" variant="primary">
+  Read More
+</MukText>
+
+```
+
+_________
+
+### ⭐️ MukButton ⭐️
+A customizable button component that supports various visual variants, sizes, and states (including dynamic loading indicators and disability). It extends standard HTML button attributes and seamlessly handles async states.
+
+#### MukButton Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `variant` | `UIButtonVariant` | `'primary'` | Visual style preset (`primary`, `secondary`, `danger`, `warning`, etc.). |
+| `size` | `UISize` | `'lg'` | Button size dimensions (`sm`, `md`, `lg`). |
+| `type` | `UIButtonType` | `'button'` | Native HTML button type (`button`, `submit`, `reset`). |
+| `loading` | `boolean` | `false` | Displays a loading spinner and disables user interaction. |
+| `disabled` | `boolean` | `false` | Disables the button and prevents click events. |
+| `children` | `ReactNode` | — | Button label, icon, or nested content. |
+
+
+_______
+
+### ⭐️ MukIconButton ⭐️
+An extension of the standard button component optimized for icon-first or icon-with-text layouts. It supports standard button variants, states, and sizes, with a dedicated slot for icons (children) and an optional text slot (text), automatically applying the has-text state class when label content is present.
+
+
+#### MukIconButton Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `children` | `ReactNode` | — | Primary slot for the SVG icon or visual content. |
+| `text` | `ReactNode` | — | Optional slot for text label next to the icon. Triggers `has-text` class when provided. |
+| `variant` | `UIButtonVariant` | `'primary'` | Visual style preset (`primary`, `secondary`, `danger`, `warning`, etc.). |
+| `size` | `UISize` | `'lg'` | Button size dimensions (`sm`, `md`, `lg`). |
+| `type` | `UIButtonType` | `'button'` | Native HTML button type (`button`, `submit`, `reset`). |
+| `loading` | `boolean` | `false` | Displays a loading spinner and disables user interaction. |
+| `disabled` | `boolean` | `false` | Disables the button and prevents click events. |
+| `ariaLabel` | `string \| number` | — | Accessible label for screen readers (recommended when using icon-only mode). |
+
+_________
+
+### ⭐️ MukInput ⭐️
+A flexible and accessible text input component that supports floating labels, error/hint messages, and an optional built-in password visibility toggle. It extends native input attributes and seamlessly handles custom change events and validation states.
+
+#### MukInput Props
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string \| number` | `''` | The current value of the input (controlled component state). |
+| `onChange` | `(value: string) => void` | — | Callback function triggered when the input value changes. |
+| `label` | `string` | — | Top floating label displayed above the input field. |
+| `placeholder` | `string` | — | Placeholder text shown when the input is empty. |
+| `hint` | `string` | — | Helper text displayed below the input (hidden if an error is present). |
+| `error` | `string` | — | Error message string. Applies `is-error` style and takes precedence over hint. |
+| `type` | `UIInputType` | `'text'` | Native HTML input type (`text`, `password`, `email`, etc.). |
+| `showPasswordToggle` | `boolean` | `true` | Automatically adds a show/hide eye icon button when `type="password"`. |
+| `id` | `string` | `useId()` | Unique identifier for the input, automatically generated if not provided. |
+| `disabled` | `boolean` | `false` | Disables user interaction and applies disabled styles. |
+| `autoComplete` | `string` | — | Native autocomplete attribute for browser autofill. |
+
+_________
+
+### ⭐️ MukCheckbox ⭐️
+
+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).
+
+
+### MukCheckbox Props 
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `boolean` | `false` | Controls the checked state of the checkbox (`true` for checked, `false` for unchecked). |
+| `onChange` | `(value: boolean) => void` | — | Callback function triggered when the state toggles, returning the new boolean value. |
+| `label` | `string` | — | Side label text displayed next to the checkbox. |
+| `hint` | `string` | — | Helper text displayed below the checkbox (hidden if an error is present). |
+| `error` | `string` | — | Error message string. Applies `is-error` style and takes precedence over hint. |
+| `id` | `string` | `useId()` | Unique identifier for the input, automatically generated if not provided. |
+| `disabled` | `boolean` | `false` | Disables user interaction and applies disabled visual styles. |
+_________
+
+### ⭐️ MukRadio ⭐️
+
+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).
+
+
+### MukRadio Props 
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string \| number \| boolean` | *Required* | The unique value associated with this specific radio button. |
+| `selectedValue` | `string \| number \| boolean \| null` | — | The currently selected value of the entire radio group (used to determine `checked` state). |
+| `onChange` | `(value: string \| number \| boolean) => void` | — | Callback function triggered when selected, returning this button's value. |
+| `label` | `string` | — | Side label text displayed next to the radio circle. |
+| `name` | `string` | — | Native HTML `name` attribute to group radio buttons together. |
+| `hint` | `string` | — | Helper text displayed below the radio (hidden if an error is present). |
+| `error` | `string` | — | Error message string. Applies `is-error` style and takes precedence over hint. |
+| `id` | `string` | `useId()` | Unique identifier for the input, automatically generated if not provided. |
+| `disabled` | `boolean` | `false` | Disables user interaction and applies disabled visual styles. |
+
+_________
+
+### ⭐️ MukSelect ⭐️
+
+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).
+
+### MukSelect Props 
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string \| number` | `''` | The currently selected option value (controlled state). |
+| `onChange` | `(value: string) => void` | — | Callback function triggered when a new option is selected. |
+| `options` | `MukSelectOption[]` | `[]` | Array of option objects (`{ value: string \| number, label: string }`). |
+| `label` | `string` | — | Label displayed above the select element. |
+| `placeholder` | `string` | — | Default unselectable option text shown when no value is selected. |
+| `hint` | `string` | — | Helper text displayed below the select (hidden if an error is present). |
+| `error` | `string` | — | Error message string. Applies `is-error` style and takes precedence over hint. |
+| `id` | `string` | `useId()` | Unique identifier for the select, automatically generated if not provided. |
+| `disabled` | `boolean` | `false` | Disables user interaction and applies disabled visual styles. |
+
+_________
+
+### ⭐️ MukTextarea ⭐️
+
+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`).
+
+### MukTextarea Props 
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `value` | `string \| number` | `''` | The current text value of the textarea (controlled component state). |
+| `onChange` | `(value: string) => void` | — | Callback function triggered when the text changes, returning the new string. |
+| `label` | `string` | — | Label displayed above the textarea element. |
+| `placeholder` | `string` | — | Placeholder text shown when the textarea is empty. |
+| `rows` | `number` | `6` | Number of visible text lines for the textarea control. |
+| `hint` | `string` | — | Helper text displayed below the textarea (hidden if an error is present). |
+| `error` | `string` | — | Error message string. Applies `is-error` style and takes precedence over hint. |
+| `id` | `string` | `useId()` | Unique identifier for the textarea, automatically generated if not provided. |
+| `disabled` | `boolean` | `false` | Disables user interaction and applies disabled visual styles. |

package/dist/index.cjs

@@ -0,0 +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,"artia-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:`inputId`,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

@@ -0,0 +1,306 @@
+import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
+import { useId as r, useState as i } from "react";
+//#region src/lib/components/typography/MukText.tsx
+var a = ({ variant: e = "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--${e}`,
+		o
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t(r, {
+		className: c,
+		...s,
+		children: a
+	});
+}, o = ({ variant: r = "primary", type: i = "button", size: a = "lg", loading: o = !1, disabled: s = !1, className: c = "", children: l, ...u }) => {
+	let d = [
+		"muk-btn",
+		`muk-btn--${r}`,
+		`muk-btn--${a}`,
+		o ? "isLoading" : "",
+		c
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t("button", {
+		type: i,
+		className: d,
+		disabled: s || o,
+		"aria-busy": o,
+		...u,
+		children: o ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
+			className: "muk-btn-spinner",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ t("span", {
+			className: "visually-hidden",
+			children: "Loading"
+		})] }) : /* @__PURE__ */ t("span", {
+			className: "muk-btn__content",
+			children: l
+		})
+	});
+}, s = ({ variant: r = "primary", type: i = "button", size: a = "lg", loading: o = !1, disabled: s = !1, className: c = "", ariaLabel: l, text: u, children: d, ...f }) => {
+	let p = [
+		"muk-btn-icon",
+		`muk-btn-icon--${r}`,
+		`muk-btn-icon--${a}`,
+		o ? "isLoading" : "",
+		u ? "has-text" : "",
+		c
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ t("button", {
+		type: i,
+		className: p,
+		disabled: s || o,
+		"aria-busy": o,
+		"artia-label": l ? String(l) : void 0,
+		...f,
+		children: o ? /* @__PURE__ */ n(e, { children: [/* @__PURE__ */ t("span", {
+			className: "muk-btn-spinner",
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ t("span", {
+			className: "visually-hidden",
+			children: "Loading"
+		})] }) : /* @__PURE__ */ n("span", {
+			className: "muk-btn-icon__content",
+			children: [d, u]
+		})
+	});
+}, c = ({ type: e = "text", value: a = "", onChange: o, label: c, error: l, hint: u, showPasswordToggle: d = !0, disabled: f = !1, placeholder: p, id: m, className: h = "", ...g }) => {
+	let _ = r(), v = m || _, [y, b] = i(!1), x = e === "password" && d, S = x ? y ? "text" : "password" : e, C = [
+		"muk-input",
+		x ? "muk-input-password" : "",
+		h
+	].filter(Boolean).join(" "), w = ["muk-input__field", l ? "is-error" : ""].filter(Boolean).join(" "), T = () => {
+		b((e) => !e);
+	};
+	return /* @__PURE__ */ n("div", {
+		className: C,
+		children: [
+			c && /* @__PURE__ */ t("label", {
+				htmlFor: "inputId",
+				className: "muk-form-label muk-form-label--top",
+				children: c
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "muk-input__wrapper",
+				children: [/* @__PURE__ */ t("input", {
+					id: v,
+					type: S,
+					value: a,
+					disabled: f,
+					placeholder: p,
+					className: w,
+					onChange: (e) => o?.(e.target.value),
+					"aria-invalid": !!l,
+					"aria-describedby": l ? `${v}-error` : u ? `${v}-hint` : void 0,
+					...g
+				}), x && /* @__PURE__ */ t(s, {
+					className: "muk-input__button",
+					onClick: T,
+					ariaLabel: y ? "Hide password" : "Show password",
+					children: y ? /* @__PURE__ */ t("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						viewBox: "0 -960 960 960",
+						children: /* @__PURE__ */ t("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" })
+					}) : /* @__PURE__ */ t("svg", {
+						xmlns: "http://www.w3.org/2000/svg",
+						viewBox: "0 -960 960 960",
+						children: /* @__PURE__ */ t("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" })
+					})
+				})]
+			}),
+			l ? /* @__PURE__ */ t("p", {
+				className: "muk-form-error",
+				id: `${v}-error`,
+				children: l
+			}) : u ? /* @__PURE__ */ t("p", {
+				className: "muk-form-hint",
+				id: `${v}-hint`,
+				children: u
+			}) : null
+		]
+	});
+}, l = ({ value: e = !1, onChange: i, label: a, error: o, hint: s, disabled: c = !1, id: l, className: u = "", ...d }) => {
+	let f = r(), p = l || f, m = [
+		"muk-checkbox",
+		o ? "is-error" : "",
+		c ? "is-disabled" : "",
+		u
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		className: m,
+		children: [/* @__PURE__ */ t("label", {
+			htmlFor: p,
+			className: "muk-checkbox__wrapper",
+			children: /* @__PURE__ */ n("div", {
+				className: "muk-checkbox__data",
+				children: [
+					/* @__PURE__ */ t("input", {
+						type: "checkbox",
+						className: "muk-checkbox__field",
+						id: p,
+						checked: e,
+						disabled: c,
+						onChange: (e) => i?.(e.target.checked),
+						"aria-invalid": !!o,
+						"aria-describedby": o ? `${p}-error` : s ? `${p}-hint` : void 0,
+						...d
+					}),
+					/* @__PURE__ */ t("span", {
+						className: "muk-checkbox__box",
+						children: /* @__PURE__ */ t("span", {
+							className: "muk-checkbox__check",
+							children: "✓"
+						})
+					}),
+					a && /* @__PURE__ */ n("span", {
+						className: "muk-form-label muk-form-label--side",
+						children: [" ", a]
+					})
+				]
+			})
+		}), /* @__PURE__ */ t("div", {
+			className: "muk-checkbox__info",
+			children: o ? /* @__PURE__ */ t("p", {
+				className: "muk-form-error",
+				id: `${p}-error`,
+				children: o
+			}) : s ? /* @__PURE__ */ t("p", {
+				className: "muk-form-hint",
+				id: `${p}-hint`,
+				children: s
+			}) : null
+		})]
+	});
+}, u = ({ onChange: e, value: i, selectedValue: a, label: o, error: s, hint: c, name: l, disabled: u = !1, id: d, className: f = "", ...p }) => {
+	let m = r(), h = d || m, g = a === void 0 ? p.checked : a === i, _ = [
+		"muk-radio",
+		s ? "is-error" : "",
+		u ? "is-disabled" : "",
+		f
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		className: _,
+		children: [/* @__PURE__ */ t("label", {
+			htmlFor: h,
+			className: "muk-radio__wrapper",
+			children: /* @__PURE__ */ n("div", {
+				className: "muk-radio__data",
+				children: [
+					/* @__PURE__ */ t("input", {
+						type: "radio",
+						className: "muk-radio__field",
+						name: l,
+						id: h,
+						checked: g,
+						disabled: u,
+						onChange: () => e?.(i),
+						"aria-invalid": !!s,
+						"aria-describedby": s ? `${h}-error` : c ? `${h}-hint` : void 0,
+						...p
+					}),
+					/* @__PURE__ */ t("span", {
+						className: "muk-radio__box",
+						children: /* @__PURE__ */ t("span", {
+							className: "muk-radio__circle",
+							"aria-hidden": "true"
+						})
+					}),
+					o && /* @__PURE__ */ t("span", {
+						className: "muk-form-label muk-form-label--side",
+						children: o
+					})
+				]
+			})
+		}), /* @__PURE__ */ t("div", {
+			className: "muk-radio__info",
+			children: s ? /* @__PURE__ */ t("p", {
+				className: "muk-form-error",
+				id: `${h}-error`,
+				children: s
+			}) : c ? /* @__PURE__ */ t("p", {
+				className: "muk-form-hint",
+				id: `${h}-hint`,
+				children: c
+			}) : null
+		})]
+	});
+}, d = ({ onChange: e, value: i, options: a = [], label: o, error: s, hint: c, name: l, placeholder: u, disabled: d = !1, id: f, className: p = "", ...m }) => {
+	let h = r(), g = f || h, _ = [
+		"muk-select",
+		s ? "is-error" : "",
+		d ? "is-disabled" : "",
+		p
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		className: _,
+		children: [o && /* @__PURE__ */ t("label", {
+			htmlFor: g,
+			className: "muk-form-label muk-form-label--top",
+			children: o
+		}), /* @__PURE__ */ n("div", {
+			className: "muk-select__wrapper",
+			children: [/* @__PURE__ */ n("select", {
+				className: "muk-select__field",
+				name: l,
+				id: g,
+				disabled: d,
+				value: i ?? "",
+				onChange: (t) => e?.(t.target.value),
+				"aria-invalid": !!s,
+				"aria-describedby": s ? `${g}-error` : c ? `${g}-hint` : void 0,
+				...m,
+				children: [a.map((e) => /* @__PURE__ */ t("option", {
+					value: e.value,
+					children: e.label
+				}, e.value)), u && /* @__PURE__ */ t("option", {
+					disabled: !0,
+					children: u
+				})]
+			}), /* @__PURE__ */ t("span", {
+				className: "muk-select__icon",
+				children: "↓"
+			})]
+		})]
+	});
+}, f = ({ value: e = "", onChange: i, label: a, error: o, hint: s, rows: c = 6, disabled: l = !1, placeholder: u, id: d, className: f = "", ...p }) => {
+	let m = r(), h = d || m, g = [
+		"muk-textarea",
+		o ? "is-error" : "",
+		l ? "is-disabled" : "",
+		f
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		className: g,
+		children: [
+			a && /* @__PURE__ */ t("label", {
+				htmlFor: h,
+				className: "muk-form-label muk-form-label--top",
+				children: a
+			}),
+			/* @__PURE__ */ t("textarea", {
+				className: "muk-textarea__field",
+				id: h,
+				value: e,
+				onChange: (e) => i?.(e.target.value),
+				placeholder: u,
+				rows: c,
+				disabled: l,
+				"aria-invalid": !!o,
+				"aria-describedby": o ? `${h}-error` : s ? `${h}-hint` : void 0,
+				...p
+			}),
+			o ? /* @__PURE__ */ t("p", {
+				className: "muk-form-error",
+				id: `${h}-error`,
+				children: o
+			}) : s ? /* @__PURE__ */ t("p", {
+				className: "muk-form-hint",
+				id: `${h}-hint`,
+				children: s
+			}) : null
+		]
+	});
+};
+//#endregion
+export { o as MukButton, l as MukCheckbox, s as MukIconButton, c as MukInput, u as MukRadio, d as MukSelect, a as MukText, f as MukTextarea };

package/dist/modular-ui-kit-react.css

@@ -0,0 +1,2 @@
+@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)}
+/*$vite$:1*/

package/dist/src/lib/components/buttons/MukButton.d.ts

@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes, FC } from 'react';
+import { UIButtonType, UIButtonVariant, UISize } from '../../types/ui.types';
+export interface MukButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: UIButtonVariant;
+    size?: UISize;
+    type?: UIButtonType;
+    loading?: boolean;
+    disabled?: boolean;
+}
+export declare const MukButton: FC<MukButtonProps>;

package/dist/src/lib/components/buttons/MukIconButton.d.ts

@@ -0,0 +1,13 @@
+import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+import { UIButtonType, UIButtonVariant, UISize } from '../../types/ui.types';
+export interface MukIconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    ariaLabel?: string | number;
+    variant?: UIButtonVariant;
+    size?: UISize;
+    type?: UIButtonType;
+    loading?: boolean;
+    disabled?: boolean;
+    children?: ReactNode;
+    text?: ReactNode;
+}
+export declare const MukIconButton: FC<MukIconButtonProps>;

package/dist/src/lib/components/form/MukCheckbox.d.ts

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes, FC } from 'react';
+export interface MukCheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value'> {
+    value?: boolean;
+    onChange?: (value: boolean) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+}
+export declare const MukCheckbox: FC<MukCheckboxProps>;

package/dist/src/lib/components/form/MukInput.d.ts

@@ -0,0 +1,12 @@
+import { InputHTMLAttributes, FC } from 'react';
+import { UIInputType } from '../../types/ui.types';
+export interface MukInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
+    value?: string | number;
+    onChange?: (value: string) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    showPasswordToggle?: boolean;
+    type?: UIInputType;
+}
+export declare const MukInput: FC<MukInputProps>;

package/dist/src/lib/components/form/MukRadio.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes, FC } from 'react';
+export interface MukRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | "value"> {
+    value: boolean | string | number;
+    selectedValue?: boolean | string | number | null;
+    onChange?: (value: boolean | string | number | null) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+}
+export declare const MukRadio: FC<MukRadioProps>;

package/dist/src/lib/components/form/MukSelect.d.ts

@@ -0,0 +1,15 @@
+import { FC, SelectHTMLAttributes } from 'react';
+export interface MukSelectOption {
+    value: string | number;
+    label: string;
+}
+export interface MukSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange' | "value"> {
+    value: string | number;
+    onChange?: (value: string) => void;
+    options: MukSelectOption[];
+    label?: string;
+    hint?: string;
+    error?: string;
+    placeholder?: string;
+}
+export declare const MukSelect: FC<MukSelectProps>;

package/dist/src/lib/components/form/MukTextarea.d.ts

@@ -0,0 +1,10 @@
+import { TextareaHTMLAttributes, FC } from 'react';
+export interface MukTextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
+    value?: string | number;
+    onChange?: (value: string) => void;
+    label?: string;
+    hint?: string;
+    error?: string;
+    rows?: number;
+}
+export declare const MukTextarea: FC<MukTextareaProps>;

package/dist/src/lib/components/typography/MukText.d.ts

@@ -0,0 +1,11 @@
+import { FC, HTMLAttributes } from 'react';
+import { UITextAlign, UITextType, UITextVariant } from '../../types/ui.types';
+export interface MukTextProps extends HTMLAttributes<HTMLElement> {
+    variant?: UITextVariant;
+    as?: React.ElementType;
+    type?: UITextType;
+    align?: UITextAlign;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const MukText: FC<MukTextProps>;

package/dist/src/lib/index.d.ts

@@ -0,0 +1,17 @@
+export { MukText } from './components/typography/MukText';
+export { MukButton } from './components/buttons/MukButton';
+export { MukIconButton } from './components/buttons/MukIconButton';
+export { MukInput } from './components/form/MukInput';
+export { MukCheckbox } from './components/form/MukCheckbox';
+export { MukRadio } from './components/form/MukRadio';
+export { MukSelect } from './components/form/MukSelect';
+export { MukTextarea } from './components/form/MukTextarea';
+export type { MukTextProps } from './components/typography/MukText';
+export type { MukButtonProps } from './components/buttons/MukButton';
+export type { MukIconButtonProps } from './components/buttons/MukIconButton';
+export type { MukInputProps } from './components/form/MukInput';
+export type { MukCheckboxProps } from './components/form/MukCheckbox';
+export type { MukRadioProps } from './components/form/MukRadio';
+export type { MukSelectProps, MukSelectOption } from './components/form/MukSelect';
+export type { MukTextareaProps } from './components/form/MukTextarea';
+export type { UIVariant, UISize, UITextType, UITextAlign, UITextVariant, UIButtonVariant, UIButtonType, UIInputType } from './types/ui.types';

package/dist/src/lib/types/ui.types.d.ts

@@ -0,0 +1,8 @@
+export type UIVariant = 'primary' | 'danger' | 'warning' | 'success' | 'secondary';
+export type UISize = 'sm' | 'md' | 'lg';
+export type UITextType = 'muk-heading' | 'muk-subheading' | 'muk-body-text' | 'muk-caption' | 'muk-none';
+export type UITextAlign = 'left' | 'center' | 'right';
+export type UITextVariant = UIVariant | 'muted';
+export type UIButtonVariant = UIVariant | 'ghost';
+export type UIButtonType = "button" | "submit" | "reset";
+export type UIInputType = "text" | "email" | "password" | "search" | "date" | "tel" | "number";

package/package.json

@@ -1,6 +1,78 @@
 {
   "name": "modular-ui-kit-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.1",
+  "description": "A modular, accessible TypeScript-driven UI library for React.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Eugenia Vitinschii",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/src/lib/index.d.ts",
+  "style": "./dist/modular-ui-kit-react.css",
+  "exports": {
+    ".": {
+      "types": "./dist/src/lib/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./modular-ui-kit-react.css": {
+      "default": "./dist/modular-ui-kit-react.css"
+    },
+    "./*.css": {
+      "default": "./dist/*.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "react",
+    "react18",
+    "react19",
+    "react-components",
+    "ui-kit",
+    "component-library",
+    "typescript",
+    "sass",
+    "design-system",
+    "frontend",
+    "responsive-ui"
+  ],
+  "homepage": "https://github.com/eugenia-vitinschii/modular-ui-kit-react#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eugenia-vitinschii/modular-ui-kit-react.git"
+  },
+  "bugs": {
+    "url": "https://github.com/eugenia-vitinschii/modular-ui-kit-react/issues"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@types/node": "^24.19.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.2",
+    "eslint": "^10.13.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.7",
+    "globals": "^17.13.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "react-router-dom": "^7.18.4",
+    "sass": "^1.105.2",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.71.2",
+    "vite": "^8.3.4",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  }
+}