feat(core): Implements chip component and chip delete component

apps/tester/src/settings.tsx

@@ -26,6 +26,7 @@ export type Fixture = {
   alterColors?: UIColor[];
   alterStates?: UIState[];
   waitTime?: number;
+  maxDiffPixels?: number;
   renderJoyElement: ElementRenderer;
   renderTjElement: ElementRenderer;
 };
@@ -65,6 +66,7 @@ export function testEach(
     alterColors,
     alterStates,
     waitTime,
+    maxDiffPixels,
     renderJoyElement,
     renderTjElement,
   } of fixtures) {
@@ -174,7 +176,7 @@ export function testEach(
                   await page.getByTestId(containerTestId),
                 ).toHaveScreenshot(screenshotName, {
                   animations: 'disabled',
-                  maxDiffPixels: 1,
+                  maxDiffPixels,
                 });
                 if (state === 'active') {
                   await sleep(100);

apps/tester/tests/23-chip.spec.tsx

@@ -0,0 +1,107 @@
+import SunIcon from '@mui/icons-material/LightMode';
+import { MdLightMode } from 'react-icons/md';
+import { Chip as JoyChip } from '@mui/joy';
+import { Chip as TJChip } from 'tailwind-joy/components';
+
+import type { Fixture } from '@/settings';
+import { testEach } from '@/settings';
+
+const containerClassName =
+  'flex h-[100px] w-[200px] items-center justify-center p-2';
+
+const fixtures: Fixture[] = [
+  {
+    title: 'basics',
+    renderJoyElement({ testId, size, variant, color }) {
+      return (
+        <JoyChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+        >
+          This is a chip
+        </JoyChip>
+      );
+    },
+    renderTjElement({ testId, size, variant, color }) {
+      return (
+        <TJChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+        >
+          This is a chip
+        </TJChip>
+      );
+    },
+  },
+  {
+    title: 'decorators',
+    maxDiffPixels: 2,
+    renderJoyElement({ testId, size, variant, color }) {
+      return (
+        <JoyChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+          startDecorator={<SunIcon />}
+        >
+          This is a chip
+        </JoyChip>
+      );
+    },
+    renderTjElement({ testId, size, variant, color, iconClassName }) {
+      return (
+        <TJChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+          startDecorator={<MdLightMode className={iconClassName} />}
+        >
+          This is a chip
+        </TJChip>
+      );
+    },
+  },
+  {
+    title: 'clickable',
+    alterStates: ['default', 'hover', 'focus-visible', 'active', 'disabled'],
+    renderJoyElement({ testId, size, variant, color, state }) {
+      return (
+        <JoyChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+          disabled={state === 'disabled'}
+          onClick={() => {}}
+        >
+          This is a chip
+        </JoyChip>
+      );
+    },
+    renderTjElement({ testId, size, variant, color, state }) {
+      return (
+        <TJChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+          disabled={state === 'disabled'}
+          onClick={() => {}}
+        >
+          This is a chip
+        </TJChip>
+      );
+    },
+  },
+];
+
+testEach(fixtures, {
+  containerClassName,
+  viewport: { width: 500, height: 500 },
+});

apps/tester/tests/24-chip-delete.spec.tsx

@@ -0,0 +1,51 @@
+import { ChipDelete as JoyChipDelete, Chip as JoyChip } from '@mui/joy';
+import {
+  ChipDelete as TJChipDelete,
+  Chip as TJChip,
+} from 'tailwind-joy/components';
+
+import type { Fixture } from '@/settings';
+import { testEach } from '@/settings';
+
+const containerClassName =
+  'flex h-[100px] w-[200px] items-center justify-center p-2';
+
+const fixtures: Fixture[] = [
+  {
+    title: 'basics',
+    alterStates: ['default', 'hover', 'focus-visible', 'active', 'disabled'],
+    renderJoyElement({ testId, size, variant, color, state }) {
+      return (
+        <JoyChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+          disabled={state === 'disabled'}
+          endDecorator={<JoyChipDelete onDelete={() => {}} />}
+        >
+          This is a chip
+        </JoyChip>
+      );
+    },
+    renderTjElement({ testId, size, variant, color, state }) {
+      return (
+        <TJChip
+          data-testid={testId}
+          size={size}
+          variant={variant}
+          color={color}
+          disabled={state === 'disabled'}
+          endDecorator={<TJChipDelete onDelete={() => {}} />}
+        >
+          This is a chip
+        </TJChip>
+      );
+    },
+  },
+];
+
+testEach(fixtures, {
+  containerClassName,
+  viewport: { width: 500, height: 500 },
+});

apps/tester/tests/70-switch.spec.tsx

@@ -70,6 +70,7 @@ const fixtures: Fixture[] = [
   {
     title: 'decorators',
     alterStates: ['default', 'hover', 'focus-visible', 'active', 'disabled'],
+    maxDiffPixels: 1,
     renderJoyElement({ testId, size, variant, color, state }) {
       return (
         <JoySwitch

apps/website/docs/apis/23-chip.md

@@ -0,0 +1,110 @@
+---
+sidebar_position: 23
+title: <Chip />
+---
+
+# Chip API
+
+<AvailableFrom version="0.5.0" />
+
+API reference docs for the React Chip component.
+Learn about the props of this exported module.
+
+## Demos
+
+:::tip
+
+For examples and details on the usage of this React component, visit the component demo pages:
+
+- [Chip](../components/chip)
+
+:::
+
+## Import
+
+```tsx
+import { Chip } from 'tailwind-joy/components';
+```
+
+## Props
+
+:::info
+
+The `ref` is forwarded to the root element.
+
+:::
+
+### `className`
+
+Class name applied to the root element.
+
+- Type: `string`
+
+### `color`
+
+The color of the component.
+
+- Type: `'primary' | 'neutral' | 'danger' | 'success' | 'warning'`
+- Default: `'neutral'`
+
+### `component`
+
+The component used for the root node.
+
+- Type: `keyof JSX.IntrinsicElements`
+- Default: `'div'`
+
+### `disabled`
+
+If `true`, the component is disabled.
+
+- Type: `boolean`
+- Default: `false`
+
+### `endDecorator`
+
+Element placed after the children.
+
+- Type: `ReactNode`
+
+### `onClick`
+
+Element action click handler.
+
+- Type: `MouseEventHandler`
+
+### `size`
+
+The size of the component.
+
+- Type: `'sm' | 'md' | 'lg'`
+- Default: `'md'`
+
+### `slotProps`
+
+The props used for each slot inside.
+
+- Type:
+  ```tsx
+  {
+    root?: ComponentProps<'div'>;
+    label?: ComponentProps<'span'>;
+    action?: ComponentProps<'button'>;
+    startDecorator?: ComponentProps<'span'>;
+    endDecorator?: ComponentProps<'span'>;
+  }
+  ```
+- Default: `{}`
+
+### `startDecorator`
+
+Element placed before the children.
+
+- Type: `ReactNode`
+
+### `variant`
+
+The variant of the component.
+
+- Type: `'solid' | 'soft' | 'outlined' | 'plain'`
+- Default: `'soft'`

apps/website/docs/apis/24-chip-delete.md

@@ -0,0 +1,90 @@
+---
+sidebar_position: 24
+title: <ChipDelete />
+---
+
+# ChipDelete API
+
+<AvailableFrom version="0.5.0" />
+
+API reference docs for the React ChipDelete component.
+Learn about the props of this exported module.
+
+## Demos
+
+:::tip
+
+For examples and details on the usage of this React component, visit the component demo pages:
+
+- [Chip](../components/chip)
+
+:::
+
+## Import
+
+```tsx
+import { ChipDelete } from 'tailwind-joy/components';
+```
+
+## Props
+
+:::info
+
+The `ref` is forwarded to the root element.
+
+:::
+
+### `className`
+
+Class name applied to the root element.
+
+- Type: `string`
+
+### `color`
+
+The color of the component.
+
+- Type: `'primary' | 'neutral' | 'danger' | 'success' | 'warning'`
+- Default: `'neutral'`
+
+### `component`
+
+The component used for the root node.
+
+- Type: `keyof JSX.IntrinsicElements`
+- Default: `'button'`
+
+### `disabled`
+
+If `true`, the component is disabled.
+If `undefined`, the value inherits from the parent chip.
+
+- Type: `boolean`
+
+### `onDelete`
+
+Callback fired when the component is not disabled and either:
+
+- `Backspace`, `Enter` or `Delete` is pressed.
+- The component is clicked.
+
+* Type: `(event: KeyboardEvent | MouseEvent) => void`
+
+### `slotProps`
+
+The props used for each slot inside.
+
+- Type:
+  ```tsx
+  {
+    root?: ComponentProps<'button'>;
+  }
+  ```
+- Default: `{}`
+
+### `variant`
+
+The variant of the component.
+
+- Type: `'solid' | 'soft' | 'outlined' | 'plain'`
+- Default: `'plain'`