@atom-learning/components 4.3.0 → 4.3.2

package/dist/components/stepper/StepperStepLabel.js

@@ -0,0 +1,2 @@
+import{styled as e}from"../../stitches.js";import{Text as t}from"../text/Text.js";const r=e(t,{fontWeight:600,variants:{direction:{vertical:{ml:"$3",textAlign:"left"},horizontal:{mt:"$3",textAlign:"center"}},status:{default:{color:"$grey700",fontWeight:400},active:{color:"$primary900"},viewed:{color:"$grey1000"},completed:{color:"$primary800"},success:{color:"$success"},reviewed:{}}}});export{r as StepperStepLabel};
+//# sourceMappingURL=StepperStepLabel.js.map

package/dist/components/stepper/StepperStepLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperStepLabel.js","sources":["../../../src/components/stepper/StepperStepLabel.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Text } from '../text'\n\nexport const StepperStepLabel = styled(Text, {\n  fontWeight: 600,\n  variants: {\n    direction: {\n      vertical: { ml: '$3', textAlign: 'left' },\n      horizontal: { mt: '$3', textAlign: 'center' }\n    },\n    status: {\n      default: { color: '$grey700', fontWeight: 400 },\n      active: {\n        color: '$primary900'\n      },\n      viewed: { color: '$grey1000' },\n      completed: { color: '$primary800' },\n      success: { color: '$success' },\n      reviewed: {}\n    }\n  }\n})\n"],"names":["StepperStepLabel","styled","Text"],"mappings":"kFAIO,MAAMA,EAAmBC,EAAOC,EAAM,CAC3C,WAAY,IACZ,SAAU,CACR,UAAW,CACT,SAAU,CAAE,GAAI,KAAM,UAAW,MAAO,EACxC,WAAY,CAAE,GAAI,KAAM,UAAW,QAAS,CAC9C,EACA,OAAQ,CACN,QAAS,CAAE,MAAO,WAAY,WAAY,GAAI,EAC9C,OAAQ,CACN,MAAO,aACT,EACA,OAAQ,CAAE,MAAO,WAAY,EAC7B,UAAW,CAAE,MAAO,aAAc,EAClC,QAAS,CAAE,MAAO,UAAW,EAC7B,SAAU,CAAA,CACZ,CACF,CACF,CAAC"}

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

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { IStepperStepsProps } from './types';
+export declare const StepperSteps: ({ css }: IStepperStepsProps) => React.JSX.Element;

package/dist/components/stepper/StepperSteps.js

@@ -0,0 +1,2 @@
+import{Ok as h}from"@atom-learning/icons";import*as n from"react";import{styled as b}from"../../stitches.js";import{Flex as v}from"../flex/Flex.js";import{Icon as D}from"../icon/Icon.js";import{useStepper as I}from"./stepper-context/StepperContext.js";import{StepperStepBullet as g}from"./StepperStepBullet.js";import{StepperStepContainer as T}from"./StepperStepContainer.js";import{StepperStepLabel as w}from"./StepperStepLabel.js";import{Status as t}from"./types.js";const L=b(v,{justifyContent:"space-between",variants:{direction:{vertical:{flexDirection:"column"},horizontal:{flexDirection:"row"}}}}),U=({css:S})=>{const{steps:i,goToStep:m,activeStep:r,viewedSteps:a,allowSkip:l,direction:c,hideLabels:E,completedSteps:p,showCompletedIcons:u}=I(),d=o=>{const e=i[o];return e.status?e.status:p.length===i.length?t.SUCCESS:r===o&&p.includes(r)?t.REVIEWED:r===o?t.ACTIVE:p.includes(o)?t.COMPLETED:a.includes(o)?t.VIEWED:t.DEFAULT},C=o=>{var e;const s=(e=i[o])==null?void 0:e.status;return p.length===i.length?t.SUCCESS:s===t.SUCCESS?t.SUCCESS:s===t.COMPLETED||o<Math.max(...a)?t.ACTIVE:s===t.VIEWED?t.VIEWED:t.DEFAULT};return n.createElement(L,{css:S,direction:c},i.map((o,e)=>{const s=d(e),f=C(e);return n.createElement(T,{tabIndex:0,key:`step_${e}`,direction:c,separator:f,status:s,css:c==="horizontal"?{width:`calc(100% / ${i.length})`}:{height:`calc(100% / ${i.length})`},canInteract:l},n.createElement(g,{as:l?"button":"div",onClick:()=>l&&a.includes(e)?m==null?void 0:m(e):void 0,status:s,"aria-current":e===r?"step":void 0,"aria-label":o.label?"":`step ${e+1}`,"aria-labelledby":o.label?`step-${e}`:void 0,css:{cursor:l&&a.includes(e)?"pointer":"auto"}},o.status===t.SUCCESS||u&&s===t.COMPLETED?n.createElement(D,{is:h}):e+1),o.label&&!E&&n.createElement(w,{as:"span",id:`step-${e}`,direction:c,status:s},o.label))}))};export{U as StepperSteps};
+//# sourceMappingURL=StepperSteps.js.map

package/dist/components/stepper/StepperSteps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperSteps.js","sources":["../../../src/components/stepper/StepperSteps.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../flex'\nimport { Icon } from '../icon'\nimport { useStepper } from './stepper-context/StepperContext'\nimport { StepperStepBullet } from './StepperStepBullet'\nimport { StepperStepContainer } from './StepperStepContainer'\nimport { StepperStepLabel } from './StepperStepLabel'\nimport { IStepperStepsProps, Status } from './types'\n\nconst StepperStepsContainer = styled(Flex, {\n  justifyContent: 'space-between',\n  variants: {\n    direction: {\n      vertical: { flexDirection: 'column' },\n      horizontal: { flexDirection: 'row' }\n    }\n  }\n})\n\nexport const StepperSteps = ({ css }: IStepperStepsProps) => {\n  const {\n    steps,\n    goToStep,\n    activeStep,\n    viewedSteps,\n    allowSkip,\n    direction,\n    hideLabels,\n    completedSteps,\n    showCompletedIcons\n  } = useStepper()\n\n  const getBulletStatus = (index: number) => {\n    const activeBullet = steps[index]\n\n    if (activeBullet.status) return activeBullet.status\n    if (completedSteps.length === steps.length) return Status.SUCCESS\n    if (activeStep === index && completedSteps.includes(activeStep))\n      return Status.REVIEWED\n    if (activeStep === index) return Status.ACTIVE\n    if (completedSteps.includes(index)) return Status.COMPLETED\n    if (viewedSteps.includes(index)) return Status.VIEWED\n    return Status.DEFAULT\n  }\n\n  const getSeparatorStatus = (index: number) => {\n    const bulletStatus = steps[index]?.status\n\n    if (completedSteps.length === steps.length) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.SUCCESS) {\n      return Status.SUCCESS\n    }\n\n    if (bulletStatus === Status.COMPLETED || index < Math.max(...viewedSteps)) {\n      return Status.ACTIVE\n    }\n\n    if (bulletStatus === Status.VIEWED) {\n      return Status.VIEWED\n    }\n\n    return Status.DEFAULT\n  }\n\n  return (\n    <StepperStepsContainer css={css} direction={direction}>\n      {steps.map((step, index) => {\n        const bulletStatus = getBulletStatus(index)\n        const separatorStatus = getSeparatorStatus(index)\n\n        return (\n          <StepperStepContainer\n            tabIndex={0}\n            key={`step_${index}`}\n            direction={direction}\n            separator={separatorStatus}\n            status={bulletStatus}\n            css={\n              direction === 'horizontal'\n                ? { width: `calc(100% / ${steps.length})` }\n                : { height: `calc(100% / ${steps.length})` }\n            }\n            canInteract={allowSkip}\n          >\n            <StepperStepBullet\n              as={allowSkip ? 'button' : 'div'}\n              onClick={() =>\n                allowSkip && viewedSteps.includes(index)\n                  ? goToStep?.(index)\n                  : undefined\n              }\n              status={bulletStatus}\n              aria-current={index === activeStep ? 'step' : undefined}\n              aria-label={!step.label ? `step ${index + 1}` : ''}\n              aria-labelledby={step.label ? `step-${index}` : undefined}\n              css={{\n                cursor:\n                  allowSkip && viewedSteps.includes(index) ? 'pointer' : 'auto'\n              }}\n            >\n              {step.status === Status.SUCCESS ||\n              (showCompletedIcons && bulletStatus === Status.COMPLETED) ? (\n                <Icon is={Ok} />\n              ) : (\n                index + 1\n              )}\n            </StepperStepBullet>\n\n            {step.label && !hideLabels && (\n              <StepperStepLabel\n                as=\"span\"\n                id={`step-${index}`}\n                direction={direction}\n                status={bulletStatus}\n              >\n                {step.label}\n              </StepperStepLabel>\n            )}\n          </StepperStepContainer>\n        )\n      })}\n    </StepperStepsContainer>\n  )\n}\n"],"names":["StepperStepsContainer","styled","Flex","StepperSteps","css","steps","goToStep","activeStep","viewedSteps","allowSkip","direction","hideLabels","completedSteps","showCompletedIcons","useStepper","getBulletStatus","index","activeBullet","Status","getSeparatorStatus","_a","bulletStatus","React","step","separatorStatus","StepperStepContainer","StepperStepBullet","Icon","Ok","StepperStepLabel"],"mappings":"qdAaA,MAAMA,EAAwBC,EAAOC,EAAM,CACzC,eAAgB,gBAChB,SAAU,CACR,UAAW,CACT,SAAU,CAAE,cAAe,QAAS,EACpC,WAAY,CAAE,cAAe,KAAM,CACrC,CACF,CACF,CAAC,EAEYC,EAAe,CAAC,CAAE,IAAAC,CAAI,IAA0B,CAC3D,KAAM,CACJ,MAAAC,EACA,SAAAC,EACA,WAAAC,EACA,YAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,eAAAC,EACA,mBAAAC,CACF,EAAIC,EAAW,EAETC,EAAmBC,GAAkB,CACzC,MAAMC,EAAeZ,EAAMW,GAE3B,OAAIC,EAAa,OAAeA,EAAa,OACzCL,EAAe,SAAWP,EAAM,OAAea,EAAO,QACtDX,IAAeS,GAASJ,EAAe,SAASL,CAAU,EACrDW,EAAO,SACZX,IAAeS,EAAcE,EAAO,OACpCN,EAAe,SAASI,CAAK,EAAUE,EAAO,UAC9CV,EAAY,SAASQ,CAAK,EAAUE,EAAO,OACxCA,EAAO,OAChB,EAEMC,EAAsBH,GAAkB,CAjDhD,IAAAI,EAkDI,MAAMC,GAAeD,EAAAf,EAAMW,KAAN,KAAA,OAAAI,EAAc,OAEnC,OAAIR,EAAe,SAAWP,EAAM,OAC3Ba,EAAO,QAGZG,IAAiBH,EAAO,QACnBA,EAAO,QAGZG,IAAiBH,EAAO,WAAaF,EAAQ,KAAK,IAAI,GAAGR,CAAW,EAC/DU,EAAO,OAGZG,IAAiBH,EAAO,OACnBA,EAAO,OAGTA,EAAO,OAChB,EAEA,OACEI,EAAA,cAACtB,EAAA,CAAsB,IAAKI,EAAK,UAAWM,CAAAA,EACzCL,EAAM,IAAI,CAACkB,EAAMP,IAAU,CAC1B,MAAMK,EAAeN,EAAgBC,CAAK,EACpCQ,EAAkBL,EAAmBH,CAAK,EAEhD,OACEM,EAAA,cAACG,EAAA,CACC,SAAU,EACV,IAAK,QAAQT,IACb,UAAWN,EACX,UAAWc,EACX,OAAQH,EACR,IACEX,IAAc,aACV,CAAE,MAAO,eAAeL,EAAM,SAAU,EACxC,CAAE,OAAQ,eAAeA,EAAM,SAAU,EAE/C,YAAaI,CAEba,EAAAA,EAAA,cAACI,EAAA,CACC,GAAIjB,EAAY,SAAW,MAC3B,QAAS,IACPA,GAAaD,EAAY,SAASQ,CAAK,EACnCV,GAAA,KAAA,OAAAA,EAAWU,CACX,EAAA,OAEN,OAAQK,EACR,eAAcL,IAAUT,EAAa,OAAS,OAC9C,aAAagB,EAAK,MAA8B,GAAtB,QAAQP,EAAQ,IAC1C,kBAAiBO,EAAK,MAAQ,QAAQP,IAAU,OAChD,IAAK,CACH,OACEP,GAAaD,EAAY,SAASQ,CAAK,EAAI,UAAY,MAC3D,CAECO,EAAAA,EAAK,SAAWL,EAAO,SACvBL,GAAsBQ,IAAiBH,EAAO,UAC7CI,EAAA,cAACK,EAAA,CAAK,GAAIC,EAAI,EAEdZ,EAAQ,CAEZ,EAECO,EAAK,OAAS,CAACZ,GACdW,EAAA,cAACO,EAAA,CACC,GAAG,OACH,GAAI,QAAQb,IACZ,UAAWN,EACX,OAAQW,GAEPE,EAAK,KACR,CAEJ,CAEJ,CAAC,CACH,CAEJ"}

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

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

package/dist/components/stepper/stepper-context/StepperContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { Context, StepperProviderProps } from '../types';
+export declare const StepperProvider: ({ children, stepCount, allowSkip, onComplete, onStepChange, direction, steps, hideLabels, showCompletedIcons }: React.PropsWithChildren<StepperProviderProps>) => React.JSX.Element;
+export declare const useStepper: () => Context;

package/dist/components/stepper/stepper-context/StepperContext.js

@@ -0,0 +1,2 @@
+import*as o from"react";const d=o.createContext({steps:[],goToPreviousStep:()=>null,goToNextStep:()=>null,goToStep:()=>null,activeStep:0,viewedSteps:[],allowSkip:!1,direction:"horizontal",hideLabels:!1,completedSteps:[],showCompletedIcons:!1}),b=({children:s,stepCount:i,allowSkip:S,onComplete:p,onStepChange:l,direction:a,steps:h,hideLabels:v,showCompletedIcons:w})=>{const[e,r]=o.useState(0),[m,g]=o.useState([0]),[C,f]=o.useState([]),c=!i;o.useEffect(()=>{g(t=>t.includes(e)?t:[...t,e]),l==null||l(e)},[e,l]);const T=()=>{const t=p&&e===i-1,u=e<i-1;if((p||u)&&f(n=>n.includes(e)?n:[...n,e]),t)return p==null?void 0:p();if(u)return r(n=>n+1)},x=()=>{r(t=>t-1)},P=t=>{r(t)};return o.createElement(d.Provider,{value:{steps:h||Array(i).fill(""),goToPreviousStep:c?void 0:x,goToNextStep:c?void 0:T,goToStep:c?void 0:P,activeStep:e,viewedSteps:m,completedSteps:C,allowSkip:S,direction:a,hideLabels:v,showCompletedIcons:w}},s)},E=()=>{const s=o.useContext(d);if(!s)throw new Error("Ensure that you wrap any components with the root component Stepper");return s};export{b as StepperProvider,E as useStepper};
+//# sourceMappingURL=StepperContext.js.map

package/dist/components/stepper/stepper-context/StepperContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperContext.js","sources":["../../../../src/components/stepper/stepper-context/StepperContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Context, StepperProviderProps } from '../types'\n\nconst StepperContext = React.createContext<Context>({\n  steps: [],\n  goToPreviousStep: () => null,\n  goToNextStep: () => null,\n  goToStep: () => null,\n  activeStep: 0,\n  viewedSteps: [],\n  allowSkip: false,\n  direction: 'horizontal',\n  hideLabels: false,\n  completedSteps: [],\n  showCompletedIcons: false\n})\n\nexport const StepperProvider = ({\n  children,\n  stepCount,\n  allowSkip,\n  onComplete,\n  onStepChange,\n  direction,\n  steps,\n  hideLabels,\n  showCompletedIcons\n}: React.PropsWithChildren<StepperProviderProps>) => {\n  const [activeStep, setActiveStep] = React.useState(0)\n\n  const [viewedSteps, setviewedSteps] = React.useState<number[]>([0])\n  const [completedSteps, setCompletedSteps] = React.useState<number[]>([])\n\n  const isControlled = !stepCount\n\n  React.useEffect(() => {\n    setviewedSteps((prev) =>\n      prev.includes(activeStep) ? prev : [...prev, activeStep]\n    )\n\n    onStepChange?.(activeStep)\n  }, [activeStep, onStepChange])\n\n  const goToNextStep = () => {\n    const isCompleted = onComplete && activeStep === stepCount - 1\n    const isNextStep = activeStep < stepCount - 1\n\n    if (onComplete || isNextStep) {\n      setCompletedSteps((prev) =>\n        prev.includes(activeStep) ? prev : [...prev, activeStep]\n      )\n    }\n\n    if (isCompleted) {\n      return onComplete?.()\n    }\n    if (isNextStep) {\n      return setActiveStep((current) => current + 1)\n    }\n  }\n\n  const goToPreviousStep = () => {\n    setActiveStep((current) => current - 1)\n  }\n\n  const goToStep = (index: number) => {\n    setActiveStep(index)\n  }\n\n  return (\n    <StepperContext.Provider\n      value={{\n        steps: steps || Array(stepCount).fill(''),\n        goToPreviousStep: isControlled ? undefined : goToPreviousStep,\n        goToNextStep: isControlled ? undefined : goToNextStep,\n        goToStep: isControlled ? undefined : goToStep,\n        activeStep,\n        viewedSteps,\n        completedSteps,\n        allowSkip,\n        direction,\n        hideLabels,\n        showCompletedIcons\n      }}\n    >\n      {children}\n    </StepperContext.Provider>\n  )\n}\n\nexport const useStepper = (): Context => {\n  const context = React.useContext(StepperContext)\n  if (!context)\n    throw new Error(\n      'Ensure that you wrap any components with the root component Stepper'\n    )\n\n  return context\n}\n"],"names":["StepperContext","React","StepperProvider","children","stepCount","allowSkip","onComplete","onStepChange","direction","steps","hideLabels","showCompletedIcons","activeStep","setActiveStep","viewedSteps","setviewedSteps","completedSteps","setCompletedSteps","isControlled","prev","goToNextStep","isCompleted","isNextStep","current","goToPreviousStep","goToStep","index","useStepper","context"],"mappings":"wBAIA,MAAMA,EAAiBC,EAAM,cAAuB,CAClD,MAAO,CAAA,EACP,iBAAkB,IAAM,KACxB,aAAc,IAAM,KACpB,SAAU,IAAM,KAChB,WAAY,EACZ,YAAa,CAAC,EACd,UAAW,GACX,UAAW,aACX,WAAY,GACZ,eAAgB,CAAC,EACjB,mBAAoB,EACtB,CAAC,EAEYC,EAAkB,CAAC,CAC9B,SAAAC,EACA,UAAAC,EACA,UAAAC,EACA,WAAAC,EACA,aAAAC,EACA,UAAAC,EACA,MAAAC,EACA,WAAAC,EACA,mBAAAC,CACF,IAAqD,CACnD,KAAM,CAACC,EAAYC,CAAa,EAAIZ,EAAM,SAAS,CAAC,EAE9C,CAACa,EAAaC,CAAc,EAAId,EAAM,SAAmB,CAAC,CAAC,CAAC,EAC5D,CAACe,EAAgBC,CAAiB,EAAIhB,EAAM,SAAmB,CAAE,CAAA,EAEjEiB,EAAe,CAACd,EAEtBH,EAAM,UAAU,IAAM,CACpBc,EAAgBI,GACdA,EAAK,SAASP,CAAU,EAAIO,EAAO,CAAC,GAAGA,EAAMP,CAAU,CACzD,EAEAL,GAAA,MAAAA,EAAeK,CAAAA,CACjB,EAAG,CAACA,EAAYL,CAAY,CAAC,EAE7B,MAAMa,EAAe,IAAM,CACzB,MAAMC,EAAcf,GAAcM,IAAeR,EAAY,EACvDkB,EAAaV,EAAaR,EAAY,EAQ5C,IANIE,GAAcgB,IAChBL,EAAmBE,GACjBA,EAAK,SAASP,CAAU,EAAIO,EAAO,CAAC,GAAGA,EAAMP,CAAU,CACzD,EAGES,EACF,OAAOf,GAAA,YAAAA,EAET,EAAA,GAAIgB,EACF,OAAOT,EAAeU,GAAYA,EAAU,CAAC,CAEjD,EAEMC,EAAmB,IAAM,CAC7BX,EAAeU,GAAYA,EAAU,CAAC,CACxC,EAEME,EAAYC,GAAkB,CAClCb,EAAca,CAAK,CACrB,EAEA,OACEzB,EAAA,cAACD,EAAe,SAAf,CACC,MAAO,CACL,MAAOS,GAAS,MAAML,CAAS,EAAE,KAAK,EAAE,EACxC,iBAAkBc,EAAe,OAAYM,EAC7C,aAAcN,EAAe,OAAYE,EACzC,SAAUF,EAAe,OAAYO,EACrC,WAAAb,EACA,YAAAE,EACA,eAAAE,EACA,UAAAX,EACA,UAAAG,EACA,WAAAE,EACA,mBAAAC,CACF,CAECR,EAAAA,CACH,CAEJ,EAEawB,EAAa,IAAe,CACvC,MAAMC,EAAU3B,EAAM,WAAWD,CAAc,EAC/C,GAAI,CAAC4B,EACH,MAAM,IAAI,MACR,qEACF,EAEF,OAAOA,CACT"}

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

@@ -0,0 +1,55 @@
+import { CSS } from '../../stitches';
+export declare enum Status {
+    ACTIVE = "active",
+    VIEWED = "viewed",
+    SUCCESS = "success",
+    DEFAULT = "default",
+    COMPLETED = "completed",
+    REVIEWED = "reviewed"
+}
+export interface Step {
+    label?: string;
+    status: `${Status}`;
+}
+export type Direction = 'vertical' | 'horizontal';
+export type Context = {
+    steps: Step[];
+    goToPreviousStep?: () => void;
+    goToNextStep?: () => void;
+    goToStep?: (index: number) => void;
+    activeStep: number;
+    viewedSteps: number[];
+    completedSteps: number[];
+    allowSkip?: boolean;
+    direction?: Direction;
+    hideLabels: boolean;
+    showCompletedIcons: boolean;
+};
+export type StepperProviderProps = {
+    stepCount: number;
+    allowSkip?: boolean;
+    onComplete?: () => void;
+    onStepChange?: (activeStep: number) => void;
+    direction?: Direction;
+    steps: Step[];
+    hideLabels: boolean;
+    showCompletedIcons: boolean;
+};
+export interface IStepperProps {
+    css?: CSS;
+    stepCount?: number;
+    allowSkip?: boolean;
+    onComplete?: () => void;
+    onStepChange?: (activeStep: number) => void;
+    direction?: Direction;
+    steps?: Step[];
+    hideLabels?: boolean;
+    showCompletedIcons?: boolean;
+}
+export interface IStepperNavigateProps {
+    label?: (currentStep?: number) => string;
+    onClick?: (next: () => void) => void;
+}
+export interface IStepperStepsProps {
+    css?: CSS;
+}

package/dist/components/stepper/types.js

@@ -0,0 +1,2 @@
+var t=(E=>(E.ACTIVE="active",E.VIEWED="viewed",E.SUCCESS="success",E.DEFAULT="default",E.COMPLETED="completed",E.REVIEWED="reviewed",E))(t||{});export{t as Status};
+//# sourceMappingURL=types.js.map

package/dist/components/stepper/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/stepper/types.ts"],"sourcesContent":["import { CSS } from '~/stitches'\n\nexport enum Status {\n  ACTIVE = 'active',\n  VIEWED = 'viewed',\n  SUCCESS = 'success',\n  DEFAULT = 'default',\n  COMPLETED = 'completed',\n  REVIEWED = 'reviewed'\n}\nexport interface Step {\n  label?: string\n  status: `${Status}`\n}\n\nexport type Direction = 'vertical' | 'horizontal'\n\nexport type Context = {\n  steps: Step[]\n  goToPreviousStep?: () => void\n  goToNextStep?: () => void\n  goToStep?: (index: number) => void\n  activeStep: number\n  viewedSteps: number[]\n  completedSteps: number[]\n  allowSkip?: boolean\n  direction?: Direction\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport type StepperProviderProps = {\n  stepCount: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps: Step[]\n  hideLabels: boolean\n  showCompletedIcons: boolean\n}\n\nexport interface IStepperProps {\n  css?: CSS\n  stepCount?: number\n  allowSkip?: boolean\n  onComplete?: () => void\n  onStepChange?: (activeStep: number) => void\n  direction?: Direction\n  steps?: Step[]\n  hideLabels?: boolean\n  showCompletedIcons?: boolean\n}\n\nexport interface IStepperNavigateProps {\n  label?: (currentStep?: number) => string\n  onClick?: (next: () => void) => void\n}\n\nexport interface IStepperStepsProps {\n  css?: CSS\n}\n"],"names":["Status"],"mappings":"AAEY,IAAAA,GAAAA,IACVA,EAAA,OAAS,SACTA,EAAA,OAAS,SACTA,EAAA,QAAU,UACVA,EAAA,QAAU,UACVA,EAAA,UAAY,YACZA,EAAA,SAAW,WANDA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/components/switch/Switch.d.ts

@@ -0,0 +1,374 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+import * as React from 'react';
+declare const StyledSwitch: import("@atom-learning/stitches-react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<RadixSwitch.SwitchProps & React.RefAttributes<HTMLButtonElement>>, {
+    size?: "md" | "lg" | undefined;
+}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@atom-learning/stitches-react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        textBold: string;
+        textRegular: string;
+        textSubtle: string;
+        textMinimal: string;
+        background: string;
+        backgroundAccent: string;
+        grey100: string;
+        grey200: string;
+        grey300: string;
+        grey400: string;
+        grey500: string;
+        grey600: string;
+        grey700: string;
+        grey800: string;
+        grey900: string;
+        grey1000: string;
+        grey1100: string;
+        grey1200: string;
+        blue100: string;
+        blue200: string;
+        blue300: string;
+        blue400: string;
+        blue500: string;
+        blue600: string;
+        blue700: string;
+        blue800: string;
+        blue900: string;
+        blue1000: string;
+        blue1100: string;
+        blue1200: string;
+        pink100: string;
+        pink200: string;
+        pink300: string;
+        pink400: string;
+        pink500: string;
+        pink600: string;
+        pink700: string;
+        pink800: string;
+        pink900: string;
+        pink1000: string;
+        pink1100: string;
+        pink1200: string;
+        purple100: string;
+        purple200: string;
+        purple300: string;
+        purple400: string;
+        purple500: string;
+        purple600: string;
+        purple700: string;
+        purple800: string;
+        purple900: string;
+        purple1000: string;
+        purple1100: string;
+        purple1200: string;
+        cyan100: string;
+        cyan200: string;
+        cyan300: string;
+        cyan400: string;
+        cyan500: string;
+        cyan600: string;
+        cyan700: string;
+        cyan800: string;
+        cyan900: string;
+        cyan1000: string;
+        cyan1100: string;
+        cyan1200: string;
+        green100: string;
+        green200: string;
+        green300: string;
+        green400: string;
+        green500: string;
+        green600: string;
+        green700: string;
+        green800: string;
+        green900: string;
+        green1000: string;
+        green1100: string;
+        green1200: string;
+        magenta100: string;
+        magenta200: string;
+        magenta300: string;
+        magenta400: string;
+        magenta500: string;
+        magenta600: string;
+        magenta700: string;
+        magenta800: string;
+        magenta900: string;
+        magenta1000: string;
+        magenta1100: string;
+        magenta1200: string;
+        red100: string;
+        red200: string;
+        red300: string;
+        red400: string;
+        red500: string;
+        red600: string;
+        red700: string;
+        red800: string;
+        red900: string;
+        red1000: string;
+        red1100: string;
+        red1200: string;
+        teal100: string;
+        teal200: string;
+        teal300: string;
+        teal400: string;
+        teal500: string;
+        teal600: string;
+        teal700: string;
+        teal800: string;
+        teal900: string;
+        teal1000: string;
+        teal1100: string;
+        teal1200: string;
+        orange100: string;
+        orange200: string;
+        orange300: string;
+        orange400: string;
+        orange500: string;
+        orange600: string;
+        orange700: string;
+        orange800: string;
+        orange900: string;
+        orange1000: string;
+        orange1100: string;
+        orange1200: string;
+        yellow100: string;
+        yellow200: string;
+        yellow300: string;
+        yellow400: string;
+        yellow500: string;
+        yellow600: string;
+        yellow700: string;
+        yellow800: string;
+        yellow900: string;
+        yellow1000: string;
+        yellow1100: string;
+        yellow1200: string;
+        lime100: string;
+        lime200: string;
+        lime300: string;
+        lime400: string;
+        lime500: string;
+        lime600: string;
+        lime700: string;
+        lime800: string;
+        lime900: string;
+        lime1000: string;
+        lime1100: string;
+        lime1200: string;
+        lapis100: string;
+        lapis200: string;
+        lapis300: string;
+        lapis400: string;
+        lapis500: string;
+        lapis600: string;
+        lapis700: string;
+        lapis800: string;
+        lapis900: string;
+        lapis1000: string;
+        lapis1100: string;
+        lapis1200: string;
+        maroon100: string;
+        maroon200: string;
+        maroon300: string;
+        maroon400: string;
+        maroon500: string;
+        maroon600: string;
+        maroon700: string;
+        maroon800: string;
+        maroon900: string;
+        maroon1000: string;
+        maroon1100: string;
+        maroon1200: string;
+        marsh100: string;
+        marsh200: string;
+        marsh300: string;
+        marsh400: string;
+        marsh500: string;
+        marsh600: string;
+        marsh700: string;
+        marsh800: string;
+        marsh900: string;
+        marsh1000: string;
+        marsh1100: string;
+        marsh1200: string;
+        alpha100: string;
+        alpha150: string;
+        alpha200: string;
+        alpha250: string;
+        alpha600: string;
+        infoLight: string;
+        info: string;
+        infoMid: string;
+        infoDark: string;
+        successLight: string;
+        success: string;
+        successMid: string;
+        successDark: string;
+        dangerLight: string;
+        danger: string;
+        dangerMid: string;
+        dangerDark: string;
+        warningLight: string;
+        warning: string;
+        warningMid: string;
+        warningDark: string;
+        warningText: string;
+        subjectEnglish: string;
+        subjectMaths: string;
+        subjectScience: string;
+        subjectVerbalReasoning: string;
+        subjectNonVerbalReasoning: string;
+        subjectCreativeWriting: string;
+        subjectExamSkills: string;
+        glBlueLight: string;
+        glBluePrimary: string;
+        glBlueDark: string;
+        primary100: string;
+        primary200: string;
+        primary300: string;
+        primary400: string;
+        primary500: string;
+        primary600: string;
+        primary700: string;
+        primary800: string;
+        primary900: string;
+        primary1000: string;
+        primary1100: string;
+        primary1200: string;
+    };
+    space: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+        "9": string;
+        "24": string;
+    };
+    fontSizes: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        "2xl": string;
+        "3xl": string;
+        "4xl": string;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
+        display: string;
+        body: string;
+    };
+    sizes: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        "4": string;
+        "5": string;
+        "6": string;
+        "7": string;
+        "8": string;
+    };
+    radii: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+        round: string;
+    };
+    shadows: {
+        "0": string;
+        "1": string;
+        "2": string;
+        "3": string;
+    };
+    ratios: {
+        "16-9": string;
+        "3-2": string;
+        "4-3": string;
+        "1-1": string;
+        "3-4": string;
+    };
+}, import("@atom-learning/stitches-react/types/config").DefaultThemeMap, {
+    bg: (value: import("@atom-learning/stitches-react").PropertyValue<"background">) => {
+        background: import("@atom-learning/stitches-react/types/css-util").WithPropertyValue<"background">;
+    };
+    size: (value: import("@atom-learning/stitches-react").ScaleValue<"size"> | number | string) => {
+        height: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"size">;
+    };
+    p: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        padding: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    pl: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    px: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    py: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        paddingTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    m: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        margin: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mt: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mr: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mb: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    ml: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    mx: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginLeft: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+    my: (value: import("@atom-learning/stitches-react").ScaleValue<"space"> | number | string) => {
+        marginTop: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@atom-learning/stitches-react/types/css-util").WithScaleValue<"space">;
+    };
+}>>;
+type SwitchProps = React.ComponentProps<typeof StyledSwitch>;
+export declare const Switch: {
+    ({ size, ...rest }: SwitchProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/components/switch/Switch.js

@@ -0,0 +1,2 @@
+import*as r from"@radix-ui/react-switch";import*as o from"react";import{styled as t}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as s}from"../../utilities/style/disabledStyle.js";const d=t(r.Root,{appearance:"none",backgroundColor:"$grey600",border:"none",borderRadius:"$round",cursor:"pointer",display:"flex",overflow:"hidden",position:"relative",transition:"all 50ms ease-out","&:hover":{backgroundColor:"$grey700"},"&:focus":{outline:"2px solid $primary800",outlineOffset:"1px"},'&[data-state="checked"]':{backgroundColor:"$primary800"},'&[data-state="checked"]:hover':{backgroundColor:"$primary900"},"&[disabled]":s,variants:{size:{md:{p:"$0",width:"$4"},lg:{p:"$1",width:"$6"}}}}),n=t(r.Thumb,{backgroundColor:"white",borderRadius:"$round",display:"block",transition:"transform 50ms",willChange:"transform",variants:{size:{md:{size:"$1",'&[data-state="checked"]':{transform:"translateX(calc($sizes$2 - $space$1))"}},lg:{size:"$2",'&[data-state="checked"]':{transform:"translateX($space$5)"}}}}}),a=({size:e="md",...i})=>o.createElement(d,{size:e,...i},o.createElement(n,{size:e}));a.displayName="Switch";export{a as Switch};
+//# sourceMappingURL=Switch.js.map

package/dist/components/switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/components/switch/Switch.tsx"],"sourcesContent":["import * as RadixSwitch from '@radix-ui/react-switch'\nimport * as React from 'react'\n\nimport { styled } from '~/stitches'\nimport { disabledStyle } from '~/utilities'\n\nconst StyledSwitch = styled(RadixSwitch.Root, {\n  appearance: 'none',\n  backgroundColor: '$grey600',\n  border: 'none',\n  borderRadius: '$round',\n  cursor: 'pointer',\n  display: 'flex',\n  overflow: 'hidden',\n  position: 'relative',\n  transition: 'all 50ms ease-out',\n  '&:hover': {\n    backgroundColor: '$grey700'\n  },\n  '&:focus': {\n    outline: '2px solid $primary800',\n    outlineOffset: '1px'\n  },\n  '&[data-state=\"checked\"]': {\n    backgroundColor: '$primary800'\n  },\n  '&[data-state=\"checked\"]:hover': {\n    backgroundColor: '$primary900'\n  },\n  '&[disabled]': disabledStyle,\n  variants: {\n    size: {\n      md: {\n        p: '$0',\n        width: '$4'\n      },\n      lg: {\n        p: '$1',\n        width: '$6'\n      }\n    }\n  }\n})\n\nconst StyledThumb = styled(RadixSwitch.Thumb, {\n  backgroundColor: 'white',\n  borderRadius: '$round',\n  display: 'block',\n  transition: 'transform 50ms',\n  willChange: 'transform',\n  variants: {\n    size: {\n      md: {\n        size: '$1',\n        '&[data-state=\"checked\"]': {\n          transform: 'translateX(calc($sizes$2 - $space$1))'\n        }\n      },\n      lg: {\n        size: '$2',\n        '&[data-state=\"checked\"]': {\n          transform: 'translateX($space$5)'\n        }\n      }\n    }\n  }\n})\n\ntype SwitchProps = React.ComponentProps<typeof StyledSwitch>\n\nexport const Switch = ({ size = 'md', ...rest }: SwitchProps) => (\n  <StyledSwitch size={size} {...rest}>\n    <StyledThumb size={size} />\n  </StyledSwitch>\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["StyledSwitch","styled","RadixSwitch","disabledStyle","StyledThumb","Switch","size","rest","React"],"mappings":"2WAMA,MAAMA,EAAeC,EAAOC,EAAY,KAAM,CAC5C,WAAY,OACZ,gBAAiB,WACjB,OAAQ,OACR,aAAc,SACd,OAAQ,UACR,QAAS,OACT,SAAU,SACV,SAAU,WACV,WAAY,oBACZ,UAAW,CACT,gBAAiB,UACnB,EACA,UAAW,CACT,QAAS,wBACT,cAAe,KACjB,EACA,0BAA2B,CACzB,gBAAiB,aACnB,EACA,gCAAiC,CAC/B,gBAAiB,aACnB,EACA,cAAeC,EACf,SAAU,CACR,KAAM,CACJ,GAAI,CACF,EAAG,KACH,MAAO,IACT,EACA,GAAI,CACF,EAAG,KACH,MAAO,IACT,CACF,CACF,CACF,CAAC,EAEKC,EAAcH,EAAOC,EAAY,MAAO,CAC5C,gBAAiB,QACjB,aAAc,SACd,QAAS,QACT,WAAY,iBACZ,WAAY,YACZ,SAAU,CACR,KAAM,CACJ,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,uCACb,CACF,EACA,GAAI,CACF,KAAM,KACN,0BAA2B,CACzB,UAAW,sBACb,CACF,CACF,CACF,CACF,CAAC,EAIYG,EAAS,CAAC,CAAE,KAAAC,EAAO,QAASC,CAAK,IAC5CC,EAAA,cAACR,EAAA,CAAa,KAAMM,EAAO,GAAGC,CAC5BC,EAAAA,EAAA,cAACJ,EAAA,CAAY,KAAME,CAAAA,CAAM,CAC3B,EAGFD,EAAO,YAAc"}

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

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