@starasia/tabs 1.0.3 → 1.0.5

package/dist/tabs.es.js

@@ -1,5 +1,5 @@
-import { jsx as l, jsxs as C } from "react/jsx-runtime";
-import { createContext as B, useState as u, useEffect as c, useContext as f, useRef as m } from "react";
+import { jsx as b, jsxs as C } from "react/jsx-runtime";
+import { createContext as B, useState as u, useEffect as c, useContext as m, useRef as f } from "react";
 const T = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");
 
 :root {
@@ -10,21 +10,22 @@ const T = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
   /* gray */
   --starasia-ui-tabs-color-tertiary-gray: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-tabs-color-text-active: var(
     --starasia-ui-color-gray-900,
-    #181a19
+    rgba(24, 26, 25, 1)
   );
-  --starasia-ui-tabs-color-text: var(--starasia-ui-color-gray-200, #78867f);
-  --starasia-ui-tabs-color-white: var(--starasia-ui-color-gray-50, #fffeff);
+  --starasia-ui-tabs-color-text: var(--starasia-ui-color-gray-200, rgba(120, 134, 127, 1));
+  --starasia-ui-tabs-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
+  --starasia-ui-tabs-color-secondary-tablist-bg: rgba(120, 134, 127, 0.1);
   /* blue */
   --starasia-ui-tabs-color-primary-blue: var(
     --starasia-ui-brand-primary-default,
-    #1976d2
+    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);
+  --starasia-ui-tabs-color-primary-black: var(--starasia-ui-color-gray-900, rgba(32, 34, 33, 1));
+  --starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
 
   /* height */
   --starasia-ui-tabs-height-line: 2px;
@@ -61,7 +62,7 @@ const T = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
 }
 
 .starasia-tabs-tablist-secondary {
-  background-color: rgba(120, 134, 127, 0.1);
+  background-color: var(--starasia-ui-tabs-color-secondary-tablist-bg);
   padding: 4px;
   box-sizing: border-box;
   border-radius: 12px;
@@ -176,42 +177,42 @@ const v = B(null), S = ({
   variant: t = "underline",
   ...e
 }) => {
-  const [i, r] = u(0), [d, b] = u(
+  const [i, r] = u(0), [d, l] = u(
     null
-  ), [o, p] = u([]), [g, y] = u([]), x = (z) => {
-    b(z);
+  ), [o, g] = u([]), [p, y] = u([]), x = (z) => {
+    l(z);
   };
   return c(() => {
-    b(o[s || 0]);
+    l(o[s || 0]);
   }, [o, s]), c(() => {
     r(s || 0);
-  }, [s]), /* @__PURE__ */ l(
+  }, [s]), /* @__PURE__ */ b(
     v.Provider,
     {
       value: {
         activeContext: d,
         handleSetActiveContext: x,
         tabsButton: o,
-        setTabsButton: p,
+        setTabsButton: g,
         activeTabButton: i,
         setActiveTabButton: r,
-        panels: g,
+        panels: p,
         setPanels: y,
         size: a,
         variant: t
       },
-      children: /* @__PURE__ */ l("div", { ...e, children: n })
+      children: /* @__PURE__ */ b("div", { ...e, children: n })
     }
   );
 }, $ = ({ children: n, ...s }) => {
   var d;
-  const a = f(v), t = m(null), [e, i] = u(0);
+  const a = m(v), t = f(null), [e, i] = u(0);
   let r = ((d = a == null ? void 0 : a.activeContext) == null ? void 0 : d.getBoundingClientRect().width) || 0;
   return c(() => {
-    var b, o;
+    var l, o;
     if (t.current) {
-      const p = ((b = a == null ? void 0 : a.activeContext) == null ? void 0 : b.getBoundingClientRect().left) || 0, g = ((o = t == null ? void 0 : t.current) == null ? void 0 : o.getBoundingClientRect().left) || 0;
-      i(p - g);
+      const g = ((l = a == null ? void 0 : a.activeContext) == null ? void 0 : l.getBoundingClientRect().left) || 0, p = ((o = t == null ? void 0 : t.current) == null ? void 0 : o.getBoundingClientRect().left) || 0;
+      i(g - p);
     }
   }, [t, a == null ? void 0 : a.activeContext]), /* @__PURE__ */ C(
     "div",
@@ -221,7 +222,7 @@ const v = B(null), S = ({
       ref: t,
       children: [
         n,
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ b(
           "div",
           {
             className: `starasia-tabs-tablist-line-move starasia-tabs-tablist-line-move-${a == null ? void 0 : a.variant}`,
@@ -232,7 +233,7 @@ const v = B(null), S = ({
     }
   );
 }, A = ({ children: n, ...s }) => {
-  const a = f(v), t = m(null);
+  const a = m(v), t = f(null);
   c(() => {
     t.current && (a == null || a.setTabsButton((i) => [
       ...i,
@@ -244,7 +245,7 @@ const v = B(null), S = ({
       for (let r = 0; r < a.tabsButton.length; r++)
         a.tabsButton[r] === i.currentTarget && a.setActiveTabButton(r);
   };
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ b(
     "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]) === t.current ? `starasia-tabs-tab-${a == null ? void 0 : a.variant}-active` : ""}`,
@@ -259,14 +260,14 @@ const v = B(null), S = ({
       children: n
     }
   );
-}, R = ({ children: n, ...s }) => /* @__PURE__ */ l("div", { ...s, children: n }), E = ({ children: n, ...s }) => {
-  const a = f(v), t = m(null);
+}, R = ({ children: n, ...s }) => /* @__PURE__ */ b("div", { ...s, children: n }), E = ({ children: n, ...s }) => {
+  const a = m(v), t = f(null);
   return c(() => {
     t.current && (a == null || a.setPanels((e) => [
       ...e,
       t.current
     ]));
-  }, [t]), /* @__PURE__ */ l(
+  }, [t]), /* @__PURE__ */ b(
     "div",
     {
       ref: t,

package/dist/tabs.umd.js

@@ -8,21 +8,22 @@
   /* gray */
   --starasia-ui-tabs-color-tertiary-gray: var(
     --starasia-ui-color-gray-300,
-    #d1d5db
+    rgba(209, 213, 219, 1)
   );
   --starasia-ui-tabs-color-text-active: var(
     --starasia-ui-color-gray-900,
-    #181a19
+    rgba(24, 26, 25, 1)
   );
-  --starasia-ui-tabs-color-text: var(--starasia-ui-color-gray-200, #78867f);
-  --starasia-ui-tabs-color-white: var(--starasia-ui-color-gray-50, #fffeff);
+  --starasia-ui-tabs-color-text: var(--starasia-ui-color-gray-200, rgba(120, 134, 127, 1));
+  --starasia-ui-tabs-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
+  --starasia-ui-tabs-color-secondary-tablist-bg: rgba(120, 134, 127, 0.1);
   /* blue */
   --starasia-ui-tabs-color-primary-blue: var(
     --starasia-ui-brand-primary-default,
-    #1976d2
+    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);
+  --starasia-ui-tabs-color-primary-black: var(--starasia-ui-color-gray-900, rgba(32, 34, 33, 1));
+  --starasia-ui-tabs-color-secondary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
 
   /* height */
   --starasia-ui-tabs-height-line: 2px;
@@ -59,7 +60,7 @@
 }
 
 .starasia-tabs-tablist-secondary {
-  background-color: rgba(120, 134, 127, 0.1);
+  background-color: var(--starasia-ui-tabs-color-secondary-tablist-bg);
   padding: 4px;
   box-sizing: border-box;
   border-radius: 12px;
@@ -160,4 +161,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"})});
+`,f="starasia-tab-styles";(e=>{if(!document.getElementById(f)){const t=document.createElement("style");t.id=f,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,g]=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:g,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 g=((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(g-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.3",
+  "version": "1.0.5",
   "description": "Tabs component for starasia UI",
   "author": "Prawito Hudoro",
   "main": "dist/tabs.umd.js",