kahuna-base-react-components 0.2.12 → 0.2.13

package/dist/types.d.ts

@@ -141,4 +141,21 @@ interface KSelectDateProps {
 }
 declare const KSelectDate: React.FC<KSelectDateProps>;
 
-export { KButton, KDropdown, KInput, KLogo, KSelectDate, KSlider, KSpan, KTitleSpan };
+interface KTooltipProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    position?: string;
+    backgroundColor?: string;
+    width?: string;
+    height?: string;
+    zIndex?: number;
+    border?: string;
+    borderRadius?: string;
+    boxShadow?: string;
+    showArrow?: boolean;
+    arrowColor?: string;
+    padding?: string;
+}
+declare const KTooltip: React.FC<KTooltipProps>;
+
+export { KButton, KDropdown, KInput, KLogo, KSelectDate, KSlider, KSpan, KTitleSpan, KTooltip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kahuna-base-react-components",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "description": "Kahuna Base React Components",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

package/src/components/KTooltip/KTooltip.stories.tsx

@@ -0,0 +1,94 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KTooltip, { KTooltipProps } from "./KTooltip"
+import KSpan from "../KSpan"
+
+export default {
+  title: "ReactComponentLibrary/KTooltip",
+  component: KTooltip,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KTooltip>
+
+const Template: StoryFn<KTooltipProps> = (args) => (
+  <KTooltip {...args}>
+    <div className="bg-red-200 w-[200px] aspect-square rounded-full flex items-center justify-center">
+      Tooltip Children
+    </div>{" "}
+    {/* Here we place the children directly */}
+  </KTooltip>
+)
+
+export const KTooltipPrimary = Template.bind({})
+KTooltipPrimary.args = {
+  content: (
+    <div className="bg-red-100 flex justify-center items-center">
+      <div className="bg-green-300 font-extrabold ">BURADA</div>
+    </div>
+  ),
+  position: "top",
+  zIndex: 1000,
+  arrowColor: "green",
+  showArrow: true,
+  padding: "10px",
+  border: "1px solid red"
+  //boxShadow: "3px 3px 10px #000",
+  //borderRadius: "100px",
+}
+
+export const KTooltipSecondary = Template.bind({})
+KTooltipPrimary.args = {
+  content: (
+    <div className="flex flex-col gap-2 justify-center items-start px-4 py-2">
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#21A494] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="16-Bit" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600} />
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#BBCC13] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="24-Bit" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600} />
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+      <div
+        className="flex flex-row gap-1 whitespace-nowrap items-center"
+        style={{
+          opacity: true ? "1" : "0.3"
+        }}
+      >
+        <span className="bg-[#30272C] px-0.5 py-1 flex items-center justify-center w-9 rounded-[3px]">
+          <KSpan text="Dolby" fontSize={10} lineHeight="10px" fontWeight={600} color="#FFF" />
+        </span>
+        {true ? (
+          <KSpan text="Added" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        ) : (
+          <KSpan text="No File" fontSize={12} lineHeight="12px" color="#1F1F1F" fontWeight={600}></KSpan>
+        )}
+      </div>
+    </div>
+  ),
+  arrowColor: "red",
+  padding: "0px"
+  //boxShadow: "3px 3px 10px #000",
+  //borderRadius: "100px",
+}

package/src/components/KTooltip/KTooltip.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react"
+import "../../main.css"
+
+export interface KTooltipProps {
+  children: React.ReactNode
+  content: React.ReactNode
+  position?: string
+  backgroundColor?: string
+  width?: string
+  height?: string
+  zIndex?: number
+  border?: string
+  borderRadius?: string
+  boxShadow?: string
+  showArrow?: boolean
+  arrowColor?: string
+  padding?: string
+}
+
+const KTooltip: React.FC<KTooltipProps> = (props) => {
+  const [isVisible, setIsVisible] = useState(false)
+
+  const showTooltip = () => setIsVisible(true)
+  const hideTooltip = () => setIsVisible(false)
+
+  const position = props.position || "top"
+  const width = props.width || "auto"
+  const height = props.height || "auto"
+  const background = props.backgroundColor || "#FFF"
+  const zIndex = props.zIndex || 999999
+  const boxShadow = props.boxShadow || "none"
+  const border = props.border || "1px solid #E5E7EB"
+  const borderRadius = props.borderRadius || "5px"
+  const arrowColor =
+    props.arrowColor !== undefined
+      ? props.arrowColor
+      : props.backgroundColor !== undefined
+      ? props.backgroundColor
+      : "#F7F7F7"
+  const showArrow = props.showArrow || false
+  const padding = props.padding || "5px"
+
+  const baseStyles = { width, height, background, zIndex, border, borderRadius, boxShadow }
+  return (
+    <div className="relative box-border" onMouseEnter={showTooltip} onMouseLeave={hideTooltip}>
+      {props.children}
+
+      <div
+        className={`k-tooltip-${position} absolute ${isVisible ? "k-tooltip-enter" : "k-tooltip-exit"}`}
+        style={baseStyles}
+      >
+        <div
+          style={{
+            padding: padding,
+            borderRadius,
+            background
+          }}
+        >
+          {props.content}
+        </div>
+        {showArrow && <div className={`arrow-${position}`} style={{ backgroundColor: arrowColor, zIndex: -200 }}></div>}
+      </div>
+    </div>
+  )
+}
+
+export default KTooltip

package/src/components/KTooltip/index.ts

@@ -0,0 +1 @@
+export {default} from './KTooltip'

package/src/index.ts

@@ -6,7 +6,8 @@ import KInput from "./components/KInput"
 import KDropdown from "./components/KDropdown"
 import KSlider from "./components/KSlider"
 import KSelectDate from "./components/KSelectDate"
+import KTooltip from "./components/KTooltip"
 
 export {
-  KButton, KSpan, KLogo, KTitleSpan, KInput, KDropdown, KSlider, KSelectDate
+  KButton, KSpan, KLogo, KTitleSpan, KInput, KDropdown, KSlider, KSelectDate, KTooltip
 }

package/src/main.css

@@ -46,7 +46,8 @@
     font-family: Inter;
     font-style: normal;
     font-weight: 400;
-    line-height: 20px; /* 142.857% */
+    line-height: 20px;
+    /* 142.857% */
     letter-spacing: -0.084px;
 }
 
@@ -100,11 +101,100 @@
 .k-slider-input::-webkit-slider-thumb {
     -webkit-appearance: none;
     cursor: pointer;
-    margin-top: -4px; /* Align the thumb vertically with the track */
-    width: 16px; /* Width of the thumb */
-    height: 16px; /* Height of the thumb */
+    margin-top: -4px;
+    /* Align the thumb vertically with the track */
+    width: 16px;
+    /* Width of the thumb */
+    height: 16px;
+    /* Height of the thumb */
     border-radius: 50px;
     background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cg filter='url(%23filter0_di_252_33228)'%3E%3Crect x='6' y='6' width='16' height='16' rx='8' fill='white'/%3E%3Crect x='6.5' y='6.5' width='15' height='15' rx='7.5' stroke='white'/%3E%3C/g%3E%3Cg filter='url(%23filter1_d_252_33228)'%3E%3Cpath d='M11 14C11 12.3431 12.3431 11 14 11C15.6569 11 17 12.3431 17 14C17 15.6569 15.6569 17 14 17C12.3431 17 11 15.6569 11 14Z' fill='%23B5B5B5'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_di_252_33228' x='0' y='0' width='28' height='28' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.06 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_252_33228'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_252_33228' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-3'/%3E%3CfeGaussianBlur stdDeviation='1.5'/%3E%3CfeComposite in2='hardAlpha' operator='arithmetic' k2='-1' k3='1'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.894118 0 0 0 0 0.898039 0 0 0 0 0.905882 0 0 0 1 0'/%3E%3CfeBlend mode='normal' in2='shape' result='effect2_innerShadow_252_33228'/%3E%3C/filter%3E%3Cfilter id='filter1_d_252_33228' x='7' y='9' width='14' height='14' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='2'/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.105882 0 0 0 0 0.109804 0 0 0 0 0.113725 0 0 0 0.04 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_252_33228'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_252_33228' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E") center / cover;
     background-size: auto;
     background-position: center;
+}
+
+.k-tooltip-top {
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-bottom: 10px;
+}
+
+.k-tooltip-right {
+    top: 50%;
+    left: 100%;
+    transform: translateY(-50%);
+    margin-left: 10px;
+}
+
+.k-tooltip-bottom {
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 10px;
+}
+
+.k-tooltip-left {
+    top: 50%;
+    right: 100%;
+    transform: translateY(-50%);
+    margin-right: 10px;
+}
+
+.k-tooltip-enter {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.k-tooltip-exit {
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+}
+
+.arrow-left {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    left: calc(100% - 5px);
+    transform-origin: center;
+    transform: translateY(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-right {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 50%;
+    right: calc(100% - 5px);
+    transform-origin: center;
+    transform: translateY(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-top {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: calc(100% - 5px);
+    left: 50%;
+    transform-origin: center;
+    transform: translateX(-50%) rotateZ(45deg);
+    z-index: -100;
+}
+
+.arrow-bottom {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    bottom: calc(100% - 5px);
+    left: 50%;
+    transform-origin: center;
+    transform: translateX(-50%) rotateZ(45deg);
+    z-index: -100;
 }