npm - @adgytec/adgytec-web-ui-components - Versions diffs - 2.2.0 → 2.3.1 - Mend

@adgytec/adgytec-web-ui-components 2.2.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (504) hide show

package/dist/chunks/ThemeSelector CHANGED Viewed

@@ -4,60 +4,50 @@ import { r as n } from "./core";
 import { t as r } from "./ConnectedButtonGroup";
 import { t as i } from "./Switch";
 import a from "clsx";
-import { useLayoutEffect as o, useMemo as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useLocalStorage as u, useMediaQuery as d } from "usehooks-ts";
+import { useCallback as o, useLayoutEffect as s, useMemo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useLocalStorage as d, useMediaQuery as f } from "usehooks-ts";
 import '../assets/ThemeSelector.css';//#region src/utils/theme/build.ts
-var f = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
+var p = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
 	let r = e ? "dark" : "light";
 	return t ? `monochrome-${r}` : `${r}${n === "standard" ? "" : n === "medium" ? "-medium-contrast" : "-high-contrast"}`;
-}, p = "(prefers-color-scheme: dark)", m = "application-theme";
-function h({ defaultThemeMode: e = "system", defaultContrast: t = "standard", isMonochrome: n = !1, localStorageKey: r = m, initializeWithValue: i = !0 } = {}) {
-	let a = {
+}, m = "(prefers-color-scheme: dark)", h = "application-theme";
+function g({ defaultThemeMode: e = "system", defaultContrast: t = "standard", isMonochrome: n = !1, localStorageKey: r = h, initializeWithValue: i = !0 } = {}) {
+	let a = c(() => ({
 		mode: e,
 		contrast: t,
 		isMonochrome: n
-	}, o = d(p, { initializeWithValue: i }), [s, c] = u(r, a, { initializeWithValue: i }), l = s.mode === "dark" || s.mode === "system" && o, f = (e) => {
-		c((t) => ({
+	}), [
+		e,
+		t,
+		n
+	]), s = f(m, { initializeWithValue: i }), [l, u] = d(r, a, { initializeWithValue: i }), p = l.mode === "dark" || l.mode === "system" && s, g = o((e) => {
+		u((t) => ({
 			...t,
 			mode: e
 		}));
-	}, h = (e) => {
-		c((t) => ({
+	}, [u]), _ = o((e) => {
+		u((t) => ({
 			...t,
 			contrast: e
 		}));
-	}, g = (e) => {
-		c((t) => ({
+	}, [u]), v = o((e) => {
+		u((t) => ({
 			...t,
 			isMonochrome: e
 		}));
-	};
+	}, [u]);
 	return {
-		...s,
-		isDarkMode: l,
-		setMode: f,
-		setContrast: h,
-		setMonochrome: g
+		...l,
+		isDarkMode: p,
+		setMode: g,
+		setContrast: _,
+		setMonochrome: v
 	};
 }
 //#endregion
-//#region src/components/ThemeSelector/ThemeProvider.tsx
-var g = e(), _ = (e) => {
-	let t = (0, g.c)(5), { children: n } = e, { isDarkMode: r, isMonochrome: i, contrast: a } = h(), s, c;
-	return t[0] !== a || t[1] !== r || t[2] !== i ? (s = () => {
-		let e = f({
-			isDarkMode: r,
-			isMonochrome: i,
-			contrast: a
-		});
-		document.documentElement.setAttribute("data-theme", e);
-	}, c = [
-		r,
-		i,
-		a
-	], t[0] = a, t[1] = r, t[2] = i, t[3] = s, t[4] = c) : (s = t[3], c = t[4]), o(s, c), n;
-}, v = (e) => [
+//#region src/components/ThemeSelector/core.ts
+var _ = (e) => [
 	{
 		id: "system",
 		value: e.system
@@ -70,7 +60,7 @@ var g = e(), _ = (e) => {
 		id: "dark",
 		value: e.dark
 	}
-], y = (e) => [
+], v = (e) => [
 	{
 		id: "standard",
 		value: e.standard
@@ -84,101 +74,115 @@ var g = e(), _ = (e) => {
 		value: e.high
 	}
 ];
-function b(e) {
+function y(e) {
 	return e === "system" || e === "dark" || e === "light";
 }
-function x(e) {
+function b(e) {
 	return e === "standard" || e === "medium" || e === "high";
 }
-var S = {
+var x = {
 	selector: "_selector_o55o3_2",
 	"theme-item": "_theme-item_o55o3_7",
 	"theme-item-info": "_theme-item-info_o55o3_12"
-}, C = ({ heading: e, description: n, children: r, className: i, useInline: o = !1 }) => o ? /* @__PURE__ */ l("span", {
-	className: a(S["theme-item"], i),
-	children: [/* @__PURE__ */ l("span", {
-		className: a(S["theme-item-info"]),
-		children: [/* @__PURE__ */ c("span", {
+}, S = ({ heading: e, description: n, children: r, className: i, useInline: o = !1 }) => o ? /* @__PURE__ */ u("span", {
+	className: a(x["theme-item"], i),
+	children: [/* @__PURE__ */ u("span", {
+		className: a(x["theme-item-info"]),
+		children: [/* @__PURE__ */ l("span", {
 			className: a(t.titleMedium),
 			slot: "label",
 			children: e
-		}), n && /* @__PURE__ */ c("span", {
+		}), n && /* @__PURE__ */ l("span", {
 			className: a(t.bodyMedium),
 			slot: "description",
 			children: n
 		})]
 	}), r]
-}) : /* @__PURE__ */ l("div", {
-	className: a(S["theme-item"], i),
-	children: [/* @__PURE__ */ l("div", {
-		className: a(S["theme-item-info"]),
-		children: [/* @__PURE__ */ c("h3", {
+}) : /* @__PURE__ */ u("div", {
+	className: a(x["theme-item"], i),
+	children: [/* @__PURE__ */ u("div", {
+		className: a(x["theme-item-info"]),
+		children: [/* @__PURE__ */ l("h3", {
 			className: a(t.titleMedium),
 			children: e
-		}), n && /* @__PURE__ */ c("p", {
+		}), n && /* @__PURE__ */ l("p", {
 			className: a(t.bodyMedium),
 			children: n
 		})]
 	}), r]
-}), w = {
+}), C = e(), w = (e) => {
+	let t = (0, C.c)(5), { children: n } = e, { isDarkMode: r, isMonochrome: i, contrast: a } = g(), o, c;
+	return t[0] !== a || t[1] !== r || t[2] !== i ? (o = () => {
+		let e = p({
+			isDarkMode: r,
+			isMonochrome: i,
+			contrast: a
+		});
+		document.documentElement.setAttribute("data-theme", e);
+	}, c = [
+		r,
+		i,
+		a
+	], t[0] = a, t[1] = r, t[2] = i, t[3] = o, t[4] = c) : (o = t[3], c = t[4]), s(o, c), n;
+}, T = {
 	heading: "Theme Mode",
 	description: "Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.",
 	system: "System",
 	dark: "Dark",
 	light: "Light"
-}, T = {
+}, E = {
 	heading: "Theme Contrast",
 	description: "Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.",
 	standard: "Standard",
 	medium: "Medium",
 	high: "High"
-}, E = {
+}, D = {
 	heading: "Monochrome",
 	description: "Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience."
-}, D = ({ modeDetails: e = w, contrastDetails: t = T, monochromeDetails: o = E }) => {
-	let { mode: u, isMonochrome: d, contrast: f, setContrast: p, setMode: m, setMonochrome: g } = h(), _ = s(() => v(e), [e]), D = s(() => y(t), [t]);
-	return /* @__PURE__ */ l("div", {
-		className: a(S.selector),
+}, O = ({ modeDetails: e = T, contrastDetails: t = E, monochromeDetails: o = D }) => {
+	let { mode: s, isMonochrome: d, contrast: f, setContrast: p, setMode: m, setMonochrome: h } = g(), C = c(() => _(e), [e]), w = c(() => v(t), [t]);
+	return /* @__PURE__ */ u("div", {
+		className: a(x.selector),
 		children: [
-			/* @__PURE__ */ c(C, {
+			/* @__PURE__ */ l(S, {
 				heading: e.heading,
 				description: e.description,
-				children: /* @__PURE__ */ c(r, {
+				children: /* @__PURE__ */ l(r, {
 					selectionMode: "single",
-					selectedKeys: [u],
+					selectedKeys: [s],
 					onSelectionChange: (e) => {
 						let t = Array.from(e)[0];
-						b(t) && m(t);
+						y(t) && m(t);
 					},
-					children: _.map((e) => /* @__PURE__ */ c(n, {
+					children: C.map((e) => /* @__PURE__ */ l(n, {
 						id: e.id,
 						children: e.value
 					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ c(C, {
+			/* @__PURE__ */ l(S, {
 				heading: t.heading,
 				description: t.description,
-				children: /* @__PURE__ */ c(r, {
+				children: /* @__PURE__ */ l(r, {
 					color: "tonal",
 					selectionMode: "single",
 					selectedKeys: [f],
 					onSelectionChange: (e) => {
 						let t = Array.from(e)[0];
-						x(t) && p(t);
+						b(t) && p(t);
 					},
 					isDisabled: d,
-					children: D.map((e) => /* @__PURE__ */ c(n, {
+					children: w.map((e) => /* @__PURE__ */ l(n, {
 						id: e.id,
 						children: e.value
 					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ c(i, {
+			/* @__PURE__ */ l(i, {
 				isSelected: d,
-				onChange: g,
+				onChange: h,
 				containerStateLayer: !0,
-				children: /* @__PURE__ */ c(C, {
+				children: /* @__PURE__ */ l(S, {
 					heading: o.heading,
 					description: o.description,
 					useInline: !0
@@ -188,6 +192,6 @@ var S = {
 	});
 };
 //#endregion
-export { f as i, _ as n, h as r, D as t };
+export { b as a, g as c, v as i, p as l, w as n, y as o, S as r, _ as s, O as t };
 //# sourceMappingURL=ThemeSelector.map

package/dist/chunks/ThemeSelector.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","keys","item"],"sources":["../../src/utils/theme/build.ts","../../src/utils/theme/useTheme.ts","../../src/components/ThemeSelector/ThemeProvider.tsx","../../src/components/ThemeSelector/core.ts","../../src/components/ThemeSelector/themeSelector.module.css","../../src/components/ThemeSelector/ThemeItem.tsx","../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import type { ThemeBuildOptions } from \"./types\";\n\nexport const buildThemeString = ({\n isDarkMode,\n isMonochrome,\n contrast,\n}: ThemeBuildOptions) => {\n const mode = isDarkMode ? \"dark\" : \"light\";\n if (isMonochrome) return `monochrome-${mode}`;\n\n const contrastSuffix =\n contrast === \"standard\"\n ? \"\"\n : contrast === \"medium\"\n ? \"-medium-contrast\"\n : \"-high-contrast\";\n\n return `${mode}${contrastSuffix}`;\n};\n","import { useLocalStorage, useMediaQuery } from \"usehooks-ts\";\nimport type {\n ThemeContrast,\n ThemeMode,\n ThemeOptions,\n ThemeReturn,\n ThemeStorage,\n} from \"./types\";\n\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nconst LOCAL_STORAGE_KEY = \"application-theme\";\n\nexport function useTheme({\n defaultThemeMode = \"system\",\n defaultContrast = \"standard\",\n isMonochrome = false,\n localStorageKey = LOCAL_STORAGE_KEY,\n initializeWithValue = true,\n}: ThemeOptions = {}): ThemeReturn {\n const defaultValue: ThemeStorage = {\n mode: defaultThemeMode,\n contrast: defaultContrast,\n isMonochrome,\n };\n\n const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });\n const [theme, setTheme] = useLocalStorage<ThemeStorage>(\n localStorageKey,\n defaultValue,\n {\n initializeWithValue,\n }\n );\n\n const isDarkMode =\n theme.mode === \"dark\" \|\| (theme.mode === \"system\" && isDarkOS);\n\n const setMode = (mode: ThemeMode) => {\n setTheme((prev) => ({ ...prev, mode }));\n };\n\n const setContrast = (contrast: ThemeContrast) => {\n setTheme((prev) => ({ ...prev, contrast }));\n };\n\n const setMonochrome = (isMonochrome: boolean) => {\n setTheme((prev) => ({ ...prev, isMonochrome }));\n };\n\n return {\n ...theme,\n isDarkMode,\n setMode,\n setContrast,\n setMonochrome,\n };\n}\n","import { type ReactNode, useLayoutEffect } from \"react\";\nimport { buildThemeString, useTheme } from \"@/utils\";\n\nexport const ThemeProvider = ({ children }: { children?: ReactNode }) => {\n const { isDarkMode, isMonochrome, contrast } = useTheme();\n\n useLayoutEffect(() => {\n const themeString = buildThemeString({\n isDarkMode,\n isMonochrome,\n contrast,\n });\n document.documentElement.setAttribute(\"data-theme\", themeString);\n }, [isDarkMode, isMonochrome, contrast]);\n\n return children;\n};\n","import type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\nexport const modeItems = (\n modeDetails: ThemeModeTranslations\n): {\n id: ThemeMode;\n value: string;\n}[] => {\n return [\n { id: \"system\", value: modeDetails.system },\n { id: \"light\", value: modeDetails.light },\n { id: \"dark\", value: modeDetails.dark },\n ];\n};\n\nexport const contrastItems = (\n contrastDetails: ThemeContrastTranslations\n): {\n id: ThemeContrast;\n value: string;\n}[] => {\n return [\n { id: \"standard\", value: contrastDetails.standard },\n { id: \"medium\", value: contrastDetails.medium },\n { id: \"high\", value: contrastDetails.high },\n ];\n};\n\nexport function isThemeMode(value: Key): value is ThemeMode {\n return value === \"system\" \|\| value === \"dark\" \|\| value === \"light\";\n}\n\nexport function isThemeContrast(value: Key): value is ThemeContrast {\n return value === \"standard\" \|\| value === \"medium\" \|\| value === \"high\";\n}\n","@layer adgytec.comps {\n .selector {\n display: grid;\n gap: var(--md-sys-layout-space-24);\n }\n\n .theme-item {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n }\n\n .theme-item-info {\n display: grid;\n }\n}\n","import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./themeSelector.module.css\";\n\nexport const ThemeItem = ({\n heading,\n description,\n children,\n className,\n useInline = false,\n}: {\n heading: string;\n description?: string;\n children?: ReactNode;\n className?: string;\n useInline?: boolean;\n}) => {\n if (useInline) {\n return (\n <span className={clsx(styles[\"theme-item\"], className)}>\n <span className={clsx(styles[\"theme-item-info\"])}>\n <span className={clsx(typography.titleMedium)} slot=\"label\">\n {heading}\n </span>\n\n {description && (\n <span\n className={clsx(typography.bodyMedium)}\n slot=\"description\"\n >\n {description}\n </span>\n )}\n </span>\n\n {children}\n </span>\n );\n }\n return (\n <div className={clsx(styles[\"theme-item\"], className)}>\n <div className={clsx(styles[\"theme-item-info\"])}>\n <h3 className={clsx(typography.titleMedium)}>{heading}</h3>\n\n {description && (\n <p className={clsx(typography.bodyMedium)}>{description}</p>\n )}\n </div>\n\n {children}\n </div>\n );\n};\n","import clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Switch } from \"../Input\";\nimport { contrastItems, isThemeContrast, isThemeMode, modeItems } from \"./core\";\nimport { ThemeItem } from \"./ThemeItem\";\nimport styles from \"./themeSelector.module.css\";\nimport type {\n ThemeContrastTranslations,\n ThemeModeTranslations,\n ThemeMonochromeTranslations,\n ThemeSelectorProps,\n} from \"./types\";\n\nconst defaultMode: ThemeModeTranslations = {\n heading: \"Theme Mode\",\n description:\n \"Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.\",\n\n system: \"System\",\n dark: \"Dark\",\n light: \"Light\",\n};\n\nconst defaultContrast: ThemeContrastTranslations = {\n heading: \"Theme Contrast\",\n description:\n \"Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.\",\n\n standard: \"Standard\",\n medium: \"Medium\",\n high: \"High\",\n};\n\nconst defaultMonochrome: ThemeMonochromeTranslations = {\n heading: \"Monochrome\",\n description:\n \"Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience.\",\n};\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({\n modeDetails = defaultMode,\n contrastDetails = defaultContrast,\n monochromeDetails = defaultMonochrome,\n}) => {\n const {\n mode,\n isMonochrome,\n contrast,\n setContrast,\n setMode,\n setMonochrome,\n } = useTheme();\n\n const themeModeItems = useMemo(() => modeItems(modeDetails), [modeDetails]);\n const themeContrastItems = useMemo(\n () => contrastItems(contrastDetails),\n [contrastDetails]\n );\n\n return (\n <div className={clsx(styles[\"selector\"])}>\n <ThemeItem\n heading={modeDetails.heading}\n description={modeDetails.description}\n >\n <ConnectedButtonGroup\n selectionMode=\"single\"\n selectedKeys={[mode]}\n onSelectionChange={(keys) => {\n const themeMode = Array.from(keys)[0];\n if (!isThemeMode(themeMode)) return;\n\n setMode(themeMode);\n }}\n >\n {themeModeItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <ThemeItem\n heading={contrastDetails.heading}\n description={contrastDetails.description}\n >\n <ConnectedButtonGroup\n color=\"tonal\"\n selectionMode=\"single\"\n selectedKeys={[contrast]}\n onSelectionChange={(keys) => {\n const themeContrast = Array.from(keys)[0];\n if (!isThemeContrast(themeContrast)) return;\n\n setContrast(themeContrast);\n }}\n isDisabled={isMonochrome}\n >\n {themeContrastItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <Switch\n isSelected={isMonochrome}\n onChange={setMonochrome}\n containerStateLayer\n >\n <ThemeItem\n heading={monochromeDetails.heading}\n description={monochromeDetails.description}\n useInline\n ></ThemeItem>\n </Switch>\n </div>\n );\n};\n"],"mappings":";;;;;;;;;;AAEA,IAAa,KAAoB,EAC7B,eACA,iBACA,kBACqB;CACrB,IAAM,IAAO,IAAa,SAAS;CAUnC,OATI,IAAqB,cAAc,MAShC,GAAG,IANN,MAAa,aACP,KACA,MAAa,WACX,qBACA;AAGhB,GCTM,IAAqB,gCACrB,IAAoB;AAE1B,SAAgB,EAAS,EACrB,sBAAmB,UACnB,qBAAkB,YAClB,kBAAe,IACf,qBAAkB,GAClB,yBAAsB,OACR,CAAC,GAAgB;CAC/B,IAAM,IAA6B;EAC/B,MAAM;EACN,UAAU;EACV;CACJ,GAEM,IAAW,EAAc,GAAoB,EAAE,uBAAoB,CAAC,GACpE,CAAC,GAAO,KAAY,EACtB,GACA,GACA,EACI,uBACJ,CACJ,GAEM,IACF,EAAM,SAAS,UAAW,EAAM,SAAS,YAAY,GAEnD,KAAW,MAAoB;EACjC,GAAU,OAAU;GAAE,GAAG;GAAM;EAAK,EAAE;CAC1C,GAEM,KAAe,MAA4B;EAC7C,GAAUA,OAAU;GAAE,GAAGA;GAAM;EAAS,EAAE;CAC9C,GAEM,KAAiBC,MAA0B;EAC7C,GAAUD,OAAU;GAAE,GAAGA;GAAM,cAAAC;EAAa,EAAE;CAClD;CAEA,OAAO;EACH,GAAG;EACH;EACA;EACA;EACA;CACJ;AACJ;;;aCrDa,KAAgB,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAC,EAAA,gBAAA,GAC1B,EAAA,eAAA,iBAAA,gBAA+C,EAAS,GAAE,GAAA;CASlB,OATkB,EAAA,OAAA,KAAA,EAAA,OAAA,KAAA,EAAA,OAAA,KAE1C,UAAA;EACZ,IAAA,IAAoB,EAAiB;GAAA;GAAA;GAAA;EAIrC,CAAC;EACD,SAAQ,gBAAgB,aAAc,cAAc,CAAW;CAAC,GACjE,IAAA;EAAC;EAAY;EAAc;CAAQ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,MAAA,IAAA,EAAA,IAAA,IAAA,EAAA,KAPvC,EAAgB,GAOb,CAAoC,GAEhC;AAAQ,GCXN,KACT,MAKO;CACH;EAAE,IAAI;EAAU,OAAO,EAAY;CAAO;CAC1C;EAAE,IAAI;EAAS,OAAO,EAAY;CAAM;CACxC;EAAE,IAAI;EAAQ,OAAO,EAAY;CAAK;AAAC,GAIlC,KACT,MAKO;CACH;EAAE,IAAI;EAAY,OAAO,EAAgB;CAAS;CAClD;EAAE,IAAI;EAAU,OAAO,EAAgB;CAAO;CAC9C;EAAE,IAAI;EAAQ,OAAO,EAAgB;CAAK;AAAC;AAInD,SAAgB,EAAY,GAAgC;CACxD,OAAO,MAAU,YAAY,MAAU,UAAU,MAAU;AAC/D;AAEA,SAAgB,EAAgB,GAAoC;CAChE,OAAO,MAAU,cAAc,MAAU,YAAY,MAAU;AACnE;;;;;GE/Ba,KAAa,EACtB,YACA,gBACA,aACA,cACA,eAAY,SAQR,IAEI,kBAAC,QAAD;CAAM,WAAW,EAAK,EAAO,eAAe,CAAS;WAArD,CACI,kBAAC,QAAD;EAAM,WAAW,EAAK,EAAO,kBAAkB;YAA/C,CACI,kBAAC,QAAD;GAAM,WAAW,EAAK,EAAW,WAAW;GAAG,MAAK;aAC/C;EACC,CAAA,GAEL,KACG,kBAAC,QAAD;GACI,WAAW,EAAK,EAAW,UAAU;GACrC,MAAK;aAEJ;EACC,CAAA,CAER;KAEL,CACC;KAIV,kBAAC,OAAD;CAAK,WAAW,EAAK,EAAO,eAAe,CAAS;WAApD,CACI,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,kBAAkB;YAA9C,CACI,kBAAC,MAAD;GAAI,WAAW,EAAK,EAAW,WAAW;aAAI;EAAY,CAAA,GAEzD,KACG,kBAAC,KAAD;GAAG,WAAW,EAAK,EAAW,UAAU;aAAI;EAAe,CAAA,CAE9D;KAEJ,CACA;ICpCP,IAAqC;CACvC,SAAS;CACT,aACI;CAEJ,QAAQ;CACR,MAAM;CACN,OAAO;AACX,GAEM,IAA6C;CAC/C,SAAS;CACT,aACI;CAEJ,UAAU;CACV,QAAQ;CACR,MAAM;AACV,GAEM,IAAiD;CACnD,SAAS;CACT,aACI;AACR,GAEa,KAA+C,EACxD,iBAAc,GACd,qBAAkB,GAClB,uBAAoB,QAClB;CACF,IAAM,EACF,SACA,iBACA,aACA,gBACA,YACA,qBACA,EAAS,GAEP,IAAiB,QAAc,EAAU,CAAW,GAAG,CAAC,CAAW,CAAC,GACpE,IAAqB,QACjB,EAAc,CAAe,GACnC,CAAC,CAAe,CACpB;CAEA,OACI,kBAAC,OAAD;EAAK,WAAW,EAAK,EAAO,QAAW;YAAvC;GACI,kBAAC,GAAD;IACI,SAAS,EAAY;IACrB,aAAa,EAAY;cAEzB,kBAAC,GAAD;KACI,eAAc;KACd,cAAc,CAAC,CAAI;KACnB,oBAAoB,MAAS;MACzB,IAAM,IAAY,MAAM,KAAK,CAAI,CAAC,CAAC;MAC9B,EAAY,CAAS,KAE1B,EAAQ,CAAS;KACrB;eAEC,EAAe,KAAK,MACjB,kBAAC,GAAD;MAA+B,IAAI,EAAK;gBACnC,EAAK;KACO,GAFK,EAAK,EAEV,CACpB;IACiB,CAAA;GACf,CAAA;GAEX,kBAAC,GAAD;IACI,SAAS,EAAgB;IACzB,aAAa,EAAgB;cAE7B,kBAAC,GAAD;KACI,OAAM;KACN,eAAc;KACd,cAAc,CAAC,CAAQ;KACvB,oBAAoBC,MAAS;MACzB,IAAM,IAAgB,MAAM,KAAKA,CAAI,CAAC,CAAC;MAClC,EAAgB,CAAa,KAElC,EAAY,CAAa;KAC7B;KACA,YAAY;eAEX,EAAmB,KAAKC,MACrB,kBAAC,GAAD;MAA+B,IAAIA,EAAK;gBACnCA,EAAK;KACO,GAFKA,EAAK,EAEV,CACpB;IACiB,CAAA;GACf,CAAA;GAEX,kBAAC,GAAD;IACI,YAAY;IACZ,UAAU;IACV,qBAAA;cAEA,kBAAC,GAAD;KACI,SAAS,EAAkB;KAC3B,aAAa,EAAkB;KAC/B,WAAA;IACQ,CAAA;GACR,CAAA;EACP;;AAEb"}
1	+ {"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","clsx","styles","_c","keys","item","clsx","styles","require_compiler_runtime","ConnectedButton","ConnectedButtonGroup","Switch","clsx$1","buildThemeString","mode","isDarkMode","isMonochrome","contrast","COLOR_SCHEME_QUERY","LOCAL_STORAGE_KEY","useTheme","defaultValue","useMemo","defaultThemeMode","defaultContrast","isDarkOS","useMediaQuery","theme","setTheme","useLocalStorage","localStorageKey","setMode","useCallback","prev","setContrast","prev_0","setMonochrome","prev_1","isMonochrome_0","modeItems","modeDetails","contrastItems","contrastDetails","isThemeMode","value","isThemeContrast","themeSelector_module_default","ThemeItem","useInline","className","typography","heading","description","children","import_compiler_runtime","ThemeProvider","$","t0","t1","t2","themeString","useLayoutEffect","defaultMode","defaultMonochrome","ThemeSelector","themeModeItems","themeContrastItems","\"selector\"","themeMode","keys","item","themeContrast","keys_0","item_0","monochromeDetails"],"sources":["../../src/utils/theme/build.ts","../../src/utils/theme/useTheme.ts","../../src/components/ThemeSelector/core.ts","../../src/components/ThemeSelector/themeSelector.module.css","../../src/components/ThemeSelector/ThemeItem.tsx","../../src/components/ThemeSelector/ThemeProvider.tsx","../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import type { ThemeBuildOptions } from \"./types\";\n\n/*\n Generates the theme string suffix or identifier based on current theme settings.\n \n This identifier corresponds to the theme definition classes and data attributes\n * (such as `data-theme=\"...\"`) applied to the root element (`document.documentElement` or body).\n \n - Monochrome modes produce `\"monochrome-dark\"` or `\"monochrome-light\"`.\n * - Standard contrast modes produce `\"dark\"` or `\"light\"`.\n * - Elevated contrast modes produce `\"dark-medium-contrast\"`, `\"dark-high-contrast\"`,\n * `\"light-medium-contrast\"`, or `\"light-high-contrast\"`.\n \n @param options - Theme configuration flags (dark mode, monochrome, contrast).\n * @returns Formatted theme string (e.g. `\"dark\"`, `\"light-high-contrast\"`, `\"monochrome-dark\"`).\n \n @example\n * ```ts\n * const themeString = buildThemeString({\n * isDarkMode: true,\n * isMonochrome: false,\n * contrast: \"high\",\n * });\n * // returns \"dark-high-contrast\"\n * ```\n /\nexport const buildThemeString = ({\n isDarkMode,\n isMonochrome,\n contrast,\n}: ThemeBuildOptions): string => {\n const mode = isDarkMode ? \"dark\" : \"light\";\n if (isMonochrome) return `monochrome-${mode}`;\n\n const contrastSuffix =\n contrast === \"standard\"\n ? \"\"\n : contrast === \"medium\"\n ? \"-medium-contrast\"\n : \"-high-contrast\";\n\n return `${mode}${contrastSuffix}`;\n};\n","import { useCallback, useMemo } from \"react\";\nimport { useLocalStorage, useMediaQuery } from \"usehooks-ts\";\nimport type {\n ThemeContrast,\n ThemeMode,\n ThemeOptions,\n ThemeReturn,\n ThemeStorage,\n} from \"./types\";\n\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nconst LOCAL_STORAGE_KEY = \"application-theme\";\n\n/\n React hook that manages the application theme state with `localStorage` persistence\n * and automatic synchronization with system preferences.\n \n Tracks theme mode (`\"system\"`, `\"dark\"`, `\"light\"`), contrast level (`\"standard\"`,\n * `\"medium\"`, `\"high\"`), and monochrome mode. When `mode` is set to `\"system\"`,\n * `isDarkMode` dynamically listens to the OS `(prefers-color-scheme: dark)` media query.\n \n All setter callbacks (`setMode`, `setContrast`, `setMonochrome`) are referentially stable\n * via `useCallback`.\n \n @param options - Configuration options for initial defaults and storage key.\n * @returns Current theme state and updater functions.\n \n @example\n * ```tsx\n * import { useTheme, buildThemeString } from '@adgytec/web-ui-components';\n * import { useEffect } from 'react';\n \n function App() {\n * const theme = useTheme();\n \n useEffect(() => {\n * const themeString = buildThemeString({\n * isDarkMode: theme.isDarkMode,\n * isMonochrome: theme.isMonochrome,\n * contrast: theme.contrast,\n * });\n * document.documentElement.setAttribute('data-theme', themeString);\n * }, [theme.isDarkMode, theme.isMonochrome, theme.contrast]);\n \n return (\n * <div>\n * <button onClick={() => theme.setMode('dark')}>Dark Mode</button>\n * <button onClick={() => theme.setContrast('high')}>High Contrast</button>\n * </div>\n * );\n * }\n * ```\n /\nexport function useTheme({\n defaultThemeMode = \"system\",\n defaultContrast = \"standard\",\n isMonochrome = false,\n localStorageKey = LOCAL_STORAGE_KEY,\n initializeWithValue = true,\n}: ThemeOptions = {}): ThemeReturn {\n const defaultValue: ThemeStorage = useMemo(\n () => ({\n mode: defaultThemeMode,\n contrast: defaultContrast,\n isMonochrome,\n }),\n [defaultThemeMode, defaultContrast, isMonochrome]\n );\n\n const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });\n const [theme, setTheme] = useLocalStorage<ThemeStorage>(\n localStorageKey,\n defaultValue,\n {\n initializeWithValue,\n }\n );\n\n const isDarkMode =\n theme.mode === \"dark\" \|\| (theme.mode === \"system\" && isDarkOS);\n\n const setMode = useCallback(\n (mode: ThemeMode) => {\n setTheme((prev) => ({ ...prev, mode }));\n },\n [setTheme]\n );\n\n const setContrast = useCallback(\n (contrast: ThemeContrast) => {\n setTheme((prev) => ({ ...prev, contrast }));\n },\n [setTheme]\n );\n\n const setMonochrome = useCallback(\n (isMonochrome: boolean) => {\n setTheme((prev) => ({ ...prev, isMonochrome }));\n },\n [setTheme]\n );\n\n return {\n ...theme,\n isDarkMode,\n setMode,\n setContrast,\n setMonochrome,\n };\n}\n","import type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\n/\n Generates an array of theme mode options with translated labels.\n \n @param modeDetails - Translations for theme mode labels (`system`, `light`, `dark`).\n * @returns Array of mode items with `id` and localized `value`.\n \n @example\n * ```tsx\n * const items = modeItems({\n * heading: \"Theme Mode\",\n * system: \"System\",\n * light: \"Light\",\n * dark: \"Dark\",\n * });\n * ```\n /\nexport const modeItems = (\n modeDetails: ThemeModeTranslations\n): {\n id: ThemeMode;\n value: string;\n}[] => {\n return [\n { id: \"system\", value: modeDetails.system },\n { id: \"light\", value: modeDetails.light },\n { id: \"dark\", value: modeDetails.dark },\n ];\n};\n\n/\n Generates an array of theme contrast options with translated labels.\n \n @param contrastDetails - Translations for contrast level labels (`standard`, `medium`, `high`).\n * @returns Array of contrast items with `id` and localized `value`.\n \n @example\n * ```tsx\n * const items = contrastItems({\n * heading: \"Contrast\",\n * standard: \"Standard\",\n * medium: \"Medium\",\n * high: \"High\",\n * });\n * ```\n /\nexport const contrastItems = (\n contrastDetails: ThemeContrastTranslations\n): {\n id: ThemeContrast;\n value: string;\n}[] => {\n return [\n { id: \"standard\", value: contrastDetails.standard },\n { id: \"medium\", value: contrastDetails.medium },\n { id: \"high\", value: contrastDetails.high },\n ];\n};\n\n/\n Type guard function to check if a React Aria `Key` is a valid {@link ThemeMode}.\n \n @param value - The key to test.\n * @returns `true` if `value` is `\"system\"`, `\"light\"`, or `\"dark\"`.\n \n @example\n * ```tsx\n * if (isThemeMode(selectedKey)) {\n * setMode(selectedKey);\n * }\n * ```\n /\nexport function isThemeMode(value: Key): value is ThemeMode {\n return value === \"system\" \|\| value === \"dark\" \|\| value === \"light\";\n}\n\n/\n Type guard function to check if a React Aria `Key` is a valid {@link ThemeContrast}.\n \n @param value - The key to test.\n * @returns `true` if `value` is `\"standard\"`, `\"medium\"`, or `\"high\"`.\n \n @example\n * ```tsx\n * if (isThemeContrast(selectedKey)) {\n * setContrast(selectedKey);\n * }\n * ```\n /\nexport function isThemeContrast(value: Key): value is ThemeContrast {\n return value === \"standard\" \|\| value === \"medium\" \|\| value === \"high\";\n}\n","@layer adgytec.comps {\n .selector {\n display: grid;\n gap: var(--md-sys-layout-space-24);\n }\n\n .theme-item {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n }\n\n .theme-item-info {\n display: grid;\n }\n}\n","import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./themeSelector.module.css\";\n\n/\n Props for the {@link ThemeItem} component.\n /\nexport interface ThemeItemProps {\n /\n Section title heading text.\n /\n heading: string;\n\n /\n Optional explanatory text describing the setting.\n /\n description?: string;\n\n /\n Interactive control element(s) (e.g. connected button groups or switches) associated with the item.\n /\n children?: ReactNode;\n\n /\n Optional custom CSS class name applied to the container.\n /\n className?: string;\n\n /\n Whether to render inline `span` elements instead of block `div` elements.\n * Useful when nesting inside a label or interactive component like `Switch`.\n \n @default false\n /\n useInline?: boolean;\n}\n\n/\n Layout helper component for a single setting item within {@link ThemeSelector}.\n \n Renders a styled heading (`typography.titleMedium`), an optional description (`typography.bodyMedium`),\n * and the child controls. Supports both block rendering and inline `span` rendering.\n \n @example\n * ```tsx\n * import { ThemeItem } from \"@adgytec/web-ui-components\";\n \n export function SettingRow() {\n * return (\n * <ThemeItem\n * heading=\"Appearance\"\n * description=\"Select your preferred color mode.\"\n * >\n * <Controls />\n * </ThemeItem>\n * );\n * }\n * ```\n /\nexport const ThemeItem: React.FC<ThemeItemProps> = ({\n heading,\n description,\n children,\n className,\n useInline = false,\n}) => {\n if (useInline) {\n return (\n <span className={clsx(styles[\"theme-item\"], className)}>\n <span className={clsx(styles[\"theme-item-info\"])}>\n <span className={clsx(typography.titleMedium)} slot=\"label\">\n {heading}\n </span>\n\n {description && (\n <span\n className={clsx(typography.bodyMedium)}\n slot=\"description\"\n >\n {description}\n </span>\n )}\n </span>\n\n {children}\n </span>\n );\n }\n return (\n <div className={clsx(styles[\"theme-item\"], className)}>\n <div className={clsx(styles[\"theme-item-info\"])}>\n <h3 className={clsx(typography.titleMedium)}>{heading}</h3>\n\n {description && (\n <p className={clsx(typography.bodyMedium)}>{description}</p>\n )}\n </div>\n\n {children}\n </div>\n );\n};\n","import { type ReactNode, useLayoutEffect } from \"react\";\nimport { buildThemeString, useTheme } from \"@/utils\";\n\n/\n Props for the {@link ThemeProvider} component.\n /\nexport interface ThemeProviderProps {\n /\n Application content to be rendered inside the provider.\n /\n children?: ReactNode;\n}\n\n/\n Top-level provider component that synchronizes the application root with the current theme settings.\n \n Subscribes to the theme state via {@link useTheme} (mode, dark mode calculation,\n * contrast level, and monochrome setting) and dynamically assigns the computed theme\n * string to the `data-theme` attribute of `document.documentElement`.\n \n @example\n * ```tsx\n * import { ThemeProvider } from \"@adgytec/web-ui-components\";\n \n export function App() {\n * return (\n * <ThemeProvider>\n * <MainContent />\n * </ThemeProvider>\n * );\n * }\n * ```\n /\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {\n const { isDarkMode, isMonochrome, contrast } = useTheme();\n\n useLayoutEffect(() => {\n const themeString = buildThemeString({\n isDarkMode,\n isMonochrome,\n contrast,\n });\n document.documentElement.setAttribute(\"data-theme\", themeString);\n }, [isDarkMode, isMonochrome, contrast]);\n\n return children;\n};\n","import clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Switch } from \"../Input\";\nimport { contrastItems, isThemeContrast, isThemeMode, modeItems } from \"./core\";\nimport { ThemeItem } from \"./ThemeItem\";\nimport styles from \"./themeSelector.module.css\";\nimport type {\n ThemeContrastTranslations,\n ThemeModeTranslations,\n ThemeMonochromeTranslations,\n ThemeSelectorProps,\n} from \"./types\";\n\nconst defaultMode: ThemeModeTranslations = {\n heading: \"Theme Mode\",\n description:\n \"Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.\",\n\n system: \"System\",\n dark: \"Dark\",\n light: \"Light\",\n};\n\nconst defaultContrast: ThemeContrastTranslations = {\n heading: \"Theme Contrast\",\n description:\n \"Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.\",\n\n standard: \"Standard\",\n medium: \"Medium\",\n high: \"High\",\n};\n\nconst defaultMonochrome: ThemeMonochromeTranslations = {\n heading: \"Monochrome\",\n description:\n \"Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience.\",\n};\n\n/\n Settings UI component for managing application theme appearance.\n \n Provides user controls for:\n * - Theme Mode: Connected button group with `\"System\"`, `\"Light\"`, and `\"Dark\"` options.\n * - Theme Contrast: Connected button group with `\"Standard\"`, `\"Medium\"`, and `\"High\"` options (disabled when monochrome is active).\n * - Monochrome Mode: An interactive {@link Switch} to toggle neutral grayscale styling.\n \n Directly connects to {@link useTheme} to read and update theme settings, which are\n * persisted to local storage and applied to `document.documentElement` by {@link ThemeProvider}.\n \n @example\n * ```tsx\n * import { ThemeProvider, ThemeSelector } from \"@adgytec/web-ui-components\";\n \n export function SettingsMenu() {\n * return (\n * <ThemeProvider>\n * <ThemeSelector />\n * </ThemeProvider>\n * );\n * }\n * ```\n */\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({\n modeDetails = defaultMode,\n contrastDetails = defaultContrast,\n monochromeDetails = defaultMonochrome,\n}) => {\n const {\n mode,\n isMonochrome,\n contrast,\n setContrast,\n setMode,\n setMonochrome,\n } = useTheme();\n\n const themeModeItems = useMemo(() => modeItems(modeDetails), [modeDetails]);\n const themeContrastItems = useMemo(\n () => contrastItems(contrastDetails),\n [contrastDetails]\n );\n\n return (\n <div className={clsx(styles[\"selector\"])}>\n <ThemeItem\n heading={modeDetails.heading}\n description={modeDetails.description}\n >\n <ConnectedButtonGroup\n selectionMode=\"single\"\n selectedKeys={[mode]}\n onSelectionChange={(keys) => {\n const themeMode = Array.from(keys)[0];\n if (!isThemeMode(themeMode)) return;\n\n setMode(themeMode);\n }}\n >\n {themeModeItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <ThemeItem\n heading={contrastDetails.heading}\n description={contrastDetails.description}\n >\n <ConnectedButtonGroup\n color=\"tonal\"\n selectionMode=\"single\"\n selectedKeys={[contrast]}\n onSelectionChange={(keys) => {\n const themeContrast = Array.from(keys)[0];\n if (!isThemeContrast(themeContrast)) return;\n\n setContrast(themeContrast);\n }}\n isDisabled={isMonochrome}\n >\n {themeContrastItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <Switch\n isSelected={isMonochrome}\n onChange={setMonochrome}\n containerStateLayer\n >\n <ThemeItem\n heading={monochromeDetails.heading}\n description={monochromeDetails.description}\n useInline\n ></ThemeItem>\n </Switch>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/Toolbar.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Toolbar","names":[],"sources":["../../src/components/Toolbar/toolbar.module.css","../../src/components/Toolbar/Toolbar.tsx","../../src/components/Toolbar/ToolbarToggleButtonGroup.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-toolbar-background\n\n --md-toolbar-button-background\n* --md-toolbar-toggle-button-background\n* --md-toolbar-toggle-button-selected-background\n\n --md-toolbar-button-color\n* --md-toolbar-toggle-button-color\n* --md-toolbar-toggle-button-selected-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .toolbar {\n --_md-toolbar-background: var(\n --md-toolbar-background,\n var(--_md-toolbar-background-default)\n );\n --_md-toolbar-button-background: var(\n --md-toolbar-button-background,\n var(--_md-toolbar-button-background-default)\n );\n --_md-toolbar-toggle-button-background: var(\n --md-toolbar-toggle-button-background,\n var(--_md-toolbar-toggle-button-background-default)\n );\n --_md-toolbar-toggle-button-selected-background: var(\n --md-toolbar-toggle-button-selected-background,\n var(--_md-toolbar-toggle-button-selected-background-default)\n );\n --_md-toolbar-button-color: var(\n --md-toolbar-button-color,\n var(--_md-toolbar-button-color-default)\n );\n --_md-toolbar-toggle-button-color: var(\n --md-toolbar-toggle-button-color,\n var(--_md-toolbar-toggle-button-color-default)\n );\n --_md-toolbar-toggle-button-selected-color: var(\n --md-toolbar-toggle-button-selected-color,\n var(--_md-toolbar-toggle-button-selected-color-default)\n );\n\n --md-divider-color: var(--_md-toolbar-button-color);\n\n --_md-toolbar-space-between-actions: var(--md-sys-layout-space-4);\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n padding: var(--md-sys-layout-space-8);\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--_md-toolbar-space-between-actions);\n\n background-color: var(--_md-toolbar-background);\n\n .section {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--_md-toolbar-space-between-actions);\n }\n\n &[data-variant=\"floating\"] {\n box-shadow: var(--md-sys-elevation-shadow-3);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column;\n\n .section {\n flex-direction: column;\n }\n }\n }\n\n .toolbar[data-color=\"standard\"] {\n --_md-toolbar-background-default: var(--md-sys-color-surface-container);\n\n --_md-toolbar-button-background-default: var(\n --md-sys-color-surface-container\n );\n\n --_md-toolbar-toggle-button-background-default: var(\n --md-sys-color-surface-container\n );\n\n --_md-toolbar-toggle-button-selected-background-default: var(\n --md-sys-color-secondary-container\n );\n\n --_md-toolbar-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n --_md-toolbar-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n --_md-toolbar-toggle-button-selected-color-default: var(\n --md-sys-color-on-secondary-container\n );\n }\n\n .toolbar[data-color=\"vibrant\"] {\n --_md-toolbar-background-default: var(--md-sys-color-primary-container);\n\n --_md-toolbar-button-background-default: var(\n --md-sys-color-primary-container\n );\n\n --_md-toolbar-toggle-button-background-default: var(\n --md-sys-color-primary-container\n );\n\n --_md-toolbar-toggle-button-selected-background-default: var(\n --md-sys-color-surface-container\n );\n\n --_md-toolbar-button-color-default: var(\n --md-sys-color-on-primary-container\n );\n\n --_md-toolbar-toggle-button-color-default: var(\n --md-sys-color-on-primary-container\n );\n\n --_md-toolbar-toggle-button-selected-color-default: var(\n --md-sys-color-on-surface\n );\n }\n}\n\n@layer adgytec.overrides {\n .toolbar[data-orientation=\"horizontal\"] [data-divider] {\n block-size: auto;\n align-self: stretch;\n }\n\n / button reset /\n .toolbar [data-visual-button] {\n / outlined button /\n --_md-button-outline-width: 0px;\n border: none;\n\n / elevated button /\n box-shadow: none;\n\n --_md-toggle-button-selected-shape: var(--_md-button-shape);\n\n &[data-disabled] {\n background-color: transparent;\n }\n }\n\n .toolbar [data-button]:not([data-color=\"filled\"]),\n .toolbar [data-toggle-button] {\n / colors */\n --md-button-background: var(--_md-toolbar-button-background);\n --md-toggle-button-selected-background: var(\n --_md-toolbar-toggle-button-selected-background\n );\n --md-toggle-button-background: var(\n --_md-toolbar-toggle-button-background\n );\n\n --md-button-color: var(--_md-toolbar-button-color);\n --md-toggle-button-selected-color: var(\n --_md-toolbar-toggle-button-selected-color\n );\n --md-toggle-button-color: var(--_md-toolbar-toggle-button-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Toolbar as AriaToolbar } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\nimport type { ToolbarProps } from \"./types\";\n\nexport const Toolbar: React.FC<ToolbarProps> = ({\n className,\n variant = \"docked\",\n color = \"standard\",\n ...props\n}) => {\n return (\n <AriaToolbar\n className={(renderProps) =>\n clsx(\n styles[\"toolbar\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-variant={variant}\n data-color={color}\n />\n );\n};\n","import clsx from \"clsx\";\nimport { ToggleButtonGroup } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\n\nexport const ToolbarToggleButtonGroup: React.FC<\n React.ComponentPropsWithRef<typeof ToggleButtonGroup>\n> = ({ className, ...props }) => {\n return (\n <ToggleButtonGroup\n className={(renderProps) =>\n clsx(\n styles[\"section\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;GCKa,KAAmC,EAC5C,cACA,aAAU,UACV,WAAQ,YACR,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,gBAAc;CACd,cAAY;AAAM,CAAA,YCnBjB,KAET,MAAA;CAAA,IAAA,KAAA,GAAA,EAAA,EAAA,CAAA,CAAA,GAAA,GAAA;CAAA,AAAA,EAAA,OAAA,KAAwB,IAAA,EAAA,IAAA,IAAA,EAAA,OAAvB,kBAAA,KAAA,GAAuB,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAAA,AAAA,EAAA,OAAA,IASX,IAAA,EAAA,MANM,KAAA,MACP,EACI,EAAM,SACN,OAAO,KAAc,aACf,EAAU,CACF,IAFd,CAGJ,GAAC,EAAA,KAAA,GAAA,EAAA,KAAA;CAAA,IAAA;CAGP,OAHO,EAAA,OAAA,KAAA,EAAA,OAAA,KAPT,IAAA,kBAAC,GAAD;EACe,WAAA;EAMN,GAED;CAAK,CAAA,GACX,EAAA,KAAA,GAAA,EAAA,KAAA,GAAA,EAAA,KAAA,KAAA,IAAA,EAAA,IAVF;AAUE"}
1	+ {"version":3,"file":"Toolbar","names":["Toolbar","AriaToolbar","clsx","styles","_c","clsx","styles","require_compiler_runtime","clsx$1","toolbar_module_default","Toolbar$1","props","Toolbar","\"toolbar\"","className","renderProps","variant","color","import_compiler_runtime","ToolbarToggleButtonGroup","$","t0","t1","t2","ToggleButtonGroup"],"sources":["../../src/components/Toolbar/toolbar.module.css","../../src/components/Toolbar/Toolbar.tsx","../../src/components/Toolbar/ToolbarToggleButtonGroup.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-toolbar-background\n\n --md-toolbar-button-background\n* --md-toolbar-toggle-button-background\n* --md-toolbar-toggle-button-selected-background\n\n --md-toolbar-button-color\n* --md-toolbar-toggle-button-color\n* --md-toolbar-toggle-button-selected-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .toolbar {\n --_md-toolbar-background: var(\n --md-toolbar-background,\n var(--_md-toolbar-background-default)\n );\n --_md-toolbar-button-background: var(\n --md-toolbar-button-background,\n var(--_md-toolbar-button-background-default)\n );\n --_md-toolbar-toggle-button-background: var(\n --md-toolbar-toggle-button-background,\n var(--_md-toolbar-toggle-button-background-default)\n );\n --_md-toolbar-toggle-button-selected-background: var(\n --md-toolbar-toggle-button-selected-background,\n var(--_md-toolbar-toggle-button-selected-background-default)\n );\n --_md-toolbar-button-color: var(\n --md-toolbar-button-color,\n var(--_md-toolbar-button-color-default)\n );\n --_md-toolbar-toggle-button-color: var(\n --md-toolbar-toggle-button-color,\n var(--_md-toolbar-toggle-button-color-default)\n );\n --_md-toolbar-toggle-button-selected-color: var(\n --md-toolbar-toggle-button-selected-color,\n var(--_md-toolbar-toggle-button-selected-color-default)\n );\n\n --md-divider-color: var(--_md-toolbar-button-color);\n\n --_md-toolbar-space-between-actions: var(--md-sys-layout-space-4);\n\n border-radius: var(--md-sys-shape-corner-radius-full);\n padding: var(--md-sys-layout-space-8);\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--_md-toolbar-space-between-actions);\n\n background-color: var(--_md-toolbar-background);\n\n .section {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--_md-toolbar-space-between-actions);\n }\n\n &[data-variant=\"floating\"] {\n box-shadow: var(--md-sys-elevation-shadow-3);\n }\n\n &[data-orientation=\"vertical\"] {\n flex-direction: column;\n\n .section {\n flex-direction: column;\n }\n }\n }\n\n .toolbar[data-color=\"standard\"] {\n --_md-toolbar-background-default: var(--md-sys-color-surface-container);\n\n --_md-toolbar-button-background-default: var(\n --md-sys-color-surface-container\n );\n\n --_md-toolbar-toggle-button-background-default: var(\n --md-sys-color-surface-container\n );\n\n --_md-toolbar-toggle-button-selected-background-default: var(\n --md-sys-color-secondary-container\n );\n\n --_md-toolbar-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n --_md-toolbar-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n --_md-toolbar-toggle-button-selected-color-default: var(\n --md-sys-color-on-secondary-container\n );\n }\n\n .toolbar[data-color=\"vibrant\"] {\n --_md-toolbar-background-default: var(--md-sys-color-primary-container);\n\n --_md-toolbar-button-background-default: var(\n --md-sys-color-primary-container\n );\n\n --_md-toolbar-toggle-button-background-default: var(\n --md-sys-color-primary-container\n );\n\n --_md-toolbar-toggle-button-selected-background-default: var(\n --md-sys-color-surface-container\n );\n\n --_md-toolbar-button-color-default: var(\n --md-sys-color-on-primary-container\n );\n\n --_md-toolbar-toggle-button-color-default: var(\n --md-sys-color-on-primary-container\n );\n\n --_md-toolbar-toggle-button-selected-color-default: var(\n --md-sys-color-on-surface\n );\n }\n}\n\n@layer adgytec.overrides {\n .toolbar[data-orientation=\"horizontal\"] [data-divider] {\n block-size: auto;\n align-self: stretch;\n }\n\n / button reset /\n .toolbar [data-visual-button] {\n / outlined button /\n --_md-button-outline-width: 0px;\n border: none;\n\n / elevated button /\n box-shadow: none;\n\n --_md-toggle-button-selected-shape: var(--_md-button-shape);\n\n &[data-disabled] {\n background-color: transparent;\n }\n }\n\n .toolbar [data-button]:not([data-color=\"filled\"]),\n .toolbar [data-toggle-button] {\n / colors /\n --md-button-background: var(--_md-toolbar-button-background);\n --md-toggle-button-selected-background: var(\n --_md-toolbar-toggle-button-selected-background\n );\n --md-toggle-button-background: var(\n --_md-toolbar-toggle-button-background\n );\n\n --md-button-color: var(--_md-toolbar-button-color);\n --md-toggle-button-selected-color: var(\n --_md-toolbar-toggle-button-selected-color\n );\n --md-toggle-button-color: var(--_md-toolbar-toggle-button-color);\n }\n}\n","import clsx from \"clsx\";\nimport { Toolbar as AriaToolbar } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\nimport type { ToolbarProps } from \"./types\";\n\n/\n Container for a set of related action buttons, toggle buttons, and dividers, following\n * [Material 3 Toolbar](https://m3.material.io/) design patterns.\n \n Extends React Aria Components `Toolbar` with Material 3 styling and interactive behaviors:\n * - Manages single-tab-stop keyboard navigation across action items using arrow keys.\n * - Supports horizontal and vertical orientations via the `orientation` prop.\n * - Supports docked and elevated floating display variants via `variant`.\n * - Provides `\"standard\"` (surface container) and `\"vibrant\"` (primary container) color themes via `color`.\n * - Automatically adjusts button borders, shadows, and colors to seamlessly fit the toolbar surface.\n \n Configurable CSS tokens:\n * - `--md-toolbar-background`: Background color of the toolbar.\n * - `--md-toolbar-button-background`: Background color for buttons within the toolbar.\n * - `--md-toolbar-toggle-button-background`: Background color for toggle buttons.\n * - `--md-toolbar-toggle-button-selected-background`: Background color for selected toggle buttons.\n * - `--md-toolbar-button-color`: Text and icon color for buttons within the toolbar.\n * - `--md-toolbar-toggle-button-color`: Text and icon color for toggle buttons within the toolbar.\n * - `--md-toolbar-toggle-button-selected-color`: Text and icon color for selected toggle buttons.\n \n @example\n * ```tsx\n * import {\n * Divider,\n * IconButton,\n * ToggleIconButton,\n * Toolbar,\n * ToolbarToggleButtonGroup,\n * } from \"@adgytec/web-ui-components\";\n * import { AlignCenter, AlignLeft, AlignRight, Bold, Italic } from \"lucide-react\";\n \n export function EditorToolbar() {\n * return (\n * <Toolbar aria-label=\"Editor actions\" variant=\"floating\">\n * <ToolbarToggleButtonGroup selectionMode=\"single\">\n * <ToggleIconButton id=\"left\" icon={AlignLeft} aria-label=\"Align left\" />\n * <ToggleIconButton id=\"center\" icon={AlignCenter} aria-label=\"Align center\" />\n * <ToggleIconButton id=\"right\" icon={AlignRight} aria-label=\"Align right\" />\n * </ToolbarToggleButtonGroup>\n * <Divider orientation=\"vertical\" />\n * <IconButton icon={Bold} aria-label=\"Bold\" />\n * <IconButton icon={Italic} aria-label=\"Italic\" />\n * </Toolbar>\n * );\n * }\n * ```\n /\nexport const Toolbar: React.FC<ToolbarProps> = ({\n className,\n variant = \"docked\",\n color = \"standard\",\n ...props\n}) => {\n return (\n <AriaToolbar\n className={(renderProps) =>\n clsx(\n styles[\"toolbar\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-variant={variant}\n data-color={color}\n />\n );\n};\n","import clsx from \"clsx\";\nimport { ToggleButtonGroup } from \"react-aria-components\";\nimport styles from \"./toolbar.module.css\";\n\n/\n Props for the {@link ToolbarToggleButtonGroup} component.\n * Extends React Aria Components `ToggleButtonGroup` props.\n /\nexport interface ToolbarToggleButtonGroupProps\n extends React.ComponentPropsWithRef<typeof ToggleButtonGroup> {}\n\n/\n Section wrapper for grouping toggle buttons inside a {@link Toolbar}.\n \n Extends React Aria Components `ToggleButtonGroup` to arrange grouped toggle buttons\n * (e.g. alignment choices, text format styles) with appropriate toolbar spacing,\n * selection handling, and orientation alignment.\n \n @example\n * ```tsx\n * import {\n * ToggleIconButton,\n * Toolbar,\n * ToolbarToggleButtonGroup,\n * } from \"@adgytec/web-ui-components\";\n * import { Bold, Italic } from \"lucide-react\";\n \n export function Example() {\n * return (\n * <Toolbar aria-label=\"Text styles\">\n * <ToolbarToggleButtonGroup selectionMode=\"multiple\" aria-label=\"Format\">\n * <ToggleIconButton id=\"bold\" icon={Bold} aria-label=\"Bold\" />\n * <ToggleIconButton id=\"italic\" icon={Italic} aria-label=\"Italic\" />\n * </ToolbarToggleButtonGroup>\n * </Toolbar>\n * );\n * }\n * ```\n */\nexport const ToolbarToggleButtonGroup: React.FC<\n ToolbarToggleButtonGroupProps\n> = ({ className, ...props }) => {\n return (\n <ToggleButtonGroup\n className={(renderProps) =>\n clsx(\n styles[\"section\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;;GCoDaA,KAAmC,EAC5C,cACA,aAAU,UACV,WAAQ,YACR,GAAGW,QAGC,kBAACV,GAAD;CACI,YAAY,MACRC,EACIC,EAAOU,SACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIH;CACJ,gBAAcK;CACd,cAAYC;AAAM,CAAA,YC/BjBE,KAET,MAAA;CAAA,IAAAC,KAAA,GAAAhB,EAAAA,EAAAA,CAAA,CAAA,GAAAU,GAAAH;CAAA,AAAAS,EAAA,OAAAC,KAAwB,IAAAD,EAAA,IAAA,IAAAA,EAAA,OAAvB,eAAA,GAAAT,KAAAU,GAAuB,EAAA,KAAAA,GAAA,EAAA,KAAAP,GAAA,EAAA,KAAAH;CAAA,IAAAW;CAAA,AAAAF,EAAA,OAAAN,IASX,IAAAM,EAAA,MANM,KAAA,MACPf,EACIC,EAAM,SACN,OAAOQ,KAAc,aACfA,EAAUC,CACF,IAFdD,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAQ;CAAA,IAAAC;CAGP,OAHOH,EAAA,OAAAT,KAAAS,EAAA,OAAAE,KAPT,IAAA,kBAACE,GAAD;EACe,WAAAF;EAMN,GAEDX;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAW,GAAA,EAAA,KAAAC,KAAA,IAAAH,EAAA,IAVFG;AAUE"}

package/dist/chunks/Tooltip.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip","names":[],"sources":["../../src/components/Tooltip/Tooltip/tooltip.module.css","../../src/components/Tooltip/Tooltip/Tooltip.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-tooltip-background\n* --md-tooltip-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tooltip {\n --_md-tooltip-background: var(\n --md-tooltip-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-tooltip-color: var(\n --md-tooltip-color,\n var(--md-sys-color-inverse-on-surface)\n );\n\n --_offset: calc(4 var(--dp, 1px));\n\n background-color: var(--_md-tooltip-background);\n color: var(--_md-tooltip-color);\n\n padding-inline: var(--md-sys-layout-space-8);\n padding-block: var(--md-sys-layout-space-4);\n\n max-inline-size: calc(300 * var(--dp, 1px));\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n transform: translate3d(0, 0, 0);\n transition:\n transform var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-placement=\"bottom\"] {\n --_origin: translateY(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"top\"] {\n --_origin: translateY(var(--_offset));\n }\n\n &[data-placement=\"right\"] {\n --_origin: translateX(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"left\"] {\n --_origin: translateX(var(--_offset));\n }\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--_origin);\n opacity: 0;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Tooltip as AriaTooltip } from \"react-aria-components\";\nimport { typography } from \"@/utils/typography\";\nimport styles from \"./tooltip.module.css\";\n\~~nexport~~ ~~const~~ Tooltip: React~~.FC<\~~n React.ComponentPropsWithRef<typeof AriaTooltip>\n> = ({ className, offset = 4, ...props }) => {\n return (\n <AriaTooltip\n offset={offset}\n className={(renderProps) =>\n clsx(\n styles[\"tooltip\"],\n typography.labelMedium,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-tooltip\n />\n );\n};\n"],"mappings":";;;;~~yCCKa~~,~~KAER~~,~~EAAE~~,~~cAAW~~,YAAS,~~GAAG~~,~~GAAG~~,~~QAEzB~~,~~kBAAC~~,GAAD;CACY;CACR,YAAY,~~MACR~~,~~EACI~~,~~EAAO~~,~~SACP~~,EAAW,aACX,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;CAEJ,~~GAAI~~;CACJ,gBAAA;AAAY,CAAA"}
1	+ {"version":3,"file":"Tooltip","names":["Tooltip","AriaTooltip","clsx","styles","typography","clsx$1","tooltip_module_default","Tooltip$1","props","Tooltip","\"tooltip\"","className","renderProps"],"sources":["../../src/components/Tooltip/Tooltip/tooltip.module.css","../../src/components/Tooltip/Tooltip/Tooltip.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-tooltip-background\n* --md-tooltip-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tooltip {\n --_md-tooltip-background: var(\n --md-tooltip-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-tooltip-color: var(\n --md-tooltip-color,\n var(--md-sys-color-inverse-on-surface)\n );\n\n --_offset: calc(4 var(--dp, 1px));\n\n background-color: var(--_md-tooltip-background);\n color: var(--_md-tooltip-color);\n\n padding-inline: var(--md-sys-layout-space-8);\n padding-block: var(--md-sys-layout-space-4);\n\n max-inline-size: calc(300 * var(--dp, 1px));\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n transform: translate3d(0, 0, 0);\n transition:\n transform var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n &[data-placement=\"bottom\"] {\n --_origin: translateY(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"top\"] {\n --_origin: translateY(var(--_offset));\n }\n\n &[data-placement=\"right\"] {\n --_origin: translateX(calc(-1 * var(--_offset)));\n }\n\n &[data-placement=\"left\"] {\n --_origin: translateX(var(--_offset));\n }\n\n &[data-entering],\n &[data-exiting] {\n transform: var(--_origin);\n opacity: 0;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Tooltip as AriaTooltip } from \"react-aria-components\";\nimport { typography } from \"@/utils/typography\";\nimport styles from \"./tooltip.module.css\";\n\n/*\n Props for the {@link Tooltip} component.\n * Extends React Aria Components `Tooltip` props.\n \n Configurable CSS tokens:\n * - `--md-tooltip-background`: Background color of the tooltip (`var(--md-sys-color-inverse-surface)`).\n * - `--md-tooltip-color`: Text color of the tooltip (`var(--md-sys-color-inverse-on-surface)`).\n /\nexport interface TooltipProps\n extends React.ComponentPropsWithRef<typeof AriaTooltip> {}\n\n/\n Plain tooltip component implementing [Material 3 Tooltips](https://m3.material.io/components/tooltips/overview).\n \n Provides brief, informative text messages when hovering, focusing, or long-pressing an element.\n * Supports smooth directional entrance/exit slide transitions and opacity fading based on `data-placement`.\n \n Configurable CSS tokens:\n * - `--md-tooltip-background`: Background color of the tooltip (`var(--md-sys-color-inverse-surface)`).\n * - `--md-tooltip-color`: Text color of the tooltip (`var(--md-sys-color-inverse-on-surface)`).\n \n @example\n * ```tsx\n * import { Button, Tooltip, TooltipTrigger } from \"@adgytec/web-ui-components\";\n \n export function Example() {\n * return (\n * <TooltipTrigger>\n * <Button label=\"Save Changes\" />\n * <Tooltip placement=\"top\">Saves the current document</Tooltip>\n * </TooltipTrigger>\n * );\n * }\n * ```\n */\nexport const Tooltip: React.FC<TooltipProps> = ({\n className,\n offset = 4,\n ...props\n}) => {\n return (\n <AriaTooltip\n offset={offset}\n className={(renderProps) =>\n clsx(\n styles[\"tooltip\"],\n typography.labelMedium,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-tooltip\n />\n );\n};\n"],"mappings":";;;;yCCwCaA,KAAmC,EAC5C,cACA,YAAS,GACT,GAAGQ,QAGC,kBAACP,GAAD;CACY;CACR,YAAY,MACRC,EACIC,EAAOO,SACPN,EAAW,aACX,OAAOO,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIH;CACJ,gBAAA;AAAY,CAAA"}

package/dist/chunks/base.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"base","names":[],"sources":["../../src/utils/typography/base.ts"],"sourcesContent":["~~export~~ const typography = {\n displayLarge: \"typography-display-large\",\n displayLargeEmphasized: \"typography-display-large-emphasized\",\n\n displayMedium: \"typography-display-medium\",\n displayMediumEmphasized: \"typography-display-medium-emphasized\",\n\n displaySmall: \"typography-display-small\",\n displaySmallEmphasized: \"typography-display-small-emphasized\",\n\n headlineLarge: \"typography-headline-large\",\n headlineLargeEmphasized: \"typography-headline-large-emphasized\",\n\n headlineMedium: \"typography-headline-medium\",\n headlineMediumEmphasized: \"typography-headline-medium-emphasized\",\n\n headlineSmall: \"typography-headline-small\",\n headlineSmallEmphasized: \"typography-headline-small-emphasized\",\n\n titleLarge: \"typography-title-large\",\n titleLargeEmphasized: \"typography-title-large-emphasized\",\n\n titleMedium: \"typography-title-medium\",\n titleMediumEmphasized: \"typography-title-medium-emphasized\",\n\n titleSmall: \"typography-title-small\",\n titleSmallEmphasized: \"typography-title-small-emphasized\",\n\n bodyLarge: \"typography-body-large\",\n bodyLargeEmphasized: \"typography-body-large-emphasized\",\n\n bodyMedium: \"typography-body-medium\",\n bodyMediumEmphasized: \"typography-body-medium-emphasized\",\n\n bodySmall: \"typography-body-small\",\n bodySmallEmphasized: \"typography-body-small-emphasized\",\n\n labelLarge: \"typography-label-large\",\n labelLargeEmphasized: \"typography-label-large-emphasized\",\n\n labelMedium: \"typography-label-medium\",\n labelMediumEmphasized: \"typography-label-medium-emphasized\",\n\n labelSmall: \"typography-label-small\",\n labelSmallEmphasized: \"typography-label-small-emphasized\",\n} as const;\n\nexport type TypographyVariant = (typeof typography)[keyof typeof typography];\n"],"mappings":";~~AAAA~~,~~IAAa~~,IAAa;~~CACtB~~,cAAc;~~CACd~~,wBAAwB;~~CAExB~~,eAAe;~~CACf~~,yBAAyB;~~CAEzB~~,cAAc;~~CACd~~,wBAAwB;~~CAExB~~,eAAe;~~CACf~~,yBAAyB;~~CAEzB~~,gBAAgB;~~CAChB~~,0BAA0B;~~CAE1B~~,eAAe;~~CACf~~,yBAAyB;~~CAEzB~~,YAAY;~~CACZ~~,sBAAsB;~~CAEtB~~,aAAa;~~CACb~~,uBAAuB;~~CAEvB~~,YAAY;~~CACZ~~,sBAAsB;~~CAEtB~~,WAAW;~~CACX~~,qBAAqB;~~CAErB~~,YAAY;~~CACZ~~,sBAAsB;~~CAEtB~~,WAAW;~~CACX~~,qBAAqB;~~CAErB~~,YAAY;~~CACZ~~,sBAAsB;~~CAEtB~~,aAAa;~~CACb~~,uBAAuB;~~CAEvB~~,YAAY;~~CACZ~~,sBAAsB;AAC1B"}
1	+ {"version":3,"file":"base","names":["typography"],"sources":["../../src/utils/typography/base.ts"],"sourcesContent":["/*\n Standard typography variants based on Material Design 3 guidelines.\n \n Maps typography roles to pre-defined CSS class names configuring font-family,\n * font-size, line-height, letter-spacing, and font-weight.\n \n Each role is available in two forms:\n * - Standard: The default type scale definition.\n * - Emphasized: A heavier font-weight variant (e.g., medium/semi-bold/bold) for emphasis.\n \n ### Categories:\n * - Display: Large, expressive short text (e.g. hero stats, numbers).\n * - Headline: High-emphasis titles for main screens or sections.\n * - Title: Medium-emphasis headers for cards, dialogs, and list items.\n * - Body: Longer passages, descriptive copy, and form inputs.\n * - Label: Compact utility styles for buttons, chips, tabs, and form field captions.\n \n @example\n * ```tsx\n * import { typography } from '@adgytec/web-ui-components';\n * import clsx from 'clsx';\n \n function Heading() {\n * return (\n * <h1 className={clsx(typography.headlineLarge)}>\n * Dashboard Overview\n * </h1>\n * );\n * }\n * ```\n /\nexport const typography = {\n // 1. Display\n\n /* Large display style (57px) for high-impact, short hero text. /\n displayLarge: \"typography-display-large\",\n /* Emphasized (heavier weight) variant of `displayLarge`. /\n displayLargeEmphasized: \"typography-display-large-emphasized\",\n\n /* Medium display style (45px) for prominent short text. /\n displayMedium: \"typography-display-medium\",\n /* Emphasized (heavier weight) variant of `displayMedium`. /\n displayMediumEmphasized: \"typography-display-medium-emphasized\",\n\n /* Small display style (36px) for compact hero headings. /\n displaySmall: \"typography-display-small\",\n /* Emphasized (heavier weight) variant of `displaySmall`. /\n displaySmallEmphasized: \"typography-display-small-emphasized\",\n\n // 2. Headline\n\n /* Large headline style (32px) for primary screen and section titles. /\n headlineLarge: \"typography-headline-large\",\n /* Emphasized (heavier weight) variant of `headlineLarge`. /\n headlineLargeEmphasized: \"typography-headline-large-emphasized\",\n\n /* Medium headline style (28px) for secondary screen titles. /\n headlineMedium: \"typography-headline-medium\",\n /* Emphasized (heavier weight) variant of `headlineMedium`. /\n headlineMediumEmphasized: \"typography-headline-medium-emphasized\",\n\n /* Small headline style (24px) for tertiary screen titles. /\n headlineSmall: \"typography-headline-small\",\n /* Emphasized (heavier weight) variant of `headlineSmall`. /\n headlineSmallEmphasized: \"typography-headline-small-emphasized\",\n\n // 3. Title\n\n /* Large title style (22px) for top-level card titles, app bars, and dialog headers. /\n titleLarge: \"typography-title-large\",\n /* Emphasized (heavier weight) variant of `titleLarge`. /\n titleLargeEmphasized: \"typography-title-large-emphasized\",\n\n /* Medium title style (16px) for section headers and prominent list items. /\n titleMedium: \"typography-title-medium\",\n /* Emphasized (heavier weight) variant of `titleMedium`. /\n titleMediumEmphasized: \"typography-title-medium-emphasized\",\n\n /* Small title style (14px) for compact card headers, subheads, and tabs. /\n titleSmall: \"typography-title-small\",\n /* Emphasized (heavier weight) variant of `titleSmall`. /\n titleSmallEmphasized: \"typography-title-small-emphasized\",\n\n // 4. Body\n\n /* Large body style (16px) for primary body text, article paragraphs, and form inputs. /\n bodyLarge: \"typography-body-large\",\n /* Emphasized (heavier weight) variant of `bodyLarge`. /\n bodyLargeEmphasized: \"typography-body-large-emphasized\",\n\n /* Medium body style (14px) for secondary descriptions and supporting text. /\n bodyMedium: \"typography-body-medium\",\n /* Emphasized (heavier weight) variant of `bodyMedium`. /\n bodyMediumEmphasized: \"typography-body-medium-emphasized\",\n\n /* Small body style (12px) for compact descriptions, disclaimers, and legal text. /\n bodySmall: \"typography-body-small\",\n /* Emphasized (heavier weight) variant of `bodySmall`. /\n bodySmallEmphasized: \"typography-body-small-emphasized\",\n\n // 5. Label\n\n /* Large label style (14px) for buttons, navigation items, chips, and field labels. /\n labelLarge: \"typography-label-large\",\n /* Emphasized (heavier weight) variant of `labelLarge`. /\n labelLargeEmphasized: \"typography-label-large-emphasized\",\n\n /* Medium label style (12px) for helper text, tooltips, tags, and character counts. /\n labelMedium: \"typography-label-medium\",\n /* Emphasized (heavier weight) variant of `labelMedium`. /\n labelMediumEmphasized: \"typography-label-medium-emphasized\",\n\n /* Small label style (11px) for overline text, timestamps, and compact metadata. /\n labelSmall: \"typography-label-small\",\n /* Emphasized (heavier weight) variant of `labelSmall`. /\n labelSmallEmphasized: \"typography-label-small-emphasized\",\n} as const;\n\n/\n Union of all standard typography CSS class name values in {@link typography}.\n /\nexport type TypographyVariant = (typeof typography)[keyof typeof typography];\n\n/\n Union of all standard typography role keys in {@link typography}.\n */\nexport type TypographyKey = keyof typeof typography;\n"],"mappings":";AA+BA,IAAaA,IAAa;CAItB,cAAc;CAEd,wBAAwB;CAGxB,eAAe;CAEf,yBAAyB;CAGzB,cAAc;CAEd,wBAAwB;CAKxB,eAAe;CAEf,yBAAyB;CAGzB,gBAAgB;CAEhB,0BAA0B;CAG1B,eAAe;CAEf,yBAAyB;CAKzB,YAAY;CAEZ,sBAAsB;CAGtB,aAAa;CAEb,uBAAuB;CAGvB,YAAY;CAEZ,sBAAsB;CAKtB,WAAW;CAEX,qBAAqB;CAGrB,YAAY;CAEZ,sBAAsB;CAGtB,WAAW;CAEX,qBAAqB;CAKrB,YAAY;CAEZ,sBAAsB;CAGtB,aAAa;CAEb,uBAAuB;CAGvB,YAAY;CAEZ,sBAAsB;AAC1B"}

package/dist/chunks/compiler-runtime CHANGED Viewed

@@ -1,7 +1,7 @@
 import * as e from "react";
 //#region \0rolldown/runtime.js
 var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), n = /* @__PURE__ */ t(((t, n) => {
-	n.exports = { ...e };
+	n.exports = Object.prototype.hasOwnProperty.call(e, "module.exports") ? e["module.exports"] : { ...e };
 })), r = /* @__PURE__ */ t(((e) => {
 	var t = n().__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;
 	e.c = function(e) {
@@ -16,7 +16,7 @@ var t = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 		};
 	})();
 })), a = /* @__PURE__ */ t(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = r() : t.exports = i();
+	t.exports = process.env.NODE_ENV === "production" ? r() : i();
 }));
 //#endregion
 export { a as t };

package/dist/chunks/compiler-runtime.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"compiler-runtime","names":[],"sources":["../../builtin:esm-external-require-react","../../node_modules/react/cjs/react-compiler-runtime.production.js","../../node_modules/react/cjs/react-compiler-runtime.development.js","../../node_modules/react/compiler-runtime.js"],"sourcesContent":["import * as m from 'react';module.exports = { ...m };","/*\n @license React\n * react-compiler-runtime.production.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\nvar ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\nexports.c = function (size) {\n return ReactSharedInternals.H.useMemoCache(size);\n};\n","/\n @license React\n * react-compiler-runtime.development.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n var ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\n exports.c = function (size) {\n var dispatcher = ReactSharedInternals.H;\n null === dispatcher &&\n console.error(\n \"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\\n1. You might have mismatching versions of React and the renderer (such as React DOM)\\n2. You might be breaking the Rules of Hooks\\n3. You might have more than one copy of React in the same app\\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.\"\n );\n return dispatcher.useMemoCache(size);\n };\n })();\n","/\n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-compiler-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-compiler-runtime.development.js');\n}\n"],"~~x_google_ignoreList~~":[1,2,3],"mappings":";;;CAA2B,EAAO,UAAU,~~EAAE~~,GAAG,EAAE;;~~CCWnD~~,~~IAAI~~,~~IAAA~~,EAAA,CAAA,CACe;CACnB,EAAQ,IAAI,SAAU,GAAM;EAC1B,~~OAAO~~,EAAqB,EAAE,~~aAAa~~,CAAI;CACjD;;CCJA,AAAA,QAAA,IAAA,aAAA,iBACG,WAAY;EACX,~~IAAI~~,~~IAAA~~,EAAA,CAAA,CACe;EACnB,EAAQ,IAAI,SAAU,GAAM;GAC1B,~~IAAI~~,~~IAAa~~,EAAqB;GAKtC,~~OAJS~~,MAAT,QACE,QAAQ,MACN,+aACF,~~GACK~~,EAAW,~~aAAa~~,CAAI;EACrC;CACF,EAAA,CAAG;;CCdL,~~AAAA~~,QAAA,IAAA,aAA6B,~~eAC3B~~,~~EAAO,UAAA,~~EAAA,~~IAEP~~,~~EAAO,UAAA,~~EAAA"}
1	+ {"version":3,"file":"compiler-runtime","names":["m","__commonJSMin","mod","cb","require_builtin_esm_external_require_react","require_react_compiler_runtime_production","ReactSharedInternals","size","require_react_compiler_runtime_development","dispatcher","require_compiler_runtime","module"],"sources":["../../builtin:esm-external-require-react","../../node_modules/react/cjs/react-compiler-runtime.production.js","../../node_modules/react/cjs/react-compiler-runtime.development.js","../../node_modules/react/compiler-runtime.js"],"sourcesContent":["import * as m from 'react';module.exports = Object.prototype.hasOwnProperty.call(m, 'module.exports') ? m['module.exports'] : { ...m };","/*\n @license React\n * react-compiler-runtime.production.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\nvar ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\nexports.c = function (size) {\n return ReactSharedInternals.H.useMemoCache(size);\n};\n","/\n @license React\n * react-compiler-runtime.development.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n var ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\n exports.c = function (size) {\n var dispatcher = ReactSharedInternals.H;\n null === dispatcher &&\n console.error(\n \"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\\n1. You might have mismatching versions of React and the renderer (such as React DOM)\\n2. You might be breaking the Rules of Hooks\\n3. You might have more than one copy of React in the same app\\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.\"\n );\n return dispatcher.useMemoCache(size);\n };\n })();\n","/\n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-compiler-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-compiler-runtime.development.js');\n}\n"],"ignoreList":[1,2,3],"mappings":";;;CAA2B,EAAO,UAAU,OAAO,UAAU,eAAe,KAAKA,GAAG,gBAAgB,IAAIA,EAAE,oBAAoB,EAAE,GAAGA,EAAE;;CCWrI,IAAIM,IAAAF,EAAA,CAAA,CACe;CACnB,EAAQ,IAAI,SAAU,GAAM;EAC1B,OAAOE,EAAqB,EAAE,aAAaC,CAAI;CACjD;;CCJA,AAAA,QAAA,IAAA,aAAA,iBACG,WAAY;EACX,IAAID,IAAAF,EAAA,CAAA,CACe;EACnB,EAAQ,IAAI,SAAU,GAAM;GAC1B,IAAIK,IAAaH,EAAqB;GAKtC,OAJSG,MAAT,QACE,QAAQ,MACN,+aACF,GACKA,EAAW,aAAaF,CAAI;EACrC;CACF,EAAA,CAAG;;CCdL,AAGEI,EAAO,UAHT,QAAA,IAAA,aAA6B,eACpBN,EAAA,IAEAG,EAAA"}

package/dist/chunks/context.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context","names":[],"sources":["../../src/components/Input/Select/ComboBox/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ComboBoxRenderProps } from \"react-aria-components\";\n\nexport const ComboboxContext = createContext<Partial<ComboBoxRenderProps>>({});\n"],"mappings":";;~~AAGA~~,~~IAAa~~,~~IAAkB~~,EAA4C,CAAC,CAAC"}
1	+ {"version":3,"file":"context","names":["ComboboxContext","createContext"],"sources":["../../src/components/Input/Select/ComboBox/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ComboBoxRenderProps } from \"react-aria-components\";\n\n/*\n Context communicating ComboBox state (e.g. `isOpen`, `isInvalid`, `isDisabled`) down to {@link ComboBoxTrigger}.\n */\nexport const ComboboxContext = createContext<Partial<ComboBoxRenderProps>>({});\n"],"mappings":";;AAMA,IAAaA,IAAkBC,EAA4C,CAAC,CAAC"}

package/dist/chunks/core CHANGED Viewed

@@ -55,48 +55,50 @@ var v = {
 	large: n.headlineSmall,
 	"extra-large": n.headlineLarge
 }, T = (e) => x[e], E = x.size, D = { button: "_button_4jeo2_2" }, O = e(), k = (e) => {
-	let n = (0, O.c)(23), o, c, l, m, _, v;
-	n[0] === e ? (o = n[1], c = n[2], l = n[3], m = n[4], _ = n[5], v = n[6]) : ({icon: c, selectedIcon: v, children: o, onPress: m, iconPlacement: l, ..._} = e, n[0] = e, n[1] = o, n[2] = c, n[3] = l, n[4] = m, n[5] = _, n[6] = v);
-	let { shape: x, size: C, color: T, iconPlacement: E } = s(), k = l ?? E ?? "start", { splashInfo: A, handlePress: j } = a(m), M = typeof o == "function", N;
-	n[7] === T ? N = n[8] : (N = u(h, t, y(T)), n[7] = T, n[8] = N);
-	let P;
-	n[9] !== k || n[10] !== o || n[11] !== c || n[12] !== M || n[13] !== v || n[14] !== x || n[15] !== C || n[16] !== A ? (P = (e) => {
-		let { isSelected: t, isDisabled: n, isFocusVisible: a, isFocused: s, isPressed: l, isHovered: p } = e, m = {
+	let n = (0, O.c)(29), o, c, l, m, _, v, x, C;
+	n[0] === e ? (o = n[1], c = n[2], l = n[3], m = n[4], _ = n[5], v = n[6], x = n[7], C = n[8]) : ({icon: l, selectedIcon: x, children: o, onPress: _, iconPlacement: m, tooltip: C, className: c, ...v} = e, n[0] = e, n[1] = o, n[2] = c, n[3] = l, n[4] = m, n[5] = _, n[6] = v, n[7] = x, n[8] = C);
+	let { shape: T, size: E, color: k, iconPlacement: A } = s(), M = m ?? A ?? "start", { splashInfo: N, handlePress: P } = a(_), F = typeof o == "function", I;
+	n[9] !== c || n[10] !== k ? (I = (e) => u(h, t, y(k), typeof c == "function" ? c(e) : c), n[9] = c, n[10] = k, n[11] = I) : I = n[11];
+	let L;
+	n[12] !== M || n[13] !== o || n[14] !== l || n[15] !== F || n[16] !== x || n[17] !== T || n[18] !== E || n[19] !== N ? (L = (e) => {
+		let { isSelected: t, isDisabled: n, isFocusVisible: a, isFocused: s, isPressed: c, isHovered: p } = e, m = {
 			"data-hovered": p || void 0,
 			"data-disabled": n || void 0,
 			"data-focused": s || void 0,
 			"data-focus-visible": a || void 0,
-			"data-pressed": l || void 0,
+			"data-pressed": c || void 0,
 			"data-selected": t || void 0,
 			"data-toggle-button": !0,
-			"data-shape": x,
+			"data-shape": T,
 			"data-visual-button": !0
-		}, h = c;
-		t && v && (h = v);
-		let _ = S[C], y = h && /* @__PURE__ */ d(r, {
+		}, h = l;
+		t && x && (h = x);
+		let _ = S[E], v = h && /* @__PURE__ */ d(r, {
 			icon: h,
 			size: _
 		});
 		return /* @__PURE__ */ f("span", {
 			...m,
-			className: u(g, b, w[C], D.button),
+			className: u(g, b, w[E], D.button),
 			children: [
-				A && /* @__PURE__ */ d(i, { ...A }),
-				k === "start" && y,
-				M ? o(e) : o,
-				k === "end" && y
+				N && /* @__PURE__ */ d(i, { ...N }),
+				M === "start" && v,
+				F ? o(e) : o,
+				M === "end" && v
 			]
 		});
-	}, n[9] = k, n[10] = o, n[11] = c, n[12] = M, n[13] = v, n[14] = x, n[15] = C, n[16] = A, n[17] = P) : P = n[17];
-	let F;
-	return n[18] !== j || n[19] !== _ || n[20] !== N || n[21] !== P ? (F = /* @__PURE__ */ d(p, {
-		onPress: j,
-		className: N,
-		..._,
+	}, n[12] = M, n[13] = o, n[14] = l, n[15] = F, n[16] = x, n[17] = T, n[18] = E, n[19] = N, n[20] = L) : L = n[20];
+	let R;
+	n[21] !== P || n[22] !== v || n[23] !== I || n[24] !== L ? (R = /* @__PURE__ */ d(p, {
+		onPress: P,
+		className: I,
+		...v,
 		"data-connected-button": !0,
 		"data-button": !0,
-		children: P
-	}), n[18] = j, n[19] = _, n[20] = N, n[21] = P, n[22] = F) : F = n[22], F;
+		children: L
+	}), n[21] = P, n[22] = v, n[23] = I, n[24] = L, n[25] = R) : R = n[25];
+	let z;
+	return n[26] !== R || n[27] !== C ? (z = j(R, C), n[26] = R, n[27] = C, n[28] = z) : z = n[28], z;
 };
 //#endregion
 //#region src/components/Button/core/useButtonConfig.ts