@atom-learning/components 1.2.2 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -5,7 +5,7 @@ import { Override } from '../../utilities';
5
5
  declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
6
6
  theme?: "primary" | "success" | "danger" | "warning" | "neutral" | undefined;
7
7
  appearance?: "outline" | "solid" | "simple" | undefined;
8
- size?: "md" | "lg" | undefined;
8
+ size?: "md" | "lg" | "xl" | undefined;
9
9
  isRounded?: boolean | "true" | undefined;
10
10
  }, {
11
11
  sm: string;
@@ -277,5 +277,5 @@ declare type ActionIconProps = Override<React.ComponentProps<typeof StyledButton
277
277
  children: React.ReactNode;
278
278
  label: string;
279
279
  } & NavigatorActions>;
280
- 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>>;
280
+ 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>>;
281
281
  export {};
@@ -1 +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};
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{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};
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import type { UseFormMethods } from 'react-hook-form';
2
+ import type { UseFormMethods, Mode } from 'react-hook-form';
3
3
  export declare enum StorageEnum {
4
4
  LOCAL = "local",
5
5
  SESSION = "session"
@@ -32,7 +32,7 @@ export declare type FormValues = {
32
32
  [key: string]: string | number;
33
33
  };
34
34
  onSubmit: (data: any) => void | any;
35
- validationMode?: 'onBlur' | 'onSubmit';
35
+ validationMode?: Mode;
36
36
  persist?: PersistOptions;
37
37
  } & ({
38
38
  children: React.ReactNode;
@@ -25,6 +25,7 @@ export { Link, StyledLink } from './link';
25
25
  export { List } from './list';
26
26
  export { Loader } from './loader';
27
27
  export { MarkdownContent } from './markdown-content';
28
+ export { NotificationBadge } from './notification-badge';
28
29
  export { PasswordField } from './password-field';
29
30
  export { PasswordInput } from './password-input';
30
31
  export { Popover } from './popover';
@@ -0,0 +1,535 @@
1
+ import React from 'react';
2
+ declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
3
+ sm: string;
4
+ md: string;
5
+ lg: string;
6
+ xl: string;
7
+ reducedMotion: string;
8
+ allowMotion: string;
9
+ hover: string;
10
+ }, import("@stitches/react/types/css-util").CSS<{
11
+ sm: string;
12
+ md: string;
13
+ lg: string;
14
+ xl: string;
15
+ reducedMotion: string;
16
+ allowMotion: string;
17
+ hover: string;
18
+ }, {
19
+ colors: {
20
+ textForeground: any;
21
+ textSubtle: any;
22
+ textPlaceholder: any;
23
+ background: any;
24
+ backgroundAccent: any;
25
+ tonal50: any;
26
+ tonal100: any;
27
+ tonal200: any;
28
+ tonal300: any;
29
+ tonal400: any;
30
+ tonal500: any;
31
+ tonal600: any;
32
+ alpha100: any;
33
+ alpha150: any;
34
+ alpha200: any;
35
+ alpha250: any;
36
+ alpha600: any;
37
+ primaryLight: any;
38
+ primary: any;
39
+ primaryMid: any;
40
+ primaryDark: any;
41
+ secondary: any;
42
+ brandRed: any;
43
+ brandRedAccent: any;
44
+ brandGreen: any;
45
+ brandGreenAccent: any;
46
+ brandPurple: any;
47
+ brandPurpleAccent: any;
48
+ brandYellow: any;
49
+ brandYellowAccent: any;
50
+ successLight: any;
51
+ success: any;
52
+ successMid: any;
53
+ successDark: any;
54
+ dangerLight: any;
55
+ danger: any;
56
+ dangerMid: any;
57
+ dangerDark: any;
58
+ warningLight: any;
59
+ warning: any;
60
+ warningMid: any;
61
+ warningDark: any;
62
+ subjectEnglish: any;
63
+ subjectMaths: any;
64
+ subjectScience: any;
65
+ subjectVerbalReasoning: any;
66
+ subjectNonVerbalReasoning: any;
67
+ subjectCreativeWriting: any;
68
+ subjectExamSkills: any;
69
+ };
70
+ space: {
71
+ "0": any;
72
+ "1": any;
73
+ "2": any;
74
+ "3": any;
75
+ "4": any;
76
+ "5": any;
77
+ "6": any;
78
+ "7": any;
79
+ "8": any;
80
+ "9": any;
81
+ };
82
+ fontSizes: {
83
+ xs: any;
84
+ sm: any;
85
+ md: any;
86
+ lg: any;
87
+ xl: any;
88
+ "2xl": any;
89
+ "3xl": any;
90
+ "4xl": any;
91
+ };
92
+ fonts: {
93
+ sans: any;
94
+ mono: any;
95
+ display: any;
96
+ body: any;
97
+ };
98
+ sizes: {
99
+ "0": any;
100
+ "1": any;
101
+ "2": any;
102
+ "3": any;
103
+ "4": any;
104
+ "5": any;
105
+ "6": any;
106
+ "7": any;
107
+ "8": any;
108
+ };
109
+ radii: {
110
+ "0": any;
111
+ "1": any;
112
+ "2": any;
113
+ "3": any;
114
+ round: any;
115
+ };
116
+ shadows: {
117
+ "0": any;
118
+ "1": any;
119
+ "2": any;
120
+ "3": any;
121
+ };
122
+ }, import("@stitches/react/types/config").DefaultThemeMap, {
123
+ bg: (value: {
124
+ readonly [$$PropertyValue]: "background";
125
+ }) => {
126
+ background: {
127
+ readonly [$$PropertyValue]: "background";
128
+ };
129
+ };
130
+ inset: (value: string | number | {
131
+ readonly [$$ScaleValue]: "space";
132
+ }) => {
133
+ top: string | number | {
134
+ readonly [$$ScaleValue]: "space";
135
+ };
136
+ right: string | number | {
137
+ readonly [$$ScaleValue]: "space";
138
+ };
139
+ bottom: string | number | {
140
+ readonly [$$ScaleValue]: "space";
141
+ };
142
+ left: string | number | {
143
+ readonly [$$ScaleValue]: "space";
144
+ };
145
+ };
146
+ size: (value: string | number | {
147
+ readonly [$$ScaleValue]: "size";
148
+ }) => {
149
+ height: string | number | {
150
+ readonly [$$ScaleValue]: "size";
151
+ };
152
+ width: string | number | {
153
+ readonly [$$ScaleValue]: "size";
154
+ };
155
+ };
156
+ p: (value: string | number | {
157
+ readonly [$$ScaleValue]: "space";
158
+ }) => {
159
+ padding: string | number | {
160
+ readonly [$$ScaleValue]: "space";
161
+ };
162
+ };
163
+ pt: (value: string | number | {
164
+ readonly [$$ScaleValue]: "space";
165
+ }) => {
166
+ paddingTop: string | number | {
167
+ readonly [$$ScaleValue]: "space";
168
+ };
169
+ };
170
+ pr: (value: string | number | {
171
+ readonly [$$ScaleValue]: "space";
172
+ }) => {
173
+ paddingRight: string | number | {
174
+ readonly [$$ScaleValue]: "space";
175
+ };
176
+ };
177
+ pb: (value: string | number | {
178
+ readonly [$$ScaleValue]: "space";
179
+ }) => {
180
+ paddingBottom: string | number | {
181
+ readonly [$$ScaleValue]: "space";
182
+ };
183
+ };
184
+ pl: (value: string | number | {
185
+ readonly [$$ScaleValue]: "space";
186
+ }) => {
187
+ paddingLeft: string | number | {
188
+ readonly [$$ScaleValue]: "space";
189
+ };
190
+ };
191
+ px: (value: string | number | {
192
+ readonly [$$ScaleValue]: "space";
193
+ }) => {
194
+ paddingLeft: string | number | {
195
+ readonly [$$ScaleValue]: "space";
196
+ };
197
+ paddingRight: string | number | {
198
+ readonly [$$ScaleValue]: "space";
199
+ };
200
+ };
201
+ py: (value: string | number | {
202
+ readonly [$$ScaleValue]: "space";
203
+ }) => {
204
+ paddingTop: string | number | {
205
+ readonly [$$ScaleValue]: "space";
206
+ };
207
+ paddingBottom: string | number | {
208
+ readonly [$$ScaleValue]: "space";
209
+ };
210
+ };
211
+ m: (value: string | number | {
212
+ readonly [$$ScaleValue]: "space";
213
+ }) => {
214
+ margin: string | number | {
215
+ readonly [$$ScaleValue]: "space";
216
+ };
217
+ };
218
+ mt: (value: string | number | {
219
+ readonly [$$ScaleValue]: "space";
220
+ }) => {
221
+ marginTop: string | number | {
222
+ readonly [$$ScaleValue]: "space";
223
+ };
224
+ };
225
+ mr: (value: string | number | {
226
+ readonly [$$ScaleValue]: "space";
227
+ }) => {
228
+ marginRight: string | number | {
229
+ readonly [$$ScaleValue]: "space";
230
+ };
231
+ };
232
+ mb: (value: string | number | {
233
+ readonly [$$ScaleValue]: "space";
234
+ }) => {
235
+ marginBottom: string | number | {
236
+ readonly [$$ScaleValue]: "space";
237
+ };
238
+ };
239
+ ml: (value: string | number | {
240
+ readonly [$$ScaleValue]: "space";
241
+ }) => {
242
+ marginLeft: string | number | {
243
+ readonly [$$ScaleValue]: "space";
244
+ };
245
+ };
246
+ mx: (value: string | number | {
247
+ readonly [$$ScaleValue]: "space";
248
+ }) => {
249
+ marginLeft: string | number | {
250
+ readonly [$$ScaleValue]: "space";
251
+ };
252
+ marginRight: string | number | {
253
+ readonly [$$ScaleValue]: "space";
254
+ };
255
+ };
256
+ my: (value: string | number | {
257
+ readonly [$$ScaleValue]: "space";
258
+ }) => {
259
+ marginTop: string | number | {
260
+ readonly [$$ScaleValue]: "space";
261
+ };
262
+ marginBottom: string | number | {
263
+ readonly [$$ScaleValue]: "space";
264
+ };
265
+ };
266
+ }>>, {}, {
267
+ sm: string;
268
+ md: string;
269
+ lg: string;
270
+ xl: string;
271
+ reducedMotion: string;
272
+ allowMotion: string;
273
+ hover: string;
274
+ }, import("@stitches/react/types/css-util").CSS<{
275
+ sm: string;
276
+ md: string;
277
+ lg: string;
278
+ xl: string;
279
+ reducedMotion: string;
280
+ allowMotion: string;
281
+ hover: string;
282
+ }, {
283
+ colors: {
284
+ textForeground: any;
285
+ textSubtle: any;
286
+ textPlaceholder: any;
287
+ background: any;
288
+ backgroundAccent: any;
289
+ tonal50: any;
290
+ tonal100: any;
291
+ tonal200: any;
292
+ tonal300: any;
293
+ tonal400: any;
294
+ tonal500: any;
295
+ tonal600: any;
296
+ alpha100: any;
297
+ alpha150: any;
298
+ alpha200: any;
299
+ alpha250: any;
300
+ alpha600: any;
301
+ primaryLight: any;
302
+ primary: any;
303
+ primaryMid: any;
304
+ primaryDark: any;
305
+ secondary: any;
306
+ brandRed: any;
307
+ brandRedAccent: any;
308
+ brandGreen: any;
309
+ brandGreenAccent: any;
310
+ brandPurple: any;
311
+ brandPurpleAccent: any;
312
+ brandYellow: any;
313
+ brandYellowAccent: any;
314
+ successLight: any;
315
+ success: any;
316
+ successMid: any;
317
+ successDark: any;
318
+ dangerLight: any;
319
+ danger: any;
320
+ dangerMid: any;
321
+ dangerDark: any;
322
+ warningLight: any;
323
+ warning: any;
324
+ warningMid: any;
325
+ warningDark: any;
326
+ subjectEnglish: any;
327
+ subjectMaths: any;
328
+ subjectScience: any;
329
+ subjectVerbalReasoning: any;
330
+ subjectNonVerbalReasoning: any;
331
+ subjectCreativeWriting: any;
332
+ subjectExamSkills: any;
333
+ };
334
+ space: {
335
+ "0": any;
336
+ "1": any;
337
+ "2": any;
338
+ "3": any;
339
+ "4": any;
340
+ "5": any;
341
+ "6": any;
342
+ "7": any;
343
+ "8": any;
344
+ "9": any;
345
+ };
346
+ fontSizes: {
347
+ xs: any;
348
+ sm: any;
349
+ md: any;
350
+ lg: any;
351
+ xl: any;
352
+ "2xl": any;
353
+ "3xl": any;
354
+ "4xl": any;
355
+ };
356
+ fonts: {
357
+ sans: any;
358
+ mono: any;
359
+ display: any;
360
+ body: any;
361
+ };
362
+ sizes: {
363
+ "0": any;
364
+ "1": any;
365
+ "2": any;
366
+ "3": any;
367
+ "4": any;
368
+ "5": any;
369
+ "6": any;
370
+ "7": any;
371
+ "8": any;
372
+ };
373
+ radii: {
374
+ "0": any;
375
+ "1": any;
376
+ "2": any;
377
+ "3": any;
378
+ round: any;
379
+ };
380
+ shadows: {
381
+ "0": any;
382
+ "1": any;
383
+ "2": any;
384
+ "3": any;
385
+ };
386
+ }, import("@stitches/react/types/config").DefaultThemeMap, {
387
+ bg: (value: {
388
+ readonly [$$PropertyValue]: "background";
389
+ }) => {
390
+ background: {
391
+ readonly [$$PropertyValue]: "background";
392
+ };
393
+ };
394
+ inset: (value: string | number | {
395
+ readonly [$$ScaleValue]: "space";
396
+ }) => {
397
+ top: string | number | {
398
+ readonly [$$ScaleValue]: "space";
399
+ };
400
+ right: string | number | {
401
+ readonly [$$ScaleValue]: "space";
402
+ };
403
+ bottom: string | number | {
404
+ readonly [$$ScaleValue]: "space";
405
+ };
406
+ left: string | number | {
407
+ readonly [$$ScaleValue]: "space";
408
+ };
409
+ };
410
+ size: (value: string | number | {
411
+ readonly [$$ScaleValue]: "size";
412
+ }) => {
413
+ height: string | number | {
414
+ readonly [$$ScaleValue]: "size";
415
+ };
416
+ width: string | number | {
417
+ readonly [$$ScaleValue]: "size";
418
+ };
419
+ };
420
+ p: (value: string | number | {
421
+ readonly [$$ScaleValue]: "space";
422
+ }) => {
423
+ padding: string | number | {
424
+ readonly [$$ScaleValue]: "space";
425
+ };
426
+ };
427
+ pt: (value: string | number | {
428
+ readonly [$$ScaleValue]: "space";
429
+ }) => {
430
+ paddingTop: string | number | {
431
+ readonly [$$ScaleValue]: "space";
432
+ };
433
+ };
434
+ pr: (value: string | number | {
435
+ readonly [$$ScaleValue]: "space";
436
+ }) => {
437
+ paddingRight: string | number | {
438
+ readonly [$$ScaleValue]: "space";
439
+ };
440
+ };
441
+ pb: (value: string | number | {
442
+ readonly [$$ScaleValue]: "space";
443
+ }) => {
444
+ paddingBottom: string | number | {
445
+ readonly [$$ScaleValue]: "space";
446
+ };
447
+ };
448
+ pl: (value: string | number | {
449
+ readonly [$$ScaleValue]: "space";
450
+ }) => {
451
+ paddingLeft: string | number | {
452
+ readonly [$$ScaleValue]: "space";
453
+ };
454
+ };
455
+ px: (value: string | number | {
456
+ readonly [$$ScaleValue]: "space";
457
+ }) => {
458
+ paddingLeft: string | number | {
459
+ readonly [$$ScaleValue]: "space";
460
+ };
461
+ paddingRight: string | number | {
462
+ readonly [$$ScaleValue]: "space";
463
+ };
464
+ };
465
+ py: (value: string | number | {
466
+ readonly [$$ScaleValue]: "space";
467
+ }) => {
468
+ paddingTop: string | number | {
469
+ readonly [$$ScaleValue]: "space";
470
+ };
471
+ paddingBottom: string | number | {
472
+ readonly [$$ScaleValue]: "space";
473
+ };
474
+ };
475
+ m: (value: string | number | {
476
+ readonly [$$ScaleValue]: "space";
477
+ }) => {
478
+ margin: string | number | {
479
+ readonly [$$ScaleValue]: "space";
480
+ };
481
+ };
482
+ mt: (value: string | number | {
483
+ readonly [$$ScaleValue]: "space";
484
+ }) => {
485
+ marginTop: string | number | {
486
+ readonly [$$ScaleValue]: "space";
487
+ };
488
+ };
489
+ mr: (value: string | number | {
490
+ readonly [$$ScaleValue]: "space";
491
+ }) => {
492
+ marginRight: string | number | {
493
+ readonly [$$ScaleValue]: "space";
494
+ };
495
+ };
496
+ mb: (value: string | number | {
497
+ readonly [$$ScaleValue]: "space";
498
+ }) => {
499
+ marginBottom: string | number | {
500
+ readonly [$$ScaleValue]: "space";
501
+ };
502
+ };
503
+ ml: (value: string | number | {
504
+ readonly [$$ScaleValue]: "space";
505
+ }) => {
506
+ marginLeft: string | number | {
507
+ readonly [$$ScaleValue]: "space";
508
+ };
509
+ };
510
+ mx: (value: string | number | {
511
+ readonly [$$ScaleValue]: "space";
512
+ }) => {
513
+ marginLeft: string | number | {
514
+ readonly [$$ScaleValue]: "space";
515
+ };
516
+ marginRight: string | number | {
517
+ readonly [$$ScaleValue]: "space";
518
+ };
519
+ };
520
+ my: (value: string | number | {
521
+ readonly [$$ScaleValue]: "space";
522
+ }) => {
523
+ marginTop: string | number | {
524
+ readonly [$$ScaleValue]: "space";
525
+ };
526
+ marginBottom: string | number | {
527
+ readonly [$$ScaleValue]: "space";
528
+ };
529
+ };
530
+ }>>;
531
+ declare type NotificationBadgeProps = React.ComponentProps<typeof StyledBadge> & {
532
+ value: number | string;
533
+ };
534
+ export declare const NotificationBadge: React.FC<NotificationBadgeProps>;
535
+ export {};
@@ -0,0 +1 @@
1
+ import t from"react";import{Box as e}from"../box/Box.js";import{Flex as o}from"../flex/Flex.js";import{styled as r}from"../../stitches.js";const i=r(e,{position:"relative"}),n=r(o,{fontFamily:"$body",fontSize:"$sm",flexDirection:"column",justifyContent:"center",position:"absolute",top:"0",right:"0",transform:"translate(calc($sizes$2 / 2), -50%)",borderRadius:"$round",p:"$2",height:"$2",minWidth:"$2",textAlign:"center",color:"#fff",bg:"$primary"}),l=({value:e,children:o})=>t.createElement(i,null,!!e&&t.createElement(n,{role:"status"},e),o);export{l as NotificationBadge};
@@ -0,0 +1 @@
1
+ export { NotificationBadge } from './NotificationBadge';
@@ -17,6 +17,7 @@ declare type TableSubComponents = {
17
17
  };
18
18
  declare const StyledTable: import("@stitches/react/types/styled-component").StyledComponent<"table", {
19
19
  size?: "md" | "lg" | undefined;
20
+ corners?: "round" | "square" | undefined;
20
21
  }, {
21
22
  sm: string;
22
23
  md: string;
@@ -1 +1 @@
1
- const e=["size"];import{createElement as r}from"react";import{styled as o}from"../../stitches.js";import{TableBody as t}from"./TableBody.js";import{TableCell as l}from"./TableCell.js";import{TableFooter as a}from"./TableFooter.js";import{TableFooterCell as i}from"./TableFooterCell.js";import{TableHeader as s}from"./TableHeader.js";import{TableHeaderCell as m}from"./TableHeaderCell.js";import{TableRow as n}from"./TableRow.js";const f=o("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${l}, ${m}, ${i}`]:{height:"$4"}},lg:{[`${l}, ${m}, ${i}`]:{height:"$5"}}}}}),p=o=>{let{size:t="md"}=o,l=function(e,r){if(null==e)return{};var o,t,l={},a=Object.keys(e);for(t=0;t<a.length;t++)o=a[t],r.indexOf(o)>=0||(l[o]=e[o]);return l}(o,e);return r(f,Object.assign({size:t},l))};p.Body=t,p.Cell=l,p.Footer=a,p.FooterCell=i,p.Header=s,p.HeaderCell=m,p.Row=n,p.displayName="Table";export{p as Table};
1
+ const e=["size","corners"];import{createElement as r}from"react";import{styled as o}from"../../stitches.js";import{TableBody as t}from"./TableBody.js";import{TableCell as s}from"./TableCell.js";import{TableFooter as i}from"./TableFooter.js";import{TableFooterCell as l}from"./TableFooterCell.js";import{TableHeader as a}from"./TableHeader.js";import{TableHeaderCell as d}from"./TableHeaderCell.js";import{TableRow as m}from"./TableRow.js";const n=o("table",{borderCollapse:"separate",borderSpacing:0,fontFamily:"$sans",fontSize:"$sm",width:"100%",variants:{size:{md:{[`${s}, ${d}, ${l}`]:{height:"$4"}},lg:{[`${s}, ${d}, ${l}`]:{height:"$5"}}},corners:{round:{[`${d}`]:{"&:first-of-type":{borderTopLeftRadius:"$0"},"&:last-of-type":{borderTopRightRadius:"$0"}},[`${m}:last-child`]:{[`${s}:first-child`]:{borderBottomLeftRadius:"$0"},[`${s}:last-child`]:{borderBottomRightRadius:"$0"}}},square:{}}}}),f=o=>{let{size:t="md",corners:s="round"}=o,i=function(e,r){if(null==e)return{};var o,t,s={},i=Object.keys(e);for(t=0;t<i.length;t++)o=i[t],r.indexOf(o)>=0||(s[o]=e[o]);return s}(o,e);return r(n,Object.assign({size:t,corners:s},i))};f.Body=t,f.Cell=s,f.Footer=i,f.FooterCell=l,f.Header=a,f.HeaderCell=d,f.Row=m,f.displayName="Table";export{f as Table};
@@ -1,4 +1,7 @@
1
- export declare const TableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {}, {
1
+ import React from 'react';
2
+ declare const StyledTableHeader: import("@stitches/react/types/styled-component").StyledComponent<"thead", {
3
+ theme?: "primary" | "primaryDark" | undefined;
4
+ }, {
2
5
  sm: string;
3
6
  md: string;
4
7
  lg: string;
@@ -263,3 +266,6 @@ export declare const TableHeader: import("@stitches/react/types/styled-component
263
266
  };
264
267
  };
265
268
  }>>;
269
+ declare type TableHeaderProps = React.ComponentProps<typeof StyledTableHeader>;
270
+ export declare const TableHeader: React.FC<TableHeaderProps>;
271
+ export {};
@@ -1 +1 @@
1
- import{styled as e}from"../../stitches.js";const t=e("thead",{});t.displayName="TableHeader";export{t as TableHeader};
1
+ const e=["theme"];import{styled as r}from"../../stitches.js";import t from"react";import{TableHeaderCell as a}from"./TableHeaderCell.js";const m=r("thead",{variants:{theme:{primary:{[`${a}`]:{bg:"$primary"}},primaryDark:{[`${a}`]:{bg:"$primaryDark"}}}}}),i=r=>{let{theme:a="primaryDark"}=r,i=function(e,r){if(null==e)return{};var t,a,m={},i=Object.keys(e);for(a=0;a<i.length;a++)t=i[a],r.indexOf(t)>=0||(m[t]=e[t]);return m}(r,e);return t.createElement(m,Object.assign({theme:a},i))};i.displayName="TableHeader";export{i as TableHeader};