@atom-learning/components 1.2.3 → 1.5.0

package/dist/components/notification-badge/NotificationBadge.d.ts

@@ -0,0 +1,535 @@
+import React from 'react';
+declare const StyledBadge: import("@stitches/react/types/styled-component").StyledComponent<import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    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";
+        };
+    };
+}>>, {}, {
+    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";
+        };
+    };
+}>>;
+declare type NotificationBadgeProps = React.ComponentProps<typeof StyledBadge> & {
+    value: number | string;
+};
+export declare const NotificationBadge: React.FC<NotificationBadgeProps>;
+export {};

package/dist/components/notification-badge/NotificationBadge.js

@@ -0,0 +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};

package/dist/components/notification-badge/index.d.ts

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

package/dist/components/popover/PopoverContent.d.ts

@@ -269,6 +269,7 @@ declare const StyledContent: import("@stitches/react/types/styled-component").St
 }>>;
 declare type PopoverContentProps = React.ComponentProps<typeof StyledContent> & React.ComponentProps<typeof Content> & {
     closePopoverText?: string;
+    showCloseButton?: boolean;
 };
 export declare const PopoverContent: React.FC<PopoverContentProps>;
 export {};

package/dist/components/popover/PopoverContent.js

@@ -1 +1 @@
-const i=["children","side","sideOffset","closePopoverText","size"];import{Close as t}from"@atom-learning/icons";import{Content as e,Arrow as o,Close as a}from"@radix-ui/react-popover";import{createElement as s}from"react";import{styled as r}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{slideDownAndFade as n,slideLeftAndFade as m,slideUpAndFade as d,slideRightAndFade as p}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";const f=r(e,{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:n},'&[data-side="right"]':{animationName:m},'&[data-side="bottom"]':{animationName:d},'&[data-side="left"]':{animationName:p}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),h=r(o,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=e=>{let{children:o,side:r="top",sideOffset:n=8,closePopoverText:m="Close popover",size:d="md"}=e,p=function(i,t){if(null==i)return{};var e,o,a={},s=Object.keys(i);for(o=0;o<s.length;o++)e=s[o],t.indexOf(e)>=0||(a[e]=i[e]);return a}(e,i);return s(f,Object.assign({size:d,side:r,sideOffset:n},p),s(l,{as:a,css:{position:"absolute",right:"$0",top:"$0"},label:m,size:"lg",theme:"neutral"},s(c,{is:t})),o,s(h,{width:16,height:8}))};export{u as PopoverContent};
+const i=["children","side","sideOffset","closePopoverText","showCloseButton","size"];import{Close as t}from"@atom-learning/icons";import{Content as e,Arrow as o,Close as s}from"@radix-ui/react-popover";import{createElement as a}from"react";import{styled as n}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"polished";import{slideDownAndFade as r,slideLeftAndFade as m,slideUpAndFade as d,slideRightAndFade as l}from"../../utilities/style/keyframe-animations.js";import{ActionIcon as p}from"../action-icon/ActionIcon.js";import{Icon as c}from"../icon/Icon.js";const f=n(e,{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:r},'&[data-side="right"]':{animationName:m},'&[data-side="bottom"]':{animationName:d},'&[data-side="left"]':{animationName:l}}},variants:{size:{sm:{maxWidth:"200px"},md:{maxWidth:"400px"},lg:{maxWidth:"600px"}}}}),h=n(o,{fill:"white",zIndex:1,'[data-align="end"] &':{mr:"$sizes$2"},'[data-align="start"] &':{ml:"$sizes$2"}}),u=e=>{let{children:o,side:n="top",sideOffset:r=8,closePopoverText:m="Close popover",showCloseButton:d=!0,size:l="md"}=e,u=function(i,t){if(null==i)return{};var e,o,s={},a=Object.keys(i);for(o=0;o<a.length;o++)e=a[o],t.indexOf(e)>=0||(s[e]=i[e]);return s}(e,i);return a(f,Object.assign({size:l,side:n,sideOffset:r},u),d&&a(p,{as:s,css:{position:"absolute",right:"$0",top:"$0"},label:m,size:"lg",theme:"neutral"},a(c,{is:t})),o,a(h,{width:16,height:8}))};export{u as PopoverContent};

package/dist/components/search-input/SearchInput.d.ts

@@ -1,9 +1,11 @@
 import * as React from 'react';
+import { Input } from '../../components/input';
 import { CSS } from '../../stitches';
-import { Input } from '../input/Input';
 declare type SearchInputProps = React.ComponentProps<typeof Input> & {
     size: 'sm' | 'md';
     css?: CSS;
+    value?: string;
+    clearText?: string;
 };
 export declare const SearchInput: React.FC<SearchInputProps>;
 export {};

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

@@ -1 +1 @@
-const t=["size","css"];function o(){return(o=Object.assign||function(t){for(var o=1;o<arguments.length;o++){var r=arguments[o];for(var s in r)Object.prototype.hasOwnProperty.call(r,s)&&(t[s]=r[s])}return t}).apply(this,arguments)}import{Search as r}from"@atom-learning/icons";import{createElement as s,Fragment as n}from"react";import{Box as e}from"../box/Box.js";import{Icon as i}from"../icon/Icon.js";import{Input as c}from"../input/Input.js";const p=p=>{let{size:a,css:l}=p,m=function(t,o){if(null==t)return{};var r,s,n={},e=Object.keys(t);for(s=0;s<e.length;s++)r=e[s],o.indexOf(r)>=0||(n[r]=t[r]);return n}(p,t);return s(e,{css:o({position:"relative"},l)},s(n,null,s(i,{is:r,css:{color:"$tonal300",pointerEvents:"none",position:"absolute",size:"sm"===a?"$1":20,top:"sm"===a?"$2":10,left:"sm"===a?"$2":10}}),s(c,Object.assign({size:a,css:{pl:"sm"===a?"$5":"$6"}},m,{type:"search"}))))};p.displayName="SearchInput";export{p as SearchInput};
+const t=["size","css","value","clearText"];function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var s=arguments[e];for(var o in s)Object.prototype.hasOwnProperty.call(s,o)&&(t[o]=s[o])}return t}).apply(this,arguments)}import{Search as s,Close as o}from"@atom-learning/icons";import{useState as r,createElement as i}from"react";import{ActionIcon as n}from"../action-icon/ActionIcon.js";import{Box as a}from"../box/Box.js";import{Icon as c}from"../icon/Icon.js";import{Input as l}from"../input/Input.js";import{styled as p}from"../../stitches.js";var u;!function(t){t.SEARCH="SEARCH",t.CLEAR="CLEAR"}(u||(u={}));const m=p(c,{color:"$tonal300",position:"absolute",pointerEvents:"none",variants:{size:{sm:{top:"$2",right:"$2",size:"$1"},md:{top:10,right:10,size:20}}}}),h=p(l,{'&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, & input[type="search"]::-webkit-search-results-decoration':{display:"none"}}),f=l=>{let{size:p="md",css:f,value:b,clearText:v="Clear"}=l,C=function(t,e){if(null==t)return{};var s,o,r={},i=Object.keys(t);for(o=0;o<i.length;o++)s=i[o],e.indexOf(s)>=0||(r[s]=t[s]);return r}(l,t);const[g,A]=r(b||""),[E,R]=r(b?u.CLEAR:u.SEARCH),j=()=>{A(""),R(u.SEARCH)};return i(a,{css:e({position:"relative"},f)},i(h,Object.assign({size:p,type:"search"},C,{value:g,onChange:t=>{A(t.target.value),R(t.target.value?u.CLEAR:u.SEARCH)},css:{pr:"sm"===p?"$5":"$6"}})),E===u.SEARCH?i(m,{is:s,size:p,css:{size:"sm"==p?"$1":20}}):i(n,{label:v,theme:"neutral",size:"sm"==p?"md":"lg",css:{position:"absolute",top:0,right:0},onClick:j},i(c,{is:o})))};f.displayName="SearchInput";export{f as SearchInput};