@atom-learning/components 1.2.3 → 1.3.0

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

@@ -0,0 +1,273 @@
+import React from 'react';
+interface ListProps extends React.ComponentProps<typeof StyledTriggerList> {
+    enableTabScrolling?: boolean;
+}
+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;
+}, {
+    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;
+        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 TriggerListWrapper: React.FC<ListProps>;
+export {};

package/dist/components/tabs/TabsTriggerList.js

@@ -0,0 +1 @@
+const e=["children","theme","enableTabScrolling"];import{List as t}from"@radix-ui/react-tabs";import i,{useRef as o,useState as r,useCallback as l,useEffect as n}from"react";import{ChevronLeft as s,ChevronRight as c}from"@atom-learning/icons";import{opacify as a}from"polished";import{debounce as m}from"throttle-debounce";import{theme as f,styled as h}from"../../stitches.js";import{ActionIcon as d}from"../action-icon/ActionIcon.js";import{Flex as b}from"../flex/Flex.js";import{Icon as p}from"../icon/Icon.js";import{TabTrigger as u}from"./TabTrigger.js";import{passPropsToChildren as g}from"./utils.js";const v=h(d,{position:"absolute",transition:"all 125ms",variants:{theme:{light:{bg:`${a(-.2,"white")} !important`},dark:{bg:`${a(-.2,f.colors.primaryDark.value)} !important`,color:"currentColor !important"}},visible:{true:{opacity:1,visibility:"visible",pointerEvents:"all"},false:{opacity:0,visibility:"hidden",pointerEvents:"none"}}}}),w=h(t,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none",variants:{theme:{light:{borderBottom:"1px solid $tonal300"},dark:{borderBottom:"1px solid $tonal200"}}}}),x=t=>{let{children:a,theme:f,enableTabScrolling:h}=t,d=function(e,t){if(null==e)return{};var i,o,r={},l=Object.keys(e);for(o=0;o<l.length;o++)i=l[o],t.indexOf(i)>=0||(r[i]=e[i]);return r}(t,e);const x=o(null),[E,j]=r(!1),[k,y]=r(!1),[W,z]=r(window.innerWidth),L=l((e=>{const t=x.current;if(t){const{scrollWidth:i,scrollLeft:o}=t,r=Math.round(i/4);let l=o;if("right"===e){const e=t.scrollLeft+r;l=e<=i?e:o}else{const e=o-r;l=e>0?e:0}t.scroll({left:l,behavior:"smooth"}),setTimeout((()=>{const{scrollWidth:e,scrollLeft:i,offsetWidth:o}=t;0===i?(j(!1),y(!0)):i+o===e?(y(!1),j(!0)):(j(!0),y(!0))}),500)}}),[]);n((()=>{const e=m((()=>{z(window.innerWidth)}),500);return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),n((()=>{const e=x.current;if(e){const{offsetWidth:t,scrollWidth:i}=e,o=i>t;null==e.scroll||e.scroll({left:0}),j(!1),y(o)}}),[W]);return E||k||h?i.createElement(b,{css:{position:"relative"}},i.createElement(v,{size:"xl",label:"Scroll Left",theme:f,onClick:()=>L("left"),visible:E,css:{left:0}},i.createElement(p,{is:s,size:"lg"})),i.createElement(w,Object.assign({},d,{ref:x,theme:f}),g(a,{theme:f},[u])),i.createElement(v,{size:"xl",label:"Scroll right",theme:f,onClick:()=>L("right"),visible:k,css:{right:0}},i.createElement(p,{is:c,size:"lg"}))):i.createElement(w,Object.assign({theme:f},d,{ref:x}),g(a,{theme:f},[u]))};export{x 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 @@
+function t(){return(t=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}import e from"react";const n=(n,r,o=[])=>e.Children.map(n,(n=>e.isValidElement(n)&&o.includes(null==n?void 0:n.type)?e.cloneElement(n,t({},r)):n));export{n as passPropsToChildren};