welcome-ui 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/Table.mjs

@@ -0,0 +1,75 @@
+"use client";
+import o from "react";
+import { forwardRef as c } from "./System.mjs";
+import t, { css as a, th as l } from "@xstyled/styled-components";
+const h = t.divBox(
+  ({ indent: e }) => a`
+    overflow: hidden;
+    width: 100%;
+
+    ${e && a`
+      ${r}, ${i} {
+        &:first-child {
+          padding-left: xl;
+        }
+
+        &:last-child {
+          padding-right: xl;
+        }
+      }
+    `}
+  `
+), b = t.div`
+  width: 100%;
+  overflow-x: auto;
+`, p = t.tableBox`
+  border: 0;
+  width: 100%;
+  border-collapse: collapse;
+`, f = t.theadBox``, g = t.tbodyBox``, T = t.trBox(
+  ({ onClick: e, variant: d }) => a`
+    ${l("tables.tr.default")};
+    ${d && l(`tables.tr.${d}`)};
+    ${e && l("tables.tr.clickable")};
+
+    &:last-child {
+      border: 0;
+    }
+  `
+), i = t.thBox`
+  ${l("tables.th")};
+  padding: xl;
+  vertical-align: middle;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`, r = t.tdBox`
+  ${l("tables.td")};
+  position: relative;
+  vertical-align: middle;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`, m = c(
+  ({ children: e, indent: d, ...n }, s) => /* @__PURE__ */ o.createElement(h, { indent: d, ref: s, ...n }, /* @__PURE__ */ o.createElement(b, null, /* @__PURE__ */ o.createElement(p, null, e)))
+), B = Object.assign(m, {
+  Thead: f,
+  Tbody: g,
+  Th: i,
+  Tr: T,
+  Td: r
+});
+export {
+  B as Table,
+  m as TableComponent
+};

package/dist/Tabs.js

@@ -0,0 +1,82 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const m=require("react"),j=require("./System.js"),Q=require("./use-viewport-BDDjd1nl.js"),U=require("./use-isomorphic-layout-effect-C1_Gy5Nu.js"),p=require("@xstyled/styled-components"),y=require("./P2CTZE2T-q8vyaGc0.js"),e=require("./LVA2YJMS-B2HZjIhJ.js"),k=require("./ITI7HKP4-BPa8qpnl.js"),A=require("./VGCJ63VH-BNLwLOaC.js"),d=require("./YV4JVR4I-DIthYWMj.js"),Z=require("./VEVQD5MH-mN1wMozH.js"),q=require("./MTZPJQMC-5Xg78Uyy.js");var G=e.createStoreContext([q.PopoverContextProvider,y.CompositeContextProvider],[q.PopoverScopedContextProvider,y.CompositeScopedContextProvider]),X=G.useContext;m.createContext(!1);m.createContext(null);function ee(s={}){var n=s,{composite:o,combobox:t}=n,r=e.__objRest$1(n,["composite","combobox"]);const a=["items","renderedItems","moves","orientation","virtualFocus","includesBaseElement","baseElement","focusLoop","focusShift","focusWrap"],v=d.mergeStore(r.store,d.omit2(o,a),d.omit2(t,a)),u=v==null?void 0:v.getState(),f=k.createCompositeStore(e.__spreadProps$1(e.__spreadValues$1({},r),{store:v,includesBaseElement:e.defaultValue(r.includesBaseElement,u==null?void 0:u.includesBaseElement,!1),orientation:e.defaultValue(r.orientation,u==null?void 0:u.orientation,"horizontal"),focusLoop:e.defaultValue(r.focusLoop,u==null?void 0:u.focusLoop,!0)})),i=k.createCollectionStore(),g=e.__spreadProps$1(e.__spreadValues$1({},f.getState()),{selectedId:e.defaultValue(r.selectedId,u==null?void 0:u.selectedId,r.defaultSelectedId),selectOnMove:e.defaultValue(r.selectOnMove,u==null?void 0:u.selectOnMove,!0)}),c=d.createStore(g,f,v);d.setup(c,()=>d.sync(c,["moves"],()=>{const{activeId:b,selectOnMove:I}=c.getState();if(!I||!b)return;const h=f.item(b);h&&(h.dimmed||h.disabled||c.setState("selectedId",h.id))}));let S=!0;d.setup(c,()=>d.batch(c,["selectedId"],(b,I)=>{if(!S){S=!0;return}o&&b.selectedId===I.selectedId||c.setState("activeId",b.selectedId)})),d.setup(c,()=>d.sync(c,["selectedId","renderedItems"],b=>{if(b.selectedId!==void 0)return;const{activeId:I,renderedItems:h}=c.getState(),x=f.item(I);if(x&&!x.disabled&&!x.dimmed)c.setState("selectedId",x.id);else{const E=h.find(T=>!T.disabled&&!T.dimmed);c.setState("selectedId",E==null?void 0:E.id)}})),d.setup(c,()=>d.sync(c,["renderedItems"],b=>{const I=b.renderedItems;if(I.length)return d.sync(i,["renderedItems"],h=>{const x=h.renderedItems;x.some(T=>!T.tabId)&&x.forEach((T,R)=>{if(T.tabId)return;const L=I[R];L&&i.renderItem(e.__spreadProps$1(e.__spreadValues$1({},T),{tabId:L.id}))})})}));let P=null;return d.setup(c,()=>{const b=()=>{P=c.getState().selectedId},I=()=>{S=!1,c.setState("selectedId",P)};if(o&&"setSelectElement"in o)return e.chain(d.sync(o,["value"],b),d.sync(o,["mounted"],I));if(t)return e.chain(d.sync(t,["selectedValue"],b),d.sync(t,["mounted"],I))}),e.__spreadProps$1(e.__spreadValues$1(e.__spreadValues$1({},f),c),{panels:i,setSelectedId:b=>c.setState("selectedId",b),select:b=>{c.setState("selectedId",b),f.move(b)}})}function te(s,n,o){e.useUpdateEffect(n,[o.composite,o.combobox]),s=k.useCompositeStoreProps(s,n,o),d.useStoreProps(s,o,"selectedId","setSelectedId"),d.useStoreProps(s,o,"selectOnMove");const[t,r]=d.useStore(()=>s.panels,{});return e.useUpdateEffect(r,[s,r]),Object.assign(m.useMemo(()=>e.__spreadProps(e.__spreadValues({},s),{panels:t}),[s,t]),{composite:o.composite,combobox:o.combobox})}function se(s={}){const n=Z.useComboboxContext(),o=X()||n;s=e.__spreadProps(e.__spreadValues({},s),{composite:s.composite!==void 0?s.composite:o,combobox:s.combobox!==void 0?s.combobox:n});const[t,r]=d.useStore(ee,s);return te(t,r,s)}var B=e.createStoreContext([y.CompositeContextProvider],[y.CompositeScopedContextProvider]),ne=B.useScopedContext,H=B.useProviderContext,F=B.ScopedContextProvider,oe="button",re=e.createHook(function(n){var o=n,{store:t,getItem:r}=o,a=e.__objRest(o,["store","getItem"]),v;const u=ne();t=t||u,e.invariant(t,process.env.NODE_ENV!=="production"&&"Tab must be wrapped in a TabList component.");const f=e.useId(),i=a.id||f,g=e.disabledFromProps(a),c=m.useCallback(_=>{const $=e.__spreadProps(e.__spreadValues({},_),{dimmed:g});return r?r($):$},[g,r]),S=a.onClick,P=e.useEvent(_=>{S==null||S(_),!_.defaultPrevented&&(t==null||t.setSelectedId(i))}),b=t.panels.useState(_=>{var $;return($=_.items.find(l=>l.tabId===i))==null?void 0:$.id}),I=f?a.shouldRegisterItem:!1,h=t.useState(_=>!!i&&_.activeId===i),x=t.useState(_=>!!i&&_.selectedId===i),E=t.useState(_=>!!t.item(_.activeId)),T=h||x&&!E,R=x||((v=a.accessibleWhenDisabled)!=null?v:!0);if(d.useStoreState(t.combobox||t.composite,"virtualFocus")&&(a=e.__spreadProps(e.__spreadValues({},a),{tabIndex:-1})),a=e.__spreadProps(e.__spreadValues({id:i,role:"tab","aria-selected":x,"aria-controls":b||void 0},a),{onClick:P}),t.composite){const _={id:i,accessibleWhenDisabled:R,store:t.composite,shouldRegisterItem:T&&I,rowId:a.rowId,render:a.render};a=e.__spreadProps(e.__spreadValues({},a),{render:e.jsxRuntimeExports.jsx(y.CompositeItem,e.__spreadProps(e.__spreadValues({},_),{render:t.combobox&&t.composite!==t.combobox?e.jsxRuntimeExports.jsx(y.CompositeItem,e.__spreadProps(e.__spreadValues({},_),{store:t.combobox})):_.render}))})}return a=y.useCompositeItem(e.__spreadProps(e.__spreadValues({store:t},a),{accessibleWhenDisabled:R,getItem:c,shouldRegisterItem:I})),a}),ae=e.memo2(e.forwardRef2(function(n){const o=re(n);return e.createElement(oe,o)})),ie="div",ce=e.createHook(function(n){var o=n,{store:t}=o,r=e.__objRest(o,["store"]);const a=H();t=t||a,e.invariant(t,process.env.NODE_ENV!=="production"&&"TabList must receive a `store` prop or be wrapped in a TabProvider component.");const v=t.useState(u=>u.orientation==="both"?void 0:u.orientation);return r=e.useWrapElement(r,u=>e.jsxRuntimeExports.jsx(F,{value:t,children:u}),[t]),t.composite&&(r=e.__spreadValues({focusable:!1},r)),r=e.__spreadValues({role:"tablist","aria-orientation":v},r),r=k.useComposite(e.__spreadValues({store:t},r)),r}),ue=e.forwardRef2(function(n){const o=ce(n);return e.createElement(ie,o)}),le="div",de=e.createHook(function(n){var o=n,{store:t,unmountOnHide:r,tabId:a,getItem:v,scrollRestoration:u,scrollElement:f}=o,i=e.__objRest(o,["store","unmountOnHide","tabId","getItem","scrollRestoration","scrollElement"]);const g=H();t=t||g,e.invariant(t,process.env.NODE_ENV!=="production"&&"TabPanel must receive a `store` prop or be wrapped in a TabProvider component.");const c=m.useRef(null),S=e.useId(i.id),P=d.useStoreState(t.panels,()=>{var l;return a||((l=t==null?void 0:t.panels.item(S))==null?void 0:l.tabId)}),b=d.useStoreState(t,l=>!!P&&l.selectedId===P),I=A.useDisclosureStore({open:b}),h=d.useStoreState(I,"mounted"),x=m.useRef(new Map),E=e.useEvent(()=>{const l=c.current;return l?f?typeof f=="function"?f(l):"current"in f?f.current:f:l:null});m.useEffect(()=>{var l,V;if(!u||!h)return;const C=E();if(!C)return;if(u==="reset"){C.scroll(0,0);return}if(!P)return;const w=x.current.get(P);C.scroll((l=w==null?void 0:w.x)!=null?l:0,(V=w==null?void 0:w.y)!=null?V:0);const N=()=>{x.current.set(P,{x:C.scrollLeft,y:C.scrollTop})};return C.addEventListener("scroll",N),()=>{C.removeEventListener("scroll",N)}},[u,h,P,E,t]);const[T,R]=m.useState(!1);m.useEffect(()=>{const l=c.current;if(!l)return;const V=e.getAllTabbableIn(l);R(!!V.length)},[]);const L=m.useCallback(l=>{const V=e.__spreadProps(e.__spreadValues({},l),{id:S||l.id,tabId:a});return v?v(V):V},[S,a,v]),_=i.onKeyDown,$=e.useEvent(l=>{if(_==null||_(l),l.defaultPrevented||!(t!=null&&t.composite))return;const C={ArrowLeft:t.previous,ArrowRight:t.next,Home:t.first,End:t.last}[l.key];if(!C)return;const{selectedId:w}=t.getState(),N=C({activeId:w});N&&(l.preventDefault(),t.move(N))});return i=e.useWrapElement(i,l=>e.jsxRuntimeExports.jsx(F,{value:t,children:l}),[t]),i=e.__spreadProps(e.__spreadValues({id:S,role:"tabpanel","aria-labelledby":P||void 0},i),{children:r&&!h?null:i.children,ref:e.useMergeRefs(c,i.ref),onKeyDown:$}),i=e.useFocusable(e.__spreadValues({focusable:!t.composite&&!T},i)),i=A.useDisclosureContent(e.__spreadValues({store:I},i)),i=y.useCollectionItem(e.__spreadProps(e.__spreadValues({store:t.panels},i),{getItem:L})),i}),pe=e.forwardRef2(function(n){const o=de(n);return e.createElement(le,o)});function M(s){var n=m.Children.toArray(s);return n.reduce(function(o,t){return t.type===m.Fragment?o.concat(M(t.props.children)):(o.push(t),o)},[])}function D(s,n){typeof s=="function"?s(n):s&&(s.current=n)}function me(s,n){return m.useMemo(()=>s==null&&n==null?null:o=>{D(s,o),D(n,o)},[s,n])}const fe=p(ue)(({size:s})=>p.css`
+    position: relative;
+    width: 100%;
+    overflow-x: auto;
+    display: flex;
+    border: 0;
+    gap: xl;
+
+    &[aria-orientation='vertical'] {
+      flex-direction: column;
+      ${p.th("tabs.tabsBorder.vertical")};
+    }
+
+    ${p.th("tabs.tabsBorder.horizontal")};
+
+    ${z} {
+      ${p.th(`tabs.item.size.${s}`)}
+    }
+    ${p.system};
+  `),z=p.button`
+  border: 0;
+  background: none;
+  ${p.th("tabs.item.default")};
+  display: flex;
+  align-items: center;
+  flex: none;
+  padding: md 0;
+  transition: medium;
+  text-transform: none;
+  cursor: pointer;
+  gap: sm;
+
+  &:focus {
+    outline: none !important; /* important for firefox */
+
+    &:not([aria-selected='true']) {
+      ${p.th("tabs.item.focus")};
+    }
+  }
+
+  &[aria-selected='true'] {
+    ${p.th("tabs.item.active")};
+  }
+
+  &[aria-disabled='true'] {
+    ${p.th("tabs.item.disabled")};
+    cursor: auto;
+  }
+
+  &:hover:not([aria-selected='true']):not([aria-disabled='true']) {
+    ${p.th("tabs.item.focus")};
+  }
+
+  & > svg,
+  img {
+    ${p.th("tabs.icon")};
+  }
+
+  & > span {
+    ${p.th("tabs.badge")};
+  }
+`,be=p(pe)(({orientation:s})=>p.css`
+    ${s==="vertical"?p.th("tabs.panel.vertical"):p.th("tabs.panel.horizontal")};
+  `),ve=({offset:s=0,size:n=0})=>p.css`
+  ${p.th("tabs.activeBar.horizontal")};
+  left: 0;
+  bottom: 0;
+  width: ${n}px;
+  transform: translateX(${s}px);
+`,_e=({offset:s=0,size:n=0})=>p.css`
+  ${p.th("tabs.activeBar.vertical")};
+  right: 0;
+  top: 0;
+  height: ${n}px;
+  transform: translateY(${s}px);
+`,Ie=p.span(({orientation:s,...n})=>p.css`
+    position: absolute;
+    ${s==="vertical"?_e(n):ve(n)}
+    will-change: width, transform;
+    transition: medium;
+    transition-property: transform, width;
+  `),W=s=>{if(!s||typeof window>"u")return 1;const n=Number(window.getComputedStyle(s).scale);return isNaN(n)?W(s.parentElement):n};function Se(s,n,o){const[t,r]=m.useState({}),{height:a,width:v}=Q.useViewportSize();return U.useIsomorphicLayoutEffect(()=>{const u=s.current;if(!u||!n)return;const f=u.getBoundingClientRect(),i=n.getBoundingClientRect(),g=W(u);if(o==="vertical"){const c=i.top-f.top,S=i.height;r({size:S,offset:c,orientation:o})}else{const c=(i.left-f.left+u.scrollLeft)/g,S=i.width/g;r({size:isNaN(S)?0:S,offset:isNaN(c)?0:c,orientation:o})}},[s,n,v,a,o]),t}const K=({activeTab:s,listRef:n,orientation:o})=>{const t=Se(n,s,o);return m.createElement(Ie,{...t})};K.displayName="ActiveBar";const he=M.default||M;function xe(s,n){const[o,t]=m.useState(null);return[he(n).map(a=>a.props.id===s?m.cloneElement(a,{ref:t}):a),o]}const J=j.forwardRef(({children:s,size:n="md",store:o,...t},r)=>{const a=m.useRef(),v=me(r,a),{orientation:u,selectedId:f}=o.useState(),[i,g]=xe(f,s);return m.createElement(fe,{orientation:u,ref:v,size:n,store:o,...t},i,i.length>1&&m.createElement(K,{activeTab:g,listRef:a,orientation:u}))});J.displayName="TabList";const Y=j.forwardRef(({children:s,store:n,tabId:o,...t},r)=>{const a=n.useState("orientation");return m.createElement(be,{orientation:a,ref:r,store:n,tabId:o,...t},s)});Y.displayName="TabPanel";const O=j.forwardRef(({as:s,children:n,id:o,store:t,...r},a)=>m.createElement(ae,{id:o,render:v=>m.createElement(z,{as:s,...v,ref:a}),store:t,...r},n));O.displayName="Tab";const Pe=Object.assign(O,{List:J,Panel:Y});function ge(s){return se(s)}exports.Tab=Pe;exports.TabComponent=O;exports.useTab=ge;