@powerhousedao/document-engineering 1.38.0 → 1.39.0

package/dist/src/ui/components/data-entry/radio-group/radio-group.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.test.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/radio-group/radio-group.test.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui/components/data-entry/radio-group/radio.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=radio.test.d.ts.map

package/dist/src/ui/components/data-entry/radio-group/radio.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.test.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/radio-group/radio.test.tsx"],"names":[],"mappings":""}

package/dist/src/ui/components/data-entry/radio-group/radio.test.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { CustomizableRadioGroup } from './customizable-radio-group.js';
+import { Radio } from './radio.js';
+describe('Radio Component', () => {
+    it('should match snapshot', () => {
+        const { asFragment } = render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test" }) }));
+        expect(asFragment()).toMatchSnapshot();
+    });
+    it('should render with label and value', () => {
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test" }) }));
+        expect(screen.getByText('Test Label')).toBeInTheDocument();
+        expect(screen.getByRole('radio')).toHaveAttribute('value', 'test');
+    });
+    it('should render with description', () => {
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test", description: "Test Description" }) }));
+        // Check that the info icon fallback is rendered
+        const label = screen.getByText('Test Label').closest('label');
+        expect(label).toBeInTheDocument();
+        const button = label?.querySelector('button');
+        expect(button).toBeInTheDocument();
+        const icon = button?.querySelector('svg');
+        expect(icon).toBeInTheDocument();
+        expect(icon).toHaveStyle({ width: '16px', height: '16px' });
+    });
+    it('should apply error styles when hasError is true', () => {
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test", hasError: true }) }));
+        const radio = screen.getByRole('radio');
+        expect(radio).toHaveAttribute('aria-invalid', 'true');
+        expect(radio).toHaveClass('border-red-700');
+    });
+    it('should apply disabled styles and attributes', () => {
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test", disabled: true }) }));
+        const radio = screen.getByRole('radio');
+        expect(radio).toHaveAttribute('aria-disabled', 'true');
+        expect(radio).toHaveClass('cursor-not-allowed');
+    });
+    it('should render with custom className', () => {
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test", className: "custom-class" }) }));
+        expect(screen.getByRole('radio')).toHaveClass('custom-class');
+    });
+    it('should use provided id when specified', () => {
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test", id: "custom-id" }) }));
+        expect(screen.getByRole('radio')).toHaveAttribute('id', 'custom-id');
+    });
+    it('should generate unique id when not provided', () => {
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test" }) }));
+        const radio = screen.getByRole('radio');
+        // Check that the id ends with -radio
+        expect(radio.id).toMatch(/^.*-radio$/);
+    });
+    it('should select the radio when the label is clicked', async () => {
+        const user = userEvent.setup();
+        render(_jsx(CustomizableRadioGroup, { name: "radio-group", children: _jsx(Radio, { label: "Test Label", value: "test" }) }));
+        const label = screen.getByText('Test Label');
+        const radio = screen.getByRole('radio');
+        await user.click(label);
+        expect(radio).toBeChecked();
+    });
+});
+//# sourceMappingURL=radio.test.js.map

package/dist/src/ui/components/data-entry/radio-group/radio.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.test.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/radio-group/radio.test.tsx"],"names":[],"mappings":"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"}

package/dist/src/ui/components/data-entry/select/content.d.ts

@@ -1,7 +1,7 @@
 import type { SelectProps } from './types.js';
 interface ContentProps {
     searchable?: boolean;
-    commandListRef: React.RefObject<HTMLDivElement>;
+    commandListRef: React.RefObject<HTMLDivElement | null>;
     multiple?: boolean;
     selectedValues: string[];
     selectionIcon: 'auto' | 'checkmark';

package/dist/src/ui/components/data-entry/select/content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/select/content.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,UAAU,YAAY;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,aAAa,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC/B,eAAe,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IACxC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkH1C,CAAA"}
+{"version":3,"file":"content.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/select/content.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,UAAU,YAAY;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,aAAa,EAAE,MAAM,GAAG,WAAW,CAAA;IACnC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,OAAO,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAC/B,eAAe,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IACxC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACtC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkH1C,CAAA"}

package/dist/src/ui/components/data-entry/select/select-diff.d.ts

@@ -1,5 +1,6 @@
 import type { WithDifference } from '../../../../scalars/components/types.js';
 import type { SelectProps } from './types.js';
+import type { JSX } from 'react';
 interface SelectDiffProps extends Omit<WithDifference<string>, 'diffMode'> {
     value: string;
     label: SelectProps['label'];

package/dist/src/ui/components/data-entry/select/select-diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-diff.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/select/select-diff.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAE7C,UAAU,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC3B,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IAC7B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,GAAI,iEAA2E,eAAe,4CAkB7G,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"select-diff.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/select/select-diff.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yCAAyC,CAAA;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC7C,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,UAAU,eAAgB,SAAQ,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC;IACxE,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC3B,QAAQ,EAAE,WAAW,CAAC,UAAU,CAAC,CAAA;IACjC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;IAC7B,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAA;CAC1B;AAED,QAAA,MAAM,UAAU,GAAI,iEAA2E,eAAe,4CAkB7G,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/src/ui/components/data-entry/select/select-diff.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-diff.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/select/select-diff.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAA;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAYnE,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAmB,EAAE,EAAE;IAChH,OAAO,CACL,MAAC,SAAS,eACP,KAAK,IAAI,CACR,KAAC,SAAS,IAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,YAC1C,KAAK,GACI,CACb,EACD,KAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,IACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"select-diff.js","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/select/select-diff.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,mDAAmD,CAAA;AACxF,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAA;AAanE,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAmB,EAAE,EAAE;IAChH,OAAO,CACL,MAAC,SAAS,eACP,KAAK,IAAI,CACR,KAAC,SAAS,IAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,YAC1C,KAAK,GACI,CACb,EACD,KAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAC,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACV,IACQ,CACb,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/src/ui/components/data-entry/select/select.stories.d.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from './select.js';
+/**
+ * The `Select` component provides a dropdown selection field.
+ *
+ * Features include:
+ * - Single and multiple selection modes
+ * - Option icons
+ * - Searchable dropdown
+ * - Different selection indicators (radio, checkbox, checkmark)
+ * - Customizable content alignment
+ * - Disabled options support
+ *
+ * ## Select Customization
+ * The select component can be customized using two different props:
+ *
+ * 1. `className`: Styles for the trigger button and selected item display
+ *    - Controls the width, appearance, and layout of the select trigger
+ *    - Styles the selected item display in the trigger
+ *    - Example: `[&]:!w-[120px]` for fixed width of select trigger
+ *
+ * 2. `contentClassName`: Styles for the popover content and its elements
+ *    - Controls the appearance of the dropdown popover
+ *    - Styles the list container, list items, and search input
+ *    - Example: `[&_.select\\_\\_content]:!w-[120px]` for fixed width popover
+ *
+ * Available class patterns for targeting specific elements:
+ * - `.select__content`: Dropdown content container
+ * - `.select__list`: Options list container
+ * - `.select__list-item`: Individual option item
+ * - `.select__list-item-favorite`: Favorite option item
+ * - `.select__search`: Search input container
+ * - `.select__list-item--selected`: Selected item in the list
+ *
+ * Example of custom styling:
+ * ```tsx
+ * <Select
+ *   className={String.raw`
+ *     [&]:!w-[120px]
+ *     [&_.select\\_\\_item--selected]:text-green-500
+ *   `}
+ *   contentClassName={String.raw`
+ *     [&_.select\\_\\_content]:!w-[120px]
+ *     [&_.select\\_\\_list]:border-2
+ *     [&_.select\\_\\_list-item]:text-red-400
+ *   `}
+ * />
+ * ```
+ *
+ * > **Note:** This component does not have built-in validation. If you need built-in validation
+ * > you can use the [EnumField](?path=/docs/scalars-enum-field--readme)
+ * > component.
+ */
+declare const meta: Meta<typeof Select>;
+export default meta;
+type Story = StoryObj<typeof Select>;
+export declare const Default: Story;
+export declare const WithDescription: Story;
+export declare const Required: Story;
+export declare const WithDefaultValue: Story;
+export declare const Disabled: Story;
+export declare const WithError: Story;
+export declare const WithWarning: Story;
+export declare const Searchable: Story;
+export declare const NotClearable: Story;
+export declare const WithDisabledOption: Story;
+export declare const Multiple: Story;
+export declare const WithCheckmark: Story;
+export declare const WithIcon: Story;
+export declare const WithLongOptionLabel: Story;
+export declare const WithCustomizedSelect: Story;
+export declare const WithDifferencesAddition: Story;
+export declare const WithDifferencesRemoval: Story;
+export declare const WithDifferencesMixed: Story;
+//# sourceMappingURL=select.stories.d.ts.map

package/dist/src/ui/components/data-entry/select/select.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/ui/components/data-entry/select/select.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAOtD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AAEH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAkKC,CAAA;AAE/B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,MAAM,CAAC,CAAA;AAuCpC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAOtB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAO9B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAGD,eAAO,MAAM,SAAS,EAAE,KASvB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KASzB,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,KAQxB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAQ1B,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAMhC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAQtB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAQ3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAStB,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAajC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KA6ClC,CAAA;AAGD,eAAO,MAAM,uBAAuB,EAAE,KASrC,CAAA;AAED,eAAO,MAAM,sBAAsB,EAAE,KASpC,CAAA;AAED,eAAO,MAAM,oBAAoB,EAAE,KASlC,CAAA"}

package/dist/src/ui/components/data-entry/select/select.stories.js

@@ -0,0 +1,439 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '../../../components/icon/index.js';
+import { getDefaultArgTypes, getValidationArgTypes, PrebuiltArgTypes, StorybookControlCategory, } from '../../../../scalars/lib/storybook-arg-types.js';
+import { Select } from './select.js';
+/**
+ * The `Select` component provides a dropdown selection field.
+ *
+ * Features include:
+ * - Single and multiple selection modes
+ * - Option icons
+ * - Searchable dropdown
+ * - Different selection indicators (radio, checkbox, checkmark)
+ * - Customizable content alignment
+ * - Disabled options support
+ *
+ * ## Select Customization
+ * The select component can be customized using two different props:
+ *
+ * 1. `className`: Styles for the trigger button and selected item display
+ *    - Controls the width, appearance, and layout of the select trigger
+ *    - Styles the selected item display in the trigger
+ *    - Example: `[&]:!w-[120px]` for fixed width of select trigger
+ *
+ * 2. `contentClassName`: Styles for the popover content and its elements
+ *    - Controls the appearance of the dropdown popover
+ *    - Styles the list container, list items, and search input
+ *    - Example: `[&_.select\\_\\_content]:!w-[120px]` for fixed width popover
+ *
+ * Available class patterns for targeting specific elements:
+ * - `.select__content`: Dropdown content container
+ * - `.select__list`: Options list container
+ * - `.select__list-item`: Individual option item
+ * - `.select__list-item-favorite`: Favorite option item
+ * - `.select__search`: Search input container
+ * - `.select__list-item--selected`: Selected item in the list
+ *
+ * Example of custom styling:
+ * ```tsx
+ * <Select
+ *   className={String.raw`
+ *     [&]:!w-[120px]
+ *     [&_.select\\_\\_item--selected]:text-green-500
+ *   `}
+ *   contentClassName={String.raw`
+ *     [&_.select\\_\\_content]:!w-[120px]
+ *     [&_.select\\_\\_list]:border-2
+ *     [&_.select\\_\\_list-item]:text-red-400
+ *   `}
+ * />
+ * ```
+ *
+ * > **Note:** This component does not have built-in validation. If you need built-in validation
+ * > you can use the [EnumField](?path=/docs/scalars-enum-field--readme)
+ * > component.
+ */
+const meta = {
+    title: 'Data Entry/Select',
+    component: Select,
+    parameters: {
+        layout: 'padded',
+        chromatic: {
+            disableSnapshot: true,
+        },
+    },
+    decorators: [
+        (Story) => (_jsx("div", { style: { width: '280px', margin: '1rem auto 0' }, children: _jsx(Story, {}) })),
+    ],
+    tags: ['autodocs'],
+    argTypes: {
+        ...getDefaultArgTypes({
+            valueControlType: 'object',
+            valueType: 'string | string[]',
+        }),
+        ...PrebuiltArgTypes.placeholder,
+        options: {
+            control: 'object',
+            description: 'Array of options to display in the dropdown. These options will be displayed in the order they are provided.',
+            table: {
+                type: {
+                    summary: 'Array<{ value: string; label: string; icon?: IconName | React.ComponentType<{ className?: string }>; disabled?: boolean; }>',
+                },
+                defaultValue: { summary: '[]' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        favoriteOptions: {
+            control: 'object',
+            description: 'Array of favorite options to display in the dropdown. These options will be displayed at the top of the list.',
+            table: {
+                type: {
+                    summary: 'Array<{ value: string; label: string; icon?: IconName | React.ComponentType<{ className?: string }>; disabled?: boolean; }>',
+                },
+                defaultValue: { summary: '[]' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        multiple: {
+            control: 'boolean',
+            description: 'Whether multiple options can be selected',
+            table: {
+                type: { summary: 'boolean' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        selectionIcon: {
+            control: 'radio',
+            options: ['auto', 'checkmark'],
+            description: 'Selection icon to show in the options. ' +
+                'auto: Show a Radio for Single Select and a Checkbox for Multi Select. ' +
+                'checkmark: Show a checkmark icon for Single and Multi Select. ',
+            table: {
+                type: { summary: '"auto" | "checkmark"' },
+                defaultValue: { summary: '"auto"' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        selectionIconPosition: {
+            control: 'radio',
+            options: ['left', 'right'],
+            description: 'Selection icon position in options. Only apply if "selectionIcon" is "checkmark".',
+            table: {
+                type: { summary: '"left" | "right"' },
+                defaultValue: { summary: '"left"' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+            if: { arg: 'selectionIcon', eq: 'checkmark' },
+        },
+        searchable: {
+            control: 'boolean',
+            description: 'Whether to enable search functionality',
+            table: {
+                type: { summary: 'boolean' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        clearable: {
+            control: 'boolean',
+            description: 'Whether the selected option can be deselected by clicking it again. Only applies to single select.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+            if: { arg: 'multiple', truthy: false },
+        },
+        contentAlign: {
+            control: 'select',
+            description: 'Alignment of the dropdown',
+            options: ['start', 'end', 'center'],
+            table: {
+                defaultValue: { summary: 'start' },
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        className: {
+            control: 'text',
+            description: 'Custom class name for styling the select trigger button and selected item display. Use [&] selector for the trigger button or [&_.select\\_\\_item--selected] for the selected item.',
+            table: {
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        contentClassName: {
+            control: 'text',
+            description: 'Custom class name for styling the dropdown content. Can use direct Tailwind classes with [&] selector or target specific elements with [&_.select\\_\\_{element}]',
+            table: {
+                category: StorybookControlCategory.COMPONENT_SPECIFIC,
+            },
+        },
+        ...getValidationArgTypes({
+            enabledArgTypes: {
+                validators: false,
+                showErrorOnBlur: false,
+                showErrorOnChange: false,
+            },
+        }),
+        ...PrebuiltArgTypes.viewMode,
+        baseValue: {
+            control: 'object',
+            description: 'The base value of the select field',
+            table: {
+                type: { summary: 'string | string[]' },
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+        baseIcon: {
+            control: 'object',
+            description: 'The base value icon. (Displayed if baseValue is a string)',
+            table: {
+                type: { summary: 'IconName | React.ComponentType<{ className?: string }>' },
+                category: StorybookControlCategory.DIFF,
+            },
+        },
+    },
+    args: {
+        name: 'select',
+    },
+};
+export default meta;
+const IconComponent = (name) => {
+    const IconComponent = ({ className }) => _jsx(Icon, { name: name, size: 16, className: className });
+    IconComponent.displayName = `IconComponent(${name})`;
+    return IconComponent;
+};
+const defaultOptions = [
+    { value: 'Briefcase', label: 'Briefcase' },
+    { value: 'Drive', label: 'Drive' },
+    { value: 'Globe', label: 'Globe' },
+    { value: 'Settings', label: 'Settings' },
+];
+const defaultOptionsWithIcon = [
+    {
+        value: 'Briefcase',
+        label: 'Briefcase',
+        icon: IconComponent('Briefcase'),
+    },
+    {
+        value: 'Drive',
+        label: 'Drive',
+        icon: IconComponent('Drive'),
+    },
+    {
+        value: 'Globe',
+        label: 'Globe',
+        icon: IconComponent('Globe'),
+    },
+    {
+        value: 'Settings',
+        label: 'Settings',
+        icon: IconComponent('Settings'),
+    },
+];
+// Basic examples
+export const Default = {
+    args: {
+        label: 'Favorite icon name',
+        options: defaultOptions,
+        placeholder: 'Select an icon name',
+    },
+};
+export const WithDescription = {
+    args: {
+        label: 'Favorite icon name',
+        description: 'Choose your favorite icon name',
+        options: defaultOptions,
+        placeholder: 'Select an icon name',
+    },
+};
+export const Required = {
+    args: {
+        label: 'Required field',
+        options: defaultOptions,
+        placeholder: 'Must select at least one option',
+        required: true,
+    },
+};
+export const WithDefaultValue = {
+    args: {
+        label: 'Preset selection',
+        options: defaultOptions,
+        placeholder: 'Select an icon name',
+        defaultValue: 'Drive',
+    },
+};
+export const Disabled = {
+    args: {
+        label: 'Disabled field',
+        options: defaultOptions,
+        placeholder: 'Select an icon name',
+        value: 'Drive',
+        disabled: true,
+    },
+};
+// Validation states
+export const WithError = {
+    args: {
+        label: 'With error',
+        options: defaultOptions,
+        placeholder: 'Select icon names',
+        value: ['Drive'],
+        multiple: true,
+        errors: ['Please select at least two options'],
+    },
+};
+export const WithWarning = {
+    args: {
+        label: 'With warning',
+        options: defaultOptions,
+        placeholder: 'Select icon names',
+        value: ['Drive', 'Globe'],
+        multiple: true,
+        warnings: ['Some selected options may not be available in the future'],
+    },
+};
+// Special features
+export const Searchable = {
+    args: {
+        label: 'Searchable field',
+        description: 'Type to search through options',
+        options: defaultOptions,
+        placeholder: 'Select an icon name',
+        searchable: true,
+    },
+};
+export const NotClearable = {
+    args: {
+        label: 'Not clearable select',
+        description: 'Once selected, the option cannot be deselected by clicking it again',
+        options: defaultOptions,
+        placeholder: 'Select an option',
+        clearable: false,
+    },
+};
+export const WithDisabledOption = {
+    args: {
+        label: 'With disabled option',
+        options: [...defaultOptions, { value: 'disabled', label: 'Disabled option', disabled: true }],
+        placeholder: 'Select an icon name',
+    },
+};
+export const Multiple = {
+    args: {
+        label: 'Multi select',
+        description: 'You can select multiple options',
+        options: defaultOptions,
+        placeholder: 'Select icon names',
+        multiple: true,
+    },
+};
+export const WithCheckmark = {
+    args: {
+        label: 'With checkmark',
+        description: 'This select shows a checkmark icon for selected option',
+        options: defaultOptions,
+        selectionIcon: 'checkmark',
+        placeholder: 'Select an icon name',
+    },
+};
+export const WithIcon = {
+    args: {
+        label: 'Favorite icon',
+        description: 'Choose your favorite icon',
+        options: defaultOptionsWithIcon,
+        selectionIcon: 'checkmark',
+        selectionIconPosition: 'right',
+        placeholder: 'Select an icon',
+    },
+};
+export const WithLongOptionLabel = {
+    args: {
+        label: 'With long option label',
+        description: 'The Select handles long option labels',
+        options: [
+            {
+                value: 'very-long-option-1',
+                label: 'This is a very long option label that might need truncation in the UI',
+            },
+            ...defaultOptions,
+        ],
+        placeholder: 'Select an option',
+    },
+};
+export const WithCustomizedSelect = {
+    args: {
+        label: 'Customized Select',
+        description: 'A select with custom styling for all its elements',
+        options: defaultOptionsWithIcon,
+        placeholder: 'Select an option',
+        selectionIcon: 'checkmark',
+        selectionIconPosition: 'right',
+        className: String.raw `
+    .select__list-item--selected
+      [&_.select\\_\\_list-item--selected]:text-green-500
+      [&_.select\\_\\_list-item--selected]:[&>div]:text-green-500
+      [&_.select\\_\\_list-item--selected]:[&>div]:gap-2
+      [&_.select\\_\\_list-item--selected]:[&>svg]:text-green-500
+      [&_.select\\_\\list-item--selected]:[&>svg]:size-8
+    `,
+        contentClassName: String.raw `
+    [&_.select\\_\\_content]:border-2
+    [&_.select\\_\\_content]:rounded-lg
+    [&_.select\\_\\_content]:border-cyan-400/30
+    [&_.select\\_\\_content]:bg-white
+    [&_.select\\_\\_content]:shadow-lg
+    [&_.select\\_\\_list]:border-2
+    [&_.select\\_\\_list]:border-red-500
+    [&_.select\\_\\_list-item-favorite]:text-red-400
+    [&_.select\\_\\_list-item-favorite]:font-bold
+    [&_.select\\_\\_list-item-favorite]:cursor-pointer
+    [&_.select\\_\\_list-item-favorite]:data-[selected=true]:text-red-900
+    [&_.select\\_\\_list-item]:text-red-400
+    [&_.select\\_\\_list-item]:font-bold
+    [&_.select\\_\\_list-item]:cursor-pointer
+    [&_.select\\_\\_list-item]:data-[selected=true]:text-red-900
+    [&_.select\\_\\_list-item]:data-[disabled=true]:opacity-50
+    [&_.select\\_\\_list-item]:data-[disabled=true]:cursor-not-allowed
+    [&_.select\\_\\_list-item]:[&>svg]:text-red-500
+    [&_.select\\_\\_list-item]:[&>span]:text-blue-500
+    [&_.select\\_\\_search]:text-red-500
+    [&_.select\\_\\_search]:[&>svg]:text-red-500
+    [&_.select\\_\\_item--selected]:text-red-500
+    [&_.select\\_\\_item--selected]:[&>div]:text-red-500
+    [&_.select\\_\\_item--selected]:[&>div]:gap-2
+    [&_.select\\_\\_item--selected]:[&>svg]:text-red-500
+    [&_.select\\_\\_item--selected]:[&>svg]:size-8
+  `,
+    },
+};
+// Differences examples
+export const WithDifferencesAddition = {
+    args: {
+        label: 'Icon name addition',
+        options: defaultOptionsWithIcon,
+        value: 'Settings',
+        baseValue: 'Briefcase',
+        baseIcon: 'Briefcase',
+        viewMode: 'addition',
+    },
+};
+export const WithDifferencesRemoval = {
+    args: {
+        label: 'Icon name removal',
+        options: defaultOptionsWithIcon,
+        value: 'Settings',
+        baseValue: 'Briefcase',
+        baseIcon: 'Briefcase',
+        viewMode: 'removal',
+    },
+};
+export const WithDifferencesMixed = {
+    args: {
+        label: 'Icon name mixed',
+        options: defaultOptionsWithIcon,
+        value: 'Settings',
+        baseValue: 'Briefcase',
+        baseIcon: 'Briefcase',
+        viewMode: 'mixed',
+    },
+};
+//# sourceMappingURL=select.stories.js.map