added Chip and ChipGroup

docs/chip/chip.md

@@ -0,0 +1,110 @@
+---
+name: Chip
+description: Use Chip to pick one or multiple values with inline controls
+endpoint: /components/chip
+package: dash_mantine_components
+category: Inputs
+---
+
+.. toc::
+
+### Introduction
+
+.. exec::docs.chip.interactive
+    :code: false
+
+### Simple Usage
+
+For a stand-alone `Chip`, use the `checked` property in callbacks.
+
+.. exec::docs.chip.simple
+
+
+### Change Checked Icon
+
+.. exec::docs.chip.icon
+
+
+
+### States
+
+.. exec::docs.chip.states
+    :code: false
+
+
+### Chip with Tooltip
+
+.. exec::docs.chip.tooltip
+
+
+### ChipGroups like Radio Button
+
+In this example, only a single chip can be selected, similar to a radio button. 
+
+> Note:  The  `ChipGroup` `value` property type must be a string when `multiple=False`.
+
+.. exec::docs.chip.chipgroup_radio
+
+
+### ChipGroups like Checklist
+
+In this example,  multiple chips can be selected, similar to a checklist.  Set `multiple=True`
+
+> Note: The  `ChipGroup` `value` property type must be a list of strings when `multiple=True`.
+
+.. exec::docs.chip.chipgroup_checklist
+
+### Deselect radio chip
+
+To enable deselecting a radio chip, set `deselectable=True`
+
+
+.. exec::docs.chip.chipgroup_radio_deselectable
+
+### Styles API
+
+
+#### Chip Selectors
+
+| Selector    | Static selector              | Description                               |
+|-------------|------------------------------|-------------------------------------------|
+| root        | .mantine-Chip-root            | Root element                              |
+| checkIcon   | .mantine-Chip-checkIcon       | Check icon, visible when `checked` prop is true |
+| iconWrapper | .mantine-Chip-iconWrapper     | Wraps `checkIcon` for alignment           |
+| input       | .mantine-Chip-input           | Input element, hidden by default          |
+| label       | .mantine-Chip-label           | Input label, used as the chip body        |
+
+#### Chip CSS Variables
+
+| Selector | Variable                  | Description                                          |
+|----------|---------------------------|------------------------------------------------------|
+| root     | --chip-fz                  | Controls font-size                                   |
+|          | --chip-size                | Controls height                                      |
+|          | --chip-icon-size           | Controls width and height of the icon                |
+|          | --chip-padding             | Controls horizontal padding when chip is not checked |
+|          | --chip-checked-padding     | Controls horizontal padding when chip is checked     |
+|          | --chip-radius              | Controls border-radius                               |
+|          | --chip-bg                  | Controls background-color when chip is checked       |
+|          | --chip-hover               | Controls background-color when chip is checked and hovered |
+|          | --chip-color               | Controls color when chip is checked                  |
+|          | --chip-bd                  | Controls border when chip is checked                 |
+|          | --chip-spacing             | Controls spacing between check icon and label        |
+
+#### Chip Data Attributes
+
+| Selector | Attribute      | Condition                |
+|----------|----------------|--------------------------|
+| label    | data-checked    | Chip is checked          |
+| label    | data-disabled   | `disabled` prop is set   |
+
+
+
+### Keyword Arguments
+
+#### Chip
+
+.. kwargs::Chip
+
+#### ChipGroup
+
+.. kwargs::ChipGroup

docs/chip/chipgroup_checklist.py

@@ -0,0 +1,28 @@
+import dash_mantine_components as dmc
+from dash import callback, Input, Output
+
+component = dmc.Box(
+    [
+        dmc.Group(
+            dmc.ChipGroup(
+                [
+                    dmc.Chip("Multiple chips", value="a"),
+                    dmc.Chip("Can be selected", value="b"),
+                    dmc.Chip("At a time", value="c"),
+                ],
+                multiple=True,
+                value=["a", "b"],
+                id="chipgroup-multi",
+            ),
+            justify="center",
+        ),
+        dmc.Text(id="chipgroup-multi-container", ta="center"),
+    ]
+)
+
+
+@callback(
+    Output("chipgroup-multi-container", "children"), Input("chipgroup-multi", "value")
+)
+def checkbox(value):
+    return f"Selected chips: {value}"

docs/chip/chipgroup_radio.py

@@ -0,0 +1,28 @@
+import dash_mantine_components as dmc
+from dash import callback, Input, Output
+
+component = dmc.Box(
+    [
+        dmc.Group(
+            dmc.ChipGroup(
+                [
+                    dmc.Chip("Single chip", value="a"),
+                    dmc.Chip("Can be selected", value="b"),
+                    dmc.Chip("At a time", value="c"),
+                ],
+                multiple=False,
+                value="a",
+                id="chipgroup-single",
+            ),
+            justify="center",
+        ),
+        dmc.Text(id="chipgroup-single-container", ta="center"),
+    ]
+)
+
+
+@callback(
+    Output("chipgroup-single-container", "children"), Input("chipgroup-single", "value")
+)
+def checkbox(value):
+    return f"You selected chip: {value}"

docs/chip/chipgroup_radio_deselectable.py

@@ -0,0 +1,29 @@
+import dash_mantine_components as dmc
+from dash import callback, Input, Output
+
+component = dmc.Box(
+    [
+        dmc.Group(
+            dmc.ChipGroup(
+                [
+                    dmc.Chip("Single chip", value="a"),
+                    dmc.Chip("Can be selected", value="b"),
+                    dmc.Chip("At a time", value="c"),
+                ],
+                multiple=False,
+                value="a",
+                deselectable=True,
+                id="chipgroup-deselect",
+            ),
+            justify="center",
+        ),
+        dmc.Text(id="chipgroup-deselect-container", ta="center"),
+    ]
+)
+
+
+@callback(
+    Output("chipgroup-deselect-container", "children"), Input("chipgroup-deselect", "value")
+)
+def checkbox(value):
+    return f"You selected chip: {value}"

docs/chip/icon.py

@@ -0,0 +1,10 @@
+import dash_mantine_components as dmc
+from dash_iconify import DashIconify
+
+component = dmc.Chip(
+    "Forbidden",
+    icon=DashIconify(icon="bi-x-circle"),
+    color="red",
+    checked=True,
+    m="sm",
+)

docs/chip/interactive.py

@@ -0,0 +1,18 @@
+import dash_mantine_components as dmc
+
+from lib.configurator import Configurator
+
+TARGET_ID = "interactive-Chip"
+
+target = dmc.Center(
+    dmc.Chip("Awesome chip", checked=True, id=TARGET_ID)
+)
+
+configurator = Configurator(target, TARGET_ID)
+
+configurator.add_segmented_control("variant", ["filled", "outline", "light"], "light")
+configurator.add_colorpicker("color", "indigo")
+configurator.add_slider("size", "sm")
+configurator.add_slider("radius", "lg")
+
+component = configurator.panel

docs/chip/root.py

@@ -0,0 +1,7 @@
+import dash_mantine_components as dmc
+
+component = dmc.Chip(
+    "Chip with props added to root",
+    wrapperProps={"data-testid": "wrapper"},
+    checked=True,
+)

docs/chip/simple.py

@@ -0,0 +1,16 @@
+import dash_mantine_components as dmc
+from dash import Output, Input, callback
+
+
+component = dmc.Box(
+    [
+        dmc.Chip("Awesome chip", checked=True, id="chip-state"),
+        dmc.Text(id="chip-container"),
+    ],
+    p=20,
+)
+
+
+@callback(Output("chip-container", "children"), Input("chip-state", "checked"))
+def checkbox(checked):
+    return f"The chip is selected: {checked}"

docs/chip/states.py

@@ -0,0 +1,39 @@
+import dash_mantine_components as dmc
+
+component = dmc.Box(
+    [
+        dmc.Group(
+            [
+                dmc.Chip("Outline default", variant="outline"),
+                dmc.Chip(
+                    "Outline checked", variant="outline", checked=True
+                ),
+                dmc.Chip("Outline disabled", variant="outline"),
+            ]
+        ),
+        dmc.Group(
+            [
+                dmc.Chip("Light default", variant="light",  m="sm"),
+                dmc.Chip(
+                    "Light checked",
+                    variant="light",
+                    checked=True,
+                    m="sm",
+                ),
+                dmc.Chip("Light disabled", variant="light", m="sm"),
+            ]
+        ),
+        dmc.Group(
+            [
+                dmc.Chip("Filled default", variant="filled", m="sm"),
+                dmc.Chip(
+                    "Filled checked",
+                    variant="filled",
+                    checked=True,
+                    m="sm",
+                ),
+                dmc.Chip("Filled disabled", variant="filled", m="sm"),
+            ]
+        ),
+    ],
+)

docs/chip/tooltip.py

@@ -0,0 +1,6 @@
+import dash_mantine_components as dmc
+
+component = dmc.Tooltip(
+    label="chip tooltip",
+    children=dmc.Chip("chip with tooltip", checked=True),
+)

docs/radiogroup/deselectable.py

@@ -0,0 +1,18 @@
+import dash_mantine_components as dmc
+from dash import html
+
+data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]
+
+component = html.Div(
+    [
+        dmc.RadioGroup(
+            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
+            value="react",
+            label="Select your favorite framework/library",
+            size="sm",
+            my=10,
+            deselectable=True
+        ),
+
+    ]
+)

docs/radiogroup/group.py

@@ -7,15 +7,13 @@
     [
         dmc.RadioGroup(
             children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
-            id="radiogroup-simple",
             value="react",
             label="Select your favorite framework/library",
             size="sm",
             my=10,
         ),
         dmc.RadioGroup(
             children=dmc.Stack([dmc.Radio(l, value=k) for k, l in data], my=10),
-            id="radiogroup-simple",
             value="react",
             label="Select your favorite framework/library",
             size="sm",

docs/radiogroup/radiogroup.md

@@ -39,6 +39,13 @@ In a RadioGroup component, the Radio items can be arranged by using the Group or
 
 .. exec::docs.radiogroup.group
 
+
+### Deselectable RadioGroup
+
+To enable deselecting a radio chip, set `deselectable=True`
+
+.. exec::docs.radiogroup.deselectable
+
 ### Styles API
 
 | Name         | Static selector             | Description                                 |