From 3bc02538cf1f7283abff8909d48c941e989488ab Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Mon, 16 Dec 2024 09:51:03 -0500
Subject: [PATCH 1/2] feat: input icons

---
 package.json                           |  2 +-
 src/components/Input/Input.stories.tsx | 13 +++++++++++++
 src/components/Input/Input.tsx         | 26 +++++++++++++++++++-------
 3 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5695195..0e93327 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@inkonchain/ink-kit",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
diff --git a/src/components/Input/Input.stories.tsx b/src/components/Input/Input.stories.tsx
index 7a52eff..cc4e5f8 100644
--- a/src/components/Input/Input.stories.tsx
+++ b/src/components/Input/Input.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { Input, type InputProps } from "./index";
+import { InkIcon } from "../..";
 
 const meta: Meta<InputProps> = {
   title: "Components/Input",
@@ -17,3 +18,15 @@ type Story = StoryObj<typeof meta>;
 export const Simple: Story = {
   args: {},
 };
+
+export const WithIconLeft: Story = {
+  args: {
+    iconLeft: <InkIcon.Search />,
+  },
+};
+
+export const WithIconRight: Story = {
+  args: {
+    iconRight: <InkIcon.Deposit />,
+  },
+};
diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index 9212424..d0927de 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -4,20 +4,32 @@ import { classNames } from "../../util/classes";
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {
   className?: string;
+  iconLeft?: React.ReactNode;
+  iconRight?: React.ReactNode;
 }
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, iconLeft, iconRight, ...props }, ref) => {
+    const iconClasses =
+      "ink:shrink-0 ink:size-3 ink:-my-1 ink:flex ink:items-center ink:justify-center ink:group-focus-within:text-text-on-secondary ink:transition-colors ink:transition-default-animation";
     return (
-      <input
-        ref={ref}
+      <label
         className={classNames(
-          "ink:w-full ink:font-default ink:rounded-xs ink:bg-background-container ink:p-2 ink:h-2 ink:text-body-2-regular ink:text-text-default",
-          "focus:ink:outline focus:ink:outline-1 ink:outline-text-on-secondary",
+          "ink:w-full ink:flex ink:items-center ink:justify-center ink:gap-1 ink:box-border ink:group",
+          "ink:p-2 ink:h-6",
+          "ink:font-default ink:rounded-xs ink:bg-background-container ink:text-body-2-regular ink:text-text-default",
+          "ink:border-1 ink:border-transparent ink:focus-within:border-text-on-secondary ink:transition-colors ink:transition-default-animation",
           className
         )}
-        {...props}
-      />
+      >
+        {iconLeft && <div className={iconClasses}>{iconLeft}</div>}
+        <input
+          className="ink:w-full ink:outline-none ink:box-border ink:-my-1 ink:placeholder:text-body-2-regular ink:placeholder:text-text-muted"
+          ref={ref}
+          {...props}
+        />
+        {iconRight && <div className={iconClasses}>{iconRight}</div>}
+      </label>
     );
   }
 );

From 0280b25f929787e5c5e2305bc90ffb418a223903 Mon Sep 17 00:00:00 2001
From: fran-ink <171171801+fran-ink@users.noreply.github.com>
Date: Mon, 16 Dec 2024 11:16:54 -0500
Subject: [PATCH 2/2] fix: missing color

---
 src/components/Input/Input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
index d0927de..6c5227d 100644
--- a/src/components/Input/Input.tsx
+++ b/src/components/Input/Input.tsx
@@ -11,7 +11,7 @@ export interface InputProps
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   ({ className, iconLeft, iconRight, ...props }, ref) => {
     const iconClasses =
-      "ink:shrink-0 ink:size-3 ink:-my-1 ink:flex ink:items-center ink:justify-center ink:group-focus-within:text-text-on-secondary ink:transition-colors ink:transition-default-animation";
+      "ink:shrink-0 ink:size-3 ink:-my-1 ink:flex ink:items-center ink:justify-center ink:text-text-muted ink:group-focus-within:text-text-on-secondary ink:transition-colors ink:transition-default-animation";
     return (
       <label
         className={classNames(