@atom-learning/components 1.6.3 → 1.6.6

package/dist/components/accordion/Accordion.d.ts

@@ -1,274 +1,10 @@
+import { Root } from '@radix-ui/react-accordion';
+import React from 'react';
+import { AccordionContent } from './AccordionContent';
 import { AccordionItem } from './AccordionItem';
 import { AccordionTrigger } from './AccordionTrigger';
-import { AccordionContent } from './AccordionContent';
-import React from 'react';
-declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<(import("@radix-ui/react-accordion").AccordionSingleProps & React.RefAttributes<HTMLDivElement>) | (import("@radix-ui/react-accordion").AccordionMultipleProps & React.RefAttributes<HTMLDivElement>)>, {}, {
-    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 AccordionProps = React.ComponentProps<typeof StyledRoot> & {
-    type: 'single';
+declare type AccordionProps = React.ComponentProps<typeof Root> & {
+    type: 'single' | 'multiple';
 };
 export declare const Accordion: React.FC<AccordionProps> & {
     Item: typeof AccordionItem;

package/dist/components/accordion/Accordion.js

@@ -1 +1 @@
-import{Root as i}from"@radix-ui/react-accordion";import{AccordionItem as m}from"./AccordionItem.js";import{AccordionTrigger as c}from"./AccordionTrigger.js";import{AccordionContent as n}from"./AccordionContent.js";import d from"react";import{styled as p}from"../../stitches.js";const f=p(i,{width:"100%"}),o=({type:r="single",children:t,...e})=>d.createElement(f,{type:r,...e},t);o.Item=m,o.Content=n,o.Trigger=c,o.displayName="Accordion";export{o as Accordion};
+import{Root as i}from"@radix-ui/react-accordion";import m from"react";import{styled as c}from"../../stitches.js";import{AccordionContent as n}from"./AccordionContent.js";import{AccordionItem as d}from"./AccordionItem.js";import{AccordionTrigger as p}from"./AccordionTrigger.js";const f=c(i,{width:"100%"}),o=({type:r="single",children:t,...e})=>m.createElement(f,{type:r,...e},t);o.Item=d,o.Content=n,o.Trigger=p,o.displayName="Accordion";export{o as Accordion};

package/dist/components/accordion/AccordionTrigger.js

@@ -1 +1 @@
-import{Trigger as s}from"@radix-ui/react-accordion";import a from"react";import{Box as l}from"../box/Box.js";import{Icon as f}from"../icon/Icon.js";import{ChevronDown as d}from"@atom-learning/icons";import{styled as c,theme as i}from"../../stitches.js";import{darken as r}from"polished";const n=(t,e,o,m="#fff")=>({bg:t,color:m,"&[disabled]":{bg:"$tonal100",cursor:"not-allowed",color:"$tonal400"},"&:not([disabled]):hover":{bg:e},"&:not([disabled]):active":{bg:o}}),g=c(s,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",'&[data-state="open"]':{borderRadius:"$0 $0 0 0","& svg":{transition:"transform 300ms",transform:"rotate(180deg)"}},'&[data-state="closed"]':{borderRadius:"$0","& svg":{transition:"transform 300ms",transform:"rotate(0deg)"}},variants:{theme:{primaryDark:n("$primaryDark",r(.1,i.colors.primaryDark.value),r(.15,i.colors.primaryDark.value)),light:n("#fff",r(.1,"#fff"),r(.15,"#fff"),"$tonal600")}}}),p=({theme:t="primaryDark",children:e,...o})=>a.createElement(g,{theme:t,...o},a.createElement(l,null,e),a.createElement(f,{is:d}));export{p as AccordionTrigger};
+import{ChevronDown as d}from"@atom-learning/icons";import{Trigger as l}from"@radix-ui/react-accordion";import{darken as r}from"polished";import a from"react";import{styled as i,theme as n}from"../../stitches.js";import{Icon as f}from"../icon/Icon.js";const s=(t,e,o,m="#fff")=>({bg:t,color:m,"&[disabled]":{bg:"$tonal100",cursor:"not-allowed",color:"$tonal400"},"&:not([disabled]):hover":{bg:e},"&:not([disabled]):active":{bg:o}}),c=i(f,{transition:"transform 300ms",'[data-state="open"] > &':{transform:"rotate(180deg)"},'[data-state="closed"] > &':{transform:"rotate(0deg)"}}),p=i(l,{border:0,py:"$3",px:"$4",width:"100%",display:"flex",justifyContent:"space-between",alignItems:"center",cursor:"pointer",'&[data-state="open"]':{borderRadius:"$0 $0 0 0"},'&[data-state="closed"]':{borderRadius:"$0"},variants:{theme:{primaryDark:s("$primaryDark",r(.1,n.colors.primaryDark.value),r(.15,n.colors.primaryDark.value)),light:s("#fff",r(.1,"#fff"),r(.15,"#fff"),"$tonal600")}}}),g=({theme:t="primaryDark",children:e,...o})=>a.createElement(p,{theme:t,...o},e,a.createElement(c,{is:d}));export{g as AccordionTrigger};

package/dist/components/button/Button.js

@@ -1 +1 @@
-import{darken as c,opacify as i}from"polished";import{forwardRef as f,createElement as n,Children as w,cloneElement as k,Fragment as v}from"react";import{Box as S}from"../box/Box.js";import{Icon as D}from"../icon/Icon.js";import{Loader as x}from"../loader/Loader.js";import{styled as C,theme as l}from"../../stitches.js";const p=(e,o,t)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:o},"&:not([disabled]):active":{color:t}}),a=(e,o,t,r="white")=>({bg:e,color:r,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:o,color:r},"&:not([disabled]):active":{bg:t}}),d=C("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:a("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:a("$primaryDark",c(.1,l.colors.primaryDark.value),c(.15,l.colors.primaryDark.value))},{theme:"success",appearance:"solid",css:a("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:a("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:a("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:a("white",i(-.1,"white"),i(-.25,"white"),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",i(-.2,"white"),i(-.35,"white"))}]}),B=({isLoading:e,children:o})=>n(v,null,n(x,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),n(S,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},o)),M=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,o)=>w.map(e,(t,r)=>(t==null?void 0:t.type)===D?k(t,{css:{[r===0?"mr":"ml"]:o==="sm"?"$2":"$3",size:M(o),...t.props.css?t.props.css:{}}}):t),u=f(({children:e,isLoading:o,onClick:t,href:r,appearance:$="solid",size:s="md",theme:h="primary",type:y="button",...g},b)=>n(d,{isLoading:o||!1,onClick:o?void 0:t,appearance:$,size:s,theme:h,...g,...r?{as:"a",href:r,onClick:void 0}:{},...r?{}:{type:y},ref:b},typeof o=="boolean"?n(B,{isLoading:o},m(e,s)):m(e,s)));u.displayName="Button";export{u as Button,d as StyledButton};
+import{darken as i,opacify as s}from"polished";import{forwardRef as f,createElement as n,Children as w,cloneElement as k,Fragment as v}from"react";import{Box as D}from"../box/Box.js";import{Icon as S}from"../icon/Icon.js";import{Loader as x}from"../loader/Loader.js";import{styled as C,theme as c}from"../../stitches.js";const p=(e,r,o)=>({border:"1px solid",borderColor:"currentColor",color:e,"&[disabled]":{borderColor:"$tonal400",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{textDecoration:"none",color:r},"&:not([disabled]):active":{color:o}}),a=(e,r,o,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:r,color:t},"&:not([disabled]):active":{bg:o}}),d=C("button",{alignItems:"center",bg:"unset",border:"unset",borderRadius:"$0",cursor:"pointer",display:"flex",fontFamily:"$body",fontWeight:600,justifyContent:"center",p:"unset",textDecoration:"none",transition:"all 100ms ease-out",whiteSpace:"nowrap",width:"max-content",variants:{theme:{primary:{},secondary:{},success:{},warning:{},danger:{},neutral:{}},appearance:{solid:{},outline:{}},size:{sm:{fontSize:"$sm",lineHeight:1.53,height:"$3",px:"$4"},md:{fontSize:"$md",lineHeight:1.5,height:"$4",px:"$5"},lg:{fontSize:"$lg",lineHeight:1.5,height:"$5",px:"$5"}},isLoading:{true:{cursor:"not-allowed",opacity:.6,pointerEvents:"none"}},fullWidth:{true:{width:"100%"}},isRounded:{true:{borderRadius:"$round"}}},compoundVariants:[{theme:"primary",appearance:"solid",css:a("$primary","$primaryMid","$primaryDark")},{theme:"secondary",appearance:"solid",css:a("$primaryDark",i(.1,c.colors.primaryDark.value),i(.15,c.colors.primaryDark.value))},{theme:"success",appearance:"solid",css:a("$success","$successMid","$successDark")},{theme:"warning",appearance:"solid",css:a("$warning","$warningMid","$warningDark","$tonal500")},{theme:"danger",appearance:"solid",css:a("$danger","$dangerMid","$dangerDark")},{theme:"neutral",appearance:"solid",css:a("white",s(-.1,"white"),s(-.25,"white"),"$primary")},{theme:"primary",appearance:"outline",css:p("$primary","$primaryMid","$primaryDark")},{theme:"neutral",appearance:"outline",css:p("white",s(-.2,"white"),s(-.35,"white"))},{theme:"secondary",appearance:"outline",css:p("$primaryDark",i(.1,c.colors.primaryDark.value),i(.15,c.colors.primaryDark.value))}]}),B=({isLoading:e,children:r})=>n(v,null,n(x,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),n(D,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},r)),M=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},m=(e,r)=>w.map(e,(o,t)=>(o==null?void 0:o.type)===S?k(o,{css:{[t===0?"mr":"ml"]:r==="sm"?"$2":"$3",size:M(r),...o.props.css?o.props.css:{}}}):o),u=f(({children:e,isLoading:r,onClick:o,href:t,appearance:$="solid",size:l="md",theme:y="primary",type:h="button",...g},b)=>n(d,{isLoading:r||!1,onClick:r?void 0:o,appearance:$,size:l,theme:y,...g,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:h},ref:b},typeof r=="boolean"?n(B,{isLoading:r},m(e,l)):m(e,l)));u.displayName="Button";export{u as Button,d as StyledButton};

package/dist/components/stepper/StepperSteps.d.ts

@@ -1,2 +1,3 @@
 import * as React from 'react';
-export declare const StepperSteps: React.FC;
+import { IStepperStepsProps } from './types';
+export declare const StepperSteps: React.FC<IStepperStepsProps>;

package/dist/components/stepper/StepperSteps.js

@@ -1 +1 @@
-import{createElement as i}from"react";import{styled as m}from"../../stitches.js";import{Flex as l}from"../flex/Flex.js";import{useStepper as h}from"./stepper-context/StepperContext.js";const g=m(l,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",width:"$2",height:"$2",borderRadius:"50%",border:"none",bg:"$tonal50",fontFamily:"$body",fontWeight:400,fontSize:"$sm","&:not(:first-child)":{ml:"$3"},"&:not(:last-child)::after":{content:"",width:"$1",height:"1px",position:"absolute",left:"$sizes$2"},variants:{state:{normal:{bg:"$tonal50",color:"$tonal400"},active:{bg:"$primary",color:"white"},viewed:{bg:"$primaryDark",color:"white"}},separator:{normal:{"&:not(:last-child)::after":{bg:"$tonal50"}},highlight:{"&:not(:last-child)::after":{bg:"$primaryDark"}}}}}),u=()=>{const{steps:s,goToStep:n,activeStep:a,viewedSteps:r,allowSkip:o}=h(),p=e=>a===e?"active":r.includes(e)?"viewed":"normal",c=e=>e<Math.max(...r)?"highlight":"normal";return i(l,{css:{alignItems:"center"}},s.map((e,t)=>i(g,{key:`step_${t}`,as:o?"button":"div",onClick:()=>o&&r.includes(t)?n(t):void 0,state:p(t),separator:c(t),"aria-current":t===a?"step":void 0,"aria-label":`step ${t+1}`,css:{cursor:o&&r.includes(t)?"pointer":"auto"}},t+1)))};export{u as StepperSteps};
+import{createElement as n}from"react";import{styled as $}from"../../stitches.js";import{Flex as s}from"../flex/Flex.js";import{useStepper as g}from"./stepper-context/StepperContext.js";const u=$(s,{position:"relative",p:"$2",justifyContent:"center",alignItems:"center",width:"$2",height:"$2",borderRadius:"50%",border:"none",bg:"$tonal50",fontFamily:"$body",fontWeight:400,fontSize:"$sm","&:not(:first-child)":{ml:"$3"},"&:not(:last-child)::after":{content:"",height:"1px",position:"absolute",left:"$sizes$2"},variants:{state:{normal:{bg:"$tonal50",color:"$tonal400"},active:{bg:"$primary",color:"white"},viewed:{bg:"$primaryDark",color:"white"}},separator:{normal:{"&:not(:last-child)::after":{bg:"$tonal50"}},highlight:{"&:not(:last-child)::after":{bg:"$primaryDark"}}}}}),f=({css:r,...p})=>{const{steps:a,goToStep:c,activeStep:l,viewedSteps:o,allowSkip:i}=g(),h=e=>l===e?"active":o.includes(e)?"viewed":"normal",m=e=>e<Math.max(...o)?"highlight":"normal";return n(s,{css:{alignItems:"center",justifyContent:"space-between",...r},...p},a.map((e,t)=>n(u,{key:`step_${t}`,as:i?"button":"div",onClick:()=>i&&o.includes(t)?c(t):void 0,state:h(t),separator:m(t),"aria-current":t===l?"step":void 0,"aria-label":`step ${t+1}`,css:{cursor:i&&o.includes(t)?"pointer":"auto","&:not(:last-child)::after":{width:(r==null?void 0:r.width)?`calc((${r.width} - ($2 * ${a.length})) / ${a.length-1})`:"$1"}}},t+1)))};export{f as StepperSteps};

package/dist/components/stepper/types.d.ts

@@ -1,3 +1,4 @@
+import { CSS } from '../../stitches';
 export declare type Context = {
     steps: unknown[];
     goToPreviousStep: () => void;
@@ -22,3 +23,7 @@ export interface IStepperProps {
 export interface IStepperNavigateProps {
     label?: (currentStep?: number) => string;
 }
+export interface IStepperStepsProps {
+    css?: CSS;
+    stepsWidth?: string;
+}