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/Snackbar CHANGED Viewed

@@ -5,44 +5,35 @@ import { createContext as r, useContext as i, useMemo as a } from "react";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { Text as c, UNSTABLE_Toast as l, UNSTABLE_ToastContent as u, UNSTABLE_ToastQueue as d, UNSTABLE_ToastRegion as f } from "react-aria-components";
 import { X as p } from "lucide-react";
-import { flushSync as m } from "react-dom";
 import '../assets/Snackbar.css';//#region src/components/Snackbar/context.ts
-var h = r(null);
-function g() {
-	let e = i(h);
+var m = r(null);
+function h() {
+	let e = i(m);
 	if (!e) throw Error("useSnackbarQueue must be used inside SnackbarRegion");
 	return e;
 }
-var _ = {
-	"snackbar-region": "_snackbar-region_1xcaw_10",
-	snackbar: "_snackbar_1xcaw_10",
-	"snackbar-content": "_snackbar-content_1xcaw_66",
-	text: "_text_1xcaw_78"
-}, v = ({ children: r, maxVisibleSnackbars: i = 1 }) => {
-	let g = a(() => new d({
-		maxVisibleToasts: i,
-		wrapUpdate(e) {
-			"startViewTransition" in document ? document.startViewTransition(() => {
-				m(e);
-			}) : e();
-		}
-	}), [i]);
-	return /* @__PURE__ */ s(h, {
-		value: g,
+var g = {
+	"snackbar-region": "_snackbar-region_1uhs8_10",
+	snackbar: "_snackbar_1uhs8_10",
+	"snackbar-content": "_snackbar-content_1uhs8_68",
+	text: "_text_1uhs8_80"
+}, _ = ({ children: r, maxVisibleSnackbars: i = 1 }) => {
+	let h = a(() => new d({ maxVisibleToasts: i }), [i]);
+	return /* @__PURE__ */ s(m, {
+		value: h,
 		children: [r, /* @__PURE__ */ o(f, {
-			queue: g,
-			className: n(_["snackbar-region"]),
+			queue: h,
+			className: n(g["snackbar-region"]),
 			children: ({ toast: r }) => /* @__PURE__ */ s(l, {
 				toast: r,
-				className: n(_.snackbar),
-				style: { viewTransitionName: r.key },
+				className: n(g.snackbar),
 				"data-close": !r.content.hideCloseAction || void 0,
 				"data-action": r.content.hideCloseAction && !!r.content.action || void 0,
 				children: [/* @__PURE__ */ s(u, {
-					className: _["snackbar-content"],
+					className: g["snackbar-content"],
 					children: [/* @__PURE__ */ o(c, {
 						slot: "description",
-						className: n(_.text, e.bodyMedium),
+						className: n(g.text, e.bodyMedium),
 						children: r.content.supportingText
 					}), r.content.action]
 				}), !r.content.hideCloseAction && /* @__PURE__ */ o(t, {
@@ -56,6 +47,6 @@ var _ = {
 	});
 };
 //#endregion
-export { h as n, g as r, v as t };
+export { m as n, h as r, _ as t };
 //# sourceMappingURL=Snackbar.map

package/dist/chunks/Snackbar.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Snackbar","names":[],"sources":["../../src/components/Snackbar/context.ts","../../src/components/Snackbar/snackbar.module.css","../../src/components/Snackbar/SnackbarRegion.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { UNSTABLE_ToastQueue as ToastQueue } from \"react-aria-components\";\nimport type { SnackbarContent } from \"./types\";\n\nexport const SnackbarQueueContext =\n createContext<ToastQueue<SnackbarContent> \| null>(null);\n\nexport function useSnackbarQueue() {\n const queue = useContext(SnackbarQueueContext);\n\n if (!queue) {\n throw new Error(\"useSnackbarQueue must be used inside SnackbarRegion\");\n }\n\n return queue;\n}\n","/* configurable tokens\n\n --md-snackbar-background\n* --md-snackbar-color\n* --md-snackbar-action-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .snackbar-region {\n position: fixed;\n\n display: flex;\n flex-direction: column-reverse;\n gap: calc(2 var(--dp, 1px));\n\n inset-block-end: var(--md-sys-layout-space-24);\n\n inset-inline-start: 50%;\n translate: -50%;\n }\n\n .snackbar {\n --_md-snackbar-background: var(\n --md-snackbar-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-snackbar-color: var(\n --md-snackbar-color,\n var(--md-sys-color-inverse-on-surface)\n );\n --_md-snackbar-action-color: var(\n --md-snackbar-action-color,\n var(--md-sys-color-inverse-primary)\n );\n\n inline-size: min(90svi, calc(568 * var(--dp, 1px)));\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-4);\n\n padding-block: var(--md-sys-layout-space-4);\n padding-inline: var(--md-sys-layout-space-16);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n background-color: var(--_md-snackbar-background);\n color: var(--_md-snackbar-color);\n\n &[data-close] {\n padding-inline-end: var(--md-sys-layout-space-4);\n }\n\n &[data-action] {\n padding-inline-end: var(--md-sys-layout-space-8);\n }\n\n [data-close-button] {\n --md-button-color: var(--_md-snackbar-color);\n }\n }\n\n .snackbar-content {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-8);\n\n [data-button] {\n --md-button-color: var(--_md-snackbar-action-color);\n }\n }\n\n .text {\n padding-block: calc(10 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n Text,\n UNSTABLE_Toast as Toast,\n UNSTABLE_ToastContent as ToastContent,\n UNSTABLE_ToastQueue as ToastQueue,\n UNSTABLE_ToastRegion as ToastRegion,\n} from \"react-aria-components\";\nimport { ~~flushSync } from \"react-dom\";\nimport {~~ typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { SnackbarQueueContext } from \"./context\";\nimport styles from \"./snackbar.module.css\";\nimport type { SnackbarContent, SnackbarRegionProps } from \"./types\";\n\~~nexport~~ ~~const~~ ~~SnackbarRegion:~~ ~~React~~.~~FC<SnackbarRegionProps>~~ = ({\n ~~children~~,\n ~~maxVisibleSnackbars~~ = 1,\n}) => {\n const queue = ~~useMemo~~(() => {\n ~~return~~ ~~new~~ ~~ToastQueue<SnackbarContent>(~~{\n ~~maxVisibleToasts~~: ~~maxVisibleSnackbars~~,\n\n ~~wrapUpdate~~(fn) ~~{\n if~~ (\"~~startViewTransition~~\" in ~~document~~) {\n ~~document.startViewTransition((~~) => {\n ~~flushSync~~(fn);\n });\n } ~~else~~ {\n fn();\n }\n },\n });\n }, [maxVisibleSnackbars]);\n\n return (\n <SnackbarQueueContext value={queue}>\n {children}\n <ToastRegion\n queue={queue}\n className={clsx(styles[\"snackbar-region\"])}\n >\n {({ toast }) => (\n <Toast\n toast={toast}\n className={clsx(styles[\"snackbar\"])}\n ~~style={{ viewTransitionName: toast.key }}\n~~ data-close={!toast.content.hideCloseAction \|\| undefined}\n data-action={\n (toast.content.hideCloseAction &&\n !!toast.content.action) \|\|\n undefined\n }\n >\n <ToastContent className={styles[\"snackbar-content\"]}>\n <Text\n slot=\"description\"\n className={clsx(\n styles[\"text\"],\n typography.bodyMedium\n )}\n >\n {toast.content.supportingText}\n </Text>\n\n {toast.content.action}\n </ToastContent>\n\n {!toast.content.hideCloseAction && (\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n data-close-button\n />\n )}\n </Toast>\n )}\n </ToastRegion>\n </SnackbarQueueContext>\n );\n};\n"],"mappings":"~~;;;;;;;;;AAIA~~,~~IAAa~~,~~IACT~~,EAAkD,IAAI;~~AAE1D~~,~~SAAO~~,IAAA;CACH,~~IAAA~~,~~IAAc~~,~~EAAW~~,CAAoB;CAE7C,IAAI,~~CAAC~~,GACD,MAAU,MAAM,qDAAqD;CACxE,~~OAEM~~;AAAK;;;;;;~~GEGH~~,KAAiD,EAC1D,aACA,yBAAsB,QACpB;CACF,~~IAAM~~,~~IAAQ~~,QACH,~~IAAI~~,EAA4B;EACnC,~~kBAAkB;EAElB~~,~~WAAW~~,~~GAAI;GACX,AAAI,yBAAyB,WACzB,SAAS,0BAA0B;IAC/B,EAAU,CAAE;GAChB,~~CAAC,~~IAED,EAAG;EAEX;CACJ,CAAC,~~GACF,~~CAAC~~,CAAmB,CAAC;CAExB,OACI,~~kBAAC~~,GAAD;EAAsB,~~OAAO~~;~~YAA7B~~,~~CACK~~,GACD,~~kBAAC~~,GAAD;GACW;GACP,~~WAAW~~,~~EAAK~~,EAAO,kBAAkB;~~cAEvC~~,EAAE,eACA,~~kBAAC~~,GAAD;IACW;IACP,~~WAAW~~,~~EAAK~~,~~EAAO~~,QAAW;IAClC,~~OAAO,EAAE,oBAAoB,EAAM,IAAI;IACvC,~~cAAY,~~CAAC~~,EAAM,QAAQ,mBAAmB,KAAA;IAC9C,~~eACK~~,EAAM,QAAQ,mBACX,CAAC,~~CAAC~~,EAAM,QAAQ,UACpB,KAAA;~~cARR~~,~~CAWI~~,~~kBAAC~~,GAAD;KAAc,~~WAAW~~,EAAO;~~eAAhC~~,CACI,~~kBAAC~~,GAAD;MACI,MAAK;MACL,~~WAAW~~,~~EACP~~,~~EAAO~~,~~MACP~~,EAAW,UACf;~~gBAEC~~,EAAM,QAAQ;KACb,CAAA,~~GAEL~~,EAAM,QAAQ,MACL;~~QAEb~~,~~CAAC~~,EAAM,QAAQ,mBACZ,~~kBAAC~~,GAAD;KACI,MAAK;KACL,~~MAAM~~;KACN,OAAM;KACN,qBAAA;IAAiB,CAAA,CAGtB;;EAEF,CAAA,CACK;;AAE9B"}
1	+ {"version":3,"file":"Snackbar","names":["ToastQueue","ToastRegion","styles","Toast","ToastContent","typography","SnackbarQueueContext","createContext","useSnackbarQueue","queue","useContext","snackbar_module_default","SnackbarRegion","useMemo","UNSTABLE_ToastQueue","maxVisibleSnackbars","children","UNSTABLE_ToastRegion","clsx","UNSTABLE_Toast","\"snackbar\"","toast","UNSTABLE_ToastContent","Text","\"text\"","IconButton","X"],"sources":["../../src/components/Snackbar/context.ts","../../src/components/Snackbar/snackbar.module.css","../../src/components/Snackbar/SnackbarRegion.tsx"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { UNSTABLE_ToastQueue as ToastQueue } from \"react-aria-components\";\nimport type { SnackbarContent } from \"./types\";\n\n/*\n React context holding the active `ToastQueue` instance for snackbars,\n * or `null` if accessed outside a {@link SnackbarRegion}.\n /\nexport const SnackbarQueueContext =\n createContext<ToastQueue<SnackbarContent> \| null>(null);\n\n/\n Hook to access the active snackbar queue from any child component within a {@link SnackbarRegion}.\n \n Returns the underlying React Aria `ToastQueue` instance, allowing components\n * to enqueue new snackbars, dismiss existing ones, or inspect the queue.\n \n @throws {Error} If called outside of a {@link SnackbarRegion}.\n \n @example\n * ```tsx\n * import { Button, useSnackbarQueue } from \"@adgytec/web-ui-components\";\n \n export function CopyButton({ text }: { text: string }) {\n * const snackbarQueue = useSnackbarQueue();\n \n const handleCopy = async () => {\n * await navigator.clipboard.writeText(text);\n * snackbarQueue.add(\n * {\n * supportingText: \"Copied to clipboard\",\n * action: (\n * <Button color=\"text\" onPress={() => console.log(\"Undo\")}>\n * Undo\n * </Button>\n * ),\n * },\n * { timeout: 4000 }\n * );\n * };\n \n return <Button onPress={handleCopy}>Copy</Button>;\n * }\n * ```\n /\nexport function useSnackbarQueue() {\n const queue = useContext(SnackbarQueueContext);\n\n if (!queue) {\n throw new Error(\"useSnackbarQueue must be used inside SnackbarRegion\");\n }\n\n return queue;\n}\n","/ configurable tokens\n\n --md-snackbar-background\n* --md-snackbar-color\n* --md-snackbar-action-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .snackbar-region {\n position: fixed;\n\n display: flex;\n flex-direction: column-reverse;\n gap: calc(2 var(--dp, 1px));\n\n inset-block-end: var(--md-sys-layout-space-24);\n\n inset-inline-start: 50%;\n translate: -50%;\n\n z-index: 999999;\n }\n\n .snackbar {\n --_md-snackbar-background: var(\n --md-snackbar-background,\n var(--md-sys-color-inverse-surface)\n );\n --_md-snackbar-color: var(\n --md-snackbar-color,\n var(--md-sys-color-inverse-on-surface)\n );\n --_md-snackbar-action-color: var(\n --md-snackbar-action-color,\n var(--md-sys-color-inverse-primary)\n );\n\n inline-size: min(90svi, calc(568 * var(--dp, 1px)));\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-4);\n\n padding-block: var(--md-sys-layout-space-4);\n padding-inline: var(--md-sys-layout-space-16);\n\n box-shadow: var(--md-sys-elevation-shadow-3);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n background-color: var(--_md-snackbar-background);\n color: var(--_md-snackbar-color);\n\n &[data-close] {\n padding-inline-end: var(--md-sys-layout-space-4);\n }\n\n &[data-action] {\n padding-inline-end: var(--md-sys-layout-space-8);\n }\n\n [data-close-button] {\n --md-button-color: var(--_md-snackbar-color);\n }\n }\n\n .snackbar-content {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-8);\n\n [data-button] {\n --md-button-color: var(--_md-snackbar-action-color);\n }\n }\n\n .text {\n padding-block: calc(10 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { X } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport {\n Text,\n UNSTABLE_Toast as Toast,\n UNSTABLE_ToastContent as ToastContent,\n UNSTABLE_ToastQueue as ToastQueue,\n UNSTABLE_ToastRegion as ToastRegion,\n} from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { SnackbarQueueContext } from \"./context\";\nimport styles from \"./snackbar.module.css\";\nimport type { SnackbarContent, SnackbarRegionProps } from \"./types\";\n\n/*\n Root region component for managing and rendering [Material 3 Snackbars](https://m3.material.io/components/snackbar/overview).\n \n Wraps your application or a section of it to provide a snackbar context via {@link SnackbarQueueContext}.\n * Renders an underlying React Aria `ToastRegion` fixed at the bottom center of the viewport (elevated with\n * high z-index), displaying queued snackbar notifications with supporting text, optional actions,\n * and an optional dismiss button.\n \n Configurable CSS tokens:\n * - `--md-snackbar-background`: Background color of the snackbar (`var(--md-sys-color-inverse-surface)`).\n * - `--md-snackbar-color`: Text and icon color of the snackbar (`var(--md-sys-color-inverse-on-surface)`).\n * - `--md-snackbar-action-color`: Text color of the action button (`var(--md-sys-color-inverse-primary)`).\n \n @example\n * ```tsx\n * import {\n * Button,\n * SnackbarRegion,\n * useSnackbarQueue,\n * } from \"@adgytec/web-ui-components\";\n \n function NotificationTrigger() {\n * const queue = useSnackbarQueue();\n \n const showNotification = () => {\n * queue.add(\n * {\n * supportingText: \"File uploaded successfully.\",\n * action: (\n * <Button color=\"text\" onPress={() => console.log(\"View\")}>\n * View\n * </Button>\n * ),\n * },\n * { timeout: 5000 }\n * );\n * };\n \n return <Button onPress={showNotification}>Upload</Button>;\n * }\n \n export function App() {\n * return (\n * <SnackbarRegion maxVisibleSnackbars={1}>\n * <NotificationTrigger />\n * </SnackbarRegion>\n * );\n * }\n * ```\n */\nexport const SnackbarRegion: React.FC<SnackbarRegionProps> = ({\n children,\n maxVisibleSnackbars = 1,\n}) => {\n const queue = useMemo(() => {\n return new ToastQueue<SnackbarContent>({\n maxVisibleToasts: maxVisibleSnackbars,\n });\n }, [maxVisibleSnackbars]);\n\n return (\n <SnackbarQueueContext value={queue}>\n {children}\n <ToastRegion\n queue={queue}\n className={clsx(styles[\"snackbar-region\"])}\n >\n {({ toast }) => (\n <Toast\n toast={toast}\n className={clsx(styles[\"snackbar\"])}\n data-close={!toast.content.hideCloseAction \|\| undefined}\n data-action={\n (toast.content.hideCloseAction &&\n !!toast.content.action) \|\|\n undefined\n }\n >\n <ToastContent className={styles[\"snackbar-content\"]}>\n <Text\n slot=\"description\"\n className={clsx(\n styles[\"text\"],\n typography.bodyMedium\n )}\n >\n {toast.content.supportingText}\n </Text>\n\n {toast.content.action}\n </ToastContent>\n\n {!toast.content.hideCloseAction && (\n <IconButton\n slot=\"close\"\n icon={X}\n color=\"standard\"\n data-close-button\n />\n )}\n </Toast>\n )}\n </ToastRegion>\n </SnackbarQueueContext>\n );\n};\n"],"mappings":";;;;;;;;AAQA,IAAaM,IACTC,EAAkD,IAAI;AAoC1D,SAAOC,IAAA;CACH,IAAAC,IAAcC,EAAWJ,CAAoB;CAE7C,IAAI,CAACG,GACD,MAAU,MAAM,qDAAqD;CACxE,OAEMA;AAAK;;;;;;GEcHG,KAAiD,EAC1D,aACA,yBAAsB,QACpB;CACF,IAAMH,IAAQI,QACH,IAAIb,EAA4B,EACnC,kBAAkBe,EACtB,CAAC,GACF,CAACA,CAAmB,CAAC;CAExB,OACI,kBAACT,GAAD;EAAsB,OAAOG;EAA7B,UAAA,CACKO,GACD,kBAACf,GAAD;GACW;GACP,WAAWiB,EAAKhB,EAAO,kBAAkB;GAEvC,WAAA,EAAE,eACA,kBAACC,GAAD;IACW;IACP,WAAWe,EAAKhB,EAAOkB,QAAW;IAClC,cAAY,CAACC,EAAM,QAAQ,mBAAmB,KAAA;IAC9C,eACKA,EAAM,QAAQ,mBACX,CAAC,CAACA,EAAM,QAAQ,UACpB,KAAA;IAPR,UAAA,CAUI,kBAACjB,GAAD;KAAc,WAAWF,EAAO;KAAhC,UAAA,CACI,kBAACqB,GAAD;MACI,MAAK;MACL,WAAWL,EACPhB,EAAOsB,MACPnB,EAAW,UACf;MAEC,UAAAgB,EAAM,QAAQ;KACb,CAAA,GAELA,EAAM,QAAQ,MACL;IAEb,CAAA,GAAA,CAACA,EAAM,QAAQ,mBACZ,kBAACI,GAAD;KACI,MAAK;KACL,MAAMC;KACN,OAAM;KACN,qBAAA;IAAiB,CAAA,CAGtB;;EAEF,CAAA,CACK;;AAE9B"}

package/dist/chunks/SplitButton CHANGED Viewed

@@ -5,8 +5,8 @@ import { useMemo as r } from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { Toolbar as a } from "react-aria-components";
 import '../assets/SplitButton.css';//#region src/components/Button/SplitButton/SplitButton/splitButton.module.css
-var o = { "split-button": "_split-button_1mye6_2" }, s = ({ color: s = "filled", size: c = "small", isPending: l, isDisabled: u, children: d, className: f, ...p }) => /* @__PURE__ */ i(t, {
-	value: r(() => ({
+var o = { "split-button": "_split-button_1mye6_2" }, s = ({ color: s = "filled", size: c = "small", isPending: l, isDisabled: u, children: d, className: f, ...p }) => {
+	let m = r(() => ({
 		isPending: l,
 		isDisabled: u,
 		color: s,
@@ -16,14 +16,17 @@ var o = { "split-button": "_split-button_1mye6_2" }, s = ({ color: s = "filled",
 		u,
 		s,
 		c
-	]),
-	children: /* @__PURE__ */ i(a, {
-		className: n(o["split-button"], e(c), f),
-		...p,
-		"data-split-button": !0,
-		children: d
-	})
-});
+	]);
+	return /* @__PURE__ */ i(t, {
+		value: m,
+		children: /* @__PURE__ */ i(a, {
+			className: n(o["split-button"], e(c), f),
+			...p,
+			"data-split-button": !0,
+			children: d
+		})
+	});
+};
 //#endregion
 export { s as t };

package/dist/chunks/SplitButton.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButton","names":[],"sources":["../../src/components/Button/SplitButton/SplitButton/splitButton.module.css","../../src/components/Button/SplitButton/SplitButton/SplitButton.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .split-button [data-visual-button] {\n --_md-button-shape-motion: var(--md-sys-motion-standard-fast-spatial);\n --_md-button-shape-motion-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n }\n}\n\n@layer adgytec.comps {\n .split-button {\n display: inline-flex;\n gap: calc(2 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { Toolbar } from \"react-aria-components\";\nimport { splitButtonSizeConfig } from \"../core\";\nimport { SplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButton.module.css\";\nimport type { SplitButtonProps } from \"./types\";\n\nexport const SplitButton: React.FC<SplitButtonProps> = ({\n color = \"filled\",\n size = \"small\",\n\n isPending,\n isDisabled,\n\n children,\n className,\n\n ...props\n}) => {\n const contextValue = useMemo(\n () => ({\n isPending,\n isDisabled,\n color,\n size,\n }),\n [isPending, isDisabled, color, size]\n );\n\n return (\n <SplitButtonContext value={contextValue}>\n <Toolbar\n className={clsx(\n styles[\"split-button\"],\n splitButtonSizeConfig(size),\n className\n )}\n {...props}\n data-split-button\n >\n {children}\n </Toolbar>\n </SplitButtonContext>\n );\n};\n"],"mappings":";;;;;;;~~qDCQa~~,KAA2C,EACpD,WAAQ,UACR,UAAO,SAEP,cACA,eAEA,aACA,cAEA,~~GAAG~~,~~QAaC~~,~~kBAAC~~,~~GAAD;CAAoB~~,~~OAXH,~~SACV;EACH;EACA;EACA;EACA;CACJ,IACA;~~EAAC~~;~~EAAW~~;~~EAAY~~;~~EAAO~~;CAAI,~~CAIR~~;~~WACvB~~,~~kBAAC~~,GAAD;~~EACI~~,~~WAAW~~,~~EACP~~,EAAO,~~iBACP~~,~~EAAsB~~,CAAI,~~GAC1B~~,CACJ;~~EACA~~,~~GAAI~~;~~EACJ~~,qBAAA;~~EAEC~~;~~CACI~~,CAAA;~~AACO~~,CAAA"}
1	+ {"version":3,"file":"SplitButton","names":["styles","splitButtonSizeConfig","splitButton_module_default","SplitButton","props","contextValue","useMemo","isPending","isDisabled","color","size","SplitButtonContext","Toolbar","clsx","className"],"sources":["../../src/components/Button/SplitButton/SplitButton/splitButton.module.css","../../src/components/Button/SplitButton/SplitButton/SplitButton.tsx"],"sourcesContent":["@layer adgytec.overrides {\n .split-button [data-visual-button] {\n --_md-button-shape-motion: var(--md-sys-motion-standard-fast-spatial);\n --_md-button-shape-motion-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n }\n}\n\n@layer adgytec.comps {\n .split-button {\n display: inline-flex;\n gap: calc(2 * var(--dp, 1px));\n }\n}\n","import { clsx } from \"clsx\";\nimport { useMemo } from \"react\";\nimport { Toolbar } from \"react-aria-components\";\nimport { splitButtonSizeConfig } from \"../core\";\nimport { SplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButton.module.css\";\nimport type { SplitButtonProps } from \"./types\";\n\n/*\n A composite button container implementing Material Design 3 Split Buttons.\n \n Couples a primary action button ({@link SplitButtonPrimary}) with an adjacent dropdown menu trigger\n * ({@link SplitButtonTrigger}) inside an accessible React Aria `Toolbar`.\n * Synchronizes size, color variant, disabled, and pending states across both button parts via context.\n \n @example\n * ```tsx\n * <SplitButton color=\"tonal\">\n * <SplitButtonPrimary icon={Save} onPress={handleSave}>\n * Save\n * </SplitButtonPrimary>\n * <MenuTrigger>\n * <SplitButtonTrigger aria-label=\"More save options\" />\n * <MenuPopover>\n * <Menu>\n * <MenuItem label=\"Save as draft\" />\n * </Menu>\n * </MenuPopover>\n * </MenuTrigger>\n * </SplitButton>\n * ```\n */\nexport const SplitButton: React.FC<SplitButtonProps> = ({\n color = \"filled\",\n size = \"small\",\n\n isPending,\n isDisabled,\n\n children,\n className,\n\n ...props\n}) => {\n const contextValue = useMemo(\n () => ({\n isPending,\n isDisabled,\n color,\n size,\n }),\n [isPending, isDisabled, color, size]\n );\n\n return (\n <SplitButtonContext value={contextValue}>\n <Toolbar\n className={clsx(\n styles[\"split-button\"],\n splitButtonSizeConfig(size),\n className\n )}\n {...props}\n data-split-button\n >\n {children}\n </Toolbar>\n </SplitButtonContext>\n );\n};\n"],"mappings":";;;;;;;qDCgCaG,KAA2C,EACpD,WAAQ,UACR,UAAO,SAEP,cACA,eAEA,aACA,cAEA,GAAGC,QACD;CACF,IAAMC,IAAeC,SACV;EACH;EACA;EACA;EACA;CACJ,IACA;EAACC;EAAWC;EAAYC;EAAOC;CAAI,CACvC;CAEA,OACI,kBAACC,GAAD;EAAoB,OAAON;EACvB,UAAA,kBAACO,GAAD;GACI,WAAWC,EACPb,EAAO,iBACPC,EAAsBS,CAAI,GAC1BI,CACJ;GACA,GAAIV;GACJ,qBAAA;GAEC;EACI,CAAA;CACO,CAAA;AAE5B"}

package/dist/chunks/SplitButtonTrigger CHANGED Viewed

@@ -11,19 +11,20 @@ import { Button as _ } from "react-aria-components";
 import { ChevronDown as v } from "lucide-react";
 import '../assets/SplitButtonTrigger.css';//#region src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css
 var y = e(), b = { trigger: "_trigger_5plck_2" }, x = (e) => {
-	let x = (0, y.c)(23), S, C, w, T, E, D;
+	let x = (0, y.c)(24), S, C, w, T, E, D;
 	x[0] === e ? (S = x[1], C = x[2], w = x[3], T = x[4], E = x[5], D = x[6]) : ({tooltip: D, onPress: T, isDisabled: C, isPending: w, className: S, ...E} = e, x[0] = e, x[1] = S, x[2] = C, x[3] = w, x[4] = T, x[5] = E, x[6] = D);
 	let O = p(), { splashInfo: k, handlePress: A } = i(T), j = w || O.isPending, M = C || O.isDisabled, N;
 	x[7] !== S || x[8] !== O.color ? (N = (e) => m(o, t, d, l(O.color), typeof S == "function" ? S(e) : S), x[7] = S, x[8] = O.color, x[9] = N) : N = x[9];
 	let P;
-	x[10] !== k || x[11] !== O.size ? (P = (e) => {
+	x[10] !== j || x[11] !== k || x[12] !== O.size ? (P = (e) => {
 		let { isDisabled: t, isFocusVisible: i, isFocused: o, isPressed: c, isHovered: l } = e, d = {
 			"data-hovered": l || void 0,
 			"data-disabled": t || void 0,
 			"data-focused": o || void 0,
 			"data-focus-visible": i || void 0,
 			"data-pressed": c || void 0,
-			"data-visual-button": !0
+			"data-visual-button": !0,
+			"data-pending": j || void 0
 		};
 		return /* @__PURE__ */ g("span", {
 			className: m(a, s, b.trigger, u),
@@ -33,9 +34,9 @@ var y = e(), b = { trigger: "_trigger_5plck_2" }, x = (e) => {
 				size: f[O.size]
 			})]
 		});
-	}, x[10] = k, x[11] = O.size, x[12] = P) : P = x[12];
+	}, x[10] = j, x[11] = k, x[12] = O.size, x[13] = P) : P = x[13];
 	let F;
-	x[13] !== M || x[14] !== A || x[15] !== j || x[16] !== E || x[17] !== N || x[18] !== P ? (F = /* @__PURE__ */ h(_, {
+	x[14] !== M || x[15] !== A || x[16] !== j || x[17] !== E || x[18] !== N || x[19] !== P ? (F = /* @__PURE__ */ h(_, {
 		onPress: A,
 		isDisabled: M,
 		isPending: j,
@@ -44,9 +45,9 @@ var y = e(), b = { trigger: "_trigger_5plck_2" }, x = (e) => {
 		"data-button": !0,
 		"data-split-button-trigger": !0,
 		children: P
-	}), x[13] = M, x[14] = A, x[15] = j, x[16] = E, x[17] = N, x[18] = P, x[19] = F) : F = x[19];
+	}), x[14] = M, x[15] = A, x[16] = j, x[17] = E, x[18] = N, x[19] = P, x[20] = F) : F = x[20];
 	let I;
-	return x[20] !== F || x[21] !== D ? (I = c(F, D), x[20] = F, x[21] = D, x[22] = I) : I = x[22], I;
+	return x[21] !== F || x[22] !== D ? (I = c(F, D), x[21] = F, x[22] = D, x[23] = I) : I = x[23], I;
 };
 //#endregion
 export { x as t };

package/dist/chunks/SplitButtonTrigger.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SplitButtonTrigger","names":["ChevronDown","handlePress","disabled","pending"],"sources":["../../src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css","../../src/components/Button/SplitButton/SplitButtonTrigger/SplitButtonTrigger.tsx"],"sourcesContent":["@layer adgytec.comps {\n .trigger {\n --rotate: 0;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n rotate: var(--rotate);\n transition: rotate 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}\n","import { clsx } from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Button as AriaButton } 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 ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n withTooltip,\n} from \"../../core\";\nimport {\n SplitButtonTriggerBase,\n SplitButtonTriggerIconSize,\n SplitButtonVariantBase,\n} from \"../core\";\nimport { useSplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButtonTrigger.module.css\";\nimport type { SplitButtonTriggerProps } from \"./types\";\n\nexport const SplitButtonTrigger: React.FC<SplitButtonTriggerProps> = ({\n tooltip,\n onPress,\n isDisabled,\n isPending,\n className,\n ...props\n}) => {\n const splitButtonState = useSplitButtonContext();\n\n const { splashInfo, handlePress } = useSplash(onPress);\n\n const pending = isPending \|\| splitButtonState.isPending;\n const disabled = isDisabled \|\| splitButtonState.isDisabled;\n\n return withTooltip(\n <AriaButton\n onPress={handlePress}\n isDisabled={disabled}\n isPending={pending}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n TapTarget,\n SplitButtonTriggerBase,\n buttonColorConfig(splitButtonState.color),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n data-split-button-trigger\n >\n {({\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\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-visual-button\": true,\n };\n\n return (\n <span\n className={clsx(\n ButtonCore,\n buttonColorBase,\n styles[\"trigger\"],\n SplitButtonVariantBase\n )}\n {...dataAttrs}\n >\n {splashInfo && <Splash {...splashInfo} />}\n <Icon\n icon={ChevronDown}\n size={\n SplitButtonTriggerIconSize[\n splitButtonState.size\n ]\n }\n />\n </span>\n );\n }}\n </AriaButton>,\n tooltip\n );\n};\n"],"mappings":";;;;;;;;;;;;~~kDCuBa~~,KAAwD,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,EAAA,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,KAOpE,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,OAPqE,~~uEAAA~~,~~KAAA~~,GAOrE,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CACG,~~IAAA~~,~~IAAyB~~,EAAsB,GAE/C,EAAA,eAAA,~~mBAAoC~~,~~EAAU~~,CAAO,~~GAErD~~,~~IAAgB~~,~~KAAa~~,EAAgB,~~WAC7C~~,~~IAAiB~~,~~KAAc~~,EAAgB,~~YAAY~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,EAAA,SAOxC,KAAA,~~MACP~~,~~EACI~~,~~GACA~~,~~GACA~~,~~GACA~~,~~EAAkB~~,EAAgB,KAAM,GACxC,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CACF,~~IAFd~~,CAGJ,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,EAAA,OAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,EAAA,QAMJ,KAAA,MAAA;EAAC,IAAA,EAAA,~~YAAA~~,GAAA,mBAAA,cAAA,cAAA,~~iBAAA~~,~~GAOE~~,IAAkB;GAAA,~~gBACE~~,KAAA,KAAA;GAAsB,~~iBACrB~~,KAAA,KAAA;GAAuB,~~gBACxB~~,KAAA,KAAA;GAAsB,~~sBAChB~~,KAAA,KAAA;GAA2B,~~gBACjC~~,KAAA,KAAA;GAAsB,sBAChB;~~EAC1B~~;EAAE,OAGE,kBAAA,QAAA;GACe,~~WAAA~~,~~EACP~~,~~GACA~~,~~GACA~~,EAAM,~~SACN~~,CACJ;GAAC,~~GACG~~;~~aAPR~~,~~CASK~~,KAAc,~~kBAAC~~,GAAD,EAAO,~~GAAK~~,EAAU,CAAA,GACrC,kBAAC,GAAD;~~IACUA~~,MAAA;IAEF,~~MAAA~~,~~EACI~~,EAAgB;GACnB,CAAA,CAGN;;CAAA,GAEd,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,EAAA,~~MAAA~~,EAAA,MAAA,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAxDL~~,IAAA,~~kBAAC~~,GAAD;~~EACaC~~,SAAA;~~EACGC~~,YAAA;~~EACDC~~,~~WAAA~~;EACA,~~WAAA~~;EASN,~~GAED~~;EACJ,eAAA;EACA,6BAAA;~~YAEC~~;CAnBM,CAAA,~~GAyDE~~,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CAEhB,~~OAFgB~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KA1DV~~,~~IAAA~~,~~EACH~~,~~GA0DA~~,CACJ,GAAC,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA,~~KA5DM~~;~~AA4DN~~"}
1	+ {"version":3,"file":"SplitButtonTrigger","names":["ChevronDown","handlePress","disabled","pending","_c","styles","AriaButton","require_compiler_runtime","Icon","Splash","useSplash","ButtonCore","ButtonReset","buttonColorBase","withTooltip","buttonColorConfig","SplitButtonVariantBase","SplitButtonTriggerBase","SplitButtonTriggerIconSize","import_compiler_runtime","splitButtonTrigger_module_default","SplitButtonTrigger","$","className","isDisabled","isPending","onPress","props","tooltip","t0","splitButtonState","useSplitButtonContext","pending","disabled","t1","clsx","TapTarget","renderProps","t2","splashInfo","isDisabled_0","t3","dataAttrs","isHovered","isFocused","isFocusVisible","isPressed","ChevronDown","handlePress","Button","t4"],"sources":["../../src/components/Button/SplitButton/SplitButtonTrigger/splitButtonTrigger.module.css","../../src/components/Button/SplitButton/SplitButtonTrigger/SplitButtonTrigger.tsx"],"sourcesContent":["@layer adgytec.comps {\n .trigger {\n --rotate: 0;\n\n &[data-pressed] {\n --rotate: 180deg;\n }\n\n > svg {\n rotate: var(--rotate);\n transition: rotate 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}\n","import { clsx } from \"clsx\";\nimport { ChevronDown } from \"lucide-react\";\nimport { Button as AriaButton } 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 ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n withTooltip,\n} from \"../../core\";\nimport {\n SplitButtonTriggerBase,\n SplitButtonTriggerIconSize,\n SplitButtonVariantBase,\n} from \"../core\";\nimport { useSplitButtonContext } from \"../SplitButtonContext\";\nimport styles from \"./splitButtonTrigger.module.css\";\nimport type { SplitButtonTriggerProps } from \"./types\";\n\n/*\n The dropdown menu trigger button within a {@link SplitButton}.\n \n Renders a chevron icon indicating that more actions are available in an adjacent menu.\n * Inherits visual styling (size and color) and states (disabled, pending) from the parent `SplitButtonContext`.\n * Typically wrapped inside a `MenuTrigger` component alongside a `MenuPopover`.\n \n @example\n * ```tsx\n * <MenuTrigger>\n * <SplitButtonTrigger aria-label=\"More options\" />\n * <MenuPopover>\n * <Menu>\n * <MenuItem label=\"Export\" />\n * </Menu>\n * </MenuPopover>\n * </MenuTrigger>\n * ```\n */\nexport const SplitButtonTrigger: React.FC<SplitButtonTriggerProps> = ({\n tooltip,\n onPress,\n isDisabled,\n isPending,\n className,\n ...props\n}) => {\n const splitButtonState = useSplitButtonContext();\n\n const { splashInfo, handlePress } = useSplash(onPress);\n\n const pending = isPending \|\| splitButtonState.isPending;\n const disabled = isDisabled \|\| splitButtonState.isDisabled;\n\n return withTooltip(\n <AriaButton\n onPress={handlePress}\n isDisabled={disabled}\n isPending={pending}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n TapTarget,\n SplitButtonTriggerBase,\n buttonColorConfig(splitButtonState.color),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-button\n data-split-button-trigger\n >\n {({\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\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-visual-button\": true,\n \"data-pending\": pending \|\| undefined,\n };\n\n return (\n <span\n className={clsx(\n ButtonCore,\n buttonColorBase,\n styles[\"trigger\"],\n SplitButtonVariantBase\n )}\n {...dataAttrs}\n >\n {splashInfo && <Splash {...splashInfo} />}\n <Icon\n icon={ChevronDown}\n size={\n SplitButtonTriggerIconSize[\n splitButtonState.size\n ]\n }\n />\n </span>\n );\n }}\n </AriaButton>,\n tooltip\n );\n};\n"],"mappings":";;;;;;;;;;;;kDC0CaqB,KAAwD,MAAA;CAAA,IAAAC,KAAA,GAAAlB,EAAAA,EAAAA,CAAA,EAAA,GAAAmB,GAAAC,GAAAC,GAAAC,GAAAC,GAAAC;CAAA,AAAAN,EAAA,OAAAO,KAOpE,IAAAP,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OAPqE,oEAAA,GAAAK,KAAAE,GAOrE,EAAA,KAAAA,GAAA,EAAA,KAAAN,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CACG,IAAAE,IAAyBC,EAAsB,GAE/C,EAAA,eAAA,mBAAoCrB,EAAUgB,CAAO,GAErDM,IAAgBP,KAAaK,EAAgB,WAC7CG,IAAiBT,KAAcM,EAAgB,YAAYI;CAAA,AAAAZ,EAAA,OAAAC,KAAAD,EAAA,OAAAQ,EAAA,SAOxC,KAAA,MACPK,EACIvB,GACAwB,GACAnB,GACAF,EAAkBe,EAAgB,KAAM,GACxC,OAAOP,KAAc,aACfA,EAAUc,CACF,IAFdd,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAO,EAAA,OAAA,EAAA,KAAAI,KAAA,IAAAZ,EAAA;CAAA,IAAAgB;CAAA,AAAAhB,EAAA,QAAAU,KAAAV,EAAA,QAAAiB,KAAAjB,EAAA,QAAAQ,EAAA,QAMJ,KAAA,MAAA;EAAC,IAAA,EAAA,YAAAU,GAAA,mBAAA,cAAA,cAAA,iBAAAC,GAOEC,IAAkB;GAAA,gBACEC,KAAA,KAAA;GAAsB,iBACrBH,KAAA,KAAA;GAAuB,gBACxBI,KAAA,KAAA;GAAsB,sBAChBC,KAAA,KAAA;GAA2B,gBACjCC,KAAA,KAAA;GAAsB,sBAChB;GAAI,gBACVd,KAAA,KAAA;EACpB;EAAE,OAGE,kBAAA,QAAA;GACe,WAAAG,EACPxB,GACAE,GACAR,EAAM,SACNW,CACJ;GAAC,GACG0B;GAPR,UAAA,CASKH,KAAc,kBAAC9B,GAAD,EAAO,GAAK8B,EAAU,CAAA,GACrC,kBAAC/B,GAAD;IACUR,MAAA+C;IAEF,MAAA7B,EACIY,EAAgB;GACnB,CAAA,CAGN;;CAAA,GAEd,EAAA,MAAAE,GAAA,EAAA,MAAAO,GAAA,EAAA,MAAAT,EAAA,MAAA,EAAA,MAAAQ,KAAA,IAAAhB,EAAA;CAAA,IAAAmB;CAAA,AAAAnB,EAAA,QAAAW,KAAAX,EAAA,QAAA0B,KAAA1B,EAAA,QAAAU,KAAAV,EAAA,QAAAK,KAAAL,EAAA,QAAAY,KAAAZ,EAAA,QAAAgB,KAzDL,IAAA,kBAAChC,GAAD;EACaL,SAAA+C;EACG9C,YAAA+B;EACD9B,WAAA6B;EACA,WAAAE;EASN,GAEDP;EACJ,eAAA;EACA,6BAAA;EAEC,UAAAW;CAnBM,CAAA,GA0DE,EAAA,MAAAL,GAAA,EAAA,MAAAe,GAAA,EAAA,MAAAhB,GAAA,EAAA,MAAAL,GAAA,EAAA,MAAAO,GAAA,EAAA,MAAAI,GAAA,EAAA,MAAAG,KAAA,IAAAnB,EAAA;CAAA,IAAA4B;CAEhB,OAFgB5B,EAAA,QAAAmB,KAAAnB,EAAA,QAAAM,KA3DV,IAAAd,EACH2B,GA2DAb,CACJ,GAAC,EAAA,MAAAa,GAAA,EAAA,MAAAb,GAAA,EAAA,MAAAsB,KAAA,IAAA5B,EAAA,KA7DM4B;AA6DN"}

package/dist/chunks/SubmenuPopover.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubmenuPopover","names":[],"sources":["../../src/components/Menu/SubmenuPopover/submenuPopover.module.css","../../src/components/Menu/SubmenuPopover/SubmenuPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import clsx from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./submenuPopover.module.css\";\n\~~nexport~~ ~~const~~ SubmenuPopover: ~~React.FC<\~~n React.ComponentPropsWithRef<typeof Popover>\n> = ({ offset = -1, className, ...props }) => {\n return (\n <Popover\n offset={offset}\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;~~yCCIa~~,~~KAER~~,~~EAAE~~,YAAS,~~IAAI~~,~~cAAW~~,~~GAAG~~,~~QAE1B~~,~~kBAAC~~,GAAD;CACY;CACR,YAAY,~~MACR~~,~~EACI~~,~~EAAO~~,SACP,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CAAW,~~IACrB~~,CACV;CAEJ,~~GAAI~~;AAAM,CAAA"}
1	+ {"version":3,"file":"SubmenuPopover","names":["clsx","styles","Popover","clsx$1","submenuPopover_module_default","SubmenuPopover","props","\"popover\"","className","renderProps"],"sources":["../../src/components/Menu/SubmenuPopover/submenuPopover.module.css","../../src/components/Menu/SubmenuPopover/SubmenuPopover.tsx"],"sourcesContent":["@layer adgytec.comps {\n .popover {\n display: grid;\n grid-template-rows: 1fr;\n }\n}\n","import clsx from \"clsx\";\nimport { Popover } from \"@/components/Popover\";\nimport styles from \"./submenuPopover.module.css\";\n\n/*\n Props for the [`SubmenuPopover`](file:///home/rohan/work/adgytec/adgytec-web-ui-components/src/components/Menu/SubmenuPopover/SubmenuPopover.tsx) component.\n /\nexport interface SubmenuPopoverProps\n extends React.ComponentPropsWithRef<typeof Popover> {}\n\n/\n Specialized popover container for nested cascading submenus.\n \n Defaults to an `offset` of `-1` px so the submenu slightly overlaps the parent\n * menu edge according to Material Design 3 menu specifications.\n \n @example\n * ```tsx\n * <SubmenuPopover>\n * <Menu>\n * <MenuItem label=\"Sub-item 1\" />\n * <MenuItem label=\"Sub-item 2\" />\n * </Menu>\n * </SubmenuPopover>\n * ```\n */\nexport const SubmenuPopover: React.FC<SubmenuPopoverProps> = ({\n offset = -1,\n className,\n ...props\n}) => {\n return (\n <Popover\n offset={offset}\n className={(renderProps) =>\n clsx(\n styles[\"popover\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;yCC0BaK,KAAiD,EAC1D,YAAS,IACT,cACA,GAAGC,QAGC,kBAACJ,GAAD;CACY;CACR,YAAY,MACRF,EACIC,EAAOM,SACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIF;AAAM,CAAA"}

package/dist/chunks/Switch.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch","names":["renderProps"],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-switch-handle-color\n* --md-switch-selected-handle-color\n\n --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n\n --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n\n --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n\n --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .switch {\n / switch tokens /\n / handle tokens /\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n / for hovered, focused and pressed state /\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n / handle icon tokens /\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n / track tokens /\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n / state layer tokens /\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n / configurable tokens end /\n\n / handle specific tokens /\n / size /\n --_md-switch-handle-size: calc(16 var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape /\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n / handle tokens end /\n\n / track tokens /\n / dimensions and shape /\n --_md-switch-track-block-size: calc(32 var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline /\n --_md-switch-track-outline-thickness: calc(2 var(--dp, 1px));\n\n /* track tokens end /\n\n / state layer tokens /\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / state layer tokens end /\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size /\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style /\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer /\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-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\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\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}\n","import clsx from \"clsx\";\nimport { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n unselectedIcon = X,\n selectedIcon = Check,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon \| undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = selectedIcon;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = unselectedIcon;\n }\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\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-readonly\": isReadOnly \|\| undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer \|\| undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCUa,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,oBAAiB,GACjB,kBAAe,GACf,GAAG,QAGC,kBAAC,GAAD;CACI,YAAY,MACR,EACI,EAAO,QACP,KAAuB,EAAO,gBAC9B,EAAW,YACX,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;CAEJ,GAAI;CACJ,eAAA;YAEEA,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACAA,GAEA;EAKJ,AAJI,MAAS,UAAU,MACnB,IAAY,IAGZ,MAAS,UAAU,CAAC,MACpB,IAAY;EAGhB,IAAM,IAAY;GACd,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,gBAAgB,KAAa,KAAA;GAC7B,sBAAsB,KAAkB,KAAA;GACxC,gBAAgB,KAAa,KAAA;GAC7B,iBAAiB,KAAc,KAAA;GAC/B,aAAa,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAAC,KAAuB,KAAA;EACrD,GAEI;EACJ,AAAI,MACA,IACI,kBAAC,GAAD;GACI,MAAM;GACN,MAAM;GACN,WAAW,EAAK,EAAO,IAAO;GAC9B,GAAI;EAAU,CAAA;EAK1B,IAAM,IACF,OAAO,KAAa,aACd,EAASA,CAAW,IACpB;EAEV,OACI,kBAAA,GAAA,EAAA,UAAA;GACK,MAAmB,WAAW;GAE/B,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EAAK,EAAO,OAAU,CAAS;cAE1C,kBAAC,QAAD;KACI,GAAI;KACJ,WAAW,EAAK,EAAO,MAAS;eAE/B;IACC,CAAA;GACJ,CAAA;GAEL,MAAmB,SAAS;EACjC,EAAA,CAAA;CAER;AACQ,CAAA"}
1	+ {"version":3,"file":"Switch","names":["renderProps","Switch","AriaSwitch","clsx","styles","_Fragment","TapTarget","Icon","clsx$1","switch_module_default","\"switch\"","Switch$1","X","Check","props","Switch","containerStateLayer","typography","className","renderProps","renderProps_0","iconValue","icon","isSelected","selectedIcon","unselectedIcon","dataAttrs","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isReadOnly","iconElement","\"icon\"","label","children","Fragment","labelPlacement","\"track\"","\"handle\""],"sources":["../../src/components/Input/Switch/switch.module.css","../../src/components/Input/Switch/Switch.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-switch-handle-color\n* --md-switch-selected-handle-color\n\n --md-switch-handle-interaction-color\n* --md-switch-selected-handle-interaction-color\n\n --md-switch-handle-icon-color\n* --md-switch-selected-handle-icon-color\n\n --md-switch-track-color\n* --md-switch-selected-track-color\n* --md-switch-track-outline-color\n\n --md-switch-state-layer-color\n* --md-switch-selected-state-layer-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .switch {\n / switch tokens /\n / handle tokens /\n --_md-switch-handle-color: var(\n --md-switch-handle-color,\n var(--md-sys-color-outline)\n );\n --_md-switch-selected-handle-color: var(\n --md-switch-selected-handle-color,\n var(--md-sys-color-on-primary)\n );\n\n / for hovered, focused and pressed state /\n --_md-switch-handle-interaction-color: var(\n --md-switch-handle-interaction-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-switch-selected-handle-interaction-color: var(\n --md-switch-selected-handle-interaction-color,\n var(--md-sys-color-primary-container)\n );\n\n / handle icon tokens /\n --_md-switch-handle-icon-color: var(\n --md-switch-handle-icon-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-handle-icon-color: var(\n --md-switch-selected-handle-icon-color,\n var(--md-sys-color-primary)\n );\n\n / track tokens /\n --_md-switch-track-color: var(\n --md-switch-track-color,\n var(--md-sys-color-surface-container-highest)\n );\n --_md-switch-selected-track-color: var(\n --md-switch-selected-track-color,\n var(--md-sys-color-primary)\n );\n --_md-switch-track-outline-color: var(\n --md-switch-track-outline-color,\n var(--md-sys-color-outline)\n );\n\n / state layer tokens /\n --_md-switch-state-layer-color: var(\n --md-switch-state-layer-color,\n var(--md-sys-color-on-surface)\n );\n --_md-switch-selected-state-layer-color: var(\n --md-switch-selected-state-layer-color,\n var(--_md-switch-selected-track-color)\n );\n\n / configurable tokens end /\n\n / handle specific tokens /\n / size /\n --_md-switch-handle-size: calc(16 var(--dp, 1px));\n --_md-switch-handle-with-icon-size: calc(24 * var(--dp, 1px));\n --_md-switch-selected-handle-size: calc(24 * var(--dp, 1px));\n --_md-switch-pressed-handle-size: calc(28 * var(--dp, 1px));\n\n /* shape /\n --_md-switch-handle-shape: var(--md-sys-shape-corner-radius-full);\n\n / handle tokens end /\n\n / track tokens /\n / dimensions and shape /\n --_md-switch-track-block-size: calc(32 var(--dp, 1px));\n --_md-switch-track-inline-size: calc(52 * var(--dp, 1px));\n --_md-switch-track-shape: var(--md-sys-shape-corner-radius-full);\n\n /* outline /\n --_md-switch-track-outline-thickness: calc(2 var(--dp, 1px));\n\n /* track tokens end /\n\n / state layer tokens /\n --_state-layer-opacity: 0;\n --_state-color: var(--_md-switch-state-layer-color);\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / state layer tokens end /\n\n position: relative;\n display: inline-flex;\n\n align-items: center;\n justify-content: space-between;\n gap: var(--md-sys-layout-space-16);\n\n color: inherit;\n cursor: pointer;\n\n & {\n cursor: inherit;\n }\n\n &[data-disabled] {\n color: rgb(\n from currentColor r g b /\n var(--md-sys-state-disabled-content)\n );\n cursor: default;\n }\n\n &[data-selected] {\n --_state-color: var(--_md-switch-selected-state-layer-color);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n z-index: 1;\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n z-index: 1;\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n }\n\n .state-layer::before {\n content: \"\";\n\n position: absolute;\n inset: calc(-1 * var(--md-sys-layout-space-12));\n\n background-color: var(--_state-layer-color);\n border-radius: var(--md-sys-shape-corner-radius-extra-small);\n\n pointer-events: none;\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .icon {\n color: var(--_icon-color);\n }\n\n .handle {\n /* derived size /\n --_handle-size: var(--_md-switch-handle-size);\n --_handle-color: var(--_md-switch-handle-color);\n --_handle-x: calc(6 var(--dp, 1px));\n\n --_icon-color: var(--_md-switch-handle-icon-color);\n\n /* handle style /\n position: absolute;\n inset-block-start: 50%;\n translate: var(--_handle-x) -50%;\n\n inline-size: var(--_handle-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_md-switch-handle-shape);\n\n background-color: var(--_handle-color);\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n transition:\n translate var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n inline-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n block-size var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n --_handle-size: var(--_md-switch-handle-with-icon-size);\n --_handle-x: calc(2 var(--dp, 1px));\n }\n\n &[data-selected] {\n --_handle-color: var(--_md-switch-selected-handle-color);\n --_handle-size: var(--_md-switch-selected-handle-size);\n --_handle-x: calc(22 * var(--dp, 1px));\n --_icon-color: var(--_md-switch-selected-handle-icon-color);\n }\n\n &[data-pressed] {\n --_handle-size: var(--_md-switch-pressed-handle-size);\n --_handle-x: 0;\n\n &[data-selected] {\n --_handle-x: calc(20 * var(--dp, 1px));\n }\n }\n\n &[data-focus-visible],\n &[data-hovered],\n &[data-pressed] {\n --_handle-color: var(--_md-switch-handle-interaction-color);\n\n &[data-selected] {\n --_handle-color: var(\n --_md-switch-selected-handle-interaction-color\n );\n }\n }\n\n &[data-disabled] {\n --_icon-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n\n &[data-selected] {\n --_icon-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_handle-color: rgb(\n from var(--md-sys-color-surface) r g b /\n 1\n );\n }\n }\n }\n\n /* handle state layer /\n .handle[data-show-state-layer]::before {\n --_state-size: calc(40 var(--dp, 1px));\n --_state-shape: var(--md-sys-shape-corner-radius-full);\n\n content: \"\";\n\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n\n inline-size: var(--_state-size);\n aspect-ratio: 1 / 1;\n border-radius: var(--_state-shape);\n\n background-color: var(--_state-layer-color);\n\n transition: background-color\n var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track {\n --_track-color: var(--_md-switch-track-color);\n --_track-outline-color: var(--_md-switch-track-outline-color);\n\n position: relative;\n border-radius: var(--_md-switch-track-shape);\n\n inline-size: var(--_md-switch-track-inline-size);\n min-inline-size: var(--_md-switch-track-inline-size);\n\n block-size: var(--_md-switch-track-block-size);\n min-block-size: var(--_md-switch-track-block-size);\n\n border-width: var(--_md-switch-track-outline-thickness);\n border-style: solid;\n border-color: var(--_track-outline-color);\n\n background-color: var(--_track-color);\n\n transition:\n background-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\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .track[data-disabled] {\n --_track-color: rgb(\n from var(--md-sys-color-surface-container-highest) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_track-outline-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n\n &[data-selected] {\n --_track-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n }\n }\n\n .track[data-selected] {\n --_track-color: var(--_md-switch-selected-track-color);\n --_track-outline-color: transparent;\n }\n\n .track[data-focus-visible] {\n --focus-indicator-color: var(--md-sys-color-secondary);\n --focus-indicator-thickness: calc(3 * var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\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}\n","import clsx from \"clsx\";\nimport { Check, type LucideIcon, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Switch as AriaSwitch } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { typography } from \"@/utils\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport styles from \"./switch.module.css\";\nimport type { SwitchProps } from \"./types\";\n\n/*\n A toggle switch control implementing Material Design 3 Switch specifications.\n \n Toggles a binary on/off setting with animated sliding thumb indicator, support for optional\n * handle icons (such as checkmark and cross), and configurable label placement.\n \n @example\n * ```tsx\n * import { Switch } from '@adgytec/web-ui-components';\n \n <Switch isSelected={airplaneMode} onChange={setAirplaneMode}>\n * Airplane Mode\n * </Switch>\n * ```\n */\nexport const Switch: React.FC<SwitchProps> = ({\n className,\n children,\n icon = \"selected\",\n labelPlacement = \"start\",\n containerStateLayer = false,\n unselectedIcon = X,\n selectedIcon = Check,\n ...props\n}) => {\n return (\n <AriaSwitch\n className={(renderProps) =>\n clsx(\n styles[\"switch\"],\n containerStateLayer && styles[\"state-layer\"],\n typography.labelLarge,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-switch\n >\n {(renderProps) => {\n const {\n isSelected,\n isHovered,\n isDisabled,\n isFocused,\n isFocusVisible,\n isPressed,\n isReadOnly,\n } = renderProps;\n\n let iconValue: LucideIcon \| undefined;\n if (icon !== \"none\" && isSelected) {\n iconValue = selectedIcon;\n }\n\n if (icon === \"both\" && !isSelected) {\n iconValue = unselectedIcon;\n }\n\n const dataAttrs = {\n \"data-selected\": isSelected \|\| undefined,\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-readonly\": isReadOnly \|\| undefined,\n \"data-icon\": iconValue ? true : undefined,\n \"data-show-state-layer\": !containerStateLayer \|\| undefined,\n };\n\n let iconElement: ReactNode;\n if (iconValue) {\n iconElement = (\n <Icon\n icon={iconValue}\n size={16}\n className={clsx(styles[\"icon\"])}\n {...dataAttrs}\n />\n );\n }\n\n const label =\n typeof children === \"function\"\n ? children(renderProps)\n : children;\n\n return (\n <>\n {labelPlacement === \"start\" && label}\n\n <span\n {...dataAttrs}\n className={clsx(styles[\"track\"], TapTarget)}\n >\n <span\n {...dataAttrs}\n className={clsx(styles[\"handle\"])}\n >\n {iconElement}\n </span>\n </span>\n\n {labelPlacement === \"end\" && label}\n </>\n );\n }}\n </AriaSwitch>\n );\n};\n"],"mappings":";;;;;;;;;;;;;GCyBaC,KAAiC,EAC1C,cACA,aACA,UAAO,YACP,oBAAiB,SACjB,yBAAsB,IACtB,oBAAiBW,GACjB,kBAAeC,GACf,GAAGC,QAGC,kBAACZ,GAAD;CACI,YAAY,MACRC,EACIC,EAAOM,QACPM,KAAuBZ,EAAO,gBAC9Ba,EAAW,YACX,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;CAEJ,GAAIJ;CACJ,eAAA;CAEEd,WAAAA,MAAgB;EACd,IAAM,EACF,eACA,cACA,eACA,cACA,mBACA,cACA,kBACAA,GAEAqB;EAKJ,AAJIC,MAAS,UAAUC,MACnB,IAAYC,IAGZF,MAAS,UAAU,CAACC,MACpB,IAAYE;EAGhB,IAAMC,IAAY;GACd,iBAAiBH,KAAc,KAAA;GAC/B,gBAAgBI,KAAa,KAAA;GAC7B,iBAAiBC,KAAc,KAAA;GAC/B,gBAAgBC,KAAa,KAAA;GAC7B,sBAAsBC,KAAkB,KAAA;GACxC,gBAAgBC,KAAa,KAAA;GAC7B,iBAAiBC,KAAc,KAAA;GAC/B,aAAaX,IAAY,KAAO,KAAA;GAChC,yBAAyB,CAACL,KAAuB,KAAA;EACrD,GAEIiB;EACJ,AAAIZ,MACA,IACI,kBAACd,GAAD;GACI,MAAMc;GACN,MAAM;GACN,WAAWlB,EAAKC,EAAO8B,IAAO;GAC9B,GAAIR;EAAU,CAAA;EAK1B,IAAMS,IACF,OAAOC,KAAa,aACdA,EAASpC,CAAW,IACpBoC;EAEV,OACI,kBAAA/B,GAAA,EAAA,UAAA;GACKiC,MAAmB,WAAWH;GAE/B,kBAAC,QAAD;IACI,GAAIT;IACJ,WAAWvB,EAAKC,EAAOmC,OAAUjC,CAAS;IAE1C,UAAA,kBAAC,QAAD;KACI,GAAIoB;KACJ,WAAWvB,EAAKC,EAAOoC,MAAS;KAE/B,UAAAP;IACC,CAAA;GACJ,CAAA;GAELK,MAAmB,SAASH;EACjC,EAAA,CAAA;CAER;AACQ,CAAA"}

package/dist/chunks/Tab.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tab","names":["icon","handlePress","label"],"sources":["../../src/components/Tabs/Tab/tab.module.css","../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab {\n --_state-color: var(--md-sys-color-on-surface);\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 --_color: var(--_md-tabs-color);\n\n --_focus-inset-inline-start: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end: var(--md-sys-layout-space-4);\n --_focus-inset-block-start: var(--md-sys-layout-space-4);\n --_focus-inset-block-end: var(--md-sys-layout-space-4);\n\n position: relative;\n outline: none;\n\n padding-block: calc(14 * var(--dp, 1px));\n padding-inline: var(--md-sys-layout-space-16);\n\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n color: var(--_color);\n\n cursor: pointer;\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n padding-block: var(--md-sys-layout-space-12);\n }\n\n &[data-selected] {\n --_color: var(--_md-tabs-active-color);\n\n --_focus-inset-inline-end: var(--_focus-inset-inline-end-active);\n --_focus-inset-block-end: var(--_focus-inset-block-end-active);\n }\n\n &[data-hovered] {\n --_color: var(--_md-tabs-active-color);\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 cursor: default;\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 --_md-tabs-active-indicator-color: var(--_color);\n }\n }\n\n /* state layer /\n .tab::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 .tab[data-focus-visible]::after {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n\n inset-inline-start: var(--_focus-inset-inline-start);\n inset-inline-end: var(--_focus-inset-inline-end);\n inset-block-start: var(--_focus-inset-block-start);\n inset-block-end: var(--_focus-inset-block-end);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-color: var(--focus-indicator-color);\n\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n z-index: 1;\n }\n\n .selection-indicator {\n position: absolute;\n\n transition-timing-function: var(--md-sys-motion-standard-fast-spatial);\n transition-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .splash {\n position: absolute;\n inset: 0;\n overflow: clip;\n }\n}\n","import clsx from \"clsx\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tab as AriaTab, SelectionIndicator } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { typography } from \"@/utils\";\nimport styles from \"./tab.module.css\";\n\~~nexport~~ ~~const~~ Tab: React~~.FC<\~~n Omit<React.ComponentPropsWithRef<typeof AriaTab>, \"children\"> & {\n label?: ReactNode;\n icon?: LucideIcon;\n }\n> = ({ ~~className~~, ~~label~~, icon, ~~onPress~~, ...props }) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTab\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tab\"],\n typography.titleSmall,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-icon={icon ? true : undefined}\n data-tab={true}\n >\n {splashInfo && (\n <span className={clsx(styles[\"splash\"])}>\n <Splash {...splashInfo} />\n </span>\n )}\n {icon && <Icon icon={icon} size={24} />}\n {label}\n <SelectionIndicator\n className={clsx(styles[\"selection-indicator\"])}\n data-selection-indicator={true}\n />\n </AriaTab>\n );\n};\n"],"mappings":";;;;;;;;;;;;~~GCUa~~,~~KAKT~~,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,EAAA,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAA8C~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAA7C~~,~~iDAAA~~,~~KAAA~~,~~GAA6C~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;~~CAC9C~~,IAAA,EAAA,eAAA,~~mBAAoC~~,~~EAAU~~,CAAO,~~GAAE~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,IAY1C,~~IAAA~~,EAAA,MAPM,KAAA,~~MACP~~,~~EACI~~,EAAM,~~KACN~~,EAAU,YACV,~~OAAO~~,KAAc,~~aACf~~,~~EAAU~~,CACF,~~IAFd~~,CAGJ,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAGM,~~IAAA~~,~~IAAA~~,IAAA,KAAA,KAAA,~~GAAuB~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,IAOjC,~~IAAA~~,EAAA,MAJA,~~IAAA~~,KACG,kBAAA,QAAA;EAAiB,~~WAAA~~,~~EAAK~~,EAAM,MAAU;~~YAClC~~,~~kBAAC~~,GAAD,EAAO,~~GAAK~~,EAAU,CAAA;CACnB,CAAA,GACV,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~QAAA~~,IACsC,~~IAAA~~,EAAA,OAAtC,~~IAAA~~,KAAQ,~~kBAAC~~,GAAD;EAAY;EAAY,MAAA;CAAE,CAAA,GAAI,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,QAAA,OAAA,IAAA,2BAAA,KAEvC,IAAA,~~kBAAC~~,GAAD;EACe,~~WAAA~~,~~EAAK~~,EAAO,sBAAsB;EACnB,4BAAA;CAAI,CAAA,GAChC,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA;CAAA,~~IAAA~~;CACI,~~OADJ~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,~~KAAA~~,EAAA,~~QAAA~~,KAzBN,IAAA,~~kBAAC~~,GAAD;~~EACaC~~,~~SAAA~~;EACE,~~WAAA~~;EAON,~~GAED~~;EACO,~~aAAA~~;EACD,YAAA;~~YAbd~~;~~GAeK~~;~~GAKA~~;~~GACA~~;~~GACD~~;EAtBI;KA0BE,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,GAAA,EAAA,~~MAAA~~,KAAA,~~IAAA~~,EAAA,~~KA1BV~~;AA0BU"}
1	+ {"version":3,"file":"Tab","names":["icon","handlePress","label","Tab","_c","clsx","styles","AriaTab","require_compiler_runtime","Icon","Splash","useSplash","clsx$1","import_compiler_runtime","tab_module_default","Tab$1","$","className","icon","label","onPress","props","t0","t1","typography","renderProps","t2","t3","splashInfo","t4","t5","SelectionIndicator","t6","handlePress","Tab"],"sources":["../../src/components/Tabs/Tab/tab.module.css","../../src/components/Tabs/Tab/Tab.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab {\n --_state-color: var(--md-sys-color-on-surface);\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 --_color: var(--_md-tabs-color);\n\n --_focus-inset-inline-start: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end: var(--md-sys-layout-space-4);\n --_focus-inset-block-start: var(--md-sys-layout-space-4);\n --_focus-inset-block-end: var(--md-sys-layout-space-4);\n\n position: relative;\n outline: none;\n\n padding-block: calc(14 * var(--dp, 1px));\n padding-inline: var(--md-sys-layout-space-16);\n\n white-space: nowrap;\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n color: var(--_color);\n\n cursor: pointer;\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-icon] {\n padding-block: var(--md-sys-layout-space-12);\n }\n\n &[data-selected] {\n --_color: var(--_md-tabs-active-color);\n\n --_focus-inset-inline-end: var(--_focus-inset-inline-end-active);\n --_focus-inset-block-end: var(--_focus-inset-block-end-active);\n }\n\n &[data-hovered] {\n --_color: var(--_md-tabs-active-color);\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 cursor: default;\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 --_md-tabs-active-indicator-color: var(--_color);\n }\n }\n\n /* state layer /\n .tab::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 .tab[data-focus-visible]::after {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n content: \"\";\n position: absolute;\n\n inset-inline-start: var(--_focus-inset-inline-start);\n inset-inline-end: var(--_focus-inset-inline-end);\n inset-block-start: var(--_focus-inset-block-start);\n inset-block-end: var(--_focus-inset-block-end);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-color: var(--focus-indicator-color);\n\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n z-index: 1;\n }\n\n .selection-indicator {\n position: absolute;\n\n transition-timing-function: var(--md-sys-motion-standard-fast-spatial);\n transition-duration: var(\n --md-sys-motion-standard-fast-spatial-duration\n );\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .splash {\n position: absolute;\n inset: 0;\n overflow: clip;\n }\n}\n","import clsx from \"clsx\";\nimport type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { Tab as AriaTab, SelectionIndicator } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { typography } from \"@/utils\";\nimport styles from \"./tab.module.css\";\n\n/*\n Props for the {@link Tab} component.\n * Extends React Aria Components `Tab` props (omitting raw `children` in favor of `label` and `icon`).\n /\nexport interface TabProps\n extends Omit<React.ComponentPropsWithRef<typeof AriaTab>, \"children\"> {\n /\n Text label to display inside the tab.\n /\n label?: ReactNode;\n\n /\n Optional icon displayed alongside the tab label.\n /\n icon?: LucideIcon;\n}\n\n/\n An individual interactive tab button within a {@link TabList}, conforming to\n * [Material 3 Tabs](https://m3.material.io/components/tabs/overview).\n \n Extends React Aria Components `Tab` with Material 3 styling, supporting:\n * - A text `label` and an optional `icon` (rendered via {@link Icon}).\n * - Interactive ripple feedback via {@link Splash}.\n * - An animated {@link SelectionIndicator} that underlines or highlights the active tab.\n * - State layer feedback on hover, focus-visible, and pressed states.\n \n @example\n * ```tsx\n * import { Tab } from \"@adgytec/web-ui-components\";\n * import { Home } from \"lucide-react\";\n \n export function Example() {\n * return <Tab id=\"home\" label=\"Home\" icon={Home} />;\n * }\n * ```\n */\nexport const Tab: React.FC<TabProps> = ({\n className,\n label,\n icon,\n onPress,\n ...props\n}) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTab\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tab\"],\n typography.titleSmall,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-icon={icon ? true : undefined}\n data-tab={true}\n >\n {splashInfo && (\n <span className={clsx(styles[\"splash\"])}>\n <Splash {...splashInfo} />\n </span>\n )}\n {icon && <Icon icon={icon} size={24} />}\n {label}\n <SelectionIndicator\n className={clsx(styles[\"selection-indicator\"])}\n data-selection-indicator={true}\n />\n </AriaTab>\n );\n};\n"],"mappings":";;;;;;;;;;;;GC+CaG,KAA0B,MAAA;CAAA,IAAAa,KAAA,GAAAZ,EAAAA,EAAAA,CAAA,EAAA,GAAAa,GAAAC,GAAAC,GAAAC,GAAAC;CAAA,AAAAL,EAAA,OAAAM,KAMtC,IAAAN,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,IAAA,IAAAA,EAAA,OANuC,8CAAA,GAAAK,KAAAC,GAMvC,EAAA,KAAAA,GAAA,EAAA,KAAAL,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAAC;CACG,IAAA,EAAA,eAAA,mBAAoCV,EAAUS,CAAO,GAAEG;CAAA,AAAAP,EAAA,OAAAC,IAY1C,IAAAD,EAAA,MAPM,KAAA,MACPX,EACIC,EAAM,KACNkB,EAAU,YACV,OAAOP,KAAc,aACfA,EAAUQ,CACF,IAFdR,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAM;CAGM,IAAAG,IAAAR,IAAA,KAAA,KAAA,GAAuBS;CAAA,AAAAX,EAAA,OAAAY,IAOjC,IAAAZ,EAAA,MAJA,IAAAY,KACG,kBAAA,QAAA;EAAiB,WAAAvB,EAAKC,EAAM,MAAU;EAClC,UAAA,kBAACI,GAAD,EAAO,GAAKkB,EAAU,CAAA;CACnB,CAAA,GACV,EAAA,KAAAA,GAAA,EAAA,KAAAD;CAAA,IAAAE;CAAA,AAAAb,EAAA,QAAAE,IACsC,IAAAF,EAAA,OAAtC,IAAAE,KAAQ,kBAACT,GAAD;EAAY;EAAY,MAAA;CAAE,CAAA,GAAI,EAAA,MAAAS,GAAA,EAAA,MAAAW;CAAA,IAAAC;CAAA,AAAAd,EAAA,QAAA,OAAA,IAAA,2BAAA,KAEvC,IAAA,kBAACe,GAAD;EACe,WAAA1B,EAAKC,EAAO,sBAAsB;EACnB,4BAAA;CAAI,CAAA,GAChC,EAAA,MAAAwB,KAAA,IAAAd,EAAA;CAAA,IAAAgB;CACI,OADJhB,EAAA,QAAAiB,KAAAjB,EAAA,QAAAG,KAAAH,EAAA,QAAAK,KAAAL,EAAA,QAAAO,KAAAP,EAAA,QAAAU,KAAAV,EAAA,QAAAW,KAAAX,EAAA,QAAAa,KAzBN,IAAA,kBAACtB,GAAD;EACaN,SAAAgC;EACE,WAAAV;EAON,GAEDF;EACO,aAAAK;EACD,YAAA;EAbd,UAAA;GAeKC;GAKAE;GACAV;GACDW;EAtBI;KA0BE,EAAA,MAAAG,GAAA,EAAA,MAAAd,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAG,GAAA,EAAA,MAAAC,GAAA,EAAA,MAAAE,GAAA,EAAA,MAAAG,KAAA,IAAAhB,EAAA,KA1BVgB;AA0BU"}

package/dist/chunks/TabList.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabList","names":[],"sources":["../../src/components/Tabs/TabList/tabList.module.css","../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-tab-list-divider-color\n* --md-tabs-active-indicator-color\n\n --md-tabs-color\n* --md-tabs-active-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tab-list {\n --_md-tabs-color: var(\n --md-tabs-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-tabs-active-color: var(\n --md-tabs-active-color,\n var(--md-sys-color-on-surface)\n );\n\n --_md-tab-list-divider-width: calc(1 var(--dp, 1px));\n --_md-tab-list-divider-color: var(\n --md-tab-list-divider-color,\n var(--md-sys-color-surface-variant)\n );\n\n --_md-tabs-active-indicator-size: calc(2 * var(--dp, 1px));\n --_md-tabs-active-indicator-color: var(\n --md-tabs-active-indicator-color,\n var(--md-sys-color-primary)\n );\n\n [data-selection-indicator] {\n background-color: var(--_md-tabs-active-indicator-color);\n }\n\n &[data-orientation=\"horizontal\"] {\n --_focus-inset-block-end-active: var(--md-sys-layout-space-8);\n --_focus-inset-inline-end-active: var(--md-sys-layout-space-4);\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n overflow-x: auto;\n\n border-block-end: var(--_md-tab-list-divider-width) solid\n var(--_md-tab-list-divider-color);\n\n [data-tab] {\n flex: 1;\n text-align: center;\n }\n\n [data-selection-indicator] {\n inset-inline-start: 0;\n inset-block-end: 0px;\n\n inline-size: 100%;\n block-size: var(--_md-tabs-active-indicator-size);\n\n transition-property: translate, inline-size;\n }\n }\n\n &[data-orientation=\"vertical\"] {\n --_focus-inset-block-end-active: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end-active: var(--md-sys-layout-space-8);\n\n border-inline-end: var(--_md-tab-list-divider-width) solid\n var(--_md-tab-list-divider-color);\n\n [data-selection-indicator] {\n inset-block-start: 0;\n inset-inline-end: 0px;\n\n block-size: 100%;\n inline-size: var(--_md-tabs-active-indicator-size);\n\n transition-property: translate, block-size;\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { TabList as AriaTabList } from \"react-aria-components\";\nimport styles from \"./tabList.module.css\";\n\nexport const TabList = <T extends object>({\n className,\n ...props\n}: ~~React.ComponentPropsWithRef~~<~~typeof AriaTabList<~~T>>) => {\n return (\n <AriaTabList\n className={(renderProps) =>\n clsx(\n styles[\"tab-list\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;~~uDCIa~~,KAAU,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAG8B~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAHX~~,~~kBAAA~~,~~KAAA~~,~~GAGW~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~IASpC~~,~~IAAA~~,EAAA,MANM,KAAA,~~MACP~~,~~EACI~~,EAAO,aACP,~~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":"TabList","names":["TabList","_c","clsx","styles","AriaTabList","require_compiler_runtime","clsx$1","import_compiler_runtime","tabList_module_default","TabList$1","$","className","props","t0","t1","renderProps","t2","TabList"],"sources":["../../src/components/Tabs/TabList/tabList.module.css","../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["/* configurable tokens\n\n --md-tab-list-divider-color\n* --md-tabs-active-indicator-color\n\n --md-tabs-color\n* --md-tabs-active-color\n\n configurable tokens end /\n\n@layer adgytec.comps {\n .tab-list {\n --_md-tabs-color: var(\n --md-tabs-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-tabs-active-color: var(\n --md-tabs-active-color,\n var(--md-sys-color-on-surface)\n );\n\n --_md-tab-list-divider-width: calc(1 var(--dp, 1px));\n --_md-tab-list-divider-color: var(\n --md-tab-list-divider-color,\n var(--md-sys-color-surface-variant)\n );\n\n --_md-tabs-active-indicator-size: calc(2 * var(--dp, 1px));\n --_md-tabs-active-indicator-color: var(\n --md-tabs-active-indicator-color,\n var(--md-sys-color-primary)\n );\n\n [data-selection-indicator] {\n background-color: var(--_md-tabs-active-indicator-color);\n }\n\n &[data-orientation=\"horizontal\"] {\n --_focus-inset-block-end-active: var(--md-sys-layout-space-8);\n --_focus-inset-inline-end-active: var(--md-sys-layout-space-4);\n\n display: flex;\n align-items: center;\n justify-content: space-between;\n\n overflow-x: auto;\n\n border-block-end: var(--_md-tab-list-divider-width) solid\n var(--_md-tab-list-divider-color);\n\n [data-tab] {\n flex: 1;\n text-align: center;\n }\n\n [data-selection-indicator] {\n inset-inline-start: 0;\n inset-block-end: 0px;\n\n inline-size: 100%;\n block-size: var(--_md-tabs-active-indicator-size);\n\n transition-property: translate, inline-size;\n }\n }\n\n &[data-orientation=\"vertical\"] {\n --_focus-inset-block-end-active: var(--md-sys-layout-space-4);\n --_focus-inset-inline-end-active: var(--md-sys-layout-space-8);\n\n border-inline-end: var(--_md-tab-list-divider-width) solid\n var(--_md-tab-list-divider-color);\n\n [data-selection-indicator] {\n inset-block-start: 0;\n inset-inline-end: 0px;\n\n block-size: 100%;\n inline-size: var(--_md-tabs-active-indicator-size);\n\n transition-property: translate, block-size;\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { TabList as AriaTabList } from \"react-aria-components\";\nimport styles from \"./tabList.module.css\";\n\n/*\n Props for the {@link TabList} component.\n * Extends React Aria Components `TabList` props.\n \n Configurable CSS tokens:\n * - `--md-tabs-color`: Text and icon color for inactive tabs (`var(--md-sys-color-on-surface-variant)`).\n * - `--md-tabs-active-color`: Text and icon color for the active tab (`var(--md-sys-color-on-surface)`).\n * - `--md-tabs-active-indicator-color`: Color of the selection indicator line (`var(--md-sys-color-primary)`).\n * - `--md-tab-list-divider-color`: Color of the divider line below or beside the tab list (`var(--md-sys-color-surface-variant)`).\n /\nexport interface TabListProps<T extends object = object>\n extends React.ComponentPropsWithRef<typeof AriaTabList<T>> {}\n\n/\n Container for interactive {@link Tab} elements, conforming to\n * [Material 3 Tabs](https://m3.material.io/components/tabs/overview).\n \n Extends React Aria Components `TabList` with Material 3 styling, active selection\n * indicator positioning, and divider styling for horizontal and vertical orientations.\n \n Configurable CSS tokens:\n * - `--md-tabs-color`: Text and icon color for inactive tabs (`var(--md-sys-color-on-surface-variant)`).\n * - `--md-tabs-active-color`: Text and icon color for the active tab (`var(--md-sys-color-on-surface)`).\n * - `--md-tabs-active-indicator-color`: Color of the selection indicator line (`var(--md-sys-color-primary)`).\n * - `--md-tab-list-divider-color`: Color of the divider line below or beside the tab list (`var(--md-sys-color-surface-variant)`).\n \n @example\n * ```tsx\n * import { Tab, TabList } from \"@adgytec/web-ui-components\";\n * import { Home, Settings, User } from \"lucide-react\";\n \n export function NavigationTabList() {\n * return (\n * <TabList aria-label=\"Account Tabs\">\n * <Tab id=\"home\" label=\"Home\" icon={Home} />\n * <Tab id=\"profile\" label=\"Profile\" icon={User} />\n * <Tab id=\"settings\" label=\"Settings\" icon={Settings} />\n * </TabList>\n * );\n * }\n * ```\n */\nexport const TabList = <T extends object>({\n className,\n ...props\n}: TabListProps<T>) => {\n return (\n <AriaTabList\n className={(renderProps) =>\n clsx(\n styles[\"tab-list\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;uDC8CaA,KAAU,MAAA;CAAA,IAAAU,KAAA,GAAAT,EAAAA,EAAAA,CAAA,CAAA,GAAAU,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGL,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHwB,eAAA,GAAAE,KAAAC,GAGxB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IASD,IAAAD,EAAA,MANM,KAAA,MACPR,EACIC,EAAO,aACP,OAAOQ,KAAc,aACfA,EAAUI,CACF,IAFdJ,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAGP,OAHON,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAPT,IAAA,kBAACV,GAAD;EACe,WAAAU;EAMN,GAEDF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAVFM;AAUE"}

package/dist/chunks/TabPanel.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanel","names":[],"sources":["../../src/components/Tabs/TabPanel/tabPanel.module.css","../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab-panel {\n transition: opacity var(--md-sys-motion-expressive-slow-effects)\n var(--md-sys-motion-expressive-slow-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-entering] {\n opacity: 0;\n }\n\n &[data-exiting] {\n display: none;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { TabPanel as AriaTabPanel } from \"react-aria-components\";\nimport styles from \"./tabPanel.module.css\";\n\~~nexport~~ ~~const~~ TabPanel: React~~.FC<\~~n React.ComponentPropsWithRef<typeof AriaTabPanel>\n> = ({ className, ...props }) => {\n return (\n <AriaTabPanel\n className={(renderProps) =>\n clsx(\n styles[\"tab-panel\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;~~wDCIa~~,~~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~~,EAAO,cACP,~~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":"TabPanel","names":["TabPanel","_c","clsx","styles","AriaTabPanel","require_compiler_runtime","clsx$1","import_compiler_runtime","tabPanel_module_default","TabPanel$1","$","className","props","t0","t1","renderProps","t2","TabPanel"],"sources":["../../src/components/Tabs/TabPanel/tabPanel.module.css","../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab-panel {\n transition: opacity var(--md-sys-motion-expressive-slow-effects)\n var(--md-sys-motion-expressive-slow-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-entering] {\n opacity: 0;\n }\n\n &[data-exiting] {\n display: none;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { TabPanel as AriaTabPanel } from \"react-aria-components\";\nimport styles from \"./tabPanel.module.css\";\n\n/*\n Props for the {@link TabPanel} component.\n * Extends React Aria Components `TabPanel` props.\n /\nexport interface TabPanelProps\n extends React.ComponentPropsWithRef<typeof AriaTabPanel> {}\n\n/\n Content panel associated with a specific {@link Tab}, conforming to\n * [Material 3 Tabs](https://m3.material.io/components/tabs/overview).\n \n Extends React Aria Components `TabPanel` with Material 3 styling and smooth\n * fade entrance animations when the tab becomes active.\n \n @example\n * ```tsx\n * import { TabPanel } from \"@adgytec/web-ui-components\";\n \n export function PanelExample() {\n * return (\n * <TabPanel id=\"profile\">\n * <h3>User Profile</h3>\n * <p>Manage user profile information here.</p>\n * </TabPanel>\n * );\n * }\n * ```\n */\nexport const TabPanel: React.FC<TabPanelProps> = ({ className, ...props }) => {\n return (\n <AriaTabPanel\n className={(renderProps) =>\n clsx(\n styles[\"tab-panel\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;wDCgCaA,KAAoC,MAAA;CAAA,IAAAU,KAAA,GAAAT,EAAAA,EAAAA,CAAA,CAAA,GAAAU,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAAwB,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAAvB,eAAA,GAAAE,KAAAC,GAAuB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IASxD,IAAAD,EAAA,MANM,KAAA,MACPR,EACIC,EAAO,cACP,OAAOQ,KAAc,aACfA,EAAUI,CACF,IAFdJ,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAGP,OAHON,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAPT,IAAA,kBAACV,GAAD;EACe,WAAAU;EAMN,GAEDF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAVFM;AAUE"}

package/dist/chunks/TabPanels.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabPanels","names":[],"sources":["../../src/components/Tabs/TabPanels/tabPanels.module.css","../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab-panels {\n position: relative;\n\n height: var(--tab-panel-height);\n transition: height 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","import clsx from \"clsx\";\nimport { TabPanels as AriaTabPanels } from \"react-aria-components\";\nimport styles from \"./tabPanels.module.css\";\n\nexport const TabPanels = <T extends object>({\n className,\n ...props\n}: ~~React.ComponentPropsWithRef~~<~~typeof AriaTabPanels<~~T>>) => {\n return (\n <AriaTabPanels\n className={clsx(styles[\"tab-panels\"], className)}\n {...props}\n data-tab-panels={true}\n />\n );\n};\n"],"mappings":";;;;;~~0DCIa~~,KAAY,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAG8B~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAHX~~,~~kBAAA~~,~~KAAA~~,~~GAGW~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~IAGK~~,~~IAAA~~,EAAA,MAArC,~~IAAA~~,~~EAAK~~,EAAO,~~eAAe~~,CAAS,GAAC,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAGlD,~~OAHkD~~,EAAA,~~OAAA~~,~~KAAA~~,EAAA,~~OAAA~~,KADpD,IAAA,~~kBAAC~~,GAAD;EACe,~~WAAA~~;EAAqC,~~GAC5C~~;EACa,mBAAA;CAAI,CAAA,GACvB,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,KAAA,~~IAAA~~,EAAA,~~IAJF~~;AAIE"}
1	+ {"version":3,"file":"TabPanels","names":["TabPanels","_c","clsx","styles","AriaTabPanels","require_compiler_runtime","clsx$1","import_compiler_runtime","tabPanels_module_default","TabPanels$1","$","className","props","t0","t1","t2","TabPanels"],"sources":["../../src/components/Tabs/TabPanels/tabPanels.module.css","../../src/components/Tabs/TabPanels/TabPanels.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tab-panels {\n position: relative;\n\n height: var(--tab-panel-height);\n transition: height 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","import clsx from \"clsx\";\nimport { TabPanels as AriaTabPanels } from \"react-aria-components\";\nimport styles from \"./tabPanels.module.css\";\n\n/*\n Props for the {@link TabPanels} component.\n * Extends React Aria Components `TabPanels` props.\n /\nexport interface TabPanelsProps<T extends object = object>\n extends React.ComponentPropsWithRef<typeof AriaTabPanels<T>> {}\n\n/\n Container for {@link TabPanel} elements in a {@link Tabs} structure, conforming to\n * [Material 3 Tabs](https://m3.material.io/components/tabs/overview).\n \n Extends React Aria Components `TabPanels` and provides coordinated smooth height transitions\n * when switching between tab panels.\n \n @example\n * ```tsx\n * import { TabPanel, TabPanels } from \"@adgytec/web-ui-components\";\n \n export function PanelsExample() {\n * return (\n * <TabPanels>\n * <TabPanel id=\"account\">Account settings content</TabPanel>\n * <TabPanel id=\"security\">Security settings content</TabPanel>\n * </TabPanels>\n * );\n * }\n * ```\n */\nexport const TabPanels = <T extends object>({\n className,\n ...props\n}: TabPanelsProps<T>) => {\n return (\n <AriaTabPanels\n className={clsx(styles[\"tab-panels\"], className)}\n {...props}\n data-tab-panels={true}\n />\n );\n};\n"],"mappings":";;;;;0DCgCaA,KAAY,MAAA;CAAA,IAAAU,KAAA,GAAAT,EAAAA,EAAAA,CAAA,CAAA,GAAAU,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAGL,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAHwB,eAAA,GAAAE,KAAAC,GAGxB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAGwC,IAAAD,EAAA,MAArC,IAAAR,EAAKC,EAAO,eAAeQ,CAAS,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAC;CAGlD,OAHkDL,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KADpD,IAAA,kBAACV,GAAD;EACe,WAAAU;EAAqC,GAC5CF;EACa,mBAAA;CAAI,CAAA,GACvB,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAC,KAAA,IAAAL,EAAA,IAJFK;AAIE"}

package/dist/chunks/Tabs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs","names":[],"sources":["../../src/components/Tabs/Tabs/tabs.module.css","../../src/components/Tabs/Tabs/Tabs.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tabs {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n\n &[data-orientation=\"vertical\"] {\n grid-template-columns: auto 1fr;\n }\n\n &[data-orientation=\"horizontal\"] {\n grid-template-rows: auto 1fr;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Tabs as AriaTabs } from \"react-aria-components\";\nimport styles from \"./tabs.module.css\";\n\~~nexport~~ ~~const~~ Tabs: React~~.FC<~~React.ComponentPropsWithRef<typeof AriaTabs>> = ({\n ~~className~~,\n ~~...props~~\n}) => {\n return (\n <AriaTabs\n className={(renderProps) =>\n clsx(\n styles[\"tabs\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;~~4CCIa,KAA~~+D,MAAA;CAAA,~~IAAA~~,KAAA,~~GAAA~~,~~EAAA~~,~~EAAA~~,CAAA,CAAA,~~GAAA~~,~~GAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~KAG3E~~,~~IAAA~~,EAAA,IAAA,~~IAAA~~,EAAA,~~OAH4E~~,~~kBAAA~~,~~KAAA~~,~~GAG5E~~,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~,GAAA,EAAA,~~KAAA~~;CAAA,~~IAAA~~;CAAA,~~AAAA~~,EAAA,~~OAAA~~,~~IASgB~~,~~IAAA~~,EAAA,MANM,KAAA,~~MACP~~,~~EACI~~,EAAM,MACN,~~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":"Tabs","names":["Tabs","_c","clsx","styles","AriaTabs","require_compiler_runtime","clsx$1","import_compiler_runtime","tabs_module_default","Tabs$1","$","className","props","t0","t1","renderProps","t2","Tabs"],"sources":["../../src/components/Tabs/Tabs/tabs.module.css","../../src/components/Tabs/Tabs/Tabs.tsx"],"sourcesContent":["@layer adgytec.comps {\n .tabs {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n\n &[data-orientation=\"vertical\"] {\n grid-template-columns: auto 1fr;\n }\n\n &[data-orientation=\"horizontal\"] {\n grid-template-rows: auto 1fr;\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Tabs as AriaTabs } from \"react-aria-components\";\nimport styles from \"./tabs.module.css\";\n\n/*\n Props for the {@link Tabs} component.\n * Extends React Aria Components `Tabs` props.\n /\nexport interface TabsProps\n extends React.ComponentPropsWithRef<typeof AriaTabs> {}\n\n/\n Main container for organizing content into high-level categories based on\n * [Material 3 Tabs](https://m3.material.io/components/tabs/overview).\n \n Extends React Aria Components `Tabs` to manage tab selection state, keyboard navigation,\n * and layout orientation (horizontal or vertical).\n \n @example\n * ```tsx\n * import {\n * Tab,\n * TabList,\n * TabPanel,\n * TabPanels,\n * Tabs,\n * } from \"@adgytec/web-ui-components\";\n * import { Home, Settings, User } from \"lucide-react\";\n \n export function Example() {\n * return (\n * <Tabs defaultSelectedKey=\"home\">\n * <TabList aria-label=\"Navigation\">\n * <Tab id=\"home\" label=\"Home\" icon={Home} />\n * <Tab id=\"profile\" label=\"Profile\" icon={User} />\n * <Tab id=\"settings\" label=\"Settings\" icon={Settings} />\n * </TabList>\n * <TabPanels>\n * <TabPanel id=\"home\">Home content goes here.</TabPanel>\n * <TabPanel id=\"profile\">Profile content goes here.</TabPanel>\n * <TabPanel id=\"settings\">Settings content goes here.</TabPanel>\n * </TabPanels>\n * </Tabs>\n * );\n * }\n * ```\n */\nexport const Tabs: React.FC<TabsProps> = ({ className, ...props }) => {\n return (\n <AriaTabs\n className={(renderProps) =>\n clsx(\n styles[\"tabs\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n />\n );\n};\n"],"mappings":";;;;;4CC+CaA,KAA4B,MAAA;CAAA,IAAAU,KAAA,GAAAT,EAAAA,EAAAA,CAAA,CAAA,GAAAU,GAAAC;CAAA,AAAAF,EAAA,OAAAG,KAAwB,IAAAH,EAAA,IAAA,IAAAA,EAAA,OAAvB,eAAA,GAAAE,KAAAC,GAAuB,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC;CAAA,IAAAE;CAAA,AAAAJ,EAAA,OAAAC,IAShD,IAAAD,EAAA,MANM,KAAA,MACPR,EACIC,EAAM,MACN,OAAOQ,KAAc,aACfA,EAAUI,CACF,IAFdJ,CAGJ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAG;CAAA,IAAAE;CAGP,OAHON,EAAA,OAAAE,KAAAF,EAAA,OAAAI,KAPT,IAAA,kBAACV,GAAD;EACe,WAAAU;EAMN,GAEDF;CAAK,CAAA,GACX,EAAA,KAAAA,GAAA,EAAA,KAAAE,GAAA,EAAA,KAAAE,KAAA,IAAAN,EAAA,IAVFM;AAUE"}

package/dist/chunks/Tag.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tag","names":[],"sources":["../../src/components/Tag/core.ts","../../src/components/Tag/tag.module.css","../../src/components/Tag/Tag.tsx"],"sourcesContent":["export const TagIconSize = 18;\nexport const AvatarSize = 24;\n","/* configurable tokens\n\n --md-chip-background-color\n* --md-chip-selected-background-color\n\n --md-chip-icon-color\n* --md-chip-selected-icon-color\n\n --md-chip-label-color\n* --md-chip-selected-label-color\n\n configurable tokens end /\n\n@layer adgytec.overrides {\n .tag {\n [data-visual-button] {\n --focus-indicator-offset: calc(-4 var(--dp, 1px));\n }\n }\n}\n\n@layer adgytec.comps {\n .tag {\n --_md-chip-background-color: var(\n --md-chip-background-color,\n var(--md-sys-color-surface-container-low)\n );\n --_md-chip-selected-background-color: var(\n --md-chip-selected-background-color,\n var(--md-sys-color-secondary-container)\n );\n --_md-chip-icon-color: var(\n --md-chip-icon-color,\n var(--md-sys-color-primary)\n );\n --_md-chip-selected-icon-color: var(\n --md-chip-selected-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n --_md-chip-label-color: var(\n --md-chip-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-chip-selected-label-color: var(\n --md-chip-selected-label-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n /* derived /\n --_background: var(--_md-chip-background-color);\n --_label-color: var(--_md-chip-label-color);\n --_icon-color: var(--_md-chip-icon-color);\n\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_label-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n position: relative;\n overflow: clip;\n\n background-color: var(--_background);\n color: var(--_icon-color);\n\n padding-inline: var(--md-sys-layout-space-12);\n padding-block: calc(5 var(--dp, 1px));\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n border: calc(1 * var(--dp, 1px)) solid\n var(--md-sys-color-outline-variant);\n outline: none;\n\n transition:\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 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 &[data-icon] {\n padding-inline-start: var(--md-sys-layout-space-8);\n }\n\n &[data-avatar] {\n padding-block: calc(3 * var(--dp, 1px));\n padding-inline-start: var(--md-sys-layout-space-4);\n }\n\n &[data-allows-removing] {\n padding-block: 0;\n padding-inline-end: calc(2 * var(--dp, 1px));\n }\n\n &[data-selection-mode] {\n cursor: pointer;\n }\n\n &[data-selected] {\n --_background: var(--_md-chip-selected-background-color);\n --_label-color: var(--_md-chip-selected-label-color);\n --_icon-color: var(--_md-chip-selected-icon-color);\n\n border-color: transparent;\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 cursor: default;\n border-color: transparent;\n\n --_background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_label-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_icon-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 .tag::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 .tag[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 .label {\n color: var(--_label-color);\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .avatar-constraint {\n inline-size: var(--md-sys-layout-space-24);\n max-inline-size: var(--md-sys-layout-space-24);\n\n block-size: var(--md-sys-layout-space-24);\n max-block-size: var(--md-sys-layout-space-24);\n\n aspect-ratio: 1 / 1;\n border-radius: 50%;\n\n overflow: clip;\n\n &[data-disabled] {\n position: relative;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n\n background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Check, X } from \"lucide-react\";\nimport { Tag as AriaTag } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Splash } from \"../Splash/Splash\";\nimport { useSplash } from \"../Splash/useSplash\";\nimport { TagIconSize } from \"./core\";\nimport styles from \"./tag.module.css\";\nimport type { TagProps } from \"./types\";\n\nexport const Tag: React.FC<TagProps> = ({\n icon,\n avatar,\n label,\n className,\n onPress,\n textValue = label,\n ...props\n}) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTag\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tag\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n textValue={textValue}\n {...props}\n data-avatar={avatar ? true : undefined}\n data-icon={!avatar && icon ? true : undefined}\n >\n {({ isSelected, allowsRemoving, isDisabled }) => (\n <>\n {splashInfo && <Splash {...splashInfo} />}\n {avatar ? (\n <div\n className={clsx(styles[\"avatar-constraint\"])}\n data-disabled={isDisabled \|\| undefined}\n >\n {avatar}\n </div>\n ) : isSelected ? (\n <Icon icon={Check} size={TagIconSize} />\n ) : (\n icon && <Icon icon={icon} size={TagIconSize} />\n )}\n\n <p className={clsx(typography.labelLarge, styles[\"label\"])}>\n {label}\n </p>\n\n {allowsRemoving && (\n <IconButton\n slot=\"remove\"\n icon={X}\n size=\"extra-small\"\n color=\"standard\"\n />\n )}\n </>\n )}\n </AriaTag>\n );\n};\n"],"mappings":";;;;;;;;;AAAA,IAAa,IAAc,IACd,IAAa;;;;GEWb,KAA2B,EACpC,SACA,WACA,UACA,cACA,YACA,eAAY,GACZ,GAAG,QACD;CACF,IAAM,EAAE,eAAY,mBAAgB,EAAU,CAAO;CAErD,OACI,kBAAC,GAAD;EACI,SAAS;EACT,YAAY,MACR,EACI,EAAO,KACP,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEO;EACX,GAAI;EACJ,eAAa,IAAS,KAAO,KAAA;EAC7B,aAAW,CAAC,KAAU,IAAO,KAAO,KAAA;aAElC,EAAE,eAAY,mBAAgB,oBAC5B,kBAAA,GAAA,EAAA,UAAA;GACK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAW,CAAA;GACrC,IACG,kBAAC,OAAD;IACI,WAAW,EAAK,EAAO,oBAAoB;IAC3C,iBAAe,KAAc,KAAA;cAE5B;GACA,CAAA,IACL,IACA,kBAAC,GAAD;IAAM,MAAM;IAAO,MAAA;GAAkB,CAAA,IAErC,KAAQ,kBAAC,GAAD;IAAY;IAAM,MAAA;GAAkB,CAAA;GAGhD,kBAAC,KAAD;IAAG,WAAW,EAAK,EAAW,YAAY,EAAO,KAAQ;cACpD;GACF,CAAA;GAEF,KACG,kBAAC,GAAD;IACI,MAAK;IACL,MAAM;IACN,MAAK;IACL,OAAM;GAAU,CAAA;EAG5B,EAAA,CAAA;CAEC,CAAA;AAEjB"}
1	+ {"version":3,"file":"Tag","names":["Tag","AriaTag","clsx","styles","_Fragment","typography","useSplash","clsx$1","TagIconSize","AvatarSize","tag_module_default","Tag$1","label","props","onPress","Tag","handlePress","\"tag\"","className","renderProps","avatar","icon","Fragment","splashInfo","Splash","isDisabled","isSelected","Icon","Check","\"label\"","allowsRemoving","IconButton","X"],"sources":["../../src/components/Tag/core.ts","../../src/components/Tag/tag.module.css","../../src/components/Tag/Tag.tsx"],"sourcesContent":["/*\n Default icon size (in pixels) rendered inside a {@link Tag}.\n /\nexport const TagIconSize = 18;\n\n/\n Diameter (in pixels) for avatar elements rendered inside a {@link Tag}.\n /\nexport const AvatarSize = 24;\n","/ configurable tokens\n\n --md-chip-background-color\n* --md-chip-selected-background-color\n\n --md-chip-icon-color\n* --md-chip-selected-icon-color\n\n --md-chip-label-color\n* --md-chip-selected-label-color\n\n configurable tokens end /\n\n@layer adgytec.overrides {\n .tag {\n [data-visual-button] {\n --focus-indicator-offset: calc(-4 var(--dp, 1px));\n }\n }\n}\n\n@layer adgytec.comps {\n .tag {\n --_md-chip-background-color: var(\n --md-chip-background-color,\n var(--md-sys-color-surface-container-low)\n );\n --_md-chip-selected-background-color: var(\n --md-chip-selected-background-color,\n var(--md-sys-color-secondary-container)\n );\n --_md-chip-icon-color: var(\n --md-chip-icon-color,\n var(--md-sys-color-primary)\n );\n --_md-chip-selected-icon-color: var(\n --md-chip-selected-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n --_md-chip-label-color: var(\n --md-chip-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-chip-selected-label-color: var(\n --md-chip-selected-label-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n /* derived /\n --_background: var(--_md-chip-background-color);\n --_label-color: var(--_md-chip-label-color);\n --_icon-color: var(--_md-chip-icon-color);\n\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_label-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / styles /\n\n display: flex;\n align-items: center;\n gap: var(--md-sys-layout-space-8);\n\n position: relative;\n overflow: clip;\n\n background-color: var(--_background);\n color: var(--_icon-color);\n\n padding-inline: var(--md-sys-layout-space-12);\n padding-block: calc(5 var(--dp, 1px));\n border-radius: var(--md-sys-shape-corner-radius-small);\n\n border: calc(1 * var(--dp, 1px)) solid\n var(--md-sys-color-outline-variant);\n outline: none;\n\n transition:\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 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 &[data-icon] {\n padding-inline-start: var(--md-sys-layout-space-8);\n }\n\n &[data-avatar] {\n padding-block: calc(3 * var(--dp, 1px));\n padding-inline-start: var(--md-sys-layout-space-4);\n }\n\n &[data-allows-removing] {\n padding-block: 0;\n padding-inline-end: calc(2 * var(--dp, 1px));\n }\n\n &[data-selection-mode] {\n cursor: pointer;\n }\n\n &[data-selected] {\n --_background: var(--_md-chip-selected-background-color);\n --_label-color: var(--_md-chip-selected-label-color);\n --_icon-color: var(--_md-chip-selected-icon-color);\n\n border-color: transparent;\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 cursor: default;\n border-color: transparent;\n\n --_background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_label-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n --_icon-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 .tag::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 .tag[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 .label {\n color: var(--_label-color);\n\n transition: color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n .avatar-constraint {\n inline-size: var(--md-sys-layout-space-24);\n max-inline-size: var(--md-sys-layout-space-24);\n\n block-size: var(--md-sys-layout-space-24);\n max-block-size: var(--md-sys-layout-space-24);\n\n aspect-ratio: 1 / 1;\n border-radius: 50%;\n\n overflow: clip;\n\n &[data-disabled] {\n position: relative;\n\n &::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 50%;\n\n background: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n }\n}\n","import clsx from \"clsx\";\nimport { Check, X } from \"lucide-react\";\nimport { Tag as AriaTag } from \"react-aria-components\";\nimport { typography } from \"@/utils\";\nimport { IconButton } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport { Splash } from \"../Splash/Splash\";\nimport { useSplash } from \"../Splash/useSplash\";\nimport { TagIconSize } from \"./core\";\nimport styles from \"./tag.module.css\";\nimport type { TagProps } from \"./types\";\n\n/*\n Compact interactive element representing an attribute, entity, or action, based on\n * [Material 3 Chips](https://m3.material.io/components/chips/overview).\n \n Extends React Aria Components `Tag` with Material 3 styling and interactive behaviors:\n * - Renders a text `label` using `typography.labelLarge`.\n * - Supports an optional leading `icon` or circular `avatar`.\n * - When selected, dynamically displays a checkmark icon unless an avatar is present.\n * - Supports removable tags by rendering a built-in remove icon button (`X`) when `allowsRemoving` is true.\n * - Interactive ripple feedback via {@link Splash}.\n \n Configurable CSS tokens:\n * - `--md-chip-background-color`: Background color of the tag (`var(--md-sys-color-surface-container-low)`).\n * - `--md-chip-selected-background-color`: Background color when selected (`var(--md-sys-color-secondary-container)`).\n * - `--md-chip-icon-color`: Color of the leading icon (`var(--md-sys-color-primary)`).\n * - `--md-chip-selected-icon-color`: Color of the icon when selected (`var(--md-sys-color-on-secondary-container)`).\n * - `--md-chip-label-color`: Text color of the label (`var(--md-sys-color-on-surface-variant)`).\n * - `--md-chip-selected-label-color`: Text color when selected (`var(--md-sys-color-on-secondary-container)`).\n \n @example\n * ```tsx\n * import { Tag } from \"@adgytec/web-ui-components\";\n * import { TagGroup, TagList } from \"react-aria-components\";\n * import { PlaneTakeoff, ShoppingCart } from \"lucide-react\";\n \n export function Example() {\n * return (\n * <TagGroup aria-label=\"Categories\" selectionMode=\"multiple\">\n * <TagList>\n * <Tag id=\"travel\" label=\"Travel\" icon={PlaneTakeoff} />\n * <Tag id=\"shopping\" label=\"Shopping\" icon={ShoppingCart} />\n * </TagList>\n * </TagGroup>\n * );\n * }\n * ```\n */\nexport const Tag: React.FC<TagProps> = ({\n icon,\n avatar,\n label,\n className,\n onPress,\n textValue = label,\n ...props\n}) => {\n const { splashInfo, handlePress } = useSplash(onPress);\n\n return (\n <AriaTag\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n styles[\"tag\"],\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n textValue={textValue}\n {...props}\n data-avatar={avatar ? true : undefined}\n data-icon={!avatar && icon ? true : undefined}\n >\n {({ isSelected, allowsRemoving, isDisabled }) => (\n <>\n {splashInfo && <Splash {...splashInfo} />}\n {avatar ? (\n <div\n className={clsx(styles[\"avatar-constraint\"])}\n data-disabled={isDisabled \|\| undefined}\n >\n {avatar}\n </div>\n ) : isSelected ? (\n <Icon icon={Check} size={TagIconSize} />\n ) : (\n icon && <Icon icon={icon} size={TagIconSize} />\n )}\n\n <p className={clsx(typography.labelLarge, styles[\"label\"])}>\n {label}\n </p>\n\n {allowsRemoving && (\n <IconButton\n slot=\"remove\"\n icon={X}\n size=\"extra-small\"\n color=\"standard\"\n />\n )}\n </>\n )}\n </AriaTag>\n );\n};\n"],"mappings":";;;;;;;;;AAGA,IAAaQ,IAAc,IAKdC,IAAa;;;;GEyCbT,KAA2B,EACpC,SACA,WACA,UACA,cACA,YACA,eAAYY,GACZ,GAAGC,QACD;CACF,IAAM,EAAE,eAAY,mBAAgBP,EAAUQ,CAAO;CAErD,OACI,kBAACb,GAAD;EACI,SAASe;EACT,YAAY,MACRd,EACIC,EAAOc,KACP,OAAOC,KAAc,aACfA,EAAUC,CAAW,IACrBD,CACV;EAEO;EACX,GAAIL;EACJ,eAAaO,IAAS,KAAO,KAAA;EAC7B,aAAW,CAACA,KAAUC,IAAO,KAAO,KAAA;EAElC,WAAA,EAAE,eAAY,mBAAgB,oBAC5B,kBAAAjB,GAAA,EAAA,UAAA;GACKmB,KAAc,kBAACC,GAAD,EAAQ,GAAID,EAAW,CAAA;GACrCH,IACG,kBAAC,OAAD;IACI,WAAWlB,EAAKC,EAAO,oBAAoB;IAC3C,iBAAesB,KAAc,KAAA;IAE5B,UAAAL;GACA,CAAA,IACLM,IACA,kBAACC,GAAD;IAAM,MAAMC;IAAO,MAAA;GAAkB,CAAA,IAErCP,KAAQ,kBAACM,GAAD;IAAY;IAAM,MAAA;GAAkB,CAAA;GAGhD,kBAAC,KAAD;IAAG,WAAWzB,EAAKG,EAAW,YAAYF,EAAO0B,KAAQ;IACpD,UAAAjB;GACF,CAAA;GAEFkB,KACG,kBAACC,GAAD;IACI,MAAK;IACL,MAAMC;IACN,MAAK;IACL,OAAM;GAAU,CAAA;EAG5B,EAAA,CAAA;CAEC,CAAA;AAEjB"}