kahuna-base-react-components 0.2.2 → 0.2.4

package/dist/types.d.ts

@@ -16,6 +16,7 @@ interface KButtonProps {
     padding?: string;
     shadowDisabled?: boolean;
     hoverBackground?: string;
+    fontWeight?: number;
 }
 declare const KButton: React.FC<KButtonProps>;
 
@@ -30,6 +31,7 @@ interface KSpanProps {
     hoverText?: string;
     hoverTextColor?: string;
     hoverStyle?: CSSProperties;
+    textDecoration?: string;
 }
 declare const KSpan: React.FC<KSpanProps>;
 
@@ -72,6 +74,10 @@ interface KInputProps {
     rightIconClick?: () => void;
     accentColor?: string;
     hoverBackground?: string;
+    padding?: string;
+    gap?: string;
+    border?: string;
+    boxShadow?: string;
 }
 declare const KInput: React.FC<KInputProps>;
 
@@ -101,6 +107,9 @@ interface KDropdownProps {
     textColor?: string;
     shadowDisabled?: boolean;
     menuBackground?: string;
+    padding?: string;
+    gap?: string;
+    showChosenOptionIcon?: boolean;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 
@@ -114,7 +123,6 @@ interface KSliderProps {
     value?: number;
     disabled?: boolean;
     width?: string;
-    height?: string;
 }
 declare const KSlider: React.FC<KSliderProps>;
 

package/package.json

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

package/rollup.config.js

@@ -7,7 +7,6 @@ import terser from "@rollup/plugin-terser";
 import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import postcss from "rollup-plugin-postcss";
 import image from '@rollup/plugin-image';
-import copy from 'rollup-plugin-copy';
 
 
 const packageJson = require("./package.json");
@@ -36,12 +35,7 @@ export default [
       terser(),
       postcss({
         extensions: [".css"]
-      }),
-      copy({
-        targets: [
-          { src: 'src/assets/fonts/*', dest: 'dist/fonts' }, // Copy fonts from src/assets/fonts/ to dist/fonts/
-        ],
-      }),
+      })
     ],
     external: ["react", "react-dom"],
   },

package/src/assets/progress.svg

@@ -0,0 +1,37 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Progress">
+<g id="Rectangle 1" filter="url(#filter0_di_252_33054)">
+<rect x="6" y="6" width="16" height="16" rx="8" fill="white"/>
+<rect x="6.5" y="6.5" width="15" height="15" rx="7.5" stroke="white"/>
+</g>
+<g id="Dot" filter="url(#filter1_d_252_33054)">
+<path 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="#B5B5B5"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_di_252_33054" x="0" y="0" width="28" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix 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"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix 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"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_252_33054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_252_33054" result="shape"/>
+<feColorMatrix 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"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix 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"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_252_33054"/>
+</filter>
+<filter id="filter1_d_252_33054" x="7" y="9" width="14" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix 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"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feColorMatrix 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"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_252_33054"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_252_33054" result="shape"/>
+</filter>
+</defs>
+</svg>

package/src/assets/slider-step.svg

@@ -0,0 +1,3 @@
+<svg width="5" height="4" viewBox="0 0 5 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle id="Ellipse 4" cx="2.59961" cy="2" r="2" fill="#B5B5B5"/>
+</svg>

package/src/components/KButton/KButton.tsx

@@ -17,6 +17,7 @@ export interface KButtonProps {
   padding?: string
   shadowDisabled?: boolean
   hoverBackground?: string
+  fontWeight?: number
 }
 
 const KButton: React.FC<KButtonProps> = (props) => {
@@ -31,7 +32,8 @@ const KButton: React.FC<KButtonProps> = (props) => {
   const padding = props.padding || "12px 16px"
   const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
   const hoverBackground = props.hoverBackground || background
-
+  const fontWeight = props.fontWeight || 500
+  
   return (
     <button
       onMouseEnter={() => setHover(true)}
@@ -43,7 +45,7 @@ const KButton: React.FC<KButtonProps> = (props) => {
     >
       <div className={"flex"}>
         {props.leftIcon && <img src={props.leftIcon} alt={"button-left-icon"} />}
-        {props.text && <KSpan text={props.text} color={textColor} />}
+        {props.text && <KSpan text={props.text} color={textColor} fontWeight={fontWeight} />}
         {props.icon && <img src={props.icon} alt={"button-icon"} />}
         {props.rightIcon && <img src={props.rightIcon} alt={"button-right-icon"} />}
       </div>

package/src/components/KDropdown/KDropdown.tsx

@@ -32,6 +32,9 @@ export interface KDropdownProps {
   textColor?: string
   shadowDisabled?: boolean
   menuBackground?: string
+  padding?:string
+  gap?: string
+  showChosenOptionIcon?: boolean
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
@@ -53,6 +56,9 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   const textColor = props.textColor || "#111"
   const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
   const menuBackground = props.menuBackground || "rgb(249, 249, 249)";
+  const padding = props.padding || "8px"
+  const gap = props.gap || "4px"
+  const showIcon = props.showChosenOptionIcon || true
 
   const getOptionLabels = (option: KSelectOption) => {
     return (
@@ -70,8 +76,11 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   }
 
   return (
-    <div className={"k-dropdown-container"} style={{ background, borderRadius, width, height, boxShadow }}>
-      {props.leftIcon && <img src={props.leftIcon} width={24} className={"ml-2"} alt={"l-icon"} />}
+    <div
+      className={"k-dropdown-container"}
+      style={{ background, borderRadius, width, height, boxShadow, padding, gap }}
+    >
+      {props.leftIcon && <img src={props.leftIcon} width={20} alt={"l-icon"} />}
 
       <Select
         defaultValue={props.defaultValue}
@@ -84,16 +93,20 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
           control: (baseStyles, state) => ({
             ...baseStyles,
             background: "transparent !important",
-            border: 0,
+            padding: "0px !important",
             boxShadow: "none",
-            fontSize: 16,
-            cursor: "pointer"
+            fontSize: 14,
+            lineHeight: "20px",
+            cursor: "pointer",
+            minHeight: "20px",
+            border: "none"
           }),
           menu: (base) => ({
             ...base,
             borderRadius: 10,
             background: menuBackground,
-            boxShadow: "0px 3px 3px 0px rgba(17, 17, 17, 0.03), 0px 1px 1px 0px rgba(17, 17, 17, 0.04), 0px 0px 0px 1px rgba(17, 17, 17, 0.04)",
+            boxShadow:
+              "0px 3px 3px 0px rgba(17, 17, 17, 0.03), 0px 1px 1px 0px rgba(17, 17, 17, 0.04), 0px 0px 0px 1px rgba(17, 17, 17, 0.04)",
             backdropFilter: "blur(2px)",
             paddingRight: 3,
             paddingLeft: 3
@@ -116,14 +129,29 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
             marginTop: 4,
             borderRadius: 10,
             color: "#111"
+          }),
+          valueContainer: (base) => ({
+            ...base,
+            padding: 0
+          }),
+
+          input: (base) => ({
+            ...base,
+            padding: 0,
+            margin: 0,
+            height: "20px"
+          }),
+          placeholder: (base) => ({
+            ...base,
+            margin: 0
           })
         }}
         components={{
           IndicatorSeparator: () => null,
           DropdownIndicator: () => null,
           SingleValue: ({ data, ...props }) => (
-            <div className="flex ml-3" style={{ position: "absolute" }}>
-              {data.icon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
+            <div className="flex" style={{ position: "absolute" }}>
+              {data.icon && showIcon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
               <KSpan text={data.label} color="#111" />
             </div>
           )
@@ -139,7 +167,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
         getOptionLabel={(option: KSelectOption) => getOptionLabels(option)}
       />
 
-      {props.rightIcon && <img src={props.rightIcon} width={24} className={"mr-2"} alt={"r-icon"} />}
+      {props.rightIcon && <img src={props.rightIcon} width={20} alt={"r-icon"} />}
     </div>
   )
 }

package/src/components/KInput/KInput.tsx

@@ -20,6 +20,10 @@ export interface KInputProps {
   rightIconClick?: () => void
   accentColor?: string
   hoverBackground?: string
+  padding?: string 
+  gap?: string
+  border?: string
+  boxShadow?: string
 }
 
 const KInput: React.FC<KInputProps> = (props) => {
@@ -37,18 +41,21 @@ const KInput: React.FC<KInputProps> = (props) => {
   const width = props.width || "100%"
   const height = props.height || 24
   const borderRadius = props.borderRadius || 10
-  const boxShadow = props.shadowDisabled ? "" : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
+  const boxShadow = props.shadowDisabled ? "" : props.boxShadow ? props.boxShadow : "0 0 0 1px rgba(17, 17, 17, 0.04), 0 1px 1px 0 rgba(17, 17, 17, 0.04)"
   const type = props.type || "text"
   const accentColor = props.accentColor || ""
   const disabled = props.disabled || false
   const hoverBackground = props.hoverBackground || background
+  const padding = props.padding || "12px 12px 12px 14px"
+  const gap = props.gap || "8px"
+  const border = props.border || "none"
 
   return (
     <div
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
       className={"k-input-container"}
-      style={{ background: hover ? hoverBackground : background, borderRadius, boxShadow }}
+      style={{ background: hover ? hoverBackground : background, borderRadius, boxShadow, padding, gap, border }}
     >
       {props.leftIcon && (
         <img

package/src/components/KSlider/KSlider.tsx

@@ -1,5 +1,7 @@
-import React from "react";
+import React from "react"
 import "../../main.css"
+// @ts-ignore
+import StepIcon from "../../assets/slider-step.svg"
 
 export interface SliderOption {
   label: string
@@ -12,29 +14,54 @@ export interface KSliderProps {
   value?: number
   disabled?: boolean
   width?: string
-  height?: string
 }
 
 const KSlider: React.FC<KSliderProps> = (props) => {
   const disabled = props.disabled || false
   const width = props.width || "100%"
-  const height = props.height || "14px"
+  const height = "8px"
+  
+  const calculateSpanWidth = ():number => {
+    const min = props.options[0].value
+    const max = props.options[props.options.length - 1].value
+    const spanWidth = (props.value! - min) / (max - min) * 100 
+    if (spanWidth >= 100 ) {
+      return 99
+    }
+    return spanWidth
+  }
 
   return (
-    <input
-      disabled={disabled}
-      style={{width, height}}
-      className={"k-slider-input"}
-      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 className="inline-block bg-[#E7E7E7] rounded-full relative z-0" style={{ width, height }}>
+      <span className="w-full flex justify-between absolute top-0  z-0 items-center px-0.5" style={{ height }}>
+        {props.options.map((option, index) => {
+          return <img key={`step-icon-${index}`} src={StepIcon} className="w-1 h-1 !z-0 " />
+        })}
+      </span>
+      <span
+        className="block z-50 absolute top-0"
+        style={{
+          height,
+          width: `${calculateSpanWidth()}%`,
+          borderRadius: "10px",
+          backgroundColor: "black"
+        }}
+      />
+      <input
+        disabled={disabled}
+        style={{ width, height }}
+        className={"k-slider-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>
+  )
 };
 
 export default KSlider;

package/src/components/KSpan/KSpan.tsx

@@ -11,7 +11,8 @@ export interface KSpanProps {
   letterSpacing?: string
   hoverText?: string
   hoverTextColor?: string
-  hoverStyle?: CSSProperties
+  hoverStyle?: CSSProperties,
+  textDecoration?: string
 }
 
 const KSpan: React.FC<KSpanProps> = (props) => {

package/src/main.css

@@ -35,9 +35,7 @@
 
 .k-input-container {
     display: flex;
-    padding: 8px;
     align-items: center;
-    gap: 12px;
     align-self: stretch;
 }
 
@@ -46,7 +44,7 @@
     font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
     /* Paragraph/Small */
     font-family: Inter;
-    font-size: 16px;
+    font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px; /* 142.857% */
@@ -72,6 +70,7 @@
 
 .k-dropdown-container {
     display: flex;
+    align-items: center;
 }
 
 .k-dropdown {
@@ -90,24 +89,23 @@
     cursor: pointer;
     outline: none;
     border-radius: 16px;
-    overflow: hidden;
+    background: transparent;
+    overflow: visible;
 }
 
 .k-slider-input::-webkit-slider-runnable-track {
-    height: 14px;
-    background: #E7E7E7;
+    height: 8px;
     border-radius: 20px;
 }
 
 .k-slider-input::-webkit-slider-thumb {
     -webkit-appearance: none;
     cursor: pointer;
-    margin-top: -2px; /* Align the thumb vertically with the track */
-    width: 18px; /* Width of the thumb */
-    height: 18px; /* 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;
-    box-shadow: -407px 0 0 400px #111111, 0 0 1px 1px rgba(228, 229, 231, 1), 0 1px 3px 0 rgba(228, 229, 231, 0.40);
-    background-color: white !important;
-    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none"><g id="dots, grid, slide"><path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M4 5C4.55228 5 5 4.55228 5 4C5 3.44772 4.55228 3 4 3C3.44772 3 3 3.44772 3 4C3 4.55228 3.44772 5 4 5ZM4 9C4.55228 9 5 8.55229 5 8C5 7.44772 4.55228 7 4 7C3.44772 7 3 7.44772 3 8C3 8.55229 3.44772 9 4 9ZM9 8C9 8.55229 8.55229 9 8 9C7.44772 9 7 8.55229 7 8C7 7.44772 7.44772 7 8 7C8.55229 7 9 7.44772 9 8ZM8 5C8.55229 5 9 4.55228 9 4C9 3.44772 8.55229 3 8 3C7.44772 3 7 3.44772 7 4C7 4.55228 7.44772 5 8 5Z" fill="%23111111"/></g></svg>');
-    background-size: cover;
+    background: url('./assets/progress.svg');
+    background-size: auto;
+    background-position: center;
 }