@starasia/tabs 1.0.2 → 1.0.4

package/dist/tabs.es.js

@@ -21,16 +21,10 @@ const T = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   /* blue */
   --starasia-ui-tabs-color-primary-blue: var(
     --starasia-ui-brand-primary-default,
-    #1976d2
-  );
-  --starasia-ui-tabs-color-primary-black: var(
-    --starasia-ui-color-blue-700,
-    #202221
-  );
-  --starasia-ui-tabs-color-secondary-blue: var(
-    --starasia-ui-color-blue-50,
-    #e3f2fd
+    rgba(74, 106, 148, 1)
   );
+  --starasia-ui-tabs-color-primary-black: var(--starasia-ui-color-gray-900, #202221);
+  --starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
 
   /* height */
   --starasia-ui-tabs-height-line: 2px;

package/dist/tabs.umd.js

@@ -19,16 +19,10 @@
   /* blue */
   --starasia-ui-tabs-color-primary-blue: var(
     --starasia-ui-brand-primary-default,
-    #1976d2
-  );
-  --starasia-ui-tabs-color-primary-black: var(
-    --starasia-ui-color-blue-700,
-    #202221
-  );
-  --starasia-ui-tabs-color-secondary-blue: var(
-    --starasia-ui-color-blue-50,
-    #e3f2fd
+    rgba(74, 106, 148, 1)
   );
+  --starasia-ui-tabs-color-primary-black: var(--starasia-ui-color-gray-900, #202221);
+  --starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
 
   /* height */
   --starasia-ui-tabs-height-line: 2px;
@@ -166,4 +160,4 @@
   height: 42px;
   font-size: var(--starasia-ui-tabs-font-size-lg);
 }
-`,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",...b})=>{const[o,l]=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(()=>{l(t||0)},[t]),r.jsx(d.Provider,{value:{activeContext:v,handleSetActiveContext:B,tabsButton:u,setTabsButton:f,activeTabButton:o,setActiveTabButton:l,panels:p,setPanels:C,size:a,variant:s},children:r.jsx("div",{...b,children:e})})},y=({children:e,...t})=>{var v;const a=n.useContext(d),s=n.useRef(null),[b,o]=n.useState(0);let l=((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:`${l}px`,left:`${b}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 b=o=>{if(a==null||a.handleSetActiveContext(o.currentTarget),a!=null&&a.tabsButton)for(let l=0;l<a.tabsButton.length;l++)a.tabsButton[l]===o.currentTarget&&a.setActiveTabButton(l)};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=>{b(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(b=>[...b,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"})});
+`,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"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@starasia/tabs",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "Tabs component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/tabs.umd.js",
@@ -12,6 +12,10 @@
     "dist/*.map",
     "dist/*.css"
   ],
+  "scripts": {
+    "dev": "vite --config vite.config.ts --port 3000",
+    "build": "vite build --config vite.config.ts"
+  },
   "keywords": [],
   "license": "ISC",
   "type": "module",
@@ -36,9 +40,5 @@
   },
   "publishConfig": {
     "access": "public"
-  },
-  "scripts": {
-    "dev": "vite --config vite.config.ts --port 3000",
-    "build": "vite build --config vite.config.ts"
   }
-}
+}