Re-work multiselect component

package.json

@@ -18,6 +18,7 @@
     "@marigold/prettier-config": "workspace:*",
     "@marigold/tsconfig": "workspace:*",
     "@parcel/watcher": "2.5.0",
+    "@react-aria/label": "3.7.14",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.2.0",
@@ -34,6 +35,7 @@
     "postcss-import": "16.1.0",
     "postcss-loader": "8.1.1",
     "prettier": "3.4.2",
+    "react-select": "5.9.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "tailwindcss": "3.4.17",

packages/components/src/Input/Input.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import React from 'react';
+import React, { useState } from 'react';
 import { Delete, Search } from '@marigold/icons';
 import { Button } from '../Button';
 import { Input } from './Input';
@@ -90,21 +90,26 @@ export const WithLeadingIcons: Story = {
 };
 
 export const WithAction: Story = {
-  render: args => (
-    <Input
-      placeholder="Placeholder..."
-      action={
-        <Button
-          size="small"
-          variant="text"
-          onPress={() => alert('Action executed')}
-        >
-          <Delete />
-        </Button>
-      }
-      {...args}
-    />
-  ),
+  render: args => {
+    const [value, setValue] = useState('value');
+    return (
+      <Input
+        placeholder="Placeholder..."
+        action={
+          <Button
+            size="small"
+            variant="text"
+            onPress={() => alert('Action executed')}
+          >
+            <Delete />
+          </Button>
+        }
+        {...args}
+        // value={value}
+        defaultValue={'Osama'}
+      />
+    );
+  },
 };
 
 export const WithIcons: Story = {

packages/components/src/Multiselect/Multiselect.stories.tsx

@@ -1,37 +1,138 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+import { useState } from '@storybook/preview-api';
 import { Meta, StoryObj } from '@storybook/react';
-import { Multiselect } from './Multiselect';
+import { Stack } from '../Stack';
+import { Multiselect2 } from './Multiselect2';
 
 const meta = {
   title: 'Components/Multiselect',
-  argTypes: {},
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set the label of the Multiselect',
+      table: {
+        type: { summary: 'text' },
+        defaultValue: { summary: '' },
+      },
+    },
+    description: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set the help text description.',
+      table: {
+        type: { summary: 'text' },
+        defaultValue: { summary: 'This is a help text description' },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Disable Multiselect',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Is the input invalid?',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set the Error Message',
+      table: {
+        type: { summary: 'text' },
+        defaultValue: { summary: 'Something went wrong' },
+      },
+    },
+    placeholder: {
+      control: {
+        type: 'text',
+      },
+      description: 'Set the placeholder text',
+      table: {
+        type: { summary: 'text' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+      description:
+        'The width of the field. For that we use the Tailwind tokens.',
+      table: {
+        type: { summary: 'text' },
+        defaultValue: { summary: 'full' },
+      },
+    },
+  },
   args: {
     description: 'This is a help text description',
     errorMessage: 'Something went wrong',
+    error: false,
+    disabled: false,
+    width: 'full',
+    placeholder: undefined,
+    label: 'Label',
   },
 } satisfies Meta;
 
 export default meta;
 
-export const Basic: StoryObj<typeof Multiselect> = {
-  render: () => {
+const drinks = [
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+];
+
+export const Basic: StoryObj<any> = {
+  render: args => (
+    <Multiselect2
+      label="Label"
+      placeholder="Enter value"
+      items={drinks}
+      {...args}
+    />
+  ),
+};
+
+export const Controlled: StoryObj<any> = {
+  render: args => {
+    const [current, setCurrent] = useState<string>('');
+    const [selectedValues, setSelectedValues] = useState<Array<object>>([]);
+
     return (
-      <>
-        <Multiselect
-          label="Animals"
-          // disabledKeys={['snake']}
-          defaultSelectedKeys={['cat', 'dog']}
-        >
-          <Multiselect.Item id="red-panda">Red Panda</Multiselect.Item>
-          <Multiselect.Item id="cat">Cat</Multiselect.Item>
-          <Multiselect.Item id="dog">Dog</Multiselect.Item>
-          <Multiselect.Item id="aardvark">Aardvark</Multiselect.Item>
-          <Multiselect.Item id="kangaroo">Kangaroo</Multiselect.Item>
-          <Multiselect.Item id="snake">Snake</Multiselect.Item>
-          <Multiselect.Item id="vegan">Vegan</Multiselect.Item>
-          <Multiselect.Item id="margrita">Margrita</Multiselect.Item>
-        </Multiselect>
-      </>
+      <Stack space={3}>
+        <Multiselect2
+          label="Label"
+          items={drinks}
+          onChange={value => setCurrent(value)}
+          onSelectionChange={(selectedValues: object[]) =>
+            setSelectedValues(selectedValues)
+          }
+          {...args}
+        />
+        <hr />
+        <pre>
+          current: {current}, selected:{' '}
+          {selectedValues
+            .map(({ value }: { value: string }) => value)
+            .join(', ')}
+        </pre>
+      </Stack>
     );
   },
 };