@fabio.caffarello/react-design-system 1.17.0 → 1.19.0

package/dist/index.cjs

@@ -189,7 +189,7 @@ React keys must be passed directly to JSX without using spread:
         ${J("lg")}
         ${Se("xl")}
         border border-line-default
-      `,role:"dialog","aria-modal":"false","aria-label":"Date picker calendar",style:{top:`${o.top}px`,left:`${o.left}px`},children:e});return typeof window!="undefined"?Ue.createPortal(c,document.body):c}Sr.Input=Ns;Sr.Calendar=Ss;Sr.Popup=Da;const nd=Sr,Cr=l.createContext(void 0);function $r(){const e=l.useContext(Cr);if(e===void 0)throw new Error("useTabsContext must be used within a Tabs component");return e}function ad(){return l.useContext(Cr)}function La({defaultValue:e,value:t,onValueChange:r,orientation:s="horizontal",activationMode:a="automatic",children:o}){const[i,c]=l.useState(e||""),u=t!==void 0,d=u?t:i,f=l.useCallback(m=>{u||c(m),r==null||r(m)},[u,r]),p={value:d,onValueChange:f,orientation:s,activationMode:a};return n.jsx(Cr.Provider,{value:p,children:o})}function Fa(a){var o=a,{children:e,className:t="",variant:r="default"}=o,s=O(o,["children","className","variant"]);const{orientation:i}=$r(),c=l.useRef(null);l.useEffect(()=>{const f=c.current;if(!f)return;const p=m=>{var k;const h=Array.from(f.querySelectorAll('[role="tab"]:not([disabled])')),x=h.findIndex(g=>g===document.activeElement);if(x===-1)return;let y=x;i==="horizontal"?m.key==="ArrowRight"?(m.preventDefault(),y=(x+1)%h.length):m.key==="ArrowLeft"&&(m.preventDefault(),y=(x-1+h.length)%h.length):m.key==="ArrowDown"?(m.preventDefault(),y=(x+1)%h.length):m.key==="ArrowUp"&&(m.preventDefault(),y=(x-1+h.length)%h.length),m.key==="Home"?(m.preventDefault(),y=0):m.key==="End"&&(m.preventDefault(),y=h.length-1),y!==x&&((k=h[y])==null||k.focus())};return f.addEventListener("keydown",p),()=>f.removeEventListener("keydown",p)},[i]);const u=r==="compact"&&i==="vertical"?"flex":"inline-flex",d=w(i==="vertical"?"flex-col":"flex-row",T("xs","gap"));return n.jsx("div",P(R({ref:c,role:"tablist","aria-orientation":i,className:w(u,d,T("xs","p"),"bg-surface-muted",J("md"),t)},s),{children:e}))}function _a(c){var u=c,{value:e,children:t,disabled:r=!1,className:s="",onClick:a,onKeyDown:o}=u,i=O(u,["value","children","disabled","className","onClick","onKeyDown"]);const{value:d,onValueChange:f,orientation:p,activationMode:m}=$r(),h=d===e,x=g=>{r||((m==="automatic"||h)&&f(e),a==null||a(g))},y=g=>{var j;m==="automatic"&&!r&&!h&&f(e),(j=i.onFocus)==null||j.call(i,g)},k=g=>{if(!r&&!(g.key==="ArrowRight"||g.key==="ArrowLeft"||g.key==="ArrowDown"||g.key==="ArrowUp"||g.key==="Home"||g.key==="End")){if(m==="manual"&&(g.key==="Enter"||g.key===" ")){g.preventDefault(),f(e);return}o==null||o(g)}};return n.jsx("button",P(R({type:"button",role:"tab","aria-selected":h,"aria-controls":`tabpanel-${e}`,id:`tab-${e}`,tabIndex:r?-1:h?0:-1,disabled:r,onClick:x,onFocus:y,onKeyDown:k,className:w("inline-flex","items-center","justify-center",T("sm","px"),T("xs","py"),re("bodySmall"),Fe("label"),"transition-colors","focus:outline-none","focus:ring-2","focus:ring-line-focus","focus:ring-offset-2",J("sm"),h?w("bg-surface-brand","text-fg-inverse"):w("text-fg-tertiary","hover:bg-surface-active"),r?"opacity-50 cursor-not-allowed":"cursor-pointer",s)},i),{children:t}))}function Pa(o){var i=o,{value:e,children:t,forceMount:r=!1,className:s=""}=i,a=O(i,["value","children","forceMount","className"]);const{value:c}=$r(),u=c===e;return!u&&!r?null:n.jsx("div",P(R({role:"tabpanel",id:`tabpanel-${e}`,"aria-labelledby":`tab-${e}`,hidden:!u,className:`
+      `,role:"dialog","aria-modal":"false","aria-label":"Date picker calendar",style:{top:`${o.top}px`,left:`${o.left}px`},children:e});return typeof window!="undefined"?Ue.createPortal(c,document.body):c}Sr.Input=Ns;Sr.Calendar=Ss;Sr.Popup=Da;const nd=Sr,Cr=l.createContext(void 0);function $r(){const e=l.useContext(Cr);if(e===void 0)throw new Error("useTabsContext must be used within a Tabs component");return e}function ad(){return l.useContext(Cr)}function La({defaultValue:e,value:t,onValueChange:r,orientation:s="horizontal",activationMode:a="automatic",children:o}){const[i,c]=l.useState(e||""),u=t!==void 0,d=u?t:i,f=l.useCallback(m=>{u||c(m),r==null||r(m)},[u,r]),p={value:d,onValueChange:f,orientation:s,activationMode:a};return n.jsx(Cr.Provider,{value:p,children:o})}function Fa(a){var o=a,{children:e,className:t="",variant:r="default"}=o,s=O(o,["children","className","variant"]);const{orientation:i}=$r(),c=l.useRef(null);l.useEffect(()=>{const f=c.current;if(!f)return;const p=m=>{var k;const h=Array.from(f.querySelectorAll('[role="tab"]:not([disabled])')),x=h.findIndex(g=>g===document.activeElement);if(x===-1)return;let y=x;i==="horizontal"?m.key==="ArrowRight"?(m.preventDefault(),y=(x+1)%h.length):m.key==="ArrowLeft"&&(m.preventDefault(),y=(x-1+h.length)%h.length):m.key==="ArrowDown"?(m.preventDefault(),y=(x+1)%h.length):m.key==="ArrowUp"&&(m.preventDefault(),y=(x-1+h.length)%h.length),m.key==="Home"?(m.preventDefault(),y=0):m.key==="End"&&(m.preventDefault(),y=h.length-1),y!==x&&((k=h[y])==null||k.focus())};return f.addEventListener("keydown",p),()=>f.removeEventListener("keydown",p)},[i]);const u=r==="compact"&&i==="vertical"?"flex":"inline-flex",d=w(i==="vertical"?"flex-col":"flex-row",T("xs","gap"));return n.jsx("div",P(R({ref:c,role:"tablist","aria-orientation":i,className:w(u,d,T("xs","p"),"bg-surface-muted",J("md"),t)},s),{children:e}))}function _a(c){var u=c,{value:e,children:t,disabled:r=!1,className:s="",onClick:a,onKeyDown:o}=u,i=O(u,["value","children","disabled","className","onClick","onKeyDown"]);const{value:d,onValueChange:f,orientation:p,activationMode:m}=$r(),h=d===e,x=g=>{r||((m==="automatic"||h)&&f(e),a==null||a(g))},y=g=>{var j;m==="automatic"&&!r&&!h&&f(e),(j=i.onFocus)==null||j.call(i,g)},k=g=>{if(!r&&!(g.key==="ArrowRight"||g.key==="ArrowLeft"||g.key==="ArrowDown"||g.key==="ArrowUp"||g.key==="Home"||g.key==="End")){if(m==="manual"&&(g.key==="Enter"||g.key===" ")){g.preventDefault(),f(e);return}o==null||o(g)}};return n.jsx("button",P(R({type:"button",role:"tab","aria-selected":h,"aria-controls":`tabpanel-${e}`,id:`tab-${e}`,tabIndex:r?-1:h?0:-1,disabled:r,onClick:x,onFocus:y,onKeyDown:k,className:w("inline-flex","items-center","justify-center",T("sm","px"),T("xs","py"),re("bodySmall"),Fe("label"),"transition-colors","focus:outline-none","focus:ring-2","focus:ring-line-focus","focus:ring-offset-2",J("sm"),h?w("bg-surface-brand","text-fg-inverse"):w("text-fg-secondary","hover:bg-surface-active"),r?"opacity-50 cursor-not-allowed":"cursor-pointer",s)},i),{children:t}))}function Pa(o){var i=o,{value:e,children:t,forceMount:r=!1,className:s=""}=i,a=O(i,["value","children","forceMount","className"]);const{value:c}=$r(),u=c===e;return!u&&!r?null:n.jsx("div",P(R({role:"tabpanel",id:`tabpanel-${e}`,"aria-labelledby":`tab-${e}`,hidden:!u,className:`
         mt-2
         focus:outline-none
         ${s}
@@ -675,7 +675,7 @@ React keys must be passed directly to JSX without using spread:
                           text-sm
                           font-medium
                           ${_?"text-fg-brand-emphasis":"text-fg-primary"}
-                        `,children:M.label}),M.description&&n.jsx("div",{className:`text-xs text-fg-tertiary ${T("0.5","mt")}`,children:M.description})]})]},M.id)})]},S))})]})}):null;return n.jsxs(n.Fragment,{children:[a?n.jsx("div",{onClick:()=>b(!0),children:a}):null,typeof window!="undefined"&&Ue.createPortal(D,document.body)]})}function tu({columns:e,data:t,loading:r=!1,onSort:s,sortColumn:a,sortDirection:o,multiSort:i=!1,groups:c=[],onGroupChange:u,groupable:d=!1,resizable:f=!0,reorderable:p=!1,onColumnReorder:m,columnWidths:h,onColumnResize:x,selectable:y=!1,selectedRows:k,onSelectionChange:g,rowId:j,exportable:C=!1,onExport:b,exportFormats:v=["csv","xlsx","json"],pagination:N,filters:D,actions:S,toolbarActions:A,virtualScrolling:M=!1,virtualScrollingOptions:$,emptyMessage:L,emptyStateTitle:_,emptyStateMessage:F,emptyStateIllustration:z,emptyStateAction:X,className:q=""}){const[H,le]=l.useState(c),[ne,I]=l.useState(h||{}),B=l.useMemo(()=>e.map(U=>P(R({},U),{width:ne[U.key]||U.defaultWidth})),[e,ne]),Y=U=>{b?b(U):U==="csv"?Q(t,e):U==="json"&&W(t)},Q=(U,V)=>{const se=V.filter(Ae=>Ae.exportable!==!1).map(Ae=>Ae.label||Ae.key),ae=U.map(Ae=>V.filter(Ft=>Ft.exportable!==!1).map(Ft=>{const $e=Ae[Ft.key];return typeof $e=="string"&&$e.includes(",")?`"${$e}"`:$e})),oe=[se.join(","),...ae.map(Ae=>Ae.join(","))].join(`
+                        `,children:M.label}),M.description&&n.jsx("div",{className:`text-xs ${_?"text-fg-secondary":"text-fg-tertiary"} ${T("0.5","mt")}`,children:M.description})]})]},M.id)})]},S))})]})}):null;return n.jsxs(n.Fragment,{children:[a?n.jsx("div",{onClick:()=>b(!0),children:a}):null,typeof window!="undefined"&&Ue.createPortal(D,document.body)]})}function tu({columns:e,data:t,loading:r=!1,onSort:s,sortColumn:a,sortDirection:o,multiSort:i=!1,groups:c=[],onGroupChange:u,groupable:d=!1,resizable:f=!0,reorderable:p=!1,onColumnReorder:m,columnWidths:h,onColumnResize:x,selectable:y=!1,selectedRows:k,onSelectionChange:g,rowId:j,exportable:C=!1,onExport:b,exportFormats:v=["csv","xlsx","json"],pagination:N,filters:D,actions:S,toolbarActions:A,virtualScrolling:M=!1,virtualScrollingOptions:$,emptyMessage:L,emptyStateTitle:_,emptyStateMessage:F,emptyStateIllustration:z,emptyStateAction:X,className:q=""}){const[H,le]=l.useState(c),[ne,I]=l.useState(h||{}),B=l.useMemo(()=>e.map(U=>P(R({},U),{width:ne[U.key]||U.defaultWidth})),[e,ne]),Y=U=>{b?b(U):U==="csv"?Q(t,e):U==="json"&&W(t)},Q=(U,V)=>{const se=V.filter(Ae=>Ae.exportable!==!1).map(Ae=>Ae.label||Ae.key),ae=U.map(Ae=>V.filter(Ft=>Ft.exportable!==!1).map(Ft=>{const $e=Ae[Ft.key];return typeof $e=="string"&&$e.includes(",")?`"${$e}"`:$e})),oe=[se.join(","),...ae.map(Ae=>Ae.join(","))].join(`
 `),Ne=new Blob([oe],{type:"text/csv"}),ze=URL.createObjectURL(Ne),Lt=document.createElement("a");Lt.href=ze,Lt.download=`export-${Date.now()}.csv`,Lt.click(),URL.revokeObjectURL(ze)},W=U=>{const V=JSON.stringify(U,null,2),se=new Blob([V],{type:"application/json"}),ae=URL.createObjectURL(se),oe=document.createElement("a");oe.href=ae,oe.download=`export-${Date.now()}.json`,oe.click(),URL.revokeObjectURL(ae)};return n.jsxs("div",{className:`space-y-4 ${q}`,children:[(C||d||A)&&n.jsxs("div",{className:`
           flex
           items-center