hds-web 1.24.3 → 1.24.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hds-web",
-  "version": "1.24.3",
+  "version": "1.24.4",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/HDS/components/Tabs/index.js

@@ -2,3 +2,4 @@ export {default as Tabone} from './TabOne';
 export {default as Tabthree} from './TabThree';
 export {default as Tabtwo} from './TabTwo';
 export {default as Tab} from './tab';
+export {default as V3Tab} from './v3tab';

package/src/HDS/components/Tabs/v3tab.js

@@ -0,0 +1,60 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { HDSColor } from '../../foundation/ColorPalette';
+import { Typography } from '../../foundation/Typography'
+import { motion } from 'framer-motion';
+
+export default function V3Tab(props) {
+    const {
+        tabs,
+        onTabClick,
+        pillColor,
+    } = props;
+    const initialActiveTab = tabs.find(tab => tab.current)?.name || tabs[0].name;
+    const [activeTab, setActiveTab] = useState(initialActiveTab);
+    let pillColorClass = '';
+    if (pillColor) {
+        pillColorClass = HDSColor(pillColor);
+    }
+    const handleTabClick = (clickedTab) => {
+        setActiveTab(clickedTab.name);
+        if (onTabClick) {
+            onTabClick(clickedTab);
+        }
+
+    };
+    return (
+        <div className="">
+            <div className="block ">
+                <nav className="relative inline-flex gap-2 rounded-[32px] " aria-label="Tabs">
+                    {tabs && tabs.map((tab) => (
+                        <button
+                            key={tab.name}
+                            onClick={() => {
+                                handleTabClick(tab);
+                            }}
+                            className={`${activeTab === tab.name ? ' text-neutral-0 transition-all duration-300' : ' hover:bg-neutral-500/30 text-neutral-400'} relative  px-3 py-1 whitespace-nowrap rounded-full hover:text-neutral-0`}
+                        >
+                            {activeTab === tab.name && (
+                                <motion.div
+                                    layoutId="active-pill"
+                                    className={`absolute inset-0 ${pillColorClass}`}
+                                    style={{ borderRadius: 32 }}
+                                //  transition={{ duration:1 }}
+
+                                />
+                            )}
+                            <Typography textStyle="body3c-medium" className={`relative z-10 `}>
+                                {tab.name}
+                            </Typography>
+                        </button>
+                    ))}
+                </nav>
+            </div>
+        </div>
+    );
+}
+
+
+V3Tab.defaultProps = {
+    pillColor: 'bg-blue-500',
+}

package/src/styles/tailwind.css

@@ -952,6 +952,10 @@ select{
   left: 17.6%;
 }
 
+.left-\[400px\]{
+  left: 400px;
+}
+
 .left-\[45\%\]{
   left: 45%;
 }
@@ -1253,6 +1257,11 @@ select{
   margin-bottom: 2rem;
 }
 
+.mx-8{
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
 .-mb-\[112\%\]{
   margin-bottom: -112%;
 }
@@ -1624,6 +1633,10 @@ select{
   height: 2.25rem;
 }
 
+.h-\[1000px\]{
+  height: 1000px;
+}
+
 .h-\[130px\]{
   height: 130px;
 }
@@ -1668,10 +1681,6 @@ select{
   height: 60px;
 }
 
-.h-\[700px\]{
-  height: 700px;
-}
-
 .h-\[800px\]{
   height: 800px;
 }
@@ -9335,11 +9344,6 @@ select{
   border-color: rgb(13 65 198 / var(--tw-border-opacity));
 }
 
-.hover\:border-neutral-0:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
 .hover\:border-neutral-300:hover{
   --tw-border-opacity: 1;
   border-color: rgb(210 214 219 / var(--tw-border-opacity));
@@ -9829,10 +9833,6 @@ select{
   background-color: rgb(133 77 24 / var(--tw-bg-opacity));
 }
 
-.hover\:bg-neutral-0\/20:hover{
-  background-color: rgb(255 255 255 / 0.2);
-}
-
 .hover\:bg-neutral-500\/30:hover{
   background-color: rgb(108 115 127 / 0.3);
 }
@@ -10029,11 +10029,6 @@ select{
   color: rgb(30 86 227 / var(--tw-text-opacity));
 }
 
-.focus\:text-blue-700:focus{
-  --tw-text-opacity: 1;
-  color: rgb(13 65 198 / var(--tw-text-opacity));
-}
-
 .focus\:text-neutral-0:focus{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));