@atom-learning/components 1.6.2 → 1.6.5

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/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 a}from"react";import{styled as c}from"../../stitches.js";import{Flex as i}from"../flex/Flex.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const h=c(i,{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:"$tonal400"}},highlight:{"&:not(:last-child)::after":{bg:"$primary"}}}}}),$=()=>{const{steps:l,goToStep:s,activeStep:e,viewedSteps:n,allowSkip:r}=m(),p=o=>e===o?"active":n.includes(o)?"viewed":"normal";return a(i,{css:{alignItems:"center"}},l.map((o,t)=>a(h,{key:`step_${t}`,as:r?"button":"div",onClick:()=>r?s(t):void 0,state:p(t),separator:t<e?"highlight":"normal","aria-current":t===e?"step":void 0,"aria-label":`step ${t+1}`,css:{cursor:r?"pointer":"auto"}},t+1)))};export{$ 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;
+}