npm - @adgytec/adgytec-web-ui-components - Versions diffs - 2.3.0 → 2.4.0 - Mend

@adgytec/adgytec-web-ui-components 2.3.0 → 2.4.0

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 (772) hide show

package/dist/chunks/Tab CHANGED Viewed

@@ -5,7 +5,7 @@ import { n as r, t as i } from "./useSplash";
 import a from "clsx";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { SelectionIndicator as c, Tab as l } from "react-aria-components";
-import '../assets/Tab.css';//#region src/components/Tabs/Tab/tab.module.css
+import '../assets/Tab.css';// src/components/Tabs/Tab/tab.module.css
 var u = e(), d = {
 	tab: "_tab_1lw7s_2",
 	"selection-indicator": "_selection-indicator_1lw7s_117",
@@ -45,7 +45,6 @@ var u = e(), d = {
 		]
 	}), f[13] = y, f[14] = h, f[15] = _, f[16] = b, f[17] = x, f[18] = S, f[19] = C, f[20] = T) : T = f[20], T;
 };
-//#endregion
 export { f as t };
 //# sourceMappingURL=Tab.map

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":";;;;;;;;;;;;A,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;C,IA0BE,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 CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
 import { TabList as r } from "react-aria-components";
-import '../assets/TabList.css';//#region src/components/Tabs/TabList/tabList.module.css
+import '../assets/TabList.css';// src/components/Tabs/TabList/tabList.module.css
 var i = e(), a = { "tab-list": "_tab-list_8hi4u_12" }, o = (e) => {
 	let o = (0, i.c)(8), s, c;
 	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
@@ -14,7 +14,6 @@ var i = e(), a = { "tab-list": "_tab-list_8hi4u_12" }, o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as t };
 //# sourceMappingURL=TabList.map

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":";;;;;A,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 CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
 import { TabPanel as r } from "react-aria-components";
-import '../assets/TabPanel.css';//#region src/components/Tabs/TabPanel/tabPanel.module.css
+import '../assets/TabPanel.css';// src/components/Tabs/TabPanel/tabPanel.module.css
 var i = e(), a = { "tab-panel": "_tab-panel_1q4o7_2" }, o = (e) => {
 	let o = (0, i.c)(8), s, c;
 	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
@@ -14,7 +14,6 @@ var i = e(), a = { "tab-panel": "_tab-panel_1q4o7_2" }, o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as t };
 //# sourceMappingURL=TabPanel.map

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":";;;;;A,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 CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
 import { TabPanels as r } from "react-aria-components";
-import '../assets/TabPanels.css';//#region src/components/Tabs/TabPanels/tabPanels.module.css
+import '../assets/TabPanels.css';// src/components/Tabs/TabPanels/tabPanels.module.css
 var i = e(), a = { "tab-panels": "_tab-panels_u5x73_2" }, o = (e) => {
 	let o = (0, i.c)(8), s, c;
 	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
@@ -15,7 +15,6 @@ var i = e(), a = { "tab-panels": "_tab-panels_u5x73_2" }, o = (e) => {
 		"data-tab-panels": !0
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as t };
 //# sourceMappingURL=TabPanels.map

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":";;;;;A,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 CHANGED Viewed

@@ -2,7 +2,7 @@ import { t as e } from "./compiler-runtime";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
 import { Tabs as r } from "react-aria-components";
-import '../assets/Tabs.css';//#region src/components/Tabs/Tabs/tabs.module.css
+import '../assets/Tabs.css';// src/components/Tabs/Tabs/tabs.module.css
 var i = e(), a = { tabs: "_tabs_1mme9_2" }, o = (e) => {
 	let o = (0, i.c)(8), s, c;
 	o[0] === e ? (s = o[1], c = o[2]) : ({className: s, ...c} = e, o[0] = e, o[1] = s, o[2] = c);
@@ -14,7 +14,6 @@ var i = e(), a = { tabs: "_tabs_1mme9_2" }, o = (e) => {
 		...c
 	}), o[5] = c, o[6] = l, o[7] = u) : u = o[7], u;
 };
-//#endregion
 export { o as t };
 //# sourceMappingURL=Tabs.map

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":";;;;;A,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 CHANGED Viewed

@@ -6,7 +6,7 @@ import a from "clsx";
 import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Tag as l } from "react-aria-components";
 import { Check as u, X as d } from "lucide-react";
-import '../assets/Tag.css';//#region src/components/Tag/core.ts
+import '../assets/Tag.css';// src/components/Tag/core.ts
 var f = 18, p = 24, m = {
 	tag: "_tag_oartz_15",
 	label: "_label_oartz_184",
@@ -46,7 +46,6 @@ var f = 18, p = 24, m = {
 		] })
 	});
 };
-//#endregion
 export { p as n, f as r, h as t };
 //# sourceMappingURL=Tag.map

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,I;;;;A,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"}

package/dist/chunks/ThemeSelector CHANGED Viewed

@@ -2,75 +2,74 @@ import { t as e } from "./compiler-runtime";
 import { t } from "./base";
 import { r as n } from "./core";
 import { t as r } from "./ConnectedButtonGroup";
-import { t as i } from "./Switch";
-import a from "clsx";
-import { useLayoutEffect as o, useMemo as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { useLocalStorage as u, useMediaQuery as d } from "usehooks-ts";
-import '../assets/ThemeSelector.css';//#region src/utils/theme/build.ts
-var f = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
+import { t as i } from "./Divider";
+import { t as a } from "./Switch";
+import { t as o } from "./ListBox";
+import { t as s } from "./ListIcon";
+import { t as c } from "./ListItem";
+import { t as l } from "./ListLabelText";
+import { t as u } from "./ListSupportingText";
+import d from "clsx";
+import { useCallback as f, useLayoutEffect as p, useMemo as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useLocalStorage as _, useMediaQuery as v } from "usehooks-ts";
+import { Moon as y, Palette as b, Sun as x, SunMoon as S } from "lucide-react";
+import '../assets/ThemeSelector.css';// src/utils/theme/build.ts
+var C = ({ isDarkMode: e, isMonochrome: t, contrast: n }) => {
 	let r = e ? "dark" : "light";
 	return t ? `monochrome-${r}` : `${r}${n === "standard" ? "" : n === "medium" ? "-medium-contrast" : "-high-contrast"}`;
-}, p = "(prefers-color-scheme: dark)", m = "application-theme";
-function h({ defaultThemeMode: e = "system", defaultContrast: t = "standard", isMonochrome: n = !1, localStorageKey: r = m, initializeWithValue: i = !0 } = {}) {
-	let a = {
+}, w = "(prefers-color-scheme: dark)", T = "application-theme";
+function E({ defaultThemeMode: e = "system", defaultContrast: t = "standard", isMonochrome: n = !1, localStorageKey: r = T, initializeWithValue: i = !0 } = {}) {
+	let a = m(() => ({
 		mode: e,
 		contrast: t,
 		isMonochrome: n
-	}, o = d(p, { initializeWithValue: i }), [s, c] = u(r, a, { initializeWithValue: i }), l = s.mode === "dark" || s.mode === "system" && o, f = (e) => {
+	}), [
+		e,
+		t,
+		n
+	]), o = v(w, { initializeWithValue: i }), [s, c] = _(r, a, { initializeWithValue: i }), l = s.mode === "dark" || s.mode === "system" && o, u = f((e) => {
 		c((t) => ({
 			...t,
 			mode: e
 		}));
-	}, h = (e) => {
+	}, [c]), d = f((e) => {
 		c((t) => ({
 			...t,
 			contrast: e
 		}));
-	}, g = (e) => {
+	}, [c]), p = f((e) => {
 		c((t) => ({
 			...t,
 			isMonochrome: e
 		}));
-	};
+	}, [c]);
 	return {
 		...s,
 		isDarkMode: l,
-		setMode: f,
-		setContrast: h,
-		setMonochrome: g
+		setMode: u,
+		setContrast: d,
+		setMonochrome: p
 	};
 }
-//#endregion
-//#region src/components/ThemeSelector/ThemeProvider.tsx
-var g = e(), _ = (e) => {
-	let t = (0, g.c)(5), { children: n } = e, { isDarkMode: r, isMonochrome: i, contrast: a } = h(), s, c;
-	return t[0] !== a || t[1] !== r || t[2] !== i ? (s = () => {
-		let e = f({
-			isDarkMode: r,
-			isMonochrome: i,
-			contrast: a
-		});
-		document.documentElement.setAttribute("data-theme", e);
-	}, c = [
-		r,
-		i,
-		a
-	], t[0] = a, t[1] = r, t[2] = i, t[3] = s, t[4] = c) : (s = t[3], c = t[4]), o(s, c), n;
-}, v = (e) => [
+// src/components/ThemeSelector/core.ts
+var D = (e) => [
 	{
 		id: "system",
-		value: e.system
+		value: e.system,
+		icon: S
 	},
 	{
 		id: "light",
-		value: e.light
+		value: e.light,
+		icon: x
 	},
 	{
 		id: "dark",
-		value: e.dark
+		value: e.dark,
+		icon: y
 	}
-], y = (e) => [
+], O = (e) => [
 	{
 		id: "standard",
 		value: e.standard
@@ -84,110 +83,139 @@ var g = e(), _ = (e) => {
 		value: e.high
 	}
 ];
-function b(e) {
+function k(e) {
 	return e === "system" || e === "dark" || e === "light";
 }
-function x(e) {
+function A(e) {
 	return e === "standard" || e === "medium" || e === "high";
 }
-var S = {
-	selector: "_selector_o55o3_2",
-	"theme-item": "_theme-item_o55o3_7",
-	"theme-item-info": "_theme-item-info_o55o3_12"
-}, C = ({ heading: e, description: n, children: r, className: i, useInline: o = !1 }) => o ? /* @__PURE__ */ l("span", {
-	className: a(S["theme-item"], i),
-	children: [/* @__PURE__ */ l("span", {
-		className: a(S["theme-item-info"]),
-		children: [/* @__PURE__ */ c("span", {
-			className: a(t.titleMedium),
+var j = {
+	selector: "_selector_3hs6r_2",
+	"theme-item": "_theme-item_3hs6r_13",
+	disabled: "_disabled_3hs6r_26",
+	"theme-item-info": "_theme-item-info_3hs6r_30",
+	"theme-item-heading": "_theme-item-heading_3hs6r_35",
+	"theme-item-description": "_theme-item-description_3hs6r_39"
+}, M = ({ heading: e, description: n, children: r, className: i, useInline: a = !1, isDisabled: o = !1 }) => a ? /* @__PURE__ */ g("span", {
+	className: d(j["theme-item"], o && j.disabled, i),
+	"data-disabled": o || void 0,
+	children: [/* @__PURE__ */ g("span", {
+		className: d(j["theme-item-info"]),
+		children: [/* @__PURE__ */ h("span", {
+			className: d(t.titleMedium, j["theme-item-heading"]),
 			slot: "label",
 			children: e
-		}), n && /* @__PURE__ */ c("span", {
-			className: a(t.bodyMedium),
+		}), n && /* @__PURE__ */ h("span", {
+			className: d(t.bodyMedium, j["theme-item-description"]),
 			slot: "description",
 			children: n
 		})]
 	}), r]
-}) : /* @__PURE__ */ l("div", {
-	className: a(S["theme-item"], i),
-	children: [/* @__PURE__ */ l("div", {
-		className: a(S["theme-item-info"]),
-		children: [/* @__PURE__ */ c("h3", {
-			className: a(t.titleMedium),
+}) : /* @__PURE__ */ g("div", {
+	className: d(j["theme-item"], o && j.disabled, i),
+	"data-disabled": o || void 0,
+	children: [/* @__PURE__ */ g("div", {
+		className: d(j["theme-item-info"]),
+		children: [/* @__PURE__ */ h("h3", {
+			className: d(t.titleMedium, j["theme-item-heading"]),
 			children: e
-		}), n && /* @__PURE__ */ c("p", {
-			className: a(t.bodyMedium),
+		}), n && /* @__PURE__ */ h("p", {
+			className: d(t.bodyMedium, j["theme-item-description"]),
 			children: n
 		})]
 	}), r]
-}), w = {
+}), N = e(), P = (e) => {
+	let t = (0, N.c)(5), { children: n } = e, { isDarkMode: r, isMonochrome: i, contrast: a } = E(), o, s;
+	return t[0] !== a || t[1] !== r || t[2] !== i ? (o = () => {
+		let e = C({
+			isDarkMode: r,
+			isMonochrome: i,
+			contrast: a
+		});
+		document.documentElement.setAttribute("data-theme", e);
+	}, s = [
+		r,
+		i,
+		a
+	], t[0] = a, t[1] = r, t[2] = i, t[3] = o, t[4] = s) : (o = t[3], s = t[4]), p(o, s), n;
+}, F = {
 	heading: "Theme Mode",
 	description: "Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.",
 	system: "System",
 	dark: "Dark",
 	light: "Light"
-}, T = {
+}, I = {
 	heading: "Theme Contrast",
 	description: "Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.",
 	standard: "Standard",
 	medium: "Medium",
 	high: "High"
-}, E = {
+}, L = {
 	heading: "Monochrome",
 	description: "Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience."
-}, D = ({ modeDetails: e = w, contrastDetails: t = T, monochromeDetails: o = E }) => {
-	let { mode: u, isMonochrome: d, contrast: f, setContrast: p, setMode: m, setMonochrome: g } = h(), _ = s(() => v(e), [e]), D = s(() => y(t), [t]);
-	return /* @__PURE__ */ l("div", {
-		className: a(S.selector),
+}, R = ({ modeDetails: e = F, contrastDetails: t = I, monochromeDetails: f = L, className: p, buttonColor: _ = "tonal", buttonSize: v = "small", showMode: y = !0, showContrast: x = !0, showMonochrome: S = !0, showDividers: C = !1 }) => {
+	let { mode: w, isMonochrome: T, contrast: N, setContrast: P, setMode: R, setMonochrome: z } = E(), B = m(() => D(e), [e]), V = m(() => O(t), [t]);
+	return /* @__PURE__ */ g("div", {
+		className: d(j.selector, p),
 		children: [
-			/* @__PURE__ */ c(C, {
+			y && /* @__PURE__ */ h(M, {
 				heading: e.heading,
 				description: e.description,
-				children: /* @__PURE__ */ c(r, {
+				children: /* @__PURE__ */ h(r, {
+					color: _,
+					size: v,
 					selectionMode: "single",
-					selectedKeys: [u],
+					selectedKeys: [w],
 					onSelectionChange: (e) => {
 						let t = Array.from(e)[0];
-						b(t) && m(t);
+						k(t) && R(t);
 					},
-					children: _.map((e) => /* @__PURE__ */ c(n, {
+					children: B.map((e) => /* @__PURE__ */ h(n, {
 						id: e.id,
+						icon: e.icon,
 						children: e.value
 					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ c(C, {
+			C && y && (x || S) && /* @__PURE__ */ h(i, {}),
+			x && /* @__PURE__ */ h(M, {
 				heading: t.heading,
 				description: t.description,
-				children: /* @__PURE__ */ c(r, {
-					color: "tonal",
+				isDisabled: T,
+				children: /* @__PURE__ */ h(r, {
+					color: _,
+					size: v,
 					selectionMode: "single",
-					selectedKeys: [f],
+					selectedKeys: [N],
 					onSelectionChange: (e) => {
 						let t = Array.from(e)[0];
-						x(t) && p(t);
+						A(t) && P(t);
 					},
-					isDisabled: d,
-					children: D.map((e) => /* @__PURE__ */ c(n, {
+					isDisabled: T,
+					children: V.map((e) => /* @__PURE__ */ h(n, {
 						id: e.id,
 						children: e.value
 					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ c(i, {
-				isSelected: d,
-				onChange: g,
-				containerStateLayer: !0,
-				children: /* @__PURE__ */ c(C, {
-					heading: o.heading,
-					description: o.description,
-					useInline: !0
+			C && x && S && /* @__PURE__ */ h(i, {}),
+			S && /* @__PURE__ */ h(o, {
+				"aria-label": f.heading,
+				children: /* @__PURE__ */ h(c, {
+					onAction: () => z(!T),
+					leading: /* @__PURE__ */ h(s, { icon: b }),
+					label: /* @__PURE__ */ h(l, { children: f.heading }),
+					supporting: /* @__PURE__ */ h(u, { children: f.description }),
+					trailing: [/* @__PURE__ */ h(a, {
+						isSelected: T,
+						onChange: z,
+						"aria-label": f.heading
+					}, "selection")]
 				})
 			})
 		]
 	});
 };
-//#endregion
-export { f as i, _ as n, h as r, D as t };
+export { A as a, E as c, O as i, C as l, P as n, k as o, M as r, D as s, R as t };
 //# sourceMappingURL=ThemeSelector.map