@ceed/cds 1.34.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>
@@ -46,15 +43,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>
 ```
 
 ### Colors
@@ -62,17 +61,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>
 ```
 
 ### Variants
@@ -80,16 +81,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>
 ```
 
 ### Sizes
@@ -97,16 +100,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>
 ```
 
 ### With Icons
@@ -114,17 +119,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>
 ```
 
 ### With Avatar
@@ -132,14 +139,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
@@ -147,15 +158,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
@@ -163,19 +183,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>
 ```
 
 ### Clickable Actions
@@ -183,19 +205,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>
 ```
 
 ### States
@@ -203,40 +227,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>
 ```
 
 ## Common Use Cases
@@ -265,11 +295,7 @@ Can represent various states.
 ### Filter Controls
 
 ```tsx
-<Chip
-  clickable
-  variant={isActive ? 'solid' : 'outlined'}
-  onClick={() => setFilter('all')}
->
+<Chip clickable variant={isActive ? 'solid' : 'outlined'} onClick={() => setFilter('all')}>
   All Items
 </Chip>
 ```
@@ -277,11 +303,7 @@ Can represent various states.
 ### 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>
 ```