@atom-learning/components 1.6.1 → 1.6.4

package/dist/components/grid/Grid.d.ts

@@ -268,6 +268,7 @@ declare const GridContainer: import("@stitches/react/types/styled-component").St
 }>>;
 declare type GridProps = React.ComponentProps<typeof GridContainer> & {
     minItemSize: string;
+    maxItemSize?: string;
 };
 export declare const Grid: React.FC<GridProps>;
 export {};

package/dist/components/grid/Grid.js

@@ -1 +1 @@
-import{createElement as p}from"react";import{theme as s,styled as m}from"../../stitches.js";const o=Object.keys(s.space).reduce((a,e)=>({...a,[e]:{gap:`$space$${e}`}}),{}),d=m("div",{display:"grid",variants:{gap:o}}),t=({css:a,gap:e=2,minItemSize:r,...i})=>p(d,{css:{...a,gridTemplateColumns:`repeat(auto-fit, minmax(${r}, 1fr))`},gap:e,...i});t.displayName="Grid";export{t as Grid};
+import{createElement as s}from"react";import{theme as m,styled as o}from"../../stitches.js";const d=Object.keys(m.space).reduce((a,e)=>({...a,[e]:{gap:`$space$${e}`}}),{}),c=o("div",{display:"grid",variants:{gap:d}}),t=({css:a,gap:e=2,minItemSize:r,maxItemSize:i="1fr",...p})=>s(c,{css:{...a,gridTemplateColumns:`repeat(auto-fit, minmax(${r}, ${i}))`},gap:e,...p});t.displayName="Grid";export{t as Grid};

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Button } from '../button';
 import { IStepperNavigateProps } from './types';
-export declare const StepperStepBack: React.FC<IStepperNavigateProps & React.ComponentProps<typeof Button>>;
+export declare const StepperStepBack: React.FC<IStepperNavigateProps & Omit<React.ComponentProps<typeof Button>, 'children'>>;

package/dist/components/stepper/StepperStepBack.js

@@ -1 +1 @@
-import{createElement as i}from"react";import{Button as m}from"../button/Button.js";import{useStepper as n}from"./stepper-context/StepperContext.js";const a=({label:t,children:o,...r})=>{const{activeStep:e,goToPreviousStep:p}=n();return i(m,{size:"sm",appearance:"outline",...r,disabled:e===0,onClick:p},o||t(e))};export{a as StepperStepBack};
+import{createElement as i}from"react";import{Button as n}from"../button/Button.js";import{useStepper as m}from"./stepper-context/StepperContext.js";const c=({label:e,children:o,...r})=>{const{activeStep:t,goToPreviousStep:p}=m();return i(n,{size:"sm",appearance:"outline",...r,disabled:t===0,onClick:p},o||(e==null?void 0:e(t)))};export{c as StepperStepBack};

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { Button } from '../button';
 import { IStepperNavigateProps } from './types';
-export declare const StepperStepForward: React.FC<IStepperNavigateProps & React.ComponentProps<typeof Button>>;
+export declare const StepperStepForward: React.FC<IStepperNavigateProps & Omit<React.ComponentProps<typeof Button>, 'children'>>;

package/dist/components/stepper/StepperStepForward.js

@@ -1 +1 @@
-import{createElement as m}from"react";import{Button as s}from"../button/Button.js";import{useStepper as c}from"./stepper-context/StepperContext.js";const i=({label:t,children:e,...o})=>{const{goToNextStep:r,activeStep:p}=c();return m(s,{size:"sm",...o,onClick:r,css:{ml:"auto"}},e||t(p))};export{i as StepperStepForward};
+import{createElement as m}from"react";import{Button as i}from"../button/Button.js";import{useStepper as n}from"./stepper-context/StepperContext.js";const s=({label:t,children:e,...o})=>{const{goToNextStep:r,activeStep:p}=n();return m(i,{size:"sm",...o,onClick:r,css:{ml:"auto"}},e||(t==null?void 0:t(p)))};export{s as StepperStepForward};

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;
@@ -20,5 +21,9 @@ export interface IStepperProps {
     onStepChange?: (activeStep: number) => void;
 }
 export interface IStepperNavigateProps {
-    label: (currentStep?: number) => string;
+    label?: (currentStep?: number) => string;
+}
+export interface IStepperStepsProps {
+    css?: CSS;
+    stepsWidth?: string;
 }