@adgytec/adgytec-web-ui-components 2.1.2 → 2.1.4
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.
- package/dist/assets/AppBar.css +1 -1
- package/dist/assets/core10.css +1 -1
- package/dist/chunks/AppBar +7 -6
- package/dist/chunks/AppBar.map +1 -1
- package/dist/chunks/core9 +1 -1
- package/dist/chunks/core9.map +1 -1
- package/package.json +1 -1
package/dist/assets/AppBar.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{._app-
|
|
1
|
+
@layer adgytec.comps{._app-bar_54m0f_10{--_md-app-bar-background:var(--md-app-bar-background,var(--md-sys-color-surface));--_md-app-bar-on-scroll-background:var(--md-app-bar-on-scroll-background,var(--md-sys-color-surface-container));--_md-app-bar-title-color:var(--md-app-bar-title-color,var(--md-sys-color-on-surface));--_md-app-bar-headline-block-size:var(--md-sys-layout-space-28);gap:var(--md-sys-layout-space-12);padding-inline:var(--md-sys-layout-space-4);padding-block:var(--md-sys-layout-space-8);background-color:var(--_md-app-bar-background);transition:background-color var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration);display:grid}@media (prefers-reduced-motion){._app-bar_54m0f_10{transition:none}}._app-bar_54m0f_10[data-size=medium]{--_md-app-bar-headline-block-size:var(--md-sys-layout-space-36)}._app-bar_54m0f_10[data-size=large]{--_md-app-bar-headline-block-size:calc(44 * var(--dp,1px))}._app-bar_54m0f_10[data-scroll]{background-color:var(--_md-app-bar-on-scroll-background);box-shadow:var(--md-sys-elevation-shadow-2)}._primary_54m0f_55{gap:var(--md-sys-layout-space-4);align-items:center;display:flex}._primary_54m0f_55[data-alignment=centered]{grid-template-columns:1fr auto 1fr;display:grid}._leading-action_54m0f_66{--md-button-color:var(--_md-app-bar-title-color)}._leading-action_54m0f_66[data-alignment=centered]{grid-column:1;justify-self:start}._headline_54m0f_75[data-initial-padding]{padding-inline-start:var(--md-sys-layout-space-12)}._headline_54m0f_75[data-alignment=centered]{grid-column:2;justify-self:center}._trailing-actions_54m0f_84{align-items:center;margin-inline-start:auto;display:flex}._trailing-actions_54m0f_84[data-alignment=centered]{grid-column:3;justify-self:end;margin-inline-start:0}._secondary_54m0f_97{padding-inline:var(--md-sys-layout-space-12)}}
|
package/dist/assets/core10.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{.
|
|
1
|
+
@layer adgytec.comps{._item_1jlhw_16{--_md-navigation-item-active-background:var(--md-navigation-item-active-background,var(--md-sys-color-secondary-container));--_md-navigation-item-label-color:var(--md-navigation-item-label-color,var(--md-sys-color-on-surface-variant));--_md-navigation-item-icon-color:var(--md-navigation-item-icon-color,var(--md-sys-color-on-surface-variant));--_md-navigation-item-active-label-color:var(--md-navigation-item-active-label-color,var(--md-sys-color-secondary));--_md-navigation-item-active-icon-color:var(--md-navigation-item-active-icon-color,var(--md-sys-color-on-secondary-container));--_md-navigation-item-state-layer-color:var(--md-navigation-item-state-layer-color,var(--md-sys-color-on-secondary-container));--_md-navigation-item-padding-block:var(--md-sys-layout-space-16);--_md-navigation-item-padding-inline:var(--md-sys-layout-space-16);--_md-navigation-item-gap:var(--md-sys-layout-space-8);--_background:transparent;--_icon-color:var(--_md-navigation-item-icon-color);--_label-color:var(--_md-navigation-item-label-color);--_state-color:var(--_md-navigation-item-state-layer-color);--_state-layer-opacity:0;--_state-layer-color:rgb(from var(--_state-color) r g b / var(--_state-layer-opacity));all:unset;background-color:var(--_background);color:var(--_label-color);padding-inline:var(--_md-navigation-item-padding-inline);padding-block:var(--_md-navigation-item-padding-block);align-items:center;gap:var(--_md-navigation-item-gap);cursor:pointer;border-radius:var(--md-sys-shape-corner-radius-full);display:flex;position:relative}._item_1jlhw_16[data-active]{--_background:var(--_md-navigation-item-active-background);--_icon-color:var(--_md-navigation-item-active-icon-color);--_label-color:var(--_md-navigation-item-active-label-color)}._item_1jlhw_16 [data-nav-icon]{color:var(--_icon-color)}._item_1jlhw_16[data-disabled]{cursor:default}._item_1jlhw_16[data-hovered]{--_state-layer-opacity:var(--md-sys-state-hover)}._item_1jlhw_16[data-focus-visible]{--_state-layer-opacity:var(--md-sys-state-focus)}._item_1jlhw_16[data-pressed]{--_state-layer-opacity:var(--md-sys-state-pressed);--_background:var(--_md-navigation-item-active-background);--_icon-color:var(--_md-navigation-item-active-icon-color);--_label-color:var(--_md-navigation-item-active-label-color)}._item_1jlhw_16:before{content:"";border-radius:inherit;background-color:var(--_state-layer-color);transition:background-color var(--md-sys-motion-standard-fast-spatial) var(--md-sys-motion-standard-fast-spatial-duration);position:absolute;inset:0}@media (prefers-reduced-motion){._item_1jlhw_16:before{transition:none}}._item_1jlhw_16[data-focus-visible]{--focus-indicator-thickness:calc(3 * var(--dp,1px));--focus-indicator-offset:calc(2 * var(--dp,1px));--focus-indicator-color:var(--md-sys-color-secondary);outline-width:var(--focus-indicator-thickness);outline-offset:var(--focus-indicator-offset);outline-style:solid;outline-color:var(--focus-indicator-color);z-index:1}}
|
package/dist/chunks/AppBar
CHANGED
|
@@ -4,12 +4,12 @@ import i from "clsx";
|
|
|
4
4
|
import { useContext as a, useMemo as o } from "react";
|
|
5
5
|
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
6
6
|
import '../assets/AppBar.css';var l = {
|
|
7
|
-
"app-bar": "_app-
|
|
8
|
-
primary: "
|
|
9
|
-
"leading-action": "_leading-
|
|
10
|
-
headline: "
|
|
11
|
-
"trailing-actions": "_trailing-
|
|
12
|
-
secondary: "
|
|
7
|
+
"app-bar": "_app-bar_54m0f_10",
|
|
8
|
+
primary: "_primary_54m0f_55",
|
|
9
|
+
"leading-action": "_leading-action_54m0f_66",
|
|
10
|
+
headline: "_headline_54m0f_75",
|
|
11
|
+
"trailing-actions": "_trailing-actions_54m0f_84",
|
|
12
|
+
secondary: "_secondary_54m0f_97"
|
|
13
13
|
}, u = ({ className: u, size: d = "small", alignment: f = "default", leadingAction: p, trailingActions: m, headline: h, ...g }) => {
|
|
14
14
|
let _ = a(e), v = d !== "small", y = m && m.length > 0;
|
|
15
15
|
return /* @__PURE__ */ s(t, {
|
|
@@ -41,6 +41,7 @@ import '../assets/AppBar.css';var l = {
|
|
|
41
41
|
!v && h && /* @__PURE__ */ s("div", {
|
|
42
42
|
"data-alignment": f,
|
|
43
43
|
className: i(l.headline),
|
|
44
|
+
"data-initial-padding": !p || void 0,
|
|
44
45
|
children: h
|
|
45
46
|
}),
|
|
46
47
|
y && /* @__PURE__ */ s("div", {
|
package/dist/chunks/AppBar.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar","names":[],"sources":["../../src/components/AppBar/AppBar/appBar.module.css","../../src/components/AppBar/AppBar/AppBar.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-app-bar-background\n* --md-app-bar-on-scroll-background\n* --md-app-bar-title-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .app-bar {\n --_md-app-bar-background: var(\n --md-app-bar-background,\n var(--md-sys-color-surface)\n );\n --_md-app-bar-on-scroll-background: var(\n --md-app-bar-on-scroll-background,\n var(--md-sys-color-surface-container)\n );\n --_md-app-bar-title-color: var(\n --md-app-bar-title-color,\n var(--md-sys-color-on-surface)\n );\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-28);\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--md-sys-layout-space-4);\n padding-block: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-app-bar-background);\n\n transition: background-color\n 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-size=\"medium\"] {\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-36);\n }\n\n &[data-size=\"large\"] {\n --_md-app-bar-headline-block-size: calc(44 * var(--dp, 1px));\n }\n\n &[data-scroll] {\n background-color: var(--_md-app-bar-on-scroll-background);\n box-shadow: var(--md-sys-elevation-shadow-2);\n }\n }\n\n .primary {\n display: flex;\n gap: var(--md-sys-layout-space-4);\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n }\n }\n\n .leading-action {\n --md-button-color: var(--_md-app-bar-title-color);\n\n &[data-alignment=\"centered\"] {\n grid-column: 1;\n justify-self: start;\n }\n }\n\n .headline[data-alignment=\"centered\"] {\n grid-column: 2;\n justify-self: center;\n }\n\n .trailing-actions {\n margin-inline-start: auto;\n\n display: flex;\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n grid-column: 3;\n justify-self: end;\n margin-inline-start: 0;\n }\n }\n\n .secondary {\n padding-inline: var(--md-sys-layout-space-12);\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { AppBarStateContext } from \"../AppBarState\";\nimport {\n AppBarContext,\n AppBarHeadlineBlockSize,\n AppBarHeadlineTypography,\n} from \"../core\";\nimport styles from \"./appBar.module.css\";\nimport type { AppBarProps } from \"./types\";\n\nexport const AppBar: React.FC<AppBarProps> = ({\n className,\n size = \"small\",\n alignment = \"default\",\n leadingAction,\n trailingActions,\n headline,\n ...props\n}) => {\n const appBarState = useContext(AppBarStateContext);\n const hasSecondary = size !== \"small\";\n const hasTrailingActions = trailingActions && trailingActions.length > 0;\n\n const contextValue = useMemo(\n () => ({\n size,\n alignment,\n headlineBlockSize: AppBarHeadlineBlockSize[size],\n headlineTypography: AppBarHeadlineTypography[size],\n }),\n [size, alignment]\n );\n\n return (\n <AppBarContext value={contextValue}>\n <header\n className={clsx(styles[\"app-bar\"], className)}\n {...props}\n data-size={size}\n data-alignment={alignment}\n data-has-secondary={(hasSecondary && !!headline) || undefined}\n data-scroll={appBarState?.isScrolling || undefined}\n >\n <div\n data-primary\n className={clsx(styles[\"primary\"])}\n data-alignment={alignment}\n data-size={size}\n >\n {leadingAction && (\n <div\n data-alignment={alignment}\n data-primary-leading\n className={clsx(styles[\"leading-action\"])}\n >\n {leadingAction}\n </div>\n )}\n\n {!hasSecondary && headline && (\n <div\n data-alignment={alignment}\n className={clsx(styles[\"headline\"])}\n >\n {headline}\n </div>\n )}\n\n {hasTrailingActions && (\n <div\n data-alignment={alignment}\n data-primary-trailing\n className={clsx(styles[\"trailing-actions\"])}\n >\n {trailingActions}\n </div>\n )}\n </div>\n\n {hasSecondary && headline && (\n <div\n data-secondary\n data-alignment={alignment}\n className={clsx(styles[\"secondary\"])}\n >\n {headline}\n </div>\n )}\n </header>\n </AppBarContext>\n );\n};\n"],"mappings":";;;;;;;;;;;;GCWa,KAAiC,EAC1C,cACA,UAAO,SACP,eAAY,WACZ,kBACA,oBACA,aACA,GAAG,QACD;CACF,IAAM,IAAc,EAAW,CAAkB,GAC3C,IAAe,MAAS,SACxB,IAAqB,KAAmB,EAAgB,SAAS;CAYvE,OACI,kBAAC,GAAD;EAAe,OAXE,SACV;GACH;GACA;GACA,mBAAmB,EAAwB;GAC3C,oBAAoB,EAAyB;EACjD,IACA,CAAC,GAAM,CAAS,CAIM;YAClB,kBAAC,UAAD;GACI,WAAW,EAAK,EAAO,YAAY,CAAS;GAC5C,GAAI;GACJ,aAAW;GACX,kBAAgB;GAChB,sBAAqB,KAAgB,CAAC,CAAC,KAAa,KAAA;GACpD,eAAa,GAAa,eAAe,KAAA;aAN7C,CAQI,kBAAC,OAAD;IACI,gBAAA;IACA,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;IAChB,aAAW;cAJf;KAMK,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,wBAAA;MACA,WAAW,EAAK,EAAO,iBAAiB;gBAEvC;KACA,CAAA;KAGR,CAAC,KAAgB,KACd,kBAAC,OAAD;MACI,kBAAgB;MAChB,WAAW,EAAK,EAAO,QAAW;
|
|
1
|
+
{"version":3,"file":"AppBar","names":[],"sources":["../../src/components/AppBar/AppBar/appBar.module.css","../../src/components/AppBar/AppBar/AppBar.tsx"],"sourcesContent":["/* configurable tokens\n*\n* --md-app-bar-background\n* --md-app-bar-on-scroll-background\n* --md-app-bar-title-color\n*\n* configurable tokens end */\n\n@layer adgytec.comps {\n .app-bar {\n --_md-app-bar-background: var(\n --md-app-bar-background,\n var(--md-sys-color-surface)\n );\n --_md-app-bar-on-scroll-background: var(\n --md-app-bar-on-scroll-background,\n var(--md-sys-color-surface-container)\n );\n --_md-app-bar-title-color: var(\n --md-app-bar-title-color,\n var(--md-sys-color-on-surface)\n );\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-28);\n\n display: grid;\n gap: var(--md-sys-layout-space-12);\n\n padding-inline: var(--md-sys-layout-space-4);\n padding-block: var(--md-sys-layout-space-8);\n\n background-color: var(--_md-app-bar-background);\n\n transition: background-color\n 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-size=\"medium\"] {\n --_md-app-bar-headline-block-size: var(--md-sys-layout-space-36);\n }\n\n &[data-size=\"large\"] {\n --_md-app-bar-headline-block-size: calc(44 * var(--dp, 1px));\n }\n\n &[data-scroll] {\n background-color: var(--_md-app-bar-on-scroll-background);\n box-shadow: var(--md-sys-elevation-shadow-2);\n }\n }\n\n .primary {\n display: flex;\n gap: var(--md-sys-layout-space-4);\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n }\n }\n\n .leading-action {\n --md-button-color: var(--_md-app-bar-title-color);\n\n &[data-alignment=\"centered\"] {\n grid-column: 1;\n justify-self: start;\n }\n }\n\n .headline[data-initial-padding] {\n padding-inline-start: var(--md-sys-layout-space-12);\n }\n\n .headline[data-alignment=\"centered\"] {\n grid-column: 2;\n justify-self: center;\n }\n\n .trailing-actions {\n margin-inline-start: auto;\n\n display: flex;\n align-items: center;\n\n &[data-alignment=\"centered\"] {\n grid-column: 3;\n justify-self: end;\n margin-inline-start: 0;\n }\n }\n\n .secondary {\n padding-inline: var(--md-sys-layout-space-12);\n }\n}\n","import clsx from \"clsx\";\nimport { useContext, useMemo } from \"react\";\nimport { AppBarStateContext } from \"../AppBarState\";\nimport {\n AppBarContext,\n AppBarHeadlineBlockSize,\n AppBarHeadlineTypography,\n} from \"../core\";\nimport styles from \"./appBar.module.css\";\nimport type { AppBarProps } from \"./types\";\n\nexport const AppBar: React.FC<AppBarProps> = ({\n className,\n size = \"small\",\n alignment = \"default\",\n leadingAction,\n trailingActions,\n headline,\n ...props\n}) => {\n const appBarState = useContext(AppBarStateContext);\n const hasSecondary = size !== \"small\";\n const hasTrailingActions = trailingActions && trailingActions.length > 0;\n\n const contextValue = useMemo(\n () => ({\n size,\n alignment,\n headlineBlockSize: AppBarHeadlineBlockSize[size],\n headlineTypography: AppBarHeadlineTypography[size],\n }),\n [size, alignment]\n );\n\n return (\n <AppBarContext value={contextValue}>\n <header\n className={clsx(styles[\"app-bar\"], className)}\n {...props}\n data-size={size}\n data-alignment={alignment}\n data-has-secondary={(hasSecondary && !!headline) || undefined}\n data-scroll={appBarState?.isScrolling || undefined}\n >\n <div\n data-primary\n className={clsx(styles[\"primary\"])}\n data-alignment={alignment}\n data-size={size}\n >\n {leadingAction && (\n <div\n data-alignment={alignment}\n data-primary-leading\n className={clsx(styles[\"leading-action\"])}\n >\n {leadingAction}\n </div>\n )}\n\n {!hasSecondary && headline && (\n <div\n data-alignment={alignment}\n className={clsx(styles[\"headline\"])}\n data-initial-padding={!leadingAction || undefined}\n >\n {headline}\n </div>\n )}\n\n {hasTrailingActions && (\n <div\n data-alignment={alignment}\n data-primary-trailing\n className={clsx(styles[\"trailing-actions\"])}\n >\n {trailingActions}\n </div>\n )}\n </div>\n\n {hasSecondary && headline && (\n <div\n data-secondary\n data-alignment={alignment}\n className={clsx(styles[\"secondary\"])}\n >\n {headline}\n </div>\n )}\n </header>\n </AppBarContext>\n );\n};\n"],"mappings":";;;;;;;;;;;;GCWa,KAAiC,EAC1C,cACA,UAAO,SACP,eAAY,WACZ,kBACA,oBACA,aACA,GAAG,QACD;CACF,IAAM,IAAc,EAAW,CAAkB,GAC3C,IAAe,MAAS,SACxB,IAAqB,KAAmB,EAAgB,SAAS;CAYvE,OACI,kBAAC,GAAD;EAAe,OAXE,SACV;GACH;GACA;GACA,mBAAmB,EAAwB;GAC3C,oBAAoB,EAAyB;EACjD,IACA,CAAC,GAAM,CAAS,CAIM;YAClB,kBAAC,UAAD;GACI,WAAW,EAAK,EAAO,YAAY,CAAS;GAC5C,GAAI;GACJ,aAAW;GACX,kBAAgB;GAChB,sBAAqB,KAAgB,CAAC,CAAC,KAAa,KAAA;GACpD,eAAa,GAAa,eAAe,KAAA;aAN7C,CAQI,kBAAC,OAAD;IACI,gBAAA;IACA,WAAW,EAAK,EAAO,OAAU;IACjC,kBAAgB;IAChB,aAAW;cAJf;KAMK,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,wBAAA;MACA,WAAW,EAAK,EAAO,iBAAiB;gBAEvC;KACA,CAAA;KAGR,CAAC,KAAgB,KACd,kBAAC,OAAD;MACI,kBAAgB;MAChB,WAAW,EAAK,EAAO,QAAW;MAClC,wBAAsB,CAAC,KAAiB,KAAA;gBAEvC;KACA,CAAA;KAGR,KACG,kBAAC,OAAD;MACI,kBAAgB;MAChB,yBAAA;MACA,WAAW,EAAK,EAAO,mBAAmB;gBAEzC;KACA,CAAA;IAER;OAEJ,KAAgB,KACb,kBAAC,OAAD;IACI,kBAAA;IACA,kBAAgB;IAChB,WAAW,EAAK,EAAO,SAAY;cAElC;GACA,CAAA,CAEL;;CACG,CAAA;AAEvB"}
|
package/dist/chunks/core9
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { t as e } from "./base";
|
|
2
|
-
import '../assets/core10.css';var t = { item: "
|
|
2
|
+
import '../assets/core10.css';var t = { item: "_item_1jlhw_16" }, n = e.titleSmall, r = t.item;
|
|
3
3
|
//#endregion
|
|
4
4
|
export { r as n, n as t };
|
|
5
5
|
|
package/dist/chunks/core9.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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 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"}
|