@atom-learning/components 2.14.0 → 2.16.0

package/CHANGELOG.md

@@ -1,9 +1,14 @@
-# [2.14.0](https://github.com/Atom-Learning/components/compare/v2.13.0...v2.14.0) (2022-11-11)
+# [2.16.0](https://github.com/Atom-Learning/components/compare/v2.15.0...v2.16.0) (2022-11-16)
 
 
 ### Features
 
-* replace span element in link buttons with noCapsize ([5b5ff70](https://github.com/Atom-Learning/components/commit/5b5ff70b5e1e3d13287ea65610a8d41dfc90752f))
+* navigation-menu - custom trigger improvements to match api pattern ([de81014](https://github.com/Atom-Learning/components/commit/de8101470683406ee76496f48e97eef8397ba140))
+* navigation-menu - trigger simplified ([ef0e18e](https://github.com/Atom-Learning/components/commit/ef0e18e4a3a4936e8d9c8b9acfb27de2ed7aea29))
+* navigation-menu cleanup ([d4956cc](https://github.com/Atom-Learning/components/commit/d4956cc10b888bb2bbe030663e1d1274e747c03d))
+* navigation-menu custom trigger component ([cbacdcd](https://github.com/Atom-Learning/components/commit/cbacdcd7b32b5e002f6a3a08a1206bc172c9e584))
+* navigation-menu mdx update ([46fb78e](https://github.com/Atom-Learning/components/commit/46fb78ebffae3d21e788b26ba99902b9a24b3cfc))
+* navigation-menu types improvements ([009101c](https://github.com/Atom-Learning/components/commit/009101cb74f4a6be0c4b47ad30d7c75df3bd1090))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/link/Link.js

@@ -1 +1 @@
-import*as e from"react";import{styled as f}from"../../stitches.js";import{StyledHeading as l}from"../heading/Heading.js";import{StyledLi as s}from"../list/List.js";import{StyledText as c,textVariants as d}from"../text/Text.js";const r=f("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${c} > &, ${l} > &, ${s} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:d}),a=e.forwardRef(({size:o="md",onClick:m,href:t,...i},n)=>t?e.createElement(r,{size:o,...i,ref:n,href:t}):e.createElement(r,{as:"button",size:o,noCapsize:!0,...i,ref:n,onClick:m}));a.displayName="Link";export{a as Link,r as StyledLink};
+import*as r from"react";import{styled as m}from"../../stitches.js";import{StyledHeading as f}from"../heading/Heading.js";import{StyledLi as s}from"../list/List.js";import{StyledText as d,textVariants as l}from"../text/Text.js";const o=m("a",{bg:"unset",border:"unset",p:"unset",color:"$primary",cursor:"pointer",fontFamily:"$body",textDecoration:"none","&:focus, &:hover":{color:"$primaryMid",textDecoration:"underline"},"&:active":{color:"$primaryDark"},[`${d} > &, ${f} > &, ${s} > &`]:{fontSize:"100%",lineHeight:1,"&::before, &::after":{content:"none"}},variants:l}),t=r.forwardRef(({size:i="md",href:e,...n},a)=>r.createElement(o,{...!e&&{as:"button",noCapsize:!0},size:i,href:e,...n,ref:a}));t.displayName="Link";export{t as Link,o as StyledLink};

package/dist/components/navigation/NavigationMenu.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
 import { CSS } from '../../stitches';
 import { NavigationMenuDropdown } from './NavigationMenuDropdown';
-import { NavigationMenuDropdownContent, NavigationMenuDropdownItem, NavigationMenuDropdownItemTitle, NavigationMenuLink } from './NavigationMenuItem';
+import { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent';
+import { NavigationMenuDropdownItem, NavigationMenuDropdownItemTitle } from './NavigationMenuDropdownItem';
+import { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger';
+import { NavigationMenuLink } from './NavigationMenuLink';
 declare type NavigationMenuSubComponents = {
     Link: typeof NavigationMenuLink;
     Dropdown: typeof NavigationMenuDropdown;
     DropdownContent: typeof NavigationMenuDropdownContent;
     DropdownItem: typeof NavigationMenuDropdownItem;
     DropdownItemTitle: typeof NavigationMenuDropdownItemTitle;
+    DropdownTrigger: typeof NavigationMenuDropdownTrigger;
 };
 declare type NavigationMenuProps = {
     css?: CSS;

package/dist/components/navigation/NavigationMenu.js

@@ -1 +1 @@
-import*as l from"@radix-ui/react-navigation-menu";import t from"react";import{MAX_Z_INDEX as N}from"../../constants/zIndices.js";import{keyframes as w,styled as n}from"../../stitches.js";import{fadeOut as D}from"../../utilities/style/keyframe-animations.js";import{NavigationMenuContext as x}from"./NavigationMenuContext.js";import{NavigationMenuDropdown as E}from"./NavigationMenuDropdown.js";import{NavigationMenuLink as h,NavigationMenuDropdownContent as C,NavigationMenuDropdownItem as I,NavigationMenuDropdownItemTitle as $}from"./NavigationMenuItem.js";const L=w({"0%, 50%":{opacity:0},"100%":{opacity:1}}),T=n(l.Root,{display:"flex",justifyContent:"center",position:"relative"}),_=n(l.List,{all:"unset",display:"flex",justifyContent:"center",alignItems:"center",gap:"$1",listStyle:"none"}),k=n(l.Viewport,{zIndex:N}),S=n("div",{position:"absolute",left:0,top:"100%",width:"100%",display:"flex",justifyContent:"center"}),o=({children:f,css:m})=>{const[p,u]=t.useState(),[a,d]=t.useState(),[i,c]=t.useState(0),r=t.useRef(null),s=200;t.useLayoutEffect(()=>{r.current&&c(r.current.offsetWidth)},[]),t.useEffect(()=>{let e;return a===""&&(e=setTimeout(()=>u(null),s)),()=>{e!==null&&clearTimeout(e)}},[a]);const y=(e,v)=>{if(e&&i&&a===v){const g=i/2,M=i-e.offsetLeft-e.offsetWidth+e.offsetWidth/2;u(Math.round(g-M))}return e};return t.createElement(x.Provider,{value:{onNodeUpdate:y}},t.createElement(T,{onValueChange:d,css:m},t.createElement(_,{ref:r},f),t.createElement(S,null,t.createElement(k,{css:{transform:`translateX(${p||0}px)`,'&[data-state="open"]':{animation:`${L} ${s}ms ease`},'&[data-state="closed"]':{animation:`${D} ${s}ms ease-out`}}}))))};o.Link=h,o.Dropdown=E,o.DropdownContent=C,o.DropdownItem=I,o.DropdownItemTitle=$,o.displayName="NavigationMenu";export{o as NavigationMenu};
+import*as m from"@radix-ui/react-navigation-menu";import t from"react";import{MAX_Z_INDEX as N}from"../../constants/zIndices.js";import{keyframes as D,styled as n}from"../../stitches.js";import{fadeOut as M}from"../../utilities/style/keyframe-animations.js";import{NavigationMenuContext as E}from"./NavigationMenuContext.js";import{NavigationMenuDropdown as x}from"./NavigationMenuDropdown.js";import{NavigationMenuDropdownContent as h}from"./NavigationMenuDropdownContent.js";import{NavigationMenuDropdownItem as C,NavigationMenuDropdownItemTitle as I}from"./NavigationMenuDropdownItem.js";import{NavigationMenuDropdownTrigger as $}from"./NavigationMenuDropdownTrigger.js";import{NavigationMenuLink as T}from"./NavigationMenuLink.js";const L=D({"0%, 50%":{opacity:0},"100%":{opacity:1}}),_=n(m.Root,{display:"flex",justifyContent:"center",position:"relative"}),k=n(m.List,{all:"unset",display:"flex",justifyContent:"center",alignItems:"center",gap:"$1",listStyle:"none"}),S=n(m.Viewport,{zIndex:N}),j=n("div",{position:"absolute",left:0,top:"100%",width:"100%",display:"flex",justifyContent:"center"}),o=({children:f,css:u})=>{const[p,l]=t.useState(),[r,d]=t.useState(),[i,c]=t.useState(0),a=t.useRef(null),s=200;t.useLayoutEffect(()=>{a.current&&c(a.current.offsetWidth)},[]),t.useEffect(()=>{let e;return r===""&&(e=setTimeout(()=>l(null),s)),()=>{e!==null&&clearTimeout(e)}},[r]);const g=(e,y)=>{if(e&&i&&r===y){const v=i/2,w=i-e.offsetLeft-e.offsetWidth+e.offsetWidth/2;l(Math.round(v-w))}return e};return t.createElement(E.Provider,{value:{onNodeUpdate:g}},t.createElement(_,{onValueChange:d,css:u},t.createElement(k,{ref:a},f),t.createElement(j,null,t.createElement(S,{css:{transform:`translateX(${p||0}px)`,'&[data-state="open"]':{animation:`${L} ${s}ms ease`},'&[data-state="closed"]':{animation:`${M} ${s}ms ease-out`}}}))))};o.Link=T,o.Dropdown=x,o.DropdownContent=h,o.DropdownItem=C,o.DropdownItemTitle=I,o.DropdownTrigger=$,o.displayName="NavigationMenu";export{o as NavigationMenu};

package/dist/components/navigation/NavigationMenu.styles.d.ts

@@ -0,0 +1,50 @@
+export declare const navigationMenuDisabledItemStyles: {
+    background: string;
+    color: string;
+    opacity: string;
+    cursor: string;
+};
+export declare const navigationMenuBaseItemStyles: {
+    all: string;
+    position: string;
+    color: string;
+    outline: string;
+    cursor: string;
+    fontFamily: string;
+    userSelect: string;
+    padding: string;
+    borderRadius: string;
+    '&:hover': {
+        background: string;
+        color: string;
+    };
+    '&:active': {
+        background: string;
+        color: string;
+    };
+    '&:focus-visible': {
+        boxShadow: string;
+    };
+    '&:disabled': {
+        background: string;
+        color: string;
+        opacity: string;
+        cursor: string;
+    };
+};
+export declare const navigationMenuActiveItemStyles: {
+    fontWeight: string;
+    color: string;
+    '&::after': {
+        backgroundColor: string;
+        borderRadius: string;
+        bottom: number;
+        content: string;
+        display: string;
+        height: string;
+        left: string;
+        position: string;
+        transform: string;
+        width: string;
+    };
+};

package/dist/components/navigation/NavigationMenu.styles.js

@@ -0,0 +1 @@
+const o={background:"none",color:"$tonal400",opacity:"30%",cursor:"default"},t={all:"unset",position:"relative",color:"$tonal400",outline:"none",cursor:"pointer",fontFamily:"$body",userSelect:"none",padding:"$3",borderRadius:"$1","&:hover":{background:"$tonal50",color:"$tonal600"},"&:active":{background:"$tonal100",color:"$tonal600"},"&:focus-visible":{boxShadow:"inset 0 0 0 2px $colors$primary"},"&:disabled":{...o}},n={fontWeight:"600",color:"$tonal500","&::after":{backgroundColor:"$tonal500",borderRadius:"$1",bottom:0,content:"",display:"block",height:"2px",left:"50%",position:"absolute",transform:"translate(-50%,0)",width:"$2"}};export{n as navigationMenuActiveItemStyles,t as navigationMenuBaseItemStyles,o as navigationMenuDisabledItemStyles};

package/dist/components/navigation/NavigationMenuDropdown.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
+import { CSS } from '../../stitches';
 declare type NavigationMenuDropdownProps = {
-    title: string;
     active?: boolean;
+    css?: CSS;
+    id: string;
 } & React.HTMLProps<HTMLButtonElement>;
 export declare const NavigationMenuDropdown: React.FC<NavigationMenuDropdownProps>;
 export {};

package/dist/components/navigation/NavigationMenuDropdown.js

@@ -1 +1 @@
-import*as o from"@radix-ui/react-navigation-menu";import t from"react";import{styled as p}from"../../stitches.js";import{useNavigationMenuContext as m}from"./NavigationMenuContext.js";import{NavigationMenuDropdownTrigger as d}from"./NavigationMenuItem.js";const l=p(o.Content,{p:"$3",bg:"white",mt:"4px",boxShadow:"0px 3px 6px rgba(51, 51, 51, 0.15), 0px 3px 6px rgba(51, 51, 51, 0.2)",borderRadius:"$1"}),u=({children:r,title:e,...n})=>{const{onNodeUpdate:a}=m();return t.createElement(o.Item,{value:e},t.createElement(d,{...n,ref:i=>a(i,e)},e),t.createElement(l,null,r))};export{u as NavigationMenuDropdown};
+import*as l from"@radix-ui/react-navigation-menu";import n from"react";import{useNavigationMenuContext as u}from"./NavigationMenuContext.js";import{NavigationMenuDropdownContent as g}from"./NavigationMenuDropdownContent.js";import{NavigationMenuDropdownTrigger as s}from"./NavigationMenuDropdownTrigger.js";const i=({children:r,id:t,...a})=>{const{onNodeUpdate:p}=u();return n.createElement(l.Item,{value:t},n.Children.map(r,e=>{const o=n.isValidElement(e)&&e.type===s,d=n.isValidElement(e)&&e.type===g;if(!o&&!d)throw new Error('Only NavigationMenu.Trigger and NavigationMenu.Content can be the passed as a "children" of NavigationMenu.Dropdown');return o?n.cloneElement(e,{...a,ref:m=>p(m,t)}):e}))};i.displayName="NavigationMenuDropdown";export{i as NavigationMenuDropdown};

package/dist/components/navigation/NavigationMenuDropdownContent.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const NavigationMenuDropdownContent: {
+    ({ children }: {
+        children: any;
+    }): JSX.Element;
+    displayName: string;
+};

package/dist/components/navigation/NavigationMenuDropdownContent.js

@@ -0,0 +1 @@
+import*as p from"@radix-ui/react-navigation-menu";import t from"react";import{styled as o}from"../../stitches.js";const r=o("ul",{listStyle:"none"}),a=o(p.Content,{p:"$3",bg:"white",mt:"4px",boxShadow:"0px 3px 6px rgba(51, 51, 51, 0.15), 0px 3px 6px rgba(51, 51, 51, 0.2)",borderRadius:"$1"}),e=({children:n})=>t.createElement(a,null,t.createElement(r,null,n));e.displayName="NavigationMenuDropdownContent";export{e as NavigationMenuDropdownContent};

package/dist/components/navigation/{NavigationMenuItem.d.ts → NavigationMenuDropdownItem.d.ts}

@@ -1,5 +1,19 @@
 import React from 'react';
-import { CSS } from '../../stitches';
+export declare const NavigationMenuDropdownItem: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<{
+    href: string;
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+    variant?: "link" | "dropdownItem" | undefined;
+    css?: import("../../stitches").CSS | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>, "key" | "children" | keyof {
+    href: string;
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+    variant?: "link" | "dropdownItem" | undefined;
+    css?: import("../../stitches").CSS | undefined;
+}> & React.RefAttributes<HTMLAnchorElement>>;
 export declare const NavigationMenuDropdownItemTitle: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "key" | keyof React.HTMLAttributes<HTMLParagraphElement>> & {
     ref?: ((instance: HTMLParagraphElement | null) => void) | React.RefObject<HTMLParagraphElement> | null | undefined;
 }, "size" | "css" | "noCapsize"> & import("@stitches/react/types/styled-component").TransformProps<{
@@ -540,288 +554,3 @@ export declare const NavigationMenuDropdownItemTitle: import("@stitches/react/ty
         };
     };
 }>>;
-export declare const NavigationMenuDropdownTrigger: React.ForwardRefExoticComponent<{
-    active?: boolean | undefined;
-} & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLButtonElement>>;
-export declare const NavigationMenuDropdownContent: import("@stitches/react/types/styled-component").StyledComponent<"ul", {}, {
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, import("@stitches/react/types/css-util").CSS<{
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    reducedMotion: string;
-    allowMotion: string;
-    hover: string;
-}, {
-    colors: {
-        textForeground: any;
-        textSubtle: any;
-        textPlaceholder: any;
-        background: any;
-        backgroundAccent: any;
-        tonal50: any;
-        tonal100: any;
-        tonal200: any;
-        tonal300: any;
-        tonal400: any;
-        tonal500: any;
-        tonal600: any;
-        alpha100: any;
-        alpha150: any;
-        alpha200: any;
-        alpha250: any;
-        alpha600: any;
-        primaryLight: any;
-        primary: any;
-        primaryMid: any;
-        primaryDark: any;
-        secondary: any;
-        brandRed: any;
-        brandRedAccent: any;
-        brandGreen: any;
-        brandGreenAccent: any;
-        brandPurple: any;
-        brandPurpleAccent: any;
-        brandYellow: any;
-        brandYellowAccent: any;
-        successLight: any;
-        success: any;
-        successMid: any;
-        successDark: any;
-        dangerLight: any;
-        danger: any;
-        dangerMid: any;
-        dangerDark: any;
-        warningLight: any;
-        warning: any;
-        warningMid: any;
-        warningDark: any;
-        warningText: any;
-        subjectEnglish: any;
-        subjectMaths: any;
-        subjectScience: any;
-        subjectVerbalReasoning: any;
-        subjectNonVerbalReasoning: any;
-        subjectCreativeWriting: any;
-        subjectExamSkills: any;
-    };
-    space: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-        "4": any;
-        "5": any;
-        "6": any;
-        "7": any;
-        "8": any;
-        "9": any;
-    };
-    fontSizes: {
-        xs: any;
-        sm: any;
-        md: any;
-        lg: any;
-        xl: any;
-        "2xl": any;
-        "3xl": any;
-        "4xl": any;
-    };
-    fonts: {
-        sans: any;
-        mono: any;
-        display: any;
-        body: any;
-    };
-    sizes: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-        "4": any;
-        "5": any;
-        "6": any;
-        "7": any;
-        "8": any;
-    };
-    radii: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-        round: any;
-    };
-    shadows: {
-        "0": any;
-        "1": any;
-        "2": any;
-        "3": any;
-    };
-}, import("@stitches/react/types/config").DefaultThemeMap, {
-    bg: (value: {
-        readonly [$$PropertyValue]: "background";
-    }) => {
-        background: {
-            readonly [$$PropertyValue]: "background";
-        };
-    };
-    inset: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        top: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        right: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        bottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        left: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    size: (value: string | number | {
-        readonly [$$ScaleValue]: "size";
-    }) => {
-        height: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-        width: string | number | {
-            readonly [$$ScaleValue]: "size";
-        };
-    };
-    p: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        padding: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    pl: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    px: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    py: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        paddingTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        paddingBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    m: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        margin: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mt: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mr: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mb: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    ml: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    mx: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginLeft: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginRight: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-    my: (value: string | number | {
-        readonly [$$ScaleValue]: "space";
-    }) => {
-        marginTop: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-        marginBottom: string | number | {
-            readonly [$$ScaleValue]: "space";
-        };
-    };
-}>>;
-declare type NavigationMenuLinkProps = {
-    href: string;
-    active?: boolean;
-    disabled?: boolean;
-    variant?: 'link' | 'dropdownItem';
-    css?: CSS;
-};
-export declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLAnchorElement>>;
-export declare const NavigationMenuDropdownItem: React.ForwardRefExoticComponent<NavigationMenuLinkProps & {
-    children?: React.ReactNode;
-} & React.RefAttributes<HTMLAnchorElement>>;
-export {};

package/dist/components/navigation/NavigationMenuDropdownItem.js

@@ -0,0 +1 @@
+import o from"react";import{styled as a}from"../../stitches.js";import{Text as r}from"../text/Text.js";import{NavigationMenuLink as m}from"./NavigationMenuLink.js";const t=o.forwardRef((i,n)=>o.createElement(m,{ref:n,variant:"dropdownItem",...i})),e=a(r,{color:"$tonal500",fontWeight:600});t.displayName="NavigationMenuDropdownItem",e.displayName="NavigationMenuDropdownItemTitle";export{t as NavigationMenuDropdownItem,e as NavigationMenuDropdownItemTitle};

package/dist/components/navigation/NavigationMenuDropdownTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const NavigationMenuDropdownTrigger: React.ForwardRefExoticComponent<{
+    active?: boolean | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/navigation/NavigationMenuDropdownTrigger.js

@@ -0,0 +1 @@
+import{ChevronDown as i}from"@atom-learning/icons";import*as s from"@radix-ui/react-navigation-menu";import e from"react";import{styled as m}from"../../stitches.js";import{Icon as p}from"../icon/Icon.js";import{navigationMenuBaseItemStyles as d,navigationMenuActiveItemStyles as c}from"./NavigationMenu.styles.js";const f=m(s.Trigger,d,{display:"flex",alignItems:"center",borderRadius:"$1",justifyContent:"space-between",gap:"$1",'&[data-state="open"]':{background:"$tonal100"},variants:{active:{true:{...c}}}}),t=e.forwardRef(({children:r,active:o,...a},n)=>e.createElement(f,{active:o,...a,ref:n},r,e.createElement(p,{is:i,css:{"[data-state=open] &":{transform:"rotate(-180deg)"},"@media (prefers-reduced-motion: no-preference)":{transition:"transform .2s ease"}},size:"sm"})));t.displayName="NavigationMenuDropdownTrigger";export{t as NavigationMenuDropdownTrigger};

package/dist/components/navigation/NavigationMenuLink.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CSS } from '../../stitches';
+declare type NavigationMenuLinkProps = {
+    href: string;
+    active?: boolean;
+    disabled?: boolean;
+    variant?: 'link' | 'dropdownItem';
+    css?: CSS;
+};
+export declare const NavigationMenuLink: React.ForwardRefExoticComponent<NavigationMenuLinkProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export {};

package/dist/components/navigation/NavigationMenuLink.js

@@ -0,0 +1 @@
+import*as o from"@radix-ui/react-navigation-menu";import e from"react";import{styled as t}from"../../stitches.js";import{navigationMenuBaseItemStyles as n,navigationMenuDisabledItemStyles as p,navigationMenuActiveItemStyles as v}from"./NavigationMenu.styles.js";const u=t("button",{...n,...p}),y=t(o.Item),f=t(o.Link,n,{display:"block",textDecoration:"none",lineHeight:1,variants:{elementType:{dropdownItem:{"&[data-active]":{background:"$primaryLight",color:"$primary","*":{color:"$primary"},"&:hover":{background:"$tonal50"},"&:active":{background:"$tonal100"},"&:focus-visible":{boxShadow:"0 0 0 2px $colors$primary"}}},link:{"&[data-active]":{...v}}}}}),r=e.forwardRef(({children:a,href:l,disabled:m,css:s,variant:c="link",...i},d)=>m?e.createElement(u,{disabled:!0,...i},a):e.createElement(y,null,e.createElement(f,{href:l,ref:d,elementType:c,css:s,...i},a)));r.displayName="NavigationMenuLink";export{r as NavigationMenuLink};