react-material-design 0.0.0-stage → 0.5.0

package/dist/utils/hooks.d.ts

@@ -0,0 +1,17 @@
+import { DependencyList, RefObject, useLayoutEffect } from 'react';
+export declare function useAsyncMemo<T>(factory: () => Promise<T> | undefined | null, deps: DependencyList): T | undefined;
+export declare function useAsyncMemo<T>(factory: () => Promise<T> | undefined | null, deps: DependencyList, initial: T): T;
+export declare function usePrevious<S = undefined>(): S | undefined;
+export declare function usePrevious<S>(value: S, init?: boolean): S;
+export declare function useResizeObserver<T extends Element | null>(target: T | T[], callback: ResizeObserverCallback, options?: ResizeObserverOptions): void;
+export declare function useIntersectionObserver<T extends Element | null>(target: T | T[], callback: IntersectionObserverCallback, options?: IntersectionObserverInit): void;
+export declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement | Element | null | undefined>(target: T | T[], type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof WindowEventMap, T extends Window | null | undefined>(target: T | T[], type: K, listener: (this: HTMLElement, ev: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof DocumentEventMap, T extends Document | null | undefined>(target: T | T[], type: K, listener: (this: HTMLElement, ev: DocumentEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof MediaQueryListEventMap, T extends MediaQueryList | null | undefined>(target: T | T[], type: K, listener: (this: MediaQueryList, ev: MediaQueryListEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+export declare function useEventListener<K extends keyof (HTMLElementEventMap | DocumentEventMap | WindowEventMap | MediaQueryListEventMap), T extends HTMLElement | Element | Document | Window | MediaQueryList | null | undefined>(target: T | T[], type: K, listener: (object: Event) => void, options?: boolean | AddEventListenerOptions): void;
+export declare function useFollowElement(target: RefObject<Element | null>, callback: (rect: DOMRect | undefined, visible: boolean) => void): () => void;
+export declare function useViewTransitions(callback?: (viewTransition?: ViewTransition) => void): () => void;
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export declare function useMount(effect: () => void): void;
+export declare function useUnmount(effect: () => void): void;

package/dist/utils/hooks.js

@@ -0,0 +1,9 @@
+import { isBrowser as e } from "./index.js";
+import "react/compiler-runtime";
+import { useEffect as t, useLayoutEffect as n } from "react";
+import "react-dom";
+import "react-dom-event-hooks";
+//#region lib/utils/hooks.ts
+var r = e() ? n : t;
+//#endregion
+export { r as useIsomorphicLayoutEffect };

package/dist/utils/index.cjs

@@ -0,0 +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;

package/dist/utils/index.d.ts

@@ -0,0 +1,44 @@
+export declare const setTimeout: (delay?: number) => Promise<unknown>;
+export declare function isBrowser(): boolean;
+export declare function randomUUID(): ReturnType<typeof crypto["randomUUID"]>;
+export declare function onPageLoading(loading: boolean): void;
+export declare function compareDeps<T>(target: T, previous: T): boolean;
+export declare function hex2rgb(hex: string): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function isLight(color?: string | {
+    r: number;
+    g: number;
+    b: number;
+}): boolean;
+export declare const compareRect: (a?: DOMRect, b?: DOMRect) => boolean;
+export declare function isDeepEqual(object1: any, object2: any): boolean;
+export declare const isObject: (object: any) => boolean;
+export declare const clamp: (input: number, min: number, max: number) => number;
+export declare const mapRange: (current: number, inMin: number, inMax: number, outMin: number, outMax: number) => number;
+export declare function getMaxWords(str: string, max: number): string;
+export declare function waitAnimationFrame(frame?: number): Promise<number>;
+export declare const waitAnimationFrameTimeout: (delay?: number) => Promise<number>;
+export declare function waitTransitionEndEvent(element: HTMLElement | null | undefined, condition: (event: TransitionEvent) => boolean, targetOnly?: boolean): Promise<void>;
+export declare function waitTransitionNameEndEvent(element: HTMLElement | null | undefined, name: string | ((name: string) => boolean), targetOnly?: boolean): Promise<void>;
+export declare function waitAnimationEndEvent(element: HTMLElement | null | undefined, condition: (event: AnimationEvent) => boolean): Promise<void>;
+export declare function waitAnimationNameEndEvent(element: HTMLElement | null | undefined, name: string | ((name: string) => boolean)): Promise<void>;
+export type SizeUnit = string | number;
+export declare function parseSizeToPx(val: SizeUnit | undefined, containerSize: number, fallback?: number): number;
+export declare function formatSizeFromPx(pxValue: number, originalUnit: SizeUnit, containerSize: number): SizeUnit;
+export declare function getPropertyValue(element: HTMLElement | SVGElement | undefined | null, property: string, unit?: string): number | undefined;
+export declare function getPropertyValue<D extends string | number>(element: HTMLElement | SVGElement | undefined | null, property: string, unit: string | undefined, defaultValue: D): D;
+export declare function getPropertyValue<D extends string | number>(element: HTMLElement | SVGElement | undefined | null, property: string, unit?: string, defaultValue?: D): D | number | undefined;
+export declare function getComponentTokenValue(element: HTMLElement | SVGElement | undefined | null, token: string): number;
+export declare function getRelativeRect(target?: HTMLElement | DOMRect | null, relativeTo?: HTMLElement | DOMRect | null): DOMRect;
+export declare function isRectInside(rectA: DOMRect, rectB: DOMRect): boolean;
+export declare function shallowEqual(objA: any, objB: any): boolean;
+export declare function getScrollParents(node: Element): Element[];
+export declare function getViewportRect(): {
+    width: number;
+    height: number;
+    offsetLeft: number;
+    offsetTop: number;
+};

package/dist/utils/index.js

@@ -0,0 +1,74 @@
+//#region lib/utils/index.tsx
+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;
+}
+//#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 };

package/package.json

@@ -1,6 +1,171 @@
 {
-  "name": "react-material-design",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+	"name": "react-material-design",
+	"version": "0.5.0",
+	"type": "module",
+	"license": "MIT",
+	"author": {
+		"name": "Mondemen"
+	},
+	"repository": {
+		"url": "git+https://github.com/Mondemen/react-material-design.git"
+	},
+	"scripts": {
+		"dev": "vite --clearScreen",
+		"build": "vite build --mode lib",
+		"prepublishOnly": "npm run build",
+		"lint": "oxlint",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@material/material-color-utilities": "^0.4.0",
+		"bezier-easing": "^3.2.0",
+		"classnames": "^2.5.1",
+		"react-dom-event-hooks": "^1.2.2"
+	},
+	"peerDependencies": {
+		"@fontsource/roboto": "*",
+		"@fontsource/roboto-flex": "*",
+		"@fontsource/roboto-mono": "*",
+		"material-symbols": ">=0.4.0",
+		"react": ">=19.3.0",
+		"react-dom": ">=19.3.0"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.29.7",
+		"@rolldown/plugin-babel": "^0.2.4",
+		"@types/babel__core": "^7.20.5",
+		"@types/node": "^24.19.2",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.3.0",
+		"@vitejs/plugin-react": "^6.1.2",
+		"babel-plugin-react-compiler": "^1.0.0",
+		"commander": "^15.0.0",
+		"globals": "^17.13.0",
+		"oxlint": "^1.88.0",
+		"sass": "^1.105.2",
+		"sass-alias": "^2.0.1",
+		"tsx": "^4.23.15",
+		"typescript": "^6.0.3",
+		"unplugin-dts": "^1.1.2",
+		"vite": "^8.3.4",
+		"vite-plugin-lib-inject-css": "^2.2.2",
+		"vite-tsconfig-paths": "^6.1.1"
+	},
+	"exports": {
+		"./Theme": {
+			"types": "./dist/components/Theme/index.d.ts",
+			"import": "./dist/components/Theme/index.js",
+			"require": "./dist/components/Theme/index.cjs"
+		},
+		"./Button": {
+			"types": "./dist/components/Button/default/index.d.ts",
+			"import": "./dist/components/Button/default/index.js",
+			"require": "./dist/components/Button/default/index.cjs"
+		},
+		"./ButtonIcon": {
+			"types": "./dist/components/Button/icon/index.d.ts",
+			"import": "./dist/components/Button/icon/index.js",
+			"require": "./dist/components/Button/icon/index.cjs"
+		},
+		"./ButtonGroup": {
+			"types": "./dist/components/Button/group/index.d.ts",
+			"import": "./dist/components/Button/group/index.js",
+			"require": "./dist/components/Button/group/index.cjs"
+		},
+		"./SplitButton": {
+			"types": "./dist/components/Button/split/index.d.ts",
+			"import": "./dist/components/Button/split/index.js",
+			"require": "./dist/components/Button/split/index.cjs"
+		},
+		"./Chip": {
+			"types": "./dist/components/Chip/index.d.ts",
+			"import": "./dist/components/Chip/index.js",
+			"require": "./dist/components/Chip/index.cjs"
+		},
+		"./ContextMenu": {
+			"types": "./dist/components/ContextMenu/index.d.ts",
+			"import": "./dist/components/ContextMenu/index.js",
+			"require": "./dist/components/ContextMenu/index.cjs"
+		},
+		"./Dialog": {
+			"types": "./dist/components/Dialog/index.d.ts",
+			"import": "./dist/components/Dialog/index.js",
+			"require": "./dist/components/Dialog/index.cjs"
+		},
+		"./Divider": {
+			"types": "./dist/components/Divider/index.d.ts",
+			"import": "./dist/components/Divider/index.js",
+			"require": "./dist/components/Divider/index.cjs"
+		},
+		"./Icon": {
+			"types": "./dist/components/Icon/index.d.ts",
+			"import": "./dist/components/Icon/index.js",
+			"require": "./dist/components/Icon/index.cjs"
+		},
+		"./Menu": {
+			"types": "./dist/components/Menu/index.d.ts",
+			"import": "./dist/components/Menu/index.js",
+			"require": "./dist/components/Menu/index.cjs"
+		},
+		"./Menubar": {
+			"types": "./dist/components/Menubar/index.d.ts",
+			"import": "./dist/components/Menubar/index.js",
+			"require": "./dist/components/Menubar/index.cjs"
+		},
+		"./NumberField": {
+			"types": "./dist/components/NumberField/index.d.ts",
+			"import": "./dist/components/NumberField/index.js",
+			"require": "./dist/components/NumberField/index.cjs"
+		},
+		"./Select": {
+			"types": "./dist/components/Select/index.d.ts",
+			"import": "./dist/components/Select/index.js",
+			"require": "./dist/components/Select/index.cjs"
+		},
+		"./Slider": {
+			"types": "./dist/components/Slider/index.d.ts",
+			"import": "./dist/components/Slider/index.js",
+			"require": "./dist/components/Slider/index.cjs"
+		},
+		"./TextField": {
+			"types": "./dist/components/TextField/index.d.ts",
+			"import": "./dist/components/TextField/index.js",
+			"require": "./dist/components/TextField/index.cjs"
+		},
+		"./Toolbar": {
+			"types": "./dist/components/Toolbar/index.d.ts",
+			"import": "./dist/components/Toolbar/index.js",
+			"require": "./dist/components/Toolbar/index.cjs"
+		},
+		"./Tooltip": {
+			"types": "./dist/components/Tooltip/index.d.ts",
+			"import": "./dist/components/Tooltip/index.js",
+			"require": "./dist/components/Tooltip/index.cjs"
+		},
+		"./Page": {
+			"types": "./dist/layouts/Page/index.d.ts",
+			"import": "./dist/layouts/Page/index.js",
+			"require": "./dist/layouts/Page/index.cjs"
+		},
+		"./Panes": {
+			"types": "./dist/layouts/Panes/index.d.ts",
+			"import": "./dist/layouts/Panes/index.js",
+			"require": "./dist/layouts/Panes/index.cjs"
+		},
+		"./Tabs": {
+			"types": "./dist/layouts/Tabs/index.d.ts",
+			"import": "./dist/layouts/Tabs/index.js",
+			"require": "./dist/layouts/Tabs/index.cjs"
+		},
+		"./Toolbox": {
+			"types": "./dist/layouts/Toolbox/index.d.ts",
+			"import": "./dist/layouts/Toolbox/index.js",
+			"require": "./dist/layouts/Toolbox/index.cjs"
+		},
+		"./Content": {
+			"types": "./dist/layouts/Content.d.ts",
+			"import": "./dist/layouts/Content.js",
+			"require": "./dist/layouts/Content.cjs"
+		}
+	}
 }