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

@adgytec/adgytec-web-ui-components 2.3.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 (448) hide show

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"}

package/dist/chunks/ThemeSelector CHANGED Viewed

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

package/dist/chunks/ThemeSelector.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","keys","item"],"sources":["../../src/utils/theme/build.ts","../../src/utils/theme/useTheme.ts","../../src/components/ThemeSelector/ThemeProvider.tsx","../../src/components/ThemeSelector/core.ts","../../src/components/ThemeSelector/themeSelector.module.css","../../src/components/ThemeSelector/ThemeItem.tsx","../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import type { ThemeBuildOptions } from \"./types\";\n\nexport const buildThemeString = ({\n isDarkMode,\n isMonochrome,\n contrast,\n}: ThemeBuildOptions) => {\n const mode = isDarkMode ? \"dark\" : \"light\";\n if (isMonochrome) return `monochrome-${mode}`;\n\n const contrastSuffix =\n contrast === \"standard\"\n ? \"\"\n : contrast === \"medium\"\n ? \"-medium-contrast\"\n : \"-high-contrast\";\n\n return `${mode}${contrastSuffix}`;\n};\n","import { useLocalStorage, useMediaQuery } from \"usehooks-ts\";\nimport type {\n ThemeContrast,\n ThemeMode,\n ThemeOptions,\n ThemeReturn,\n ThemeStorage,\n} from \"./types\";\n\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nconst LOCAL_STORAGE_KEY = \"application-theme\";\n\nexport function useTheme({\n defaultThemeMode = \"system\",\n defaultContrast = \"standard\",\n isMonochrome = false,\n localStorageKey = LOCAL_STORAGE_KEY,\n initializeWithValue = true,\n}: ThemeOptions = {}): ThemeReturn {\n const defaultValue: ThemeStorage = {\n mode: defaultThemeMode,\n contrast: defaultContrast,\n isMonochrome,\n };\n\n const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });\n const [theme, setTheme] = useLocalStorage<ThemeStorage>(\n localStorageKey,\n defaultValue,\n {\n initializeWithValue,\n }\n );\n\n const isDarkMode =\n theme.mode === \"dark\" \|\| (theme.mode === \"system\" && isDarkOS);\n\n const setMode = (mode: ThemeMode) => {\n setTheme((prev) => ({ ...prev, mode }));\n };\n\n const setContrast = (contrast: ThemeContrast) => {\n setTheme((prev) => ({ ...prev, contrast }));\n };\n\n const setMonochrome = (isMonochrome: boolean) => {\n setTheme((prev) => ({ ...prev, isMonochrome }));\n };\n\n return {\n ...theme,\n isDarkMode,\n setMode,\n setContrast,\n setMonochrome,\n };\n}\n","import { type ReactNode, useLayoutEffect } from \"react\";\nimport { buildThemeString, useTheme } from \"@/utils\";\n\nexport const ThemeProvider = ({ children }: { children?: ReactNode }) => {\n const { isDarkMode, isMonochrome, contrast } = useTheme();\n\n useLayoutEffect(() => {\n const themeString = buildThemeString({\n isDarkMode,\n isMonochrome,\n contrast,\n });\n document.documentElement.setAttribute(\"data-theme\", themeString);\n }, [isDarkMode, isMonochrome, contrast]);\n\n return children;\n};\n","import type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\nexport const modeItems = (\n modeDetails: ThemeModeTranslations\n): {\n id: ThemeMode;\n value: string;\n}[] => {\n return [\n { id: \"system\", value: modeDetails.system },\n { id: \"light\", value: modeDetails.light },\n { id: \"dark\", value: modeDetails.dark },\n ];\n};\n\nexport const contrastItems = (\n contrastDetails: ThemeContrastTranslations\n): {\n id: ThemeContrast;\n value: string;\n}[] => {\n return [\n { id: \"standard\", value: contrastDetails.standard },\n { id: \"medium\", value: contrastDetails.medium },\n { id: \"high\", value: contrastDetails.high },\n ];\n};\n\nexport function isThemeMode(value: Key): value is ThemeMode {\n return value === \"system\" \|\| value === \"dark\" \|\| value === \"light\";\n}\n\nexport function isThemeContrast(value: Key): value is ThemeContrast {\n return value === \"standard\" \|\| value === \"medium\" \|\| value === \"high\";\n}\n","@layer adgytec.comps {\n .selector {\n display: grid;\n gap: var(--md-sys-layout-space-24);\n }\n\n .theme-item {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n }\n\n .theme-item-info {\n display: grid;\n }\n}\n","import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./themeSelector.module.css\";\n\nexport const ThemeItem = ({\n heading,\n description,\n children,\n className,\n useInline = false,\n}: {\n heading: string;\n description?: string;\n children?: ReactNode;\n className?: string;\n useInline?: boolean;\n}) => {\n if (useInline) {\n return (\n <span className={clsx(styles[\"theme-item\"], className)}>\n <span className={clsx(styles[\"theme-item-info\"])}>\n <span className={clsx(typography.titleMedium)} slot=\"label\">\n {heading}\n </span>\n\n {description && (\n <span\n className={clsx(typography.bodyMedium)}\n slot=\"description\"\n >\n {description}\n </span>\n )}\n </span>\n\n {children}\n </span>\n );\n }\n return (\n <div className={clsx(styles[\"theme-item\"], className)}>\n <div className={clsx(styles[\"theme-item-info\"])}>\n <h3 className={clsx(typography.titleMedium)}>{heading}</h3>\n\n {description && (\n <p className={clsx(typography.bodyMedium)}>{description}</p>\n )}\n </div>\n\n {children}\n </div>\n );\n};\n","import clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Switch } from \"../Input\";\nimport { contrastItems, isThemeContrast, isThemeMode, modeItems } from \"./core\";\nimport { ThemeItem } from \"./ThemeItem\";\nimport styles from \"./themeSelector.module.css\";\nimport type {\n ThemeContrastTranslations,\n ThemeModeTranslations,\n ThemeMonochromeTranslations,\n ThemeSelectorProps,\n} from \"./types\";\n\nconst defaultMode: ThemeModeTranslations = {\n heading: \"Theme Mode\",\n description:\n \"Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.\",\n\n system: \"System\",\n dark: \"Dark\",\n light: \"Light\",\n};\n\nconst defaultContrast: ThemeContrastTranslations = {\n heading: \"Theme Contrast\",\n description:\n \"Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.\",\n\n standard: \"Standard\",\n medium: \"Medium\",\n high: \"High\",\n};\n\nconst defaultMonochrome: ThemeMonochromeTranslations = {\n heading: \"Monochrome\",\n description:\n \"Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience.\",\n};\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({\n modeDetails = defaultMode,\n contrastDetails = defaultContrast,\n monochromeDetails = defaultMonochrome,\n}) => {\n const {\n mode,\n isMonochrome,\n contrast,\n setContrast,\n setMode,\n setMonochrome,\n } = useTheme();\n\n const themeModeItems = useMemo(() => modeItems(modeDetails), [modeDetails]);\n const themeContrastItems = useMemo(\n () => contrastItems(contrastDetails),\n [contrastDetails]\n );\n\n return (\n <div className={clsx(styles[\"selector\"])}>\n <ThemeItem\n heading={modeDetails.heading}\n description={modeDetails.description}\n >\n <ConnectedButtonGroup\n selectionMode=\"single\"\n selectedKeys={[mode]}\n onSelectionChange={(keys) => {\n const themeMode = Array.from(keys)[0];\n if (!isThemeMode(themeMode)) return;\n\n setMode(themeMode);\n }}\n >\n {themeModeItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <ThemeItem\n heading={contrastDetails.heading}\n description={contrastDetails.description}\n >\n <ConnectedButtonGroup\n color=\"tonal\"\n selectionMode=\"single\"\n selectedKeys={[contrast]}\n onSelectionChange={(keys) => {\n const themeContrast = Array.from(keys)[0];\n if (!isThemeContrast(themeContrast)) return;\n\n setContrast(themeContrast);\n }}\n isDisabled={isMonochrome}\n >\n {themeContrastItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <Switch\n isSelected={isMonochrome}\n onChange={setMonochrome}\n containerStateLayer\n >\n <ThemeItem\n heading={monochromeDetails.heading}\n description={monochromeDetails.description}\n useInline\n ></ThemeItem>\n </Switch>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","clsx","styles","_c","keys","item","clsx","styles","require_compiler_runtime","ConnectedButton","ConnectedButtonGroup","Switch","clsx$1","buildThemeString","mode","isDarkMode","isMonochrome","contrast","COLOR_SCHEME_QUERY","LOCAL_STORAGE_KEY","useTheme","defaultValue","useMemo","defaultThemeMode","defaultContrast","isDarkOS","useMediaQuery","theme","setTheme","useLocalStorage","localStorageKey","setMode","useCallback","prev","setContrast","prev_0","setMonochrome","prev_1","isMonochrome_0","modeItems","modeDetails","contrastItems","contrastDetails","isThemeMode","value","isThemeContrast","themeSelector_module_default","ThemeItem","useInline","className","typography","heading","description","children","import_compiler_runtime","ThemeProvider","$","t0","t1","t2","themeString","useLayoutEffect","defaultMode","defaultMonochrome","ThemeSelector","themeModeItems","themeContrastItems","\"selector\"","themeMode","keys","item","themeContrast","keys_0","item_0","monochromeDetails"],"sources":["../../src/utils/theme/build.ts","../../src/utils/theme/useTheme.ts","../../src/components/ThemeSelector/core.ts","../../src/components/ThemeSelector/themeSelector.module.css","../../src/components/ThemeSelector/ThemeItem.tsx","../../src/components/ThemeSelector/ThemeProvider.tsx","../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import type { ThemeBuildOptions } from \"./types\";\n\n/*\n Generates the theme string suffix or identifier based on current theme settings.\n \n This identifier corresponds to the theme definition classes and data attributes\n * (such as `data-theme=\"...\"`) applied to the root element (`document.documentElement` or body).\n \n - Monochrome modes produce `\"monochrome-dark\"` or `\"monochrome-light\"`.\n * - Standard contrast modes produce `\"dark\"` or `\"light\"`.\n * - Elevated contrast modes produce `\"dark-medium-contrast\"`, `\"dark-high-contrast\"`,\n * `\"light-medium-contrast\"`, or `\"light-high-contrast\"`.\n \n @param options - Theme configuration flags (dark mode, monochrome, contrast).\n * @returns Formatted theme string (e.g. `\"dark\"`, `\"light-high-contrast\"`, `\"monochrome-dark\"`).\n \n @example\n * ```ts\n * const themeString = buildThemeString({\n * isDarkMode: true,\n * isMonochrome: false,\n * contrast: \"high\",\n * });\n * // returns \"dark-high-contrast\"\n * ```\n /\nexport const buildThemeString = ({\n isDarkMode,\n isMonochrome,\n contrast,\n}: ThemeBuildOptions): string => {\n const mode = isDarkMode ? \"dark\" : \"light\";\n if (isMonochrome) return `monochrome-${mode}`;\n\n const contrastSuffix =\n contrast === \"standard\"\n ? \"\"\n : contrast === \"medium\"\n ? \"-medium-contrast\"\n : \"-high-contrast\";\n\n return `${mode}${contrastSuffix}`;\n};\n","import { useCallback, useMemo } from \"react\";\nimport { useLocalStorage, useMediaQuery } from \"usehooks-ts\";\nimport type {\n ThemeContrast,\n ThemeMode,\n ThemeOptions,\n ThemeReturn,\n ThemeStorage,\n} from \"./types\";\n\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nconst LOCAL_STORAGE_KEY = \"application-theme\";\n\n/\n React hook that manages the application theme state with `localStorage` persistence\n * and automatic synchronization with system preferences.\n \n Tracks theme mode (`\"system\"`, `\"dark\"`, `\"light\"`), contrast level (`\"standard\"`,\n * `\"medium\"`, `\"high\"`), and monochrome mode. When `mode` is set to `\"system\"`,\n * `isDarkMode` dynamically listens to the OS `(prefers-color-scheme: dark)` media query.\n \n All setter callbacks (`setMode`, `setContrast`, `setMonochrome`) are referentially stable\n * via `useCallback`.\n \n @param options - Configuration options for initial defaults and storage key.\n * @returns Current theme state and updater functions.\n \n @example\n * ```tsx\n * import { useTheme, buildThemeString } from '@adgytec/web-ui-components';\n * import { useEffect } from 'react';\n \n function App() {\n * const theme = useTheme();\n \n useEffect(() => {\n * const themeString = buildThemeString({\n * isDarkMode: theme.isDarkMode,\n * isMonochrome: theme.isMonochrome,\n * contrast: theme.contrast,\n * });\n * document.documentElement.setAttribute('data-theme', themeString);\n * }, [theme.isDarkMode, theme.isMonochrome, theme.contrast]);\n \n return (\n * <div>\n * <button onClick={() => theme.setMode('dark')}>Dark Mode</button>\n * <button onClick={() => theme.setContrast('high')}>High Contrast</button>\n * </div>\n * );\n * }\n * ```\n /\nexport function useTheme({\n defaultThemeMode = \"system\",\n defaultContrast = \"standard\",\n isMonochrome = false,\n localStorageKey = LOCAL_STORAGE_KEY,\n initializeWithValue = true,\n}: ThemeOptions = {}): ThemeReturn {\n const defaultValue: ThemeStorage = useMemo(\n () => ({\n mode: defaultThemeMode,\n contrast: defaultContrast,\n isMonochrome,\n }),\n [defaultThemeMode, defaultContrast, isMonochrome]\n );\n\n const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });\n const [theme, setTheme] = useLocalStorage<ThemeStorage>(\n localStorageKey,\n defaultValue,\n {\n initializeWithValue,\n }\n );\n\n const isDarkMode =\n theme.mode === \"dark\" \|\| (theme.mode === \"system\" && isDarkOS);\n\n const setMode = useCallback(\n (mode: ThemeMode) => {\n setTheme((prev) => ({ ...prev, mode }));\n },\n [setTheme]\n );\n\n const setContrast = useCallback(\n (contrast: ThemeContrast) => {\n setTheme((prev) => ({ ...prev, contrast }));\n },\n [setTheme]\n );\n\n const setMonochrome = useCallback(\n (isMonochrome: boolean) => {\n setTheme((prev) => ({ ...prev, isMonochrome }));\n },\n [setTheme]\n );\n\n return {\n ...theme,\n isDarkMode,\n setMode,\n setContrast,\n setMonochrome,\n };\n}\n","import type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\n/\n Generates an array of theme mode options with translated labels.\n \n @param modeDetails - Translations for theme mode labels (`system`, `light`, `dark`).\n * @returns Array of mode items with `id` and localized `value`.\n \n @example\n * ```tsx\n * const items = modeItems({\n * heading: \"Theme Mode\",\n * system: \"System\",\n * light: \"Light\",\n * dark: \"Dark\",\n * });\n * ```\n /\nexport const modeItems = (\n modeDetails: ThemeModeTranslations\n): {\n id: ThemeMode;\n value: string;\n}[] => {\n return [\n { id: \"system\", value: modeDetails.system },\n { id: \"light\", value: modeDetails.light },\n { id: \"dark\", value: modeDetails.dark },\n ];\n};\n\n/\n Generates an array of theme contrast options with translated labels.\n \n @param contrastDetails - Translations for contrast level labels (`standard`, `medium`, `high`).\n * @returns Array of contrast items with `id` and localized `value`.\n \n @example\n * ```tsx\n * const items = contrastItems({\n * heading: \"Contrast\",\n * standard: \"Standard\",\n * medium: \"Medium\",\n * high: \"High\",\n * });\n * ```\n /\nexport const contrastItems = (\n contrastDetails: ThemeContrastTranslations\n): {\n id: ThemeContrast;\n value: string;\n}[] => {\n return [\n { id: \"standard\", value: contrastDetails.standard },\n { id: \"medium\", value: contrastDetails.medium },\n { id: \"high\", value: contrastDetails.high },\n ];\n};\n\n/\n Type guard function to check if a React Aria `Key` is a valid {@link ThemeMode}.\n \n @param value - The key to test.\n * @returns `true` if `value` is `\"system\"`, `\"light\"`, or `\"dark\"`.\n \n @example\n * ```tsx\n * if (isThemeMode(selectedKey)) {\n * setMode(selectedKey);\n * }\n * ```\n /\nexport function isThemeMode(value: Key): value is ThemeMode {\n return value === \"system\" \|\| value === \"dark\" \|\| value === \"light\";\n}\n\n/\n Type guard function to check if a React Aria `Key` is a valid {@link ThemeContrast}.\n \n @param value - The key to test.\n * @returns `true` if `value` is `\"standard\"`, `\"medium\"`, or `\"high\"`.\n \n @example\n * ```tsx\n * if (isThemeContrast(selectedKey)) {\n * setContrast(selectedKey);\n * }\n * ```\n /\nexport function isThemeContrast(value: Key): value is ThemeContrast {\n return value === \"standard\" \|\| value === \"medium\" \|\| value === \"high\";\n}\n","@layer adgytec.comps {\n .selector {\n display: grid;\n gap: var(--md-sys-layout-space-24);\n }\n\n .theme-item {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n }\n\n .theme-item-info {\n display: grid;\n }\n}\n","import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./themeSelector.module.css\";\n\n/\n Props for the {@link ThemeItem} component.\n /\nexport interface ThemeItemProps {\n /\n Section title heading text.\n /\n heading: string;\n\n /\n Optional explanatory text describing the setting.\n /\n description?: string;\n\n /\n Interactive control element(s) (e.g. connected button groups or switches) associated with the item.\n /\n children?: ReactNode;\n\n /\n Optional custom CSS class name applied to the container.\n /\n className?: string;\n\n /\n Whether to render inline `span` elements instead of block `div` elements.\n * Useful when nesting inside a label or interactive component like `Switch`.\n \n @default false\n /\n useInline?: boolean;\n}\n\n/\n Layout helper component for a single setting item within {@link ThemeSelector}.\n \n Renders a styled heading (`typography.titleMedium`), an optional description (`typography.bodyMedium`),\n * and the child controls. Supports both block rendering and inline `span` rendering.\n \n @example\n * ```tsx\n * import { ThemeItem } from \"@adgytec/web-ui-components\";\n \n export function SettingRow() {\n * return (\n * <ThemeItem\n * heading=\"Appearance\"\n * description=\"Select your preferred color mode.\"\n * >\n * <Controls />\n * </ThemeItem>\n * );\n * }\n * ```\n /\nexport const ThemeItem: React.FC<ThemeItemProps> = ({\n heading,\n description,\n children,\n className,\n useInline = false,\n}) => {\n if (useInline) {\n return (\n <span className={clsx(styles[\"theme-item\"], className)}>\n <span className={clsx(styles[\"theme-item-info\"])}>\n <span className={clsx(typography.titleMedium)} slot=\"label\">\n {heading}\n </span>\n\n {description && (\n <span\n className={clsx(typography.bodyMedium)}\n slot=\"description\"\n >\n {description}\n </span>\n )}\n </span>\n\n {children}\n </span>\n );\n }\n return (\n <div className={clsx(styles[\"theme-item\"], className)}>\n <div className={clsx(styles[\"theme-item-info\"])}>\n <h3 className={clsx(typography.titleMedium)}>{heading}</h3>\n\n {description && (\n <p className={clsx(typography.bodyMedium)}>{description}</p>\n )}\n </div>\n\n {children}\n </div>\n );\n};\n","import { type ReactNode, useLayoutEffect } from \"react\";\nimport { buildThemeString, useTheme } from \"@/utils\";\n\n/\n Props for the {@link ThemeProvider} component.\n /\nexport interface ThemeProviderProps {\n /\n Application content to be rendered inside the provider.\n /\n children?: ReactNode;\n}\n\n/\n Top-level provider component that synchronizes the application root with the current theme settings.\n \n Subscribes to the theme state via {@link useTheme} (mode, dark mode calculation,\n * contrast level, and monochrome setting) and dynamically assigns the computed theme\n * string to the `data-theme` attribute of `document.documentElement`.\n \n @example\n * ```tsx\n * import { ThemeProvider } from \"@adgytec/web-ui-components\";\n \n export function App() {\n * return (\n * <ThemeProvider>\n * <MainContent />\n * </ThemeProvider>\n * );\n * }\n * ```\n /\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {\n const { isDarkMode, isMonochrome, contrast } = useTheme();\n\n useLayoutEffect(() => {\n const themeString = buildThemeString({\n isDarkMode,\n isMonochrome,\n contrast,\n });\n document.documentElement.setAttribute(\"data-theme\", themeString);\n }, [isDarkMode, isMonochrome, contrast]);\n\n return children;\n};\n","import clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Switch } from \"../Input\";\nimport { contrastItems, isThemeContrast, isThemeMode, modeItems } from \"./core\";\nimport { ThemeItem } from \"./ThemeItem\";\nimport styles from \"./themeSelector.module.css\";\nimport type {\n ThemeContrastTranslations,\n ThemeModeTranslations,\n ThemeMonochromeTranslations,\n ThemeSelectorProps,\n} from \"./types\";\n\nconst defaultMode: ThemeModeTranslations = {\n heading: \"Theme Mode\",\n description:\n \"Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.\",\n\n system: \"System\",\n dark: \"Dark\",\n light: \"Light\",\n};\n\nconst defaultContrast: ThemeContrastTranslations = {\n heading: \"Theme Contrast\",\n description:\n \"Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.\",\n\n standard: \"Standard\",\n medium: \"Medium\",\n high: \"High\",\n};\n\nconst defaultMonochrome: ThemeMonochromeTranslations = {\n heading: \"Monochrome\",\n description:\n \"Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience.\",\n};\n\n/\n Settings UI component for managing application theme appearance.\n \n Provides user controls for:\n * - Theme Mode: Connected button group with `\"System\"`, `\"Light\"`, and `\"Dark\"` options.\n * - Theme Contrast: Connected button group with `\"Standard\"`, `\"Medium\"`, and `\"High\"` options (disabled when monochrome is active).\n * - Monochrome Mode: An interactive {@link Switch} to toggle neutral grayscale styling.\n \n Directly connects to {@link useTheme} to read and update theme settings, which are\n * persisted to local storage and applied to `document.documentElement` by {@link ThemeProvider}.\n \n @example\n * ```tsx\n * import { ThemeProvider, ThemeSelector } from \"@adgytec/web-ui-components\";\n \n export function SettingsMenu() {\n * return (\n * <ThemeProvider>\n * <ThemeSelector />\n * </ThemeProvider>\n * );\n * }\n * ```\n */\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({\n modeDetails = defaultMode,\n contrastDetails = defaultContrast,\n monochromeDetails = defaultMonochrome,\n}) => {\n const {\n mode,\n isMonochrome,\n contrast,\n setContrast,\n setMode,\n setMonochrome,\n } = useTheme();\n\n const themeModeItems = useMemo(() => modeItems(modeDetails), [modeDetails]);\n const themeContrastItems = useMemo(\n () => contrastItems(contrastDetails),\n [contrastDetails]\n );\n\n return (\n <div className={clsx(styles[\"selector\"])}>\n <ThemeItem\n heading={modeDetails.heading}\n description={modeDetails.description}\n >\n <ConnectedButtonGroup\n selectionMode=\"single\"\n selectedKeys={[mode]}\n onSelectionChange={(keys) => {\n const themeMode = Array.from(keys)[0];\n if (!isThemeMode(themeMode)) return;\n\n setMode(themeMode);\n }}\n >\n {themeModeItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <ThemeItem\n heading={contrastDetails.heading}\n description={contrastDetails.description}\n >\n <ConnectedButtonGroup\n color=\"tonal\"\n selectionMode=\"single\"\n selectedKeys={[contrast]}\n onSelectionChange={(keys) => {\n const themeContrast = Array.from(keys)[0];\n if (!isThemeContrast(themeContrast)) return;\n\n setContrast(themeContrast);\n }}\n isDisabled={isMonochrome}\n >\n {themeContrastItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <Switch\n isSelected={isMonochrome}\n onChange={setMonochrome}\n containerStateLayer\n >\n <ThemeItem\n heading={monochromeDetails.heading}\n description={monochromeDetails.description}\n useInline\n ></ThemeItem>\n </Switch>\n </div>\n );\n};\n"],"mappings":"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"}

package/dist/chunks/Toolbar.map CHANGED Viewed

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

package/dist/chunks/Tooltip.map CHANGED Viewed

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

package/dist/chunks/base.map CHANGED Viewed

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

package/dist/chunks/compiler-runtime CHANGED Viewed

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