kahuna-base-react-components 0.2.13 → 0.2.14

package/dist/types.d.ts

@@ -45,6 +45,7 @@ interface KTitleSpanProps {
     lineHeight?: string;
     fontStyle?: string;
     letterSpacing?: string;
+    bold?: boolean;
 }
 declare const KTitleSpan: React.FC<KTitleSpanProps>;
 
@@ -52,8 +53,7 @@ interface KLogoProps {
     width?: number;
     height?: number;
     borderRadius?: number;
-    primaryText?: string;
-    secondaryText?: string;
+    logoType: string;
 }
 declare const KLogo: React.FC<KLogoProps>;
 
@@ -158,4 +158,21 @@ interface KTooltipProps {
 }
 declare const KTooltip: React.FC<KTooltipProps>;
 
-export { KButton, KDropdown, KInput, KLogo, KSelectDate, KSlider, KSpan, KTitleSpan, KTooltip };
+interface SliderLabelOption {
+    label: string;
+    value: number;
+}
+interface SliderLabelProps {
+    options: SliderLabelOption[];
+    onChange: (option: SliderLabelOption) => void;
+    value?: number;
+    disabled?: boolean;
+    width?: string;
+    titleText?: string;
+    valueText?: string;
+    fontSize?: number;
+    color?: string;
+}
+declare const KSliderLabel: React.FC<SliderLabelProps>;
+
+export { KButton, KDropdown, KInput, KLogo, KSelectDate, KSlider, KSliderLabel, KSpan, KTitleSpan, KTooltip };

package/package.json

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

package/src/assets/kahuna-text.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="77" height="16" viewBox="0 0 77 16" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M0.707764 15.8631V0H3.28184V8.18083L10.4681 0H13.6018L7.84865 6.66212L14.0272 15.8631H10.9152L5.99013 8.58845L3.28184 11.6708V15.8631H0.707764ZM33.2155 4.12439C35.7679 4.12439 37.8495 5.52913 37.8495 9.40476V9.40579V15.8641H35.4313V9.6096C35.4313 7.41051 34.468 6.23254 32.6776 6.23254C30.7747 6.23254 29.611 7.66031 29.611 9.99423V15.8631H27.1929V0H29.611V5.93782C30.3276 4.9407 31.4241 4.12439 33.2155 4.12439ZM58.5928 4.12439C61.1224 4.12439 63.204 5.52913 63.204 9.40476V15.8631H60.7642V9.60857C60.7642 7.40944 59.8462 6.2315 58.0331 6.2315C56.1085 6.2315 54.9666 7.65928 54.9666 10.0162V15.8631H52.5484V4.26025H54.6527L54.9212 5.77893C55.6377 4.87172 56.7342 4.12439 58.5928 4.12439ZM75.8007 13.733H76.2922V15.8631H75.016C73.4486 15.8631 72.9117 15.1607 72.9117 14.0047C72.1508 15.1827 70.9871 15.9989 69.1286 15.9989C66.6216 15.9989 64.8756 14.7531 64.8756 12.5999C64.8756 10.22 66.5772 8.88321 69.778 8.88321H72.666V8.18083C72.666 6.88896 71.7481 6.09564 70.159 6.09564C68.7269 6.09564 67.7636 6.77502 67.585 7.79514H65.2122C65.458 5.52913 67.3836 4.12439 70.2716 4.12439C73.3165 4.12439 75.0625 5.59812 75.0625 8.33969V12.9856C75.0625 13.5741 75.3082 13.733 75.8007 13.733ZM72.666 11.1043V10.6966H69.6665C68.1663 10.6966 67.3382 11.2631 67.3382 12.4411C67.3382 13.4162 68.1446 14.0956 69.4652 14.0956C71.4796 14.0956 72.6433 12.8947 72.666 11.1043ZM47.8267 4.26128V10.0622V10.0632C47.8267 12.4651 46.6403 13.8699 44.8717 13.8699C43.1029 13.8699 42.2078 12.7139 42.2078 10.4479V4.26128H39.7896V10.7196C39.7896 14.6851 41.8722 16 44.312 16C46.0807 16 47.1328 15.2757 47.8494 14.3914L48.1179 15.8641H50.2449V4.26128H47.8267ZM25.9559 13.733H25.4644C24.9719 13.733 24.7262 13.5751 24.7262 12.9856V8.33969C24.7262 5.59708 22.9802 4.12439 19.9353 4.12439C17.0474 4.12439 15.1217 5.52913 14.876 7.79514H17.2487C17.4273 6.77502 18.3896 6.09564 19.8228 6.09564C21.4118 6.09564 22.3297 6.88896 22.3297 8.18083V8.88321H19.4418C16.241 8.88321 14.5394 10.22 14.5394 12.5999C14.5394 14.7531 16.2854 15.9989 18.7923 15.9989C20.6498 15.9989 21.8145 15.1827 22.5755 14.0047C22.5755 15.1607 23.1123 15.8631 24.6797 15.8631H25.9559V13.733ZM22.3287 10.6966V11.1043C22.307 12.8947 21.1423 14.0956 19.1279 14.0956C17.8073 14.0956 17.0009 13.4152 17.0009 12.4411C17.0009 11.2631 17.829 10.6966 19.3292 10.6966H22.3287Z" fill="#111111"/>
+</svg>

package/src/assets/logo-gray.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" viewBox="0 0 88 88" fill="none">
+  <g clip-path="url(#clip0_4001_21322)">
+    <path d="M59.0563 20.0887H28.9455C27.4794 20.0887 26.29 21.2798 26.29 22.7442V65.2523C26.29 66.7201 27.4811 67.9112 28.9455 67.9112H59.0563C60.5241 67.9112 61.7118 66.7202 61.7118 65.2558V22.7442C61.7118 21.2764 60.5207 20.0887 59.0563 20.0887ZM49.7458 29.2806V60.3419C49.7458 61.6756 48.7558 62.8031 47.4307 62.975L32.8849 64.8656C31.295 65.0719 29.8857 63.8344 29.8857 62.2325V26.0562C29.8857 24.3564 31.4566 23.0948 33.1169 23.4627L47.6627 26.687C48.8778 26.9552 49.7441 28.0328 49.7441 29.2806H49.7475H49.7458Z" fill="#F3F3F3"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4001_21322">
+      <rect width="88" height="88" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/logo-small-hovered.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <rect x="4" y="4" width="40" height="40" rx="8" fill="#F7F7F7"/>
+  <path d="M30.8005 13H17.1995C16.5372 13 16 13.5479 16 14.2216V33.7768C16 34.4521 16.538 35 17.1995 35H30.8005C31.4635 35 32 34.4521 32 33.7784V14.2216C32 13.5464 31.462 13 30.8005 13ZM26.595 17.2286V31.5178C26.595 32.1314 26.1478 32.6501 25.5492 32.7292L18.9789 33.5989C18.2608 33.6938 17.6241 33.1245 17.6241 32.3876V15.7453C17.6241 14.9633 18.3337 14.3829 19.0837 14.5521L25.654 16.0354C26.2029 16.1588 26.5942 16.6545 26.5942 17.2286H26.5958H26.595Z" fill="#111111"/>
+</svg>

package/src/assets/logo-small.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+  <g clip-path="url(#clip0_4002_7556)">
+    <rect width="48" height="48" rx="8" fill="white"/>
+    <path d="M31.6506 12H16.3494C15.6044 12 15 12.5978 15 13.3327V34.6656C15 35.4022 15.6053 36 16.3494 36H31.6506C32.3965 36 33 35.4022 33 34.6673V13.3327C33 12.596 32.3947 12 31.6506 12ZM26.9194 16.613V32.2013C26.9194 32.8706 26.4163 33.4365 25.7429 33.5227L18.3513 34.4715C17.5434 34.575 16.8272 33.954 16.8272 33.1501V14.9948C16.8272 14.1417 17.6255 13.5086 18.4692 13.6932L25.8608 15.3114C26.4783 15.4459 26.9185 15.9868 26.9185 16.613H26.9202H26.9194Z" fill="#111111"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4002_7556">
+      <rect width="48" height="48" fill="white"/>
+    </clipPath>
+  </defs>
+</svg>

package/src/assets/logo.svg

@@ -1,14 +1,11 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="88" height="88" viewBox="0 0 88 88" fill="none">
-    <g clip-path="url(#clip0_186_2030)">
-        <path d="M0 13.75C0 6.15609 6.15609 0 13.75 0H74.25C81.8439 0 88 6.15609 88 13.75V74.25C88 81.8439 81.8439 88 74.25 88H13.75C6.15609 88 0 81.8439 0 74.25V13.75Z"
-              fill="#111111"/>
-        <path fill-rule="evenodd" clip-rule="evenodd"
-              d="M32.2133 28.2489V23.7515L36.1429 21.4987L40.0726 19.25V23.7515V28.2489V32.7504V37.2519L36.1429 39.5006L32.2139 41.7489L32.2144 41.7492L36.144 44.002L40.0736 46.2507V50.7522V55.2496V59.7511V64.2526L36.144 66.5013L32.2144 68.75V64.2526V59.7511V55.2496V50.7522L28.2847 53.0009L24.3593 55.2496V59.7511V64.2526L20.4296 66.5013L16.5 68.75V64.2526V59.7511V55.2496V50.7522L20.4296 48.4994L24.3593 46.2507L20.4296 44.002L16.5 41.7492V37.2518V32.7503L20.4296 30.5016L24.3593 28.2488V32.7503V37.2518L28.2847 39.5005L32.2133 41.7486V37.2519V32.7504V28.2489ZM55.7856 32.7504V28.2489V23.7515L51.8601 21.4987L47.9305 19.25V23.7515V28.2489V32.7504V37.2519L51.8601 39.5006L55.7856 41.7493L51.8601 44.002L47.9305 46.2507V50.7522V55.2496V59.7511V64.2526L51.8601 66.5013L55.7856 68.75V64.2526V59.7511V56.7515V55.2496V50.7522L59.7153 53.0009L63.6449 55.2496V59.7511V64.2526L67.5745 66.5013L71.5 68.75V64.2526V59.7511V55.2496V50.7522L67.5745 48.4994L63.6449 46.2507L67.5745 44.002L71.5 41.7492V37.2518V32.7503L67.5745 30.5016L63.6449 28.2488V32.7503V37.2518L59.7153 39.5005L55.7856 41.7492V37.2519V32.7504ZM40.3712 40.265C41.2017 38.2759 43.5004 37.3314 45.5055 38.1553C47.5106 38.9792 48.4627 41.2595 47.6322 43.2486C46.8017 45.2377 44.503 46.1823 42.4979 45.3584C40.4928 44.5345 39.5407 42.2541 40.3712 40.265Z"
-              fill="white"/>
-    </g>
-    <defs>
-        <clipPath id="clip0_186_2030">
-            <rect width="88" height="88" fill="white"/>
-        </clipPath>
-    </defs>
+<svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 72 72" fill="none">
+  <g clip-path="url(#clip0_4001_25558)">
+    <path d="M68.5322 0H3.46781C1.55259 0 0 1.55259 0 3.46781V68.5322C0 70.4474 1.55259 72 3.46781 72H68.5322C70.4474 72 72 70.4474 72 68.5322V3.46781C72 1.55259 70.4474 0 68.5322 0Z" fill="#111111"/>
+    <path d="M48.3185 16.4362H23.6824C22.4829 16.4362 21.5098 17.4107 21.5098 18.6089V53.3882C21.5098 54.5892 22.4843 55.5637 23.6824 55.5637H48.3185C49.5195 55.5637 50.4912 54.5892 50.4912 53.3911V18.6089C50.4912 17.4079 49.5166 16.4362 48.3185 16.4362ZM40.7009 23.9568V49.3706C40.7009 50.4618 39.8909 51.3843 38.8066 51.525L26.9055 53.0718C25.6048 53.2406 24.4516 52.2281 24.4516 50.9175V21.3187C24.4516 19.9279 25.737 18.8957 27.0954 19.1967L38.9965 21.8348C39.9907 22.0542 40.6995 22.9359 40.6995 23.9568H40.7023H40.7009Z" fill="white"/>
+  </g>
+  <defs>
+    <clipPath id="clip0_4001_25558">
+      <rect width="72" height="72" fill="white"/>
+    </clipPath>
+  </defs>
 </svg>

package/src/assets/slider-thumb.svg

@@ -0,0 +1,3 @@
+<svg width="2" height="16" viewBox="0 0 2 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="2" height="16" rx="1" fill="#666666"/>
+</svg>

package/src/assets/vector.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2" height="14" viewBox="0 0 2 14" fill="none">
+  <path d="M1.29199 1V13" stroke="#B7B7B7" stroke-linecap="round"/>
+</svg>

package/src/components/KLogo/KLogo.stories.tsx

@@ -11,26 +11,45 @@ export default {
 
 const Template: StoryFn<typeof KLogo> = (args) => <KLogo {...args} />;
 
+export const KLogoText = Template.bind({});
+KLogoText.args = {
+  logoType: "hover-text",
+  width: 77,
+  height: 77
+};
+
+export const KLogoHover = Template.bind({});
+KLogoHover.args = {
+  logoType: "hover"
+};
+
 export const KLogoPrimary = Template.bind({});
 KLogoPrimary.args = {
-  width: 88,
-  height: 88,
-  borderRadius: 10,
+  logoType: "black"
+
 };
+export const KLogoWhite = Template.bind({});
+KLogoWhite.args = {
+  logoType: "white"
 
-export const KLogoPrimaryText = Template.bind({});
-KLogoPrimaryText.args = {
-  width: 88,
-  height: 88,
-  borderRadius: 10,
-  primaryText: "Kahuna"
 };
+export const KLogoWhiteText = Template.bind({});
+KLogoWhiteText.args = {
+  logoType: "white-text"
 
-export const KLogoAllText = Template.bind({});
-KLogoAllText.args = {
-  width: 88,
-  height: 88,
-  borderRadius: 10,
-  primaryText: "Kahuna",
-  secondaryText: "for artists"
 };
+export const KLogoGray = Template.bind({});
+KLogoGray.args = {
+  logoType: "gray"
+
+};
+export const KLogoGrayText = Template.bind({});
+KLogoGrayText.args = {
+  logoType: "gray-text"
+
+};
+export const KLogoBlackText = Template.bind({});
+KLogoBlackText.args = {
+  logoType: "black-text"
+
+};

package/src/components/KLogo/KLogo.tsx

@@ -1,31 +1,129 @@
-import React from "react";
+import React, { useState } from "react"
 import "../../main.css"
-// @ts-ignore
+//@ts-ignore
 import Logo from "../../assets/logo.svg"
-import KTitleSpan from "../KTitleSpan";
-import KSpan from "../KSpan";
+//@ts-ignore
+import KahunaIcon from "../../assets/kahuna-text.svg"
+//@ts-ignore
+import VectorIcon from "../../assets/vector.svg"
+//@ts-ignore
+import LogoWhite from "../../assets/logo-small.svg"
+//@ts-ignore
+import LogoWhiteHovered from "../../assets/logo-small-hovered.svg"
+//@ts-ignore
+import LogoGray from "../../assets/logo-gray.svg"
+import KTitleSpan from "../KTitleSpan"
+import KSpan from "../KSpan"
 
 export interface KLogoProps {
   width?: number
   height?: number
   borderRadius?: number
-  primaryText?: string
-  secondaryText?: string
+  logoType: string
 }
 
 const KLogo: React.FC<KLogoProps> = (props) => {
-  const width = props.width || 88
-  const height = props.height || 88
-  const borderRadius = props.borderRadius || 10
+  const [onHover, setOnHover] = useState(false)
+  const logoType = props.logoType || "black"
+  const width = props.width || "48px"
+  const height = props.height || "48px"
+  const borderRadius = props.borderRadius || 0
+
+  const renderText = () => {
+    return (
+      <div
+        className="flex flex-row items-center gap-2.5"
+        style={{
+          borderRadius: !props.borderRadius ? "" : props.borderRadius
+        }}
+      >
+        <img src={KahunaIcon} alt="kahuna-icon" />
+        <img src={VectorIcon} alt="vector" />
+        <span>
+          <KSpan text="for artists" color="#000" lineHeight="16px" />
+        </span>
+      </div>
+    )
+  }
+
+  const renderLogo = () => {
+    return (
+      <div
+        style={{
+          width,
+          height,
+          borderRadius
+        }}
+      >
+        <img
+          src={logoType === "black" ? Logo : logoType === "gray" ? LogoGray : LogoWhite}
+          alt="Logo"
+          style={{
+            width,
+            height,
+            borderRadius
+          }}
+        />
+      </div>
+    )
+  }
+
+  const renderHoveredLogo = () => {
+    return (
+      <div className="flex flex-row gap-1.5"
+        style={{
+          borderRadius
+        }}
+        onMouseEnter={() => setOnHover(true)}
+        onMouseLeave={() => setOnHover(false)}
+      >
+        <img
+          style={{
+            width,
+            height,
+            borderRadius
+          }}
+          src={!onHover ? LogoWhite : LogoWhiteHovered}
+          alt="logo-icon"
+        />
+        {logoType === "hover-text" && <div className="flex items-center"><img src={KahunaIcon} alt="kahuna-icon"/></div>}
+      </div>
+    )
+  }
+
+  const renderLogoAndText = () => {
+    return (
+      <div className="flex flex-row gap-1.5">
+        <div
+          style={{
+            width,
+            height,
+            borderRadius
+          }}
+        >
+          <img
+            style={{
+              width,
+              height,
+              borderRadius
+            }}
+            src={logoType === "black-text" ? Logo : logoType === "gray-text" ? LogoGray : LogoWhite}
+            alt="logo-icon"
+          />
+        </div>
+        <img src={KahunaIcon} alt="kahuna-icon" />
+      </div>
+    )
+  }
+
   return (
     <div className={"flex items-center"}>
-      <img src={Logo} alt={"kahuna-logo"} style={{borderRadius, width, height}}/>
-      {props.primaryText && <div className={"ml-2 mr-2"}><KTitleSpan fontSize={20} text={props.primaryText}/></div>}
-      {props.secondaryText && <div className={"pl-2"} style={{borderLeft: "1px solid #E7E7E7"}}>
-        <KSpan fontSize={14} text={props.secondaryText}/>
-      </div>}
+      {(logoType === "black" || logoType === "gray" || logoType === "white") && renderLogo()}
+      {(logoType === "hover" || logoType === "hover-text") && renderHoveredLogo()}
+      {(logoType === "black-text" || logoType === "gray-text" || logoType === "white-text") && renderLogoAndText()}
+      {logoType === "text" && renderText()}
     </div>
-  );
-};
+  )
+}
 
-export default KLogo;
+export default KLogo

package/src/components/KSlider/KSlider.stories.tsx

@@ -14,5 +14,6 @@ KSliderPrimary.args = {
   onChange: (option: SliderOption) => {
     // Do Nothing
   },
-  width: "200px"
+  width: "200px",
+  value: 3
 };

package/src/components/KSliderLabel/KSliderLabel.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta, StoryFn } from "@storybook/react"
+import KSliderLabel, { SliderLabelOption, SliderLabelProps } from "./KSliderLabel"
+import { useState } from "react"
+
+export default {
+  title: "ReactComponentLibrary/KSliderLabel",
+  component: KSliderLabel,
+  parameters: {
+    layout: "centered"
+  }
+} as Meta<typeof KSliderLabel>
+
+const KSliderLabelWrapper: React.FC<SliderLabelProps> = (args) => {
+  const [lengthOfContract, setLengthOfContract] = useState<number>(args.value || 1)
+  const lengthOfContractOptions: SliderLabelOption[] = [
+    { value: 1, label: "6 months" },
+    { value: 2, label: "1 year" },
+    { value: 3, label: "2 years" },
+    { value: 4, label: "3 years" },
+    { value: 5, label: "5 years" }
+  ]
+
+  return (
+    <div className="w-[616px]">
+      <KSliderLabel
+        options={lengthOfContractOptions}
+        value={lengthOfContract}
+        onChange={(sliderOption: SliderLabelOption) => {
+          console.log("DENEME")
+          setLengthOfContract(sliderOption.value)
+        }}
+        titleText={"Contract Duration"}
+        valueText={lengthOfContractOptions.find((option) => option.value === lengthOfContract)?.label || ""}
+      />
+    </div>
+  )
+}
+
+const Template: StoryFn<typeof KSliderLabelWrapper> = (args) => <KSliderLabelWrapper {...args} />
+
+export const KSliderLabelPrimary = Template.bind({})
+KSliderLabelPrimary.args = {
+  value: 1,
+  options: [
+    { value: 1, label: "6 months" },
+    { value: 2, label: "1 year" },
+    { value: 3, label: "2 years" },
+    { value: 4, label: "3 years" },
+    { value: 5, label: "5 years" }
+  ],
+  titleText: "Contract Duration",
+  onChange: (option: SliderLabelOption) => {
+    // Do 
+    console.log("0")
+  },
+  fontSize: 10
+}

package/src/components/KSliderLabel/KSliderLabel.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useRef, useState } from "react"
+import "../../main.css"
+//@ts-ignore
+import ThumbIcon from "../../assets/slider-thumb.svg"
+import KSpan from "../KSpan"
+
+export interface SliderLabelOption {
+  label: string
+  value: number
+}
+
+export interface SliderLabelProps {
+  options: SliderLabelOption[]
+  onChange: (option: SliderLabelOption) => void
+  value?: number
+  disabled?: boolean
+  width?: string
+  titleText?: string
+  valueText?: string,
+  fontSize?: number,
+  color?: string
+}
+
+const KSliderLabel: React.FC<SliderLabelProps> = (props) => {
+  const disabled = props.disabled || false
+  const width = props.width || "100%"
+  const height = "48px"
+  const fontSize = props.fontSize || 14
+  const color = props.color || "#000"
+
+  const [titleFits, setTitleFits] = useState<boolean>(false)
+  const [valueFits, setValueFits] = useState<boolean>(false)
+
+  const titleTextRef = useRef<HTMLDivElement>(null)
+  const valueTextRef = useRef<HTMLDivElement>(null)
+  const progressRef = useRef<HTMLDivElement>(null)
+  const mainDivRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+
+    if (!titleTextRef.current || !progressRef.current || !valueTextRef.current || !mainDivRef.current) return
+
+    const titleWidth = titleTextRef.current.getBoundingClientRect().width
+    const progressWidth = progressRef.current.getBoundingClientRect().width
+
+    setTitleFits(titleWidth < progressWidth - 30)
+
+    const valueWidth = valueTextRef.current.getBoundingClientRect().width
+    const restWidth = mainDivRef.current.getBoundingClientRect().width - progressWidth
+
+    setValueFits(valueWidth < restWidth)
+
+  }, [props.value])
+
+  const calculateSpanWidth = (): string => {
+    if (!props.value) return "32px"
+    const min = props.options[0].value
+    const max = props.options[props.options.length - 1].value
+    const spanWidth = `calc((((${props.value! - min}) / (${max - min})) * (100% - 32px)) + 32px)`
+    return spanWidth
+  }
+
+  return (
+    <div className="flex flex-col gap-1 w-full">
+      <div className={"flex flex-row items-center justify-between z-[200]"}>
+        <div
+          ref={titleTextRef}
+          className="relative pl-4"
+          style={{
+            top: titleFits ? "40px" : "0px"
+          }}
+        >
+          <KSpan
+            text={props.titleText || ""}
+            color={color}
+            fontSize={fontSize}
+            lineHeight="20px"
+            letterSpacing="-0.084px"
+            fontWeight={500}
+          />
+        </div>
+        <div
+          ref={valueTextRef}
+          className="relative pr-4"
+          style={{
+            top: valueFits ? "40px" : "0px"
+          }}
+        >
+          <KSpan
+            text={props.valueText || ""}
+            color={color}
+            fontSize={fontSize}
+            lineHeight="20px"
+            letterSpacing="-0.084px"
+            fontWeight={500}
+          />
+        </div>
+      </div>
+
+      <div ref={mainDivRef} className="inline-block bg-[#f7f7f7] rounded-[8px] relative z-0" style={{ width, height }}>
+        <span className="w-full flex justify-between absolute top-0  z-0 items-center" style={{ height }} />
+        <span
+          ref={progressRef}
+          className="block items-center z-50 top-0 relative"
+          style={{
+            height,
+            width: calculateSpanWidth(),
+            borderRadius: "8px",
+            backgroundColor: "rgba(102, 102, 102, 0.05)"
+          }}
+        >
+          <span className="flex justify-center h-4 w-4 absolute right-2 top-4 z-[1000]">
+            <img src={ThumbIcon} alt="thumb" className="" />
+          </span>
+        </span>
+        <input
+          disabled={disabled}
+          style={{ width, height }}
+          className={"k-slider-label-input absolute top-0 !z-50"}
+          onChange={(e) => {
+            const option = props.options.find((option) => option.value.toString() === e.target.value)
+            if (option) return props.onChange(option)
+          }}
+          value={props.value}
+          type="range"
+          min={props.options[0].value}
+          max={props.options[props.options.length - 1].value}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default KSliderLabel

package/src/components/KSliderLabel/index.ts

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

package/src/components/KTitleSpan/KTitleSpan.stories.tsx

@@ -16,8 +16,8 @@ KTitleSpanPrimary.args = {
   text: "Hello World",
   fontSize: 48,
   color: "#111",
-  fontWeight: 700,
   lineHeight: "56px",
   fontStyle: "normal",
-  letterSpacing: "-0.48px"
+  letterSpacing: "-0.48px",
+  bold: false
 };

package/src/components/KTitleSpan/KTitleSpan.tsx

@@ -8,19 +8,23 @@ export interface KTitleSpanProps {
   fontWeight?: number
   lineHeight?: string
   fontStyle?: string
-  letterSpacing?: string
+  letterSpacing?: string,
+  bold?: boolean
 }
 
 const KTitleSpan: React.FC<KTitleSpanProps> = (props) => {
   const fontSize = props.fontSize || 48
   const color = props.color || "#111111"
-  const fontWeight = props.fontWeight || 700
   const lineHeight = props.lineHeight || "56px"
   const fontStyle = props.fontStyle || "normal"
   const letterSpacing = props.letterSpacing || "-0.48px"
+  const bold = props.bold || false
+  const titleClassName = bold ? "k-title-span-bold" : "k-title-span"
+  const fontWeight = props.fontWeight ? props.fontWeight : (bold ? 700 : 500)
 
+  
   return (
-    <span className={"k-title-span"} style={{fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing}}>
+    <span className={`${titleClassName} flex items-center`} style={{fontSize, color, fontWeight, lineHeight, fontStyle, letterSpacing}}>
       {props.text}
     </span>
   );

package/src/index.ts

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

package/src/main.css

@@ -10,14 +10,21 @@
 
 @font-face {
     font-family: "Aeonik Pro";
-    src: local("Aeonik Pro"), url("./assets/fonts/AeonikPro-Bold/AeonikPro-Bold.otf") format("truetype");
+    src: local("Aeonik Pro"), url("./assets/fonts/AeonikPro/AeonikPro-Medium.otf") format("truetype");
+}
+@font-face {
+    font-family: "Aeonik Pro Bold";
+    src: local("Aeonik Pro Bold"), url("./assets/fonts/AeonikPro/AeonikPro-Bold.otf") format("truetype");
 }
-
 
 .k-title-span {
     font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
     font-family: "Aeonik Pro";
 }
+.k-title-span-bold {
+    font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
+    font-family: "Aeonik Pro Bold";
+}
 
 .k-span {
     font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
@@ -197,4 +204,39 @@
     transform-origin: center;
     transform: translateX(-50%) rotateZ(45deg);
     z-index: -100;
-}
+}
+.k-slider-label-input {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    outline: none;
+    border-radius: 16px;
+    background: transparent;
+    overflow: visible;  
+}
+.k-slider-label-input:active {
+   cursor: default !important;   
+}
+.k-slider-label-input::-webkit-slider-runnable-track {
+    border-radius: 20px;
+    height: 48px;
+    z-index: 0;
+}
+
+.k-slider-label-input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: -4px;
+    /* Align the thumb vertically with the track */
+    /* Width of the thumb */
+    background: url('data:image/svg+xml,%3Csvg%20width%3D%222%22%20height%3D%2216%22%20viewBox%3D%220%200%202%2016%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20width%3D%222%22%20height%3D%2216%22%20rx%3D%221%22%20fill%3D%22%23666666%22%2F%3E%3C%2Fsvg%3E') no-repeat;
+    /* Height of the thumb */
+    background-size: contain;
+    margin-top: 16px ;
+    background-position: center;
+    position: relative;
+    opacity: 0;
+    cursor: grab;
+}
+.k-slider-label-input::-webkit-slider-thumb:active {
+    cursor: grabbing;
+}