@adgytec/adgytec-web-ui-components 2.1.6 → 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/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
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;
|