@atom-learning/components 1.5.1 → 1.6.2

package/dist/components/button/Button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { NavigatorActions } from '../../types';
 import { Override } from '../../utilities';
 export declare const StyledButton: import("@stitches/react/types/styled-component").StyledComponent<"button", {
-    theme?: "primary" | "secondary" | "success" | "danger" | "warning" | undefined;
+    theme?: "primary" | "secondary" | "success" | "danger" | "warning" | "neutral" | undefined;
     appearance?: "outline" | "solid" | undefined;
     size?: "sm" | "md" | "lg" | undefined;
     isLoading?: boolean | "true" | undefined;

package/dist/components/button/Button.js

@@ -1 +1 @@
-import{darken as i}from"polished";import{forwardRef as b,createElement as n,Children as f,cloneElement as h,Fragment as w}from"react";import{Box as k}from"../box/Box.js";import{Icon as v}from"../icon/Icon.js";import{Loader as S}from"../loader/Loader.js";import{styled as D,theme as c}from"../../stitches.js";const x=(e,o,r)=>({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:r}}),a=(e,o,r,t="white")=>({bg:e,color:t,"&[disabled]":{bg:"$tonal100",color:"$tonal400",cursor:"not-allowed"},"&:not([disabled]):hover, &:not([disabled]):focus":{bg:o,color:t},"&:not([disabled]):active":{bg:r}}),l=D("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:{}},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:"primary",appearance:"outline",css:x("$primary","$primaryMid","$primaryDark")}]}),C=({isLoading:e,children:o})=>n(w,null,n(S,{css:{opacity:e?1:0,position:"absolute",transition:"opacity 150ms"}}),n(k,{as:"span",css:e?{opacity:0,transition:"opacity 150ms"}:{}},o)),B=e=>{switch(e){case"lg":return 22;case"md":return 20;case"sm":default:return 16}},p=(e,o)=>f.map(e,(r,t)=>(r==null?void 0:r.type)===v?h(r,{css:{[t===0?"mr":"ml"]:o==="sm"?"$2":"$3",size:B(o),...r.props.css?r.props.css:{}}}):r),d=b(({children:e,isLoading:o,onClick:r,href:t,appearance:m="solid",size:s="md",theme:u="primary",type:$="button",...g},y)=>n(l,{isLoading:o||!1,onClick:o?void 0:r,appearance:m,size:s,theme:u,...g,...t?{as:"a",href:t,onClick:void 0}:{},...t?{}:{type:$},ref:y},typeof o=="boolean"?n(C,{isLoading:o},p(e,s)):p(e,s)));d.displayName="Button";export{d as Button,l as StyledButton};
+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};

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/index.d.ts

@@ -32,6 +32,7 @@ export { PasswordField } from './password-field';
 export { PasswordInput } from './password-input';
 export { Popover } from './popover';
 export { ProgressBar } from './progress-bar';
+export { Stepper } from './stepper';
 export { RadioButton, RadioButtonGroup } from './radio-button';
 export { RadioButtonField } from './radio-button-field';
 export { RadioCard, RadioCardGroup } from './radio-card';

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { StepperStepBack } from './StepperStepBack';
+import { StepperStepForward } from './StepperStepForward';
+import { StepperSteps } from './StepperSteps';
+import { IStepperProps } from './types';
+export declare const Stepper: React.FC<IStepperProps> & {
+    StepBack: typeof StepperStepBack;
+    StepForward: typeof StepperStepForward;
+    Steps: typeof StepperSteps;
+};

package/dist/components/stepper/Stepper.js

@@ -0,0 +1 @@
+import{createElement as e}from"react";import{Box as i}from"../box/Box.js";import{StepperProvider as S}from"./stepper-context/StepperContext.js";import{StepperStepBack as s}from"./StepperStepBack.js";import{StepperStepForward as d}from"./StepperStepForward.js";import{StepperSteps as f}from"./StepperSteps.js";const r=({children:p,stepCount:t,allowSkip:o,onComplete:m,onStepChange:a})=>e(S,{stepCount:t,allowSkip:o,onComplete:m,onStepChange:a},e(i,{"aria-label":"progress",css:{width:"100%",display:"grid",gridTemplateColumns:"1fr auto 1fr"}},p));r.StepBack=s,r.StepForward=d,r.Steps=f,r.displayName="Stepper";export{r as Stepper};

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

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

package/dist/components/stepper/StepperStepBack.js

@@ -0,0 +1 @@
+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

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

package/dist/components/stepper/StepperStepForward.js

@@ -0,0 +1 @@
+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

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const StepperSteps: React.FC;

package/dist/components/stepper/StepperSteps.js

@@ -0,0 +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};

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: React.FC<StepperProviderProps>;
+export declare const useStepper: () => Context;

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

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

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

@@ -0,0 +1,24 @@
+export declare type Context = {
+    steps: unknown[];
+    goToPreviousStep: () => void;
+    goToNextStep: () => void;
+    goToStep: (index: number) => void;
+    activeStep: number;
+    viewedSteps: number[];
+    allowSkip?: boolean;
+};
+export declare type StepperProviderProps = {
+    stepCount: number;
+    allowSkip?: boolean;
+    onComplete?: () => void;
+    onStepChange?: (activeStep: number) => void;
+};
+export interface IStepperProps {
+    stepCount: number;
+    allowSkip?: boolean;
+    onComplete?: () => void;
+    onStepChange?: (activeStep: number) => void;
+}
+export interface IStepperNavigateProps {
+    label?: (currentStep?: number) => string;
+}

package/dist/components/tabs/TabsTriggerList.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 interface ListProps extends React.ComponentProps<typeof StyledTriggerList> {
     enableTabScrolling?: boolean;
+    scrollPercentage?: number;
 }
 declare const StyledTriggerList: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>>, {
     theme?: "dark" | "light" | undefined;

package/dist/components/tabs/TabsTriggerList.js

@@ -1 +1 @@
-import{List as A}from"@radix-ui/react-tabs";import o,{useRef as D,useState as h,useCallback as I,useEffect as S}from"react";import{ChevronLeft as B,ChevronRight as P}from"@atom-learning/icons";import{opacify as L}from"polished";import{debounce as F}from"throttle-debounce";import{theme as M,styled as y}from"../../stitches.js";import{ActionIcon as X}from"../action-icon/ActionIcon.js";import{Flex as _}from"../flex/Flex.js";import{Icon as E}from"../icon/Icon.js";import{TabTrigger as W}from"./TabTrigger.js";import{passPropsToChildren as k}from"./utils.js";const j=L(-.2,"white"),q=L(-.2,M.colors.primaryDark.value),x=y(X,{position:"absolute",transition:"all 125ms",variants:{theme:{light:{bg:`${j} !important`},dark:{bg:`${q} !important`,color:"currentColor !important"}},visible:{true:{opacity:1,visibility:"visible",pointerEvents:"all"},false:{opacity:0,visibility:"hidden",pointerEvents:"none"}}}}),T=y(A,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none",variants:{theme:{light:{borderBottom:"1px solid $tonal300"},dark:{bg:"$primaryDark",borderBottom:"1px solid $tonal200"}},appearance:{uppercase:{textTransform:"uppercase"}}}}),G=({children:d,theme:l,appearance:p,enableTabScrolling:C,...u})=>{const s=D(null),[g,n]=h(!1),[v,c]=h(!1),[z,R]=h(),b=I(t=>{const e=s.current;if(e){const{scrollWidth:a,scrollLeft:i}=e,f=Math.round(a/4);let m=i;if(t==="right"){const r=e.scrollLeft+f;m=r<=a?r:i}else{const r=i-f;m=r>0?r:0}e.scroll({left:m,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:r,scrollLeft:w,offsetWidth:$}=e;w===0?(n(!1),c(!0)):w+$===r?(c(!1),n(!0)):(n(!0),c(!0))},500)}},[]);return S(()=>{const t=F(500,()=>{R(window.innerWidth)});return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),S(()=>{var t;const e=s.current;if(e){const{offsetWidth:a,scrollWidth:i}=e,f=i>a;(t=e.scroll)==null||t.call(e,{left:0}),n(!1),c(f)}},[z]),g||v||C?o.createElement(_,{css:{position:"relative"}},o.createElement(x,{size:"xl",label:"Scroll Left",theme:l,onClick:()=>b("left"),visible:g,css:{left:0}},o.createElement(E,{is:B,size:"lg"})),o.createElement(T,{...u,ref:s,appearance:p,theme:l},k(d,{theme:l},[W])),o.createElement(x,{size:"xl",label:"Scroll right",theme:l,onClick:()=>b("right"),visible:v,css:{right:0}},o.createElement(E,{is:P,size:"lg"}))):o.createElement(T,{theme:l,...u,appearance:p,ref:s},k(d,{theme:l},[W]))};export{G as TriggerListWrapper};
+import{List as B}from"@radix-ui/react-tabs";import o,{useRef as P,useState as h,useCallback as F,useEffect as L}from"react";import{ChevronLeft as M,ChevronRight as X}from"@atom-learning/icons";import{opacify as W}from"polished";import{debounce as _}from"throttle-debounce";import{theme as j,styled as y}from"../../stitches.js";import{ActionIcon as q}from"../action-icon/ActionIcon.js";import{Flex as G}from"../flex/Flex.js";import{Icon as E}from"../icon/Icon.js";import{TabTrigger as k}from"./TabTrigger.js";import{passPropsToChildren as x}from"./utils.js";const H=W(-.2,"white"),J=W(-.2,j.colors.primaryDark.value),T=y(q,{position:"absolute",transition:"all 125ms",variants:{theme:{light:{bg:`${H} !important`},dark:{bg:`${J} !important`,color:"currentColor !important"}},visible:{true:{opacity:1,visibility:"visible",pointerEvents:"all"},false:{opacity:0,visibility:"hidden",pointerEvents:"none"}}}}),C=y(B,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none",variants:{theme:{light:{borderBottom:"1px solid $tonal300"},dark:{bg:"$primaryDark",borderBottom:"1px solid $tonal200"}},appearance:{uppercase:{textTransform:"uppercase"}}}}),K=({children:d,theme:l,appearance:p,enableTabScrolling:z,scrollPercentage:R=10,...u})=>{const n=P(null),[g,c]=h(!1),[v,a]=h(!1),[$,A]=h(),b=F(t=>{const e=n.current;if(e){const{scrollWidth:i,scrollLeft:s,offsetWidth:f}=e,w=Math.round(i*(R/100));let m=s;if(t==="right"){const r=s+w;m=r+f<=i?r:i-f}else{const r=s-w;m=r>0?r:0}e.scroll({left:m,behavior:"smooth"}),setTimeout(()=>{const{scrollWidth:r,scrollLeft:S,offsetWidth:D}=e,I=r-(S+D);S===0?(c(!1),a(!0)):I<5?(a(!1),c(!0)):(c(!0),a(!0))},500)}},[]);return L(()=>{const t=_(500,()=>{A(window.innerWidth)});return window.addEventListener("resize",t),()=>{window.removeEventListener("resize",t)}},[]),L(()=>{var t;const e=n.current;if(e){const{offsetWidth:i,scrollWidth:s}=e,f=s>i;(t=e.scroll)==null||t.call(e,{left:0}),c(!1),a(f)}},[$]),g||v||z?o.createElement(G,{css:{position:"relative"}},o.createElement(T,{size:"xl",label:"Scroll Left",theme:l,onClick:()=>b("left"),visible:g,css:{left:0}},o.createElement(E,{is:M,size:"lg"})),o.createElement(C,{...u,ref:n,appearance:p,theme:l},x(d,{theme:l},[k])),o.createElement(T,{size:"xl",label:"Scroll right",theme:l,onClick:()=>b("right"),visible:v,css:{right:0}},o.createElement(E,{is:X,size:"lg"}))):o.createElement(C,{theme:l,...u,appearance:p,ref:n},x(d,{theme:l},[k]))};export{K as TriggerListWrapper};