@atom-learning/components 1.21.3 → 1.22.1

package/CHANGELOG.md

@@ -1,10 +1,11 @@
-## [1.21.3](https://github.com/Atom-Learning/components/compare/v1.21.2...v1.21.3) (2022-07-28)
+## [1.22.1](https://github.com/Atom-Learning/components/compare/v1.22.0...v1.22.1) (2022-07-29)
 
 
 ### Bug Fixes
 
-* ensure date field doesn't submit form ([4ef275c](https://github.com/Atom-Learning/components/commit/4ef275c14dacf7c5436278992dc13bdc868f3817))
-* snapshot ([4f1ef08](https://github.com/Atom-Learning/components/commit/4f1ef08c24076578c383f14a5441d4c1bbd20c1d))
+* ensure dates are parsed strictly and don't accept invalid days/months ([2e299ba](https://github.com/Atom-Learning/components/commit/2e299ba414e28f4791a9000e21f86298c332bc6f))
+* snapshot ([b90c4b3](https://github.com/Atom-Learning/components/commit/b90c4b3e374e493f8225652121d94c8b7a632b8a))
+* stepper label responsive issues ([d17e33e](https://github.com/Atom-Learning/components/commit/d17e33e868421e75e11fd7395914d0e3435135a5))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/date-input/use-date.js

@@ -1 +1 @@
-import t from"dayjs";import p from"dayjs/plugin/customParseFormat";import{useState as i}from"react";import{DEFAULT_DATE_FORMAT as s}from"./constants.js";t.extend(p);const u=(o,e=s)=>{const[d,f]=i(o?t(o).toDate():void 0),[D,n]=i(o?t(o).format(e):"");return{dateString:D,date:d,setDate:(r,a=!1)=>{const m=a?t(r,e):t(r);f(m.isValid()?m.toDate():void 0),n(a?r:m.format(e))}}};export{u as useDate};
+import t from"dayjs";import p from"dayjs/plugin/customParseFormat";import{useState as i}from"react";import{DEFAULT_DATE_FORMAT as s}from"./constants.js";t.extend(p);const u=(o,e=s)=>{const[d,f]=i(o?t(o).toDate():void 0),[D,n]=i(o?t(o).format(e):"");return{dateString:D,date:d,setDate:(r,a=!1)=>{const m=a?t(r,e,!0):t(r);f(m.isValid()?m.toDate():void 0),n(a?r:m.format(e))}}};export{u as useDate};

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/stepper/StepperStepBullet.js

@@ -1 +1 @@
-import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal50",zIndex:1,variants:{status:{default:{bg:"$tonal50",color:"$tonal400"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"$primary",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};
+import{styled as e}from"../../stitches.js";import{Flex as o}from"../flex/Flex.js";const r=e(o,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",size:"$3",borderRadius:"50%",border:"none",bg:"$tonal50",zIndex:1,flex:"none",variants:{status:{default:{bg:"$tonal50",color:"$tonal400"},active:{bg:"white",color:"$primaryMid",border:"2px solid",borderColor:"currentColor"},viewed:{bg:"$primary",color:"white"},success:{bg:"$success",color:"white"}}}});export{r as StepperStepBullet};

package/dist/components/stepper/StepperStepContainer.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";import{Flex as e}from"../flex/Flex.js";const i=t(e,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md","&:not(:last-child)::after":{content:"",position:"absolute"},variants:{direction:{vertical:{py:"$3",flexDirection:"row",alignItems:"center","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column",alignItems:"center","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal50"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}}}}});export{i as StepperStepContainer};
+import{styled as t}from"../../stitches.js";import{Flex as e}from"../flex/Flex.js";const o=t(e,{position:"relative",fontFamily:"$body",fontWeight:600,fontSize:"$md",alignItems:"center","&:not(:last-child)::after":{content:"",position:"absolute"},variants:{direction:{vertical:{py:"$3",flexDirection:"row","&:not(:last-child)::after":{height:"100%",width:"4px",left:"14px",top:"50%"}},horizontal:{px:"$2",flexDirection:"column","&:not(:last-child)::after":{width:"100%",height:"4px",left:"50%",top:"14px"}}},separator:{default:{"&:not(:last-child)::after":{bg:"$tonal50"}},active:{"&:not(:last-child)::after":{bg:"$primary"}},success:{"&:not(:last-child)::after":{bg:"$success"}}}}});export{o as StepperStepContainer};

package/dist/components/stepper/StepperStepLabel.js

@@ -1 +1 @@
-import{styled as t}from"../../stitches.js";import{Text as e}from"../text/Text.js";const o=t(e,{fontWeight:600,textAlign:"center",variants:{direction:{vertical:{ml:"$3"},horizontal:{mt:"$3"}},status:{default:{color:"$tonal400",fontWeight:400},active:{color:"$primaryMid"},viewed:{color:"$primary"},success:{color:"$success"}}}});export{o as StepperStepLabel};
+import{styled as t}from"../../stitches.js";import{Text as e}from"../text/Text.js";const o=t(e,{fontWeight:600,variants:{direction:{vertical:{ml:"$3",textAlign:"left"},horizontal:{mt:"$3",textAlign:"center"}},status:{default:{color:"$tonal400",fontWeight:400},active:{color:"$primaryMid"},viewed:{color:"$primary"},success:{color:"$success"}}}});export{o as StepperStepLabel};

package/dist/components/stepper/StepperSteps.js

@@ -1 +1 @@
-import{Ok as f}from"@atom-learning/icons";import*as i from"react";import{styled as b}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as h}from"../icon/Icon.js";import{StepperStepLabel as C}from"./StepperStepLabel.js";import{StepperStepContainer as g}from"./StepperStepContainer.js";import{StepperStepBullet as D}from"./StepperStepBullet.js";import{useStepper as I}from"./stepper-context/StepperContext.js";import{Status as r}from"./types.js";const $=b(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row",alignItems:"center"}}}}),w=({css:m})=>{const{steps:o,goToStep:p,activeStep:c,viewedSteps:a,allowSkip:l,direction:n,hideLabels:u}=I(),d=t=>{const e=o[t];return e.status?e.status:c===t?r.ACTIVE:a.includes(t)?r.VIEWED:r.DEFAULT},S=t=>{var e;const s=(e=o[t])==null?void 0:e.status;return s===r.SUCCESS?r.SUCCESS:s===r.VIEWED||t<Math.max(...a)?r.ACTIVE:r.DEFAULT};return i.createElement($,{css:m,direction:n},o.map((t,e)=>{const s=d(e),E=S(e);return i.createElement(g,{key:`step_${e}`,direction:n,separator:E,css:n==="horizontal"?{width:`calc(100% / ${o.length})`}:{height:`calc(100% / ${o.length})`}},i.createElement(D,{as:l?"button":"div",onClick:()=>l&&a.includes(e)?p==null?void 0:p(e):void 0,status:s,"aria-current":e===c?"step":void 0,"aria-label":t.label?"":`step ${e+1}`,"aria-labelledby":t.label?`step-${e}`:void 0,css:{cursor:l&&a.includes(e)?"pointer":"auto"}},t.status==="success"?i.createElement(h,{is:f}):e+1),t.label&&!u&&i.createElement(C,{as:"span",id:`step-${e}`,direction:n,status:s},t.label))}))};export{w as StepperSteps};
+import{Ok as f}from"@atom-learning/icons";import*as i from"react";import{styled as b}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as h}from"../icon/Icon.js";import{useStepper as C}from"./stepper-context/StepperContext.js";import{StepperStepBullet as w}from"./StepperStepBullet.js";import{StepperStepContainer as D}from"./StepperStepContainer.js";import{StepperStepLabel as $}from"./StepperStepLabel.js";import{Status as r}from"./types.js";const x=b(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),I=({css:m})=>{const{steps:o,goToStep:p,activeStep:c,viewedSteps:a,allowSkip:n,direction:l,hideLabels:u}=C(),d=t=>{const e=o[t];return e.status?e.status:c===t?r.ACTIVE:a.includes(t)?r.VIEWED:r.DEFAULT},S=t=>{var e;const s=(e=o[t])==null?void 0:e.status;return s===r.SUCCESS?r.SUCCESS:s===r.VIEWED||t<Math.max(...a)?r.ACTIVE:r.DEFAULT};return i.createElement(x,{css:m,direction:l},o.map((t,e)=>{const s=d(e),E=S(e);return i.createElement(D,{key:`step_${e}`,direction:l,separator:E,css:l==="horizontal"?{width:`calc(100% / ${o.length})`}:{height:`calc(100% / ${o.length})`}},i.createElement(w,{as:n?"button":"div",onClick:()=>n&&a.includes(e)?p==null?void 0:p(e):void 0,status:s,"aria-current":e===c?"step":void 0,"aria-label":t.label?"":`step ${e+1}`,"aria-labelledby":t.label?`step-${e}`:void 0,css:{cursor:n&&a.includes(e)?"pointer":"auto"}},t.status==="success"?i.createElement(h,{is:f}):e+1),t.label&&!u&&i.createElement($,{as:"span",id:`step-${e}`,direction:l,status:s},t.label))}))};export{I as StepperSteps};

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;
     }>;
 };