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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (772) hide show

package/dist/chunks/ThemeSelector.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","keys","item"],"sources":["../../src/utils/theme/build.ts","../../src/utils/theme/useTheme.ts","../../src/components/ThemeSelector/ThemeProvider.tsx","../../src/components/ThemeSelector/core.ts","../../src/components/ThemeSelector/themeSelector.module.css","../../src/components/ThemeSelector/ThemeItem.tsx","../../src/components/ThemeSelector/ThemeSelector.tsx"],"sourcesContent":["import type { ThemeBuildOptions } from \"./types\";\n\nexport const buildThemeString = ({\n isDarkMode,\n isMonochrome,\n contrast,\n}: ThemeBuildOptions) => {\n const mode = isDarkMode ? \"dark\" : \"light\";\n if (isMonochrome) return `monochrome-${mode}`;\n\n const contrastSuffix =\n contrast === \"standard\"\n ? \"\"\n : contrast === \"medium\"\n ? \"-medium-contrast\"\n : \"-high-contrast\";\n\n return `${mode}${contrastSuffix}`;\n};\n","import { useLocalStorage, useMediaQuery } from \"usehooks-ts\";\nimport type {\n ThemeContrast,\n ThemeMode,\n ThemeOptions,\n ThemeReturn,\n ThemeStorage,\n} from \"./types\";\n\nconst COLOR_SCHEME_QUERY = \"(prefers-color-scheme: dark)\";\nconst LOCAL_STORAGE_KEY = \"application-theme\";\n\nexport function useTheme({\n defaultThemeMode = \"system\",\n defaultContrast = \"standard\",\n isMonochrome = false,\n localStorageKey = LOCAL_STORAGE_KEY,\n initializeWithValue = true,\n}: ThemeOptions = {}): ThemeReturn {\n const defaultValue: ThemeStorage = {\n mode: defaultThemeMode,\n contrast: defaultContrast,\n isMonochrome,\n };\n\n const isDarkOS = useMediaQuery(COLOR_SCHEME_QUERY, { initializeWithValue });\n const [theme, setTheme] = useLocalStorage<ThemeStorage>(\n localStorageKey,\n defaultValue,\n {\n initializeWithValue,\n }\n );\n\n const isDarkMode =\n theme.mode === \"dark\" \|\| (theme.mode === \"system\" && isDarkOS);\n\n const setMode = (mode: ThemeMode) => {\n setTheme((prev) => ({ ...prev, mode }));\n };\n\n const setContrast = (contrast: ThemeContrast) => {\n setTheme((prev) => ({ ...prev, contrast }));\n };\n\n const setMonochrome = (isMonochrome: boolean) => {\n setTheme((prev) => ({ ...prev, isMonochrome }));\n };\n\n return {\n ...theme,\n isDarkMode,\n setMode,\n setContrast,\n setMonochrome,\n };\n}\n","import { type ReactNode, useLayoutEffect } from \"react\";\nimport { buildThemeString, useTheme } from \"@/utils\";\n\nexport const ThemeProvider = ({ children }: { children?: ReactNode }) => {\n const { isDarkMode, isMonochrome, contrast } = useTheme();\n\n useLayoutEffect(() => {\n const themeString = buildThemeString({\n isDarkMode,\n isMonochrome,\n contrast,\n });\n document.documentElement.setAttribute(\"data-theme\", themeString);\n }, [isDarkMode, isMonochrome, contrast]);\n\n return children;\n};\n","import type { Key } from \"react-aria-components\";\nimport type { ThemeContrast, ThemeMode } from \"@/utils\";\nimport type { ThemeContrastTranslations, ThemeModeTranslations } from \"./types\";\n\nexport const modeItems = (\n modeDetails: ThemeModeTranslations\n): {\n id: ThemeMode;\n value: string;\n}[] => {\n return [\n { id: \"system\", value: modeDetails.system },\n { id: \"light\", value: modeDetails.light },\n { id: \"dark\", value: modeDetails.dark },\n ];\n};\n\nexport const contrastItems = (\n contrastDetails: ThemeContrastTranslations\n): {\n id: ThemeContrast;\n value: string;\n}[] => {\n return [\n { id: \"standard\", value: contrastDetails.standard },\n { id: \"medium\", value: contrastDetails.medium },\n { id: \"high\", value: contrastDetails.high },\n ];\n};\n\nexport function isThemeMode(value: Key): value is ThemeMode {\n return value === \"system\" \|\| value === \"dark\" \|\| value === \"light\";\n}\n\nexport function isThemeContrast(value: Key): value is ThemeContrast {\n return value === \"standard\" \|\| value === \"medium\" \|\| value === \"high\";\n}\n","@layer adgytec.comps {\n .selector {\n display: grid;\n gap: var(--md-sys-layout-space-24);\n }\n\n .theme-item {\n display: grid;\n gap: var(--md-sys-layout-space-16);\n }\n\n .theme-item-info {\n display: grid;\n }\n}\n","import clsx from \"clsx\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./themeSelector.module.css\";\n\nexport const ThemeItem = ({\n heading,\n description,\n children,\n className,\n useInline = false,\n}: {\n heading: string;\n description?: string;\n children?: ReactNode;\n className?: string;\n useInline?: boolean;\n}) => {\n if (useInline) {\n return (\n <span className={clsx(styles[\"theme-item\"], className)}>\n <span className={clsx(styles[\"theme-item-info\"])}>\n <span className={clsx(typography.titleMedium)} slot=\"label\">\n {heading}\n </span>\n\n {description && (\n <span\n className={clsx(typography.bodyMedium)}\n slot=\"description\"\n >\n {description}\n </span>\n )}\n </span>\n\n {children}\n </span>\n );\n }\n return (\n <div className={clsx(styles[\"theme-item\"], className)}>\n <div className={clsx(styles[\"theme-item-info\"])}>\n <h3 className={clsx(typography.titleMedium)}>{heading}</h3>\n\n {description && (\n <p className={clsx(typography.bodyMedium)}>{description}</p>\n )}\n </div>\n\n {children}\n </div>\n );\n};\n","import clsx from \"clsx\";\nimport { useMemo } from \"react\";\nimport { useTheme } from \"@/utils\";\nimport { ConnectedButton, ConnectedButtonGroup } from \"../Button\";\nimport { Switch } from \"../Input\";\nimport { contrastItems, isThemeContrast, isThemeMode, modeItems } from \"./core\";\nimport { ThemeItem } from \"./ThemeItem\";\nimport styles from \"./themeSelector.module.css\";\nimport type {\n ThemeContrastTranslations,\n ThemeModeTranslations,\n ThemeMonochromeTranslations,\n ThemeSelectorProps,\n} from \"./types\";\n\nconst defaultMode: ThemeModeTranslations = {\n heading: \"Theme Mode\",\n description:\n \"Choose how the interface appearance is displayed across the app. You can follow your system settings or manually use light or dark mode.\",\n\n system: \"System\",\n dark: \"Dark\",\n light: \"Light\",\n};\n\nconst defaultContrast: ThemeContrastTranslations = {\n heading: \"Theme Contrast\",\n description:\n \"Adjust the interface contrast level to improve visibility and readability based on your visual preference and viewing environment.\",\n\n standard: \"Standard\",\n medium: \"Medium\",\n high: \"High\",\n};\n\nconst defaultMonochrome: ThemeMonochromeTranslations = {\n heading: \"Monochrome\",\n description:\n \"Use a monochrome appearance with neutral tones instead of the default colorful theme. This can provide a cleaner and more focused visual experience.\",\n};\n\nexport const ThemeSelector: React.FC<ThemeSelectorProps> = ({\n modeDetails = defaultMode,\n contrastDetails = defaultContrast,\n monochromeDetails = defaultMonochrome,\n}) => {\n const {\n mode,\n isMonochrome,\n contrast,\n setContrast,\n setMode,\n setMonochrome,\n } = useTheme();\n\n const themeModeItems = useMemo(() => modeItems(modeDetails), [modeDetails]);\n const themeContrastItems = useMemo(\n () => contrastItems(contrastDetails),\n [contrastDetails]\n );\n\n return (\n <div className={clsx(styles[\"selector\"])}>\n <ThemeItem\n heading={modeDetails.heading}\n description={modeDetails.description}\n >\n <ConnectedButtonGroup\n selectionMode=\"single\"\n selectedKeys={[mode]}\n onSelectionChange={(keys) => {\n const themeMode = Array.from(keys)[0];\n if (!isThemeMode(themeMode)) return;\n\n setMode(themeMode);\n }}\n >\n {themeModeItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <ThemeItem\n heading={contrastDetails.heading}\n description={contrastDetails.description}\n >\n <ConnectedButtonGroup\n color=\"tonal\"\n selectionMode=\"single\"\n selectedKeys={[contrast]}\n onSelectionChange={(keys) => {\n const themeContrast = Array.from(keys)[0];\n if (!isThemeContrast(themeContrast)) return;\n\n setContrast(themeContrast);\n }}\n isDisabled={isMonochrome}\n >\n {themeContrastItems.map((item) => (\n <ConnectedButton key={item.id} id={item.id}>\n {item.value}\n </ConnectedButton>\n ))}\n </ConnectedButtonGroup>\n </ThemeItem>\n\n <Switch\n isSelected={isMonochrome}\n onChange={setMonochrome}\n containerStateLayer\n >\n <ThemeItem\n heading={monochromeDetails.heading}\n description={monochromeDetails.description}\n useInline\n ></ThemeItem>\n </Switch>\n </div>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"ThemeSelector","names":["prev","isMonochrome","clsx","styles","_c","keys","item","clsx","styles","require_compiler_runtime","ConnectedButton","ConnectedButtonGroup","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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

@@ -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

package/dist/chunks/Tooltip.map CHANGED Viewed

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

package/dist/chunks/base CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region src/utils/typography/base.ts
+// src/utils/typography/base.ts
 var e = {
 	displayLarge: "typography-display-large",
 	displayLargeEmphasized: "typography-display-large-emphasized",
@@ -31,7 +31,6 @@ var e = {
 	labelSmall: "typography-label-small",
 	labelSmallEmphasized: "typography-label-small-emphasized"
 };
-//#endregion
 export { e as t };
 //# sourceMappingURL=base.map

package/dist/chunks/base.map CHANGED Viewed

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

package/dist/chunks/compiler-runtime CHANGED Viewed

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

package/dist/chunks/compiler-runtime.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"compiler-runtime","names":[],"sources":["../../builtin:esm-external-require-react","../../node_modules/react/cjs/react-compiler-runtime.production.js","../../node_modules/react/cjs/react-compiler-runtime.development.js","../../node_modules/react/compiler-runtime.js"],"sourcesContent":["import * as m from 'react';module.exports = { ...m };","/*\n @license React\n * react-compiler-runtime.production.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\nvar ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\nexports.c = function (size) {\n return ReactSharedInternals.H.useMemoCache(size);\n};\n","/\n @license React\n * react-compiler-runtime.development.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n var ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\n exports.c = function (size) {\n var dispatcher = ReactSharedInternals.H;\n null === dispatcher &&\n console.error(\n \"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\\n1. You might have mismatching versions of React and the renderer (such as React DOM)\\n2. You might be breaking the Rules of Hooks\\n3. You might have more than one copy of React in the same app\\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.\"\n );\n return dispatcher.useMemoCache(size);\n };\n })();\n","/\n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-compiler-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-compiler-runtime.development.js');\n}\n"],"~~x_google_ignoreList~~":[1,2,3],"mappings":";;;CAA2B,EAAO,UAAU,~~EAAE~~,GAAG,EAAE;;~~CCWnD~~,~~IAAI~~,~~IAAA~~,EAAA,CAAA,CACe;CACnB,EAAQ,IAAI,SAAU,GAAM;EAC1B,~~OAAO~~,EAAqB,EAAE,~~aAAa~~,CAAI;CACjD;;CCJA,AAAA,QAAA,IAAA,aAAA,iBACG,WAAY;EACX,~~IAAI~~,~~IAAA~~,EAAA,CAAA,CACe;EACnB,EAAQ,IAAI,SAAU,GAAM;GAC1B,~~IAAI~~,~~IAAa~~,EAAqB;GAKtC,~~OAJS~~,MAAT,QACE,QAAQ,MACN,+aACF,~~GACK~~,EAAW,~~aAAa~~,CAAI;EACrC;CACF,EAAA,CAAG;;CCdL,~~AAAA~~,QAAA,IAAA,aAA6B,~~eAC3B~~,~~EAAO,UAAA,~~EAAA,~~IAEP~~,~~EAAO,UAAA,~~EAAA"}
1	+ {"version":3,"file":"compiler-runtime","names":["m","__commonJSMin","mod","cb","require_builtin_esm_external_require_react","require_react_compiler_runtime_production","ReactSharedInternals","size","require_react_compiler_runtime_development","dispatcher","require_compiler_runtime","module"],"sources":["../../builtin:esm-external-require-react","../../node_modules/react/cjs/react-compiler-runtime.production.js","../../node_modules/react/cjs/react-compiler-runtime.development.js","../../node_modules/react/compiler-runtime.js"],"sourcesContent":["import * as m from 'react';module.exports = Object.prototype.hasOwnProperty.call(m, 'module.exports') ? m['module.exports'] : { ...m };","/*\n @license React\n * react-compiler-runtime.production.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\nvar ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\nexports.c = function (size) {\n return ReactSharedInternals.H.useMemoCache(size);\n};\n","/\n @license React\n * react-compiler-runtime.development.js\n \n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n /\n\n\"use strict\";\n\"production\" !== process.env.NODE_ENV &&\n (function () {\n var ReactSharedInternals =\n require(\"react\").__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE;\n exports.c = function (size) {\n var dispatcher = ReactSharedInternals.H;\n null === dispatcher &&\n console.error(\n \"Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:\\n1. You might have mismatching versions of React and the renderer (such as React DOM)\\n2. You might be breaking the Rules of Hooks\\n3. You might have more than one copy of React in the same app\\nSee https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.\"\n );\n return dispatcher.useMemoCache(size);\n };\n })();\n","/\n Copyright (c) Meta Platforms, Inc. and affiliates.\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n'use strict';\n\nif (process.env.NODE_ENV === 'production') {\n module.exports = require('./cjs/react-compiler-runtime.production.js');\n} else {\n module.exports = require('./cjs/react-compiler-runtime.development.js');\n}\n"],"ignoreList":[1,2,3],"mappings":";;;CAA2B,EAAO,UAAU,OAAO,UAAU,eAAe,KAAKA,GAAG,gBAAgB,IAAIA,EAAE,oBAAoB,EAAE,GAAGA,EAAE;;CCWrI,IAAIM,IAAAF,EAAA,CAAA,CACe;CACnB,EAAQ,IAAI,SAAU,GAAM;EAC1B,OAAOE,EAAqB,EAAE,aAAaC,CAAI;CACjD;;CCJA,AAAA,QAAA,IAAA,aAAA,iBACG,WAAY;EACX,IAAID,IAAAF,EAAA,CAAA,CACe;EACnB,EAAQ,IAAI,SAAU,GAAM;GAC1B,IAAIK,IAAaH,EAAqB;GAKtC,OAJSG,MAAT,QACE,QAAQ,MACN,+aACF,GACKA,EAAW,aAAaF,CAAI;EACrC;CACF,EAAA,CAAG;;CCdL,AAGEI,EAAO,UAHT,QAAA,IAAA,aAA6B,eACpBN,EAAA,IAEAG,EAAA"}

package/dist/chunks/context CHANGED Viewed

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

package/dist/chunks/context.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context","names":[],"sources":["../../src/components/Input/Select/ComboBox/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ComboBoxRenderProps } from \"react-aria-components\";\n\nexport const ComboboxContext = createContext<Partial<ComboBoxRenderProps>>({});\n"],"mappings":";;~~AAGA~~,~~IAAa~~,~~IAAkB~~,EAA4C,CAAC,CAAC"}
1	+ {"version":3,"file":"context","names":["ComboboxContext","createContext"],"sources":["../../src/components/Input/Select/ComboBox/context.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport type { ComboBoxRenderProps } from \"react-aria-components\";\n\n/*\n Context communicating ComboBox state (e.g. `isOpen`, `isInvalid`, `isDisabled`) down to {@link ComboBoxTrigger}.\n */\nexport const ComboboxContext = createContext<Partial<ComboBoxRenderProps>>({});\n"],"mappings":";;AAMA,IAAaA,IAAkBC,EAA4C,CAAC,CAAC"}

package/dist/chunks/core CHANGED Viewed

@@ -9,7 +9,7 @@ import { TooltipTrigger as l } from "../components/Tooltip/TooltipTrigger/index.
 import u from "clsx";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 import { ToggleButton as p } from "react-aria-components";
-import '../assets/core2.css';//#region src/components/Button/core/button.module.css
+import '../assets/core2.css';// src/components/Button/core/button.module.css
 var m = {
 	"button-reset": "_button-reset_1kbv0_2",
 	"button-core": "_button-core_1kbv0_17"
@@ -55,51 +55,52 @@ var v = {
 	large: n.headlineSmall,
 	"extra-large": n.headlineLarge
 }, T = (e) => x[e], E = x.size, D = { button: "_button_4jeo2_2" }, O = e(), k = (e) => {
-	let n = (0, O.c)(23), o, c, l, m, _, v;
-	n[0] === e ? (o = n[1], c = n[2], l = n[3], m = n[4], _ = n[5], v = n[6]) : ({icon: c, selectedIcon: v, children: o, onPress: m, iconPlacement: l, ..._} = e, n[0] = e, n[1] = o, n[2] = c, n[3] = l, n[4] = m, n[5] = _, n[6] = v);
-	let { shape: x, size: C, color: T, iconPlacement: E } = s(), k = l ?? E ?? "start", { splashInfo: A, handlePress: j } = a(m), M = typeof o == "function", N;
-	n[7] === T ? N = n[8] : (N = u(h, t, y(T)), n[7] = T, n[8] = N);
-	let P;
-	n[9] !== k || n[10] !== o || n[11] !== c || n[12] !== M || n[13] !== v || n[14] !== x || n[15] !== C || n[16] !== A ? (P = (e) => {
-		let { isSelected: t, isDisabled: n, isFocusVisible: a, isFocused: s, isPressed: l, isHovered: p } = e, m = {
+	let n = (0, O.c)(29), o, c, l, m, _, v, x, C;
+	n[0] === e ? (o = n[1], c = n[2], l = n[3], m = n[4], _ = n[5], v = n[6], x = n[7], C = n[8]) : ({icon: l, selectedIcon: x, children: o, onPress: _, iconPlacement: m, tooltip: C, className: c, ...v} = e, n[0] = e, n[1] = o, n[2] = c, n[3] = l, n[4] = m, n[5] = _, n[6] = v, n[7] = x, n[8] = C);
+	let { shape: T, size: E, color: k, iconPlacement: A } = s(), M = m ?? A ?? "start", { splashInfo: N, handlePress: P } = a(_), F = typeof o == "function", I;
+	n[9] !== c || n[10] !== k ? (I = (e) => u(h, t, y(k), typeof c == "function" ? c(e) : c), n[9] = c, n[10] = k, n[11] = I) : I = n[11];
+	let L;
+	n[12] !== M || n[13] !== o || n[14] !== l || n[15] !== F || n[16] !== x || n[17] !== T || n[18] !== E || n[19] !== N ? (L = (e) => {
+		let { isSelected: t, isDisabled: n, isFocusVisible: a, isFocused: s, isPressed: c, isHovered: p } = e, m = {
 			"data-hovered": p || void 0,
 			"data-disabled": n || void 0,
 			"data-focused": s || void 0,
 			"data-focus-visible": a || void 0,
-			"data-pressed": l || void 0,
+			"data-pressed": c || void 0,
 			"data-selected": t || void 0,
 			"data-toggle-button": !0,
-			"data-shape": x,
+			"data-shape": T,
 			"data-visual-button": !0
-		}, h = c;
-		t && v && (h = v);
-		let _ = S[C], y = h && /* @__PURE__ */ d(r, {
+		}, h = l;
+		t && x && (h = x);
+		let _ = S[E], v = h && /* @__PURE__ */ d(r, {
 			icon: h,
 			size: _
 		});
 		return /* @__PURE__ */ f("span", {
 			...m,
-			className: u(g, b, w[C], D.button),
+			className: u(g, b, w[E], D.button),
 			children: [
-				A && /* @__PURE__ */ d(i, { ...A }),
-				k === "start" && y,
-				M ? o(e) : o,
-				k === "end" && y
+				N && /* @__PURE__ */ d(i, { ...N }),
+				M === "start" && v,
+				F ? o(e) : o,
+				M === "end" && v
 			]
 		});
-	}, n[9] = k, n[10] = o, n[11] = c, n[12] = M, n[13] = v, n[14] = x, n[15] = C, n[16] = A, n[17] = P) : P = n[17];
-	let F;
-	return n[18] !== j || n[19] !== _ || n[20] !== N || n[21] !== P ? (F = /* @__PURE__ */ d(p, {
-		onPress: j,
-		className: N,
-		..._,
+	}, n[12] = M, n[13] = o, n[14] = l, n[15] = F, n[16] = x, n[17] = T, n[18] = E, n[19] = N, n[20] = L) : L = n[20];
+	let R;
+	n[21] !== P || n[22] !== v || n[23] !== I || n[24] !== L ? (R = /* @__PURE__ */ d(p, {
+		onPress: P,
+		className: I,
+		...v,
 		"data-connected-button": !0,
 		"data-button": !0,
-		children: P
-	}), n[18] = j, n[19] = _, n[20] = N, n[21] = P, n[22] = F) : F = n[22], F;
+		children: L
+	}), n[21] = P, n[22] = v, n[23] = I, n[24] = L, n[25] = R) : R = n[25];
+	let z;
+	return n[26] !== R || n[27] !== C ? (z = j(R, C), n[26] = R, n[27] = C, n[28] = z) : z = n[28], z;
 };
-//#endregion
-//#region src/components/Button/core/useButtonConfig.ts
+// src/components/Button/core/useButtonConfig.ts
 function A(e) {
 	let t = (0, O.c)(5), { size: n, shape: r, color: i, iconPlacement: a } = e, { size: s, shape: c, color: l, iconPlacement: u } = o(), d = n ?? s ?? "small", f = r ?? c ?? "round", p = i ?? l ?? "filled", m = a ?? u ?? "start", h;
 	return t[0] !== p || t[1] !== m || t[2] !== f || t[3] !== d ? (h = {
@@ -109,10 +110,8 @@ function A(e) {
 		buttonIconPlacement: m
 	}, t[0] = p, t[1] = m, t[2] = f, t[3] = d, t[4] = h) : h = t[4], h;
 }
-//#endregion
-//#region src/components/Button/core/withTooltip.tsx
+// src/components/Button/core/withTooltip.tsx
 var j = (e, t) => t ? /* @__PURE__ */ f(l, { children: [e, /* @__PURE__ */ d(c, { children: t })] }) : e;
-//#endregion
 export { w as a, T as c, g as d, h as f, S as i, b as l, A as n, E as o, _ as p, k as r, C as s, j as t, y as u };
 //# sourceMappingURL=core.map

package/dist/chunks/core.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"core","names":["iconToRender","iconSize","handlePress"],"sources":["../../src/components/Button/core/button.module.css","../../src/components/Button/core/button.ts","../../src/components/Button/core/color.module.css","../../src/components/Button/core/color.ts","../../src/components/Button/core/size.module.css","../../src/components/Button/core/sizes.ts","../../src/components/Button/ButtonGroups/ConnectedButton/connectedButton.module.css","../../src/components/Button/ButtonGroups/ConnectedButton/ConnectedButton.tsx","../../src/components/Button/core/useButtonConfig.ts","../../src/components/Button/core/withTooltip.tsx"],"sourcesContent":["@layer adgytec.comps {\n .button-reset {\n all: unset;\n cursor: pointer;\n position: relative;\n text-align: center;\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-pending] {\n cursor: default;\n }\n }\n\n .button-core {\n position: relative;\n overflow: clip;\n\n --_md-button-shape-motion: var(--md-sys-motion-expressive-fast-spatial);\n --_md-button-shape-motion-duration: var(\n --md-sys-motion-expressive-fast-spatial-duration\n );\n\n transition:\n border-radius var(--_md-button-shape-motion)\n var(--_md-button-shape-motion-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n box-shadow var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n padding var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n}\n","import type { LucideIcon } from \"lucide-react\";\nimport styles from \"./button.module.css\";\nimport type { AllButtonColor, ButtonColor, IconButtonColor } from \"./color\";\nimport type { ButtonShape } from \"./shape\";\nimport type { ButtonSize } from \"./sizes\";\nimport type { IconButtonWidth } from \"./width\";\n\nexport type ButtonIconPlacement = \"start\" \| \"end\";\n\nexport interface ButtonBaseProps {\n color?: ButtonColor;\n size?: ButtonSize;\n shape?: ButtonShape;\n tooltip?: string;\n icon?: LucideIcon;\n iconPlacement?: ButtonIconPlacement;\n}\n\nexport interface IconButtonBaseProps {\n color?: IconButtonColor;\n size?: ButtonSize;\n shape?: ButtonShape;\n width?: IconButtonWidth;\n tooltip?: string;\n icon: LucideIcon;\n}\n\nexport const ButtonReset = styles[\"button-reset\"];\nexport const ButtonCore = styles[\"button-core\"];\n\nexport function newButtonBaseDataAttrs({\n shape,\n size,\n color,\n}: {\n shape: ButtonShape;\n color: AllButtonColor;\n size: ButtonSize;\n}) {\n return {\n \"data-shape\": shape,\n \"data-size\": size,\n \"data-color\": color,\n };\n}\n","/* configurable tokens\n\n --md-button-background\n* --md-toggle-button-selected-background\n* --md-toggle-button-background\n\n --md-button-outline-color\n* --md-toggle-button-selected-outline-color\n* --md-toggle-button-outline-color\n\n --md-button-color\n* --md-toggle-button-selected-color\n* --md-toggle-button-color\n\n configurable tokens end /\n\n@layer adgytec.overrides {\n .outlined {\n --_md-button-padding-block: calc(\n var(--_md-button-padding-block-base) -\n var(--_md-button-outline-width, 0)\n );\n\n --_md-button-padding-inline: calc(\n var(--_md-button-padding-inline-base) -\n var(--_md-button-outline-width, 0)\n );\n\n --_md-split-button-padding-inline-start: calc(\n var(--_md-split-button-padding-inline-start-base) -\n var(--_md-button-outline-width, 0)\n );\n\n --_md-split-button-padding-inline-end: calc(\n var(--_md-split-button-padding-inline-end-base) -\n var(--_md-button-outline-width, 0)\n );\n }\n}\n\n@layer adgytec.comps {\n .color {\n --_md-button-background: var(\n --md-button-background,\n var(--_md-button-background-default)\n );\n --_md-toggle-button-selected-background: var(\n --md-toggle-button-selected-background,\n var(--_md-toggle-button-selected-background-default)\n );\n --_md-toggle-button-background: var(\n --md-toggle-button-background,\n var(--_md-toggle-button-background-default)\n );\n\n --_md-button-color: var(\n --md-button-color,\n var(--_md-button-color-default)\n );\n --_md-toggle-button-selected-color: var(\n --md-toggle-button-selected-color,\n var(--_md-toggle-button-selected-color-default)\n );\n --_md-toggle-button-color: var(\n --md-toggle-button-color,\n var(--_md-toggle-button-color-default)\n );\n\n --_md-button-outline-color: var(\n --md-button-outline-color,\n var(--_md-button-outline-color-default)\n );\n --_md-toggle-button-outline-color: var(\n --md-toggle-button-outline-color,\n var(--_md-toggle-button-outline-color-default)\n );\n --_md-toggle-button-selected-outline-color: var(\n --md-toggle-button-selected-outline-color,\n var(--_md-toggle-button-selected-outline-color-default)\n );\n\n --_outline-color: var(--_md-button-outline-color, transparent);\n\n / state layer /\n --_md-button-state-layer: var(--_md-button-color, transparent);\n --_md-toggle-button-state-layer: var(\n --_md-toggle-button-color,\n transparent\n );\n --_md-toggle-button-selected-state-layer: var(\n --_md-toggle-button-selected-color,\n transparent\n );\n\n --_state-color: var(--_md-button-state-layer);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / variable to use /\n --_background-color: var(--_md-button-background, transparent);\n --_color: var(--_md-button-color, transparent);\n\n / styles /\n background-color: var(--_background-color);\n color: var(--_color);\n\n &[data-toggle-button] {\n --_background-color: var(\n --_md-toggle-button-background,\n transparent\n );\n --_color: var(--_md-toggle-button-color, transparent);\n --_outline-color: var(\n --_md-toggle-button-outline-color,\n transparent\n );\n\n --_state-color: var(--_md-toggle-button-state-layer);\n }\n\n &[data-selected] {\n --_background-color: var(\n --_md-toggle-button-selected-background,\n transparent\n );\n --_color: var(--_md-toggle-button-selected-color, transparent);\n --_outline-color: var(\n --_md-toggle-button-selected-outline-color,\n transparent\n );\n\n --_state-color: var(--_md-toggle-button-selected-state-layer);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n --_background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n\n / state layer /\n .color::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / focus indicator /\n .color[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n\n z-index: 1;\n }\n\n .filled {\n /* background /\n --_md-button-background-default: var(--md-sys-color-primary);\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-primary\n );\n --_md-toggle-button-background-default: var(\n --md-sys-color-surface-container\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-primary);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-on-primary\n );\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n }\n\n .tonal {\n / background /\n --_md-button-background-default: var(\n --md-sys-color-secondary-container\n );\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-secondary\n );\n --_md-toggle-button-background-default: var(\n --md-sys-color-secondary-container\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-secondary-container);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-on-secondary\n );\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-secondary-container\n );\n }\n\n .outlined {\n / outline /\n --_md-button-outline-color-default: var(--md-sys-color-outline-variant);\n --_md-toggle-button-outline-color-default: var(\n --md-sys-color-outline-variant\n );\n\n / background /\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-inverse-surface\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-surface-variant);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-inverse-on-surface\n );\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n [data-visual-button] {\n / styles limited to outlined color /\n border-width: var(--_md-button-outline-width);\n border-style: solid;\n border-color: var(--_outline-color);\n }\n }\n\n / no toggle button states are there /\n .text {\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-primary);\n }\n\n .standard {\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-surface-variant);\n --_md-toggle-button-selected-color-default: var(--md-sys-color-primary);\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n &[data-disabled] {\n --_background-color: transparent;\n }\n }\n\n .elevated {\n / background /\n --_md-button-background-default: var(\n --md-sys-color-surface-container-low\n );\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-primary\n );\n --_md-toggle-button-background-default: var(\n --md-sys-color-surface-container-low\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-primary);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-on-primary\n );\n --_md-toggle-button-color-default: var(--md-sys-color-primary);\n\n [data-visual-button] {\n / styles limited to elevated color /\n box-shadow: var(--md-sys-elevation-shadow-1);\n\n &[data-disabled] {\n box-shadow: none;\n }\n }\n }\n}\n","import styles from \"./color.module.css\";\n\nexport type CoreButtonColor = \"filled\" \| \"tonal\" \| \"outlined\";\n\nexport type ButtonColor = CoreButtonColor \| \"elevated\" \| \"text\";\n\nexport type ToggleButtonColor = CoreButtonColor \| \"elevated\";\n\nexport type IconButtonColor = CoreButtonColor \| \"standard\";\n\nexport type SplitButtonColor = CoreButtonColor \| \"elevated\";\n\nexport type ConnectedButtonGroupColor = CoreButtonColor \| \"elevated\";\n\nexport type AllButtonColor =\n \| ButtonColor\n \| IconButtonColor\n \| SplitButtonColor\n \| ConnectedButtonGroupColor;\n\nexport const buttonColorConfig = (color: AllButtonColor) => {\n return styles[color];\n};\n\nexport const buttonColorBase = styles[\"color\"];\n","@layer adgytec.comps {\n .size {\n / shape /\n --_shape: var(--_md-button-shape);\n\n / styles /\n padding-inline: var(--_md-button-padding-inline);\n padding-block: var(--_md-button-padding-block);\n border-radius: var(--_shape);\n\n display: flex;\n gap: var(--_md-button-icon-label-gap);\n align-items: center;\n justify-content: center;\n\n &[data-selected] {\n --_shape: var(--_md-toggle-button-selected-shape);\n }\n\n &[data-pressed] {\n --_shape: var(--_md-button-pressed-shape);\n }\n }\n\n .extra-small {\n / height for button is 32 /\n --md-sys-shape-corner-radius-full: calc(16 var(--dp, 1px));\n\n --_md-button-padding-block-base: calc(6 * var(--dp, 1px));\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-12);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-4);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-small);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-4);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: calc(6 var(--dp, 1px));\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: calc(10 * var(--dp, 1px));\n }\n }\n\n .small {\n /* height for button is 40 /\n --md-sys-shape-corner-radius-full: calc(20 var(--dp, 1px));\n\n --_md-button-padding-block-base: calc(10 * var(--dp, 1px));\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-16);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-small);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-4);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-8);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: calc(14 var(--dp, 1px));\n }\n\n /* icon button height adjustment: icon size is 24 for icon only buttons /\n &[data-icon-button] {\n --_md-button-padding-block-base: calc(8 var(--dp, 1px));\n }\n }\n\n .medium {\n /* height for button is 56 /\n --md-sys-shape-corner-radius-full: calc(28 var(--dp, 1px));\n\n --_md-button-padding-block-base: var(--md-sys-layout-space-16);\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-24);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-large\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-medium);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-large);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-12);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-16);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-24);\n }\n }\n\n .large {\n / height for button is 96 /\n --md-sys-shape-corner-radius-full: calc(48 var(--dp, 1px));\n\n --_md-button-padding-block-base: var(--md-sys-layout-space-32);\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-48);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-12);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thick);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-extra-large\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-large);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-extra-large);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-16);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-32);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-48);\n }\n }\n\n .extra-large {\n / height for button is 136 /\n --md-sys-shape-corner-radius-full: calc(68 var(--dp, 1px));\n\n --_md-button-padding-block-base: var(--md-sys-layout-space-48);\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-64);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-16);\n --_md-button-outline-width: calc(3 * var(--dp, 1px));\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-extra-large\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-large);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-extra-large);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-32);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-48);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-72);\n }\n }\n}\n","import { typography } from \"@/utils/typography\";\nimport styles from \"./size.module.css\";\n\nexport type ButtonSize =\n \| \"extra-small\"\n \| \"small\"\n \| \"medium\"\n \| \"large\"\n \| \"extra-large\";\n\nexport const ButtonIconSizeMapping: Record<ButtonSize, number> = {\n \"extra-small\": 20,\n small: 20,\n medium: 24,\n large: 32,\n \"extra-large\": 40,\n} as const;\n\nexport const IconButtonIconSizeMapping: Record<ButtonSize, number> = {\n \"extra-small\": 20,\n small: 24,\n medium: 24,\n large: 32,\n \"extra-large\": 40,\n} as const;\n\nexport const ButtonLabelTextMapping: Record<ButtonSize, string> = {\n \"extra-small\": typography.labelLarge,\n small: typography.labelLarge,\n medium: typography.bodyLargeEmphasized,\n large: typography.headlineSmall,\n \"extra-large\": typography.headlineLarge,\n} as const;\n\nexport const buttonSizeConfig = (size: ButtonSize) => {\n return styles[size];\n};\n\nexport const ButtonSizeBase = styles[\"size\"];\n","@layer adgytec.comps {\n .button {\n / styles /\n min-inline-size: var(--min-tap-target-size);\n\n padding-inline: var(--_md-button-padding-inline);\n padding-block: var(--_md-button-padding-block);\n\n display: inline-flex;\n gap: var(--_md-button-icon-label-gap);\n align-items: center;\n justify-content: center;\n\n / shape styles */\n border-start-start-radius: var(--_shape-start-start);\n border-end-start-radius: var(--_shape-end-start);\n border-start-end-radius: var(--_shape-start-end);\n border-end-end-radius: var(--_shape-end-end);\n\n &[data-selected] {\n --_shape-start-start: var(--_selected-shape);\n --_shape-end-start: var(--_selected-shape);\n --_shape-start-end: var(--_selected-shape);\n --_shape-end-end: var(--_selected-shape);\n }\n }\n}\n","import clsx from \"clsx\";\nimport { ToggleButton as AriaToggleButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n ButtonCore,\n ButtonIconSizeMapping,\n ButtonLabelTextMapping,\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n} from \"../../core\";\nimport { useConnectedButtonGroupContext } from \"../ButtonGroupContext\";\nimport styles from \"./connectedButton.module.css\";\nimport type { ConnectedButtonProps } from \"./types\";\n\nexport const ConnectedButton: React.FC<ConnectedButtonProps> = ({\n icon,\n selectedIcon,\n children,\n onPress,\n iconPlacement,\n ...props\n}) => {\n const {\n shape,\n size,\n color,\n iconPlacement: groupIconPlacement,\n } = useConnectedButtonGroupContext();\n\n const buttonIconPlacement = iconPlacement ?? groupIconPlacement ?? \"start\";\n\n const { splashInfo, handlePress } = useSplash(onPress);\n const isChildFunc = typeof children === \"function\";\n\n return (\n <AriaToggleButton\n onPress={handlePress}\n className={clsx(ButtonReset, TapTarget, buttonColorConfig(color))}\n {...props}\n data-connected-button={true}\n data-button\n >\n {(renderProps) => {\n const {\n isSelected,\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n } = renderProps;\n\n const dataAttrs = {\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-selected\": isSelected \|\| undefined,\n \"data-toggle-button\": true,\n \"data-shape\": shape,\n \"data-visual-button\": true,\n };\n\n let iconToRender = icon;\n if (isSelected && selectedIcon) iconToRender = selectedIcon;\n\n const iconSize = ButtonIconSizeMapping[size];\n const iconComp = iconToRender && (\n <Icon icon={iconToRender} size={iconSize} />\n );\n\n return (\n <span\n {...dataAttrs}\n className={clsx(\n ButtonCore,\n buttonColorBase,\n ButtonLabelTextMapping[size],\n styles[\"button\"]\n )}\n >\n {splashInfo && <Splash {...splashInfo} />}\n\n {buttonIconPlacement === \"start\" && iconComp}\n\n {isChildFunc ? children(renderProps) : children}\n\n {buttonIconPlacement === \"end\" && iconComp}\n </span>\n );\n }}\n </AriaToggleButton>\n );\n};\n","import { useButtonGroupContext } from \"../ButtonGroups\";\nimport type { ButtonIconPlacement } from \"./button\";\nimport type { ButtonShape } from \"./shape\";\nimport type { ButtonSize } from \"./sizes\";\n\ntype ButtonConfigOptions<C extends string> = {\n size?: ButtonSize;\n shape?: ButtonShape;\n color?: C;\n iconPlacement?: ButtonIconPlacement;\n};\n\nexport function useButtonConfig<C extends string>({\n size,\n shape,\n color,\n iconPlacement,\n}: ButtonConfigOptions<C>) {\n const {\n size: buttonGroupSize,\n shape: buttonGroupShape,\n color: buttonGroupColor,\n iconPlacement: buttonGroupIconPlacement,\n } = useButtonGroupContext();\n\n const buttonSize = size ?? buttonGroupSize ?? \"small\";\n const buttonShape = shape ?? buttonGroupShape ?? \"round\";\n const buttonColor = color ?? buttonGroupColor ?? \"filled\";\n const buttonIconPlacement =\n iconPlacement ?? buttonGroupIconPlacement ?? \"start\";\n\n return { buttonSize, buttonShape, buttonColor, buttonIconPlacement };\n}\n","import type { ReactElement } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\n\nexport const withTooltip = (element: ReactElement, tooltip?: string) => {\n if (!tooltip) return element;\n\n return (\n <TooltipTrigger>\n {element}\n\n <Tooltip>{tooltip}</Tooltip>\n </TooltipTrigger>\n );\n};\n"],"mappings":"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"}
1	+ {"version":3,"file":"core","names":["styles","styles","styles","renderProps","iconToRender","iconSize","handlePress","_c","clsx","styles","AriaToggleButton","_c","TooltipTrigger","Tooltip","require_compiler_runtime","typography","Icon","Splash","useSplash","Tooltip$1","TooltipTrigger$1","clsx$1","button_module_default","ButtonReset","ButtonCore","newButtonBaseDataAttrs","shape","size","color","color_module_default","buttonColorConfig","buttonColorBase","\"color\"","size_module_default","ButtonIconSizeMapping","IconButtonIconSizeMapping","ButtonLabelTextMapping","buttonSizeConfig","ButtonSizeBase","\"size\"","connectedButton_module_default","import_compiler_runtime","ConnectedButton","$","children","className","icon","iconPlacement","onPress","props","selectedIcon","tooltip","t0","groupIconPlacement","useConnectedButtonGroupContext","buttonIconPlacement","isChildFunc","t1","TapTarget","renderProps","t2","splashInfo","renderProps_0","dataAttrs","isHovered","isDisabled","isFocused","isFocusVisible","isPressed","isSelected","iconToRender","iconSize","iconComp","t3","handlePress","ToggleButton","t4","withTooltip","useButtonConfig","buttonGroupSize","buttonGroupShape","buttonGroupColor","buttonGroupIconPlacement","useButtonGroupContext","buttonSize","buttonShape","buttonColor","node"],"sources":["../../src/components/Button/core/button.module.css","../../src/components/Button/core/button.ts","../../src/components/Button/core/color.module.css","../../src/components/Button/core/color.ts","../../src/components/Button/core/size.module.css","../../src/components/Button/core/sizes.ts","../../src/components/Button/ButtonGroups/ConnectedButton/connectedButton.module.css","../../src/components/Button/ButtonGroups/ConnectedButton/ConnectedButton.tsx","../../src/components/Button/core/useButtonConfig.ts","../../src/components/Button/core/withTooltip.tsx"],"sourcesContent":["@layer adgytec.comps {\n .button-reset {\n all: unset;\n cursor: pointer;\n position: relative;\n text-align: center;\n\n &[data-disabled] {\n cursor: default;\n }\n\n &[data-pending] {\n cursor: default;\n }\n }\n\n .button-core {\n position: relative;\n overflow: clip;\n\n --_md-button-shape-motion: var(--md-sys-motion-expressive-fast-spatial);\n --_md-button-shape-motion-duration: var(\n --md-sys-motion-expressive-fast-spatial-duration\n );\n\n transition:\n border-radius var(--_md-button-shape-motion)\n var(--_md-button-shape-motion-duration),\n background-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n border-color var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n box-shadow var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration),\n padding var(--md-sys-motion-expressive-fast-spatial)\n var(--md-sys-motion-expressive-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n}\n","import type { LucideIcon } from \"lucide-react\";\nimport styles from \"./button.module.css\";\nimport type { AllButtonColor, ButtonColor, IconButtonColor } from \"./color\";\nimport type { ButtonShape } from \"./shape\";\nimport type { ButtonSize } from \"./sizes\";\nimport type { IconButtonWidth } from \"./width\";\n\n/*\n Determines whether an icon inside a button is rendered before or after the text label.\n \n - `\"start\"`: Renders icon at the leading edge (before text).\n * - `\"end\"`: Renders icon at the trailing edge (after text).\n /\nexport type ButtonIconPlacement = \"start\" \| \"end\";\n\n/\n Core props shared across standard text/label button components (e.g. `Button`, `LinkButton`).\n /\nexport interface ButtonBaseProps {\n /* Visual style and color scheme of the button. Defaults to `\"filled\"`. /\n color?: ButtonColor;\n /* Size scale of the button. Defaults to `\"small\"`. /\n size?: ButtonSize;\n /* Corner rounding style (`\"round\"` or `\"square\"`). Defaults to `\"round\"`. /\n shape?: ButtonShape;\n /* Optional tooltip text displayed on hover/focus. /\n tooltip?: string;\n /* Optional Lucide icon component displayed alongside label text. /\n icon?: LucideIcon;\n /* Icon placement relative to label text (`\"start\"` or `\"end\"`). Defaults to `\"start\"`. /\n iconPlacement?: ButtonIconPlacement;\n}\n\n/\n Core props shared across icon-only button components (e.g. `IconButton`, `LinkIconButton`).\n /\nexport interface IconButtonBaseProps {\n /* Visual style and color scheme of the icon button. Defaults to `\"standard\"`. /\n color?: IconButtonColor;\n /* Size scale of the icon button. Defaults to `\"small\"`. /\n size?: ButtonSize;\n /* Corner rounding style (`\"round\"` or `\"square\"`). Defaults to `\"round\"`. /\n shape?: ButtonShape;\n /* Width variation (`\"narrow\"`, `\"default\"`, or `\"wide\"`). Defaults to `\"default\"`. /\n width?: IconButtonWidth;\n /* Optional tooltip text displayed on hover/focus. /\n tooltip?: string;\n /* Required Lucide icon component rendered inside the button. /\n icon: LucideIcon;\n}\n\n/* CSS class resetting default button/link styling (outlines, borders, backgrounds). /\nexport const ButtonReset = styles[\"button-reset\"];\n\n/* CSS class providing the core layout and flex alignment for button internals. /\nexport const ButtonCore = styles[\"button-core\"];\n\n/\n Generates standard data attributes (`data-shape`, `data-size`, `data-color`)\n * applied to button DOM nodes for CSS attribute styling.\n \n @param options - Shape, size, and color configuration.\n * @returns Object with data attributes for spreading onto elements.\n /\nexport function newButtonBaseDataAttrs({\n shape,\n size,\n color,\n}: {\n shape: ButtonShape;\n color: AllButtonColor;\n size: ButtonSize;\n}) {\n return {\n \"data-shape\": shape,\n \"data-size\": size,\n \"data-color\": color,\n };\n}\n","/ configurable tokens\n\n --md-button-background\n* --md-toggle-button-selected-background\n* --md-toggle-button-background\n\n --md-button-outline-color\n* --md-toggle-button-selected-outline-color\n* --md-toggle-button-outline-color\n\n --md-button-color\n* --md-toggle-button-selected-color\n* --md-toggle-button-color\n\n configurable tokens end /\n\n@layer adgytec.overrides {\n .outlined {\n --_md-button-padding-block: calc(\n var(--_md-button-padding-block-base) -\n var(--_md-button-outline-width, 0)\n );\n\n --_md-button-padding-inline: calc(\n var(--_md-button-padding-inline-base) -\n var(--_md-button-outline-width, 0)\n );\n\n --_md-split-button-padding-inline-start: calc(\n var(--_md-split-button-padding-inline-start-base) -\n var(--_md-button-outline-width, 0)\n );\n\n --_md-split-button-padding-inline-end: calc(\n var(--_md-split-button-padding-inline-end-base) -\n var(--_md-button-outline-width, 0)\n );\n }\n}\n\n@layer adgytec.comps {\n .color {\n --_md-button-background: var(\n --md-button-background,\n var(--_md-button-background-default)\n );\n --_md-toggle-button-selected-background: var(\n --md-toggle-button-selected-background,\n var(--_md-toggle-button-selected-background-default)\n );\n --_md-toggle-button-background: var(\n --md-toggle-button-background,\n var(--_md-toggle-button-background-default)\n );\n\n --_md-button-color: var(\n --md-button-color,\n var(--_md-button-color-default)\n );\n --_md-toggle-button-selected-color: var(\n --md-toggle-button-selected-color,\n var(--_md-toggle-button-selected-color-default)\n );\n --_md-toggle-button-color: var(\n --md-toggle-button-color,\n var(--_md-toggle-button-color-default)\n );\n\n --_md-button-outline-color: var(\n --md-button-outline-color,\n var(--_md-button-outline-color-default)\n );\n --_md-toggle-button-outline-color: var(\n --md-toggle-button-outline-color,\n var(--_md-toggle-button-outline-color-default)\n );\n --_md-toggle-button-selected-outline-color: var(\n --md-toggle-button-selected-outline-color,\n var(--_md-toggle-button-selected-outline-color-default)\n );\n\n --_outline-color: var(--_md-button-outline-color, transparent);\n\n / state layer /\n --_md-button-state-layer: var(--_md-button-color, transparent);\n --_md-toggle-button-state-layer: var(\n --_md-toggle-button-color,\n transparent\n );\n --_md-toggle-button-selected-state-layer: var(\n --_md-toggle-button-selected-color,\n transparent\n );\n\n --_state-color: var(--_md-button-state-layer);\n --_state-layer-opacity: 0;\n\n --_state-layer-color: rgb(\n from var(--_state-color) r g b /\n var(--_state-layer-opacity)\n );\n\n / variable to use /\n --_background-color: var(--_md-button-background, transparent);\n --_color: var(--_md-button-color, transparent);\n\n / styles /\n background-color: var(--_background-color);\n color: var(--_color);\n\n &[data-toggle-button] {\n --_background-color: var(\n --_md-toggle-button-background,\n transparent\n );\n --_color: var(--_md-toggle-button-color, transparent);\n --_outline-color: var(\n --_md-toggle-button-outline-color,\n transparent\n );\n\n --_state-color: var(--_md-toggle-button-state-layer);\n }\n\n &[data-selected] {\n --_background-color: var(\n --_md-toggle-button-selected-background,\n transparent\n );\n --_color: var(--_md-toggle-button-selected-color, transparent);\n --_outline-color: var(\n --_md-toggle-button-selected-outline-color,\n transparent\n );\n\n --_state-color: var(--_md-toggle-button-selected-state-layer);\n }\n\n &[data-hovered] {\n --_state-layer-opacity: var(--md-sys-state-hover);\n }\n\n &[data-focus-visible] {\n --_state-layer-opacity: var(--md-sys-state-focus);\n }\n\n &[data-pressed] {\n --_state-layer-opacity: var(--md-sys-state-pressed);\n }\n\n &[data-disabled] {\n --_background-color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-container)\n );\n --_color: rgb(\n from var(--md-sys-color-on-surface) r g b /\n var(--md-sys-state-disabled-content)\n );\n }\n }\n\n / state layer /\n .color::before {\n content: \"\";\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n background-color: var(--_state-layer-color);\n\n transition: background-color var(--md-sys-motion-standard-fast-spatial)\n var(--md-sys-motion-standard-fast-spatial-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n }\n\n / focus indicator /\n .color[data-focus-visible] {\n --focus-indicator-thickness: calc(3 var(--dp, 1px));\n --focus-indicator-offset: calc(2 * var(--dp, 1px));\n --focus-indicator-color: var(--md-sys-color-secondary);\n\n outline-width: var(--focus-indicator-thickness);\n outline-style: solid;\n outline-offset: var(--focus-indicator-offset);\n outline-color: var(--focus-indicator-color);\n\n z-index: 1;\n }\n\n .filled {\n /* background /\n --_md-button-background-default: var(--md-sys-color-primary);\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-primary\n );\n --_md-toggle-button-background-default: var(\n --md-sys-color-surface-container\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-primary);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-on-primary\n );\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n }\n\n .tonal {\n / background /\n --_md-button-background-default: var(\n --md-sys-color-secondary-container\n );\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-secondary\n );\n --_md-toggle-button-background-default: var(\n --md-sys-color-secondary-container\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-secondary-container);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-on-secondary\n );\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-secondary-container\n );\n }\n\n .outlined {\n / outline /\n --_md-button-outline-color-default: var(--md-sys-color-outline-variant);\n --_md-toggle-button-outline-color-default: var(\n --md-sys-color-outline-variant\n );\n\n / background /\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-inverse-surface\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-surface-variant);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-inverse-on-surface\n );\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n [data-visual-button] {\n / styles limited to outlined color /\n border-width: var(--_md-button-outline-width);\n border-style: solid;\n border-color: var(--_outline-color);\n }\n }\n\n / no toggle button states are there /\n .text {\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-primary);\n }\n\n .standard {\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-on-surface-variant);\n --_md-toggle-button-selected-color-default: var(--md-sys-color-primary);\n --_md-toggle-button-color-default: var(\n --md-sys-color-on-surface-variant\n );\n\n &[data-disabled] {\n --_background-color: transparent;\n }\n }\n\n .elevated {\n / background /\n --_md-button-background-default: var(\n --md-sys-color-surface-container-low\n );\n --_md-toggle-button-selected-background-default: var(\n --md-sys-color-primary\n );\n --_md-toggle-button-background-default: var(\n --md-sys-color-surface-container-low\n );\n\n / text and icon /\n --_md-button-color-default: var(--md-sys-color-primary);\n --_md-toggle-button-selected-color-default: var(\n --md-sys-color-on-primary\n );\n --_md-toggle-button-color-default: var(--md-sys-color-primary);\n\n [data-visual-button] {\n / styles limited to elevated color /\n box-shadow: var(--md-sys-elevation-shadow-1);\n\n &[data-disabled] {\n box-shadow: none;\n }\n }\n }\n}\n","import styles from \"./color.module.css\";\n\n/\n Fundamental Material 3 button color styles shared across all button variants:\n * - `\"filled\"`: High-emphasis solid surface with inverted text.\n * - `\"tonal\"`: Medium-high emphasis filled container with primary-tonal background.\n * - `\"outlined\"`: Medium-emphasis button with container outline and transparent background.\n /\nexport type CoreButtonColor = \"filled\" \| \"tonal\" \| \"outlined\";\n\n/\n Color variants supported by standard buttons (`Button`, `LinkButton`):\n * - Includes {@link CoreButtonColor} (`\"filled\"`, `\"tonal\"`, `\"outlined\"`).\n * - `\"elevated\"`: Low-emphasis surface container with shadow elevation.\n * - `\"text\"`: Lowest-emphasis flat text button with transparent background.\n /\nexport type ButtonColor = CoreButtonColor \| \"elevated\" \| \"text\";\n\n/\n Color variants supported by toggle buttons (`ToggleButton`):\n * - Includes {@link CoreButtonColor} plus `\"elevated\"`.\n /\nexport type ToggleButtonColor = CoreButtonColor \| \"elevated\";\n\n/\n Color variants supported by icon buttons (`IconButton`, `LinkIconButton`):\n * - Includes {@link CoreButtonColor} plus `\"standard\"` (unfilled, frameless icon).\n /\nexport type IconButtonColor = CoreButtonColor \| \"standard\";\n\n/\n Color variants supported by split buttons (`SplitButton`):\n * - Includes {@link CoreButtonColor} plus `\"elevated\"`.\n /\nexport type SplitButtonColor = CoreButtonColor \| \"elevated\";\n\n/\n Color variants supported by connected button groups (`ConnectedButtonGroup`):\n * - Includes {@link CoreButtonColor} plus `\"elevated\"`.\n /\nexport type ConnectedButtonGroupColor = CoreButtonColor \| \"elevated\";\n\n/\n Union of all valid button color style names across all button components.\n /\nexport type AllButtonColor =\n \| ButtonColor\n \| IconButtonColor\n \| SplitButtonColor\n \| ConnectedButtonGroupColor;\n\n/\n Resolves a button color style name to its CSS module class name.\n \n @param color - The button color identifier.\n * @returns CSS class name applying the color styling rules.\n /\nexport const buttonColorConfig = (color: AllButtonColor) => {\n return styles[color];\n};\n\n/* CSS class providing base color custom properties and transition states. /\nexport const buttonColorBase = styles[\"color\"];\n","@layer adgytec.comps {\n .size {\n / shape /\n --_shape: var(--_md-button-shape);\n\n / styles /\n padding-inline: var(--_md-button-padding-inline);\n padding-block: var(--_md-button-padding-block);\n border-radius: var(--_shape);\n\n display: flex;\n gap: var(--_md-button-icon-label-gap);\n align-items: center;\n justify-content: center;\n\n &[data-selected] {\n --_shape: var(--_md-toggle-button-selected-shape);\n }\n\n &[data-pressed] {\n --_shape: var(--_md-button-pressed-shape);\n }\n }\n\n .extra-small {\n / height for button is 32 /\n --md-sys-shape-corner-radius-full: calc(16 var(--dp, 1px));\n\n --_md-button-padding-block-base: calc(6 * var(--dp, 1px));\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-12);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-4);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-small);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-4);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: calc(6 var(--dp, 1px));\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: calc(10 * var(--dp, 1px));\n }\n }\n\n .small {\n /* height for button is 40 /\n --md-sys-shape-corner-radius-full: calc(20 var(--dp, 1px));\n\n --_md-button-padding-block-base: calc(10 * var(--dp, 1px));\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-16);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-small);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-medium);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-4);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-8);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: calc(14 var(--dp, 1px));\n }\n\n /* icon button height adjustment: icon size is 24 for icon only buttons /\n &[data-icon-button] {\n --_md-button-padding-block-base: calc(8 var(--dp, 1px));\n }\n }\n\n .medium {\n /* height for button is 56 /\n --md-sys-shape-corner-radius-full: calc(28 var(--dp, 1px));\n\n --_md-button-padding-block-base: var(--md-sys-layout-space-16);\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-24);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-8);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thin);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-large\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-medium);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-large);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-12);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-16);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-24);\n }\n }\n\n .large {\n / height for button is 96 /\n --md-sys-shape-corner-radius-full: calc(48 var(--dp, 1px));\n\n --_md-button-padding-block-base: var(--md-sys-layout-space-32);\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-48);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-12);\n --_md-button-outline-width: var(--md-sys-shape-border-width-thick);\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-extra-large\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-large);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-extra-large);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-16);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-32);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-48);\n }\n }\n\n .extra-large {\n / height for button is 136 /\n --md-sys-shape-corner-radius-full: calc(68 var(--dp, 1px));\n\n --_md-button-padding-block-base: var(--md-sys-layout-space-48);\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n --_md-button-padding-inline-base: var(--md-sys-layout-space-64);\n --_md-button-padding-inline: var(--_md-button-padding-inline-base);\n\n --_md-button-icon-label-gap: var(--md-sys-layout-space-16);\n --_md-button-outline-width: calc(3 * var(--dp, 1px));\n\n --_md-button-shape: var(--md-sys-shape-corner-radius-full);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-extra-large\n );\n\n --_md-button-pressed-shape: var(--md-sys-shape-corner-radius-large);\n\n &[data-shape=\"square\"] {\n --_md-button-shape: var(--md-sys-shape-corner-radius-extra-large);\n --_md-toggle-button-selected-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n\n /* icon button width /\n &[data-width=\"narrow\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-32);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-48);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline-base: var(--md-sys-layout-space-72);\n }\n }\n}\n","import { typography } from \"@/utils/typography\";\nimport styles from \"./size.module.css\";\n\n/\n Supported size presets for button and button group components.\n * Controls dimensions, typography, icon scale, and internal padding.\n /\nexport type ButtonSize =\n \| \"extra-small\"\n \| \"small\"\n \| \"medium\"\n \| \"large\"\n \| \"extra-large\";\n\n/\n Maps each {@link ButtonSize} preset to its recommended icon size in pixels\n * for standard labeled buttons (with leading or trailing icons).\n /\nexport const ButtonIconSizeMapping: Record<ButtonSize, number> = {\n \"extra-small\": 20,\n small: 20,\n medium: 24,\n large: 32,\n \"extra-large\": 40,\n} as const;\n\n/\n Maps each {@link ButtonSize} preset to its recommended icon size in pixels\n * for icon-only buttons (e.g. `IconButton`, `ToggleIconButton`, `LinkIconButton`).\n * Note that the `\"small\"` preset uses 24px for icon buttons compared to 20px in labeled buttons.\n /\nexport const IconButtonIconSizeMapping: Record<ButtonSize, number> = {\n \"extra-small\": 20,\n small: 24,\n medium: 24,\n large: 32,\n \"extra-large\": 40,\n} as const;\n\n/\n Maps each {@link ButtonSize} preset to its typography token class name\n * for button label text.\n /\nexport const ButtonLabelTextMapping: Record<ButtonSize, string> = {\n \"extra-small\": typography.labelLarge,\n small: typography.labelLarge,\n medium: typography.bodyLargeEmphasized,\n large: typography.headlineSmall,\n \"extra-large\": typography.headlineLarge,\n} as const;\n\n/\n Resolves the CSS module class name for a given button size preset.\n \n @param size - The button size preset to retrieve styling for.\n * @returns The CSS module class name corresponding to the specified size.\n /\nexport const buttonSizeConfig = (size: ButtonSize) => {\n return styles[size];\n};\n\n/\n Base CSS module class name applying common layout and sizing structure across buttons.\n /\nexport const ButtonSizeBase = styles[\"size\"];\n","@layer adgytec.comps {\n .button {\n / styles /\n min-inline-size: var(--min-tap-target-size);\n\n padding-inline: var(--_md-button-padding-inline);\n padding-block: var(--_md-button-padding-block);\n\n display: inline-flex;\n gap: var(--_md-button-icon-label-gap);\n align-items: center;\n justify-content: center;\n\n / shape styles /\n border-start-start-radius: var(--_shape-start-start);\n border-end-start-radius: var(--_shape-end-start);\n border-start-end-radius: var(--_shape-start-end);\n border-end-end-radius: var(--_shape-end-end);\n\n &[data-selected] {\n --_shape-start-start: var(--_selected-shape);\n --_shape-end-start: var(--_selected-shape);\n --_shape-start-end: var(--_selected-shape);\n --_shape-end-end: var(--_selected-shape);\n }\n }\n}\n","import clsx from \"clsx\";\nimport { ToggleButton as AriaToggleButton } from \"react-aria-components\";\nimport { Icon } from \"@/components/Icon\";\nimport { Splash } from \"@/components/Splash/Splash\";\nimport { useSplash } from \"@/components/Splash/useSplash\";\nimport { TapTarget } from \"@/utils/tapTarget\";\nimport {\n ButtonCore,\n ButtonIconSizeMapping,\n ButtonLabelTextMapping,\n ButtonReset,\n buttonColorBase,\n buttonColorConfig,\n withTooltip,\n} from \"../../core\";\nimport { useConnectedButtonGroupContext } from \"../ButtonGroupContext\";\nimport styles from \"./connectedButton.module.css\";\nimport type { ConnectedButtonProps } from \"./types\";\n\n/\n An individual toggle button designed for use inside a {@link ConnectedButtonGroup}.\n \n Inherits size, shape, and color styling from the parent `ConnectedButtonGroupContext`,\n * rendering border lines and corner radii coordinated with its neighboring buttons in the segment.\n \n Built on top of React Aria's `ToggleButton`.\n \n @example\n * ```tsx\n * <ConnectedButton id=\"bold\" icon={Bold} aria-label=\"Bold text\" />\n * ```\n /\nexport const ConnectedButton: React.FC<ConnectedButtonProps> = ({\n icon,\n selectedIcon,\n children,\n onPress,\n iconPlacement,\n tooltip,\n className,\n ...props\n}) => {\n const {\n shape,\n size,\n color,\n iconPlacement: groupIconPlacement,\n } = useConnectedButtonGroupContext();\n\n const buttonIconPlacement = iconPlacement ?? groupIconPlacement ?? \"start\";\n\n const { splashInfo, handlePress } = useSplash(onPress);\n const isChildFunc = typeof children === \"function\";\n\n return withTooltip(\n <AriaToggleButton\n onPress={handlePress}\n className={(renderProps) =>\n clsx(\n ButtonReset,\n TapTarget,\n buttonColorConfig(color),\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n data-connected-button={true}\n data-button\n >\n {(renderProps) => {\n const {\n isSelected,\n isDisabled,\n isFocusVisible,\n isFocused,\n isPressed,\n isHovered,\n } = renderProps;\n\n const dataAttrs = {\n \"data-hovered\": isHovered \|\| undefined,\n \"data-disabled\": isDisabled \|\| undefined,\n \"data-focused\": isFocused \|\| undefined,\n \"data-focus-visible\": isFocusVisible \|\| undefined,\n \"data-pressed\": isPressed \|\| undefined,\n \"data-selected\": isSelected \|\| undefined,\n \"data-toggle-button\": true,\n \"data-shape\": shape,\n \"data-visual-button\": true,\n };\n\n let iconToRender = icon;\n if (isSelected && selectedIcon) iconToRender = selectedIcon;\n\n const iconSize = ButtonIconSizeMapping[size];\n const iconComp = iconToRender && (\n <Icon icon={iconToRender} size={iconSize} />\n );\n\n return (\n <span\n {...dataAttrs}\n className={clsx(\n ButtonCore,\n buttonColorBase,\n ButtonLabelTextMapping[size],\n styles[\"button\"]\n )}\n >\n {splashInfo && <Splash {...splashInfo} />}\n\n {buttonIconPlacement === \"start\" && iconComp}\n\n {isChildFunc ? children(renderProps) : children}\n\n {buttonIconPlacement === \"end\" && iconComp}\n </span>\n );\n }}\n </AriaToggleButton>,\n tooltip\n );\n};\n","import { useButtonGroupContext } from \"../ButtonGroups\";\nimport type { ButtonIconPlacement } from \"./button\";\nimport type { ButtonShape } from \"./shape\";\nimport type { ButtonSize } from \"./sizes\";\n\n/\n Configuration options passed to {@link useButtonConfig} to resolve button styles.\n /\ntype ButtonConfigOptions<C extends string> = {\n /* Explicit button size preset override. /\n size?: ButtonSize;\n /* Explicit button corner shape override. /\n shape?: ButtonShape;\n /* Explicit button color style override. /\n color?: C;\n /* Explicit icon placement override relative to label. /\n iconPlacement?: ButtonIconPlacement;\n};\n\n/\n Resolves button configuration by prioritizing component-level props and falling back\n * to contextual values from an ancestor `ButtonGroupContext` (or system defaults).\n \n @template C - String union of allowed color variant values for the button type.\n * @param options - Component-level prop overrides.\n * @returns Resolved visual configuration: `buttonSize`, `buttonShape`, `buttonColor`, and `buttonIconPlacement`.\n \n @example\n * ```tsx\n * const { buttonSize, buttonShape, buttonColor, buttonIconPlacement } = useButtonConfig({\n * size,\n * shape,\n * color,\n * iconPlacement,\n * });\n * ```\n /\nexport function useButtonConfig<C extends string>({\n size,\n shape,\n color,\n iconPlacement,\n}: ButtonConfigOptions<C>) {\n const {\n size: buttonGroupSize,\n shape: buttonGroupShape,\n color: buttonGroupColor,\n iconPlacement: buttonGroupIconPlacement,\n } = useButtonGroupContext();\n\n const buttonSize = size ?? buttonGroupSize ?? \"small\";\n const buttonShape = shape ?? buttonGroupShape ?? \"round\";\n const buttonColor = color ?? buttonGroupColor ?? \"filled\";\n const buttonIconPlacement =\n iconPlacement ?? buttonGroupIconPlacement ?? \"start\";\n\n return { buttonSize, buttonShape, buttonColor, buttonIconPlacement };\n}\n","import type { ReactNode } from \"react\";\nimport { Tooltip, TooltipTrigger } from \"@/components/Tooltip\";\n\n/\n Conditionally wraps a React node in a tooltip trigger when tooltip text is provided.\n \n @param node - The React element to display (e.g. button or icon button).\n * @param tooltip - The optional tooltip text to show on hover/focus. If omitted or empty, `node` is returned unwrapped.\n * @returns The wrapped element with tooltip, or the original node if no tooltip was supplied.\n */\nexport const withTooltip = (node: ReactNode, tooltip?: string) => {\n if (!tooltip) return node;\n\n return (\n <TooltipTrigger>\n {node}\n\n <Tooltip>{tooltip}</Tooltip>\n </TooltipTrigger>\n );\n};\n"],"mappings":"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"}