@ceed/ads 1.35.1 → 1.36.0

package/dist/components/data-display/Chip.md

@@ -28,10 +28,7 @@ function MyComponent() {
       <Chip clickable onClick={() => console.log('clicked')}>
         Clickable Chip
       </Chip>
-      <Chip
-        endDecorator={<CloseIcon />}
-        onClick={() => console.log('delete')}
-      >
+      <Chip endDecorator={<CloseIcon />} onClick={() => console.log('delete')}>
         Deletable Chip
       </Chip>
     </div>
@@ -44,15 +41,17 @@ function MyComponent() {
 Basic Chip usage.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Chip>Basic Chip</Chip>
-<Chip disabled>Disabled</Chip>
-<Chip onClick={() => alert('Clicked!')}>Clickable</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip>Basic Chip</Chip>
+    <Chip disabled>Disabled</Chip>
+    <Chip onClick={() => alert("Clicked!")}>Clickable</Chip>
+  </div>
 ```
 
 ## Chip Colors
@@ -60,17 +59,19 @@ Basic Chip usage.
 You can apply various colors.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Chip color="primary">Primary</Chip>
-<Chip color="neutral">Neutral</Chip>
-<Chip color="danger">Danger</Chip>
-<Chip color="success">Success</Chip>
-<Chip color="warning">Warning</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip color="primary">Primary</Chip>
+    <Chip color="neutral">Neutral</Chip>
+    <Chip color="danger">Danger</Chip>
+    <Chip color="success">Success</Chip>
+    <Chip color="warning">Warning</Chip>
+  </div>
 ```
 
 ## Chip Variants
@@ -78,16 +79,18 @@ You can apply various colors.
 Provides a variety of style variants.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Chip variant="solid">Solid</Chip>
-<Chip variant="soft">Soft</Chip>
-<Chip variant="outlined">Outlined</Chip>
-<Chip variant="plain">Plain</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip variant="solid">Solid</Chip>
+    <Chip variant="soft">Soft</Chip>
+    <Chip variant="outlined">Outlined</Chip>
+    <Chip variant="plain">Plain</Chip>
+  </div>
 ```
 
 ## Chip Sizes
@@ -95,16 +98,18 @@ Provides a variety of style variants.
 You can adjust the size.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  alignItems: 'center',
-  flexWrap: 'wrap'
-}}>
-<Chip size="sm">Small</Chip>
-<Chip size="md">Medium</Chip>
-<Chip size="lg">Large</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      alignItems: "center",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip size="sm">Small</Chip>
+    <Chip size="md">Medium</Chip>
+    <Chip size="lg">Large</Chip>
+  </div>
 ```
 
 ## Chip with Icons
@@ -112,17 +117,19 @@ You can adjust the size.
 Can be used with icons.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Chip startDecorator={<Add />}>Add Item</Chip>
-<Chip endDecorator={<Close />}>Remove</Chip>
-<Chip startDecorator={<Done />} color="success">
-  Completed
-</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip startDecorator={<Add />}>Add Item</Chip>
+    <Chip endDecorator={<Close />}>Remove</Chip>
+    <Chip startDecorator={<Done />} color="success">
+      Completed
+    </Chip>
+  </div>
 ```
 
 ## Chip with Avatar
@@ -130,14 +137,18 @@ Can be used with icons.
 Can be used with an avatar to represent a user.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Chip startDecorator={<Avatar size="sm" src="https://i.pravatar.cc/40?img=1" />}>John Doe</Chip>
-<Chip startDecorator={<Avatar size="sm" src="https://i.pravatar.cc/40?img=2" />}>Jane Smith</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip startDecorator={<Avatar size="sm" src="https://i.pravatar.cc/40?img=1" />}>John Doe</Chip>
+    <Chip startDecorator={<Avatar size="sm" src="https://i.pravatar.cc/40?img=2" />}>
+      Jane Smith
+    </Chip>
+  </div>
 ```
 
 ## Deletable Chip
@@ -145,15 +156,24 @@ Can be used with an avatar to represent a user.
 A Chip with delete functionality. Clicking it removes it from the list.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-{chips.map(chip => <Chip key={chip} endDecorator={<Close />} onClick={() => handleDelete(chip)} variant="outlined">
-{chip}
-</Chip>)}
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    {chips.map((chip) => (
+      <Chip
+        key={chip}
+        endDecorator={<Close />}
+        onClick={() => handleDelete(chip)}
+        variant="outlined"
+      >
+        {chip}
+      </Chip>
+    ))}
+  </div>
 ```
 
 ## Clickable Chip
@@ -161,19 +181,21 @@ A Chip with delete functionality. Clicking it removes it from the list.
 A clickable Chip that can be used as a filter or tab.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Chip onClick={() => alert('Filter: All')}>All</Chip>
-<Chip onClick={() => alert('Filter: Active')} color="success">
-  Active
-</Chip>
-<Chip onClick={() => alert('Filter: Completed')} color="neutral">
-  Completed
-</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip onClick={() => alert("Filter: All")}>All</Chip>
+    <Chip onClick={() => alert("Filter: Active")} color="success">
+      Active
+    </Chip>
+    <Chip onClick={() => alert("Filter: Completed")} color="neutral">
+      Completed
+    </Chip>
+  </div>
 ```
 
 ## Chip Clickable Actions
@@ -181,19 +203,21 @@ A clickable Chip that can be used as a filter or tab.
 Can trigger various actions when clicked.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<Chip onClick={() => window.open('#', '_blank')}>Home</Chip>
-<Chip onClick={() => window.open('#', '_blank')} variant="outlined">
-  About
-</Chip>
-<Chip onClick={() => window.open('#', '_blank')} variant="soft">
-  Contact
-</Chip>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <Chip onClick={() => window.open("#", "_blank")}>Home</Chip>
+    <Chip onClick={() => window.open("#", "_blank")} variant="outlined">
+      About
+    </Chip>
+    <Chip onClick={() => window.open("#", "_blank")} variant="soft">
+      Contact
+    </Chip>
+  </div>
 ```
 
 ## Chip States
@@ -201,40 +225,46 @@ Can trigger various actions when clicked.
 Can represent various states.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  gap: '1rem',
-  flexWrap: 'wrap'
-}}>
-<div>
-  <h4>Normal</h4>
-  <div style={{
-    display: 'flex',
-    gap: '0.5rem',
-    flexWrap: 'wrap'
-  }}>
-  <Chip>Default</Chip>
-  <Chip onClick={() => {}}>Clickable</Chip>
-  <Chip endDecorator={<Close />}>Deletable</Chip>
-</div>
-</div>
-<div>
-  <h4>Disabled</h4>
-  <div style={{
-    display: 'flex',
-    gap: '0.5rem',
-    flexWrap: 'wrap'
-  }}>
-  <Chip disabled>Default</Chip>
-  <Chip disabled onClick={() => {}}>
-    Clickable
-  </Chip>
-  <Chip disabled endDecorator={<Close />}>
-    Deletable
-  </Chip>
-</div>
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      gap: "1rem",
+      flexWrap: "wrap"
+    }}
+  >
+    <div>
+      <h4>Normal</h4>
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+          flexWrap: "wrap"
+        }}
+      >
+        <Chip>Default</Chip>
+        <Chip onClick={() => {}}>Clickable</Chip>
+        <Chip endDecorator={<Close />}>Deletable</Chip>
+      </div>
+    </div>
+    <div>
+      <h4>Disabled</h4>
+      <div
+        style={{
+          display: "flex",
+          gap: "0.5rem",
+          flexWrap: "wrap"
+        }}
+      >
+        <Chip disabled>Default</Chip>
+        <Chip disabled onClick={() => {}}>
+          Clickable
+        </Chip>
+        <Chip disabled endDecorator={<Close />}>
+          Deletable
+        </Chip>
+      </div>
+    </div>
+  </div>
 ```
 
 ## Chip Tags
@@ -261,11 +291,7 @@ Can represent various states.
 ## Chip Filter Controls
 
 ```tsx
-<Chip
-  clickable
-  variant={isActive ? 'solid' : 'outlined'}
-  onClick={() => setFilter('all')}
->
+<Chip clickable variant={isActive ? 'solid' : 'outlined'} onClick={() => setFilter('all')}>
   All Items
 </Chip>
 ```
@@ -273,11 +299,7 @@ Can represent various states.
 ## Chip Contact Pills
 
 ```tsx
-<Chip
-  startDecorator={<Avatar size="sm" />}
-  endDecorator={<CloseIcon />}
-  onDelete={() => removeContact(id)}
->
+<Chip startDecorator={<Avatar size="sm" />} endDecorator={<CloseIcon />} onDelete={() => removeContact(id)}>
   John Doe
 </Chip>
 ```