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

package/dist/components/tabs/TabsTrigger.js

@@ -1 +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};
+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:"button"},o));r.displayName="TabsTrigger";export{r as TabsTrigger};

package/dist/components/tabs/TabsTriggerList.js

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