@atom-learning/components 2.12.1 → 2.13.0

package/CHANGELOG.md

@@ -1,9 +1,17 @@
-## [2.12.1](https://github.com/Atom-Learning/components/compare/v2.12.0...v2.12.1) (2022-11-10)
+# [2.13.0](https://github.com/Atom-Learning/components/compare/v2.12.2...v2.13.0) (2022-11-11)
 
 
 ### Bug Fixes
 
-* navigation-menu list rendering issue ([f753e57](https://github.com/Atom-Learning/components/commit/f753e571956f072dd98d008976cf598ded63e29b))
+* remove an example that could cause confusion from the documentation ([212487b](https://github.com/Atom-Learning/components/commit/212487b12bf7f9fabb9759b3dc2bd8b8ded9479b))
+* remove copy from Avatar component ([176d659](https://github.com/Atom-Learning/components/commit/176d6597bf85f37c6d87c33921b50338396f3080))
+
+
+### Features
+
+* add the Avatar component ([de26d0e](https://github.com/Atom-Learning/components/commit/de26d0e4041b196e0df1e0b9ca96906262f8bee1))
+* make Avatar.Icon work with stitches media queries ([2ee2f94](https://github.com/Atom-Learning/components/commit/2ee2f94231d093224a6ad10756fdb21d9aec7f2f))
+* make the Avatar component api composable ([af0e5eb](https://github.com/Atom-Learning/components/commit/af0e5eb404c33ffe23da746fc012fdceb91fda86))
 
 # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
 

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1,565 @@
+import * as React from 'react';
+import { AvatarPlaceholder } from './AvatarPlaceholder';
+import { AvatarIcon } from './AvatarIcon';
+import { AvatarInitial } from './AvatarInitial';
+import { AvatarImage } from './AvatarImage';
+declare const StyledDiv: import("@stitches/react/types/styled-component").StyledComponent<"div", {
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | 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;
+        warningText: 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 const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
+    size?: "sm" | "md" | "lg" | "xl" | "xs" | "xxl" | 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;
+        warningText: 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 TAvatarProps = React.ComponentProps<typeof StyledDiv | typeof StyledButton> & {
+    name?: string;
+} & ({
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    disabled?: boolean;
+} | {
+    onClick?: never;
+    disabled?: never;
+});
+export declare type TAvatarRootContext = {
+    name?: TAvatarProps['name'];
+    size: TAvatarProps['size'];
+};
+export declare const AvatarRootContext: React.Context<TAvatarRootContext>;
+export declare const AvatarRootProvider: React.FC<TAvatarProps>;
+export declare const AvatarRoot: React.FC<TAvatarProps>;
+declare type TAvatar = typeof AvatarRoot & {
+    Image: typeof AvatarImage;
+    Initial: typeof AvatarInitial;
+    Placeholder: typeof AvatarPlaceholder;
+    Icon: typeof AvatarIcon;
+};
+export declare const Avatar: TAvatar;
+export {};

package/dist/components/avatar/Avatar.js

@@ -0,0 +1 @@
+import*as o from"react";import{styled as n}from"../../stitches.js";import{AvatarPlaceholder as v}from"./AvatarPlaceholder.js";import{AvatarIcon as u}from"./AvatarIcon.js";import{AvatarInitial as b}from"./AvatarInitial.js";import{AvatarImage as p}from"./AvatarImage.js";import{focusVisibleStyleBlock as z}from"../../utilities/style/focus-visible-style-block.js";const s={display:"flex",justifyContent:"center",alignItems:"center",color:"$tonal400",borderRadius:"$round",border:"2px solid $tonal100",backgroundColor:"$white",overflow:"hidden",variants:{size:{xs:{size:"$2"},sm:{size:"$3"},md:{size:"$4"},lg:{size:"$5"},xl:{size:"$6"},xxl:{size:"$7"}}}},f=n("div",s),$=n("button",{all:"unset",...s,"&:not([disabled])":{"&:hover":{borderColor:"$tonal400",backgroundColor:"$tonal50"},"&:active":{borderColor:"$primary",backgroundColor:"$tonal100"},"&:focus-visible":z()},"&[disabled]":{opacity:"30%",cursor:"not-allowed"}}),d=o.createContext({name:void 0,size:"lg"}),m=({children:a,name:e,size:i})=>{const t=o.useMemo(()=>({name:e,size:i}),[e,i]);return o.createElement(d.Provider,{value:t},a)},c=({children:a,size:e="lg",name:i,disabled:t=!1,onClick:l})=>o.createElement(m,{name:i,size:e},l?o.createElement($,{size:e,disabled:t,onClick:t?void 0:l,css:{cursor:t?"auto":"pointer"}},a):o.createElement(f,{size:e},a)),r=c;r.Image=p,r.Initial=b,r.Placeholder=v,r.Icon=u,r.displayName="Avatar";export{r as Avatar,c as AvatarRoot,d as AvatarRootContext,m as AvatarRootProvider};

package/dist/components/avatar/AvatarIcon.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Icon } from '../icon';
+declare type TAvatarIconProps = {
+    is: typeof Icon;
+};
+export declare const AvatarIcon: React.FC<TAvatarIconProps>;
+export {};

package/dist/components/avatar/AvatarIcon.js

@@ -0,0 +1 @@
+import*as t from"react";import{overrideStitchesVariantValue as i}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{Icon as a}from"../icon/Icon.js";import{AvatarRootContext as n}from"./Avatar.js";const c={xs:"sm",sm:"sm",md:"md",lg:"md",xl:"lg",xxl:"lg"},l=({is:e})=>{const r=t.useContext(n),{size:o}=r,m=t.useMemo(()=>i(o,s=>c[s]),[o]);return t.createElement(a,{size:m,is:e})};export{l as AvatarIcon};

package/dist/components/avatar/AvatarImage.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare type TAvatarImageProps = {
+    src: string;
+    alt: string;
+};
+export declare const AvatarImage: React.FC<TAvatarImageProps>;
+export {};

package/dist/components/avatar/AvatarImage.js

@@ -0,0 +1 @@
+import*as e from"react";import{styled as o}from"../../stitches.js";import{Image as a}from"../image/Image.js";import{AvatarInitial as m}from"./AvatarInitial.js";const i=o(a,{size:"100%",objectFit:"cover"}),c=({src:t,alt:r})=>t?e.createElement(i,{src:t,alt:r}):e.createElement(m,null);export{c as AvatarImage};

package/dist/components/avatar/AvatarInitial.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const AvatarInitial: React.FC<Record<string, never>>;

package/dist/components/avatar/AvatarInitial.js

@@ -0,0 +1 @@
+import*as t from"react";import{overrideStitchesVariantValue as a}from"../../utilities/override-stitches-variant-value/overrideStitchesVariantValue.js";import{Text as l}from"../text/Text.js";import{AvatarRootContext as n}from"./Avatar.js";import{AvatarPlaceholder as i}from"./AvatarPlaceholder.js";const c={xs:"xs",sm:"sm",md:"sm",lg:"md",xl:"md",xxl:"lg"},x=()=>{const r=t.useContext(n),{name:e,size:o}=r,m=t.useMemo(()=>a(o,s=>c[s]),[o]);return e?t.createElement(l,{size:m,css:{color:"$tonal400"}},e[0].toUpperCase()):t.createElement(i,null)};export{x as AvatarInitial};

package/dist/components/avatar/AvatarPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const AvatarPlaceholder: React.FC<Record<string, never>>;

package/dist/components/avatar/AvatarPlaceholder.js

@@ -0,0 +1 @@
+import*as e from"react";import{User as o}from"@atom-learning/icons";import{Box as r}from"../box/Box.js";import{Icon as t}from"../icon/Icon.js";const s=()=>e.createElement(r,{css:{position:"relative",size:"100%"}},e.createElement(t,{is:o,css:{size:"100%"}}));export{s as AvatarPlaceholder};

package/dist/components/avatar/index.d.ts

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

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export { Accordion } from './accordion';
 export { EmptyState } from './empty-state';
 export { ActionIcon } from './action-icon';
 export { AlertDialog, useAlert, AlertProvider } from './alert-dialog';
+export { Avatar } from './avatar';
 export { Badge } from './badge';
 export { Box } from './box';
 export { Button, StyledButton } from './button';