@atom-learning/components 2.28.1 → 2.28.3-beta.0

package/dist/components/tabs/{TabTrigger.d.ts → TabsTrigger.d.ts}

@@ -1,7 +1,5 @@
 import * as React from 'react';
-declare const StyledTabTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {
-    theme?: "dark" | "light" | undefined;
-}, {
+declare const StyledTabsTrigger: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>, {}, {
     sm: string;
     md: string;
     lg: string;
@@ -267,9 +265,8 @@ declare const StyledTabTrigger: import("@stitches/react/types/styled-component")
         };
     };
 }>>;
-interface TabTriggerProps extends React.ComponentProps<typeof StyledTabTrigger> {
+interface TabsTriggerProps extends React.ComponentProps<typeof StyledTabsTrigger> {
     value: string;
-    disabled?: boolean;
 }
-export declare const TabTrigger: React.FC<TabTriggerProps>;
+export declare const TabsTrigger: React.FC<TabsTriggerProps>;
 export {};

package/dist/components/tabs/TabsTrigger.js

@@ -0,0 +1 @@
+import{Trigger as i}from"@radix-ui/react-tabs";import*as e from"react";import{styled as a}from"../../stitches.js";import{Text as n}from"../text/Text.js";import{focusVisibleStyleBlock as c}from"../../utilities/style/focus-visible-style-block.js";const s=a(i,{background:"none",border:"none",cursor:"pointer",flexShrink:0,p:"$4",userSelect:"none",borderBottom:"2px solid transparent",'&[data-state="active"]':{color:"$interactive1",fontWeight:600,letterSpacing:"-0.005em",borderColor:"currentColor"},"&[data-disabled]":{opacity:.3,cursor:"not-allowed"},"&:not([data-disabled])":{"&:hover, &:focus-visible":{color:"$interactive2",bg:"$accentA1"},"&:active":{color:"$interactive3"},"&:focus-visible":{...c()}}}),r=({children:o,...t})=>e.createElement(s,{asChild:!0,...t},e.createElement(n,{size:"sm",as:"span"},o));r.displayName="TabsTrigger";export{r as TabsTrigger};

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

@@ -1,12 +1,6 @@
 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;
-    appearance?: "uppercase" | undefined;
-}, {
+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;
@@ -272,5 +266,7 @@ declare const StyledTriggerList: import("@stitches/react/types/styled-component"
         };
     };
 }>>;
-export declare const TriggerListWrapper: React.FC<ListProps>;
+export declare const TabsTriggerList: React.FC<React.ComponentProps<typeof StyledTriggerList> & {
+    colorScheme?: typeof ColorScheme;
+}>;
 export {};

package/dist/components/tabs/TabsTriggerList.js

@@ -1 +1 @@
-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};
+import{List as g}from"@radix-ui/react-tabs";import t from"react";import{styled as l}from"../../stitches.js";import{useWindowSize as k}from"../../utilities/hooks/useWindowSize.js";import{useScrollPosition as C}from"../../utilities/hooks/useScrollPosition.js";import{useCallbackRefState as v}from"../../utilities/hooks/useCallbackRef.js";import{ActionIcon as W}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=l(g,{flexShrink:0,display:"flex",width:"100%",overflowX:"auto","&::-webkit-scrollbar":{display:"none"},scrollbarWidth:"none"}),a=l(W,{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]=v(),{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>0,[e,o,r]),i=t.useCallback(u=>{!e||e.scroll({left:e.scrollLeft+e.clientWidth*u,behavior:"smooth"})},[e]);return t.createElement(E,{base:"slate",accent:"blue",interactive:"hiContrast1",css:{position:"relative",borderBottom:"1px solid $base3",width:"100%"},...m,...d},p&&t.createElement(a,{label:"scroll left",size:"md",css:{left:0},onClick:()=>i(-.8)},t.createElement(s,{is:w})),t.createElement(S,{ref:f},n),b&&t.createElement(a,{label:"scroll right",size:"md",css:{right:0},onClick:()=>i(.8)},t.createElement(s,{is:y})))};c.displayName="TabsTriggerList";export{c as TabsTriggerList};

package/dist/components/top-bar/TopBar.js

@@ -1 +1 @@
-import t from"react";import{styled as r}from"../../stitches.js";import{useScrollPosition as s}from"../../utilities/hooks/useScrollPosition.js";import{Divider as m}from"../divider/Divider.js";import{Flex as d}from"../flex/Flex.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as p,TopBarBrandName as h}from"./TopBarBrand.js";const c=()=>t.createElement(m,{orientation:"vertical",css:{height:"$2",bg:"$tonal100"}}),g=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $tonal100",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6",[`& ${e}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${e}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),x=r(d,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",...a})=>{const{y:n}=s();return t.createElement(g,{hasScrolled:!!n,size:i},t.createElement(x,{...a}))};o.Brand=p,o.BrandLogo=e,o.BrandName=h,o.ActionIcon=l,o.Divider=c,o.displayName="TopBar";export{o as TopBar};
+import t from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as s}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as d}from"../divider/Divider.js";import{Flex as m}from"../flex/Flex.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as p,TopBarBrandName as h}from"./TopBarBrand.js";const c=()=>t.createElement(d,{orientation:"vertical",css:{height:"$2",bg:"$tonal100"}}),g=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $tonal100",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6",[`& ${e}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${e}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),x=r(m,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",...a})=>{const{y:n}=s();return t.createElement(g,{hasScrolled:!!n,size:i},t.createElement(x,{...a}))};o.Brand=p,o.BrandLogo=e,o.BrandName=h,o.ActionIcon=l,o.Divider=c,o.displayName="TopBar";export{o as TopBar};