@scattered-light/loomiere-mojave 0.25.0 → 0.41.0

package/dist/exports/design-system/components/ChipPicker/README.md

@@ -0,0 +1,43 @@
+# ChipPicker
+
+The Base UI ChipPicker styled by the theme. Removable chips (subtle Badges with a close button) in a wrapping row, then a small round + button that opens a menu of the groups not chosen yet. Read only, the chips have no close button and an empty picker shows a dash.
+
+Use `Loomiere.ChipPicker` (`import { ChipPicker } from '@base-ui/react/chip-picker'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/chip-picker
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `ChipPicker` |   |
+| `ChipPickerChip` |   |
+| `ChipPickerChipGroup` |   |
+| `ChipPickerAdd` |   |
+| `ChipPickerEmpty` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the ChipPicker stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { label: 'Dimensions, line 1', groups, value: [] },
+  render: () => <Picker initial={[{ group: 'project', value: 'lumen' }]} />,
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button', { name: 'Add to Dimensions, line 1' }));
+    const body = within(document.body);
+    await userEvent.click(await body.findByRole('menuitem', { name: 'Lumen Books' }));
+    await expect(canvas.getByText('Client: Lumen Books')).toBeInTheDocument();
+    await userEvent.click(canvas.getByRole('button', { name: 'Remove Project: Lumen rebrand from Dimensions, line 1' }));
+    await expect(canvas.queryByText('Project: Lumen rebrand')).not.toBeInTheDocument();
+  },
+};
+
+/** Read only, as on a posted line: chips without close buttons, a dash when there are none. */
+```
+
+The preview also shows `ReadOnly`.