@atom-learning/components 1.24.1 → 2.0.0

package/CHANGELOG.md

@@ -1,9 +1,28 @@
-## [1.24.1](https://github.com/Atom-Learning/components/compare/v1.24.0...v1.24.1) (2022-08-26)
+# [2.0.0](https://github.com/Atom-Learning/components/compare/v1.24.2...v2.0.0) (2022-09-06)
 
 
 ### Bug Fixes
 
-* **search-input:** throw onChange actual event on clear ([00c1bc6](https://github.com/Atom-Learning/components/commit/00c1bc63b8c297bfe99fd465d630d2ff77034c97))
+* action icon sizes ([e46f613](https://github.com/Atom-Learning/components/commit/e46f613c030e3e3cc15ab2c8e148fa95e11f01e8))
+* align sizes to buttons ([4df4f1f](https://github.com/Atom-Learning/components/commit/4df4f1fbd8e1a2eaf6f26166a28086a70009a2c2))
+* always base icon size on actionicon size ([2570aaa](https://github.com/Atom-Learning/components/commit/2570aaa26fa919355f33f7eb8fea5f16be6df787))
+* attempting manual merge ([51a1c66](https://github.com/Atom-Learning/components/commit/51a1c666de0b6cad1c086bcc6efe1dd1f57ab47d))
+* changing back missed icon size ([23348a3](https://github.com/Atom-Learning/components/commit/23348a3c3588329de9285aa9002ba77497ac0789))
+* display px value in docs ([fe24ca0](https://github.com/Atom-Learning/components/commit/fe24ca09a74cdfd4c4e8d3fb3603f2c3b61e6c24))
+* fixing type issue ([1510885](https://github.com/Atom-Learning/components/commit/1510885f5b0e97e75d48e8e1414e7b4324dc8ba6))
+* further aligning with design after unintended change to icon ([1ccaf5e](https://github.com/Atom-Learning/components/commit/1ccaf5e087475411f194bd359a6567977c91b9af))
+* merge in main ([52176f2](https://github.com/Atom-Learning/components/commit/52176f203441f96d4e8b702ca63d79db715d4242))
+* moving logic into compound variants ([8567512](https://github.com/Atom-Learning/components/commit/85675123c43f7e4e0c71093163380e42a91fb3ed))
+* moving to size map rather than compound variants ([ab10933](https://github.com/Atom-Learning/components/commit/ab10933dc308cc563dd11fe29245717705c1262b))
+* retaining conditional logic on input fields ([72c1e52](https://github.com/Atom-Learning/components/commit/72c1e52562d4939b1a4cc10771d4885f1f2e55ce))
+* updating mdx to remove unused prop ([94444f3](https://github.com/Atom-Learning/components/commit/94444f3aff999ad4b56216f47fda4e08464667db))
+* updating snapshot ([59e1460](https://github.com/Atom-Learning/components/commit/59e14605b727eb6e46827dc8d524059dd0f6f658))
+* updating snapshots after merge conflict ([8c0577a](https://github.com/Atom-Learning/components/commit/8c0577a4223936fdfbad6c2950798d7c9dbfcddc))
+
+
+### BREAKING CHANGES
+
+* { sizes for ActionIcon are going from sm-xl to xs-lg }
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/action-icon/ActionIcon.constants.d.ts

@@ -0,0 +1,6 @@
+export declare const ActionIconSizeMap: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+};

package/dist/components/action-icon/ActionIcon.constants.js

@@ -0,0 +1 @@
+const m={xs:"sm",sm:"sm",md:"md",lg:"lg"};export{m as ActionIconSizeMap};

package/dist/components/action-icon/ActionIcon.d.ts

@@ -5,7 +5,7 @@ import { Override } from '../../utilities';
 declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
     theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
     appearance?: "outline" | "solid" | "simple" | undefined;
-    size?: "md" | "lg" | "xl" | undefined;
+    size?: "sm" | "md" | "lg" | "xs" | undefined;
     isRounded?: boolean | "true" | undefined;
 }, {
     sm: string;

package/dist/components/action-icon/ActionIcon.js

@@ -1 +1 @@
-import{darken as i}from"color2k";import g from"invariant";import*as n from"react";import{styled as D,theme as o}from"../../stitches.js";import{Icon as m}from"../icon/Icon.js";const c=(e,r,a)=>({bg:"transparent",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{color:"$tonal400",cursor:"not-allowed"}}),l=(e,r,a)=>({bg:e,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:r,color:"white"},"&:not(:disabled):active":{bg:a},"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"}}),p=(e,r,a)=>({border:"1px solid",borderColor:"currentColor",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"}}),w=D("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",transition:"all 100ms ease-out",variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{md:{size:"$3"},lg:{size:"$4"},xl:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"neutral",appearance:"simple",css:c("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:c("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"simple",css:c("$primaryDark",i(o.colors.primaryDark.value,.1),i(o.colors.primaryDark.value,.15))},{theme:"success",appearance:"simple",css:c("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:c("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:c("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:l("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"solid",css:l("$primaryDark",i(o.colors.primaryDark.value,.1),i(o.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:l("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:l("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:l("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"outline",css:p("$primaryDark",i(o.colors.primaryDark.value,.1),i(o.colors.primaryDark.value,.15))},{theme:"success",appearance:"outline",css:p("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:p("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:p("$danger","$dangerMid","$dangerDark")}]}),t=n.forwardRef(({children:e,theme:r="primary",appearance:a="simple",size:u="md",label:h,href:$,disabled:d,...b},k)=>{const y=`A single ${m.displayName} component is permitted as a child of ${t.displayName}`;return g(n.Children.count(e)===1,y),n.createElement(w,{...b,...$?{as:"a",href:d?null:$,onClick:void 0,"aria-disabled":!!d}:{type:"button"},"aria-label":h,theme:r,appearance:a,size:u,ref:k,disabled:d},n.Children.map(e,s=>{if(!n.isValidElement(s))throw new Error(y);return g(s.type===m,`Children of type ${s==null?void 0:s.type} aren't permitted. Only an ${m.displayName} component is allowed in ${t.displayName}`),n.cloneElement(s,{css:{size:["lg","xl"].includes(u)?20:16,...s.props.css?s.props.css:{}}})}))});t.displayName="ActionIcon";export{t as ActionIcon};
+import{darken as i}from"color2k";import g from"invariant";import*as o from"react";import{styled as D,theme as n}from"../../stitches.js";import{ActionIconSizeMap as w}from"./ActionIcon.constants.js";import{Icon as m}from"../icon/Icon.js";const c=(e,r,a)=>({bg:"transparent",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{color:"$tonal400",cursor:"not-allowed"}}),l=(e,r,a)=>({bg:e,color:"white","&:not(:disabled):hover, &:not(:disabled):focus":{bg:r,color:"white"},"&:not(:disabled):active":{bg:a},"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"}}),p=(e,r,a)=>({border:"1px solid",borderColor:"currentColor",color:e,"&:not(:disabled):hover, &:not(:disabled):focus":{color:r},"&:not(:disabled):active":{color:a},"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"}}),f=D("button",{alignItems:"center",appearance:"none",bg:"white",border:"unset",borderRadius:"$0",boxSizing:"border-box",cursor:"pointer",display:"flex",justifyContent:"center",p:"unset",transition:"all 100ms ease-out",variants:{theme:{neutral:{},primary:{},success:{},warning:{},danger:{}},appearance:{simple:{},outline:{},solid:{}},size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"neutral",appearance:"simple",css:c("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:c("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"simple",css:c("$primaryDark",i(n.colors.primaryDark.value,.1),i(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"simple",css:c("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:c("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:c("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:l("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"solid",css:l("$primaryDark",i(n.colors.primaryDark.value,.1),i(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"solid",css:l("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:l("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:l("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"outline",css:p("$primaryDark",i(n.colors.primaryDark.value,.1),i(n.colors.primaryDark.value,.15))},{theme:"success",appearance:"outline",css:p("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:p("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:p("$danger","$dangerMid","$dangerDark")}]}),t=o.forwardRef(({children:e,theme:r="primary",appearance:a="simple",size:$="sm",label:b,href:u,disabled:d,...h},k)=>{const y=`A single ${m.displayName} component is permitted as a child of ${t.displayName}`;return g(o.Children.count(e)===1,y),o.createElement(f,{...h,...u?{as:"a",href:d?null:u,onClick:void 0,"aria-disabled":!!d}:{type:"button"},"aria-label":b,theme:r,appearance:a,size:$,ref:k,disabled:d},o.Children.map(e,s=>{if(!o.isValidElement(s))throw new Error(y);return g(s.type===m,`Children of type ${s==null?void 0:s.type} aren't permitted. Only an ${m.displayName} component is allowed in ${t.displayName}`),o.cloneElement(s,{size:w[$],css:{...s.props.css?s.props.css:{}}})}))});t.displayName="ActionIcon";export{t as ActionIcon};

package/dist/components/calendar/Calendar.js

@@ -1 +1 @@
-import{ChevronLeft as q,ChevronRight as H}from"@atom-learning/icons";import{useDayzed as J}from"dayzed";import*as e from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as h}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as Y}from"../icon/Icon.js";import{Text as K}from"../text/Text.js";import{Button as w}from"../button/Button.js";import{styled as F}from"../../stitches.js";import{monthNamesShort as Q,weekdayNamesShort as V,DEFAULT_LABELS as X}from"./constants.js";import{Day as Z}from"./Day.js";const g=F("div",{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gridGap:"$1 $2"}),ee=F(w,{color:"$tonal600",p:"$3",width:"$6",variants:{selected:{false:{color:"$tonal600 !important",fontWeight:"400","&:hover":{bg:"$tonal100 !important",color:"$tonal600 !important"},"&[disabled]":{bg:"white !important"}}}}}),te=(i,c)=>{const u=i.slice(0,c);return i.slice(c).concat(u)},S=({css:i,refDateSelected:c,refDateToday:u,firstDayOfWeek:f=0,monthNames:N=Q,weekdayNames:T=V,labels:y=X,date:o=new Date,minDate:l,maxDate:s,setYear:A,...L})=>{const[a,E]=e.useState(!1),[m,k]=e.useState(o==null?void 0:o.getFullYear()),O=t=>{const r=o;r.setFullYear(t),A(r),E(!1)},W=l&&m-16<=l.getFullYear(),z=s&&m>=s.getFullYear(),B=Array.from({length:16},(t,r)=>{const n=m-r;return s&&n>s.getFullYear()||l&&n<l.getFullYear()?0:n}),{calendars:d,getBackProps:I,getForwardProps:M,getDateProps:G}=J({firstDayOfWeek:f,showOutsideDays:!0,date:o,minDate:l,maxDate:s,...L});return d.length?e.createElement(h,{css:{position:"relative",width:"min-content",mt:"-$1",...i}},e.createElement(C,{css:{position:"absolute",top:0,right:"-$1"}},e.createElement(x,{label:y[a?"previousYear":"previous"],theme:"neutral",size:"lg",...!a&&I({calendars:d}),...a&&{onClick:()=>k(m-16)},disabled:a&&W},e.createElement(Y,{is:q})),e.createElement(x,{label:y[a?"nextYear":"next"],theme:"neutral",size:"lg",...!a&&M({calendars:d}),...a&&{onClick:()=>k(m+16)},disabled:a&&z},e.createElement(Y,{is:H}))),a&&e.createElement(g,{css:{gridTemplateColumns:"repeat(4, 1fr)",pt:"$7",direction:"rtl",gridGap:"$3 $1"}},B.map((t,r)=>{const n=t===o.getFullYear();return t?e.createElement(ee,{key:`${t}${r}`,theme:n?"primary":"neutral",isRounded:!0,onClick:()=>O(t),selected:n},t):e.createElement(h,{key:r,css:{width:"$6",height:"$4"}})})),!a&&d.map(({month:t,year:r,weeks:n})=>e.createElement(h,{key:`${t}${r}`},e.createElement(C,{css:{height:"$4",alignItems:"center",mb:"$4"}},e.createElement(w,{theme:"neutral",css:{px:"0",color:"$tonal600"},onClick:()=>E(!0)},N[t]," ",r)),e.createElement(g,{css:{mb:"$3"}},te(T,f).map(p=>e.createElement(K,{as:"span",size:"sm",key:`${t}${r}${p}`,css:{fontWeight:600,textAlign:"center"}},p))),e.createElement(g,null,n.map((p,P)=>p.map(($,R)=>{const D=`${t}${r}${P}${R}`;if(!$)return e.createElement("div",{key:D});const{date:j,selected:b,today:v,prevMonth:U,nextMonth:_}=$;return e.createElement(Z,{isOutsideMonth:U||_,isSelected:b,isToday:v,key:D,ref:b?c:v?u:null,...G({dateObj:$}),type:"button"},j.getDate())})))))):null};S.displayName="Calendar";export{S as Calendar};
+import{ChevronLeft as q,ChevronRight as H}from"@atom-learning/icons";import{useDayzed as J}from"dayzed";import*as e from"react";import{ActionIcon as x}from"../action-icon/ActionIcon.js";import{Box as h}from"../box/Box.js";import{Flex as C}from"../flex/Flex.js";import{Icon as Y}from"../icon/Icon.js";import{Text as K}from"../text/Text.js";import{Button as w}from"../button/Button.js";import{styled as F}from"../../stitches.js";import{monthNamesShort as Q,weekdayNamesShort as V,DEFAULT_LABELS as X}from"./constants.js";import{Day as Z}from"./Day.js";const g=F("div",{display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gridGap:"$1 $2"}),ee=F(w,{color:"$tonal600",p:"$3",width:"$6",variants:{selected:{false:{color:"$tonal600 !important",fontWeight:"400","&:hover":{bg:"$tonal100 !important",color:"$tonal600 !important"},"&[disabled]":{bg:"white !important"}}}}}),te=(i,c)=>{const u=i.slice(0,c);return i.slice(c).concat(u)},S=({css:i,refDateSelected:c,refDateToday:u,firstDayOfWeek:f=0,monthNames:N=Q,weekdayNames:T=V,labels:y=X,date:o=new Date,minDate:l,maxDate:s,setYear:A,...L})=>{const[a,E]=e.useState(!1),[m,k]=e.useState(o==null?void 0:o.getFullYear()),O=t=>{const r=o;r.setFullYear(t),A(r),E(!1)},W=l&&m-16<=l.getFullYear(),z=s&&m>=s.getFullYear(),B=Array.from({length:16},(t,r)=>{const n=m-r;return s&&n>s.getFullYear()||l&&n<l.getFullYear()?0:n}),{calendars:d,getBackProps:I,getForwardProps:M,getDateProps:G}=J({firstDayOfWeek:f,showOutsideDays:!0,date:o,minDate:l,maxDate:s,...L});return d.length?e.createElement(h,{css:{position:"relative",width:"min-content",mt:"-$1",...i}},e.createElement(C,{css:{position:"absolute",top:0,right:"-$1"}},e.createElement(x,{label:y[a?"previousYear":"previous"],theme:"neutral",size:"md",...!a&&I({calendars:d}),...a&&{onClick:()=>k(m-16)},disabled:a&&W},e.createElement(Y,{is:q})),e.createElement(x,{label:y[a?"nextYear":"next"],theme:"neutral",size:"md",...!a&&M({calendars:d}),...a&&{onClick:()=>k(m+16)},disabled:a&&z},e.createElement(Y,{is:H}))),a&&e.createElement(g,{css:{gridTemplateColumns:"repeat(4, 1fr)",pt:"$7",direction:"rtl",gridGap:"$3 $1"}},B.map((t,r)=>{const n=t===o.getFullYear();return t?e.createElement(ee,{key:`${t}${r}`,theme:n?"primary":"neutral",isRounded:!0,onClick:()=>O(t),selected:n},t):e.createElement(h,{key:r,css:{width:"$6",height:"$4"}})})),!a&&d.map(({month:t,year:r,weeks:n})=>e.createElement(h,{key:`${t}${r}`},e.createElement(C,{css:{height:"$4",alignItems:"center",mb:"$4"}},e.createElement(w,{theme:"neutral",css:{px:"0",color:"$tonal600"},onClick:()=>E(!0)},N[t]," ",r)),e.createElement(g,{css:{mb:"$3"}},te(T,f).map(p=>e.createElement(K,{as:"span",size:"sm",key:`${t}${r}${p}`,css:{fontWeight:600,textAlign:"center"}},p))),e.createElement(g,null,n.map((p,P)=>p.map(($,R)=>{const D=`${t}${r}${P}${R}`;if(!$)return e.createElement("div",{key:D});const{date:j,selected:b,today:v,prevMonth:U,nextMonth:_}=$;return e.createElement(Z,{isOutsideMonth:U||_,isSelected:b,isToday:v,key:D,ref:b?c:v?u:null,...G({dateObj:$}),type:"button"},j.getDate())})))))):null};S.displayName="Calendar";export{S as Calendar};

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

@@ -1 +1 @@
-import{CalendarEvent as I}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as L}from"../action-icon/ActionIcon.js";import{Box as N}from"../box/Box.js";import{Calendar as O}from"../calendar/Calendar.js";import{DEFAULT_LABELS as S}from"../calendar/constants.js";import{Icon as k}from"../icon/Icon.js";import{Input as x}from"../input/Input.js";import{Popover as m}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as R}from"./constants.js";import{useDate as B}from"./use-date.js";const D=e.forwardRef(({initialDate:E,dateFormat:g=R,firstDayOfWeek:h=1,disabled:s,monthNames:b,weekdayNames:v,size:l="md",labels:y,revalidate:o,onChange:n,minDate:C,maxDate:w,...A},z)=>{const{date:a,dateString:T,setDate:r}=B(E,g),i={...S,...y},[F,d]=e.useState(!1),f=e.useRef(null),c=e.useRef(null);return e.useEffect(()=>{n==null||n(a)},[a,n]),e.createElement(N,{css:{position:"relative"}},e.createElement(x,{name:"date",disabled:s,size:l,...A,onChange:t=>r(t.target.value,!0),value:T,ref:z}),e.createElement(m,{modal:!0,open:F,onOpenChange:d},e.createElement(m.Trigger,{asChild:!0},e.createElement(L,{css:{position:"absolute",top:0,right:0},disabled:s,label:i.open,size:l==="sm"?"md":"lg",theme:"neutral"},e.createElement(k,{size:"sm",is:I}))),e.createElement(m.Content,{css:{pr:"$sizes$2"},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var p,u;t.preventDefault(),a?(p=c.current)==null||p.focus():(u=f.current)==null||u.focus()}},e.createElement(O,{date:a||new Date,selected:a,onDateSelected:async t=>{d(!1),await r(t.date,!1),o&&o()},setYear:async t=>{await r(t,!1),o&&o()},minDate:C,maxDate:w,refDateToday:f,refDateSelected:c,firstDayOfWeek:h,monthNames:b,weekdayNames:v,labels:i}))))});D.displayName="DateInput";export{D as DateInput};
+import{CalendarEvent as N}from"@atom-learning/icons";import*as e from"react";import{ActionIcon as O}from"../action-icon/ActionIcon.js";import{Box as S}from"../box/Box.js";import{Calendar as k}from"../calendar/Calendar.js";import{DEFAULT_LABELS as x}from"../calendar/constants.js";import{Icon as z}from"../icon/Icon.js";import{Input as L}from"../input/Input.js";import{Popover as m}from"../popover/Popover.js";import{DEFAULT_DATE_FORMAT as R}from"./constants.js";import{useDate as B}from"./use-date.js";const D=e.forwardRef(({initialDate:E,dateFormat:g=R,firstDayOfWeek:h=1,disabled:s,monthNames:C,weekdayNames:b,size:l="md",labels:v,revalidate:o,onChange:n,minDate:y,maxDate:w,...A},T)=>{const{date:a,dateString:F,setDate:r}=B(E,g),i={...x,...v},[I,d]=e.useState(!1),f=e.useRef(null),c=e.useRef(null);return e.useEffect(()=>{n==null||n(a)},[a,n]),e.createElement(S,{css:{position:"relative"}},e.createElement(L,{name:"date",disabled:s,size:l,...A,onChange:t=>r(t.target.value,!0),value:F,ref:T}),e.createElement(m,{modal:!0,open:I,onOpenChange:d},e.createElement(m.Trigger,{asChild:!0},e.createElement(O,{css:{position:"absolute",top:"0",right:"0"},disabled:s,label:i.open,size:l,theme:"neutral"},e.createElement(z,{is:N}))),e.createElement(m.Content,{css:{pr:"$sizes$2"},side:"bottom",align:"end",showCloseButton:!1,onOpenAutoFocus:t=>{var p,u;t.preventDefault(),a?(p=c.current)==null||p.focus():(u=f.current)==null||u.focus()}},e.createElement(k,{date:a||new Date,selected:a,onDateSelected:async t=>{d(!1),await r(t.date,!1),o&&o()},setYear:async t=>{await r(t,!1),o&&o()},minDate:y,maxDate:w,refDateToday:f,refDateSelected:c,firstDayOfWeek:h,monthNames:C,weekdayNames:b,labels:i}))))});D.displayName="DateInput";export{D as DateInput};

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 g,Close as w}from"@radix-ui/react-dialog";import*as o from"react";import{DIALOG_Z_INDEX as r}from"../../constants/dialog.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})=>o.createElement(g,null,o.createElement(y,{id:d},o.Children.map(a,t=>(t==null?void 0:t.type)===s&&t),o.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:t=>{const i=t.target;(i==null?void 0:i.id)!==d&&t.preventDefault()},...u},c&&o.createElement(v,{as:w,css:{position:"absolute",right:"$4",top:"$4"},label:f,size:"lg",theme:"neutral"},o.createElement($,{is:h})),o.Children.map(a,t=>(t==null?void 0:t.type)!==s&&t))));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 o from"react";import{DIALOG_Z_INDEX as r}from"../../constants/dialog.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})=>o.createElement(w,null,o.createElement(y,{id:d},o.Children.map(a,t=>(t==null?void 0:t.type)===s&&t),o.createElement(E,{size:p,"aria-label":"Dialog",onPointerDownOutside:t=>{const i=t.target;(i==null?void 0:i.id)!==d&&t.preventDefault()},...u},c&&o.createElement(v,{as:g,css:{position:"absolute",right:"$4",top:"$4"},label:f,size:"md",theme:"neutral"},o.createElement($,{is:h})),o.Children.map(a,t=>(t==null?void 0:t.type)!==s&&t))));export{O as DialogContent};

package/dist/components/password-input/PasswordInput.js

@@ -1 +1 @@
-import{Eye as l,EyeCrossed as d}from"@atom-learning/icons";import*as e from"react";import{useState as f}from"react";import{ActionIcon as w}from"../action-icon/ActionIcon.js";import{Box as u}from"../box/Box.js";import{Icon as E}from"../icon/Icon.js";import{Input as h}from"../input/Input.js";const t=e.forwardRef(({css:r,hidePasswordText:a="Hide password",showPasswordText:i="Show password",...m},p)=>{const[o,n]=f(!1),c=()=>n(s=>!s);return e.createElement(u,{css:{position:"relative",...r}},e.createElement(h,{...m,type:o?"text":"password",ref:p,css:{pr:"$sizes$2"}}),e.createElement(w,{appearance:"simple",theme:"neutral",css:{bottom:0,position:"absolute",right:0},label:o?a:i,onClick:c,onMouseDown:s=>s.preventDefault(),size:"lg"},e.createElement(E,{is:o?l:d,css:{size:20}})))});t.displayName="PasswordInput";export{t as PasswordInput};
+import{Eye as l,EyeCrossed as f}from"@atom-learning/icons";import*as e from"react";import{useState as w}from"react";import{ActionIcon as u}from"../action-icon/ActionIcon.js";import{Box as E}from"../box/Box.js";import{Icon as h}from"../icon/Icon.js";import{Input as x}from"../input/Input.js";const r=e.forwardRef(({css:a,hidePasswordText:i="Hide password",showPasswordText:m="Show password",size:t="md",...p},n)=>{const[o,c]=w(!1),d=()=>c(s=>!s);return e.createElement(E,{css:{position:"relative",...a}},e.createElement(x,{...p,size:t,type:o?"text":"password",ref:n,css:{pr:"$sizes$2"}}),e.createElement(u,{appearance:"simple",theme:"neutral",css:{bottom:0,position:"absolute",right:0},label:o?i:m,onClick:d,onMouseDown:s=>s.preventDefault(),size:t},e.createElement(h,{is:o?l:f})))});r.displayName="PasswordInput";export{r as PasswordInput};

package/dist/components/popover/PopoverContent.js

@@ -1 +1 @@
-import{Close as r}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{styled as t}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as f}from"../icon/Icon.js";import{slideDownAndFade as $,slideLeftAndFade as g,slideUpAndFade as x,slideRightAndFade as w}from"../../utilities/style/keyframe-animations.js";const b=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative","@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:$},'&[data-side="right"]':{animationName:g},'&[data-side="bottom"]':{animationName:x},'&[data-side="left"]':{animationName:w}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),z=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),C=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...d})=>e.createElement(b,{size:m,side:o,sideOffset:a,...d},n&&e.createElement(c,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"lg",theme:"neutral"},e.createElement(f,{is:r})),i,e.createElement(z,{width:16,height:8}));export{C as PopoverContent};
+import{Close as r}from"@atom-learning/icons";import{Content as l,Arrow as p,Close as h}from"@radix-ui/react-popover";import*as e from"react";import{styled as t}from"../../stitches.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as f}from"../icon/Icon.js";import{slideDownAndFade as $,slideLeftAndFade as x,slideUpAndFade as g,slideRightAndFade as w}from"../../utilities/style/keyframe-animations.js";const b=t(l,{bg:"white",borderRadius:"$1",boxShadow:"$2",maxWidth:"90vw",p:"$sizes$2",pr:"$6",position:"relative","@allowMotion":{animationDuration:"75ms",animationTimingFunction:"cubic-bezier(0.16, 1, 0.3, 1)",willChange:"transform, opacity",'&[data-state="open"]':{'&[data-side="top"]':{animationName:$},'&[data-side="right"]':{animationName:x},'&[data-side="bottom"]':{animationName:g},'&[data-side="left"]':{animationName:w}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),z=t(p,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),C=({children:i,side:o="top",sideOffset:a=8,closePopoverText:s="Close popover",showCloseButton:n=!0,size:m="md",...d})=>e.createElement(b,{size:m,side:o,sideOffset:a,...d},n&&e.createElement(c,{as:h,css:{position:"absolute",right:"$0",top:"$0"},label:s,size:"md",theme:"neutral"},e.createElement(f,{is:r})),i,e.createElement(z,{width:16,height:8}));export{C as PopoverContent};

package/dist/components/search-input/SearchInput.js

@@ -1 +1 @@
-import{Search as w,Close as z}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as y}from"../action-icon/ActionIcon.js";import{Box as I}from"../box/Box.js";import{Icon as l}from"../icon/Icon.js";import{Input as $}from"../input/Input.js";import{styled as c}from"../../stitches.js";import{useCallbackRef as k}from"../../utilities/hooks/useCallbackRef.js";var H=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(H||{});const L=c(l,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),x=c($,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),p=({size:e="md",css:m,value:n,clearText:u="Clear",onChange:a,...E})=>{const[h,C]=k(),[b,v]=t.useState(n||""),[d,f]=t.useState(n?"CLEAR":"SEARCH"),A=()=>{var r,i;const o=h.current;if(!o)return;const s=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(i=s==null?void 0:s.call)==null||i.call(s,o,"");const R=new Event("input",{bubbles:!0});o.dispatchEvent(R),o.focus()},S=r=>{v(r.target.value),f(r.target.value?"CLEAR":"SEARCH"),a==null||a(r)},g=()=>d==="SEARCH"?t.createElement(L,{is:w,size:e,css:{size:e=="sm"?"$1":20}}):t.createElement(y,{label:u,theme:"neutral",size:e=="sm"?"md":"lg",css:{position:"absolute",top:0,right:0},onClick:A},t.createElement(l,{is:z}));return t.createElement(I,{css:{position:"relative",...m}},t.createElement(x,{ref:C,size:e,type:"search",...E,value:b,onChange:S,css:{pr:e==="sm"?"$5":"$6"}}),g())};p.displayName="SearchInput";export{p as SearchInput};
+import{Search as g,Close as w}from"@atom-learning/icons";import*as t from"react";import{ActionIcon as z}from"../action-icon/ActionIcon.js";import{Box as y}from"../box/Box.js";import{Icon as c}from"../icon/Icon.js";import{Input as I}from"../input/Input.js";import{styled as l}from"../../stitches.js";import{useCallbackRef as k}from"../../utilities/hooks/useCallbackRef.js";var H=(e=>(e.SEARCH="SEARCH",e.CLEAR="CLEAR",e))(H||{});const L=l(c,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),x=l(I,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),p=({size:e="md",css:u,value:n,clearText:m="Clear",onChange:a,...E})=>{const[h,C]=k(),[b,v]=t.useState(n||""),[f,d]=t.useState(n?"CLEAR":"SEARCH"),A=()=>{var r,i;const s=h.current;if(!s)return;const o=(r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value"))==null?void 0:r.set;(i=o==null?void 0:o.call)==null||i.call(o,s,"");const $=new Event("input",{bubbles:!0});s.dispatchEvent($),s.focus()},R=r=>{v(r.target.value),d(r.target.value?"CLEAR":"SEARCH"),a==null||a(r)},S=()=>f==="SEARCH"?t.createElement(L,{is:g,size:e,css:{size:e=="sm"?"$1":20}}):t.createElement(z,{label:m,theme:"neutral",size:e,css:{position:"absolute",top:"0",right:"$1"},onClick:A},t.createElement(c,{is:w}));return t.createElement(y,{css:{position:"relative",...u}},t.createElement(x,{ref:C,size:e,type:"search",...E,value:b,onChange:R,css:{pr:e==="sm"?"$5":"$6"}}),S())};p.displayName="SearchInput";export{p as SearchInput};

package/dist/components/tabs/TabsTriggerList.js

@@ -1 +1 @@
-import{ChevronLeft as P,ChevronRight as R}from"@atom-learning/icons";import{List as _}from"@radix-ui/react-tabs";import{opacify as k}from"color2k";import o,{useRef as F,useState as f,useCallback as J,useEffect as y}from"react";import{debounce as K}from"throttle-debounce";import{ActionIcon as M}from"../action-icon/ActionIcon.js";import{Flex as X}from"../flex/Flex.js";import{Icon as x}from"../icon/Icon.js";import{theme as j,styled as W}from"../../stitches.js";import{TabTrigger as L}from"./TabTrigger.js";import{passPropsToChildren as z}from"./utils.js";const q=k("white",-.2),G=k(j.colors.primaryDark.value,-.2),C=W(M,{position:"absolute",transition:"all 125ms",variants:{theme:{light:{bg:`${q} !important`},dark:{bg:`${G} !important`,color:"currentColor !important"}},visible:{true:{opacity:1,visibility:"visible",pointerEvents:"all"},false:{opacity:0,visibility:"hidden",pointerEvents:"none"}}}}),T=W(_,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none",variants:{theme:{light:{borderBottom:"1px solid $tonal300"},dark:{bg:"$primaryDark",borderBottom:"1px solid $tonal200"}},appearance:{uppercase:{"& button":{textTransform:"uppercase"}}}}}),H=({children:h,theme:i,appearance:d,enableTabScrolling:S,scrollPercentage:$=10,...b})=>{const n=F(null),[u,a]=f(!1),[v,c]=f(!1),[D,I]=f(),g=J(t=>{const e=n.current;if(e){const{scrollWidth:l,scrollLeft:s,offsetWidth:m}=e,E=Math.round(l*($/100));let p=s;if(t==="right"){const r=s+E;p=r+m<=l?r:l-m}else{const r=s-E;p=r>0?r:0}e.scroll({left:p,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:r,scrollLeft:w,offsetWidth:A}=e,B=r-(w+A);w===0?(a(!1),c(!0)):B<5?(c(!1),a(!0)):(a(!0),c(!0))},500)}},[]);return y(()=>{const t=K(500,()=>{I(window.innerWidth)});return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),y(()=>{var t;const e=n.current;if(e){const{offsetWidth:l,scrollWidth:s}=e,m=s>l;(t=e.scroll)==null||t.call(e,{left:0}),a(!1),c(m)}},[D]),u||v||S?o.createElement(X,{css:{position:"relative"}},o.createElement(C,{size:"xl",label:"Scroll Left",theme:i,onClick:()=>g("left"),visible:u,css:{left:0}},o.createElement(x,{is:P,size:"lg"})),o.createElement(T,{...b,ref:n,appearance:d,theme:i},z(h,{theme:i},[L])),o.createElement(C,{size:"xl",label:"Scroll right",theme:i,onClick:()=>g("right"),visible:v,css:{right:0}},o.createElement(x,{is:R,size:"lg"}))):o.createElement(T,{theme:i,...b,appearance:d,ref:n},z(h,{theme:i},[L]))};export{H as TriggerListWrapper};
+import{ChevronLeft as P,ChevronRight as R}from"@atom-learning/icons";import{List as _}from"@radix-ui/react-tabs";import{opacify as y}from"color2k";import o,{useRef as F,useState as f,useCallback as J,useEffect as k}from"react";import{debounce as K}from"throttle-debounce";import{ActionIcon as M}from"../action-icon/ActionIcon.js";import{Flex as X}from"../flex/Flex.js";import{Icon as W}from"../icon/Icon.js";import{theme as j,styled as x}from"../../stitches.js";import{TabTrigger as L}from"./TabTrigger.js";import{passPropsToChildren as C}from"./utils.js";const q=y("white",-.2),G=y(j.colors.primaryDark.value,-.2),T=x(M,{position:"absolute",transition:"all 125ms",variants:{theme:{light:{bg:`${q} !important`},dark:{bg:`${G} !important`,color:"currentColor !important"}},visible:{true:{opacity:1,visibility:"visible",pointerEvents:"all"},false:{opacity:0,visibility:"hidden",pointerEvents:"none"}}}}),S=x(_,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none",variants:{theme:{light:{borderBottom:"1px solid $tonal300"},dark:{bg:"$primaryDark",borderBottom:"1px solid $tonal200"}},appearance:{uppercase:{"& button":{textTransform:"uppercase"}}}}}),H=({children:h,theme:i,appearance:d,enableTabScrolling:$,scrollPercentage:z=10,...b})=>{const s=F(null),[u,a]=f(!1),[v,c]=f(!1),[D,I]=f(),g=J(t=>{const e=s.current;if(e){const{scrollWidth:l,scrollLeft:n,offsetWidth:m}=e,E=Math.round(l*(z/100));let p=n;if(t==="right"){const r=n+E;p=r+m<=l?r:l-m}else{const r=n-E;p=r>0?r:0}e.scroll({left:p,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:r,scrollLeft:w,offsetWidth:A}=e,B=r-(w+A);w===0?(a(!1),c(!0)):B<5?(c(!1),a(!0)):(a(!0),c(!0))},500)}},[]);return k(()=>{const t=K(500,()=>{I(window.innerWidth)});return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),k(()=>{var t;const e=s.current;if(e){const{offsetWidth:l,scrollWidth:n}=e,m=n>l;(t=e.scroll)==null||t.call(e,{left:0}),a(!1),c(m)}},[D]),u||v||$?o.createElement(X,{css:{position:"relative"}},o.createElement(T,{size:"lg",label:"Scroll Left",theme:i,onClick:()=>g("left"),visible:u,css:{left:0}},o.createElement(W,{is:P})),o.createElement(S,{...b,ref:s,appearance:d,theme:i},C(h,{theme:i},[L])),o.createElement(T,{size:"lg",label:"Scroll right",theme:i,onClick:()=>g("right"),visible:v,css:{right:0}},o.createElement(W,{is:R}))):o.createElement(S,{theme:i,...b,appearance:d,ref:s},C(h,{theme:i},[L]))};export{H as TriggerListWrapper};