@atom-learning/components 1.2.3 → 1.5.0

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" | undefined;
+    size?: "md" | "lg" | "xl" | undefined;
     isRounded?: boolean | "true" | undefined;
 }, {
     sm: string;
@@ -277,5 +277,5 @@ declare type ActionIconProps = Override<React.ComponentProps<typeof StyledButton
     children: React.ReactNode;
     label: string;
 } & NavigatorActions>;
-export declare const ActionIcon: React.ForwardRefExoticComponent<Pick<ActionIconProps, "appearance" | "color" | "translate" | "size" | "css" | "theme" | "onBlur" | "onSubmit" | "form" | "label" | "slot" | "style" | "title" | "hidden" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isRounded" | keyof NavigatorActions> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ActionIcon: React.ForwardRefExoticComponent<Pick<ActionIconProps, "appearance" | "color" | "translate" | "size" | "css" | "theme" | "onBlur" | "onChange" | "onSubmit" | "form" | "label" | "slot" | "style" | "title" | "hidden" | "key" | "name" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "as" | "disabled" | "value" | "type" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "isRounded" | keyof NavigatorActions> & React.RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -1 +1 @@
-const e=["children","theme","appearance","size","label","href","disabled"];function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var s in a)Object.prototype.hasOwnProperty.call(a,s)&&(e[s]=a[s])}return e}).apply(this,arguments)}import a from"invariant";import{forwardRef as s,Children as n,createElement as i,isValidElement as o,cloneElement as t}from"react";import{styled as c}from"../../stitches.js";import{Icon as l}from"../icon/Icon.js";const d=(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"}}),p=(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"}}),m=(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"}}),u=c("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"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"neutral",appearance:"simple",css:d("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:d("$primary","$primaryMid","$primaryDark")},{theme:"success",appearance:"simple",css:d("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:d("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:d("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:p("$primary","$primaryMid","$primaryDark")},{theme:"success",appearance:"solid",css:p("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:p("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:p("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:m("$primary","$primaryMid","$primaryDark")},{theme:"success",appearance:"outline",css:m("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:m("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:m("$danger","$dangerMid","$dangerDark")}]}),$=s(((s,c)=>{let{children:d,theme:p="primary",appearance:m="simple",size:g="md",label:b,href:h,disabled:y}=s,f=function(e,r){if(null==e)return{};var a,s,n={},i=Object.keys(e);for(s=0;s<i.length;s++)a=i[s],r.indexOf(a)>=0||(n[a]=e[a]);return n}(s,e);const w=`A single ${l.displayName} component is permitted as a child of ${$.displayName}`;a(1===n.count(d),w);const k=h?{as:"a",href:y?null:h,onClick:void 0,"aria-disabled":!!y}:{type:"button"};return i(u,Object.assign({},f,k,{"aria-label":b,theme:p,appearance:m,size:g,ref:c,disabled:y}),n.map(d,(e=>{if(!o(e))throw new Error(w);return a(e.type===l,`Children of type ${null==e?void 0:e.type} aren't permitted. Only an ${l.displayName} component is allowed in ${$.displayName}`),t(e,{css:r({size:"lg"===g?20:16},e.props.css?e.props.css:{})})})))}));$.displayName="ActionIcon";export{$ as ActionIcon};
+const e=["children","theme","appearance","size","label","href","disabled"];function r(){return(r=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var s in a)Object.prototype.hasOwnProperty.call(a,s)&&(e[s]=a[s])}return e}).apply(this,arguments)}import a from"invariant";import{darken as s}from"polished";import{forwardRef as i,Children as n,createElement as o,isValidElement as c,cloneElement as t}from"react";import{styled as l,theme as p}from"../../stitches.js";import{Icon as d}from"../icon/Icon.js";const m=(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"}}),u=(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"}}),$=(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"}}),y=l("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:m("$tonal300","$primaryMid","$primaryDark")},{theme:"primary",appearance:"simple",css:m("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"simple",css:m("$primaryDark",s(.1,p.colors.primaryDark.value),s(.15,p.colors.primaryDark.value))},{theme:"success",appearance:"simple",css:m("$success","$successMid","$successDark")},{theme:"warning",appearance:"simple",css:m("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"simple",css:m("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"solid",css:u("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"solid",css:u("$primaryDark",s(.1,p.colors.primaryDark.value),s(.15,p.colors.primaryDark.value))},{theme:"success",appearance:"solid",css:u("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:u("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"solid",css:u("$danger","$dangerMid","$dangerDark")},{theme:"primary",appearance:"outline",css:$("$primary","$primaryMid","$primaryDark")},{theme:"primaryDark",appearance:"outline",css:$("$primaryDark",s(.1,p.colors.primaryDark.value),s(.15,p.colors.primaryDark.value))},{theme:"success",appearance:"outline",css:$("$success","$successMid","$successDark")},{theme:"warning",appearance:"outline",css:$("$warning","$warningMid","$warningDark")},{theme:"danger",appearance:"outline",css:$("$danger","$dangerMid","$dangerDark")}]}),g=i(((s,i)=>{let{children:l,theme:p="primary",appearance:m="simple",size:u="md",label:$,href:b,disabled:h}=s,k=function(e,r){if(null==e)return{};var a,s,i={},n=Object.keys(e);for(s=0;s<n.length;s++)a=n[s],r.indexOf(a)>=0||(i[a]=e[a]);return i}(s,e);const f=`A single ${d.displayName} component is permitted as a child of ${g.displayName}`;a(1===n.count(l),f);const D=b?{as:"a",href:h?null:b,onClick:void 0,"aria-disabled":!!h}:{type:"button"};return o(y,Object.assign({},k,D,{"aria-label":$,theme:p,appearance:m,size:u,ref:i,disabled:h}),n.map(l,(e=>{if(!c(e))throw new Error(f);return a(e.type===d,`Children of type ${null==e?void 0:e.type} aren't permitted. Only an ${d.displayName} component is allowed in ${g.displayName}`),t(e,{css:r({size:["lg","xl"].includes(u)?20:16},e.props.css?e.props.css:{})})})))}));g.displayName="ActionIcon";export{g as ActionIcon};

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,19 @@
+import type { Props as DayzedInterface } from 'dayzed';
+import * as React from 'react';
+import type { CSS } from '../../stitches';
+export declare type CalendarTranslationProps = {
+    monthNames?: string[];
+    weekdayNames?: string[];
+    labels?: {
+        open: string;
+        next: string;
+        previous: string;
+    };
+};
+declare type CalendarProps = DayzedInterface & CalendarTranslationProps & {
+    css?: CSS;
+    refDateToday?: React.RefObject<HTMLButtonElement>;
+    refDateSelected?: React.RefObject<HTMLButtonElement>;
+};
+export declare const Calendar: React.FC<CalendarProps>;
+export {};

package/dist/components/calendar/Calendar.js

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

package/dist/components/calendar/Day.d.ts

@@ -0,0 +1,269 @@
+export declare const Day: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    isSelected?: boolean | "true" | undefined;
+    isToday?: boolean | "true" | undefined;
+    isOutsideMonth?: boolean | "true" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textForeground: any;
+        textSubtle: any;
+        textPlaceholder: any;
+        background: any;
+        backgroundAccent: any;
+        tonal50: any;
+        tonal100: any;
+        tonal200: any;
+        tonal300: any;
+        tonal400: any;
+        tonal500: any;
+        tonal600: any;
+        alpha100: any;
+        alpha150: any;
+        alpha200: any;
+        alpha250: any;
+        alpha600: any;
+        primaryLight: any;
+        primary: any;
+        primaryMid: any;
+        primaryDark: any;
+        secondary: any;
+        brandRed: any;
+        brandRedAccent: any;
+        brandGreen: any;
+        brandGreenAccent: any;
+        brandPurple: any;
+        brandPurpleAccent: any;
+        brandYellow: any;
+        brandYellowAccent: any;
+        successLight: any;
+        success: any;
+        successMid: any;
+        successDark: any;
+        dangerLight: any;
+        danger: any;
+        dangerMid: any;
+        dangerDark: any;
+        warningLight: any;
+        warning: any;
+        warningMid: any;
+        warningDark: any;
+        subjectEnglish: any;
+        subjectMaths: any;
+        subjectScience: any;
+        subjectVerbalReasoning: any;
+        subjectNonVerbalReasoning: any;
+        subjectCreativeWriting: any;
+        subjectExamSkills: any;
+    };
+    space: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+        "9": any;
+    };
+    fontSizes: {
+        xs: any;
+        sm: any;
+        md: any;
+        lg: any;
+        xl: any;
+        "2xl": any;
+        "3xl": any;
+        "4xl": any;
+    };
+    fonts: {
+        sans: any;
+        mono: any;
+        display: any;
+        body: any;
+    };
+    sizes: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        "4": any;
+        "5": any;
+        "6": any;
+        "7": any;
+        "8": any;
+    };
+    radii: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+        round: any;
+    };
+    shadows: {
+        "0": any;
+        "1": any;
+        "2": any;
+        "3": any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+}>>;

package/dist/components/calendar/Day.js

@@ -0,0 +1 @@
+import{styled as o}from"../../stitches.js";const r=o("button",{bg:"transparent",border:"none",borderRadius:"$round",color:"$tonal900",cursor:"pointer",fontFamily:"$body",fontSize:"$sm",size:"$3",p:0,transition:"all 75ms","&:hover":{bg:"$tonal100"},"&:active":{color:"white",bg:"$primary"},"&:focus":{outline:"2px solid $primary",outlineOffset:"2px"},variants:{isSelected:{true:{bg:"$primary",color:"white","&:hover":{bg:"$primary"}}},isToday:{true:{bg:"$tonal100"}},isOutsideMonth:{true:{color:"$tonal200"}}}});export{r as Day};

package/dist/components/calendar/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const monthNamesShort: string[];
+export declare const weekdayNamesShort: string[];

package/dist/components/calendar/constants.js

@@ -0,0 +1 @@
+const e=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],u=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];export{e as monthNamesShort,u as weekdayNamesShort};

package/dist/components/date-field/DateField.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { DateInputProps } from '../../components/date-input';
+import { ValidationOptions } from '../../components/form';
+import type { CSS } from '../../stitches';
+declare type DateFieldProps = DateInputProps & {
+    css?: CSS;
+    description?: string;
+    label: string;
+    name: string;
+    prompt?: {
+        link: string;
+        label: string;
+    };
+    validation?: ValidationOptions;
+};
+export declare const DateField: React.FC<DateFieldProps>;
+export {};

package/dist/components/date-field/DateField.js

@@ -0,0 +1 @@
+const r=["css","label","name","validation","prompt","description"];import{createElement as e}from"react";import{useFormContext as o}from"react-hook-form";import{DateInput as t}from"../date-input/DateInput.js";import{FieldWrapper as i}from"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../form/Form.js";import{useFieldError as p}from"../form/useFieldError.js";const a=a=>{let{css:n,label:l,name:s,validation:m,prompt:d,description:f}=a,c=function(r,e){if(null==r)return{};var o,t,i={},p=Object.keys(r);for(t=0;t<p.length;t++)o=p[t],e.indexOf(o)>=0||(i[o]=r[o]);return i}(a,r);const{register:u,trigger:j}=o(),{error:b}=p(s),g=m?u(m):u;return e(i,{css:n,description:f,error:b,fieldId:s,label:l,prompt:d,required:Boolean(null==m?void 0:m.required)},e(t,Object.assign({id:s,name:s,ref:g},b&&{state:"error"},c,{revalidate:j})))};a.displayName="DateField";export{a as DateField};

package/dist/components/date-field/index.d.ts

@@ -0,0 +1 @@
+export { DateField } from './DateField';

package/dist/components/date-input/DateInput.d.ts

@@ -0,0 +1,17 @@
+import type { Props as DayzedInterface } from 'dayzed';
+import * as React from 'react';
+import { CalendarTranslationProps } from '../calendar/Calendar';
+export declare type DateInputProps = DayzedInterface & CalendarTranslationProps & {
+    initialDate?: Date;
+    dateFormat?: string;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+    revalidate?: () => Promise<boolean>;
+};
+export declare const DateInput: React.ForwardRefExoticComponent<DayzedInterface & CalendarTranslationProps & {
+    initialDate?: Date | undefined;
+    dateFormat?: string | undefined;
+    disabled?: boolean | undefined;
+    size?: "sm" | "md" | undefined;
+    revalidate?: (() => Promise<boolean>) | undefined;
+} & React.RefAttributes<HTMLInputElement>>;

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

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

package/dist/components/date-input/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";

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

@@ -0,0 +1 @@
+const Y="DD/MM/YYYY";export{Y as DEFAULT_DATE_FORMAT};

package/dist/components/date-input/index.d.ts

@@ -0,0 +1 @@
+export * from './DateInput';

package/dist/components/date-input/use-date.d.ts

@@ -0,0 +1,5 @@
+export declare const useDate: (initialDate: Date | undefined, dateFormat?: string) => {
+    dateString: string;
+    date: Date | undefined;
+    setDate: (inputDate: Date | string, isDateString: boolean) => void;
+};

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

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

package/dist/components/dialog/DialogContent.d.ts

@@ -268,6 +268,7 @@ declare const StyledDialogContent: import("@stitches/react/types/styled-componen
 }>>;
 declare type DialogContentProps = React.ComponentProps<typeof StyledDialogContent> & {
     closeDialogText?: string;
+    showCloseButton?: boolean;
 };
 export declare const DialogContent: React.FC<DialogContentProps>;
 export {};

package/dist/components/dialog/DialogContent.js

@@ -1 +1 @@
-const t=["size","children","closeDialogText"];import{Close as o}from"@atom-learning/icons";import{Overlay as i,Content as e,Close as a}from"@radix-ui/react-dialog";import{createElement as s,Fragment as r}from"react";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{fadeIn as m,fadeOut as d}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const f=n({"0%":{transform:"translate3d(-50%, 50vh, 0)"},"100%":{transform:"translate3d(-50%, -50%, 0)"}}),u=n({"0%":{transform:"translate3d(-50%, -50%, 0)"},"100%":{transform:"translate3d(-50%, 50vh, 0)"}}),h=l(i,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${m} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 550ms ease-out`}}}),x=l(e,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:"translate3d(-50%, -50%, 0)","&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${f} 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:{xs:{width:"380px"},sm:{width:"480px"},md:{width:"600px"},lg:{width:"800px"},xl:{width:"1100px"}}}}),b=i=>{let{size:e="sm",children:n,closeDialogText:l="Close dialog"}=i,m=function(t,o){if(null==t)return{};var i,e,a={},s=Object.keys(t);for(e=0;e<s.length;e++)i=s[e],o.indexOf(i)>=0||(a[i]=t[i]);return a}(i,t);return s(r,null,s(h,null),s(x,Object.assign({size:e},m),s(c,{as:a,css:{position:"absolute",right:"$4",top:"$4"},label:l,size:"lg",theme:"neutral"},s(p,{is:o})),n))};export{b as DialogContent};
+const t=["size","children","closeDialogText","showCloseButton"];import{Close as o}from"@atom-learning/icons";import{Overlay as i,Content as e,Close as s}from"@radix-ui/react-dialog";import{createElement as a,Fragment as r}from"react";import{keyframes as n,styled as l}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{fadeIn as m,fadeOut as d}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import{Icon as p}from"../icon/Icon.js";const u=n({"0%":{transform:"translate3d(-50%, 50vh, 0)"},"100%":{transform:"translate3d(-50%, -50%, 0)"}}),f=n({"0%":{transform:"translate3d(-50%, -50%, 0)"},"100%":{transform:"translate3d(-50%, 50vh, 0)"}}),h=l(i,{backgroundColor:"$alpha600",inset:0,position:"fixed","@allowMotion":{'&[data-state="open"]':{animation:`${m} 250ms ease-out`},'&[data-state="closed"]':{animation:`${d} 550ms ease-out`}}}),x=l(e,{bg:"white",borderRadius:"$1",boxShadow:"$3",boxSizing:"border-box",left:"50%",maxWidth:"90vw",p:"$5",position:"fixed",top:"50%",transform:"translate3d(-50%, -50%, 0)","&:focus":{outline:"none"},"@allowMotion":{'&[data-state="open"]':{animation:`${u} 550ms cubic-bezier(0.22, 1, 0.36, 1)`},'&[data-state="closed"]':{animation:`${f} 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"}}}}),b=i=>{let{size:e="sm",children:n,closeDialogText:l="Close dialog",showCloseButton:m=!0}=i,d=function(t,o){if(null==t)return{};var i,e,s={},a=Object.keys(t);for(e=0;e<a.length;e++)i=a[e],o.indexOf(i)>=0||(s[i]=t[i]);return s}(i,t);return a(r,null,a(h,null),a(x,Object.assign({size:e},d),m&&a(c,{as:s,css:{position:"absolute",right:"$4",top:"$4"},label:l,size:"lg",theme:"neutral"},a(p,{is:o})),n))};export{b as DialogContent};

package/dist/components/form/Form.types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { UseFormMethods } from 'react-hook-form';
+import type { UseFormMethods, Mode } from 'react-hook-form';
 export declare enum StorageEnum {
     LOCAL = "local",
     SESSION = "session"
@@ -32,7 +32,7 @@ export declare type FormValues = {
         [key: string]: string | number;
     };
     onSubmit: (data: any) => void | any;
-    validationMode?: 'onBlur' | 'onSubmit';
+    validationMode?: Mode;
     persist?: PersistOptions;
 } & ({
     children: React.ReactNode;

package/dist/components/index.d.ts

@@ -9,6 +9,8 @@ export { Checkbox } from './checkbox';
 export { CheckboxField } from './checkbox-field';
 export { Combobox } from './combobox';
 export { Dialog } from './dialog';
+export { DateInput } from './date-input';
+export { DateField } from './date-field';
 export { Divider } from './divider';
 export { DropdownMenu } from './dropdown-menu';
 export { FieldWrapper, InlineFieldWrapper } from './field-wrapper';
@@ -25,16 +27,19 @@ export { Link, StyledLink } from './link';
 export { List } from './list';
 export { Loader } from './loader';
 export { MarkdownContent } from './markdown-content';
+export { NotificationBadge } from './notification-badge';
 export { PasswordField } from './password-field';
 export { PasswordInput } from './password-input';
 export { Popover } from './popover';
 export { ProgressBar } from './progress-bar';
 export { RadioButton, RadioButtonGroup } from './radio-button';
-export { RadioCard, RadioCardGroup } from './radio-card';
 export { RadioButtonField } from './radio-button-field';
+export { RadioCard, RadioCardGroup } from './radio-card';
 export { SearchInput } from './search-input';
 export { Select } from './select';
 export { SelectField } from './select-field';
+export { Slider } from './slider';
+export { SliderField } from './slider-field';
 export { Stack } from './stack';
 export { StackContent } from './stack-content';
 export { Switch } from './switch';