@atom-learning/components 1.14.1 → 1.16.0

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## [1.14.1](https://github.com/Atom-Learning/components/compare/v1.14.0...v1.14.1) (2022-06-08)
+# [1.16.0](https://github.com/Atom-Learning/components/compare/v1.15.0...v1.16.0) (2022-06-20)
 
 
-### Bug Fixes
+### Features
 
-* the ProgressBar now accepts absolute values and calculates the percentage based on them ([a62e04b](https://github.com/Atom-Learning/components/commit/a62e04b02d3666276a156f4f2ad15b4848397063))
+* made the minItemSize prop optional and allow gridTemplateColumns property to be overridden ([d3bd25b](https://github.com/Atom-Learning/components/commit/d3bd25b1e8c14ee5866fde649c35dc0b92013d68))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/alert-dialog/AlertDialogContent.js

@@ -1 +1 @@
-import{Overlay as s,Content as l}from"@radix-ui/react-alert-dialog";import{createElement as t,Fragment as m}from"react";import{keyframes as e,styled as n}from"../../stitches.js";import{fadeIn as d,fadeOut as c}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",a="translate3d(-50%, 50vh, 0)",f=e({"0%":{transform:a},"100%":{transform:o}}),p=e({"0%":{transform:o},"100%":{transform:a}}),u=n(s,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${d} 250ms ease-out`},'&[data-state="closed"]':{animation:`${c} 550ms ease-out`}}}),b=n(l,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${f} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${p} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),x=({size:i="sm",...r})=>t(m,null,t(u,null),t(b,{size:i,...r}));export{x as AlertDialogContent};
+import{Overlay as l,Content as d,Portal as m}from"@radix-ui/react-alert-dialog";import{createElement as t}from"react";import{DIALOG_Z_INDEX as e}from"../../constants/dialog.js";import{keyframes as n,styled as a}from"../../stitches.js";import{fadeIn as c,fadeOut as f}from"../../utilities/style/keyframe-animations.js";const o="translate3d(-50%, -50%, 0)",i="translate3d(-50%, 50vh, 0)",p=n({"0%":{transform:i},"100%":{transform:o}}),u=n({"0%":{transform:o},"100%":{transform:i}}),x=a(l,{backgroundColor:"$alpha600",inset:0,position:"fixed",zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${c} 250ms ease-out`},'&[data-state="closed"]':{animation:`${f} 550ms ease-out`}}}),b=a(d,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:o,"&:focus":{outline:"none"},zIndex:e,"@allowMotion":{'&[data-state="open"]':{animation:`${p} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${u} 550ms cubic-bezier(0.22, 1, 0.36, 1)`}},variants:{size:{sm:{width:"380px"},md:{width:"480px"},lg:{width:"600px"}}}}),h=({size:r="sm",...s})=>t(m,null,t(x,null),t(b,{size:r,...s}));export{h as AlertDialogContent};

package/dist/components/dialog/DialogContent.js

@@ -1 +1 @@
-import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as h,Close as g}from"@radix-ui/react-dialog";import{createElement as o}from"react";import{keyframes as n,styled as i}from"../../stitches.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as v}from"../icon/Icon.js";import{fadeIn as $,fadeOut as I}from"../../utilities/style/keyframe-animations.js";const t="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",r="modal_overlay",l=2147483646,O=n({"0%":{transform:s},"100%":{transform:t}}),y=n({"0%":{transform:t},"100%":{transform:s}}),C=i(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:l,"@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${I} 550ms ease-out`}}}),D=i(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:t,zIndex:l,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 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"}}}}),z=({size:d="sm",children:m,closeDialogText:c="Close dialog",showCloseButton:f=!0,...p})=>o(h,null,o(C,{id:r},o(D,{size:d,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==r&&e.preventDefault()},...p},f&&o(w,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},o(v,{is:u})),m)));export{z as DialogContent};
+import{Close as u}from"@atom-learning/icons";import{Overlay as x,Content as b,Portal as h,Close as g}from"@radix-ui/react-dialog";import{createElement as o}from"react";import{DIALOG_Z_INDEX as n}from"../../constants/dialog.js";import{keyframes as i,styled as r}from"../../stitches.js";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Icon as v}from"../icon/Icon.js";import{fadeIn as $,fadeOut as I}from"../../utilities/style/keyframe-animations.js";const t="translate3d(-50%, -50%, 0)",s="translate3d(-50%, 50vh, 0)",l="modal_overlay",O=i({"0%":{transform:s},"100%":{transform:t}}),y=i({"0%":{transform:t},"100%":{transform:s}}),C=r(x,{backgroundColor:"$alpha600",inset:0,position:"fixed",overflowY:"auto",zIndex:n,"@allowMotion":{'&[data-state="open"]':{animation:`${$} 250ms ease-out`},'&[data-state="closed"]':{animation:`${I} 550ms ease-out`}}}),D=r(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:t,zIndex:n,"&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${O} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${y} 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"}}}}),z=({size:m="sm",children:d,closeDialogText:c="Close dialog",showCloseButton:f=!0,...p})=>o(h,null,o(C,{id:l},o(D,{size:m,"aria-label":"Dialog",onPointerDownOutside:e=>{const a=e.target;(a==null?void 0:a.id)!==l&&e.preventDefault()},...p},f&&o(w,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:c,size:"lg",theme:"neutral"},o(v,{is:u})),d)));export{z as DialogContent};

package/dist/components/grid/Grid.d.ts

@@ -267,7 +267,7 @@ declare const GridContainer: import("@stitches/react/types/styled-component").St
     };
 }>>;
 declare type GridProps = React.ComponentProps<typeof GridContainer> & {
-    minItemSize: string;
+    minItemSize?: string;
     maxItemSize?: string;
 };
 export declare const Grid: React.FC<GridProps>;

package/dist/components/grid/Grid.js

@@ -1 +1 @@
-import{createElement as s}from"react";import{theme as m,styled as o}from"../../stitches.js";const d=Object.keys(m.space).reduce((a,e)=>({...a,[e]:{gap:`$space$${e}`}}),{}),c=o("div",{display:"grid",variants:{gap:d}}),t=({css:a,gap:e=2,minItemSize:r,maxItemSize:i="1fr",...p})=>s(c,{css:{...a,gridTemplateColumns:`repeat(auto-fit, minmax(${r}, ${i}))`},gap:e,...p});t.displayName="Grid";export{t as Grid};
+import{createElement as i}from"react";import{theme as o,styled as d}from"../../stitches.js";const c=Object.keys(o.space).reduce((e,a)=>({...e,[a]:{gap:`$space$${a}`}}),{}),m=d("div",{display:"grid",variants:{gap:c}}),t=({css:e,gap:a=2,minItemSize:r,maxItemSize:p="1fr",...s})=>i(m,{css:{...r&&{gridTemplateColumns:`repeat(auto-fit, minmax(${r}, ${p}))`},...e},gap:a,...s});t.displayName="Grid";export{t as Grid};

package/dist/components/table/TableBody.d.ts

@@ -1,4 +1,7 @@
-export declare const TableBody: import("@stitches/react/types/styled-component").StyledComponent<"tbody", {}, {
+import * as React from 'react';
+declare const StyledTableBody: import("@stitches/react/types/styled-component").StyledComponent<"tbody", {
+    striped?: boolean | "true" | "false" | undefined;
+}, {
     sm: string;
     md: string;
     lg: string;
@@ -263,3 +266,6 @@ export declare const TableBody: import("@stitches/react/types/styled-component")
         };
     };
 }>>;
+declare type TableBodyProps = React.ComponentProps<typeof StyledTableBody>;
+export declare const TableBody: React.FC<TableBodyProps>;
+export {};

package/dist/components/table/TableBody.js

@@ -1 +1 @@
-import{styled as d}from"../../stitches.js";const o=d("tbody",{});o.displayName="TableBody";export{o as TableBody};
+import{styled as d}from"../../stitches.js";import{createElement as l}from"react";import{TableRow as r}from"./TableRow.js";const a=d("tbody",{variants:{striped:{true:{[`${r}`]:{"&:nth-child(odd)":{bg:"white"},"&:nth-child(even)":{bg:"$tonal50"}}},false:{bg:"white"}}}}),e=({striped:t=!0,...o})=>l(a,{striped:t,...o});e.displayName="TableBody";export{e as TableBody};

package/dist/components/table/TableCell.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";const l=t("td",{borderBottom:"1px solid $tonal100",boxSizing:"border-box",color:"$tonal400",fontFamily:"$body",lineHeight:1.5,p:"$2 $3",textAlign:"left",verticalAlign:"middle","&:first-child":{fontWeight:"bold"},"tr:nth-child(odd) &":{bg:"white"},"tr:nth-child(even) &":{bg:"$tonal50"}});l.displayName="TableCell";export{l as TableCell};
+import{styled as o}from"../../stitches.js";const l=o("td",{borderBottom:"1px solid $tonal100",boxSizing:"border-box",color:"$tonal400",fontFamily:"$body",lineHeight:1.5,p:"$2 $3",textAlign:"left",verticalAlign:"middle","&:first-child":{fontWeight:"bold"}});l.displayName="TableCell";export{l as TableCell};

package/dist/components/table/TableHeader.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const StyledTableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {
-    theme?: "primary" | "primaryDark" | undefined;
+    theme?: "primary" | "primaryDark" | "light" | undefined;
 }, {
     sm: string;
     md: string;

package/dist/components/table/TableHeader.js

@@ -1 +1 @@
-import t from"react";import{styled as i}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const l=i("thead",{variants:{theme:{primary:{[`${r}`]:{bg:"$primary"}},primaryDark:{[`${r}`]:{bg:"$primaryDark"}}}}}),e=({theme:a="primaryDark",...m})=>t.createElement(l,{theme:a,...m});e.displayName="TableHeader";export{e as TableHeader};
+import l from"react";import{styled as m}from"../../stitches.js";import{TableHeaderCell as r}from"./TableHeaderCell.js";const o=m("thead",{variants:{theme:{primary:{[`${r}`]:{bg:"$primary"}},primaryDark:{[`${r}`]:{bg:"$primaryDark"}},light:{[`${r}`]:{bg:"$tonal50",color:"$tonal600"}}}}}),a=({theme:e="primaryDark",...t})=>l.createElement(o,{theme:e,...t});a.displayName="TableHeader";export{a as TableHeader};

package/dist/constants/dialog.d.ts

@@ -0,0 +1 @@
+export declare const DIALOG_Z_INDEX = 2147483646;

package/dist/constants/dialog.js

@@ -0,0 +1 @@
+const o=2147483646;export{o as DIALOG_Z_INDEX};