@atom-learning/components 1.21.2 → 1.22.0

package/CHANGELOG.md

@@ -1,9 +1,9 @@
-## [1.21.2](https://github.com/Atom-Learning/components/compare/v1.21.1...v1.21.2) (2022-07-28)
+# [1.22.0](https://github.com/Atom-Learning/components/compare/v1.21.4...v1.22.0) (2022-07-29)
 
 
-### Bug Fixes
+### Features
 
-* button fullWidth=false to give width:max-content ([fe742fd](https://github.com/Atom-Learning/components/commit/fe742fd3cf029733187651cd80bb791317f21832))
+* focusVisibleStyleBlock export ([21366ab](https://github.com/Atom-Learning/components/commit/21366abeeca1421174bf74348da46bb386c3ca37))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/calendar/Calendar.js

@@ -1 +1 @@
-import{ChevronLeft as S,ChevronRight as B}from"@atom-learning/icons";import{useDayzed as I}from"dayzed";import*as e from"react";import{ActionIcon as h}from"../action-icon/ActionIcon.js";import{Box as g}from"../box/Box.js";import{Flex as y}from"../flex/Flex.js";import{Heading as M}from"../heading/Heading.js";import{Icon as u}from"../icon/Icon.js";import{Text as W}from"../text/Text.js";import{styled as j}from"../../stitches.js";import{monthNamesShort as A,weekdayNamesShort as F}from"./constants.js";import{Day as G}from"./Day.js";const $=j("div",{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gridGap:"$1 $2"}),H=(t,r)=>{const s=t.slice(0,r);return t.slice(r).concat(s)},E=({css:t,refDateSelected:r,refDateToday:s,firstDayOfWeek:l=0,monthNames:x=A,weekdayNames:k=F,labels:c={next:"Next month",previous:"Previous month"},...v})=>{const{calendars:o,getBackProps:D,getForwardProps:b,getDateProps:N}=I({firstDayOfWeek:l,showOutsideDays:!0,...v});return o.length?e.createElement(g,{css:{position:"relative",width:"min-content",mt:"-$1",...t}},e.createElement(y,{css:{position:"absolute",top:0,right:"-$1"}},e.createElement(h,{label:c.previous,theme:"neutral",size:"lg",...D({calendars:o})},e.createElement(u,{is:S})),e.createElement(h,{label:c.next,theme:"neutral",size:"lg",...b({calendars:o})},e.createElement(u,{is:B}))),o.map(({month:a,year:m,weeks:w})=>e.createElement(g,{key:`${a}${m}`},e.createElement(y,{css:{height:"$4",alignItems:"center",mb:"$4"}},e.createElement(M,{size:"xs"},x[a]," ",m)),e.createElement($,{css:{mb:"$3"}},H(k,l).map(n=>e.createElement(W,{as:"span",size:"sm",key:`${a}${m}${n}`,css:{fontWeight:600,textAlign:"center"}},n))),e.createElement($,null,w.map((n,z)=>n.map((i,C)=>{const d=`${a}${m}${z}${C}`;if(!i)return e.createElement("div",{key:d});const{date:O,selected:p,today:f,prevMonth:P,nextMonth:T}=i;return e.createElement(G,{isOutsideMonth:P||T,isSelected:p,isToday:f,key:d,ref:p?r:f?s:null,...N({dateObj:i})},O.getDate())})))))):null};E.displayName="Calendar";export{E as Calendar};
+import{ChevronLeft as I,ChevronRight as S}from"@atom-learning/icons";import{useDayzed as B}from"dayzed";import*as e from"react";import{ActionIcon as h}from"../action-icon/ActionIcon.js";import{Box as y}from"../box/Box.js";import{Flex as g}from"../flex/Flex.js";import{Heading as M}from"../heading/Heading.js";import{Icon as u}from"../icon/Icon.js";import{Text as W}from"../text/Text.js";import{styled as j}from"../../stitches.js";import{monthNamesShort as A,weekdayNamesShort as F}from"./constants.js";import{Day as G}from"./Day.js";const $=j("div",{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gridGap:"$1 $2"}),H=(t,r)=>{const s=t.slice(0,r);return t.slice(r).concat(s)},E=({css:t,refDateSelected:r,refDateToday:s,firstDayOfWeek:l=0,monthNames:x=A,weekdayNames:k=F,labels:c={next:"Next month",previous:"Previous month"},...v})=>{const{calendars:o,getBackProps:D,getForwardProps:b,getDateProps:N}=B({firstDayOfWeek:l,showOutsideDays:!0,...v});return o.length?e.createElement(y,{css:{position:"relative",width:"min-content",mt:"-$1",...t}},e.createElement(g,{css:{position:"absolute",top:0,right:"-$1"}},e.createElement(h,{label:c.previous,theme:"neutral",size:"lg",...D({calendars:o})},e.createElement(u,{is:I})),e.createElement(h,{label:c.next,theme:"neutral",size:"lg",...b({calendars:o})},e.createElement(u,{is:S}))),o.map(({month:a,year:m,weeks:w})=>e.createElement(y,{key:`${a}${m}`},e.createElement(g,{css:{height:"$4",alignItems:"center",mb:"$4"}},e.createElement(M,{size:"xs"},x[a]," ",m)),e.createElement($,{css:{mb:"$3"}},H(k,l).map(n=>e.createElement(W,{as:"span",size:"sm",key:`${a}${m}${n}`,css:{fontWeight:600,textAlign:"center"}},n))),e.createElement($,null,w.map((n,z)=>n.map((i,C)=>{const p=`${a}${m}${z}${C}`;if(!i)return e.createElement("div",{key:p});const{date:O,selected:d,today:f,prevMonth:P,nextMonth:T}=i;return e.createElement(G,{isOutsideMonth:P||T,isSelected:d,isToday:f,key:p,ref:d?r:f?s:null,...N({dateObj:i}),type:"button"},O.getDate())})))))):null};E.displayName="Calendar";export{E as Calendar};

package/dist/components/icon/Icon.js

@@ -1 +1 @@
-import*as e from"react";import{styled as n}from"../../stitches.js";const i=n("svg",{display:"inline-block",fill:"none",stroke:"currentcolor",strokeLinecap:"round",strokeLinejoin:"round",verticalAlign:"middle",variants:{size:{sm:{size:"$1",strokeWidth:"1.75"},md:{size:"$2",strokeWidth:"2"},lg:{size:"$3",strokeWidth:"2"}}}}),d=e.forwardRef(({is:r,size:o="md",...s},t)=>e.createElement(i,{size:o,"aria-hidden":"true",...s,as:r,ref:t}));export{d as Icon,i as StyledIcon};
+import*as e from"react";import{styled as n}from"../../stitches.js";const i=n("svg",{display:"inline-block",fill:"none",stroke:"currentcolor",strokeLinecap:"round",strokeLinejoin:"round",verticalAlign:"middle",variants:{size:{sm:{size:"$1",strokeWidth:"1.5"},md:{size:"$2",strokeWidth:"1.75"},lg:{size:"$3",strokeWidth:"2"}}}}),d=e.forwardRef(({is:r,size:o="md",...s},t)=>e.createElement(i,{size:o,"aria-hidden":"true",...s,as:r,ref:t}));export{d as Icon,i as StyledIcon};

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

@@ -531,4 +531,4 @@ export declare const StyledButton: import("@stitches/react/types/styled-componen
         };
     };
 }>>;
-export declare const ToggleGroupButton: React.FC<React.ComponentProps<typeof StyledButton>>;
+export declare const ToggleGroupButton: React.ForwardRefExoticComponent<React.ComponentProps<typeof StyledButton>>;

package/dist/components/toggle-group/ToggleGroupButton.js

@@ -1 +1 @@
-import*as n from"react";import{styled as a}from"../../stitches.js";import{StyledIcon as g,Icon as r}from"../icon/Icon.js";import{StyledItem as f}from"./ToggleGroupItem.js";const t={sm:"32px",md:"40px",lg:"48px"},h={sm:"$4",md:"$5",lg:"$5"},$={sm:"$2",md:"$3",lg:"$3"},l=i=>({fontSize:`$${i}`,px:h[i],minHeight:t[i],"& > *:not(:last-child)":{mr:$[i]}}),d=a(f,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",[`& ${g}`]:{flexShrink:0},variants:{size:{sm:l("sm"),md:l("md"),lg:l("lg")},isIconOnly:{true:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:t.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:t.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:t.lg,p:0}}]}),u=({size:i,children:p,...c})=>{var o;const s=n.Children.toArray(p),m=s.length<=1,y=m&&n.isValidElement(s[0])&&((o=s[0])==null?void 0:o.type)===r;return n.createElement(d,{size:i,isIconOnly:y,...c},s.map(e=>!m&&typeof e=="string"?n.createElement("span",{key:e},e):n.isValidElement(e)&&(e==null?void 0:e.type)===r?n.cloneElement(e,{...e.props,size:i}):e))};export{d as StyledButton,u as ToggleGroupButton};
+import*as n from"react";import{styled as g}from"../../stitches.js";import{StyledIcon as f,Icon as r}from"../icon/Icon.js";import{StyledItem as h}from"./ToggleGroupItem.js";const t={sm:"32px",md:"40px",lg:"48px"},$={sm:"$4",md:"$5",lg:"$5"},u={sm:"$2",md:"$3",lg:"$3"},l=i=>({fontSize:`$${i}`,px:$[i],minHeight:t[i],"& > *:not(:last-child)":{mr:u[i]}}),d=g(h,{flexGrow:1,display:"flex",alignItems:"center",justifyContent:"center",fontWeight:600,lineHeight:1,py:"$1",[`& ${f}`]:{flexShrink:0},variants:{size:{sm:l("sm"),md:l("md"),lg:l("lg")},isIconOnly:{true:{}}},compoundVariants:[{isIconOnly:!0,size:"sm",css:{minWidth:t.sm,p:0}},{isIconOnly:!0,size:"md",css:{minWidth:t.md,p:0}},{isIconOnly:!0,size:"lg",css:{minWidth:t.lg,p:0}}]}),x=n.forwardRef(({size:i="md",children:p,...c},a)=>{var o;const s=n.Children.toArray(p),m=s.length<=1,y=m&&n.isValidElement(s[0])&&((o=s[0])==null?void 0:o.type)===r;return n.createElement(d,{ref:a,size:i,isIconOnly:y,...c},s.map(e=>!m&&typeof e=="string"?n.createElement("span",{key:e},e):n.isValidElement(e)&&(e==null?void 0:e.type)===r?n.cloneElement(e,{...e.props,size:i}):e))});export{d as StyledButton,x as ToggleGroupButton};

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

@@ -1,11 +1,10 @@
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import * as React from 'react';
 declare type RootType = {
-    size: 'sm' | 'md' | 'lg';
     orientation?: 'horizontal' | 'vertical';
     gap?: number;
     isFullWidth?: boolean;
-    wrap: 'wrap' | 'no-wrap' | 'wrap-reverse';
+    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>)>, {
     isFullWidth?: boolean | "true" | undefined;
@@ -276,5 +275,5 @@ export declare const StyledRoot: import("@stitches/react/types/styled-component"
         };
     };
 }>>;
-export declare const ToggleGroupRoot: React.FC<React.ComponentProps<typeof StyledRoot> & RootType>;
+export declare const ToggleGroupRoot: React.ForwardRefExoticComponent<React.ComponentProps<typeof StyledRoot> & RootType>;
 export {};

package/dist/components/toggle-group/ToggleGroupRoot.js

@@ -1 +1 @@
-import*as f from"@radix-ui/react-toggle-group";import*as t from"react";import{Stack as u}from"../stack/Stack.js";import{styled as b}from"../../stitches.js";import{StyledItem as o}from"./ToggleGroupItem.js";const d=b(f.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${o}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${o}`]:{borderRadius:"$0"}},false:{borderRadius:"$0",bg:"white",[`& ${o}`]:{bg:"transparent",borderRadius:0,position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}}},compoundVariants:[{hasGap:!1,direction:"row",css:{[`& ${o}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$0",borderBottomLeftRadius:"$0"},"&:last-child":{borderTopRightRadius:"$0",borderBottomRightRadius:"$0"}}}},{hasGap:!1,direction:"column",css:{[`& ${o}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}}]}),R=i=>i==="horizontal"?"row":"column",g=({size:i="md",orientation:e="horizontal",gap:a=!1,isFullWidth:l,children:p,wrap:h="no-wrap",...c})=>{const s=typeof a=="number",m=t.Children.toArray(p),n=R(e);return t.createElement(d,{direction:n,hasGap:s,isFullWidth:l,orientation:e,...c},t.createElement(u,{direction:n,gap:s&&a,align:!1,wrap:h},m.map(r=>t.isValidElement(r)?t.cloneElement(r,{...r.props,size:i}):r)))};export{d as StyledRoot,g as ToggleGroupRoot};
+import*as h from"@radix-ui/react-toggle-group";import*as r from"react";import{Stack as f}from"../stack/Stack.js";import{styled as m}from"../../stitches.js";import{StyledItem as t}from"./ToggleGroupItem.js";const s=m(h.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${t}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${t}`]:{borderRadius:"$0"}},false:{borderRadius:"$0",bg:"white",[`& ${t}`]:{bg:"transparent",borderRadius:0,position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}}},compoundVariants:[{hasGap:!1,direction:"row",css:{[`& ${t}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$0",borderBottomLeftRadius:"$0"},"&:last-child":{borderTopRightRadius:"$0",borderBottomRightRadius:"$0"}}}},{hasGap:!1,direction:"column",css:{[`& ${t}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}}]}),u=o=>o==="horizontal"?"row":"column",b=r.forwardRef(({orientation:o="horizontal",gap:i=!1,isFullWidth:d,children:n,wrap:l="no-wrap",...p},c)=>{const e=typeof i=="number",a=u(o);return r.createElement(s,{ref:c,direction:a,hasGap:e,isFullWidth:d,orientation:o,...p},r.createElement(f,{direction:a,gap:e&&i,align:!1,wrap:l},n))});export{s as StyledRoot,b as ToggleGroupRoot};

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

@@ -265,7 +265,7 @@ export declare const ToggleGroup: {
             };
         };
     }>>;
-    Button: import("react").FC<Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
+    Button: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, "css"> & import("@stitches/react/types/styled-component").TransformProps<{}, {
         sm: string;
         md: string;
         lg: string;
@@ -801,7 +801,7 @@ export declare const ToggleGroup: {
             };
         }> | undefined;
     }>;
-    Root: import("react").FC<((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement>, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
+    Root: import("react").ForwardRefExoticComponent<((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement>, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
         isFullWidth?: boolean | "true" | undefined;
         hasGap?: boolean | "true" | "false" | undefined;
         direction?: "row" | "column" | undefined;
@@ -1342,10 +1342,9 @@ export declare const ToggleGroup: {
             };
         }> | undefined;
     })) & {
-        size: "sm" | "md" | "lg";
         orientation?: "horizontal" | "vertical" | undefined;
         gap?: number | undefined;
         isFullWidth?: boolean | undefined;
-        wrap: "wrap" | "wrap-reverse" | "no-wrap";
+        wrap?: "wrap" | "wrap-reverse" | "no-wrap" | undefined;
     }>;
 };