Merge pull request #64 from inkonchain/feat/checkbox-icon

feat: input icons

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",

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 />,
+  },
+};

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:text-text-muted 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>
     );
   }
 );