@atom-learning/components 2.7.0 → 2.8.0-beta.1

package/CHANGELOG.md

@@ -1,10 +1,3 @@
-# [2.7.0](https://github.com/Atom-Learning/components/compare/v2.6.1...v2.7.0) (2022-10-04)
-
-
-### Features
-
-* added util to create variants based on theme tokens ([0b4ffee](https://github.com/Atom-Learning/components/commit/0b4ffee35ac66e5006ef22ea85dd7c88d494519d))
-
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 
 

package/dist/components/accordion/Accordion.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 import { AccordionTrigger } from './AccordionTrigger';
-declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<(import("@radix-ui/react-accordion").AccordionSingleProps & React.RefAttributes<HTMLDivElement>) | (import("@radix-ui/react-accordion").AccordionMultipleProps & React.RefAttributes<HTMLDivElement>)>, {}, {
+declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<(import("@radix-ui/react-accordion").AccordionSingleProps | import("@radix-ui/react-accordion").AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>, {}, {
     sm: string;
     md: string;
     lg: string;

package/dist/components/dialog/DialogContent.js

@@ -1 +1 @@
-import{Close as h}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as w,Close as g}from"@radix-ui/react-dialog";import*as t from"react";import{DIALOG_Z_INDEX as r}from"../../constants/zIndices.js";import{keyframes as n,styled as l}from"../../stitches.js";import{ActionIcon as $}from"../action-icon/ActionIcon.js";import{Icon as v}from"../icon/Icon.js";import{DialogBackground as s}from"./DialogBackground.js";import{fadeIn as z,fadeOut as C}from"../../utilities/style/keyframe-animations.js";const e="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=n({"0%":{transform:m},"100%":{transform:e}}),I=n({"0%":{transform:e},"100%":{transform:m}}),y=l(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${z} 250ms ease-out`},'&[data-state="closed"]':{animation:`${C} 550ms ease-out`}}}),E=l(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),O=({size:p="sm",children:a,closeDialogText:f="Close dialog",showCloseButton:c=!0,...u})=>t.createElement(w,null,t.createElement(y,{id:d},t.Children.map(a,o=>(o==null?void 0:o.type)===s&&o),t.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:o=>{const i=o.target;(i==null?void 0:i.id)!==d&&o.preventDefault()},...u},c&&t.createElement($,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:f,size:"md",theme:"neutral"},t.createElement(v,{is:h})),t.Children.map(a,o=>(o==null?void 0:o.type)!==s&&o))));export{O as DialogContent};
+import{Close as h}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as w,Close as g}from"@radix-ui/react-dialog";import*as t from"react";import{DIALOG_Z_INDEX as r}from"../../constants/zIndices.js";import{keyframes as n,styled as l}from"../../stitches.js";import{ActionIcon as v}from"../action-icon/ActionIcon.js";import{Icon as $}from"../icon/Icon.js";import{DialogBackground as s}from"./DialogBackground.js";import{fadeIn as z,fadeOut as C}from"../../utilities/style/keyframe-animations.js";const e="translate3d(-50%, -50%, 0)",m="translate3d(-50%, 50vh, 0)",d="modal_overlay",D=n({"0%":{transform:m},"100%":{transform:e}}),I=n({"0%":{transform:e},"100%":{transform:m}}),y=l(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:r,"@allowMotion":{'&[data-state="open"]':{animation:`${z} 250ms ease-out`},'&[data-state="closed"]':{animation:`${C} 550ms ease-out`}}}),E=l(b,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",maxHeight:"90vh",overflowY:"auto",p:"$5",position:"fixed",top:"50%",transform:e,zIndex:r,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${D} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${I} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),O=({size:p="sm",children:a,closeDialogText:f="Close dialog",showCloseButton:c=!0,...u})=>t.createElement(w,null,t.createElement(y,{id:d},t.Children.map(a,o=>(o==null?void 0:o.type)===s&&o),t.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:o=>{const i=o.target;(i==null?void 0:i.id)!==d&&o.preventDefault()},...u},c&&t.createElement(v,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:f,size:"md",theme:"neutral"},t.createElement($,{is:h})),t.Children.map(a,o=>(o==null?void 0:o.type)!==s&&o))));export{O as DialogContent};

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -1,3 +1,4 @@
+import { Portal } from '@radix-ui/react-dropdown-menu';
 import React from 'react';
 import { DropdownMenuContent } from './DropdownMenuContent';
 import { DropdownMenuItem } from './DropdownMenuItem';
@@ -274,6 +275,7 @@ export declare const DropdownMenu: React.FC<React.ComponentProps<typeof Root>> &
     Content: typeof DropdownMenuContent;
     Item: typeof DropdownMenuItem;
     LinkItem: typeof DropdownMenuLinkItem;
+    Portal: typeof Portal;
     Separator: typeof DropdownMenuSeparator;
     Trigger: typeof DropdownMenuTrigger;
 };

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -1 +1 @@
-import{Root as t}from"@radix-ui/react-dropdown-menu";import e from"react";import{styled as m}from"../../stitches.js";import{DropdownMenuContent as n}from"./DropdownMenuContent.js";import{DropdownMenuItem as p}from"./DropdownMenuItem.js";import{DropdownMenuLinkItem as i}from"./DropdownMenuLinkItem.js";import{DropdownMenuSeparator as d}from"./DropdownMenuSeparator.js";import{DropdownMenuTrigger as f}from"./DropdownMenuTrigger.js";const u=m(t,{}),o=r=>e.createElement(u,{...r});o.Content=n,o.Item=p,o.LinkItem=i,o.Separator=d,o.Trigger=f;export{o as DropdownMenu};
+import{Root as t,Portal as e}from"@radix-ui/react-dropdown-menu";import m from"react";import{styled as n}from"../../stitches.js";import{DropdownMenuContent as p}from"./DropdownMenuContent.js";import{DropdownMenuItem as i}from"./DropdownMenuItem.js";import{DropdownMenuLinkItem as d}from"./DropdownMenuLinkItem.js";import{DropdownMenuSeparator as f}from"./DropdownMenuSeparator.js";import{DropdownMenuTrigger as a}from"./DropdownMenuTrigger.js";const u=n(t,{}),o=r=>m.createElement(u,{...r});o.Content=p,o.Item=i,o.LinkItem=d,o.Portal=e,o.Separator=f,o.Trigger=a;export{o as DropdownMenu};

package/dist/components/dropdown-menu/DropdownMenuContent.js

@@ -1 +1 @@
-import{Content as a}from"@radix-ui/react-dropdown-menu";import{styled as i}from"../../stitches.js";import{slideDownAndFade as t,slideLeftAndFade as o,slideUpAndFade as n,slideRightAndFade as e}from"../../utilities/style/keyframe-animations.js";const d=i(a,{bg:"white",borderRadius:"$0",boxShadow:"$0",py:"$2","@allowMotion":{animationDuration:"250ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:t},'&[data-side="right"]':{animationName:o},'&[data-side="bottom"]':{animationName:n},'&[data-side="left"]':{animationName:e}}}});export{d as DropdownMenuContent};
+import{Content as a}from"@radix-ui/react-dropdown-menu";import{DROPDOWN_Z_INDEX as i}from"../../constants/zIndices.js";import{styled as t}from"../../stitches.js";import{slideDownAndFade as o,slideLeftAndFade as n,slideUpAndFade as e,slideRightAndFade as d}from"../../utilities/style/keyframe-animations.js";const m=t(a,{bg:"white",borderRadius:"$0",boxShadow:"$0",py:"$2",zIndex:i,"@allowMotion":{animationDuration:"250ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:o},'&[data-side="right"]':{animationName:n},'&[data-side="bottom"]':{animationName:e},'&[data-side="left"]':{animationName:d}}}});export{m as DropdownMenuContent};

package/dist/components/popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import { Trigger } from '@radix-ui/react-popover';
+import { Portal, Trigger } from '@radix-ui/react-popover';
 import * as React from 'react';
 import { PopoverContent } from './PopoverContent';
 declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.FC<import("@radix-ui/react-popover").PopoverProps>, {}, {
@@ -271,5 +271,6 @@ declare type PopoverProps = React.ComponentProps<typeof StyledRoot>;
 export declare const Popover: React.FC<PopoverProps> & {
     Trigger: typeof Trigger;
     Content: typeof PopoverContent;
+    Portal: typeof Portal;
 };
 export {};

package/dist/components/popover/Popover.js

@@ -1 +1 @@
-import{Root as r,Trigger as t}from"@radix-ui/react-popover";import*as m from"react";import{styled as p}from"../../stitches.js";import{PopoverContent as i}from"./PopoverContent.js";p(r,{});const o=e=>m.createElement(r,{...e});o.Content=i,o.Trigger=t,o.displayName="Popover";export{o as Popover};
+import{Root as r,Portal as e,Trigger as m}from"@radix-ui/react-popover";import*as p from"react";import{styled as i}from"../../stitches.js";import{PopoverContent as a}from"./PopoverContent.js";i(r,{});const o=t=>p.createElement(r,{...t});o.Content=a,o.Portal=e,o.Trigger=m,o.displayName="Popover";export{o as Popover};

package/dist/components/toggle-group/ToggleGroupRoot.d.ts

@@ -6,7 +6,7 @@ declare type RootType = {
     isFullWidth?: boolean;
     wrap?: 'wrap' | 'no-wrap' | 'wrap-reverse';
 };
-export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<(ToggleGroup.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>) | (ToggleGroup.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>)>, {
+export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<(ToggleGroup.ToggleGroupSingleProps | ToggleGroup.ToggleGroupMultipleProps) & React.RefAttributes<HTMLDivElement>>, {
     isFullWidth?: boolean | "true" | undefined;
     hasGap?: boolean | "true" | "false" | undefined;
     direction?: "row" | "column" | undefined;

package/dist/components/tooltip/Tooltip.d.ts

@@ -1,9 +1,10 @@
-import { Provider, Root, Trigger } from '@radix-ui/react-tooltip';
+import { Portal, Provider, Root, Trigger } from '@radix-ui/react-tooltip';
 import * as React from 'react';
 import { TooltipContent } from './TooltipContent';
 declare type TooltipProps = React.ComponentProps<typeof Root>;
 export declare const Tooltip: React.FC<TooltipProps> & {
     Content: typeof TooltipContent;
+    Portal: typeof Portal;
     Trigger: typeof Trigger;
     Provider: typeof Provider;
 };

package/dist/components/tooltip/Tooltip.js

@@ -1 +1 @@
-import{Trigger as i,Root as m,Provider as l}from"@radix-ui/react-tooltip";import*as n from"react";import{styled as p}from"../../stitches.js";import{TooltipContent as a}from"./TooltipContent.js";const o=({children:r,delayDuration:t=350,...e})=>n.createElement(m,{delayDuration:t,...e},r);o.Content=a,o.Trigger=p(i,{}),o.Provider=l,o.displayName="Tooltip";export{o as Tooltip};
+import{Trigger as i,Root as l,Portal as a,Provider as m}from"@radix-ui/react-tooltip";import*as n from"react";import{styled as p}from"../../stitches.js";import{TooltipContent as d}from"./TooltipContent.js";const o=({children:r,delayDuration:t=350,...e})=>n.createElement(l,{delayDuration:t,...e},r);o.Content=d,o.Trigger=p(i,{}),o.Portal=a,o.Provider=m,o.displayName="Tooltip";export{o as Tooltip};

package/dist/components/tooltip/TooltipContent.js

@@ -1 +1 @@
-import{Content as m,Arrow as l}from"@radix-ui/react-tooltip";import*as t from"react";import{styled as a}from"../../stitches.js";import{slideDownAndFade as s,slideLeftAndFade as r,slideUpAndFade as p,slideRightAndFade as f}from"../../utilities/style/keyframe-animations.js";const c=a(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,px:"$3",py:"$2","@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:s},'&[data-side="right"]':{animationName:r},'&[data-side="bottom"]':{animationName:p},'&[data-side="left"]':{animationName:f}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),h=a(l,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),$=({children:i,side:e="top",sideOffset:o=4,size:n="md",...d})=>t.createElement(c,{side:e,sideOffset:o,size:n,...d},i,t.createElement(h,null));export{$ as TooltipContent};
+import{Content as m,Arrow as s}from"@radix-ui/react-tooltip";import*as t from"react";import{TOOLTIP_Z_INDEX as l}from"../../constants/zIndices.js";import{styled as a}from"../../stitches.js";import{slideDownAndFade as r,slideLeftAndFade as p,slideUpAndFade as f,slideRightAndFade as c}from"../../utilities/style/keyframe-animations.js";const $=a(m,{backgroundColor:"$tonal500",borderRadius:"$0",boxShadow:"$0",color:"white",fontFamily:"$body",fontSize:"$sm",lineHeight:1.5,px:"$3",py:"$2",zIndex:l,"@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="delayed-open"]':{'&[data-side="top"]':{animationName:r},'&[data-side="right"]':{animationName:p},'&[data-side="bottom"]':{animationName:f},'&[data-side="left"]':{animationName:c}}},variants:{size:{sm:{maxWidth:"100px"},md:{maxWidth:"250px"},lg:{maxWidth:"400px"}}}}),h=a(s,{fill:"$tonal500",'[data-align="end"] &':{mr:"$2"},'[data-align="start"] &':{ml:"$2"}}),x=({children:i,side:e="top",sideOffset:o=4,size:n="md",...d})=>t.createElement($,{side:e,sideOffset:o,size:n,...d},i,t.createElement(h,null));export{x as TooltipContent};

package/dist/constants/zIndices.d.ts

@@ -1,3 +1,5 @@
 declare const MAX_Z_INDEX = 2147483647;
 declare const DIALOG_Z_INDEX = 1147483646;
-export { MAX_Z_INDEX, DIALOG_Z_INDEX };
+declare const DROPDOWN_Z_INDEX = 10;
+declare const TOOLTIP_Z_INDEX = 10;
+export { MAX_Z_INDEX, DIALOG_Z_INDEX, DROPDOWN_Z_INDEX, TOOLTIP_Z_INDEX };

package/dist/constants/zIndices.js

@@ -1 +1 @@
-const _=2147483647,o=1147483646;export{o as DIALOG_Z_INDEX,_ as MAX_Z_INDEX};
+const _=2147483647,D=1147483646,I=10,s=10;export{D as DIALOG_Z_INDEX,I as DROPDOWN_Z_INDEX,_ as MAX_Z_INDEX,s as TOOLTIP_Z_INDEX};