ioloco-ui - npm Package Compare versions

Comparing version 0.6.4 to 0.6.5

dist/Components/Components/Tabs/index.d.ts

 import { TabsProps } from './types';
-export default function Tabs({ variant, size, active, tabs, children, onTabChange, ariaLabel }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export default function Tabs({ variant, size, contentPosition, active, tabs, children, onTabChange, ariaLabel }: TabsProps): import("react/jsx-runtime").JSX.Element;

dist/Components/Components/Tabs/index.js

 "use client";
-import{jsxs as l,jsx as n}from"react/jsx-runtime";import{useState as o,useRef as t,useEffect as r,useCallback as e}from"react";import i from"@stylexjs/stylex";function d(d){let{variant:u="filled",size:s="medium",active:b,tabs:c,children:g,onTabChange:p,ariaLabel:h="Content Tabs"}=d;const[x,m]=o(b),[f,y]=o(x),[$,S]=o(-1),v=t([]),R=Array.isArray(g)?g:[g];r((()=>{const l=setTimeout((()=>y(x)),300);return()=>clearTimeout(l)}),[x]),r((()=>{v.current=v.current.slice(0,c.length)}),[c]);const T=e(((l,n)=>{var o;const t=c.length;let r=n;switch(l.key){case"ArrowRight":case"ArrowDown":r=(n+1)%t,l.preventDefault();break;case"ArrowLeft":case"ArrowUp":r=(n-1+t)%t,l.preventDefault();break;case"Home":r=0,l.preventDefault();break;case"End":r=t-1,l.preventDefault();break;default:return}null===(o=v.current[r])||void 0===o||o.focus(),S(r);const e=c[r];m(e),null==p||p(e)}),[c,p]),k=l=>`tab-${l.toLowerCase()}`,B=l=>`panel-${l.toLowerCase()}`,C=a[`${s}Tab`],w=a[`${u}Container`],L=a[`${u}TabsList`],E=a[`${u}ActiveTab`];return l("div",Object.assign({},i.props(a.container,w),{role:"region","aria-label":h,children:[n("div",Object.assign({},i.props(a.tabs,L),{role:"tablist","aria-label":h,children:null==c?void 0:c.map(((l,o)=>n("button",Object.assign({ref:l=>{v.current[o]=l},type:"button",id:k(l),role:"tab","aria-selected":x===l,"aria-controls":B(l),tabIndex:x===l?0:-1},i.props([a.tab,C,x===l&&E,$===o&&a[`${u}FocusedTab`]]),{onClick:()=>((l,n)=>{m(l),S(n),null==p||p(l)})(l,o),onKeyDown:l=>T(l,o),children:l}),l)))})),n("div",Object.assign({},{className:"x1n2onr6 xh8yej3"},{children:R.map(((l,o)=>n("div",Object.assign({id:B(c[o]),role:"tabpanel","aria-labelledby":k(c[o]),tabIndex:0},i.props([a.tabPanel,f===c[o]&&a.activePanel]),{children:l}),c[o])))}))]}))}const a={container:{width:"xh8yej3",$$css:!0},tabs:{display:"x78zum5",marginBottom:"x1t84w78",$$css:!0},tab:{cursor:"x1ypdohk",background:"x1md70p1",backgroundAttachment:null,backgroundClip:null,backgroundColor:null,backgroundImage:null,backgroundOrigin:null,backgroundPosition:null,backgroundPositionX:null,backgroundPositionY:null,backgroundRepeat:null,backgroundSize:null,border:"x1gs6z28",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,fontWeight:"xk50ysn",transition:"x175bqph",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,color:"x6u426u xergv63",":focus_outline":"x1uvtmcs",":focus_outlineColor":null,":focus_outlineOffset":null,":focus_outlineStyle":null,":focus_outlineWidth":null,$$css:!0},content:{position:"x1n2onr6",width:"xh8yej3",$$css:!0},tabPanel:{display:"x1s85apg",width:"xh8yej3",$$css:!0},activePanel:{display:"x1lliihq",$$css:!0},filledContainer:{$$css:!0},filledTabsList:{padding:"x7gbtqy",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,borderRadius:"x116uinm",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,width:"xezivpi",color:"xod0wng xxgsoov",backgroundColor:"x1ui95rz x1hr95wy",$$css:!0},filledActiveTab:{color:"xod0wng xxgsoov",backgroundColor:"x1gzqxud x1hr95wy",borderRadius:"xr78m7q",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,transition:"x175bqph",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,$$css:!0},filledFocusedTab:{outline:"x1a2a7pz",outlineColor:null,outlineOffset:null,outlineStyle:null,outlineWidth:null,$$css:!0},elegantContainer:{$$css:!0},elegantTabsList:{borderBottom:"x3iih9a xmu4vb5",borderBottomWidth:null,borderBottomStyle:null,borderBottomColor:null,$$css:!0},elegantActiveTab:{color:"xod0wng xxgsoov",borderBottom:"x16wai8e x15cxok5",borderBottomWidth:null,borderBottomStyle:null,borderBottomColor:null,transition:"xbvynpd",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,$$css:!0},elegantFocusedTab:{outline:"x1a2a7pz",outlineColor:null,outlineOffset:null,outlineStyle:null,outlineWidth:null,$$css:!0},smallTab:{fontSize:"xml2kzp",padding:"xpqh473",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},mediumTab:{fontSize:"x1uv3qv7",padding:"x17v3l2f",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},largeTab:{fontSize:"x1elmx46",padding:"xu4qjhp",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0}};export{d as default};
+import{jsxs as l,jsx as n}from"react/jsx-runtime";import{useRef as t,useState as o,useEffect as r,useCallback as e}from"react";import i from"@stylexjs/stylex";function a(a){let{variant:u="filled",size:s="medium",contentPosition:b="bottom",active:c,tabs:p,children:g,onTabChange:h,ariaLabel:x="Content Tabs"}=a;const m=t([]),[f,$]=o(c),[y,v]=o(f),[T,S]=o(-1);r((()=>{const l=setTimeout((()=>v(f)),300);return()=>clearTimeout(l)}),[f]),r((()=>{m.current=m.current.slice(0,p.length)}),[p]),r((()=>{!p.includes(c)&&p.length>0&&$(p[0])}),[c,p]),r((()=>{var l;const n=p.indexOf(f);n>=0&&(null===(l=m.current[n])||void 0===l||l.focus(),S(n))}),[p,f]);const B=e(((l,n)=>{$(l),S(n),null==h||h(l)}),[h]),k=e(((l,n)=>{var t;const o=p.length;let r=n;switch(l.key){case"ArrowRight":r=(n+1)%o,l.preventDefault();break;case"ArrowLeft":r=(n-1+o)%o,l.preventDefault();break;case"Home":r=0,l.preventDefault();break;case"End":r=o-1,l.preventDefault();break;case"Tab":r=l.shiftKey?(n-1+o)%o:(n+1)%o,l.preventDefault();break;default:return}null===(t=m.current[r])||void 0===t||t.focus(),S(r);const e=p[r];$(e),null==h||h(e)}),[p,h]),R=l=>`tab-${l.toLowerCase()}`,C=l=>`panel-${l.toLowerCase()}`,L=Array.isArray(g)?g:[g],w=d[`${s}Tab`],I=d[`${u}Container`],E=d[`${u}TabsList`],j=d[`${u}ActiveTab`];return l("div",Object.assign({},i.props(d.container,I),{role:"region","aria-label":x,children:["top"===b&&n("div",Object.assign({},{className:"x1n2onr6 xh8yej3"},{children:L.map(((l,t)=>n("div",Object.assign({id:C(p[t]),role:"tabpanel","aria-labelledby":R(p[t]),tabIndex:0},i.props([d.tabPanel,y===p[t]&&d.activePanel]),{children:l}),p[t])))})),n("div",Object.assign({},i.props(d.tabs,E,"bottom"===b?d.tabsBottom:d.tabsTop),{role:"tablist","aria-label":x,children:null==p?void 0:p.map(((l,t)=>n("button",Object.assign({ref:l=>{m.current[t]=l},type:"button",id:R(l),role:"tab","aria-selected":f===l,"aria-controls":C(l),tabIndex:f===l?0:-1,onClick:()=>B(l,t),onKeyDown:l=>k(l,t)},i.props([d.tab,w,f===l&&j,T===t&&d[`${u}FocusedTab`]]),{children:l}),l)))})),"bottom"===b&&n("div",Object.assign({},{className:"x1n2onr6 xh8yej3"},{children:L.map(((l,t)=>n("div",Object.assign({id:C(p[t]),role:"tabpanel","aria-labelledby":R(p[t]),tabIndex:0},i.props([d.tabPanel,y===p[t]&&d.activePanel]),{children:l}),p[t])))}))]}))}const d={container:{width:"xh8yej3",$$css:!0},tabs:{display:"x78zum5",$$css:!0},tabsBottom:{marginBottom:"x1t84w78",$$css:!0},tabsTop:{marginTop:"x1cl2iem",$$css:!0},tab:{cursor:"x1ypdohk",background:"x1md70p1",backgroundAttachment:null,backgroundClip:null,backgroundColor:null,backgroundImage:null,backgroundOrigin:null,backgroundPosition:null,backgroundPositionX:null,backgroundPositionY:null,backgroundRepeat:null,backgroundSize:null,border:"x1gs6z28",borderWidth:null,borderInlineWidth:null,borderInlineStartWidth:null,borderLeftWidth:null,borderInlineEndWidth:null,borderRightWidth:null,borderBlockWidth:null,borderTopWidth:null,borderBottomWidth:null,borderStyle:null,borderInlineStyle:null,borderInlineStartStyle:null,borderLeftStyle:null,borderInlineEndStyle:null,borderRightStyle:null,borderBlockStyle:null,borderTopStyle:null,borderBottomStyle:null,borderColor:null,borderInlineColor:null,borderInlineStartColor:null,borderLeftColor:null,borderInlineEndColor:null,borderRightColor:null,borderBlockColor:null,borderTopColor:null,borderBottomColor:null,fontWeight:"xk50ysn",transition:"x175bqph",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,color:"x6u426u xergv63",":focus_outline":"x1uvtmcs",":focus_outlineColor":null,":focus_outlineOffset":null,":focus_outlineStyle":null,":focus_outlineWidth":null,$$css:!0},content:{position:"x1n2onr6",width:"xh8yej3",$$css:!0},tabPanel:{display:"x1s85apg",width:"xh8yej3",$$css:!0},activePanel:{display:"x1lliihq",$$css:!0},filledContainer:{$$css:!0},filledTabsList:{padding:"x7gbtqy",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,borderRadius:"x116uinm",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,width:"xezivpi",color:"xod0wng xxgsoov",backgroundColor:"x1ui95rz x1hr95wy",$$css:!0},filledActiveTab:{color:"xod0wng xxgsoov",backgroundColor:"x1gzqxud x1hr95wy",borderRadius:"xr78m7q",borderStartStartRadius:null,borderStartEndRadius:null,borderEndStartRadius:null,borderEndEndRadius:null,borderTopLeftRadius:null,borderTopRightRadius:null,borderBottomLeftRadius:null,borderBottomRightRadius:null,transition:"x175bqph",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,$$css:!0},filledFocusedTab:{outline:"x1a2a7pz",outlineColor:null,outlineOffset:null,outlineStyle:null,outlineWidth:null,$$css:!0},elegantContainer:{$$css:!0},elegantTabsList:{borderBottom:"x3iih9a xmu4vb5",borderBottomWidth:null,borderBottomStyle:null,borderBottomColor:null,$$css:!0},elegantActiveTab:{color:"xod0wng xxgsoov",borderBottom:"x16wai8e x15cxok5",borderBottomWidth:null,borderBottomStyle:null,borderBottomColor:null,transition:"xbvynpd",transitionBehavior:null,transitionDelay:null,transitionDuration:null,transitionProperty:null,transitionTimingFunction:null,$$css:!0},elegantFocusedTab:{outline:"x1a2a7pz",outlineColor:null,outlineOffset:null,outlineStyle:null,outlineWidth:null,$$css:!0},smallTab:{fontSize:"xml2kzp",padding:"xpqh473",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},mediumTab:{fontSize:"x1uv3qv7",padding:"x17v3l2f",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0},largeTab:{fontSize:"x1elmx46",padding:"xu4qjhp",paddingInline:null,paddingStart:null,paddingLeft:null,paddingEnd:null,paddingRight:null,paddingBlock:null,paddingTop:null,paddingBottom:null,$$css:!0}};export{a as default};

dist/Components/Components/Tabs/types.d.ts

@@ -5,7 +5,8 @@ import type { ReactNode } from 'react';
     size?: 'small' | 'medium' | 'large';
+    contentPosition?: 'top' | 'bottom';
     active: string;
     tabs: string[];
+    ariaLabel?: string;
     children: ReactNode | ReactNode[];
     onTabChange?: (tab: string) => void;
-    ariaLabel?: string;
 }

package.json

 {
   "name": "ioloco-ui",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Stylex UI components for React",
@@ -5,0 +5,0 @@ "author": {

No alert changes

Improved metrics

Total package byte prevSize

215290

0.34%

Lines of code

2965

0.2%

No dependency changes