@adgytec/adgytec-web-ui-components 2.1.5 → 2.1.7
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/NavigationScrollContainer.css +1 -1
- package/dist/assets/core9.css +1 -1
- package/dist/chunks/NavigationScrollContainer +1 -1
- package/dist/chunks/NavigationScrollContainer.map +1 -1
- package/dist/chunks/core8 +3 -3
- package/dist/chunks/core8.map +1 -1
- package/dist/chunks/core9.map +1 -1
- package/dist/components/Navigation/NavigationItem/NavigationButton/index.js +1 -1
- package/dist/components/Navigation/NavigationItem/NavigationButton/index.js.map +1 -1
- package/dist/components/Navigation/NavigationItem/NavigationLink/index.js +1 -1
- package/dist/components/Navigation/NavigationItem/NavigationLink/index.js.map +1 -1
- package/dist/src/components/Navigation/NavigationItem/core/navigationItem.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{.
|
|
1
|
+
@layer adgytec.comps{._container_1tvqz_2{padding-inline:var(--md-sys-layout-space-16);gap:var(--_md-navigation-items-gap);padding-block:calc(6 * var(--dp,1px));align-content:start;display:grid;overflow-y:auto}}
|
package/dist/assets/core9.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer adgytec.comps{.
|
|
1
|
+
@layer adgytec.comps{._navigation_157wr_9{--_md-navigation-background:var(--md-navigation-background,var(--md-sys-color-surface));--_md-navigation-drawer-background:var(--md-navigation-drawer-background,var(--md-sys-color-surface-container));--_background:var(--_md-navigation-background);background-color:var(--_background);border-radius:inherit;gap:calc(10 * var(--dp,1px));padding-block:var(--md-sys-layout-space-16);grid-template-rows:1fr;display:grid;position:absolute;inset:0}._navigation_157wr_9[data-modal]{--_background:var(--_md-navigation-drawer-background)}._navigation_157wr_9[data-header]{grid-template-rows:auto 1fr}._navigation_157wr_9[data-sub-nav]{opacity:0;transition:opacity var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration), translate var(--md-sys-motion-expressive-fast-effects) var(--md-sys-motion-expressive-fast-effects-duration);translate:-100%}@media (prefers-reduced-motion){._navigation_157wr_9[data-sub-nav]{transition:none}}._navigation_157wr_9[data-sub-nav][data-status=entered]{opacity:1;translate:0}._nav-header_157wr_62{align-items:center;gap:var(--md-sys-layout-space-8);padding-inline-start:var(--md-sys-layout-space-32);padding-inline-end:var(--md-sys-layout-space-24);display:flex}._nav-header_157wr_62>[data-close-button]{margin-inline-start:auto}._sub-nav-header_157wr_76{align-items:center;gap:var(--md-sys-layout-space-8);padding-inline-start:var(--md-sys-layout-space-24);padding-inline-end:var(--md-sys-layout-space-32);display:flex}}
|
|
@@ -4,7 +4,7 @@ import r from "clsx";
|
|
|
4
4
|
import { useLayoutEffect as i } from "react";
|
|
5
5
|
import { jsx as a } from "react/jsx-runtime";
|
|
6
6
|
import { useObjectRef as o } from "react-aria";
|
|
7
|
-
import '../assets/NavigationScrollContainer.css';var s = { container: "
|
|
7
|
+
import '../assets/NavigationScrollContainer.css';var s = { container: "_container_1tvqz_2" }, c = ({ ref: c, className: l, ...u }) => {
|
|
8
8
|
let d = o(c), { registerNavigationContainer: f, saveNavigationScrollTopProgress: p } = t(), { id: m } = n();
|
|
9
9
|
return i(() => {
|
|
10
10
|
let e = d.current;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationScrollContainer","names":[],"sources":["../../src/components/Navigation/NavigationScrollContainer/navigationScrollContainer.module.css","../../src/components/Navigation/NavigationScrollContainer/NavigationScrollContainer.tsx"],"sourcesContent":["@layer adgytec.comps {\n .container {\n padding-inline: var(--md-sys-layout-space-16);\n overflow-y: auto;\n\n display: grid;\n gap: var(--_md-navigation-items-gap);\n align-content: start;\n }\n}\n","import clsx from \"clsx\";\nimport { useLayoutEffect } from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { getScrollProgress } from \"@/utils\";\nimport { useNavigationInfo } from \"../core\";\nimport { useNavigationState } from \"../NavigationState\";\nimport styles from \"./navigationScrollContainer.module.css\";\n\nexport const NavigationScrollContainer: React.FC<\n React.ComponentPropsWithRef<\"div\">\n> = ({ ref, className, ...props }) => {\n const scrollContainerRef = useObjectRef(ref);\n\n const { registerNavigationContainer, saveNavigationScrollTopProgress } =\n useNavigationState();\n const { id } = useNavigationInfo();\n\n useLayoutEffect(() => {\n const container = scrollContainerRef.current;\n if (!container) {\n return;\n }\n\n return registerNavigationContainer(id, container);\n }, [scrollContainerRef, id, registerNavigationContainer]);\n\n return (\n <div\n ref={scrollContainerRef}\n onScroll={(e) => {\n saveNavigationScrollTopProgress(\n id,\n getScrollProgress({\n scrollHeight: e.currentTarget.scrollHeight,\n clientHeight: e.currentTarget.clientHeight,\n scrollTop: e.currentTarget.scrollTop,\n })\n );\n }}\n className={clsx(styles[\"container\"], className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;6CCQa,KAER,EAAE,QAAK,cAAW,GAAG,QAAY;CAClC,IAAM,IAAqB,EAAa,CAAG,GAErC,EAAE,gCAA6B,uCACjC,EAAmB,GACjB,EAAE,UAAO,EAAkB;CAWjC,OATA,QAAsB;EAClB,IAAM,IAAY,EAAmB;EAChC,OAIL,OAAO,EAA4B,GAAI,CAAS;CACpD,GAAG;EAAC;EAAoB;EAAI;CAA2B,CAAC,GAGpD,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,MAAM;GACb,EACI,GACA,EAAkB;IACd,cAAc,EAAE,cAAc;IAC9B,cAAc,EAAE,cAAc;IAC9B,WAAW,EAAE,cAAc;GAC/B,CAAC,CACL;EACJ;EACA,WAAW,EAAK,EAAO,WAAc,CAAS;EAC9C,GAAI;CACP,CAAA;AAET"}
|
|
1
|
+
{"version":3,"file":"NavigationScrollContainer","names":[],"sources":["../../src/components/Navigation/NavigationScrollContainer/navigationScrollContainer.module.css","../../src/components/Navigation/NavigationScrollContainer/NavigationScrollContainer.tsx"],"sourcesContent":["@layer adgytec.comps {\n .container {\n padding-inline: var(--md-sys-layout-space-16);\n overflow-y: auto;\n\n display: grid;\n gap: var(--_md-navigation-items-gap);\n align-content: start;\n\n /* 2dp for focus outline offset and 3dp for focus outline width + 1dp to prevent clipping */\n padding-block: calc(6 * var(--dp, 1px));\n }\n}\n","import clsx from \"clsx\";\nimport { useLayoutEffect } from \"react\";\nimport { useObjectRef } from \"react-aria\";\nimport { getScrollProgress } from \"@/utils\";\nimport { useNavigationInfo } from \"../core\";\nimport { useNavigationState } from \"../NavigationState\";\nimport styles from \"./navigationScrollContainer.module.css\";\n\nexport const NavigationScrollContainer: React.FC<\n React.ComponentPropsWithRef<\"div\">\n> = ({ ref, className, ...props }) => {\n const scrollContainerRef = useObjectRef(ref);\n\n const { registerNavigationContainer, saveNavigationScrollTopProgress } =\n useNavigationState();\n const { id } = useNavigationInfo();\n\n useLayoutEffect(() => {\n const container = scrollContainerRef.current;\n if (!container) {\n return;\n }\n\n return registerNavigationContainer(id, container);\n }, [scrollContainerRef, id, registerNavigationContainer]);\n\n return (\n <div\n ref={scrollContainerRef}\n onScroll={(e) => {\n saveNavigationScrollTopProgress(\n id,\n getScrollProgress({\n scrollHeight: e.currentTarget.scrollHeight,\n clientHeight: e.currentTarget.clientHeight,\n scrollTop: e.currentTarget.scrollTop,\n })\n );\n }}\n className={clsx(styles[\"container\"], className)}\n {...props}\n />\n );\n};\n"],"mappings":";;;;;;6CCQa,KAER,EAAE,QAAK,cAAW,GAAG,QAAY;CAClC,IAAM,IAAqB,EAAa,CAAG,GAErC,EAAE,gCAA6B,uCACjC,EAAmB,GACjB,EAAE,UAAO,EAAkB;CAWjC,OATA,QAAsB;EAClB,IAAM,IAAY,EAAmB;EAChC,OAIL,OAAO,EAA4B,GAAI,CAAS;CACpD,GAAG;EAAC;EAAoB;EAAI;CAA2B,CAAC,GAGpD,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,MAAM;GACb,EACI,GACA,EAAkB;IACd,cAAc,EAAE,cAAc;IAC9B,cAAc,EAAE,cAAc;IAC9B,WAAW,EAAE,cAAc;GAC/B,CAAC,CACL;EACJ;EACA,WAAW,EAAK,EAAO,WAAc,CAAS;EAC9C,GAAI;CACP,CAAA;AAET"}
|
package/dist/chunks/core8
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { createContext as e, useContext as t } from "react";
|
|
2
2
|
import '../assets/core9.css';var n = {
|
|
3
|
-
navigation: "
|
|
4
|
-
"nav-header": "_nav-
|
|
5
|
-
"sub-nav-header": "_sub-nav-
|
|
3
|
+
navigation: "_navigation_157wr_9",
|
|
4
|
+
"nav-header": "_nav-header_157wr_62",
|
|
5
|
+
"sub-nav-header": "_sub-nav-header_157wr_76"
|
|
6
6
|
}, r = n.navigation, i = n["nav-header"], a = n["sub-nav-header"], o = e(null);
|
|
7
7
|
function s() {
|
|
8
8
|
let e = t(o);
|
package/dist/chunks/core8.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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(--
|
|
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: calc(10 * var(--dp, 1px));\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.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 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"}
|
|
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 | ((value?: string) => boolean);\n}\n\nexport const NavigationItemLabelTypography = typography.titleSmall;\nexport const NavigationItemStyles = styles[\"item\"];\n"],"mappings":";oCCYa,IAAgC,EAAW,YAC3C,IAAuB,EAAO"}
|
|
@@ -8,7 +8,7 @@ import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
|
8
8
|
import { Button as l } from "react-aria-components";
|
|
9
9
|
//#region src/components/Navigation/NavigationItem/NavigationButton/NavigationButton.tsx
|
|
10
10
|
var u = ({ className: u, icon: d, activeIcon: f, label: p, prefix: m, isActive: h, ...g }) => {
|
|
11
|
-
let { isButtonActive: _ } = t(), v = h ?? _?.(m), y = o(e), b = p ?? y;
|
|
11
|
+
let { isButtonActive: _ } = t(), v = typeof h == "function" ? h(m) : h ?? _?.(m), y = o(e), b = p ?? y;
|
|
12
12
|
return /* @__PURE__ */ c(l, {
|
|
13
13
|
className: (e) => a(n, r, typeof u == "function" ? u(e) : u),
|
|
14
14
|
...g,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Navigation/NavigationItem/NavigationButton/NavigationButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Button } from \"react-aria-components\";\nimport { NavLabelContext } from \"../../core\";\nimport { useNavigationContext } from \"../../Navigation/navContext\";\nimport { NavigationItemLabelTypography, NavigationItemStyles } from \"../core\";\nimport { NavigationItemIconRenderer } from \"../NavigationItemIconRenderer\";\nimport type { NavigationButtonProps } from \"./types\";\n\nexport const NavigationButton: React.FC<NavigationButtonProps> = ({\n className,\n icon,\n activeIcon,\n label,\n prefix,\n isActive,\n ...props\n}) => {\n const { isButtonActive } = useNavigationContext();\n const buttonActive
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Navigation/NavigationItem/NavigationButton/NavigationButton.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { Button } from \"react-aria-components\";\nimport { NavLabelContext } from \"../../core\";\nimport { useNavigationContext } from \"../../Navigation/navContext\";\nimport { NavigationItemLabelTypography, NavigationItemStyles } from \"../core\";\nimport { NavigationItemIconRenderer } from \"../NavigationItemIconRenderer\";\nimport type { NavigationButtonProps } from \"./types\";\n\nexport const NavigationButton: React.FC<NavigationButtonProps> = ({\n className,\n icon,\n activeIcon,\n label,\n prefix,\n isActive,\n ...props\n}) => {\n const { isButtonActive } = useNavigationContext();\n const buttonActive =\n typeof isActive === \"function\"\n ? isActive(prefix)\n : (isActive ?? isButtonActive?.(prefix));\n\n const triggerLabel = useContext(NavLabelContext);\n const buttonLabel = label ?? triggerLabel;\n\n return (\n <Button\n className={(renderProps) =>\n clsx(\n NavigationItemStyles,\n NavigationItemLabelTypography,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n {...props}\n slot=\"open\"\n data-active={buttonActive || undefined}\n >\n <NavigationItemIconRenderer\n icon={icon}\n activeIcon={activeIcon}\n isActive={buttonActive}\n />\n {buttonLabel}\n </Button>\n );\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,KAAqD,EAC9D,cACA,SACA,eACA,UACA,WACA,aACA,GAAG,QACD;CACF,IAAM,EAAE,sBAAmB,EAAqB,GAC1C,IACF,OAAO,KAAa,aACd,EAAS,CAAM,IACd,KAAY,IAAiB,CAAM,GAExC,IAAe,EAAW,CAAe,GACzC,IAAc,KAAS;CAE7B,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEJ,GAAI;EACJ,MAAK;EACL,eAAa,KAAgB,KAAA;YAZjC,CAcI,kBAAC,GAAD;GACU;GACM;GACZ,UAAU;EACb,CAAA,GACA,CACG;;AAEhB"}
|
|
@@ -6,7 +6,7 @@ import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
|
6
6
|
import { Link as s } from "react-aria-components";
|
|
7
7
|
//#region src/components/Navigation/NavigationItem/NavigationLink/NavigationLink.tsx
|
|
8
8
|
var c = ({ className: c, icon: l, activeIcon: u, label: d, href: f, isActive: p, ...m }) => {
|
|
9
|
-
let { isLinkActive: h } = e(), g = p ?? h?.(f);
|
|
9
|
+
let { isLinkActive: h } = e(), g = typeof p == "function" ? p(f) : p ?? h?.(f);
|
|
10
10
|
return /* @__PURE__ */ o(s, {
|
|
11
11
|
className: (e) => i(t, n, typeof c == "function" ? c(e) : c),
|
|
12
12
|
href: f,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Navigation/NavigationItem/NavigationLink/NavigationLink.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Link } from \"react-aria-components\";\nimport { useNavigationContext } from \"../../Navigation/navContext\";\nimport { NavigationItemLabelTypography, NavigationItemStyles } from \"../core\";\nimport { NavigationItemIconRenderer } from \"../NavigationItemIconRenderer\";\nimport type { NavigationLinkProps } from \"./types\";\n\nexport const NavigationLink: React.FC<NavigationLinkProps> = ({\n className,\n icon,\n activeIcon,\n label,\n href,\n isActive,\n ...props\n}) => {\n const { isLinkActive } = useNavigationContext();\n const linkActive
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../../src/components/Navigation/NavigationItem/NavigationLink/NavigationLink.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { Link } from \"react-aria-components\";\nimport { useNavigationContext } from \"../../Navigation/navContext\";\nimport { NavigationItemLabelTypography, NavigationItemStyles } from \"../core\";\nimport { NavigationItemIconRenderer } from \"../NavigationItemIconRenderer\";\nimport type { NavigationLinkProps } from \"./types\";\n\nexport const NavigationLink: React.FC<NavigationLinkProps> = ({\n className,\n icon,\n activeIcon,\n label,\n href,\n isActive,\n ...props\n}) => {\n const { isLinkActive } = useNavigationContext();\n const linkActive =\n typeof isActive === \"function\"\n ? isActive(href)\n : (isActive ?? isLinkActive?.(href));\n\n return (\n <Link\n className={(renderProps) =>\n clsx(\n NavigationItemStyles,\n NavigationItemLabelTypography,\n typeof className === \"function\"\n ? className(renderProps)\n : className\n )\n }\n href={href}\n {...props}\n data-active={linkActive || undefined}\n >\n <NavigationItemIconRenderer\n icon={icon}\n activeIcon={activeIcon}\n isActive={linkActive}\n />\n {label}\n </Link>\n );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,KAAiD,EAC1D,cACA,SACA,eACA,UACA,SACA,aACA,GAAG,QACD;CACF,IAAM,EAAE,oBAAiB,EAAqB,GACxC,IACF,OAAO,KAAa,aACd,EAAS,CAAI,IACZ,KAAY,IAAe,CAAI;CAE1C,OACI,kBAAC,GAAD;EACI,YAAY,MACR,EACI,GACA,GACA,OAAO,KAAc,aACf,EAAU,CAAW,IACrB,CACV;EAEE;EACN,GAAI;EACJ,eAAa,KAAc,KAAA;YAZ/B,CAcI,kBAAC,GAAD;GACU;GACM;GACZ,UAAU;EACb,CAAA,GACA,CACC;;AAEd"}
|
|
@@ -4,7 +4,7 @@ export interface NavigationItemProps {
|
|
|
4
4
|
label: ReactNode;
|
|
5
5
|
icon?: LucideIcon;
|
|
6
6
|
activeIcon?: LucideIcon;
|
|
7
|
-
isActive?: boolean;
|
|
7
|
+
isActive?: boolean | ((value?: string) => boolean);
|
|
8
8
|
}
|
|
9
9
|
export declare const NavigationItemLabelTypography: "typography-title-small";
|
|
10
10
|
export declare const NavigationItemStyles: string;
|