react-material-design 0.0.0-stage → 0.5.0

package/dist/components/TextField/TextField.render.js

@@ -0,0 +1,159 @@
+import e, { convertIconDefinition as t } from "../Icon/Icon.js";
+import { getMaxWords as n } from "../../utils/index.js";
+import r from "../Button/icon/index.js";
+import "../Icon/index.js";
+import i from "../containers/FilledField/index.js";
+import a from "../containers/OutlinedField/index.js";
+import './style.css';/* empty css           */
+import o from "classnames";
+import { useCallback as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region lib/components/TextField/TextField.render.tsx
+function m(m) {
+	let { shape: h, label: g, onValueChange: _, onChange: v, onInvalid: y, value: b, supportingText: x, counter: S = !0, clearable: C, leadingIcon: w, trailingIcon: T, prefix: E, suffix: D, ...O } = m, k = l(null), [A, j] = u(b ?? m.defaultValue ?? ""), M = b ?? A, N = !!M.length, [P, F] = u(!1), [I, L] = u(!1), R = g ? g + (m.required ? "*" : "") : void 0, [z, B] = u(), [V, H] = u(0), U = z ?? x, W = s((e) => {
+		let t;
+		m.maxLength && S === "word" ? (t = e.match(/\b\w+\b/g)?.length ?? 0, t >= m.maxLength && (e = n(e, m.maxLength)), H(t)) : m.maxLength && (e = e.slice(0, m.maxLength), H(e.length)), b === void 0 && j(e), B(void 0), _?.(e);
+	}, [
+		b,
+		S,
+		_,
+		m.maxLength
+	]), G = s((e) => {
+		e.preventDefault(), W("");
+	}, [W]), K = c(() => m.type === "password" ? /* @__PURE__ */ f(r, {
+		selectable: !0,
+		selected: I,
+		icon: (e) => T ?? (e ? "visibility_off" : "visibility"),
+		color: "standard",
+		onClick: () => L(!I),
+		className: "trailing"
+	}) : C ? /* @__PURE__ */ f(r, {
+		icon: T ?? "close",
+		color: "standard",
+		onClick: G,
+		className: "trailing"
+	}) : z ? /* @__PURE__ */ f(e, {
+		name: "error",
+		fill: !0,
+		className: "error"
+	}) : t(T), [
+		m.type,
+		I,
+		C,
+		T,
+		G,
+		z
+	]), q = c(() => /* @__PURE__ */ f("input", {
+		...O,
+		ref: k,
+		type: m.type === "password" ? I ? "text" : "password" : m.type,
+		required: m.required,
+		onFocus: () => F(!0),
+		onBlur: () => F(!1),
+		value: M,
+		onChange: (e) => {
+			W(e.target.value), v?.(e);
+		},
+		maxLength: m.maxLength && S === "word" ? void 0 : m.maxLength,
+		onInvalid: (e) => {
+			e.preventDefault(), B(e.currentTarget.validationMessage), y?.(e), e.currentTarget.focus();
+		},
+		title: ""
+	}), [
+		O,
+		m.type,
+		m.required,
+		m.maxLength,
+		I,
+		M,
+		S,
+		W,
+		v,
+		y
+	]), J = c(() => h === "filled" ? /* @__PURE__ */ p(d, { children: [
+		t(w),
+		/* @__PURE__ */ p("div", {
+			className: "container",
+			onMouseDown: () => requestAnimationFrame(() => k.current?.focus()),
+			children: [g && /* @__PURE__ */ f("span", {
+				className: "label",
+				children: R
+			}), /* @__PURE__ */ p("div", {
+				className: o("content", {
+					prefix: E,
+					suffix: D
+				}),
+				children: [
+					E && /* @__PURE__ */ f("span", {
+						className: "prefix",
+						children: E
+					}),
+					q,
+					D && /* @__PURE__ */ f("span", {
+						className: "suffix",
+						children: D
+					})
+				]
+			})]
+		}),
+		K
+	] }) : /* @__PURE__ */ p(d, { children: [
+		t(w),
+		/* @__PURE__ */ p("div", {
+			className: o("content", {
+				prefix: E,
+				suffix: D
+			}),
+			children: [
+				E && /* @__PURE__ */ f("span", {
+					className: "prefix",
+					children: E
+				}),
+				q,
+				D && /* @__PURE__ */ f("span", {
+					className: "suffix",
+					children: D
+				})
+			]
+		}),
+		K
+	] }), [
+		R,
+		q,
+		g,
+		w,
+		E,
+		h,
+		D,
+		K
+	]);
+	return /* @__PURE__ */ p("div", {
+		className: o("TextField", m.type, { error: z }),
+		children: [f(h === "filled" ? i : a, {
+			label: R,
+			filled: N || !!m.prefix,
+			focus: P,
+			error: !!z,
+			className: o({
+				leadingIcon: w,
+				trailingIcon: K
+			}),
+			children: J
+		}), (U || m.maxLength && S) && /* @__PURE__ */ p("div", {
+			className: "support",
+			children: [/* @__PURE__ */ f("div", {
+				className: "message",
+				children: U
+			}), m.maxLength && S && /* @__PURE__ */ p("div", {
+				className: "counter",
+				children: [
+					V,
+					" / ",
+					m.maxLength
+				]
+			})]
+		})]
+	});
+}
+//#endregion
+export { m as default };

package/dist/components/TextField/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./TextField.cjs");exports.default=e.default;

package/dist/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './TextField';
+export type { TextFieldProps } from './TextField.render';

package/dist/components/TextField/index.js

@@ -0,0 +1 @@
+export { default } from "./TextField.js";

package/dist/components/TextField/style.css

@@ -0,0 +1 @@
+.TextField{vertical-align:top;min-width:240px;display:inline-block}.TextField>.Field{box-sizing:border-box;align-items:center;gap:12px;min-width:100%;max-width:100%;padding-inline:12px;display:flex}.TextField>.FilledField.leadingIcon{--filled-field-label-position-inline-offset:36px}.TextField>.FilledField>.Icon{--icon-size:24px}.TextField>.FilledField>.Icon:not(.error){color:var(--md-sys-color-on-surface-variant)}.TextField>.FilledField>.Icon.error{color:var(--md-sys-color-error)}.TextField>.FilledField>.container{flex-direction:column;flex:1 1 fit-content;box-sizing:border-box;cursor:text;width:0;min-height:56px;padding-block:8px;padding-inline:4px;display:flex}.TextField>.FilledField>.container>.label{font-family:var(--md-sys-typescale-body-small-font);font-weight:var(--md-sys-typescale-body-small-weight);font-size:var(--md-sys-typescale-body-small-size);letter-spacing:var(--md-sys-typescale-body-small-tracking);line-height:var(--md-sys-typescale-body-small-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-small-wght), "GRAD" var(--md-sys-typescale-body-small-grad), "wdth" var(--md-sys-typescale-body-small-wdth), "ROND" var(--md-sys-typescale-body-small-rond), "opsz" var(--md-sys-typescale-body-small-opsz), "CRSV" var(--md-sys-typescale-body-small-crsv), "slnt" var(--md-sys-typescale-body-small-slnt), "FILL" var(--md-sys-typescale-body-small-fill), "HEXP" var(--md-sys-typescale-body-small-hexp);text-align:left;opacity:0}.TextField>.FilledField>.container>.content{flex:1 1 fit-content;align-items:center;gap:2px;display:flex}.TextField>.FilledField>.container>.content.suffix>input{text-align:right}.TextField>.FilledField>.container>.content>.prefix,.TextField>.FilledField>.container>.content>.suffix{font-family:var(--md-sys-typescale-body-large-font);font-weight:var(--md-sys-typescale-body-large-weight);font-size:var(--md-sys-typescale-body-large-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-large-wght), "GRAD" var(--md-sys-typescale-body-large-grad), "wdth" var(--md-sys-typescale-body-large-wdth), "ROND" var(--md-sys-typescale-body-large-rond), "opsz" var(--md-sys-typescale-body-large-opsz), "CRSV" var(--md-sys-typescale-body-large-crsv), "slnt" var(--md-sys-typescale-body-large-slnt), "FILL" var(--md-sys-typescale-body-large-fill), "HEXP" var(--md-sys-typescale-body-large-hexp);color:var(--md-sys-color-on-surface-variant)}.TextField>.FilledField>.container>.content>input{font-family:var(--md-sys-typescale-body-large-font);font-weight:var(--md-sys-typescale-body-large-weight);font-size:var(--md-sys-typescale-body-large-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-large-wght), "GRAD" var(--md-sys-typescale-body-large-grad), "wdth" var(--md-sys-typescale-body-large-wdth), "ROND" var(--md-sys-typescale-body-large-rond), "opsz" var(--md-sys-typescale-body-large-opsz), "CRSV" var(--md-sys-typescale-body-large-crsv), "slnt" var(--md-sys-typescale-body-large-slnt), "FILL" var(--md-sys-typescale-body-large-fill), "HEXP" var(--md-sys-typescale-body-large-hexp);color:var(--md-sys-color-on-surface);box-sizing:border-box;width:0;height:100%;caret-color:var(--md-sys-color-primary);appearance:textfield;background:0 0;border:none;outline:none;flex:1;padding:0}.TextField>.FilledField>.container>.content>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField>.FilledField>.container>.content>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.TextField>.OutlinedField.leadingIcon{--outlined-field-label-position-inline-offset:36px}.TextField>.OutlinedField>.Icon{--icon-size:24px}.TextField>.OutlinedField>.Icon:not(.error){color:var(--md-sys-color-on-surface-variant)}.TextField>.OutlinedField>.Icon.error{color:var(--md-sys-color-error)}.TextField>.OutlinedField>.IconButton{margin-inline:-4px}.TextField>.OutlinedField>.content{flex:1 1 fit-content;align-items:center;gap:2px;width:0;padding-inline:4px;display:flex}.TextField>.OutlinedField>.content.suffix>input{text-align:right}.TextField>.OutlinedField>.content>.prefix,.TextField>.OutlinedField>.content>.suffix{font-family:var(--md-sys-typescale-body-large-font);font-weight:var(--md-sys-typescale-body-large-weight);font-size:var(--md-sys-typescale-body-large-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-large-wght), "GRAD" var(--md-sys-typescale-body-large-grad), "wdth" var(--md-sys-typescale-body-large-wdth), "ROND" var(--md-sys-typescale-body-large-rond), "opsz" var(--md-sys-typescale-body-large-opsz), "CRSV" var(--md-sys-typescale-body-large-crsv), "slnt" var(--md-sys-typescale-body-large-slnt), "FILL" var(--md-sys-typescale-body-large-fill), "HEXP" var(--md-sys-typescale-body-large-hexp);color:var(--md-sys-color-on-surface-variant)}.TextField>.OutlinedField>.content>input{font-family:var(--md-sys-typescale-body-large-font);font-weight:var(--md-sys-typescale-body-large-weight);font-size:var(--md-sys-typescale-body-large-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-large-wght), "GRAD" var(--md-sys-typescale-body-large-grad), "wdth" var(--md-sys-typescale-body-large-wdth), "ROND" var(--md-sys-typescale-body-large-rond), "opsz" var(--md-sys-typescale-body-large-opsz), "CRSV" var(--md-sys-typescale-body-large-crsv), "slnt" var(--md-sys-typescale-body-large-slnt), "FILL" var(--md-sys-typescale-body-large-fill), "HEXP" var(--md-sys-typescale-body-large-hexp);color:var(--md-sys-color-on-surface);box-sizing:border-box;width:0;min-height:56px;caret-color:var(--md-sys-color-primary);appearance:textfield;background:0 0;border:none;outline:none;flex:1;padding:0}.TextField>.OutlinedField>.content>input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.TextField>.OutlinedField>.content>input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.TextField>.support{font-family:var(--md-sys-typescale-body-large-font);font-weight:var(--md-sys-typescale-body-large-weight);font-size:var(--md-sys-typescale-body-large-size);letter-spacing:var(--md-sys-typescale-body-large-tracking);line-height:var(--md-sys-typescale-body-large-line-height);font-variation-settings:"wght" var(--md-sys-typescale-body-large-wght), "GRAD" var(--md-sys-typescale-body-large-grad), "wdth" var(--md-sys-typescale-body-large-wdth), "ROND" var(--md-sys-typescale-body-large-rond), "opsz" var(--md-sys-typescale-body-large-opsz), "CRSV" var(--md-sys-typescale-body-large-crsv), "slnt" var(--md-sys-typescale-body-large-slnt), "FILL" var(--md-sys-typescale-body-large-fill), "HEXP" var(--md-sys-typescale-body-large-hexp);color:var(--md-sys-color-on-surface-variant);text-align:left;padding-top:4px;box-sizing:border-box;gap:16px;width:min-content;min-width:100%;padding-inline:16px;display:flex}.TextField>.support>.message{flex:1}.TextField.error>.OutlinedField>.content>input{caret-color:var(--md-sys-color-error)}.TextField.error>.support{color:var(--md-sys-color-error)}

package/dist/components/Theme/Theme.cjs

@@ -0,0 +1,4 @@
+require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs");;/* empty css             */let t=require("react/compiler-runtime"),n=require("@material/material-color-utilities"),r=require("classnames");r=e.__toESM(r,1);let i=require("react");require("@fontsource/roboto/index.css"),require("@fontsource/roboto-flex/index.css"),require("@fontsource/roboto-mono/index.css");let a=require("react/jsx-runtime");function o(e){let t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null}function s(e,t=!1,r,i){let a=(0,n.argbFromHex)(e),s=`background.onBackground.surface.surfaceDim.surfaceBright.surfaceContainerLowest.surfaceContainerLow.surfaceContainer.surfaceContainerHigh.surfaceContainerHighest.onSurface.surfaceVariant.onSurfaceVariant.inverseSurface.inverseOnSurface.outline.outlineVariant.shadow.scrim.surfaceTint.primary.onPrimary.primaryContainer.onPrimaryContainer.inversePrimary.secondary.onSecondary.secondaryContainer.onSecondaryContainer.tertiary.onTertiary.tertiaryContainer.onTertiaryContainer.error.onError.errorContainer.onErrorContainer.primaryFixed.primaryFixedDim.onPrimaryFixed.onPrimaryFixedVariant.secondaryFixed.secondaryFixedDim.onSecondaryFixed.onSecondaryFixedVariant.tertiaryFixed.tertiaryFixedDim.onTertiaryFixed.onTertiaryFixedVariant`.split(`.`),c=[`color`,`colorContainer`,`onColor`,`onColorContainer`],l=new n.SchemeTonalSpot(n.Hct.fromInt(a),t,r??0,`2025`),u=[],d=(e,t)=>{let n=e.replace(/([a-z])([A-Z])/g,`$1-$2`).toLowerCase();return t&&(n=n.replace(`color`,t)),`--md-sys-color-${n}`},f,p,m;for(let e of s)p=(0,n.hexFromArgb)(l[e]),m=o(p),u.push(`${d(e)}: ${p};`),u.push(`${d(e)}-rgb: ${m?.r}, ${m?.g}, ${m?.b};`);for(let e in i)for(let r of c)f=(0,n.customColor)(a,{name:e,value:typeof i[e].color==`string`?(0,n.argbFromHex)(i[e].color):i[e].color,blend:i[e].blend}),u.push(`${d(r,e)}: ${(0,n.hexFromArgb)(f[t?`dark`:`light`][r])};`);return u.join(`
+`)}var c=(0,i.createContext)(null);function l(e){let t=(0,i.useContext)(c);if(e&&!t)throw Error(`${e} must be used in <Theme> component`);return t}function u(e){let n=(0,t.c)(97),o,u,f,p,m,h,g;n[0]===e?(o=n[1],u=n[2],f=n[3],p=n[4],m=n[5],h=n[6],g=n[7]):({theme:g,scrollable:m,children:o,noDefaultStyle:p,className:u,style:h,...f}=e,n[0]=e,n[1]=o,n[2]=u,n[3]=f,n[4]=p,n[5]=m,n[6]=h,n[7]=g);let ee=g===void 0?`auto`:g,_=(0,i.useRef)(null),[te,ne]=(0,i.useState)(null),[re,ie]=(0,i.useState)(null),[ae,oe]=(0,i.useState)(null),se=(0,i.useId)(),v=e.id??se,y=(0,i.useRef)(null),b;n[8]===Symbol.for(`react.memo_cache_sentinel`)?(b={},n[8]=b):b=n[8];let x=(0,i.useRef)(b),S=(0,i.useRef)(null),[C,w]=(0,i.useState)(),T=l(),E;n[9]===T?E=n[10]:(E=()=>{let e=T;if(!e)return null;for(;e?.context;)e=e.context;return e},n[9]=T,n[10]=E);let D=E,O=T?.tooltipsContainer??te,k=T?.dialogsContainer??re,A=T?.popoversContainer??ae,j;n[11]!==D||n[12]!==C?(j=D()?.tooltip??C,n[11]=D,n[12]=C,n[13]=j):j=n[13];let M;n[14]!==f||n[15]!==T||n[16]!==O||n[17]!==k||n[18]!==A||n[19]!==j?(M={ref:_,tooltipsContainer:O,dialogsContainer:k,popoversContainer:A,config:f,tooltip:j,setTooltip(e){typeof S.current==`number`&&(S.current=window.clearTimeout(S.current)??null),e?w(e):S.current=window.setTimeout(()=>w(void 0),1500),T?.setTooltip(e)},setDialogState(e,t){x.current[e]=t,Object.values(x.current).some(d)?document.documentElement.style.setProperty(`overflow`,`hidden`):document.documentElement.style.removeProperty(`overflow`)},context:T},n[14]=f,n[15]=T,n[16]=O,n[17]=k,n[18]=A,n[19]=j,n[20]=M):M=n[20];let N=M,P;n[21]===Symbol.for(`react.memo_cache_sentinel`)?(P={color:`#257f00`,blend:!0},n[21]=P):P=n[21];let F;n[22]===e.customColors?F=n[23]:(F={success:P,...e.customColors},n[22]=e.customColors,n[23]=F);let I=F,L;bb0:{if(!T){let t;n[24]!==I||n[25]!==e.contrast||n[26]!==e.primaryColor?(t=s(e.primaryColor,!1,e.contrast,I),n[24]=I,n[25]=e.contrast,n[26]=e.primaryColor,n[27]=t):t=n[27];let r=`:root:not(:has(.Theme.light), :has(.Theme.dark)) {${t}}`,i;n[28]!==I||n[29]!==e.contrast||n[30]!==e.primaryColor?(i=s(e.primaryColor,!0,e.contrast,I),n[28]=I,n[29]=e.contrast,n[30]=e.primaryColor,n[31]=i):i=n[31];let a=`@media (prefers-color-scheme: dark) {:root:not(:has(.Theme.light), :has(.Theme.dark)) {${i}}}`,o;n[32]!==I||n[33]!==e.contrast||n[34]!==e.primaryColor?(o=s(e.primaryColor,!1,e.contrast,I),n[32]=I,n[33]=e.contrast,n[34]=e.primaryColor,n[35]=o):o=n[35];let c=`:root:has(.Theme.light) {${o}}`,l;n[36]!==I||n[37]!==e.contrast||n[38]!==e.primaryColor?(l=s(e.primaryColor,!0,e.contrast,I),n[36]=I,n[37]=e.contrast,n[38]=e.primaryColor,n[39]=l):l=n[39];let u=`:root:has(.Theme.dark) {${l}}`,d;n[40]!==r||n[41]!==a||n[42]!==c||n[43]!==u?(d=[r,a,c,u],n[40]=r,n[41]=a,n[42]=c,n[43]=u,n[44]=d):d=n[44],L=d.join(`
+`);break bb0}let t;n[45]!==I||n[46]!==e.contrast||n[47]!==e.primaryColor?(t=s(e.primaryColor,!1,e.contrast,I),n[45]=I,n[46]=e.contrast,n[47]=e.primaryColor,n[48]=t):t=n[48];let r=`:root:not(:has(.Theme.light), :has(.Theme.dark)) .Theme#${v} {${t}}`,i;n[49]!==I||n[50]!==e.contrast||n[51]!==e.primaryColor?(i=s(e.primaryColor,!0,e.contrast,I),n[49]=I,n[50]=e.contrast,n[51]=e.primaryColor,n[52]=i):i=n[52];let a=`@media (prefers-color-scheme: dark) {:root:not(:has(.Theme.light), :has(.Theme.dark)) .Theme#${v} {${i}}}`,o;n[53]!==I||n[54]!==e.contrast||n[55]!==e.primaryColor?(o=s(e.primaryColor,!1,e.contrast,I),n[53]=I,n[54]=e.contrast,n[55]=e.primaryColor,n[56]=o):o=n[56];let c=`:root:has(.Theme.light) .Theme#${v} {${o}}`,l;n[57]!==I||n[58]!==e.contrast||n[59]!==e.primaryColor?(l=s(e.primaryColor,!0,e.contrast,I),n[57]=I,n[58]=e.contrast,n[59]=e.primaryColor,n[60]=l):l=n[60];let u=`:root:has(.Theme.dark) .Theme#${v} {${l}}`,d;n[61]!==r||n[62]!==a||n[63]!==c||n[64]!==u?(d=[r,a,c,u],n[61]=r,n[62]=a,n[63]=c,n[64]=u,n[65]=d):d=n[65],L=d.join(`
+`)}let R=L,z=!T&&ee===`light`,B=!T&&ee===`dark`,V=!p&&!T,H=!T||m,U;n[66]!==z||n[67]!==B||n[68]!==V||n[69]!==H?(U={Theme:!0,light:z,dark:B,base:V,scrollable:H},n[66]=z,n[67]=B,n[68]=V,n[69]=H,n[70]=U):U=n[70];let W=U,G,K;n[71]===R?(G=n[72],K=n[73]):(G=()=>{y.current&&(y.current.innerHTML=R)},K=[R],n[71]=R,n[72]=G,n[73]=K),(0,i.useLayoutEffect)(G,K);let q;n[74]!==p||n[75]!==T||n[76]!==v?(q=!p&&!T&&(0,a.jsx)(`style`,{href:`theme_base_${v}`,precedence:`theme_base`,children:`body {margin: 0px}`}),n[74]=p,n[75]=T,n[76]=v,n[77]=q):q=n[77];let J=`theme_${v}`,Y;n[78]!==R||n[79]!==J?(Y=(0,a.jsx)(`style`,{ref:y,href:J,precedence:`theme`,children:R}),n[78]=R,n[79]=J,n[80]=Y):Y=n[80];let X;n[81]!==W||n[82]!==u?(X=(0,r.default)(W,u),n[81]=W,n[82]=u,n[83]=X):X=n[83];let Z;n[84]===T?Z=n[85]:(Z=!T&&(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(`div`,{ref:ne,className:`portals toolips-container`}),(0,a.jsx)(`div`,{ref:ie,className:`portals dialogs-container`}),(0,a.jsx)(`div`,{ref:oe,className:`portals popovers-container`})]}),n[84]=T,n[85]=Z);let Q;n[86]!==o||n[87]!==v||n[88]!==h||n[89]!==X||n[90]!==Z?(Q=(0,a.jsxs)(`div`,{ref:_,id:v,className:X,style:h,children:[o,Z]}),n[86]=o,n[87]=v,n[88]=h,n[89]=X,n[90]=Z,n[91]=Q):Q=n[91];let $;return n[92]!==N||n[93]!==q||n[94]!==Y||n[95]!==Q?($=(0,a.jsxs)(c,{value:N,children:[q,Y,Q]}),n[92]=N,n[93]=q,n[94]=Y,n[95]=Q,n[96]=$):$=n[96],$}function d(e){return e}exports.default=u,exports.useTheme=l;

package/dist/components/Theme/Theme.d.ts

@@ -0,0 +1,14 @@
+import { ThemeConfig, ThemeContext } from './types';
+declare const ThemeContext: import('react').Context<ThemeContext | null>;
+export declare function useTheme(): ThemeContext | null;
+export declare function useTheme(required: string): ThemeContext;
+export interface ThemeProps extends React.PropsWithChildren<ThemeConfig> {
+    id?: string;
+    theme?: "light" | "dark" | "auto";
+    scrollable?: boolean;
+    noDefaultStyle?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export default function Theme(props: ThemeProps): import('react').JSX.Element;
+export {};

package/dist/components/Theme/Theme.js

@@ -0,0 +1,183 @@
+import './style.css';/* empty css           */
+import { c as e } from "react/compiler-runtime";
+import { Hct as t, SchemeTonalSpot as n, argbFromHex as r, customColor as i, hexFromArgb as a } from "@material/material-color-utilities";
+import o from "classnames";
+import { createContext as s, useContext as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+import "@fontsource/roboto/index.css";
+import "@fontsource/roboto-flex/index.css";
+import "@fontsource/roboto-mono/index.css";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region lib/components/Theme/Theme.tsx
+function g(e) {
+	let t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
+	return t ? {
+		r: parseInt(t[1], 16),
+		g: parseInt(t[2], 16),
+		b: parseInt(t[3], 16)
+	} : null;
+}
+function _(e, o = !1, s, c) {
+	let l = r(e), u = /* @__PURE__ */ "background.onBackground.surface.surfaceDim.surfaceBright.surfaceContainerLowest.surfaceContainerLow.surfaceContainer.surfaceContainerHigh.surfaceContainerHighest.onSurface.surfaceVariant.onSurfaceVariant.inverseSurface.inverseOnSurface.outline.outlineVariant.shadow.scrim.surfaceTint.primary.onPrimary.primaryContainer.onPrimaryContainer.inversePrimary.secondary.onSecondary.secondaryContainer.onSecondaryContainer.tertiary.onTertiary.tertiaryContainer.onTertiaryContainer.error.onError.errorContainer.onErrorContainer.primaryFixed.primaryFixedDim.onPrimaryFixed.onPrimaryFixedVariant.secondaryFixed.secondaryFixedDim.onSecondaryFixed.onSecondaryFixedVariant.tertiaryFixed.tertiaryFixedDim.onTertiaryFixed.onTertiaryFixedVariant".split("."), d = [
+		"color",
+		"colorContainer",
+		"onColor",
+		"onColorContainer"
+	], f = new n(t.fromInt(l), o, s ?? 0, "2025"), p = [], m = (e, t) => {
+		let n = e.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+		return t && (n = n.replace("color", t)), `--md-sys-color-${n}`;
+	}, h, _, v;
+	for (let e of u) _ = a(f[e]), v = g(_), p.push(`${m(e)}: ${_};`), p.push(`${m(e)}-rgb: ${v?.r}, ${v?.g}, ${v?.b};`);
+	for (let e in c) for (let t of d) h = i(l, {
+		name: e,
+		value: typeof c[e].color == "string" ? r(c[e].color) : c[e].color,
+		blend: c[e].blend
+	}), p.push(`${m(t, e)}: ${a(h[o ? "dark" : "light"][t])};`);
+	return p.join("\n");
+}
+var v = s(null);
+function ee(e) {
+	let t = c(v);
+	if (e && !t) throw Error(`${e} must be used in <Theme> component`);
+	return t;
+}
+function y(t) {
+	let n = e(97), r, i, a, s, c, g, y;
+	n[0] === t ? (r = n[1], i = n[2], a = n[3], s = n[4], c = n[5], g = n[6], y = n[7]) : ({theme: y, scrollable: c, children: r, noDefaultStyle: s, className: i, style: g, ...a} = t, n[0] = t, n[1] = r, n[2] = i, n[3] = a, n[4] = s, n[5] = c, n[6] = g, n[7] = y);
+	let ne = y === void 0 ? "auto" : y, re = d(null), [ie, ae] = f(null), [oe, se] = f(null), [ce, le] = f(null), ue = l(), b = t.id ?? ue, x = d(null), S;
+	n[8] === Symbol.for("react.memo_cache_sentinel") ? (S = {}, n[8] = S) : S = n[8];
+	let de = d(S), C = d(null), [w, fe] = f(), T = ee(), E;
+	n[9] === T ? E = n[10] : (E = () => {
+		let e = T;
+		if (!e) return null;
+		for (; e?.context;) e = e.context;
+		return e;
+	}, n[9] = T, n[10] = E);
+	let D = E, O = T?.tooltipsContainer ?? ie, k = T?.dialogsContainer ?? oe, A = T?.popoversContainer ?? ce, j;
+	n[11] !== D || n[12] !== w ? (j = D()?.tooltip ?? w, n[11] = D, n[12] = w, n[13] = j) : j = n[13];
+	let M;
+	n[14] !== a || n[15] !== T || n[16] !== O || n[17] !== k || n[18] !== A || n[19] !== j ? (M = {
+		ref: re,
+		tooltipsContainer: O,
+		dialogsContainer: k,
+		popoversContainer: A,
+		config: a,
+		tooltip: j,
+		setTooltip(e) {
+			typeof C.current == "number" && (C.current = window.clearTimeout(C.current) ?? null), e ? fe(e) : C.current = window.setTimeout(() => fe(void 0), 1500), T?.setTooltip(e);
+		},
+		setDialogState(e, t) {
+			de.current[e] = t, Object.values(de.current).some(te) ? document.documentElement.style.setProperty("overflow", "hidden") : document.documentElement.style.removeProperty("overflow");
+		},
+		context: T
+	}, n[14] = a, n[15] = T, n[16] = O, n[17] = k, n[18] = A, n[19] = j, n[20] = M) : M = n[20];
+	let N = M, P;
+	n[21] === Symbol.for("react.memo_cache_sentinel") ? (P = {
+		color: "#257f00",
+		blend: !0
+	}, n[21] = P) : P = n[21];
+	let F;
+	n[22] === t.customColors ? F = n[23] : (F = {
+		success: P,
+		...t.customColors
+	}, n[22] = t.customColors, n[23] = F);
+	let I = F, L;
+	bb0: {
+		if (!T) {
+			let e;
+			n[24] !== I || n[25] !== t.contrast || n[26] !== t.primaryColor ? (e = _(t.primaryColor, !1, t.contrast, I), n[24] = I, n[25] = t.contrast, n[26] = t.primaryColor, n[27] = e) : e = n[27];
+			let r = `:root:not(:has(.Theme.light), :has(.Theme.dark)) {${e}}`, i;
+			n[28] !== I || n[29] !== t.contrast || n[30] !== t.primaryColor ? (i = _(t.primaryColor, !0, t.contrast, I), n[28] = I, n[29] = t.contrast, n[30] = t.primaryColor, n[31] = i) : i = n[31];
+			let a = `@media (prefers-color-scheme: dark) {:root:not(:has(.Theme.light), :has(.Theme.dark)) {${i}}}`, o;
+			n[32] !== I || n[33] !== t.contrast || n[34] !== t.primaryColor ? (o = _(t.primaryColor, !1, t.contrast, I), n[32] = I, n[33] = t.contrast, n[34] = t.primaryColor, n[35] = o) : o = n[35];
+			let s = `:root:has(.Theme.light) {${o}}`, c;
+			n[36] !== I || n[37] !== t.contrast || n[38] !== t.primaryColor ? (c = _(t.primaryColor, !0, t.contrast, I), n[36] = I, n[37] = t.contrast, n[38] = t.primaryColor, n[39] = c) : c = n[39];
+			let l = `:root:has(.Theme.dark) {${c}}`, u;
+			n[40] !== r || n[41] !== a || n[42] !== s || n[43] !== l ? (u = [
+				r,
+				a,
+				s,
+				l
+			], n[40] = r, n[41] = a, n[42] = s, n[43] = l, n[44] = u) : u = n[44], L = u.join("\n");
+			break bb0;
+		}
+		let e;
+		n[45] !== I || n[46] !== t.contrast || n[47] !== t.primaryColor ? (e = _(t.primaryColor, !1, t.contrast, I), n[45] = I, n[46] = t.contrast, n[47] = t.primaryColor, n[48] = e) : e = n[48];
+		let r = `:root:not(:has(.Theme.light), :has(.Theme.dark)) .Theme#${b} {${e}}`, i;
+		n[49] !== I || n[50] !== t.contrast || n[51] !== t.primaryColor ? (i = _(t.primaryColor, !0, t.contrast, I), n[49] = I, n[50] = t.contrast, n[51] = t.primaryColor, n[52] = i) : i = n[52];
+		let a = `@media (prefers-color-scheme: dark) {:root:not(:has(.Theme.light), :has(.Theme.dark)) .Theme#${b} {${i}}}`, o;
+		n[53] !== I || n[54] !== t.contrast || n[55] !== t.primaryColor ? (o = _(t.primaryColor, !1, t.contrast, I), n[53] = I, n[54] = t.contrast, n[55] = t.primaryColor, n[56] = o) : o = n[56];
+		let s = `:root:has(.Theme.light) .Theme#${b} {${o}}`, c;
+		n[57] !== I || n[58] !== t.contrast || n[59] !== t.primaryColor ? (c = _(t.primaryColor, !0, t.contrast, I), n[57] = I, n[58] = t.contrast, n[59] = t.primaryColor, n[60] = c) : c = n[60];
+		let l = `:root:has(.Theme.dark) .Theme#${b} {${c}}`, u;
+		n[61] !== r || n[62] !== a || n[63] !== s || n[64] !== l ? (u = [
+			r,
+			a,
+			s,
+			l
+		], n[61] = r, n[62] = a, n[63] = s, n[64] = l, n[65] = u) : u = n[65], L = u.join("\n");
+	}
+	let R = L, z = !T && ne === "light", B = !T && ne === "dark", V = !s && !T, H = !T || c, U;
+	n[66] !== z || n[67] !== B || n[68] !== V || n[69] !== H ? (U = {
+		Theme: !0,
+		light: z,
+		dark: B,
+		base: V,
+		scrollable: H
+	}, n[66] = z, n[67] = B, n[68] = V, n[69] = H, n[70] = U) : U = n[70];
+	let W = U, G, K;
+	n[71] === R ? (G = n[72], K = n[73]) : (G = () => {
+		x.current && (x.current.innerHTML = R);
+	}, K = [R], n[71] = R, n[72] = G, n[73] = K), u(G, K);
+	let q;
+	n[74] !== s || n[75] !== T || n[76] !== b ? (q = !s && !T && /* @__PURE__ */ m("style", {
+		href: `theme_base_${b}`,
+		precedence: "theme_base",
+		children: "body {margin: 0px}"
+	}), n[74] = s, n[75] = T, n[76] = b, n[77] = q) : q = n[77];
+	let J = `theme_${b}`, Y;
+	n[78] !== R || n[79] !== J ? (Y = /* @__PURE__ */ m("style", {
+		ref: x,
+		href: J,
+		precedence: "theme",
+		children: R
+	}), n[78] = R, n[79] = J, n[80] = Y) : Y = n[80];
+	let X;
+	n[81] !== W || n[82] !== i ? (X = o(W, i), n[81] = W, n[82] = i, n[83] = X) : X = n[83];
+	let Z;
+	n[84] === T ? Z = n[85] : (Z = !T && /* @__PURE__ */ h(p, { children: [
+		/* @__PURE__ */ m("div", {
+			ref: ae,
+			className: "portals toolips-container"
+		}),
+		/* @__PURE__ */ m("div", {
+			ref: se,
+			className: "portals dialogs-container"
+		}),
+		/* @__PURE__ */ m("div", {
+			ref: le,
+			className: "portals popovers-container"
+		})
+	] }), n[84] = T, n[85] = Z);
+	let Q;
+	n[86] !== r || n[87] !== b || n[88] !== g || n[89] !== X || n[90] !== Z ? (Q = /* @__PURE__ */ h("div", {
+		ref: re,
+		id: b,
+		className: X,
+		style: g,
+		children: [r, Z]
+	}), n[86] = r, n[87] = b, n[88] = g, n[89] = X, n[90] = Z, n[91] = Q) : Q = n[91];
+	let $;
+	return n[92] !== N || n[93] !== q || n[94] !== Y || n[95] !== Q ? ($ = /* @__PURE__ */ h(v, {
+		value: N,
+		children: [
+			q,
+			Y,
+			Q
+		]
+	}), n[92] = N, n[93] = q, n[94] = Y, n[95] = Q, n[96] = $) : $ = n[96], $;
+}
+function te(e) {
+	return e;
+}
+//#endregion
+export { y as default, ee as useTheme };

package/dist/components/Theme/index.cjs

@@ -0,0 +1 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("./Theme.cjs");exports.default=e.default;

package/dist/components/Theme/index.d.ts

@@ -0,0 +1 @@
+export { default, type ThemeProps } from './Theme';

package/dist/components/Theme/index.js

@@ -0,0 +1 @@
+export { default } from "./Theme.js";