react-material-design 0.5.0 → 0.5.1

package/dist/components/Menubar/MenuSection.cjs

@@ -0,0 +1 @@
+const e=require("../misc/OrderedCollection/index.cjs");let t=require("react/compiler-runtime"),n=require("react"),r=require("react/jsx-runtime");function i(i){let a=(0,t.c)(7),o=(0,n.useId)(),s;a[0]!==o||a[1]!==i.children||a[2]!==i.label?(s={id:o,label:i.label,children:i.children},a[0]=o,a[1]=i.children,a[2]=i.label,a[3]=s):s=a[3];let c=s,l;return a[4]!==c||a[5]!==o?(l=(0,r.jsx)(e.OrderedCollectionChild,{name:`MenuSection`,id:o,content:c}),a[4]=c,a[5]=o,a[6]=l):l=a[6],l}exports.default=i;

package/dist/components/Menubar/MenuSection.js

@@ -0,0 +1,21 @@
+import { OrderedCollectionChild as e } from "../misc/OrderedCollection/index.js";
+import { c as t } from "react/compiler-runtime";
+import { useId as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region lib/components/Menubar/MenuSection.tsx
+function i(i) {
+	let a = t(7), o = n(), s;
+	a[0] !== o || a[1] !== i.children || a[2] !== i.label ? (s = {
+		id: o,
+		label: i.label,
+		children: i.children
+	}, a[0] = o, a[1] = i.children, a[2] = i.label, a[3] = s) : s = a[3];
+	let c = s, l;
+	return a[4] !== c || a[5] !== o ? (l = /* @__PURE__ */ r(e, {
+		name: "MenuSection",
+		id: o,
+		content: c
+	}), a[4] = c, a[5] = o, a[6] = l) : l = a[6], l;
+}
+//#endregion
+export { i as default };

package/dist/components/Menubar/index.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../misc/OrderedCollection/index.cjs"),t=require("./render.cjs");let n=require("react/compiler-runtime"),r=require("react/jsx-runtime");function i(i){let a=(0,n.c)(4);if(e.useOrderedCollection()){let t;return a[0]===i?t=a[1]:(t=(0,r.jsx)(e.OrderedCollectionChild,{name:`Menubar`,content:i}),a[0]=i,a[1]=t),t}let o;return a[2]===i?o=a[3]:(o=(0,r.jsx)(t.default,{...i}),a[2]=i,a[3]=o),o}exports.default=i;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require("../misc/OrderedCollection/index.cjs"),t=require("./render.cjs"),n=require("./MenuSection.cjs");let r=require("react/compiler-runtime"),i=require("react/jsx-runtime");function a(n){let a=(0,r.c)(4);if(e.useOrderedCollection()){let t;return a[0]===n?t=a[1]:(t=(0,i.jsx)(e.OrderedCollectionChild,{name:`Menubar`,content:n}),a[0]=n,a[1]=t),t}let o;return a[2]===n?o=a[3]:(o=(0,i.jsx)(t.default,{...n}),a[2]=n,a[3]=o),o}exports.MenuSection=n.default,exports.default=a;

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

@@ -1,2 +1,3 @@
 import { PropsWithChildren } from 'react';
+export { default as MenuSection, type MenuSectionProps } from './MenuSection';
 export default function Menubar(props: PropsWithChildren): import('react').JSX.Element;

package/dist/components/Menubar/index.js

@@ -1,19 +1,20 @@
 import { OrderedCollectionChild as e, useOrderedCollection as t } from "../misc/OrderedCollection/index.js";
 import n from "./render.js";
-import { c as r } from "react/compiler-runtime";
-import { jsx as i } from "react/jsx-runtime";
+import r from "./MenuSection.js";
+import { c as i } from "react/compiler-runtime";
+import { jsx as a } from "react/jsx-runtime";
 //#region lib/components/Menubar/index.tsx
-function a(a) {
-	let o = r(4);
+function o(r) {
+	let o = i(4);
 	if (t()) {
 		let t;
-		return o[0] === a ? t = o[1] : (t = /* @__PURE__ */ i(e, {
+		return o[0] === r ? t = o[1] : (t = /* @__PURE__ */ a(e, {
 			name: "Menubar",
-			content: a
-		}), o[0] = a, o[1] = t), t;
+			content: r
+		}), o[0] = r, o[1] = t), t;
 	}
 	let s;
-	return o[2] === a ? s = o[3] : (s = /* @__PURE__ */ i(n, { ...a }), o[2] = a, o[3] = s), s;
+	return o[2] === r ? s = o[3] : (s = /* @__PURE__ */ a(n, { ...r }), o[2] = r, o[3] = s), s;
 }
 //#endregion
-export { a as default };
+export { r as MenuSection, o as default };

package/dist/layouts/Panes/index.d.ts

@@ -1,2 +1,4 @@
 export { default } from './Panes';
 export { default as Pane } from './Pane';
+export type { PanesProps } from './Panes';
+export type { PaneProps } from './Pane';

package/dist/layouts/Tabs/Tab.cjs

@@ -0,0 +1 @@
+const e=require("../../components/Icon/Icon.cjs"),t=require("../../components/misc/OrderedCollection/index.cjs"),n=require("./Tabs.cjs");let r=require("react/compiler-runtime"),i=require("react"),a=require("react/jsx-runtime");function o(o){let s=(0,r.c)(21),{label:c,icon:l}=o,u=(0,i.useContext)(n.TabsContext),d;s[0]!==u||s[1]!==c||s[2]!==o.id?(d=typeof c==`function`?c(u===o.id):c,s[0]=u,s[1]=c,s[2]=o.id,s[3]=d):d=s[3];let f=d,p;s[4]!==u||s[5]!==l||s[6]!==o.id?(p=typeof l==`function`?l(u===o.id):l,s[4]=u,s[5]=l,s[6]=o.id,s[7]=p):p=s[7];let m=p,h;s[8]===m?h=s[9]:(h=e.convertIconDefinition(m),s[8]=m,s[9]=h);let g=h,_;s[10]!==g||s[11]!==f||s[12]!==o.blockContentPadding||s[13]!==o.children||s[14]!==o.contentPadding||s[15]!==o.id||s[16]!==o.inlineContentPadding?(_={id:o.id,label:f,icon:g,inlineContentPadding:o.inlineContentPadding,blockContentPadding:o.blockContentPadding,contentPadding:o.contentPadding,children:o.children},s[10]=g,s[11]=f,s[12]=o.blockContentPadding,s[13]=o.children,s[14]=o.contentPadding,s[15]=o.id,s[16]=o.inlineContentPadding,s[17]=_):_=s[17];let v=_,y;return s[18]!==v||s[19]!==o.id?(y=(0,a.jsx)(t.OrderedCollectionChild,{name:`Tab`,id:o.id,content:v}),s[18]=v,s[19]=o.id,s[20]=y):y=s[20],y}exports.default=o;

package/dist/layouts/Tabs/Tab.js

@@ -0,0 +1,33 @@
+import { convertIconDefinition as e } from "../../components/Icon/Icon.js";
+import { OrderedCollectionChild as t } from "../../components/misc/OrderedCollection/index.js";
+import { TabsContext as n } from "./Tabs.js";
+import { c as r } from "react/compiler-runtime";
+import { useContext as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region lib/layouts/Tabs/Tab.tsx
+function o(o) {
+	let s = r(21), { label: c, icon: l } = o, u = i(n), d;
+	s[0] !== u || s[1] !== c || s[2] !== o.id ? (d = typeof c == "function" ? c(u === o.id) : c, s[0] = u, s[1] = c, s[2] = o.id, s[3] = d) : d = s[3];
+	let f = d, p;
+	s[4] !== u || s[5] !== l || s[6] !== o.id ? (p = typeof l == "function" ? l(u === o.id) : l, s[4] = u, s[5] = l, s[6] = o.id, s[7] = p) : p = s[7];
+	let m = p, h;
+	s[8] === m ? h = s[9] : (h = e(m), s[8] = m, s[9] = h);
+	let g = h, _;
+	s[10] !== g || s[11] !== f || s[12] !== o.blockContentPadding || s[13] !== o.children || s[14] !== o.contentPadding || s[15] !== o.id || s[16] !== o.inlineContentPadding ? (_ = {
+		id: o.id,
+		label: f,
+		icon: g,
+		inlineContentPadding: o.inlineContentPadding,
+		blockContentPadding: o.blockContentPadding,
+		contentPadding: o.contentPadding,
+		children: o.children
+	}, s[10] = g, s[11] = f, s[12] = o.blockContentPadding, s[13] = o.children, s[14] = o.contentPadding, s[15] = o.id, s[16] = o.inlineContentPadding, s[17] = _) : _ = s[17];
+	let v = _, y;
+	return s[18] !== v || s[19] !== o.id ? (y = /* @__PURE__ */ a(t, {
+		name: "Tab",
+		id: o.id,
+		content: v
+	}), s[18] = v, s[19] = o.id, s[20] = y) : y = s[20], y;
+}
+//#endregion
+export { o as default };

package/dist/layouts/Tabs/Tabs.cjs

@@ -0,0 +1 @@
+require('./style.css');const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../components/Icon/Icon.cjs"),n=require("../../utils/index.cjs"),r=require("../../utils/hooks.cjs"),i=require("../../components/misc/OrderedCollection/index.cjs"),a=require("../../components/misc/StateLayer/index.cjs"),o=require("../../components/misc/Transitionable/index.cjs");;/* empty css             */let s=require("classnames");s=e.__toESM(s,1);let c=require("react"),l=require("react/jsx-runtime"),u=require("react-dom-event-hooks");var d=(0,c.createContext)(void 0);function f(e){let{variant:f=`primary`,defaultActiveTab:p,activeTab:m,onActiveTabChange:h}=e,[g,_]=(0,c.useState)([]),v=(0,c.useMemo)(()=>g.some(e=>!!e.label),[g]),y=(0,c.useMemo)(()=>g.some(e=>!!e.icon),[g]),[b,x]=(0,c.useState)(p??m??``),S=(0,c.useMemo)(()=>{let e=m??b;return g.find(t=>t.id===e)?e:p},[m,b,p,g]),{saveRef:C,ref:w}=(0,u.useMultiElementRef)(),T=(0,c.useRef)(null),E=(0,c.useRef)(null),D=(0,c.useRef)(null),O=(0,c.useCallback)(e=>{x(t=>t||(e.at(0)?.id??``)),_(e)},[]),k=(0,c.useCallback)((e=!1)=>{let t=w.current.get(S??``),r,i;D.current!==null&&(D.current=cancelAnimationFrame(D.current)??null),D.current=requestAnimationFrame(()=>{t&&T.current&&(r=T.current.getBoundingClientRect(),i=f===`primary`?n.getRelativeRect(t,r):n.getRelativeRect(t.parentElement,r),e&&E.current?.classList.add(`immediate`),E.current?.style.setProperty(`--position-left`,`${i.left}px`),E.current?.style.setProperty(`--position-right`,`${r.width-i.right}px`),e&&setTimeout(()=>E.current?.classList.remove(`immediate`)))})},[S,w,f]),{saveRef:A}=(0,u.useResizeObserver)(()=>k(!0)),j=(0,c.useCallback)(e=>{let t=e.currentTarget.dataset.id;t&&(m||x(t),h?.(t))},[m,h]);return r.useIsomorphicLayoutEffect(()=>{k()},[S,g.length,k]),(0,l.jsx)(d,{value:S,children:(0,l.jsxs)(`div`,{className:(0,s.default)(`Tabs`,f),children:[(0,l.jsx)(`nav`,{ref:A,className:(0,s.default)(`navigation`,{labels:v,icons:y}),children:(0,l.jsxs)(`div`,{ref:T,className:`container`,children:[g.map(e=>(0,l.jsxs)(`button`,{className:(0,s.default)(`button`,{active:e.id===S}),"data-id":e.id,onClick:j,children:[(0,l.jsx)(a.default,{}),(0,l.jsxs)(`div`,{ref:C,className:`content`,"data-key":e.id,children:[(0,l.jsx)(t.IconProvider,{size:24,fill:e.id===S,children:(0,l.jsx)(o.default,{value:e.icon,className:`icon`})}),(0,l.jsx)(o.default,{value:e.label,className:`label`})]})]},e.id)),(0,l.jsx)(`div`,{ref:E,className:`indicator`})]})}),(0,l.jsx)(`div`,{className:`activities`,children:g.map(e=>(0,l.jsx)(c.Activity,{name:`Tab_`+e.id,mode:e.id===S?`visible`:`hidden`,children:(0,l.jsx)(`div`,{className:(0,s.default)(`content`,{"inline-padding":e.inlineContentPadding??e.contentPadding??!1,"block-padding":e.blockContentPadding??e.contentPadding??!1}),children:e.children})},e.id))}),(0,l.jsx)(i.default,{name:`Tabs`,childName:`Tab`,onChildrenChange:O,compareChild:n.shallowEqual,children:e.children})]})})}exports.TabsContext=d,exports.default=f;

package/dist/layouts/Tabs/Tabs.js

@@ -0,0 +1,110 @@
+import { IconProvider as e } from "../../components/Icon/Icon.js";
+import { getRelativeRect as t, shallowEqual as n } from "../../utils/index.js";
+import { useIsomorphicLayoutEffect as r } from "../../utils/hooks.js";
+import i from "../../components/misc/OrderedCollection/index.js";
+import a from "../../components/misc/StateLayer/index.js";
+import o from "../../components/misc/Transitionable/index.js";
+import './style.css';/* empty css           */
+import s from "classnames";
+import { Activity as c, createContext as l, useCallback as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useMultiElementRef as g, useResizeObserver as _ } from "react-dom-event-hooks";
+//#region lib/layouts/Tabs/Tabs.tsx
+var v = l(void 0);
+function y(l) {
+	let { variant: y = "primary", defaultActiveTab: b, activeTab: x, onActiveTabChange: S } = l, [C, w] = p([]), T = d(() => C.some((e) => !!e.label), [C]), E = d(() => C.some((e) => !!e.icon), [C]), [D, O] = p(b ?? x ?? ""), k = d(() => {
+		let e = x ?? D;
+		return C.find((t) => t.id === e) ? e : b;
+	}, [
+		x,
+		D,
+		b,
+		C
+	]), { saveRef: A, ref: j } = g(), M = f(null), N = f(null), P = f(null), F = u((e) => {
+		O((t) => t || (e.at(0)?.id ?? "")), w(e);
+	}, []), I = u((e = !1) => {
+		let n = j.current.get(k ?? ""), r, i;
+		P.current !== null && (P.current = cancelAnimationFrame(P.current) ?? null), P.current = requestAnimationFrame(() => {
+			n && M.current && (r = M.current.getBoundingClientRect(), i = t(y === "primary" ? n : n.parentElement, r), e && N.current?.classList.add("immediate"), N.current?.style.setProperty("--position-left", `${i.left}px`), N.current?.style.setProperty("--position-right", `${r.width - i.right}px`), e && setTimeout(() => N.current?.classList.remove("immediate")));
+		});
+	}, [
+		k,
+		j,
+		y
+	]), { saveRef: L } = _(() => I(!0)), R = u((e) => {
+		let t = e.currentTarget.dataset.id;
+		t && (x || O(t), S?.(t));
+	}, [x, S]);
+	return r(() => {
+		I();
+	}, [
+		k,
+		C.length,
+		I
+	]), /* @__PURE__ */ m(v, {
+		value: k,
+		children: /* @__PURE__ */ h("div", {
+			className: s("Tabs", y),
+			children: [
+				/* @__PURE__ */ m("nav", {
+					ref: L,
+					className: s("navigation", {
+						labels: T,
+						icons: E
+					}),
+					children: /* @__PURE__ */ h("div", {
+						ref: M,
+						className: "container",
+						children: [C.map((t) => /* @__PURE__ */ h("button", {
+							className: s("button", { active: t.id === k }),
+							"data-id": t.id,
+							onClick: R,
+							children: [/* @__PURE__ */ m(a, {}), /* @__PURE__ */ h("div", {
+								ref: A,
+								className: "content",
+								"data-key": t.id,
+								children: [/* @__PURE__ */ m(e, {
+									size: 24,
+									fill: t.id === k,
+									children: /* @__PURE__ */ m(o, {
+										value: t.icon,
+										className: "icon"
+									})
+								}), /* @__PURE__ */ m(o, {
+									value: t.label,
+									className: "label"
+								})]
+							})]
+						}, t.id)), /* @__PURE__ */ m("div", {
+							ref: N,
+							className: "indicator"
+						})]
+					})
+				}),
+				/* @__PURE__ */ m("div", {
+					className: "activities",
+					children: C.map((e) => /* @__PURE__ */ m(c, {
+						name: "Tab_" + e.id,
+						mode: e.id === k ? "visible" : "hidden",
+						children: /* @__PURE__ */ m("div", {
+							className: s("content", {
+								"inline-padding": e.inlineContentPadding ?? e.contentPadding ?? !1,
+								"block-padding": e.blockContentPadding ?? e.contentPadding ?? !1
+							}),
+							children: e.children
+						})
+					}, e.id))
+				}),
+				/* @__PURE__ */ m(i, {
+					name: "Tabs",
+					childName: "Tab",
+					onChildrenChange: F,
+					compareChild: n,
+					children: l.children
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { v as TabsContext, y as default };

package/dist/layouts/Tabs/index.cjs

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

package/dist/layouts/Tabs/index.d.ts

@@ -1 +1,4 @@
-export {};
+export { default } from './Tabs';
+export { default as Tab } from './Tab';
+export type { TabsProps } from './Tabs';
+export type { TabProps } from './Tab';

package/dist/layouts/Tabs/index.js

@@ -0,0 +1,3 @@
+import e from "./Tabs.js";
+import t from "./Tab.js";
+export { t as Tab, e as default };

package/dist/layouts/Tabs/style.css

@@ -0,0 +1 @@
+.Tabs{flex-direction:column;width:100%;height:100%;display:flex}.Tabs>.navigation{width:100%;overflow-x:auto}.Tabs>.navigation>.container{flex-flow:row;width:max-content;min-width:100%;height:100%;display:flex;position:relative}.Tabs>.navigation>.container>.button{flex:1 0 max-content;padding:0;cursor:pointer;background-color:#0000;border:none;border-radius:0;outline:none;justify-content:center;align-items:center;margin:0;padding-inline:8px;display:flex}.Tabs>.navigation>.container>.button>.content{display:flex}.Tabs>.navigation>.container>.button>.content>.icon,.Tabs>.navigation>.container>.button>.content>.label{transition:color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing)}.Tabs>.navigation>.container>.button:focus-visible>.StateLayer{border-radius:var(--md-sys-shape-corner-large)}.Tabs>.navigation>.container>.button>.StateLayer{outline-offset:calc(-1 * var(--md-comp-state-focus-indicator-thickness))}.Tabs>.navigation>.container>.indicator{position:absolute;bottom:0}.Tabs>.navigation>.container>.indicator:not(.immediate){transition:inset var(--md-sys-motion-spring-expressive-default-spatial-duration) var(--md-sys-motion-spring-expressive-default-spatial-easing), background-color var(--md-sys-motion-spring-expressive-fast-effects-duration) var(--md-sys-motion-spring-expressive-fast-effects-easing)}.Tabs>.activities{box-sizing:border-box;scrollbar-color:var(--md-sys-color-surface-variant) var(--md-sys-color-surface);flex:1;overflow:auto}.Tabs>.activities>.content{box-sizing:border-box;width:100%;height:100%}.Tabs>.activities>.content.inline-padding{padding-inline:var(--md-sys-measurement-space200)}.Tabs>.activities>.content.block-padding{padding-block:var(--md-sys-measurement-space200)}.Tabs.primary>.navigation{height:var(--md-comp-primary-navigation-tab-container-height);min-height:var(--md-comp-primary-navigation-tab-container-height);background-color:var(--md-comp-primary-navigation-tab-container-color)}.Tabs.primary>.navigation:is(.labels,.icons){height:var(--md-comp-primary-navigation-tab-with-icon-and-label-text-container-height)}.Tabs.primary>.navigation>.container>.button{--md-comp-state-focus-indicator-color:var(--md-comp-primary-navigation-tab-focus-indicator-color);--md-comp-state-focus-indicator-thickness:var(--md-comp-primary-navigation-tab-focus-indicator-thickness);--md-comp-state-focus-indicator-outer-offset:var(--md-comp-primary-navigation-tab-focus-indicator-outline-offset)}.Tabs.primary>.navigation>.container>.button.active{--md-comp-state-hover-state-layer-opacity:var(--md-comp-primary-navigation-tab-active-hover-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-primary-navigation-tab-active-focus-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-primary-navigation-tab-active-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-primary-navigation-tab-active-hover-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-primary-navigation-tab-active-focus-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-primary-navigation-tab-active-pressed-state-layer-color)}.Tabs.primary>.navigation>.container>.button.active>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-active-label-text-color)}.Tabs.primary>.navigation>.container>.button.active>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-active-icon-color)}.Tabs.primary>.navigation>.container>.button.active:hover>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-active-hover-label-text-color)}.Tabs.primary>.navigation>.container>.button.active:hover>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-active-hover-icon-color)}.Tabs.primary>.navigation>.container>.button:not(.active){--md-comp-state-hover-state-layer-opacity:var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-primary-navigation-tab-inactive-hover-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-primary-navigation-tab-inactive-focus-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-primary-navigation-tab-inactive-pressed-state-layer-color)}.Tabs.primary>.navigation>.container>.button:not(.active)>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-inactive-label-text-color)}.Tabs.primary>.navigation>.container>.button:not(.active)>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-inactive-icon-color)}.Tabs.primary>.navigation>.container>.button:not(.active):hover>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-inactive-hover-label-text-color)}.Tabs.primary>.navigation>.container>.button:not(.active):hover>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-inactive-hover-icon-color)}.Tabs.primary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.label{color:var(--md-comp-primary-navigation-tab-with-label-text-inactive-pressed-label-text-color)}.Tabs.primary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.icon{color:var(--md-comp-primary-navigation-tab-with-icon-inactive-pressed-icon-color)}.Tabs.primary>.navigation>.container>.button>.content{flex-direction:column;align-items:center}.Tabs.primary>.navigation>.container>.button>.content>.label{font-family:var(--md-comp-primary-navigation-tab-with-label-text-label-text-font);font-weight:var(--md-comp-primary-navigation-tab-with-label-text-label-text-weight);font-size:var(--md-comp-primary-navigation-tab-with-label-text-label-text-size);letter-spacing:var(--md-comp-primary-navigation-tab-with-label-text-label-text-tracking);line-height:var(--md-comp-primary-navigation-tab-with-label-text-label-text-line-height);font-variation-settings:"wght" var(--md-comp-primary-navigation-tab-with-label-text-label-text-wght), "GRAD" var(--md-comp-primary-navigation-tab-with-label-text-label-text-grad), "wdth" var(--md-comp-primary-navigation-tab-with-label-text-label-text-wdth), "ROND" var(--md-comp-primary-navigation-tab-with-label-text-label-text-rond), "opsz" var(--md-comp-primary-navigation-tab-with-label-text-label-text-opsz), "CRSV" var(--md-comp-primary-navigation-tab-with-label-text-label-text-crsv), "slnt" var(--md-comp-primary-navigation-tab-with-label-text-label-text-slnt), "FILL" var(--md-comp-primary-navigation-tab-with-label-text-label-text-fill), "HEXP" var(--md-comp-primary-navigation-tab-with-label-text-label-text-hexp)}.Tabs.primary>.navigation>.container>.indicator{height:var(--md-comp-primary-navigation-tab-active-indicator-height);background-color:var(--md-comp-primary-navigation-tab-active-indicator-color);border-radius:var(--md-comp-primary-navigation-tab-active-indicator-height);left:calc(var(--position-left) + 2px);right:calc(var(--position-right) + 2px);border-bottom-right-radius:0;border-bottom-left-radius:0}.Tabs.secondary>.navigation{height:var(--md-comp-secondary-navigation-tab-container-height);min-height:var(--md-comp-secondary-navigation-tab-container-height);background-color:var(--md-comp-secondary-navigation-tab-container-color)}.Tabs.secondary>.navigation>.container>.button{--md-comp-state-hover-state-layer-opacity:var(--md-comp-secondary-navigation-tab-hover-state-layer-opacity);--md-comp-state-focused-state-layer-opacity:var(--md-comp-secondary-navigation-tab-focus-state-layer-opacity);--md-comp-state-pressed-state-layer-opacity:var(--md-comp-secondary-navigation-tab-pressed-state-layer-opacity);--md-comp-state-hover-state-layer-color:var(--md-comp-secondary-navigation-tab-hover-state-layer-color);--md-comp-state-focused-state-layer-color:var(--md-comp-secondary-navigation-tab-focus-state-layer-color);--md-comp-state-pressed-state-layer-color:var(--md-comp-secondary-navigation-tab-pressed-state-layer-color);--md-comp-state-focus-indicator-color:var(--md-comp-secondary-navigation-tab-focus-indicator-color);--md-comp-state-focus-indicator-thickness:var(--md-comp-secondary-navigation-tab-focus-indicator-thickness);--md-comp-state-focus-indicator-outer-offset:var(--md-comp-secondary-navigation-tab-focus-indicator-outline-offset)}.Tabs.secondary>.navigation>.container>.button.active>.content>.label{color:var(--md-comp-secondary-navigation-tab-active-label-text-color)}.Tabs.secondary>.navigation>.container>.button.active>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-active-icon-color)}.Tabs.secondary>.navigation>.container>.button.active:hover>.content>.label{color:var(--md-comp-secondary-navigation-tab-hover-label-text-color)}.Tabs.secondary>.navigation>.container>.button.active:hover>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-hover-icon-color)}.Tabs.secondary>.navigation>.container>.button:not(.active)>.content>.label{color:var(--md-comp-secondary-navigation-tab-inactive-label-text-color)}.Tabs.secondary>.navigation>.container>.button:not(.active)>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-inactive-icon-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):hover>.content>.label{color:var(--md-comp-secondary-navigation-tab-hover-label-text-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):hover>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-hover-icon-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.label{color:var(--md-comp-secondary-navigation-tab-pressed-label-text-color)}.Tabs.secondary>.navigation>.container>.button:not(.active):active:not(.disabled,.dragged)>.content>.icon{color:var(--md-comp-secondary-navigation-tab-with-icon-pressed-icon-color)}.Tabs.secondary>.navigation>.container>.button>.content{flex-direction:row;align-items:center;gap:8px}.Tabs.secondary>.navigation>.container>.button>.content>.label{font-family:var(--md-comp-secondary-navigation-tab-label-text-font);font-weight:var(--md-comp-secondary-navigation-tab-label-text-weight);font-size:var(--md-comp-secondary-navigation-tab-label-text-size);letter-spacing:var(--md-comp-secondary-navigation-tab-label-text-tracking);line-height:var(--md-comp-secondary-navigation-tab-label-text-line-height);font-variation-settings:"wght" var(--md-comp-secondary-navigation-tab-label-text-wght), "GRAD" var(--md-comp-secondary-navigation-tab-label-text-grad), "wdth" var(--md-comp-secondary-navigation-tab-label-text-wdth), "ROND" var(--md-comp-secondary-navigation-tab-label-text-rond), "opsz" var(--md-comp-secondary-navigation-tab-label-text-opsz), "CRSV" var(--md-comp-secondary-navigation-tab-label-text-crsv), "slnt" var(--md-comp-secondary-navigation-tab-label-text-slnt), "FILL" var(--md-comp-secondary-navigation-tab-label-text-fill), "HEXP" var(--md-comp-secondary-navigation-tab-label-text-hexp)}.Tabs.secondary>.navigation>.container>.indicator{height:var(--md-comp-secondary-navigation-tab-active-indicator-height);background-color:var(--md-comp-secondary-navigation-tab-active-indicator-color);left:var(--position-left);right:var(--position-right)}

package/dist/utils/index.cjs

@@ -1 +1 @@
-function e(){return typeof window<`u`}var t=(e,t,n)=>e<t?t:e>n?n:e,n=(e,n,r,i,a)=>t((e-n)*(a-i)/(r-n)+i,i,a);function r(e,t){let n=/\b\w+\b/g,r=0;for(;n.exec(e)!==null;)if(r++,r>=t)return e.slice(0,n.lastIndex);return e}async function i(e,t){return new Promise(n=>{let r=null,i=a=>{t(a)&&(e?.removeEventListener(`animationend`,i),r&&clearInterval(r),n())};if(!e||window.getComputedStyle(e).animationName.includes(`none`))return n();r=setInterval(()=>{window.getComputedStyle(e).animationName.includes(`none`)&&(r&&clearInterval(r),n())},100),e.addEventListener(`animationend`,i)})}async function a(e,t){return i(e,n=>n.target===e?typeof t==`string`?n.animationName===t:t(n.animationName):!1)}function o(e,t,n=0){if(e==null)return n;if(typeof e==`string`){if(e.endsWith(`%`))return parseFloat(e)/100*t;if(e.endsWith(`px`))return parseFloat(e)}return Number(e)||n}function s(e,t,n){if(typeof t==`string`){if(t.endsWith(`%`))return`${e/n*100}%`;if(t.endsWith(`px`))return`${e}px`}return e}function c(e,t,n,r){let i,a;if(!e)return r;if(e.computedStyleMap?(a=e.computedStyleMap().get(t),a instanceof CSSUnparsedValue&&(a=CSSNumericValue.parse(a.toString()))):(i=/^(?<value>\d+)(?<unit>[a-zA-Z]+)?$/.exec(window.getComputedStyle(e).getPropertyValue(t)||`0`))!==null&&(a={value:parseFloat(i.groups?.value??``),unit:i.groups?.unit??``}),a&&`value`in a&&`unit`in a&&typeof a.value==`number`&&typeof a.unit==`string`){if([`ms`,`s`].includes(a.unit.toLowerCase())){if(n?.toLowerCase()===`ms`&&a.unit.toLowerCase()===`s`)return a.value*1e3;if(n?.toLowerCase()===`s`&&a.unit.toLowerCase()===`ms`)return a.value/1e3}return a.value}return r}function l(e,t){return c(e,`--md-comp-${t}`)??0}function u(e,t){let n,r;if(Object.is(e,t))return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||(n=Object.keys(e),r=Object.keys(t),n.length!==r.length))return!1;for(let r=0;r<n.length;r++)if(!Object.prototype.hasOwnProperty.call(t,n[r])||!Object.is(e[n[r]],t[n[r]]))return!1;return!0}function d(e){let t=[],n=e.parentElement;for(;n;){let e=window.getComputedStyle(n);/(auto|scroll|overlay)/.test(e.overflow+e.overflowY+e.overflowX)&&t.push(n),n=n.parentElement}return t}exports.clamp=t,exports.formatSizeFromPx=s,exports.getComponentTokenValue=l,exports.getMaxWords=r,exports.getPropertyValue=c,exports.getScrollParents=d,exports.isBrowser=e,exports.mapRange=n,exports.parseSizeToPx=o,exports.shallowEqual=u,exports.waitAnimationEndEvent=i,exports.waitAnimationNameEndEvent=a;
+function e(){return typeof window<`u`}var t=(e,t,n)=>e<t?t:e>n?n:e,n=(e,n,r,i,a)=>t((e-n)*(a-i)/(r-n)+i,i,a);function r(e,t){let n=/\b\w+\b/g,r=0;for(;n.exec(e)!==null;)if(r++,r>=t)return e.slice(0,n.lastIndex);return e}async function i(e,t){return new Promise(n=>{let r=null,i=a=>{t(a)&&(e?.removeEventListener(`animationend`,i),r&&clearInterval(r),n())};if(!e||window.getComputedStyle(e).animationName.includes(`none`))return n();r=setInterval(()=>{window.getComputedStyle(e).animationName.includes(`none`)&&(r&&clearInterval(r),n())},100),e.addEventListener(`animationend`,i)})}async function a(e,t){return i(e,n=>n.target===e?typeof t==`string`?n.animationName===t:t(n.animationName):!1)}function o(e,t,n=0){if(e==null)return n;if(typeof e==`string`){if(e.endsWith(`%`))return parseFloat(e)/100*t;if(e.endsWith(`px`))return parseFloat(e)}return Number(e)||n}function s(e,t,n){if(typeof t==`string`){if(t.endsWith(`%`))return`${e/n*100}%`;if(t.endsWith(`px`))return`${e}px`}return e}function c(e,t,n,r){let i,a;if(!e)return r;if(e.computedStyleMap?(a=e.computedStyleMap().get(t),a instanceof CSSUnparsedValue&&(a=CSSNumericValue.parse(a.toString()))):(i=/^(?<value>\d+)(?<unit>[a-zA-Z]+)?$/.exec(window.getComputedStyle(e).getPropertyValue(t)||`0`))!==null&&(a={value:parseFloat(i.groups?.value??``),unit:i.groups?.unit??``}),a&&`value`in a&&`unit`in a&&typeof a.value==`number`&&typeof a.unit==`string`){if([`ms`,`s`].includes(a.unit.toLowerCase())){if(n?.toLowerCase()===`ms`&&a.unit.toLowerCase()===`s`)return a.value*1e3;if(n?.toLowerCase()===`s`&&a.unit.toLowerCase()===`ms`)return a.value/1e3}return a.value}return r}function l(e,t){return c(e,`--md-comp-${t}`)??0}function u(e,t){let n=e instanceof HTMLElement?e.getBoundingClientRect():e,r=t instanceof HTMLElement?t.getBoundingClientRect():t;return n?r?new DOMRect(n.x-r.x,n.y-r.y,n.width,n.height):n:new DOMRect}function d(e,t){let n,r;if(Object.is(e,t))return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||(n=Object.keys(e),r=Object.keys(t),n.length!==r.length))return!1;for(let r=0;r<n.length;r++)if(!Object.prototype.hasOwnProperty.call(t,n[r])||!Object.is(e[n[r]],t[n[r]]))return!1;return!0}function f(e){let t=[],n=e.parentElement;for(;n;){let e=window.getComputedStyle(n);/(auto|scroll|overlay)/.test(e.overflow+e.overflowY+e.overflowX)&&t.push(n),n=n.parentElement}return t}exports.clamp=t,exports.formatSizeFromPx=s,exports.getComponentTokenValue=l,exports.getMaxWords=r,exports.getPropertyValue=c,exports.getRelativeRect=u,exports.getScrollParents=f,exports.isBrowser=e,exports.mapRange=n,exports.parseSizeToPx=o,exports.shallowEqual=d,exports.waitAnimationEndEvent=i,exports.waitAnimationNameEndEvent=a;

package/dist/utils/index.js

@@ -56,13 +56,17 @@ function l(e, t) {
 	return c(e, `--md-comp-${t}`) ?? 0;
 }
 function u(e, t) {
+	let n = e instanceof HTMLElement ? e.getBoundingClientRect() : e, r = t instanceof HTMLElement ? t.getBoundingClientRect() : t;
+	return n ? r ? new DOMRect(n.x - r.x, n.y - r.y, n.width, n.height) : n : new DOMRect();
+}
+function d(e, t) {
 	let n, r;
 	if (Object.is(e, t)) return !0;
 	if (typeof e != "object" || !e || typeof t != "object" || !t || (n = Object.keys(e), r = Object.keys(t), n.length !== r.length)) return !1;
 	for (let r = 0; r < n.length; r++) if (!Object.prototype.hasOwnProperty.call(t, n[r]) || !Object.is(e[n[r]], t[n[r]])) return !1;
 	return !0;
 }
-function d(e) {
+function f(e) {
 	let t = [], n = e.parentElement;
 	for (; n;) {
 		let e = window.getComputedStyle(n);
@@ -71,4 +75,4 @@ function d(e) {
 	return t;
 }
 //#endregion
-export { t as clamp, s as formatSizeFromPx, l as getComponentTokenValue, r as getMaxWords, c as getPropertyValue, d as getScrollParents, e as isBrowser, n as mapRange, o as parseSizeToPx, u as shallowEqual, i as waitAnimationEndEvent, a as waitAnimationNameEndEvent };
+export { t as clamp, s as formatSizeFromPx, l as getComponentTokenValue, r as getMaxWords, c as getPropertyValue, u as getRelativeRect, f as getScrollParents, e as isBrowser, n as mapRange, o as parseSizeToPx, d as shallowEqual, i as waitAnimationEndEvent, a as waitAnimationNameEndEvent };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-material-design",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"type": "module",
 	"license": "MIT",
 	"author": {