@atom-learning/components 2.1.0 → 2.2.0

package/CHANGELOG.md

@@ -1,10 +1,3 @@
-# [2.1.0](https://github.com/Atom-Learning/components/compare/v2.0.0...v2.1.0) (2022-09-09)
-
-
-### Features
-
-* inline message ([e973432](https://github.com/Atom-Learning/components/commit/e97343211f5ed65a53d3b82bba5157b3854161a5))
-
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 
 

package/dist/components/index.d.ts

@@ -57,3 +57,4 @@ export { ToastProvider, toast } from './toast';
 export { ToggleGroup } from './toggle-group';
 export { Tooltip } from './tooltip';
 export { Video } from './video';
+export { NavigationMenu } from './navigation';

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { CSS } from '../../stitches';
+import { NavigationMenuDropdown } from './NavigationMenuDropdown';
+import { NavigationMenuDropdownContent, NavigationMenuDropdownItem, NavigationMenuLink } from './NavigationMenuItem';
+declare type NavigationMenuSubComponents = {
+    Link: typeof NavigationMenuLink;
+    Dropdown: typeof NavigationMenuDropdown;
+    DropdownContent: typeof NavigationMenuDropdownContent;
+    DropdownItem: typeof NavigationMenuDropdownItem;
+};
+declare type NavigationMenuProps = {
+    css?: CSS;
+};
+export declare const NavigationMenu: React.FC<NavigationMenuProps> & NavigationMenuSubComponents;
+export {};

package/dist/components/navigation/NavigationMenu.js

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+interface NavigationMenuContextValue {
+    onNodeUpdate: (trigger: HTMLButtonElement, itemValue: string) => HTMLButtonElement;
+}
+export declare const NavigationMenuContext: React.Context<NavigationMenuContextValue | undefined>;
+export declare const useNavigationMenuContext: () => NavigationMenuContextValue;
+export {};

package/dist/components/navigation/NavigationMenuContext.js

@@ -0,0 +1 @@
+import e from"react";const o=e.createContext(void 0),n=()=>{const t=e.useContext(o);if(t===void 0)throw new Error("useNavigationMenuContext must be used within a NavigationMenuContextProvider");return t};export{o as NavigationMenuContext,n as useNavigationMenuContext};

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

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

package/dist/components/navigation/NavigationMenuDropdown.js

@@ -0,0 +1 @@
+import*as r 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(r.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:o,title:e,...n})=>{const{onNodeUpdate:a}=m();return t.createElement(r.Item,{value:e},t.createElement(d,{...n,ref:i=>a(i,e)},e),t.createElement(l,null,o))};export{u as NavigationMenuDropdown};

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

@@ -0,0 +1,287 @@
+import React from 'react';
+import { CSS } from '../../stitches';
+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/NavigationMenuItem.js

@@ -0,0 +1 @@
+import{ChevronDown as u}from"@atom-learning/icons";import*as d from"@radix-ui/react-navigation-menu";import e from"react";import{theme as b,styled as r}from"../../stitches.js";import{Icon as g}from"../icon/Icon.js";const s={fontWeight:"bold",color:"$tonal500","&::after":{backgroundColor:"$tonal500",borderRadius:"$1",bottom:0,content:"",display:"block",height:"2px",left:"50%",position:"absolute",transform:"translate(-50%,0)",width:"$2"}},c={background:"none",color:"$tonal400",opacity:"30%",cursor:"default"},i={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:`0 0 0 2px ${b.colors.primary}`},"&:disabled":{...c}},v=r(d.Trigger,i,{display:"flex",alignItems:"center",borderRadius:"$1",justifyContent:"space-between",gap:"$1",'&[data-state="open"]':{background:"$tonal100"},variants:{active:{true:{...s}}}}),$=r(d.Link,i,{display:"block",textDecoration:"none",lineHeight:1,variants:{elementType:{dropdownItem:{"&[data-active]":{background:"$primaryLight",color:"$primary"}},link:{"&[data-active]":{...s}}}}}),h=e.forwardRef(({children:o,active:t,...a},n)=>e.createElement(v,{active:t,...a,ref:n},o,e.createElement(g,{is:u,css:{"[data-state=open] &":{transform:"rotate(-180deg)"},"@media (prefers-reduced-motion: no-preference)":{transition:"transform .2s ease"}},size:"sm"}))),y=r("ul",{all:"unset"}),k=r("li",{all:"unset"}),w=r("button",{...i,...c}),m=e.forwardRef(({children:o,href:t,disabled:a,css:n,variant:p="link",...l},f)=>a?e.createElement(w,{disabled:!0,...l},o):e.createElement(k,null,e.createElement($,{href:t,ref:f,elementType:p,css:n,...l},o))),x=e.forwardRef((o,t)=>e.createElement(m,{ref:t,variant:"dropdownItem",...o}));export{y as NavigationMenuDropdownContent,x as NavigationMenuDropdownItem,h as NavigationMenuDropdownTrigger,m as NavigationMenuLink};

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

@@ -0,0 +1 @@
+export { NavigationMenu } from './NavigationMenu';