kahuna-base-react-components 0.2.5 → 0.2.6

package/dist/types.d.ts

@@ -78,6 +78,8 @@ interface KInputProps {
     gap?: string;
     border?: string;
     boxShadow?: string;
+    fontSize?: string;
+    iconSize?: string;
 }
 declare const KInput: React.FC<KInputProps>;
 
@@ -109,7 +111,7 @@ interface KDropdownProps {
     menuBackground?: string;
     padding?: string;
     gap?: string;
-    showChosenOptionIcon?: boolean;
+    hideChosenOptionIcon?: boolean;
 }
 declare const KDropdown: React.FC<KDropdownProps>;
 

package/package.json

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

package/src/components/KDropdown/KDropdown.tsx

@@ -34,7 +34,7 @@ export interface KDropdownProps {
   menuBackground?: string
   padding?:string
   gap?: string
-  showChosenOptionIcon?: boolean
+  hideChosenOptionIcon?: boolean
 }
 
 const KDropdown: React.FC<KDropdownProps> = (props) => {
@@ -58,7 +58,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
   const menuBackground = props.menuBackground || "rgb(249, 249, 249)";
   const padding = props.padding || "8px"
   const gap = props.gap || "4px"
-  const showIcon = props.showChosenOptionIcon || true
+  const hideIcon = props.hideChosenOptionIcon || false
 
   const getOptionLabels = (option: KSelectOption) => {
     return (
@@ -151,7 +151,7 @@ const KDropdown: React.FC<KDropdownProps> = (props) => {
           DropdownIndicator: () => null,
           SingleValue: ({ data, ...props }) => (
             <div className="flex" style={{ position: "absolute" }}>
-              {data.icon && showIcon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
+              {data.icon && !hideIcon && <img src={data.icon} className="mr-2" width={20} alt={"data-icon"} />}
               <KSpan text={data.label} color="#111" />
             </div>
           )

package/src/components/KInput/KInput.tsx

@@ -24,6 +24,8 @@ export interface KInputProps {
   gap?: string
   border?: string
   boxShadow?: string
+  fontSize?: string
+  iconSize?: string
 }
 
 const KInput: React.FC<KInputProps> = (props) => {
@@ -39,7 +41,7 @@ const KInput: React.FC<KInputProps> = (props) => {
   }, [props.value])
 
   const width = props.width || "100%"
-  const height = props.height || 24
+  const height = props.height || 20
   const borderRadius = props.borderRadius || 10
   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"
@@ -49,6 +51,8 @@ const KInput: React.FC<KInputProps> = (props) => {
   const padding = props.padding || "8px"
   const gap = props.gap || "12px"
   const border = props.border || "none"
+  const fontSize = props.fontSize || "14px"
+  const iconSize = props.iconSize || "20px" 
 
   return (
     <div
@@ -60,6 +64,10 @@ const KInput: React.FC<KInputProps> = (props) => {
       {props.leftIcon && (
         <img
           src={props.leftIcon}
+          style={{
+            width: iconSize,
+            height: iconSize
+          }}
           alt={"l-icon"}
           className={props.leftIconClick && "cursor-pointer"}
           onClick={() => {
@@ -71,7 +79,13 @@ const KInput: React.FC<KInputProps> = (props) => {
       <input
         type={type}
         className={"k-input"}
-        style={{ background: hover ? hoverBackground : background, width, height, accentColor }}
+        style={{
+          background: hover ? hoverBackground : background,
+          width,
+          height,
+          accentColor,
+          fontSize,
+        }}
         value={props.value}
         placeholder={props.placeholder || ""}
         disabled={disabled}
@@ -86,6 +100,10 @@ const KInput: React.FC<KInputProps> = (props) => {
       {props.rightIcon && (
         <img
           src={props.rightIcon}
+          style={{
+            width: iconSize,
+            height: iconSize
+          }}
           alt={"r-icon"}
           className={props.rightIconClick && "cursor-pointer"}
           onClick={() => {

package/src/main.css

@@ -44,7 +44,6 @@
     font-feature-settings: 'ss11' on, 'cv09' on, 'liga' off, 'calt' off;
     /* Paragraph/Small */
     font-family: Inter;
-    font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 20px; /* 142.857% */