Feat/inputfield chip v1 (#232)

* feat: add chip variant in input field

* chore: add uage in the assets file

* docs: add chip variant in docs

* feat: add size variant large and small

* feat: add truncated chip

* refactor: rename classnames to kabab cases instead of camel case

* chore: remove comments

* chore: rename incorrect property in svg

* chore: add default prop to input-field max chip support

* refactor: replace elementRef with componentRef

* fix: react 19

Author: paanSinghCoder

apps/www/content/primitives/components/inputField.mdx

@@ -42,7 +42,9 @@ The `InputField` component accepts the following props:
 - `prefix`: Text or symbol to show before input value (string)
 - `suffix`: Text or symbol to show after input value (string)
 - `width`: Custom width for the input field (string | number)
+- `chips`: Array of chip objects with label and onRemove function
 - `className`: Additional CSS class names
+- `size`: Size variant of the input field ('small' | 'large', default: 'large')
 - All other InputHTMLAttributes from React
 
 ## Variants
@@ -160,4 +162,70 @@ Input field with custom width.
   placeholder="Enter text"
   width="300px"
 />`}
-/>
+/>
+
+### With Chips
+
+Input field that can display and manage chips/tags.
+
+<Playground
+  scope={{ InputField }}
+  code={`
+<InputField 
+  label="With Chips"
+  placeholder="Type and press Enter..."
+  chips={[
+    { label: "A", onRemove: () => console.log("Remove A") },
+    { label: "B", onRemove: () => console.log("Remove B") }
+  ]}
+/>
+`}
+/>
+
+### Size Variants
+
+InputField comes in two sizes: small (24px) and large (32px).
+
+<Playground
+  scope={{ InputField }}
+  code={`
+<div direction="column" gap="medium">
+  <InputField 
+    label="Large Input (Default)"
+    placeholder="32px height"
+  />
+  <InputField 
+    label="Small Input"
+    placeholder="24px height"
+    size="small"
+  />
+</div>
+`}
+/>
+
+### With Chips (Different Sizes)
+
+<Playground
+  scope={{ InputField }}
+  code={`
+<div direction="column" gap="medium">
+  <InputField 
+    label="Large Input with Chips"
+    placeholder="Type and press Enter..."
+    chips={[
+      { label: "A", onRemove: () => console.log("Remove A") },
+      { label: "B", onRemove: () => console.log("Remove B") }
+    ]}
+  />
+  <InputField 
+    label="Small Input with Chips"
+    placeholder="Type and press Enter..."
+    size="small"
+    chips={[
+      { label: "A", onRemove: () => console.log("Remove A") },
+      { label: "B", onRemove: () => console.log("Remove B") }
+    ]}
+  />
+</div>
+`}
+/>

apps/www/examples/shield-ts/assets.tsx

@@ -102,6 +102,27 @@ export const Assets = () => {
     to: new Date(),
   });
 
+  const [recipients, setRecipients] = useState([
+    { label: "A", onRemove: () => handleRemoveRecipient("A") },
+    { label: "B", onRemove: () => handleRemoveRecipient("B") },
+    { label: "C", onRemove: () => handleRemoveRecipient("C") },
+    { label: "D", onRemove: () => handleRemoveRecipient("D") },
+    { label: "E", onRemove: () => handleRemoveRecipient("E") }
+  ]);
+
+  const handleRemoveRecipient = (label: string) => {
+    setRecipients(prev => prev.filter(recipient => recipient.label !== label));
+  };
+
+  const handleAddRecipient = (value: string) => {
+    if (value && !recipients.find(r => r.label === value)) {
+      setRecipients(prev => [...prev, { 
+        label: value, 
+        onRemove: () => handleRemoveRecipient(value) 
+      }]);
+    }
+  };
+
   const loadMoreData = useCallback(() => {
     if (!isLoading && hasMoreData) {
       setIsLoading(true);
@@ -158,28 +179,49 @@ export const Assets = () => {
   }, []);
 
   return (
-    <>
-      <DataTable
-        columns={columns}
-        data={data}
-        initialState={{ sorting: [{ id: "amount", desc: true }] }}
-        isLoading={isLoading}
-        onLoadMore={loadMoreData}
-      >
-        <DataTable.Toolbar>
-          <AssetsHeader />
-          <DataTable.FilterChips />
-          {/* <Flex gap="small"> */}
-            {/* <Button size="small" variant="primary" onClick={() => showToast("success")}>Show Success Toast!</Button>
-            <Button size="small" variant="danger" onClick={() => showToast("error")}>Show Error Toast with custom icon</Button> */}
-          {/* </Flex> */}
-        </DataTable.Toolbar>
-        <DataTable.Footer>
-          <></>
-        </DataTable.Footer>
-      </DataTable>
-      <ToastContainer />
-    </>
+    <div style={{ padding: "var(--rs-space-5)", width: "100%" }}>
+      <Flex direction="column" gap="large" style={{ width: "100%" }}>
+        <Flex direction="column" gap="medium" style={{ width: "100%" }}>
+          <Flex justify="between" align="center">
+            <Title>Assets</Title>
+            <Button>Create Asset</Button>
+          </Flex>
+
+          <InputField
+            label="Label"
+            placeholder="Type and press Enter..."
+            chips={recipients}
+            maxChipsVisible={2}
+            size="small"
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
+                handleAddRecipient((e.target as HTMLInputElement).value);
+                (e.target as HTMLInputElement).value = '';
+              }
+            }}
+          />
+
+          <div style={{ width: "100%" }}>
+            <DataTable
+              columns={columns}
+              data={data}
+              initialState={{ sorting: [{ id: "amount", desc: true }] }}
+              isLoading={isLoading}
+              onLoadMore={loadMoreData}
+            >
+              <DataTable.Toolbar>
+                <AssetsHeader />
+                <DataTable.FilterChips />
+              </DataTable.Toolbar>
+              <DataTable.Footer>
+                <></>
+              </DataTable.Footer>
+            </DataTable>
+          </div>
+        </Flex>
+      </Flex>
+    </div>
   );
 };
 

packages/raystack/v1/components/chip/chip.tsx

@@ -87,8 +87,8 @@ export const Chip = ({
             role="presentation"
           >
             <path 
-              fill-rule="evenodd" 
-              clip-rule="evenodd" 
+              fillRule="evenodd" 
+              clipRule="evenodd" 
               d="M9.5066 3.3066C9.73115 3.08205 9.73115 2.71798 9.5066 2.49343C9.28205 2.26887 8.91798 2.26887 8.69343 2.49343L6.00001 5.18684L3.3066 2.49343C3.08205 2.26887 2.71798 2.26887 2.49343 2.49343C2.26887 2.71798 2.26887 3.08205 2.49343 3.3066L5.18684 6.00001L2.49343 8.69343C2.26887 8.91798 2.26887 9.28205 2.49343 9.5066C2.71798 9.73115 3.08205 9.73115 3.3066 9.5066L6.00001 6.81318L8.69343 9.5066C8.91798 9.73115 9.28205 9.73115 9.5066 9.5066C9.73115 9.28205 9.73115 8.91798 9.5066 8.69343L6.81318 6.00001L9.5066 3.3066Z" 
               fill="currentColor"
             />