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

package/dist/chunks/Tabs.map

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

package/dist/chunks/Tag

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

package/dist/chunks/Tag.map

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

package/dist/chunks/ThemeSelector

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

package/dist/chunks/ThemeSelector.map

@@ -1 +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":";;;;;;;;;;AA0BA,IAAac,KAAoB,EAC7B,eACA,iBACA,kBAC6B;CAC7B,IAAMC,IAAOC,IAAa,SAAS;CAUnC,OATIC,IAAqB,cAAcF,MAShC,GAAGA,IANNG,MAAa,aACP,KACAA,MAAa,WACX,qBACA;AAGhB,GChCMC,IAAqB,gCACrBC,IAAoB;AA0C1B,SAAgBC,EAAS,EACrB,sBAAmB,UACnB,qBAAkB,YAClB,kBAAe,IACf,qBAAkBD,GAClB,yBAAsB,OACR,CAAC,GAAgB;CAC/B,IAAME,IAA6BC,SACxB;EACH,MAAMC;EACN,UAAUC;EACV;CACJ,IACA;EAACD;EAAkBC;EAAiBR;CAAY,CACpD,GAEMS,IAAWC,EAAcR,GAAoB,EAAE,uBAAoB,CAAC,GACpE,CAACS,GAAOC,KAAYC,EACtBC,GACAT,GACA,EACI,uBACJ,CACJ,GAEMN,IACFY,EAAM,SAAS,UAAWA,EAAM,SAAS,YAAYF,GAEnDM,IAAUC,GACX,MAAoB;EACjB,GAAU,OAAU;GAAE,GAAGC;GAAM;EAAK,EAAE;CAC1C,GACA,CAACL,CAAQ,CACb,GAEMM,IAAcF,GACf,MAA4B;EACzB,GAAUjC,OAAU;GAAE,GAAGA;GAAM;EAAS,EAAE;CAC9C,GACA,CAAC6B,CAAQ,CACb,GAEMQ,IAAgBJ,GACjBhC,MAA0B;EACvB,GAAUD,OAAU;GAAE,GAAGA;GAAM,cAAAC;EAAa,EAAE;CAClD,GACA,CAAC4B,CAAQ,CACb;CAEA,OAAO;EACH,GAAGD;EACH;EACA;EACA;EACA;CACJ;AACJ;;;ACzFA,IAAaY,KACT,MAKO;CACH;EAAE,IAAI;EAAU,OAAOC,EAAY;CAAO;CAC1C;EAAE,IAAI;EAAS,OAAOA,EAAY;CAAM;CACxC;EAAE,IAAI;EAAQ,OAAOA,EAAY;CAAK;AAAC,GAoBlCC,KACT,MAKO;CACH;EAAE,IAAI;EAAY,OAAOC,EAAgB;CAAS;CAClD;EAAE,IAAI;EAAU,OAAOA,EAAgB;CAAO;CAC9C;EAAE,IAAI;EAAQ,OAAOA,EAAgB;CAAK;AAAC;AAiBnD,SAAgBC,EAAY,GAAgC;CACxD,OAAOC,MAAU,YAAYA,MAAU,UAAUA,MAAU;AAC/D;AAeA,SAAgBC,EAAgB,GAAoC;CAChE,OAAOD,MAAU,cAAcA,MAAU,YAAYA,MAAU;AACnE;;;;;GElCaG,KAAuC,EAChD,YACA,gBACA,aACA,cACA,eAAY,SAERC,IAEI,kBAAC,QAAD;CAAM,WAAW/C,EAAKC,EAAO,eAAe+C,CAAS;CAArD,UAAA,CACI,kBAAC,QAAD;EAAM,WAAWhD,EAAKC,EAAO,kBAAkB;EAA/C,UAAA,CACI,kBAAC,QAAD;GAAM,WAAWD,EAAKiD,EAAW,WAAW;GAAG,MAAK;GAC/C,UAAAC;EACC,CAAA,GAELC,KACG,kBAAC,QAAD;GACI,WAAWnD,EAAKiD,EAAW,UAAU;GACrC,MAAK;GAEJ,UAAAE;EACC,CAAA,CAER;CAEL,CAAA,GAAAC,CACC;KAIV,kBAAC,OAAD;CAAK,WAAWpD,EAAKC,EAAO,eAAe+C,CAAS;CAApD,UAAA,CACI,kBAAC,OAAD;EAAK,WAAWhD,EAAKC,EAAO,kBAAkB;EAA9C,UAAA,CACI,kBAAC,MAAD;GAAI,WAAWD,EAAKiD,EAAW,WAAW;GAAI,UAAAC;EAAY,CAAA,GAEzDC,KACG,kBAAC,KAAD;GAAG,WAAWnD,EAAKiD,EAAW,UAAU;GAAI,UAAAE;EAAe,CAAA,CAE9D;CAEJ,CAAA,GAAAC,CACA;aCnEAE,KAA8C,MAAA;CAAA,IAAAC,KAAA,GAAArD,EAAAA,EAAAA,CAAA,CAAA,GAAC,EAAA,gBAAAsD,GACxD,EAAA,eAAA,iBAAA,gBAA+CrC,EAAS,GAAEsC,GAAAC;CASlB,OATkBH,EAAA,OAAAvC,KAAAuC,EAAA,OAAAzC,KAAAyC,EAAA,OAAAxC,KAE1C,UAAA;EACZ,IAAA4C,IAAoB/C,EAAiB;GAAA;GAAA;GAAA;EAIrC,CAAC;EACD,SAAQ,gBAAgB,aAAc,cAAc+C,CAAW;CAAC,GACjE,IAAA;EAAC7C;EAAYC;EAAcC;CAAQ,GAAC,EAAA,KAAAA,GAAA,EAAA,KAAAF,GAAA,EAAA,KAAAC,GAAA,EAAA,KAAA0C,GAAA,EAAA,KAAAC,MAAA,IAAAH,EAAA,IAAA,IAAAA,EAAA,KAPvCK,EAAgBH,GAObC,CAAoC,GAEhCN;AAAQ,GC9BbS,IAAqC;CACvC,SAAS;CACT,aACI;CAEJ,QAAQ;CACR,MAAM;CACN,OAAO;AACX,GAEMtC,IAA6C;CAC/C,SAAS;CACT,aACI;CAEJ,UAAU;CACV,QAAQ;CACR,MAAM;AACV,GAEMuC,IAAiD;CACnD,SAAS;CACT,aACI;AACR,GA0BaC,KAA+C,EACxD,iBAAcF,GACd,qBAAkBtC,GAClB,uBAAoBuC,QAClB;CACF,IAAM,EACF,SACA,iBACA,aACA,gBACA,YACA,qBACA3C,EAAS,GAEP6C,IAAiB3C,QAAciB,EAAUC,CAAW,GAAG,CAACA,CAAW,CAAC,GACpE0B,IAAqB5C,QACjBmB,EAAcC,CAAe,GACnC,CAACA,CAAe,CACpB;CAEA,OACI,kBAAC,OAAD;EAAK,WAAWpC,EAAKC,EAAO4D,QAAW;EAAvC,UAAA;GACI,kBAACpB,GAAD;IACI,SAASP,EAAY;IACrB,aAAaA,EAAY;IAEzB,UAAA,kBAAC9B,GAAD;KACI,eAAc;KACd,cAAc,CAACI,CAAI;KACnB,oBAAoB,MAAS;MACzB,IAAMsD,IAAY,MAAM,KAAKC,CAAI,CAAC,CAAC;MACnC,AAAK1B,EAAYyB,CAAS,KAE1BrC,EAAQqC,CAAS;KACrB;KAEC,UAAAH,EAAe,KAAK,MACjB,kBAACxD,GAAD;MAA+B,IAAI6D,EAAK;MACnC,UAAAA,EAAK;KACO,GAFKA,EAAK,EAEV,CACpB;IACiB,CAAA;GACf,CAAA;GAEX,kBAACvB,GAAD;IACI,SAASL,EAAgB;IACzB,aAAaA,EAAgB;IAE7B,UAAA,kBAAChC,GAAD;KACI,OAAM;KACN,eAAc;KACd,cAAc,CAACO,CAAQ;KACvB,oBAAoBb,MAAS;MACzB,IAAMmE,IAAgB,MAAM,KAAKnE,CAAI,CAAC,CAAC;MACvC,AAAKyC,EAAgB0B,CAAa,KAElCrC,EAAYqC,CAAa;KAC7B;KACA,YAAYvD;KAEX,UAAAkD,EAAmB,KAAK7D,MACrB,kBAACI,GAAD;MAA+B,IAAIJ,EAAK;MACnCA,UAAAA,EAAK;KACO,GAFKA,EAAK,EAEV,CACpB;IACiB,CAAA;GACf,CAAA;GAEX,kBAACM,GAAD;IACI,YAAYK;IACZ,UAAUoB;IACV,qBAAA;IAEA,UAAA,kBAACW,GAAD;KACI,SAAS2B,EAAkB;KAC3B,aAAaA,EAAkB;KAC/B,WAAA;IACQ,CAAA;GACR,CAAA;EACP;;AAEb"}
+{"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","clsx","styles","_c","keys","item","clsx","styles","require_compiler_runtime","ConnectedButton","ConnectedButtonGroup","Divider","Switch","ListBox","ListIcon","ListItem","ListLabelText","ListSupportingText","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","SunMoon","Sun","Moon","contrastItems","contrastDetails","isThemeMode","value","isThemeContrast","themeSelector_module_default","ThemeItem","useInline","isDisabled","\"disabled\"","className","typography","heading","description","children","import_compiler_runtime","ThemeProvider","$","t0","t1","t2","themeString","useLayoutEffect","defaultMode","defaultMonochrome","ThemeSelector","themeModeItems","themeContrastItems","\"selector\"","showMode","buttonColor","buttonSize","themeMode","keys","item","showDividers","showContrast","showMonochrome","themeContrast","keys_0","item_0","monochromeDetails","Palette"],"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 { LucideIcon } from \"lucide-react\";\nimport { Moon, Sun, SunMoon } from \"lucide-react\";\nimport type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\n/**\n * Item representation for a theme mode option.\n */\nexport interface ThemeModeItem {\n    id: ThemeMode;\n    value: string;\n    icon: LucideIcon;\n}\n\n/**\n * Item representation for a theme contrast option.\n */\nexport interface ThemeContrastItem {\n    id: ThemeContrast;\n    value: string;\n}\n\n/**\n * Generates an array of theme mode options with translated labels and icons.\n *\n * @param modeDetails - Translations for theme mode labels (`system`, `light`, `dark`).\n * @returns Array of mode items with `id`, localized `value`, and `icon`.\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): ThemeModeItem[] => {\n    return [\n        { id: \"system\", value: modeDetails.system, icon: SunMoon },\n        { id: \"light\", value: modeDetails.light, icon: Sun },\n        { id: \"dark\", value: modeDetails.dark, icon: Moon },\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): ThemeContrastItem[] => {\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\"`, `\"dark\"`, or `\"light\"`.\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.overrides {\n    .selector {\n        --md-list-item-background: var(--md-sys-color-surface-container);\n    }\n}\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-12);\n\n        transition: opacity 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    .theme-item[data-disabled=\"true\"],\n    .theme-item.disabled {\n        opacity: var(--md-sys-state-disabled-content);\n    }\n\n    .theme-item-info {\n        display: grid;\n        gap: var(--md-sys-layout-space-4);\n    }\n\n    .theme-item-heading {\n        color: var(--md-sys-color-on-surface);\n    }\n\n    .theme-item-description {\n        color: var(--md-sys-color-on-surface-variant);\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     * Whether the setting item is disabled (visually dimmed and non-interactive).\n     *\n     * @default false\n     */\n    isDisabled?: 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, as well as disabled styling.\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    isDisabled = false,\n}) => {\n    if (useInline) {\n        return (\n            <span\n                className={clsx(\n                    styles[\"theme-item\"],\n                    isDisabled && styles[\"disabled\"],\n                    className\n                )}\n                data-disabled={isDisabled || undefined}\n            >\n                <span className={clsx(styles[\"theme-item-info\"])}>\n                    <span\n                        className={clsx(\n                            typography.titleMedium,\n                            styles[\"theme-item-heading\"]\n                        )}\n                        slot=\"label\"\n                    >\n                        {heading}\n                    </span>\n\n                    {description && (\n                        <span\n                            className={clsx(\n                                typography.bodyMedium,\n                                styles[\"theme-item-description\"]\n                            )}\n                            slot=\"description\"\n                        >\n                            {description}\n                        </span>\n                    )}\n                </span>\n\n                {children}\n            </span>\n        );\n    }\n\n    return (\n        <div\n            className={clsx(\n                styles[\"theme-item\"],\n                isDisabled && styles[\"disabled\"],\n                className\n            )}\n            data-disabled={isDisabled || undefined}\n        >\n            <div className={clsx(styles[\"theme-item-info\"])}>\n                <h3\n                    className={clsx(\n                        typography.titleMedium,\n                        styles[\"theme-item-heading\"]\n                    )}\n                >\n                    {heading}\n                </h3>\n\n                {description && (\n                    <p\n                        className={clsx(\n                            typography.bodyMedium,\n                            styles[\"theme-item-description\"]\n                        )}\n                    >\n                        {description}\n                    </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 { Palette } from \"lucide-react\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Divider } from \"../Divider\";\nimport { Switch } from \"../Input\";\nimport {\n    ListBox,\n    ListIcon,\n    ListItem,\n    ListLabelText,\n    ListSupportingText,\n} from \"../List\";\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, featuring dedicated icons.\n * - **Theme Contrast**: Connected button group with `\"Standard\"`, `\"Medium\"`, and `\"High\"` options (disabled when monochrome is active).\n * - **Monochrome Mode**: An interactive {@link ListItem} with {@link Switch} and {@link ListIcon} 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    className,\n    buttonColor = \"tonal\",\n    buttonSize = \"small\",\n    showMode = true,\n    showContrast = true,\n    showMonochrome = true,\n    showDividers = false,\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\"], className)}>\n            {showMode && (\n                <ThemeItem\n                    heading={modeDetails.heading}\n                    description={modeDetails.description}\n                >\n                    <ConnectedButtonGroup\n                        color={buttonColor}\n                        size={buttonSize}\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\n                                key={item.id}\n                                id={item.id}\n                                icon={item.icon}\n                            >\n                                {item.value}\n                            </ConnectedButton>\n                        ))}\n                    </ConnectedButtonGroup>\n                </ThemeItem>\n            )}\n\n            {showDividers && showMode && (showContrast || showMonochrome) && (\n                <Divider />\n            )}\n\n            {showContrast && (\n                <ThemeItem\n                    heading={contrastDetails.heading}\n                    description={contrastDetails.description}\n                    isDisabled={isMonochrome}\n                >\n                    <ConnectedButtonGroup\n                        color={buttonColor}\n                        size={buttonSize}\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\n            {showDividers && showContrast && showMonochrome && <Divider />}\n\n            {showMonochrome && (\n                <ListBox aria-label={monochromeDetails.heading}>\n                    <ListItem\n                        onAction={() => setMonochrome(!isMonochrome)}\n                        leading={<ListIcon icon={Palette} />}\n                        label={\n                            <ListLabelText>\n                                {monochromeDetails.heading}\n                            </ListLabelText>\n                        }\n                        supporting={\n                            <ListSupportingText>\n                                {monochromeDetails.description}\n                            </ListSupportingText>\n                        }\n                        trailing={[\n                            <Switch\n                                key=\"selection\"\n                                isSelected={isMonochrome}\n                                onChange={setMonochrome}\n                                aria-label={monochromeDetails.heading}\n                            />,\n                        ]}\n                    />\n                </ListBox>\n            )}\n        </div>\n    );\n};\n"],"mappings":"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"}

package/dist/chunks/Toolbar

@@ -21,7 +21,6 @@ import '../assets/Toolbar.css';var a = {
 		...c
 	}), i[5] = c, i[6] = l, i[7] = u) : u = i[7], u;
 };
-//#endregion
 export { o as n, c as t };
 
 //# sourceMappingURL=Toolbar.map

package/dist/chunks/Toolbar.map

@@ -1 +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"}
+{"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":";;;;;;;A,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,G,SC/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

@@ -8,7 +8,6 @@ import '../assets/Tooltip.css';var i = { tooltip: "_tooltip_t0b77_9" }, a = ({ c
 	...s,
 	"data-tooltip": !0
 });
-//#endregion
 export { a as t };
 
 //# sourceMappingURL=Tooltip.map