@atom-learning/components 1.6.3 → 1.6.4

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;
+}