@starasia/tabs 1.0.3 → 1.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tabs.es.js +2 -2
- package/dist/tabs.umd.js +3 -3
- package/package.json +1 -1
package/dist/tabs.es.js
CHANGED
|
@@ -21,10 +21,10 @@ const T = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
|
|
|
21
21
|
/* blue */
|
|
22
22
|
--starasia-ui-tabs-color-primary-blue: var(
|
|
23
23
|
--starasia-ui-brand-primary-default,
|
|
24
|
-
|
|
24
|
+
rgba(74, 106, 148, 1)
|
|
25
25
|
);
|
|
26
26
|
--starasia-ui-tabs-color-primary-black: var(--starasia-ui-color-gray-900, #202221);
|
|
27
|
-
--starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
27
|
+
--starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
28
28
|
|
|
29
29
|
/* height */
|
|
30
30
|
--starasia-ui-tabs-height-line: 2px;
|
package/dist/tabs.umd.js
CHANGED
|
@@ -19,10 +19,10 @@
|
|
|
19
19
|
/* blue */
|
|
20
20
|
--starasia-ui-tabs-color-primary-blue: var(
|
|
21
21
|
--starasia-ui-brand-primary-default,
|
|
22
|
-
|
|
22
|
+
rgba(74, 106, 148, 1)
|
|
23
23
|
);
|
|
24
24
|
--starasia-ui-tabs-color-primary-black: var(--starasia-ui-color-gray-900, #202221);
|
|
25
|
-
--starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary);
|
|
25
|
+
--starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
|
|
26
26
|
|
|
27
27
|
/* height */
|
|
28
28
|
--starasia-ui-tabs-height-line: 2px;
|
|
@@ -160,4 +160,4 @@
|
|
|
160
160
|
height: 42px;
|
|
161
161
|
font-size: var(--starasia-ui-tabs-font-size-lg);
|
|
162
162
|
}
|
|
163
|
-
`,g="starasia-tab-styles";(e=>{if(!document.getElementById(g)){const t=document.createElement("style");t.id=g,t.textContent=e,document.head.appendChild(t)}})(h);const d=n.createContext(null),m=({children:e,activeTab:t,size:a="md",variant:s="underline",...
|
|
163
|
+
`,g="starasia-tab-styles";(e=>{if(!document.getElementById(g)){const t=document.createElement("style");t.id=g,t.textContent=e,document.head.appendChild(t)}})(h);const d=n.createContext(null),m=({children:e,activeTab:t,size:a="md",variant:s="underline",...l})=>{const[o,b]=n.useState(0),[v,c]=n.useState(null),[u,f]=n.useState([]),[p,C]=n.useState([]),B=S=>{c(S)};return n.useEffect(()=>{c(u[t||0])},[u,t]),n.useEffect(()=>{b(t||0)},[t]),r.jsx(d.Provider,{value:{activeContext:v,handleSetActiveContext:B,tabsButton:u,setTabsButton:f,activeTabButton:o,setActiveTabButton:b,panels:p,setPanels:C,size:a,variant:s},children:r.jsx("div",{...l,children:e})})},y=({children:e,...t})=>{var v;const a=n.useContext(d),s=n.useRef(null),[l,o]=n.useState(0);let b=((v=a==null?void 0:a.activeContext)==null?void 0:v.getBoundingClientRect().width)||0;return n.useEffect(()=>{var c,u;if(s.current){const f=((c=a==null?void 0:a.activeContext)==null?void 0:c.getBoundingClientRect().left)||0,p=((u=s==null?void 0:s.current)==null?void 0:u.getBoundingClientRect().left)||0;o(f-p)}},[s,a==null?void 0:a.activeContext]),r.jsxs("div",{className:`starasia-tabs-tablist starasia-tabs-tablist-${a==null?void 0:a.variant}`,...t,ref:s,children:[e,r.jsx("div",{className:`starasia-tabs-tablist-line-move starasia-tabs-tablist-line-move-${a==null?void 0:a.variant}`,style:{width:`${b}px`,left:`${l}px`}})]})},x=({children:e,...t})=>{const a=n.useContext(d),s=n.useRef(null);n.useEffect(()=>{s.current&&(a==null||a.setTabsButton(o=>[...o,s.current]))},[s]);const l=o=>{if(a==null||a.handleSetActiveContext(o.currentTarget),a!=null&&a.tabsButton)for(let b=0;b<a.tabsButton.length;b++)a.tabsButton[b]===o.currentTarget&&a.setActiveTabButton(b)};return r.jsx("button",{className:`starasia-tabs-tab starasia-tabs-tab-${a==null?void 0:a.size} starasia-tabs-tab-${a==null?void 0:a.variant} ${(a==null?void 0:a.tabsButton[a.activeTabButton])===s.current?`starasia-tabs-tab-${a==null?void 0:a.variant}-active`:""}`,onClick:o=>{l(o),t.onClick&&t.onClick()},ref:s,style:{fontWeight:(a==null?void 0:a.tabsButton[a.activeTabButton])===s.current?"var(--starasia-ui-fontWeights-medium, 400)":"var(--starasia-ui-fontWeights-normal, 300)",...t.style},children:e})},T=({children:e,...t})=>r.jsx("div",{...t,children:e}),z=({children:e,...t})=>{const a=n.useContext(d),s=n.useRef(null);return n.useEffect(()=>{s.current&&(a==null||a.setPanels(l=>[...l,s.current]))},[s]),r.jsx("div",{ref:s,style:{display:(a==null?void 0:a.panels[a.activeTabButton])===s.current?"block":"none",...t.style},children:(a==null?void 0:a.panels[a.activeTabButton])===s.current?e:null})};i.Tab=x,i.TabPanel=z,i.TabPanels=T,i.Tabs=m,i.TabsLists=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
|