npm - @adgytec/adgytec-web-ui-components - Versions diffs - 2.0.0 → 2.1.1 - Mend

@adgytec/adgytec-web-ui-components 2.0.0 → 2.1.1

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

Files changed (230) hide show

package/dist/chunks/core CHANGED Viewed

@@ -1,13 +1,13 @@
-import { t as e } from "./Icon";
-import { n as t, t as n } from "./useSplash";
-import { t as r } from "./tapTarget";
-import { t as i } from "./base";
+import { t as e } from "./tapTarget";
+import { t } from "./base";
+import { t as n } from "./Icon";
+import { n as r, t as i } from "./useSplash";
 import { useButtonGroupContext as a, useConnectedButtonGroupContext as o } from "../components/Button/ButtonGroups/ButtonGroupContext/index.js";
 import { t as s } from "./Tooltip";
 import { TooltipTrigger as c } from "../components/Tooltip/TooltipTrigger/index.js";
 import l from "clsx";
-import { ToggleButton as u } from "react-aria-components";
-import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ToggleButton as f } from "react-aria-components";
 import '../assets/core2.css';//#region src/components/Button/core/button.module.css
 var p = {
 	"button-reset": "_button-reset_1kbv0_2",
@@ -21,20 +21,20 @@ function g({ shape: e, size: t, color: n }) {
 	};
 }
 var _ = {
-	outlined: "_outlined_1j2iq_18",
-	color: "_color_1j2iq_27",
-	filled: "_filled_1j2iq_180",
-	tonal: "_tonal_1j2iq_200",
-	text: "_text_1j2iq_252",
-	standard: "_standard_1j2iq_257",
-	elevated: "_elevated_1j2iq_270"
+	outlined: "_outlined_m3jr5_18",
+	color: "_color_m3jr5_42",
+	filled: "_filled_m3jr5_195",
+	tonal: "_tonal_m3jr5_215",
+	text: "_text_m3jr5_267",
+	standard: "_standard_m3jr5_272",
+	elevated: "_elevated_m3jr5_285"
 }, v = (e) => _[e], y = _.color, b = {
-	size: "_size_cpmig_2",
-	"extra-small": "_extra-small_cpmig_25",
-	small: "_small_cpmig_64",
-	medium: "_medium_cpmig_108",
-	large: "_large_cpmig_147",
-	"extra-large": "_extra-large_cpmig_186"
+	size: "_size_a73rz_2",
+	"extra-small": "_extra-small_a73rz_25",
+	small: "_small_a73rz_66",
+	medium: "_medium_a73rz_112",
+	large: "_large_a73rz_153",
+	"extra-large": "_extra-large_a73rz_194"
 }, x = {
 	"extra-small": 20,
 	small: 20,
@@ -48,43 +48,43 @@ var _ = {
 	large: 32,
 	"extra-large": 40
 }, C = {
-	"extra-small": i.labelLarge,
-	small: i.labelLarge,
-	medium: i.bodyLargeEmphasized,
-	large: i.headlineSmall,
-	"extra-large": i.headlineLarge
-}, w = (e) => b[e], T = b.size, E = { button: "_button_4jeo2_2" }, D = ({ icon: i, selectedIcon: a, children: s, onPress: c, iconPlacement: p, ...g }) => {
-	let { shape: _, size: b, color: S, iconPlacement: w } = o(), T = p ?? w ?? "start", { splashInfo: D, handlePress: O } = n(c), k = typeof s == "function";
-	return /* @__PURE__ */ d(u, {
+	"extra-small": t.labelLarge,
+	small: t.labelLarge,
+	medium: t.bodyLargeEmphasized,
+	large: t.headlineSmall,
+	"extra-large": t.headlineLarge
+}, w = (e) => b[e], T = b.size, E = { button: "_button_4jeo2_2" }, D = ({ icon: t, selectedIcon: a, children: s, onPress: c, iconPlacement: p, ...g }) => {
+	let { shape: _, size: b, color: S, iconPlacement: w } = o(), T = p ?? w ?? "start", { splashInfo: D, handlePress: O } = i(c), k = typeof s == "function";
+	return /* @__PURE__ */ u(f, {
 		onPress: O,
-		className: l(m, r, v(S)),
+		className: l(m, e, v(S)),
 		...g,
 		"data-connected-button": !0,
 		"data-button": !0,
-		children: (n) => {
-			let { isSelected: r, isDisabled: o, isFocusVisible: c, isFocused: u, isPressed: p, isHovered: m } = n, g = {
+		children: (e) => {
+			let { isSelected: i, isDisabled: o, isFocusVisible: c, isFocused: f, isPressed: p, isHovered: m } = e, g = {
 				"data-hovered": m || void 0,
 				"data-disabled": o || void 0,
-				"data-focused": u || void 0,
+				"data-focused": f || void 0,
 				"data-focus-visible": c || void 0,
 				"data-pressed": p || void 0,
-				"data-selected": r || void 0,
+				"data-selected": i || void 0,
 				"data-toggle-button": !0,
 				"data-shape": _,
 				"data-visual-button": !0
-			}, v = i;
-			r && a && (v = a);
-			let S = x[b], w = v && /* @__PURE__ */ d(e, {
+			}, v = t;
+			i && a && (v = a);
+			let S = x[b], w = v && /* @__PURE__ */ u(n, {
 				icon: v,
 				size: S
 			});
-			return /* @__PURE__ */ f("span", {
+			return /* @__PURE__ */ d("span", {
 				...g,
 				className: l(h, y, C[b], E.button),
 				children: [
-					D && /* @__PURE__ */ d(t, { ...D }),
+					D && /* @__PURE__ */ u(r, { ...D }),
 					T === "start" && w,
-					k ? s(n) : s,
+					k ? s(e) : s,
 					T === "end" && w
 				]
 			});
@@ -104,7 +104,7 @@ function O({ size: e, shape: t, color: n, iconPlacement: r }) {
 }
 //#endregion
 //#region src/components/Button/core/withTooltip.tsx
-var k = (e, t) => t ? /* @__PURE__ */ f(c, { children: [e, /* @__PURE__ */ d(s, { children: t })] }) : e;
+var k = (e, t) => t ? /* @__PURE__ */ d(c, { children: [e, /* @__PURE__ */ u(s, { children: t })] }) : e;
 //#endregion
 export { C as a, w as c, h as d, m as f, x as i, y as l, O as n, T as o, g as p, D as r, S as s, k as t, v as u };

package/dist/chunks/core.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"core","names":[],"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}\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 --_md-button-padding-inline: var(--md-sys-layout-space-12);\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: var(--md-sys-layout-space-4);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline: calc(6 var(--dp, 1px));\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline: 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 --_md-button-padding-inline: var(--md-sys-layout-space-16);\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: var(--md-sys-layout-space-4);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline: var(--md-sys-layout-space-8);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline: 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 --_md-button-padding-inline: var(--md-sys-layout-space-24);\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: var(--md-sys-layout-space-12);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline: var(--md-sys-layout-space-16);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline: 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 --_md-button-padding-inline: var(--md-sys-layout-space-48);\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: var(--md-sys-layout-space-16);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline: var(--md-sys-layout-space-32);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline: 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 --_md-button-padding-inline: var(--md-sys-layout-space-64);\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: var(--md-sys-layout-space-32);\n }\n\n &[data-width=\"default\"] {\n --_md-button-padding-inline: var(--md-sys-layout-space-48);\n }\n\n &[data-width=\"wide\"] {\n --_md-button-padding-inline: 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":";;;;;;;;;;;;;;GC2Ba,IAAc,EAAO,iBACrB,IAAa,EAAO;AAEjC,SAAgB,EAAuB,EACnC,UACA,SACA,YAKD;CACC,OAAO;EACH,cAAc;EACd,aAAa;EACb,cAAc;CAClB;AACJ;;;;;;;;;GExBa,KAAqB,MACvB,EAAO,IAGL,IAAkB,EAAO;;;;;;;GEdzB,IAAoD;CAC7D,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,IAAwD;CACjE,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,IAAqD;CAC9D,eAAe,EAAW;CAC1B,OAAO,EAAW;CAClB,QAAQ,EAAW;CACnB,OAAO,EAAW;CAClB,eAAe,EAAW;AAC9B,GAEa,KAAoB,MACtB,EAAO,IAGL,IAAiB,EAAO,yCEpBxB,KAAmD,EAC5D,SACA,iBACA,aACA,YACA,kBACA,GAAG,QACD;CACF,IAAM,EACF,UACA,SACA,UACA,eAAe,MACf,EAA+B,GAE7B,IAAsB,KAAiB,KAAsB,SAE7D,EAAE,eAAY,mBAAgB,EAAU,CAAO,GAC/C,IAAc,OAAO,KAAa;CAExC,OACI,kBAAC,GAAD;EACI,SAAS;EACT,WAAW,EAAK,GAAa,GAAW,EAAkB,CAAK,CAAC;EAChE,GAAI;EACJ,yBAAuB;EACvB,eAAA;aAEE,MAAgB;GACd,IAAM,EACF,eACA,eACA,mBACA,cACA,cACA,iBACA,GAEE,IAAY;IACd,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,sBAAsB;IACtB,cAAc;IACd,sBAAsB;GAC1B,GAEI,IAAe;GACnB,AAAI,KAAc,MAAc,IAAe;GAE/C,IAAM,IAAW,EAAsB,IACjC,IAAW,KACb,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAM;GAAW,CAAA;GAG/C,OACI,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EACP,GACA,GACA,EAAuB,IACvB,EAAO,MACX;cAPJ;KASK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA;KAEvC,MAAwB,WAAW;KAEnC,IAAc,EAAS,CAAW,IAAI;KAEtC,MAAwB,SAAS;IAChC;;EAEd;CACc,CAAA;AAE1B;;;ACtFA,SAAgB,EAAkC,EAC9C,SACA,UACA,UACA,oBACuB;CACvB,IAAM,EACF,MAAM,GACN,OAAO,GACP,OAAO,GACP,eAAe,MACf,EAAsB;CAQ1B,OAAO;EAAE,YANU,KAAQ,KAAmB;EAMzB,aALD,KAAS,KAAoB;EAKf,aAJd,KAAS,KAAoB;EAIF,qBAF3C,KAAiB,KAA4B;CAEkB;AACvE;;;AC7BA,IAAa,KAAe,GAAuB,MAC1C,IAGD,kBAAC,GAAD,EAAA,UAAA,CACK,GAED,kBAAC,GAAD,EAAA,UAAU,EAAiB,CAAA,CACf,EAAA,CAAA,IAPC"}
1	+ {"version":3,"file":"core","names":[],"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":";;;;;;;;;;;;;;GC2Ba,IAAc,EAAO,iBACrB,IAAa,EAAO;AAEjC,SAAgB,EAAuB,EACnC,UACA,SACA,YAKD;CACC,OAAO;EACH,cAAc;EACd,aAAa;EACb,cAAc;CAClB;AACJ;;;;;;;;;GExBa,KAAqB,MACvB,EAAO,IAGL,IAAkB,EAAO;;;;;;;GEdzB,IAAoD;CAC7D,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,IAAwD;CACjE,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,IAAqD;CAC9D,eAAe,EAAW;CAC1B,OAAO,EAAW;CAClB,QAAQ,EAAW;CACnB,OAAO,EAAW;CAClB,eAAe,EAAW;AAC9B,GAEa,KAAoB,MACtB,EAAO,IAGL,IAAiB,EAAO,yCEpBxB,KAAmD,EAC5D,SACA,iBACA,aACA,YACA,kBACA,GAAG,QACD;CACF,IAAM,EACF,UACA,SACA,UACA,eAAe,MACf,EAA+B,GAE7B,IAAsB,KAAiB,KAAsB,SAE7D,EAAE,eAAY,mBAAgB,EAAU,CAAO,GAC/C,IAAc,OAAO,KAAa;CAExC,OACI,kBAAC,GAAD;EACI,SAAS;EACT,WAAW,EAAK,GAAa,GAAW,EAAkB,CAAK,CAAC;EAChE,GAAI;EACJ,yBAAuB;EACvB,eAAA;aAEE,MAAgB;GACd,IAAM,EACF,eACA,eACA,mBACA,cACA,cACA,iBACA,GAEE,IAAY;IACd,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,gBAAgB,KAAa,KAAA;IAC7B,sBAAsB,KAAkB,KAAA;IACxC,gBAAgB,KAAa,KAAA;IAC7B,iBAAiB,KAAc,KAAA;IAC/B,sBAAsB;IACtB,cAAc;IACd,sBAAsB;GAC1B,GAEI,IAAe;GACnB,AAAI,KAAc,MAAc,IAAe;GAE/C,IAAM,IAAW,EAAsB,IACjC,IAAW,KACb,kBAAC,GAAD;IAAM,MAAM;IAAc,MAAM;GAAW,CAAA;GAG/C,OACI,kBAAC,QAAD;IACI,GAAI;IACJ,WAAW,EACP,GACA,GACA,EAAuB,IACvB,EAAO,MACX;cAPJ;KASK,KAAc,kBAAC,GAAD,EAAQ,GAAI,EAAa,CAAA;KAEvC,MAAwB,WAAW;KAEnC,IAAc,EAAS,CAAW,IAAI;KAEtC,MAAwB,SAAS;IAChC;;EAEd;CACc,CAAA;AAE1B;;;ACtFA,SAAgB,EAAkC,EAC9C,SACA,UACA,UACA,oBACuB;CACvB,IAAM,EACF,MAAM,GACN,OAAO,GACP,OAAO,GACP,eAAe,MACf,EAAsB;CAQ1B,OAAO;EAAE,YANU,KAAQ,KAAmB;EAMzB,aALD,KAAS,KAAoB;EAKf,aAJd,KAAS,KAAoB;EAIF,qBAF3C,KAAiB,KAA4B;CAEkB;AACvE;;;AC7BA,IAAa,KAAe,GAAuB,MAC1C,IAGD,kBAAC,GAAD,EAAA,UAAA,CACK,GAED,kBAAC,GAAD,EAAA,UAAU,EAAiB,CAAA,CACf,EAAA,CAAA,IAPC"}

package/dist/chunks/core2 CHANGED Viewed

@@ -1,12 +1,12 @@
 import '../assets/core3.css';var e = {
-	size: "_size_1kb4g_2",
-	primary: "_primary_1kb4g_23",
-	trigger: "_trigger_1kb4g_56",
-	"extra-small": "_extra-small_1kb4g_94",
-	small: "_small_1kb4g_146",
-	medium: "_medium_1kb4g_197",
-	large: "_large_1kb4g_249",
-	"extra-large": "_extra-large_1kb4g_300"
+	size: "_size_1to9u_2",
+	primary: "_primary_1to9u_22",
+	trigger: "_trigger_1to9u_65",
+	"extra-small": "_extra-small_1to9u_113",
+	small: "_small_1to9u_165",
+	medium: "_medium_1to9u_216",
+	large: "_large_1to9u_268",
+	"extra-large": "_extra-large_1to9u_319"
 }, t = {
 	"extra-small": 22,
 	small: 22,

package/dist/chunks/core2.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"core2","names":[],"sources":["../../src/components/Button/SplitButton/core/size.module.css","../../src/components/Button/SplitButton/core/size.ts"],"sourcesContent":["@layer adgytec.comps {\n .size {\n --_padding-block: var(--_padding-block-base);\n\n border-start-start-radius: var(--_shape-start-start);\n border-start-end-radius: var(--_shape-start-end);\n border-end-start-radius: var(--_shape-end-start);\n border-end-end-radius: var(--_shape-end-end);\n\n padding-inline-start: var(--_padding-inline-start);\n padding-inline-end: var(--_padding-inline-end);\n padding-block: var(--_padding-block);\n\n display: flex;\n gap: var(--_md-button-icon-label-gap);\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n min-inline-size: var(--min-tap-target-size);\n }\n\n .primary {\n /* shape /\n --_inner-shape: var(--_md-split-button-inner-corner-shape);\n\n --_shape-start-end: var(--_inner-shape);\n --_shape-end-end: var(--_inner-shape);\n\n --_shape-start-start: var(--_md-split-button-outer-corner-shape);\n --_shape-end-start: var(--_md-split-button-outer-corner-shape);\n\n / padding /\n --_padding-inline-start: var(\n --_md-split-button-primary-padding-inline-start\n );\n --_padding-inline-end: var(\n --_md-split-button-primary-padding-inline-end\n );\n\n --_padding-block-base: var(--_md-split-button-primary-padding-block);\n\n &[data-hovered] {\n --_inner-shape: var(\n --_md-split-button-interaction-inner-corner-shape\n );\n }\n\n &[data-pressed] {\n --_inner-shape: var(\n --_md-split-button-interaction-inner-corner-shape\n );\n }\n }\n\n .trigger {\n / shape /\n --_inner-shape: var(--_md-split-button-inner-corner-shape);\n\n --_shape-start-end: var(--_md-split-button-outer-corner-shape);\n --_shape-end-end: var(--_md-split-button-outer-corner-shape);\n\n --_shape-start-start: var(--_inner-shape);\n --_shape-end-start: var(--_inner-shape);\n\n / padding /\n --_padding-inline-start: var(\n --_md-split-button-trigger-padding-inline-start\n );\n --_padding-inline-end: var(\n --_md-split-button-trigger-padding-inline-end\n );\n\n --_padding-block-base: var(--_md-split-button-trigger-padding-block);\n\n &[data-hovered] {\n --_inner-shape: var(\n --_md-split-button-interaction-inner-corner-shape\n );\n }\n\n &[data-pressed] {\n --_inner-shape: var(--_md-split-button-trigger-pressed-shape);\n\n --_padding-inline-start: var(\n --_md-split-button-trigger-pressed-padding-inline-start\n );\n --_padding-inline-end: var(\n --_md-split-button-trigger-pressed-padding-inline-end\n );\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-extra-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-small\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-12\n );\n --_md-split-button-primary-padding-inline-end: calc(\n 10 \n var(--dp, 1px)\n );\n\n --_md-split-button-primary-padding-block: calc(6 * var(--dp, 1px));\n\n /* trigger button /\n --_md-split-button-trigger-padding-inline-start: var(\n --md-sys-layout-space-12\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 14 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 13 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 13 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(5 * var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-extra-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-small\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-16\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-12\n );\n\n --_md-split-button-primary-padding-block: calc(10 var(--dp, 1px));\n\n /* trigger button /\n --_md-split-button-trigger-padding-inline-start: var(\n --md-sys-layout-space-12\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 14 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 13 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 13 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(9 * var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-extra-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-medium\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-24\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-24\n );\n\n --_md-split-button-primary-padding-block: var(--md-sys-layout-space-16);\n\n / trigger button /\n --_md-split-button-trigger-padding-inline-start: calc(\n 13 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 17 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 15 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 15 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(15 var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-large\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-48\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-48\n );\n\n --_md-split-button-primary-padding-block: var(--md-sys-layout-space-32);\n\n / trigger button /\n --_md-split-button-trigger-padding-inline-start: calc(\n 26 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-padding-inline-end: var(\n --md-sys-layout-space-32\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 29 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 29 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(29 * var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-large\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-64\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-64\n );\n\n --_md-split-button-primary-padding-block: var(--md-sys-layout-space-48);\n\n / trigger button /\n --_md-split-button-trigger-padding-inline-start: calc(\n 37 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 49 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 43 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 43 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(43 var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n}\n","import type { ButtonSize } from \"../../core\";\nimport styles from \"./size.module.css\";\n\nexport const SplitButtonTriggerIconSize: Record<ButtonSize, number> = {\n \"extra-small\": 22,\n small: 22,\n medium: 26,\n large: 38,\n \"extra-large\": 50,\n} as const;\n\nexport const splitButtonSizeConfig = (size: ButtonSize) => {\n return styles[size];\n};\n\nexport const SplitButtonVariantBase = styles[\"size\"];\n\nexport const SplitButtonPrimaryBase = styles[\"primary\"];\nexport const SplitButtonTriggerBase = styles[\"trigger\"];\n"],"mappings":";;;;;;;;;GCGa,IAAyD;CAClE,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,KAAyB,MAC3B,EAAO,IAGL,IAAyB,EAAO,MAEhC,IAAyB,EAAO,SAChC,IAAyB,EAAO"}
1	+ {"version":3,"file":"core2","names":[],"sources":["../../src/components/Button/SplitButton/core/size.module.css","../../src/components/Button/SplitButton/core/size.ts"],"sourcesContent":["@layer adgytec.comps {\n .size {\n border-start-start-radius: var(--_shape-start-start);\n border-start-end-radius: var(--_shape-start-end);\n border-end-start-radius: var(--_shape-end-start);\n border-end-end-radius: var(--_shape-end-end);\n\n padding-inline-start: var(--_md-split-button-padding-inline-start);\n padding-inline-end: var(--_md-split-button-padding-inline-end);\n\n padding-block: var(--_md-button-padding-block);\n\n display: flex;\n gap: var(--_md-button-icon-label-gap);\n align-items: center;\n justify-content: center;\n\n box-sizing: border-box;\n min-inline-size: var(--min-tap-target-size);\n }\n\n .primary {\n /* shape /\n --_inner-shape: var(--_md-split-button-inner-corner-shape);\n\n --_shape-start-end: var(--_inner-shape);\n --_shape-end-end: var(--_inner-shape);\n\n --_shape-start-start: var(--_md-split-button-outer-corner-shape);\n --_shape-end-start: var(--_md-split-button-outer-corner-shape);\n\n / padding /\n --_md-split-button-padding-inline-start-base: var(\n --_md-split-button-primary-padding-inline-start\n );\n --_md-split-button-padding-inline-start: var(\n --_md-split-button-padding-inline-start-base\n );\n\n --_md-split-button-padding-inline-end-base: var(\n --_md-split-button-primary-padding-inline-end\n );\n --_md-split-button-padding-inline-end: var(\n --_md-split-button-padding-inline-end-base\n );\n\n --_md-button-padding-block-base: var(\n --_md-split-button-primary-padding-block\n );\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n &[data-hovered] {\n --_inner-shape: var(\n --_md-split-button-interaction-inner-corner-shape\n );\n }\n\n &[data-pressed] {\n --_inner-shape: var(\n --_md-split-button-interaction-inner-corner-shape\n );\n }\n }\n\n .trigger {\n / shape /\n --_inner-shape: var(--_md-split-button-inner-corner-shape);\n\n --_shape-start-end: var(--_md-split-button-outer-corner-shape);\n --_shape-end-end: var(--_md-split-button-outer-corner-shape);\n\n --_shape-start-start: var(--_inner-shape);\n --_shape-end-start: var(--_inner-shape);\n\n / padding /\n --_md-split-button-padding-inline-start-base: var(\n --_md-split-button-trigger-padding-inline-start\n );\n --_md-split-button-padding-inline-start: var(\n --_md-split-button-padding-inline-start-base\n );\n\n --_md-split-button-padding-inline-end-base: var(\n --_md-split-button-trigger-padding-inline-end\n );\n --_md-split-button-padding-inline-end: var(\n --_md-split-button-padding-inline-end-base\n );\n\n --_md-button-padding-block-base: var(\n --_md-split-button-trigger-padding-block\n );\n --_md-button-padding-block: var(--_md-button-padding-block-base);\n\n &[data-hovered] {\n --_inner-shape: var(\n --_md-split-button-interaction-inner-corner-shape\n );\n }\n\n &[data-pressed] {\n --_inner-shape: var(--_md-split-button-trigger-pressed-shape);\n\n --_md-split-button-padding-inline-start-base: var(\n --_md-split-button-trigger-pressed-padding-inline-start\n );\n --_md-split-button-padding-inline-end-base: var(\n --_md-split-button-trigger-pressed-padding-inline-end\n );\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-extra-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-small\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-12\n );\n --_md-split-button-primary-padding-inline-end: calc(\n 10 \n var(--dp, 1px)\n );\n\n --_md-split-button-primary-padding-block: calc(6 * var(--dp, 1px));\n\n /* trigger button /\n --_md-split-button-trigger-padding-inline-start: var(\n --md-sys-layout-space-12\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 14 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 13 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 13 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(5 * var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-extra-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-small\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-16\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-12\n );\n\n --_md-split-button-primary-padding-block: calc(10 var(--dp, 1px));\n\n /* trigger button /\n --_md-split-button-trigger-padding-inline-start: var(\n --md-sys-layout-space-12\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 14 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 13 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 13 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(9 * var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-extra-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-medium\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-24\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-24\n );\n\n --_md-split-button-primary-padding-block: var(--md-sys-layout-space-16);\n\n / trigger button /\n --_md-split-button-trigger-padding-inline-start: calc(\n 13 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 17 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 15 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 15 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(15 var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-small\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-large\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-48\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-48\n );\n\n --_md-split-button-primary-padding-block: var(--md-sys-layout-space-32);\n\n / trigger button /\n --_md-split-button-trigger-padding-inline-start: calc(\n 26 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-padding-inline-end: var(\n --md-sys-layout-space-32\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 29 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 29 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(29 * var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\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-split-button-outer-corner-shape: var(\n --md-sys-shape-corner-radius-full\n );\n --_md-split-button-inner-corner-shape: var(\n --md-sys-shape-corner-radius-medium\n );\n --_md-split-button-interaction-inner-corner-shape: var(\n --md-sys-shape-corner-radius-large\n );\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 /* primary button /\n --_md-split-button-primary-padding-inline-start: var(\n --md-sys-layout-space-64\n );\n --_md-split-button-primary-padding-inline-end: var(\n --md-sys-layout-space-64\n );\n\n --_md-split-button-primary-padding-block: var(--md-sys-layout-space-48);\n\n / trigger button /\n --_md-split-button-trigger-padding-inline-start: calc(\n 37 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-padding-inline-end: calc(\n 49 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-pressed-padding-inline-start: calc(\n 43 \n var(--dp, 1px)\n );\n --_md-split-button-trigger-pressed-padding-inline-end: calc(\n 43 \n var(--dp, 1px)\n );\n\n --_md-split-button-trigger-padding-block: calc(43 var(--dp, 1px));\n --_md-split-button-trigger-pressed-shape: var(\n --md-sys-shape-corner-radius-full\n );\n }\n}\n","import type { ButtonSize } from \"../../core\";\nimport styles from \"./size.module.css\";\n\nexport const SplitButtonTriggerIconSize: Record<ButtonSize, number> = {\n \"extra-small\": 22,\n small: 22,\n medium: 26,\n large: 38,\n \"extra-large\": 50,\n} as const;\n\nexport const splitButtonSizeConfig = (size: ButtonSize) => {\n return styles[size];\n};\n\nexport const SplitButtonVariantBase = styles[\"size\"];\n\nexport const SplitButtonPrimaryBase = styles[\"primary\"];\nexport const SplitButtonTriggerBase = styles[\"trigger\"];\n"],"mappings":";;;;;;;;;GCGa,IAAyD;CAClE,eAAe;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACP,eAAe;AACnB,GAEa,KAAyB,MAC3B,EAAO,IAGL,IAAyB,EAAO,MAEhC,IAAyB,EAAO,SAChC,IAAyB,EAAO"}

package/dist/chunks/core3 CHANGED Viewed

@@ -1,12 +1,12 @@
-import { CalendarStateContext as e, RangeCalendarStateContext as t } from "react-aria-components";
-import { useContext as n } from "react";
+import { useContext as e } from "react";
+import { CalendarStateContext as t, RangeCalendarStateContext as n } from "react-aria-components";
 import '../assets/core4.css';//#endregion
 //#region src/components/Calendar/core/calendar.ts
 var r = { calendar: "_calendar_14tem_23" }.calendar, i = 1900, a = 100;
 //#endregion
 //#region src/components/Calendar/core/useCalendarState.ts
 function o() {
-	let r = n(e), i = n(t), a = r || i || null;
+	let r = e(t), i = e(n), a = r || i || null;
 	if (!a) throw Error("BaseCalendar used outside Calendar or RangeCalendar component");
 	return a;
 }

package/dist/chunks/core8 ADDED Viewed

@@ -0,0 +1,18 @@
+import { createContext as e, useContext as t } from "react";
+import '../assets/core9.css';var n = {
+	navigation: "_navigation_1210d_9",
+	"nav-header": "_nav-header_1210d_62",
+	"sub-nav-header": "_sub-nav-header_1210d_76"
+}, r = n.navigation, i = n["nav-header"], a = n["sub-nav-header"], o = e(null);
+function s() {
+	let e = t(o);
+	if (e == null) throw Error("Missing navigation information. Ensure this component is rendered within a Navigation or SubNavigation component.");
+	return e;
+}
+//#endregion
+//#region src/components/Navigation/core/navLabelContext.ts
+var c = e(void 0);
+//#endregion
+export { r as a, i, o as n, a as o, s as r, c as t };
+//# sourceMappingURL=core8.map

package/dist/chunks/core8.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"core8","names":[],"sources":["../../src/components/Navigation/core/navigation.module.css","../../src/components/Navigation/core/navigation.ts","../../src/components/Navigation/core/navigationInfo.ts","../../src/components/Navigation/core/navLabelContext.ts"],"sourcesContent":["/* configurable tokens\n*\n* --md-navigation-background\n* --md-navigation-drawer-background\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .navigation {\n --_md-navigation-background: var(\n --md-navigation-background,\n var(--md-sys-color-surface)\n );\n --_md-navigation-drawer-background: var(\n --md-navigation-drawer-background,\n var(--md-sys-color-surface-container)\n );\n\n --_background: var(--_md-navigation-background);\n\n background-color: var(--_background);\n\n position: absolute;\n inset: 0;\n border-radius: inherit;\n\n display: grid;\n grid-template-rows: 1fr;\n gap: var(--md-sys-layout-space-16);\n\n padding-block: var(--md-sys-layout-space-16);\n\n &[data-modal] {\n --_background: var(--_md-navigation-drawer-background);\n }\n\n &[data-header] {\n grid-template-rows: auto 1fr;\n }\n }\n\n .navigation[data-sub-nav] {\n opacity: 0;\n translate: -100%;\n\n transition:\n opacity var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration),\n translate var(--md-sys-motion-expressive-fast-effects)\n var(--md-sys-motion-expressive-fast-effects-duration);\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n\n &[data-status=\"entered\"] {\n opacity: 1;\n translate: 0;\n }\n }\n\n .nav-header {\n display: flex;\n align-items: center;\n\n gap: var(--md-sys-layout-space-8);\n\n padding-inline-start: var(--md-sys-layout-space-32);\n padding-inline-end: var(--md-sys-layout-space-24);\n\n > [data-close-button] {\n margin-inline-start: auto;\n }\n }\n\n .sub-nav-header {\n display: flex;\n align-items: center;\n\n gap: var(--md-sys-layout-space-8);\n\n padding-inline-start: var(--md-sys-layout-space-24);\n padding-inline-end: var(--md-sys-layout-space-32);\n }\n}\n","import styles from \"./navigation.module.css\";\n\nexport const NavigationStyles = styles[\"navigation\"];\n\nexport const NavigationHeaderStyles = styles[\"nav-header\"];\nexport const SubNavigationHeaderStyles = styles[\"sub-nav-header\"];\n","import { createContext, useContext } from \"react\";\n\nexport type NavigationInfoContextType = {\n id: string;\n depth: number;\n};\n\nexport const NavigationInfoContext =\n createContext<NavigationInfoContextType | null>(null);\n\nexport function useNavigationInfo() {\n const ctx = useContext(NavigationInfoContext);\n if (ctx == null) {\n throw new Error(\n \"Missing navigation information. Ensure this component is rendered within a Navigation or SubNavigation component.\"\n );\n }\n\n return ctx;\n}\n","import { createContext, type ReactNode } from \"react\";\n\nexport type NavLabelContextType = ReactNode;\nexport const NavLabelContext = createContext<NavLabelContextType>(undefined);\n"],"mappings":";;;;;GCEa,IAAmB,EAAO,YAE1B,IAAyB,EAAO,eAChC,IAA4B,EAAO,mBCEnC,IACT,EAAgD,IAAI;AAExD,SAAgB,IAAoB;CAChC,IAAM,IAAM,EAAW,CAAqB;CAC5C,IAAI,KAAO,MACP,MAAU,MACN,mHACJ;CAGJ,OAAO;AACX;;;AChBA,IAAa,IAAkB,EAAmC,KAAA,CAAS"}

package/dist/chunks/core9 ADDED Viewed

@@ -0,0 +1,6 @@
+import { t as e } from "./base";
+import '../assets/core10.css';var t = { item: "_item_xfkjo_16" }, n = e.titleSmall, r = t.item;
+//#endregion
+export { r as n, n as t };
+//# sourceMappingURL=core9.map

package/dist/chunks/core9.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"core9","names":[],"sources":["../../src/components/Navigation/NavigationItem/core/navigationItem.module.css","../../src/components/Navigation/NavigationItem/core/navigationItem.ts"],"sourcesContent":["/* configurable tokens\n*\n* --md-navigation-item-active-background\n*\n* --md-navigation-item-label-color\n* --md-navigation-item-icon-color\n*\n* --md-navigation-item-active-label-color\n* --md-navigation-item-active-icon-color\n*\n* --md-navigation-item-state-layer-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .item {\n --_md-navigation-item-active-background: var(\n --md-navigation-item-active-background,\n var(--md-sys-color-secondary-container)\n );\n\n --_md-navigation-item-label-color: var(\n --md-navigation-item-label-color,\n var(--md-sys-color-on-surface-variant)\n );\n --_md-navigation-item-icon-color: var(\n --md-navigation-item-icon-color,\n var(--md-sys-color-on-surface-variant)\n );\n\n --_md-navigation-item-active-label-color: var(\n --md-navigation-item-active-label-color,\n var(--md-sys-color-secondary)\n );\n --_md-navigation-item-active-icon-color: var(\n --md-navigation-item-active-icon-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-state-layer-color: var(\n --md-navigation-item-state-layer-color,\n var(--md-sys-color-on-secondary-container)\n );\n\n --_md-navigation-item-padding-block: var(--md-sys-layout-space-16);\n --_md-navigation-item-padding-inline: var(--md-sys-layout-space-16);\n --_md-navigation-item-gap: var(--md-sys-layout-space-8);\n\n --_background: transparent;\n --_icon-color: var(--_md-navigation-item-icon-color);\n --_label-color: var(--_md-navigation-item-label-color);\n\n --_state-color: var(--_md-navigation-item-state-layer-color);\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 all: unset;\n\n position: relative;\n\n background-color: var(--_background);\n color: var(--_label-color);\n\n padding-inline: var(--_md-navigation-item-padding-inline);\n padding-block: var(--_md-navigation-item-padding-block);\n\n display: flex;\n align-items: center;\n inline-size: 100%;\n gap: var(--_md-navigation-item-gap);\n\n cursor: pointer;\n border-radius: var(--md-sys-shape-corner-radius-full);\n\n &[data-active] {\n --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n\n [data-nav-icon] {\n color: var(--_icon-color);\n }\n\n &[data-disabled] {\n cursor: default;\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 --_background: var(--_md-navigation-item-active-background);\n --_icon-color: var(--_md-navigation-item-active-icon-color);\n --_label-color: var(--_md-navigation-item-active-label-color);\n }\n }\n\n /* state layer */\n .item::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 .item[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","import type { LucideIcon } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { typography } from \"@/utils\";\nimport styles from \"./navigationItem.module.css\";\n\nexport interface NavigationItemProps {\n label: ReactNode;\n icon?: LucideIcon;\n activeIcon?: LucideIcon;\n isActive?: boolean;\n}\n\nexport const NavigationItemLabelTypography = typography.titleSmall;\nexport const NavigationItemStyles = styles[\"item\"];\n"],"mappings":";oCCYa,IAAgC,EAAW,YAC3C,IAAuB,EAAO"}

package/dist/chunks/navContext ADDED Viewed

@@ -0,0 +1,12 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/Navigation/Navigation/navContext.ts
+var n = e(null);
+function r() {
+	let e = t(n);
+	if (e === null) throw Error("Missing navigation state. Ensure this component is rendered within Navigation component.");
+	return e;
+}
+//#endregion
+export { r as n, n as t };
+//# sourceMappingURL=navContext.map

package/dist/chunks/navContext.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"navContext","names":[],"sources":["../../src/components/Navigation/Navigation/navContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { IsButtonActive, IsLinkActive } from \"./types\";\n\nexport type NavigationContextType = {\n isLinkActive?: IsLinkActive;\n isButtonActive?: IsButtonActive;\n};\n\nexport const NavigationContext = createContext<NavigationContextType | null>(\n null\n);\n\nexport function useNavigationContext() {\n const ctx = useContext(NavigationContext);\n if (ctx === null) {\n throw new Error(\n \"Missing navigation state. Ensure this component is rendered within Navigation component.\"\n );\n }\n\n return ctx;\n}\n"],"mappings":";;AAQA,IAAa,IAAoB,EAC7B,IACJ;AAEA,SAAgB,IAAuB;CACnC,IAAM,IAAM,EAAW,CAAiB;CACxC,IAAI,MAAQ,MACR,MAAU,MACN,0FACJ;CAGJ,OAAO;AACX"}

package/dist/chunks/useSplash CHANGED Viewed

@@ -1,19 +1,19 @@
 import e from "clsx";
-import { jsx as t } from "react/jsx-runtime";
-import { useRef as n, useState as r } from "react";
+import { useRef as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
 import '../assets/useSplash.css';var i = {
 	splash: "_splash_bxwbf_8",
 	ripple: "_ripple_bxwbf_1"
-}, a = ({ id: n, x: r, y: a, onAnimationEnd: o }) => /* @__PURE__ */ t("div", {
+}, a = ({ id: t, x: n, y: a, onAnimationEnd: o }) => /* @__PURE__ */ r("div", {
 	className: e(i.splash),
 	style: {
-		insetInlineStart: r,
+		insetInlineStart: n,
 		insetBlockStart: a,
 		translate: "-50% -50%"
 	},
 	onAnimationEnd: o
-}, `${n}`), o = (e) => {
-	let [t, i] = r(null), a = n(0), o = (t) => {
+}, `${t}`), o = (e) => {
+	let [r, i] = n(null), a = t(0), o = (t) => {
 		i({
 			id: a.current++,
 			x: t.x,
@@ -24,7 +24,7 @@ import '../assets/useSplash.css';var i = {
 		i(null);
 	};
 	return {
-		splashInfo: t,
+		splashInfo: r,
 		handlePress: o
 	};
 };

package/dist/components/AppBar/AppBar/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "../../../chunks/AppBar";
2	+ export { e as AppBar };

package/dist/components/AppBar/AppBarAction/index.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { IconButton as e } from "../../Button/IconButton/index.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/AppBar/AppBarAction/AppBarAction.tsx
+var n = ({ color: n = "standard", ...r }) => /* @__PURE__ */ t(e, {
+	...r,
+	color: n,
+	size: "small"
+});
+//#endregion
+export { n as AppBarAction };
+//# sourceMappingURL=index.js.map

package/dist/components/AppBar/AppBarAction/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/AppBar/AppBarAction/AppBarAction.tsx"],"sourcesContent":["import { IconButton, type IconButtonProps } from \"@/components/Button\";\n\nexport const AppBarAction: React.FC<Omit<IconButtonProps, \"size\">> = ({\n color = \"standard\",\n ...props\n}) => {\n return <IconButton {...props} color={color} size=\"small\" />;\n};\n"],"mappings":";;;AAEA,IAAa,KAAyD,EAClE,WAAQ,YACR,GAAG,QAEI,kBAAC,GAAD;CAAY,GAAI;CAAc;CAAO,MAAK;AAAS,CAAA"}

package/dist/components/AppBar/AppBarAvatar/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "../../../chunks/AppBarAvatar";
2	+ export { e as AppBarAvatar };

package/dist/components/AppBar/AppBarHeadline/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import { t as e } from "../../../chunks/AppBarHeadline";
2	+ export { e as AppBarHeadline };

package/dist/components/AppBar/AppBarState/index.js ADDED Viewed

@@ -0,0 +1,17 @@
+import { createContext as e, useMemo as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/AppBar/AppBarState/context.ts
+var i = e(null), a = ({ children: e, initialScrolling: a = !1 }) => {
+	let [o, s] = n(a);
+	return /* @__PURE__ */ r(i, {
+		value: t(() => ({
+			isScrolling: o,
+			updateScrolling: s
+		}), [o]),
+		children: e
+	});
+};
+//#endregion
+export { a as AppBarState, i as AppBarStateContext };
+//# sourceMappingURL=index.js.map

package/dist/components/AppBar/AppBarState/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/AppBar/AppBarState/context.ts","../../../../src/components/AppBar/AppBarState/AppBarState.tsx"],"sourcesContent":["import { createContext } from \"react\";\n\nexport type AppBarStateContextType = {\n isScrolling: boolean;\n updateScrolling: (isScrolling: boolean) => void;\n};\n\nexport const AppBarStateContext = createContext<AppBarStateContextType | null>(\n null\n);\n","import { type ReactNode, useMemo, useState } from \"react\";\nimport { AppBarStateContext } from \"./context\";\n\nexport const AppBarState: React.FC<{\n children?: ReactNode;\n initialScrolling?: boolean;\n}> = ({ children, initialScrolling = false }) => {\n const [scrolling, setScrolling] = useState(initialScrolling);\n const contextValue = useMemo(\n () => ({\n isScrolling: scrolling,\n updateScrolling: setScrolling,\n }),\n [scrolling]\n );\n\n return (\n <AppBarStateContext value={contextValue}>{children}</AppBarStateContext>\n );\n};\n"],"mappings":";;;AAOA,IAAa,IAAqB,EAC9B,IACJ,GCNa,KAGP,EAAE,aAAU,sBAAmB,SAAY;CAC7C,IAAM,CAAC,GAAW,KAAgB,EAAS,CAAgB;CAS3D,OACI,kBAAC,GAAD;EAAoB,OATH,SACV;GACH,aAAa;GACb,iBAAiB;EACrB,IACA,CAAC,CAAS,CAIiB;EAAe;CAA6B,CAAA;AAE/E"}

package/dist/components/AppBar/core/index.js ADDED Viewed

@@ -0,0 +1,24 @@
+import { t as e } from "../../../chunks/base";
+import { createContext as t, useContext as n } from "react";
+//#region src/components/AppBar/core/context.ts
+var r = t(null);
+function i() {
+	let e = n(r);
+	if (!e) throw Error("useAppBarContext must be used within AppBar component");
+	return e;
+}
+//#endregion
+//#region src/components/AppBar/core/size.ts
+var a = {
+	small: e.titleLarge,
+	medium: e.headlineMedium,
+	large: e.displaySmall
+}, o = {
+	small: 28,
+	medium: 36,
+	large: 44
+};
+//#endregion
+export { r as AppBarContext, o as AppBarHeadlineBlockSize, a as AppBarHeadlineTypography, i as useAppBarContext };
+//# sourceMappingURL=index.js.map

package/dist/components/AppBar/core/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/AppBar/core/context.ts","../../../../src/components/AppBar/core/size.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { AppBarAlignment } from \"./alignment\";\nimport type { AppBarSize } from \"./size\";\n\nexport type AppBarContextType = {\n size: AppBarSize;\n alignment: AppBarAlignment;\n headlineBlockSize: number;\n headlineTypography: string;\n};\n\nexport const AppBarContext = createContext<AppBarContextType | null>(null);\n\nexport function useAppBarContext() {\n const context = useContext(AppBarContext);\n\n if (!context) {\n throw new Error(\n \"useAppBarContext must be used within AppBar component\"\n );\n }\n\n return context;\n}\n","import { typography } from \"@/utils\";\n\nexport type AppBarSize = \"small\" | \"medium\" | \"large\";\n\nexport const AppBarHeadlineTypography: Record<AppBarSize, string> = {\n small: typography.titleLarge,\n medium: typography.headlineMedium,\n large: typography.displaySmall,\n} as const;\n\nexport const AppBarHeadlineBlockSize: Record<AppBarSize, number> = {\n small: 28,\n medium: 36,\n large: 44,\n} as const;\n"],"mappings":";;;AAWA,IAAa,IAAgB,EAAwC,IAAI;AAEzE,SAAgB,IAAmB;CAC/B,IAAM,IAAU,EAAW,CAAa;CAExC,IAAI,CAAC,GACD,MAAU,MACN,uDACJ;CAGJ,OAAO;AACX;;;ACnBA,IAAa,IAAuD;CAChE,OAAO,EAAW;CAClB,QAAQ,EAAW;CACnB,OAAO,EAAW;AACtB,GAEa,IAAsD;CAC/D,OAAO;CACP,QAAQ;CACR,OAAO;AACX"}

package/dist/components/AppBar/index.js ADDED Viewed

@@ -0,0 +1,7 @@
+import { AppBarState as e, AppBarStateContext as t } from "./AppBarState/index.js";
+import { AppBarContext as n, AppBarHeadlineBlockSize as r, AppBarHeadlineTypography as i, useAppBarContext as a } from "./core/index.js";
+import { t as o } from "../../chunks/AppBar";
+import { AppBarAction as s } from "./AppBarAction/index.js";
+import { t as c } from "../../chunks/AppBarAvatar";
+import { t as l } from "../../chunks/AppBarHeadline";
+export { o as AppBar, s as AppBarAction, c as AppBarAvatar, n as AppBarContext, l as AppBarHeadline, r as AppBarHeadlineBlockSize, i as AppBarHeadlineTypography, e as AppBarState, t as AppBarStateContext, a as useAppBarContext };