@adgytec/adgytec-web-ui-components 1.1.4 → 2.0.0

package/dist/chunks/ThemeSelector

@@ -0,0 +1,192 @@
+import { r as e } from "./core";
+import { t } from "./base";
+import { t as n } from "./ConnectedButtonGroup";
+import { t as r } from "./Switch";
+import i from "clsx";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useLayoutEffect as s, useMemo as c } from "react";
+import { useLocalStorage as l, useMediaQuery as u } from "usehooks-ts";
+import '../assets/ThemeSelector.css';//#region src/utils/theme/build.ts
+var d = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
+	let r = e ? "dark" : "light";
+	return t ? `monochrome-${r}` : `${r}${n === "standard" ? "" : n === "medium" ? "-medium-contrast" : "-high-contrast"}`;
+}, f = "(prefers-color-scheme: dark)", p = "application-theme";
+function m({ defaultThemeMode: e = "system", defaultContrast: t = "standard", isMonochrome: n = !1, localStorageKey: r = p, initializeWithValue: i = !0 } = {}) {
+	let a = {
+		mode: e,
+		contrast: t,
+		isMonochrome: n
+	}, o = u(f, { initializeWithValue: i }), [s, c] = l(r, a, { initializeWithValue: i }), d = s.mode === "dark" || s.mode === "system" && o, m = (e) => {
+		c((t) => ({
+			...t,
+			mode: e
+		}));
+	}, h = (e) => {
+		c((t) => ({
+			...t,
+			contrast: e
+		}));
+	}, g = (e) => {
+		c((t) => ({
+			...t,
+			isMonochrome: e
+		}));
+	};
+	return {
+		...s,
+		isDarkMode: d,
+		setMode: m,
+		setContrast: h,
+		setMonochrome: g
+	};
+}
+//#endregion
+//#region src/components/ThemeSelector/ThemeProvider.tsx
+var h = ({ children: e }) => {
+	let { isDarkMode: t, isMonochrome: n, contrast: r } = m();
+	return s(() => {
+		let e = d({
+			isDarkMode: t,
+			isMonochrome: n,
+			contrast: r
+		});
+		document.documentElement.setAttribute("data-theme", e);
+	}, [
+		t,
+		n,
+		r
+	]), e;
+}, g = (e) => [
+	{
+		id: "system",
+		value: e.system
+	},
+	{
+		id: "light",
+		value: e.light
+	},
+	{
+		id: "dark",
+		value: e.dark
+	}
+], _ = (e) => [
+	{
+		id: "standard",
+		value: e.standard
+	},
+	{
+		id: "medium",
+		value: e.medium
+	},
+	{
+		id: "high",
+		value: e.high
+	}
+];
+function v(e) {
+	return e === "system" || e === "dark" || e === "light";
+}
+function y(e) {
+	return e === "standard" || e === "medium" || e === "high";
+}
+var b = {
+	selector: "_selector_o55o3_2",
+	"theme-item": "_theme-item_o55o3_7",
+	"theme-item-info": "_theme-item-info_o55o3_12"
+}, x = ({ heading: e, description: n, children: r, className: s, useInline: c = !1 }) => c ? /* @__PURE__ */ o("span", {
+	className: i(b["theme-item"], s),
+	children: [/* @__PURE__ */ o("span", {
+		className: i(b["theme-item-info"]),
+		children: [/* @__PURE__ */ a("span", {
+			className: i(t.titleMedium),
+			slot: "label",
+			children: e
+		}), n && /* @__PURE__ */ a("span", {
+			className: i(t.bodyMedium),
+			slot: "description",
+			children: n
+		})]
+	}), r]
+}) : /* @__PURE__ */ o("div", {
+	className: i(b["theme-item"], s),
+	children: [/* @__PURE__ */ o("div", {
+		className: i(b["theme-item-info"]),
+		children: [/* @__PURE__ */ a("h3", {
+			className: i(t.titleMedium),
+			children: e
+		}), n && /* @__PURE__ */ a("p", {
+			className: i(t.bodyMedium),
+			children: n
+		})]
+	}), r]
+}), S = {
+	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"
+}, C = {
+	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"
+}, w = {
+	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."
+}, T = ({ modeDetails: t = S, contrastDetails: s = C, monochromeDetails: l = w }) => {
+	let { mode: u, isMonochrome: d, contrast: f, setContrast: p, setMode: h, setMonochrome: T } = m(), E = c(() => g(t), [t]), D = c(() => _(s), [s]);
+	return /* @__PURE__ */ o("div", {
+		className: i(b.selector),
+		children: [
+			/* @__PURE__ */ a(x, {
+				heading: t.heading,
+				description: t.description,
+				children: /* @__PURE__ */ a(n, {
+					selectionMode: "single",
+					selectedKeys: [u],
+					onSelectionChange: (e) => {
+						let t = Array.from(e)[0];
+						v(t) && h(t);
+					},
+					children: E.map((t) => /* @__PURE__ */ a(e, {
+						id: t.id,
+						children: t.value
+					}, t.id))
+				})
+			}),
+			/* @__PURE__ */ a(x, {
+				heading: s.heading,
+				description: s.description,
+				children: /* @__PURE__ */ a(n, {
+					color: "tonal",
+					selectionMode: "single",
+					selectedKeys: [f],
+					onSelectionChange: (e) => {
+						let t = Array.from(e)[0];
+						y(t) && p(t);
+					},
+					isDisabled: d,
+					children: D.map((t) => /* @__PURE__ */ a(e, {
+						id: t.id,
+						children: t.value
+					}, t.id))
+				})
+			}),
+			/* @__PURE__ */ a(r, {
+				isSelected: d,
+				onChange: T,
+				containerStateLayer: !0,
+				children: /* @__PURE__ */ a(x, {
+					heading: l.heading,
+					description: l.description,
+					useInline: !0
+				})
+			})
+		]
+	});
+};
+//#endregion
+export { d as i, h as n, m as r, T as t };
+
+//# sourceMappingURL=ThemeSelector.map

package/dist/chunks/ThemeSelector.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeSelector","names":[],"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,GAAU,OAAU;GAAE,GAAG;GAAM;EAAS,EAAE;CAC9C,GAEM,KAAiB,MAA0B;EAC7C,GAAU,OAAU;GAAE,GAAG;GAAM;EAAa,EAAE;CAClD;CAEA,OAAO;EACH,GAAG;EACH;EACA;EACA;EACA;CACJ;AACJ;;;ACrDA,IAAa,KAAiB,EAAE,kBAAyC;CACrE,IAAM,EAAE,eAAY,iBAAc,gBAAa,EAAS;CAWxD,OATA,QAAsB;EAClB,IAAM,IAAc,EAAiB;GACjC;GACA;GACA;EACJ,CAAC;EACD,SAAS,gBAAgB,aAAa,cAAc,CAAW;CACnE,GAAG;EAAC;EAAY;EAAc;CAAQ,CAAC,GAEhC;AACX,GCZa,KACT,MAKO;CACH;EAAE,IAAI;EAAU,OAAO,EAAY;CAAO;CAC1C;EAAE,IAAI;EAAS,OAAO,EAAY;CAAM;CACxC;EAAE,IAAI;EAAQ,OAAO,EAAY;CAAK;AAC1C,GAGS,KACT,MAKO;CACH;EAAE,IAAI;EAAY,OAAO,EAAgB;CAAS;CAClD;EAAE,IAAI;EAAU,OAAO,EAAgB;CAAO;CAC9C;EAAE,IAAI;EAAQ,OAAO,EAAgB;CAAK;AAC9C;AAGJ,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,EAAE;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,oBAAoB,MAAS;MACzB,IAAM,IAAgB,MAAM,KAAK,CAAI,EAAE;MAClC,EAAgB,CAAa,KAElC,EAAY,CAAa;KAC7B;KACA,YAAY;eAEX,EAAmB,KAAK,MACrB,kBAAC,GAAD;MAA+B,IAAI,EAAK;gBACnC,EAAK;KACO,GAFK,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"}

package/dist/chunks/Toolbar

@@ -0,0 +1,19 @@
+import e from "clsx";
+import { ToggleButtonGroup as t, Toolbar as n } from "react-aria-components";
+import { jsx as r } from "react/jsx-runtime";
+import '../assets/Toolbar.css';var i = {
+	toolbar: "_toolbar_9s41z_16",
+	section: "_section_9s41z_60"
+}, a = ({ className: t, variant: a = "docked", color: o = "standard", ...s }) => /* @__PURE__ */ r(n, {
+	className: (n) => e(i.toolbar, typeof t == "function" ? t(n) : t),
+	...s,
+	"data-variant": a,
+	"data-color": o
+}), o = ({ className: n, ...a }) => /* @__PURE__ */ r(t, {
+	className: (t) => e(i.section, typeof n == "function" ? n(t) : n),
+	...a
+});
+//#endregion
+export { a as n, o as t };
+
+//# sourceMappingURL=Toolbar.map

package/dist/chunks/Toolbar.map

@@ -0,0 +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;AACf,CAAA,GCpBI,KAER,EAAE,cAAW,GAAG,QAEb,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,SACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;AACP,CAAA"}

package/dist/chunks/Tooltip

@@ -1,33 +1,14 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { clsx as e } from "clsx";
-import { TooltipTrigger as n, Tooltip as y, OverlayArrow as l } from "react-aria-components";
-import '../assets/Tooltip.css';const p = "_tooltip_1ka4y_1", m = "_primary_1ka4y_67", k = "_secondary_1ka4y_77", d = "_tertiary_1ka4y_82", u = "_error_1ka4y_87", v = "_success_1ka4y_97", t = {
-  tooltip: p,
-  "tooltip-arrow": "_tooltip-arrow_1ka4y_24",
-  primary: m,
-  "primary-variant": "_primary-variant_1ka4y_72",
-  secondary: k,
-  tertiary: d,
-  error: u,
-  "inverse-surface": "_inverse-surface_1ka4y_92",
-  success: v
-}, h = ({
-  children: a,
-  description: s,
-  theme: i = "inverse-surface",
-  delay: _ = 250,
-  closeDelay: c = 150
-}) => s ? /* @__PURE__ */ r(n, { delay: _, closeDelay: c, children: [
-  a,
-  /* @__PURE__ */ r(y, { className: e(t.tooltip, t[i]), children: [
-    /* @__PURE__ */ o(l, { className: e(t["tooltip-arrow"]), children: /* @__PURE__ */ r("svg", { viewBox: "0 0 8 8", children: [
-      /* @__PURE__ */ o("title", { children: "Expand" }),
-      /* @__PURE__ */ o("path", { d: "M0 0 L4 4 L8 0" })
-    ] }) }),
-    s
-  ] })
-] }) : a;
-export {
-  h as T
-};
-//# sourceMappingURL=Tooltip.map
+import { t as e } from "./base";
+import t from "clsx";
+import { Tooltip as n } from "react-aria-components";
+import { jsx as r } from "react/jsx-runtime";
+import '../assets/Tooltip.css';var i = { tooltip: "_tooltip_t0b77_9" }, a = ({ className: a, offset: o = 4, ...s }) => /* @__PURE__ */ r(n, {
+	offset: o,
+	className: (n) => t(i.tooltip, e.labelMedium, typeof a == "function" ? a(n) : a),
+	...s,
+	"data-tooltip": !0
+});
+//#endregion
+export { a as t };
+
+//# sourceMappingURL=Tooltip.map

package/dist/chunks/Tooltip.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip","sources":["../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n    OverlayArrow,\n    TooltipTrigger,\n    Tooltip as UnstyledTooltip,\n} from \"react-aria-components\";\nimport styles from \"./tooltip.module.css\";\nimport type { TooltipProps } from \"./types\";\n\nexport const Tooltip = ({\n    children,\n    description,\n    theme = \"inverse-surface\",\n    delay = 250,\n    closeDelay = 150,\n}: TooltipProps) => {\n    if (!description) {\n        return children;\n    }\n\n    return (\n        <TooltipTrigger delay={delay} closeDelay={closeDelay}>\n            {children}\n\n            <UnstyledTooltip className={clsx(styles[\"tooltip\"], styles[theme])}>\n                <OverlayArrow className={clsx(styles[\"tooltip-arrow\"])}>\n                    <svg viewBox=\"0 0 8 8\">\n                        <title>Expand</title>\n                        <path d=\"M0 0 L4 4 L8 0\" />\n                    </svg>\n                </OverlayArrow>\n\n                {description}\n            </UnstyledTooltip>\n        </TooltipTrigger>\n    );\n};\n"],"names":["Tooltip","children","description","theme","delay","closeDelay","jsxs","TooltipTrigger","UnstyledTooltip","clsx","styles","jsx","OverlayArrow"],"mappings":";;;;;;;;;;;;;GASaA,IAAU,CAAC;AAAA,EACpB,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,OAAAC,IAAQ;AAAA,EACR,YAAAC,IAAa;AACjB,MACSH,IAKD,gBAAAI,EAACC,GAAA,EAAe,OAAAH,GAAc,YAAAC,GACzB,UAAA;AAAA,EAAAJ;AAAA,EAED,gBAAAK,EAACE,GAAA,EAAgB,WAAWC,EAAKC,EAAO,SAAYA,EAAOP,CAAK,CAAC,GAC7D,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EAAa,WAAWH,EAAKC,EAAO,eAAe,CAAC,GACjD,UAAA,gBAAAJ,EAAC,OAAA,EAAI,SAAQ,WACT,UAAA;AAAA,MAAA,gBAAAK,EAAC,WAAM,UAAA,SAAA,CAAM;AAAA,MACb,gBAAAA,EAAC,QAAA,EAAK,GAAE,iBAAA,CAAiB;AAAA,IAAA,EAAA,CAC7B,EAAA,CACJ;AAAA,IAECT;AAAA,EAAA,EAAA,CACL;AAAA,GACJ,IAjBOD;"}
+{"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;AACH,CAAA"}

package/dist/chunks/base

@@ -0,0 +1,37 @@
+//#region src/utils/typography/base.ts
+var e = {
+	displayLarge: "typography-display-large",
+	displayLargeEmphasized: "typography-display-large-emphasized",
+	displayMedium: "typography-display-medium",
+	displayMediumEmphasized: "typography-display-medium-emphasized",
+	displaySmall: "typography-display-small",
+	displaySmallEmphasized: "typography-display-small-emphasized",
+	headlineLarge: "typography-headline-large",
+	headlineLargeEmphasized: "typography-headline-large-emphasized",
+	headlineMedium: "typography-headline-medium",
+	headlineMediumEmphasized: "typography-headline-medium-emphasized",
+	headlineSmall: "typography-headline-small",
+	headlineSmallEmphasized: "typography-headline-small-emphasized",
+	titleLarge: "typography-title-large",
+	titleLargeEmphasized: "typography-title-large-emphasized",
+	titleMedium: "typography-title-medium",
+	titleMediumEmphasized: "typography-title-medium-emphasized",
+	titleSmall: "typography-title-small",
+	titleSmallEmphasized: "typography-title-small-emphasized",
+	bodyLarge: "typography-body-large",
+	bodyLargeEmphasized: "typography-body-large-emphasized",
+	bodyMedium: "typography-body-medium",
+	bodyMediumEmphasized: "typography-body-medium-emphasized",
+	bodySmall: "typography-body-small",
+	bodySmallEmphasized: "typography-body-small-emphasized",
+	labelLarge: "typography-label-large",
+	labelLargeEmphasized: "typography-label-large-emphasized",
+	labelMedium: "typography-label-medium",
+	labelMediumEmphasized: "typography-label-medium-emphasized",
+	labelSmall: "typography-label-small",
+	labelSmallEmphasized: "typography-label-small-emphasized"
+};
+//#endregion
+export { e as t };
+
+//# sourceMappingURL=base.map

package/dist/chunks/base.map

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

package/dist/chunks/context

@@ -0,0 +1,7 @@
+import { createContext as e } from "react";
+//#region src/components/Input/Select/ComboBox/context.ts
+var t = e({});
+//#endregion
+export { t };
+
+//# sourceMappingURL=context.map

package/dist/chunks/context.map

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

package/dist/chunks/core

@@ -0,0 +1,111 @@
+import { t as e } from "./Icon";
+import { n as t, t as n } from "./useSplash";
+import { t as r } from "./tapTarget";
+import { t as i } from "./base";
+import { useButtonGroupContext as a, useConnectedButtonGroupContext as o } from "../components/Button/ButtonGroups/ButtonGroupContext/index.js";
+import { t as s } from "./Tooltip";
+import { TooltipTrigger as c } from "../components/Tooltip/TooltipTrigger/index.js";
+import l from "clsx";
+import { ToggleButton as u } from "react-aria-components";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import '../assets/core2.css';//#region src/components/Button/core/button.module.css
+var p = {
+	"button-reset": "_button-reset_1kbv0_2",
+	"button-core": "_button-core_1kbv0_17"
+}, m = p["button-reset"], h = p["button-core"];
+function g({ shape: e, size: t, color: n }) {
+	return {
+		"data-shape": e,
+		"data-size": t,
+		"data-color": n
+	};
+}
+var _ = {
+	outlined: "_outlined_1j2iq_18",
+	color: "_color_1j2iq_27",
+	filled: "_filled_1j2iq_180",
+	tonal: "_tonal_1j2iq_200",
+	text: "_text_1j2iq_252",
+	standard: "_standard_1j2iq_257",
+	elevated: "_elevated_1j2iq_270"
+}, v = (e) => _[e], y = _.color, b = {
+	size: "_size_cpmig_2",
+	"extra-small": "_extra-small_cpmig_25",
+	small: "_small_cpmig_64",
+	medium: "_medium_cpmig_108",
+	large: "_large_cpmig_147",
+	"extra-large": "_extra-large_cpmig_186"
+}, x = {
+	"extra-small": 20,
+	small: 20,
+	medium: 24,
+	large: 32,
+	"extra-large": 40
+}, S = {
+	"extra-small": 20,
+	small: 24,
+	medium: 24,
+	large: 32,
+	"extra-large": 40
+}, C = {
+	"extra-small": i.labelLarge,
+	small: i.labelLarge,
+	medium: i.bodyLargeEmphasized,
+	large: i.headlineSmall,
+	"extra-large": i.headlineLarge
+}, w = (e) => b[e], T = b.size, E = { button: "_button_4jeo2_2" }, D = ({ icon: i, selectedIcon: a, children: s, onPress: c, iconPlacement: p, ...g }) => {
+	let { shape: _, size: b, color: S, iconPlacement: w } = o(), T = p ?? w ?? "start", { splashInfo: D, handlePress: O } = n(c), k = typeof s == "function";
+	return /* @__PURE__ */ d(u, {
+		onPress: O,
+		className: l(m, r, v(S)),
+		...g,
+		"data-connected-button": !0,
+		"data-button": !0,
+		children: (n) => {
+			let { isSelected: r, isDisabled: o, isFocusVisible: c, isFocused: u, isPressed: p, isHovered: m } = n, g = {
+				"data-hovered": m || void 0,
+				"data-disabled": o || void 0,
+				"data-focused": u || void 0,
+				"data-focus-visible": c || void 0,
+				"data-pressed": p || void 0,
+				"data-selected": r || void 0,
+				"data-toggle-button": !0,
+				"data-shape": _,
+				"data-visual-button": !0
+			}, v = i;
+			r && a && (v = a);
+			let S = x[b], w = v && /* @__PURE__ */ d(e, {
+				icon: v,
+				size: S
+			});
+			return /* @__PURE__ */ f("span", {
+				...g,
+				className: l(h, y, C[b], E.button),
+				children: [
+					D && /* @__PURE__ */ d(t, { ...D }),
+					T === "start" && w,
+					k ? s(n) : s,
+					T === "end" && w
+				]
+			});
+		}
+	});
+};
+//#endregion
+//#region src/components/Button/core/useButtonConfig.ts
+function O({ size: e, shape: t, color: n, iconPlacement: r }) {
+	let { size: i, shape: o, color: s, iconPlacement: c } = a();
+	return {
+		buttonSize: e ?? i ?? "small",
+		buttonShape: t ?? o ?? "round",
+		buttonColor: n ?? s ?? "filled",
+		buttonIconPlacement: r ?? c ?? "start"
+	};
+}
+//#endregion
+//#region src/components/Button/core/withTooltip.tsx
+var k = (e, t) => t ? /* @__PURE__ */ f(c, { children: [e, /* @__PURE__ */ d(s, { children: t })] }) : e;
+//#endregion
+export { C as a, w as c, h as d, m as f, x as i, y as l, O as n, T as o, g as p, D as r, S as s, k as t, v as u };
+
+//# sourceMappingURL=core.map

package/dist/chunks/core.map

@@ -0,0 +1 @@
+{"version":3,"file":"core","names":[],"sources":["../../src/components/Button/core/button.module.css","../../src/components/Button/core/button.ts","../../src/components/Button/core/color.module.css","../../src/components/Button/core/color.ts","../../src/components/Button/core/size.module.css","../../src/components/Button/core/sizes.ts","../../src/components/Button/ButtonGroups/ConnectedButton/connectedButton.module.css","../../src/components/Button/ButtonGroups/ConnectedButton/ConnectedButton.tsx","../../src/components/Button/core/useButtonConfig.ts","../../src/components/Button/core/withTooltip.tsx"],"sourcesContent":["@layer adgytec.comps {\n    .button-reset {\n        all: unset;\n        cursor: pointer;\n        position: relative;\n        text-align: center;\n\n        &[data-disabled] {\n            cursor: default;\n        }\n\n        &[data-pending] {\n            cursor: default;\n        }\n    }\n\n    .button-core {\n        position: relative;\n        overflow: clip;\n\n        --_md-button-shape-motion: var(--md-sys-motion-expressive-fast-spatial);\n        --_md-button-shape-motion-duration: var(\n            --md-sys-motion-expressive-fast-spatial-duration\n        );\n\n        transition:\n            border-radius var(--_md-button-shape-motion)\n            var(--_md-button-shape-motion-duration),\n            background-color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            border-color var(--md-sys-motion-expressive-fast-effects)\n            var(--md-sys-motion-expressive-fast-effects-duration),\n            box-shadow var(--md-sys-motion-expressive-fast-spatial)\n            var(--md-sys-motion-expressive-fast-spatial-duration),\n            padding var(--md-sys-motion-expressive-fast-spatial)\n            var(--md-sys-motion-expressive-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n}\n","import type { LucideIcon } from \"lucide-react\";\nimport styles from \"./button.module.css\";\nimport type { AllButtonColor, ButtonColor, IconButtonColor } from \"./color\";\nimport type { ButtonShape } from \"./shape\";\nimport type { ButtonSize } from \"./sizes\";\nimport type { IconButtonWidth } from \"./width\";\n\nexport type ButtonIconPlacement = \"start\" | \"end\";\n\nexport interface ButtonBaseProps {\n    color?: ButtonColor;\n    size?: ButtonSize;\n    shape?: ButtonShape;\n    tooltip?: string;\n    icon?: LucideIcon;\n    iconPlacement?: ButtonIconPlacement;\n}\n\nexport interface IconButtonBaseProps {\n    color?: IconButtonColor;\n    size?: ButtonSize;\n    shape?: ButtonShape;\n    width?: IconButtonWidth;\n    tooltip?: string;\n    icon: LucideIcon;\n}\n\nexport const ButtonReset = styles[\"button-reset\"];\nexport const ButtonCore = styles[\"button-core\"];\n\nexport function newButtonBaseDataAttrs({\n    shape,\n    size,\n    color,\n}: {\n    shape: ButtonShape;\n    color: AllButtonColor;\n    size: ButtonSize;\n}) {\n    return {\n        \"data-shape\": shape,\n        \"data-size\": size,\n        \"data-color\": color,\n    };\n}\n","/* configurable tokens\n*\n* --md-button-background\n* --md-toggle-button-selected-background\n* --md-toggle-button-background\n*\n* --md-button-outline-color\n* --md-toggle-button-selected-outline-color\n* --md-toggle-button-outline-color\n*\n* --md-button-color\n* --md-toggle-button-selected-color\n* --md-toggle-button-color\n*\n* configurable tokens end */\n\n@layer adgytec.overrides {\n    .outlined {\n        --_md-button-padding-block: calc(\n            var(--_md-button-padding-block-base) -\n            var(--_md-button-outline-width, 0)\n        );\n    }\n}\n\n@layer adgytec.comps {\n    .color {\n        --_md-button-background: var(\n            --md-button-background,\n            var(--_md-button-background-default)\n        );\n        --_md-toggle-button-selected-background: var(\n            --md-toggle-button-selected-background,\n            var(--_md-toggle-button-selected-background-default)\n        );\n        --_md-toggle-button-background: var(\n            --md-toggle-button-background,\n            var(--_md-toggle-button-background-default)\n        );\n\n        --_md-button-color: var(\n            --md-button-color,\n            var(--_md-button-color-default)\n        );\n        --_md-toggle-button-selected-color: var(\n            --md-toggle-button-selected-color,\n            var(--_md-toggle-button-selected-color-default)\n        );\n        --_md-toggle-button-color: var(\n            --md-toggle-button-color,\n            var(--_md-toggle-button-color-default)\n        );\n\n        --_md-button-outline-color: var(\n            --md-button-outline-color,\n            var(--_md-button-outline-color-default)\n        );\n        --_md-toggle-button-outline-color: var(\n            --md-toggle-button-outline-color,\n            var(--_md-toggle-button-outline-color-default)\n        );\n        --_md-toggle-button-selected-outline-color: var(\n            --md-toggle-button-selected-outline-color,\n            var(--_md-toggle-button-selected-outline-color-default)\n        );\n\n        --_outline-color: var(--_md-button-outline-color, transparent);\n\n        /* state layer */\n        --_md-button-state-layer: var(--_md-button-color, transparent);\n        --_md-toggle-button-state-layer: var(\n            --_md-toggle-button-color,\n            transparent\n        );\n        --_md-toggle-button-selected-state-layer: var(\n            --_md-toggle-button-selected-color,\n            transparent\n        );\n\n        --_state-color: var(--_md-button-state-layer);\n        --_state-layer-opacity: 0;\n\n        --_state-layer-color: rgb(\n            from var(--_state-color) r g b /\n            var(--_state-layer-opacity)\n        );\n\n        /* variable to use */\n        --_background-color: var(--_md-button-background, transparent);\n        --_color: var(--_md-button-color, transparent);\n\n        /* styles */\n        background-color: var(--_background-color);\n        color: var(--_color);\n\n        &[data-toggle-button] {\n            --_background-color: var(\n                --_md-toggle-button-background,\n                transparent\n            );\n            --_color: var(--_md-toggle-button-color, transparent);\n            --_outline-color: var(\n                --_md-toggle-button-outline-color,\n                transparent\n            );\n\n            --_state-color: var(--_md-toggle-button-state-layer);\n        }\n\n        &[data-selected] {\n            --_background-color: var(\n                --_md-toggle-button-selected-background,\n                transparent\n            );\n            --_color: var(--_md-toggle-button-selected-color, transparent);\n            --_outline-color: var(\n                --_md-toggle-button-selected-outline-color,\n                transparent\n            );\n\n            --_state-color: var(--_md-toggle-button-selected-state-layer);\n        }\n\n        &[data-hovered] {\n            --_state-layer-opacity: var(--md-sys-state-hover);\n        }\n\n        &[data-focus-visible] {\n            --_state-layer-opacity: var(--md-sys-state-focus);\n        }\n\n        &[data-pressed] {\n            --_state-layer-opacity: var(--md-sys-state-pressed);\n        }\n\n        &[data-disabled] {\n            --_background-color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-container)\n            );\n            --_color: rgb(\n                from var(--md-sys-color-on-surface) r g b /\n                var(--md-sys-state-disabled-content)\n            );\n        }\n    }\n\n    /* state layer */\n    .color::before {\n        content: \"\";\n\n        position: absolute;\n        inset: 0;\n        border-radius: inherit;\n\n        background-color: var(--_state-layer-color);\n\n        transition: background-color var(--md-sys-motion-standard-fast-spatial)\n            var(--md-sys-motion-standard-fast-spatial-duration);\n\n        @media (prefers-reduced-motion) {\n            transition: none;\n        }\n    }\n\n    /* focus indicator */\n    .color[data-focus-visible] {\n        --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n        --focus-indicator-offset: calc(2 * var(--dp, 1px));\n        --focus-indicator-color: var(--md-sys-color-secondary);\n\n        outline-width: var(--focus-indicator-thickness);\n        outline-style: solid;\n        outline-offset: var(--focus-indicator-offset);\n        outline-color: var(--focus-indicator-color);\n\n        z-index: 1;\n    }\n\n    .filled {\n        /* background */\n        --_md-button-background-default: var(--md-sys-color-primary);\n        --_md-toggle-button-selected-background-default: var(\n            --md-sys-color-primary\n        );\n        --_md-toggle-button-background-default: var(\n            --md-sys-color-surface-container\n        );\n\n        /* text and icon */\n        --_md-button-color-default: var(--md-sys-color-on-primary);\n        --_md-toggle-button-selected-color-default: var(\n            --md-sys-color-on-primary\n        );\n        --_md-toggle-button-color-default: var(\n            --md-sys-color-on-surface-variant\n        );\n    }\n\n    .tonal {\n        /* background */\n        --_md-button-background-default: var(\n            --md-sys-color-secondary-container\n        );\n        --_md-toggle-button-selected-background-default: var(\n            --md-sys-color-secondary\n        );\n        --_md-toggle-button-background-default: var(\n            --md-sys-color-secondary-container\n        );\n\n        /* text and icon */\n        --_md-button-color-default: var(--md-sys-color-on-secondary-container);\n        --_md-toggle-button-selected-color-default: var(\n            --md-sys-color-on-secondary\n        );\n        --_md-toggle-button-color-default: var(\n            --md-sys-color-on-secondary-container\n        );\n    }\n\n    .outlined {\n        /* outline */\n        --_md-button-outline-color-default: var(--md-sys-color-outline-variant);\n        --_md-toggle-button-outline-color-default: var(\n            --md-sys-color-outline-variant\n        );\n\n        /* background */\n        --_md-toggle-button-selected-background-default: var(\n            --md-sys-color-inverse-surface\n        );\n\n        /* text and icon */\n        --_md-button-color-default: var(--md-sys-color-on-surface-variant);\n        --_md-toggle-button-selected-color-default: var(\n            --md-sys-color-inverse-on-surface\n        );\n        --_md-toggle-button-color-default: var(\n            --md-sys-color-on-surface-variant\n        );\n\n        [data-visual-button] {\n            /* styles limited to outlined color */\n            border-width: var(--_md-button-outline-width);\n            border-style: solid;\n            border-color: var(--_outline-color);\n        }\n    }\n\n    /* no toggle button states are there */\n    .text {\n        /* text and icon */\n        --_md-button-color-default: var(--md-sys-color-primary);\n    }\n\n    .standard {\n        /* text and icon */\n        --_md-button-color-default: var(--md-sys-color-on-surface-variant);\n        --_md-toggle-button-selected-color-default: var(--md-sys-color-primary);\n        --_md-toggle-button-color-default: var(\n            --md-sys-color-on-surface-variant\n        );\n\n        &[data-disabled] {\n            --_background-color: transparent;\n        }\n    }\n\n    .elevated {\n        /* background */\n        --_md-button-background-default: var(\n            --md-sys-color-surface-container-low\n        );\n        --_md-toggle-button-selected-background-default: var(\n            --md-sys-color-primary\n        );\n        --_md-toggle-button-background-default: var(\n            --md-sys-color-surface-container-low\n        );\n\n        /* text and icon */\n        --_md-button-color-default: var(--md-sys-color-primary);\n        --_md-toggle-button-selected-color-default: var(\n            --md-sys-color-on-primary\n        );\n        --_md-toggle-button-color-default: var(--md-sys-color-primary);\n\n        [data-visual-button] {\n            /* styles limited to elevated color */\n            box-shadow: var(--md-sys-elevation-shadow-1);\n\n            &[data-disabled] {\n                box-shadow: none;\n            }\n        }\n    }\n}\n","import styles from \"./color.module.css\";\n\nexport type CoreButtonColor = \"filled\" | \"tonal\" | \"outlined\";\n\nexport type ButtonColor = CoreButtonColor | \"elevated\" | \"text\";\n\nexport type ToggleButtonColor = CoreButtonColor | \"elevated\";\n\nexport type IconButtonColor = CoreButtonColor | \"standard\";\n\nexport type SplitButtonColor = CoreButtonColor | \"elevated\";\n\nexport type ConnectedButtonGroupColor = CoreButtonColor | \"elevated\";\n\nexport type AllButtonColor =\n    | ButtonColor\n    | IconButtonColor\n    | SplitButtonColor\n    | ConnectedButtonGroupColor;\n\nexport const buttonColorConfig = (color: AllButtonColor) => {\n    return styles[color];\n};\n\nexport const buttonColorBase = styles[\"color\"];\n","@layer adgytec.comps {\n    .size {\n        /* shape */\n        --_shape: var(--_md-button-shape);\n\n        /* styles */\n        padding-inline: var(--_md-button-padding-inline);\n        padding-block: var(--_md-button-padding-block);\n        border-radius: var(--_shape);\n\n        display: flex;\n        gap: var(--_md-button-icon-label-gap);\n        align-items: center;\n        justify-content: center;\n\n        &[data-selected] {\n            --_shape: var(--_md-toggle-button-selected-shape);\n        }\n\n        &[data-pressed] {\n            --_shape: var(--_md-button-pressed-shape);\n        }\n    }\n\n    .extra-small {\n        /* height for button is 32 */\n        --md-sys-shape-corner-radius-full: calc(16 * var(--dp, 1px));\n\n        --_md-button-padding-block-base: calc(6 * var(--dp, 1px));\n        --_md-button-padding-block: var(--_md-button-padding-block-base);\n        --_md-button-padding-inline: var(--md-sys-layout-space-12);\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-4);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n        --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n        --_md-toggle-button-selected-shape: var(\n            --md-sys-shape-corner-radius-medium\n        );\n\n        --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-small);\n\n        &[data-shape=\"square\"] {\n            --_md-button-shape: var(--md-sys-shape-corner-radius-medium);\n            --_md-toggle-button-selected-shape: var(\n                --md-sys-shape-corner-radius-full\n            );\n        }\n\n        /* icon button width */\n        &[data-width=\"narrow\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-4);\n        }\n\n        &[data-width=\"default\"] {\n            --_md-button-padding-inline: calc(6 * var(--dp, 1px));\n        }\n\n        &[data-width=\"wide\"] {\n            --_md-button-padding-inline: calc(10 * var(--dp, 1px));\n        }\n    }\n\n    .small {\n        /* height for button is 40 */\n        --md-sys-shape-corner-radius-full: calc(20 * var(--dp, 1px));\n\n        --_md-button-padding-block-base: calc(10 * var(--dp, 1px));\n        --_md-button-padding-block: var(--_md-button-padding-block-base);\n        --_md-button-padding-inline: var(--md-sys-layout-space-16);\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n        --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n        --_md-toggle-button-selected-shape: var(\n            --md-sys-shape-corner-radius-medium\n        );\n\n        --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-small);\n\n        &[data-shape=\"square\"] {\n            --_md-button-shape: var(--md-sys-shape-corner-radius-medium);\n            --_md-toggle-button-selected-shape: var(\n                --md-sys-shape-corner-radius-full\n            );\n        }\n\n        /* icon button width */\n        &[data-width=\"narrow\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-4);\n        }\n\n        &[data-width=\"default\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-8);\n        }\n\n        &[data-width=\"wide\"] {\n            --_md-button-padding-inline: calc(14 * var(--dp, 1px));\n        }\n\n        /* icon button height adjustment: icon size is 24 for icon only buttons */\n        &[data-icon-button] {\n            --_md-button-padding-block-base: calc(8 * var(--dp, 1px));\n        }\n    }\n\n    .medium {\n        /* height for button is 56 */\n        --md-sys-shape-corner-radius-full: calc(28 * var(--dp, 1px));\n\n        --_md-button-padding-block-base: var(--md-sys-layout-space-16);\n        --_md-button-padding-block: var(--_md-button-padding-block-base);\n        --_md-button-padding-inline: var(--md-sys-layout-space-24);\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n        --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n        --_md-toggle-button-selected-shape: var(\n            --md-sys-shape-corner-radius-large\n        );\n\n        --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-medium);\n\n        &[data-shape=\"square\"] {\n            --_md-button-shape: var(--md-sys-shape-corner-radius-large);\n            --_md-toggle-button-selected-shape: var(\n                --md-sys-shape-corner-radius-full\n            );\n        }\n\n        /* icon button width */\n        &[data-width=\"narrow\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-12);\n        }\n\n        &[data-width=\"default\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-16);\n        }\n\n        &[data-width=\"wide\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-24);\n        }\n    }\n\n    .large {\n        /* height for button is 96 */\n        --md-sys-shape-corner-radius-full: calc(48 * var(--dp, 1px));\n\n        --_md-button-padding-block-base: var(--md-sys-layout-space-32);\n        --_md-button-padding-block: var(--_md-button-padding-block-base);\n        --_md-button-padding-inline: var(--md-sys-layout-space-48);\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-12);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thick);\n\n        --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n        --_md-toggle-button-selected-shape: var(\n            --md-sys-shape-corner-radius-extra-large\n        );\n\n        --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-large);\n\n        &[data-shape=\"square\"] {\n            --_md-button-shape: var(--md-sys-shape-corner-radius-extra-large);\n            --_md-toggle-button-selected-shape: var(\n                --md-sys-shape-corner-radius-full\n            );\n        }\n\n        /* icon button width */\n        &[data-width=\"narrow\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-16);\n        }\n\n        &[data-width=\"default\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-32);\n        }\n\n        &[data-width=\"wide\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-48);\n        }\n    }\n\n    .extra-large {\n        /* height for button is 136 */\n        --md-sys-shape-corner-radius-full: calc(68 * var(--dp, 1px));\n\n        --_md-button-padding-block-base: var(--md-sys-layout-space-48);\n        --_md-button-padding-block: var(--_md-button-padding-block-base);\n        --_md-button-padding-inline: var(--md-sys-layout-space-64);\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-16);\n        --_md-button-outline-width: calc(3 * var(--dp, 1px));\n\n        --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n        --_md-toggle-button-selected-shape: var(\n            --md-sys-shape-corner-radius-extra-large\n        );\n\n        --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-large);\n\n        &[data-shape=\"square\"] {\n            --_md-button-shape: var(--md-sys-shape-corner-radius-extra-large);\n            --_md-toggle-button-selected-shape: var(\n                --md-sys-shape-corner-radius-full\n            );\n        }\n\n        /* icon button width */\n        &[data-width=\"narrow\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-32);\n        }\n\n        &[data-width=\"default\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-48);\n        }\n\n        &[data-width=\"wide\"] {\n            --_md-button-padding-inline: var(--md-sys-layout-space-72);\n        }\n    }\n}\n","import { typography } from \"@/utils/typography\";\nimport styles from \"./size.module.css\";\n\nexport type ButtonSize =\n    | \"extra-small\"\n    | \"small\"\n    | \"medium\"\n    | \"large\"\n    | \"extra-large\";\n\nexport const ButtonIconSizeMapping: Record<ButtonSize, number> = {\n    \"extra-small\": 20,\n    small: 20,\n    medium: 24,\n    large: 32,\n    \"extra-large\": 40,\n} as const;\n\nexport const IconButtonIconSizeMapping: Record<ButtonSize, number> = {\n    \"extra-small\": 20,\n    small: 24,\n    medium: 24,\n    large: 32,\n    \"extra-large\": 40,\n} as const;\n\nexport const ButtonLabelTextMapping: Record<ButtonSize, string> = {\n    \"extra-small\": typography.labelLarge,\n    small: typography.labelLarge,\n    medium: typography.bodyLargeEmphasized,\n    large: typography.headlineSmall,\n    \"extra-large\": typography.headlineLarge,\n} as const;\n\nexport const buttonSizeConfig = (size: ButtonSize) => {\n    return styles[size];\n};\n\nexport const ButtonSizeBase = styles[\"size\"];\n","@layer adgytec.comps {\n    .button {\n        /* styles */\n        min-inline-size: var(--min-tap-target-size);\n\n        padding-inline: var(--_md-button-padding-inline);\n        padding-block: var(--_md-button-padding-block);\n\n        display: inline-flex;\n        gap: var(--_md-button-icon-label-gap);\n        align-items: center;\n        justify-content: center;\n\n        /* shape styles */\n        border-start-start-radius: var(--_shape-start-start);\n        border-end-start-radius: var(--_shape-end-start);\n        border-start-end-radius: var(--_shape-start-end);\n        border-end-end-radius: var(--_shape-end-end);\n\n        &[data-selected] {\n            --_shape-start-start: var(--_selected-shape);\n            --_shape-end-start: var(--_selected-shape);\n            --_shape-start-end: var(--_selected-shape);\n            --_shape-end-end: var(--_selected-shape);\n        }\n    }\n}\n","import clsx from \"clsx\";\nimport { ToggleButton as AriaToggleButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n    ButtonCore,\n    ButtonIconSizeMapping,\n    ButtonLabelTextMapping,\n    ButtonReset,\n    buttonColorBase,\n    buttonColorConfig,\n} from \"../../core\";\nimport { useConnectedButtonGroupContext } from \"../ButtonGroupContext\";\nimport styles from \"./connectedButton.module.css\";\nimport type { ConnectedButtonProps } from \"./types\";\n\nexport const ConnectedButton: React.FC<ConnectedButtonProps> = ({\n    icon,\n    selectedIcon,\n    children,\n    onPress,\n    iconPlacement,\n    ...props\n}) => {\n    const {\n        shape,\n        size,\n        color,\n        iconPlacement: groupIconPlacement,\n    } = useConnectedButtonGroupContext();\n\n    const buttonIconPlacement = iconPlacement ?? groupIconPlacement ?? \"start\";\n\n    const { splashInfo, handlePress } = useSplash(onPress);\n    const isChildFunc = typeof children === \"function\";\n\n    return (\n        <AriaToggleButton\n            onPress={handlePress}\n            className={clsx(ButtonReset, TapTarget, buttonColorConfig(color))}\n            {...props}\n            data-connected-button={true}\n            data-button\n        >\n            {(renderProps) => {\n                const {\n                    isSelected,\n                    isDisabled,\n                    isFocusVisible,\n                    isFocused,\n                    isPressed,\n                    isHovered,\n                } = renderProps;\n\n                const dataAttrs = {\n                    \"data-hovered\": isHovered || undefined,\n                    \"data-disabled\": isDisabled || undefined,\n                    \"data-focused\": isFocused || undefined,\n                    \"data-focus-visible\": isFocusVisible || undefined,\n                    \"data-pressed\": isPressed || undefined,\n                    \"data-selected\": isSelected || undefined,\n                    \"data-toggle-button\": true,\n                    \"data-shape\": shape,\n                    \"data-visual-button\": true,\n                };\n\n                let iconToRender = icon;\n                if (isSelected && selectedIcon) iconToRender = selectedIcon;\n\n                const iconSize = ButtonIconSizeMapping[size];\n                const iconComp = iconToRender && (\n                    <Icon icon={iconToRender} size={iconSize} />\n                );\n\n                return (\n                    <span\n                        {...dataAttrs}\n                        className={clsx(\n                            ButtonCore,\n                            buttonColorBase,\n                            ButtonLabelTextMapping[size],\n                            styles[\"button\"]\n                        )}\n                    >\n                        {splashInfo && <Splash {...splashInfo} />}\n\n                        {buttonIconPlacement === \"start\" && iconComp}\n\n                        {isChildFunc ? children(renderProps) : children}\n\n                        {buttonIconPlacement === \"end\" && iconComp}\n                    </span>\n                );\n            }}\n        </AriaToggleButton>\n    );\n};\n","import { useButtonGroupContext } from \"../ButtonGroups\";\nimport type { ButtonIconPlacement } from \"./button\";\nimport type { ButtonShape } from \"./shape\";\nimport type { ButtonSize } from \"./sizes\";\n\ntype ButtonConfigOptions<C extends string> = {\n    size?: ButtonSize;\n    shape?: ButtonShape;\n    color?: C;\n    iconPlacement?: ButtonIconPlacement;\n};\n\nexport function useButtonConfig<C extends string>({\n    size,\n    shape,\n    color,\n    iconPlacement,\n}: ButtonConfigOptions<C>) {\n    const {\n        size: buttonGroupSize,\n        shape: buttonGroupShape,\n        color: buttonGroupColor,\n        iconPlacement: buttonGroupIconPlacement,\n    } = useButtonGroupContext();\n\n    const buttonSize = size ?? buttonGroupSize ?? \"small\";\n    const buttonShape = shape ?? buttonGroupShape ?? \"round\";\n    const buttonColor = color ?? buttonGroupColor ?? \"filled\";\n    const buttonIconPlacement =\n        iconPlacement ?? buttonGroupIconPlacement ?? \"start\";\n\n    return { buttonSize, buttonShape, buttonColor, buttonIconPlacement };\n}\n","import type { ReactElement } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\n\nexport const withTooltip = (element: ReactElement, tooltip?: string) => {\n    if (!tooltip) return element;\n\n    return (\n        <TooltipTrigger>\n            {element}\n\n            <Tooltip>{tooltip}</Tooltip>\n        </TooltipTrigger>\n    );\n};\n"],"mappings":";;;;;;;;;;;;;;GC2Ba,IAAc,EAAO,iBACrB,IAAa,EAAO;AAEjC,SAAgB,EAAuB,EACnC,UACA,SACA,YAKD;CACC,OAAO;EACH,cAAc;EACd,aAAa;EACb,cAAc;CAClB;AACJ;;;;;;;;;GExBa,KAAqB,MACvB,EAAO,IAGL,IAAkB,EAAO;;;;;;;GEdzB,IAAoD;CAC7D,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,IAAwD;CACjE,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,IAAqD;CAC9D,eAAe,EAAW;CAC1B,OAAO,EAAW;CAClB,QAAQ,EAAW;CACnB,OAAO,EAAW;CAClB,eAAe,EAAW;AAC9B,GAEa,KAAoB,MACtB,EAAO,IAGL,IAAiB,EAAO,yCEpBxB,KAAmD,EAC5D,SACA,iBACA,aACA,YACA,kBACA,GAAG,QACD;CACF,IAAM,EACF,UACA,SACA,UACA,eAAe,MACf,EAA+B,GAE7B,IAAsB,KAAiB,KAAsB,SAE7D,EAAE,eAAY,mBAAgB,EAAU,CAAO,GAC/C,IAAc,OAAO,KAAa;CAExC,OACI,kBAAC,GAAD;EACI,SAAS;EACT,WAAW,EAAK,GAAa,GAAW,EAAkB,CAAK,CAAC;EAChE,GAAI;EACJ,yBAAuB;EACvB,eAAA;aAEE,MAAgB;GACd,IAAM,EACF,eACA,eACA,mBACA,cACA,cACA,iBACA,GAEE,IAAY;IACd,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,sBAAsB;IACtB,cAAc;IACd,sBAAsB;GAC1B,GAEI,IAAe;GACnB,AAAI,KAAc,MAAc,IAAe;GAE/C,IAAM,IAAW,EAAsB,IACjC,IAAW,KACb,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAM;GAAW,CAAA;GAG/C,OACI,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EACP,GACA,GACA,EAAuB,IACvB,EAAO,MACX;cAPJ;KASK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA;KAEvC,MAAwB,WAAW;KAEnC,IAAc,EAAS,CAAW,IAAI;KAEtC,MAAwB,SAAS;IAChC;;EAEd;CACc,CAAA;AAE1B;;;ACtFA,SAAgB,EAAkC,EAC9C,SACA,UACA,UACA,oBACuB;CACvB,IAAM,EACF,MAAM,GACN,OAAO,GACP,OAAO,GACP,eAAe,MACf,EAAsB;CAQ1B,OAAO;EAAE,YANU,KAAQ,KAAmB;EAMzB,aALD,KAAS,KAAoB;EAKf,aAJd,KAAS,KAAoB;EAIF,qBAF3C,KAAiB,KAA4B;CAEkB;AACvE;;;AC7BA,IAAa,KAAe,GAAuB,MAC1C,IAGD,kBAAC,GAAD,EAAA,UAAA,CACK,GAED,kBAAC,GAAD,EAAA,UAAU,EAAiB,CAAA,CACf,EAAA,CAAA,IAPC"}

package/dist/chunks/core2

@@ -0,0 +1,20 @@
+import '../assets/core3.css';var e = {
+	size: "_size_1kb4g_2",
+	primary: "_primary_1kb4g_23",
+	trigger: "_trigger_1kb4g_56",
+	"extra-small": "_extra-small_1kb4g_94",
+	small: "_small_1kb4g_146",
+	medium: "_medium_1kb4g_197",
+	large: "_large_1kb4g_249",
+	"extra-large": "_extra-large_1kb4g_300"
+}, t = {
+	"extra-small": 22,
+	small: 22,
+	medium: 26,
+	large: 38,
+	"extra-large": 50
+}, n = (t) => e[t], r = e.size, i = e.primary, a = e.trigger;
+//#endregion
+export { n as a, r as i, a as n, t as r, i as t };
+
+//# sourceMappingURL=core2.map

package/dist/chunks/core2.map

@@ -0,0 +1 @@
+{"version":3,"file":"core2","names":[],"sources":["../../src/components/Button/SplitButton/core/size.module.css","../../src/components/Button/SplitButton/core/size.ts"],"sourcesContent":["@layer adgytec.comps {\n    .size {\n        --_padding-block: var(--_padding-block-base);\n\n        border-start-start-radius: var(--_shape-start-start);\n        border-start-end-radius: var(--_shape-start-end);\n        border-end-start-radius: var(--_shape-end-start);\n        border-end-end-radius: var(--_shape-end-end);\n\n        padding-inline-start: var(--_padding-inline-start);\n        padding-inline-end: var(--_padding-inline-end);\n        padding-block: var(--_padding-block);\n\n        display: flex;\n        gap: var(--_md-button-icon-label-gap);\n        align-items: center;\n        justify-content: center;\n\n        box-sizing: border-box;\n        min-inline-size: var(--min-tap-target-size);\n    }\n\n    .primary {\n        /* shape */\n        --_inner-shape: var(--_md-split-button-inner-corner-shape);\n\n        --_shape-start-end: var(--_inner-shape);\n        --_shape-end-end: var(--_inner-shape);\n\n        --_shape-start-start: var(--_md-split-button-outer-corner-shape);\n        --_shape-end-start: var(--_md-split-button-outer-corner-shape);\n\n        /* padding */\n        --_padding-inline-start: var(\n            --_md-split-button-primary-padding-inline-start\n        );\n        --_padding-inline-end: var(\n            --_md-split-button-primary-padding-inline-end\n        );\n\n        --_padding-block-base: var(--_md-split-button-primary-padding-block);\n\n        &[data-hovered] {\n            --_inner-shape: var(\n                --_md-split-button-interaction-inner-corner-shape\n            );\n        }\n\n        &[data-pressed] {\n            --_inner-shape: var(\n                --_md-split-button-interaction-inner-corner-shape\n            );\n        }\n    }\n\n    .trigger {\n        /* shape */\n        --_inner-shape: var(--_md-split-button-inner-corner-shape);\n\n        --_shape-start-end: var(--_md-split-button-outer-corner-shape);\n        --_shape-end-end: var(--_md-split-button-outer-corner-shape);\n\n        --_shape-start-start: var(--_inner-shape);\n        --_shape-end-start: var(--_inner-shape);\n\n        /* padding */\n        --_padding-inline-start: var(\n            --_md-split-button-trigger-padding-inline-start\n        );\n        --_padding-inline-end: var(\n            --_md-split-button-trigger-padding-inline-end\n        );\n\n        --_padding-block-base: var(--_md-split-button-trigger-padding-block);\n\n        &[data-hovered] {\n            --_inner-shape: var(\n                --_md-split-button-interaction-inner-corner-shape\n            );\n        }\n\n        &[data-pressed] {\n            --_inner-shape: var(--_md-split-button-trigger-pressed-shape);\n\n            --_padding-inline-start: var(\n                --_md-split-button-trigger-pressed-padding-inline-start\n            );\n            --_padding-inline-end: var(\n                --_md-split-button-trigger-pressed-padding-inline-end\n            );\n        }\n    }\n\n    .extra-small {\n        /* height for button is 32 */\n        --md-sys-shape-corner-radius-full: calc(16 * var(--dp, 1px));\n\n        --_md-split-button-outer-corner-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n        --_md-split-button-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-extra-small\n        );\n        --_md-split-button-interaction-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-small\n        );\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-4);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n        /* primary button */\n        --_md-split-button-primary-padding-inline-start: var(\n            --md-sys-layout-space-12\n        );\n        --_md-split-button-primary-padding-inline-end: calc(\n            10 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-primary-padding-block: calc(6 * var(--dp, 1px));\n\n        /* trigger button */\n        --_md-split-button-trigger-padding-inline-start: var(\n            --md-sys-layout-space-12\n        );\n        --_md-split-button-trigger-padding-inline-end: calc(\n            14 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-pressed-padding-inline-start: calc(\n            13 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-pressed-padding-inline-end: calc(\n            13 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-padding-block: calc(5 * var(--dp, 1px));\n        --_md-split-button-trigger-pressed-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n    }\n\n    .small {\n        /* height for button is 40 */\n        --md-sys-shape-corner-radius-full: calc(20 * var(--dp, 1px));\n\n        --_md-split-button-outer-corner-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n        --_md-split-button-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-extra-small\n        );\n        --_md-split-button-interaction-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-small\n        );\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n        /* primary button */\n        --_md-split-button-primary-padding-inline-start: var(\n            --md-sys-layout-space-16\n        );\n        --_md-split-button-primary-padding-inline-end: var(\n            --md-sys-layout-space-12\n        );\n\n        --_md-split-button-primary-padding-block: calc(10 * var(--dp, 1px));\n\n        /* trigger button */\n        --_md-split-button-trigger-padding-inline-start: var(\n            --md-sys-layout-space-12\n        );\n        --_md-split-button-trigger-padding-inline-end: calc(\n            14 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-pressed-padding-inline-start: calc(\n            13 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-pressed-padding-inline-end: calc(\n            13 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-padding-block: calc(9 * var(--dp, 1px));\n        --_md-split-button-trigger-pressed-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n    }\n\n    .medium {\n        /* height for button is 56 */\n        --md-sys-shape-corner-radius-full: calc(28 * var(--dp, 1px));\n\n        --_md-split-button-outer-corner-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n        --_md-split-button-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-extra-small\n        );\n        --_md-split-button-interaction-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-medium\n        );\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n        /* primary button */\n        --_md-split-button-primary-padding-inline-start: var(\n            --md-sys-layout-space-24\n        );\n        --_md-split-button-primary-padding-inline-end: var(\n            --md-sys-layout-space-24\n        );\n\n        --_md-split-button-primary-padding-block: var(--md-sys-layout-space-16);\n\n        /* trigger button */\n        --_md-split-button-trigger-padding-inline-start: calc(\n            13 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-padding-inline-end: calc(\n            17 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-pressed-padding-inline-start: calc(\n            15 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-pressed-padding-inline-end: calc(\n            15 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-padding-block: calc(15 * var(--dp, 1px));\n        --_md-split-button-trigger-pressed-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n    }\n\n    .large {\n        /* height for button is 96 */\n        --md-sys-shape-corner-radius-full: calc(48 * var(--dp, 1px));\n\n        --_md-split-button-outer-corner-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n        --_md-split-button-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-small\n        );\n        --_md-split-button-interaction-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-large\n        );\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-12);\n        --_md-button-outline-width: var(--md-sys-shape-border-width-thick);\n\n        /* primary button */\n        --_md-split-button-primary-padding-inline-start: var(\n            --md-sys-layout-space-48\n        );\n        --_md-split-button-primary-padding-inline-end: var(\n            --md-sys-layout-space-48\n        );\n\n        --_md-split-button-primary-padding-block: var(--md-sys-layout-space-32);\n\n        /* trigger button */\n        --_md-split-button-trigger-padding-inline-start: calc(\n            26 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-padding-inline-end: var(\n            --md-sys-layout-space-32\n        );\n\n        --_md-split-button-trigger-pressed-padding-inline-start: calc(\n            29 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-pressed-padding-inline-end: calc(\n            29 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-padding-block: calc(29 * var(--dp, 1px));\n        --_md-split-button-trigger-pressed-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n    }\n\n    .extra-large {\n        /* height for button is 136 */\n        --md-sys-shape-corner-radius-full: calc(68 * var(--dp, 1px));\n\n        --_md-split-button-outer-corner-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n        --_md-split-button-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-medium\n        );\n        --_md-split-button-interaction-inner-corner-shape: var(\n            --md-sys-shape-corner-radius-large\n        );\n\n        --_md-button-icon-label-gap: var(--md-sys-layout-space-16);\n        --_md-button-outline-width: calc(3 * var(--dp, 1px));\n\n        /* primary button */\n        --_md-split-button-primary-padding-inline-start: var(\n            --md-sys-layout-space-64\n        );\n        --_md-split-button-primary-padding-inline-end: var(\n            --md-sys-layout-space-64\n        );\n\n        --_md-split-button-primary-padding-block: var(--md-sys-layout-space-48);\n\n        /* trigger button */\n        --_md-split-button-trigger-padding-inline-start: calc(\n            37 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-padding-inline-end: calc(\n            49 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-pressed-padding-inline-start: calc(\n            43 *\n            var(--dp, 1px)\n        );\n        --_md-split-button-trigger-pressed-padding-inline-end: calc(\n            43 *\n            var(--dp, 1px)\n        );\n\n        --_md-split-button-trigger-padding-block: calc(43 * var(--dp, 1px));\n        --_md-split-button-trigger-pressed-shape: var(\n            --md-sys-shape-corner-radius-full\n        );\n    }\n}\n","import type { ButtonSize } from \"../../core\";\nimport styles from \"./size.module.css\";\n\nexport const SplitButtonTriggerIconSize: Record<ButtonSize, number> = {\n    \"extra-small\": 22,\n    small: 22,\n    medium: 26,\n    large: 38,\n    \"extra-large\": 50,\n} as const;\n\nexport const splitButtonSizeConfig = (size: ButtonSize) => {\n    return styles[size];\n};\n\nexport const SplitButtonVariantBase = styles[\"size\"];\n\nexport const SplitButtonPrimaryBase = styles[\"primary\"];\nexport const SplitButtonTriggerBase = styles[\"trigger\"];\n"],"mappings":";;;;;;;;;GCGa,IAAyD;CAClE,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,KAAyB,MAC3B,EAAO,IAGL,IAAyB,EAAO,MAEhC,IAAyB,EAAO,SAChC,IAAyB,EAAO"}