@atom-learning/components 2.28.3-beta.2 → 2.29.0-beta.2

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

@@ -1,277 +1,12 @@
 import * as React from 'react';
-import { TabsTriggerList } from './TabsTriggerList';
-import { TabsTrigger } from './TabsTrigger';
-import { TabsContent } from './TabsContent';
+import { TriggerListWrapper } from './TabsTriggerList';
+import { TabTrigger } from './TabTrigger';
 declare type TabsProps = React.ComponentProps<typeof StyledRoot>;
-declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsProps & 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;
-        warningText: 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 const StyledRoot: any;
+declare const StyledTabContent: any;
 export declare const Tabs: React.FC<TabsProps> & {
-    TriggerList: typeof TabsTriggerList;
-    Trigger: typeof TabsTrigger;
-    Content: typeof TabsContent;
+    TriggerList: typeof TriggerListWrapper;
+    Trigger: typeof TabTrigger;
+    Content: typeof StyledTabContent;
 };
 export {};

package/dist/components/tabs/Tabs.js

@@ -1 +1 @@
-import{Root as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as m}from"../../stitches.js";import{TabsTriggerList as s}from"./TabsTriggerList.js";import{TabsTrigger as a}from"./TabsTrigger.js";import{TabsContent as g}from"./TabsContent.js";const T=m(i,{width:"100%"}),r=({children:t,...o})=>e.createElement(T,{...o},t);r.TriggerList=s,r.Trigger=a,r.Content=g,r.displayName="Tabs";export{r as Tabs};
+import{Root as l,Content as n}from"@radix-ui/react-tabs";import*as p from"react";import{styled as e}from"../../stitches.js";import{TriggerListWrapper as o}from"./TabsTriggerList.js";import{TabTrigger as s}from"./TabTrigger.js";import{passPropsToChildren as g}from"./utils.js";const h=e(l,{display:"flex",flexDirection:"column",variants:{theme:{light:{color:"$primary"},dark:{color:"white"}}}}),i=e(n,{flexGrow:1,fontFamily:"$body",variants:{theme:{light:{color:"$textForeground"},dark:{bg:"$primaryDark",color:"white"}}}}),r=({theme:t="light",children:m,...a})=>p.createElement(h,{theme:t,...a},g(m,{theme:t},[o,i]));r.TriggerList=o,r.Trigger=s,r.Content=i,r.displayName="Tabs";export{r as Tabs};

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

@@ -1,272 +1,8 @@
 import React from 'react';
-import { ColorScheme } from '../../experiments/color-scheme';
-declare const StyledTriggerList: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & 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;
-        warningText: 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";
-        };
-    };
-}>>;
-export declare const TabsTriggerList: React.FC<React.ComponentProps<typeof StyledTriggerList> & {
-    colorScheme?: typeof ColorScheme;
-}>;
+interface ListProps extends React.ComponentProps<typeof StyledTriggerList> {
+    enableTabScrolling?: boolean;
+    scrollPercentage?: number;
+}
+declare const StyledTriggerList: any;
+export declare const TriggerListWrapper: React.FC<ListProps>;
 export {};

package/dist/components/tabs/TabsTriggerList.js

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

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

@@ -0,0 +1,2 @@
+import { JSXElementConstructor } from 'react';
+export declare const passPropsToChildren: (children: any, props: Record<string, any>, allowedChildNodeTypes?: JSXElementConstructor<any>[]) => any;

package/dist/components/tabs/utils.js

@@ -0,0 +1 @@
+import n from"react";const i=(o,t,e=[])=>n.Children.map(o,l=>n.isValidElement(l)&&e.includes(l==null?void 0:l.type)?n.cloneElement(l,{...t}):l);export{i as passPropsToChildren};