1  import type { Meta, StoryObj } from '@storybook/react-vite'
 2  import { Input } from './Input'
 3  import { Search, Eye } from 'lucide-react'
 4  
 5  const meta: Meta<typeof Input> = {
 6    title: 'Primitives/Input',
 7    component: Input,
 8    parameters: {
 9      layout: 'centered',
10      backgrounds: {
11        default: 'dark',
12        values: [
13          { name: 'dark', value: '#0F0F0F' },
14          { name: 'light', value: '#FFFFFF' },
15        ],
16      },
17    },
18  }
19  export default meta
20  type Story = StoryObj<typeof Input>
21  
22  export const Default: Story = {
23    args: { label: 'Recipient address', placeholder: 'acdc1...' },
24    decorators: [(Story) => <div style={{ width: 320 }}><Story /></div>],
25  }
26  export const WithError: Story = {
27    args: { label: 'Amount', placeholder: '0.0000', error: 'Insufficient balance', value: '9999', readOnly: true },
28    decorators: [(Story) => <div style={{ width: 320 }}><Story /></div>],
29  }
30  export const WithIcon: Story = {
31    args: { label: 'Search', placeholder: 'Search transactions...', leftIcon: <Search size={14} /> },
32    decorators: [(Story) => <div style={{ width: 320 }}><Story /></div>],
33  }
34  export const Disabled: Story = {
35    args: { label: 'Address', placeholder: 'acdc1...', disabled: true },
36    decorators: [(Story) => <div style={{ width: 320 }}><Story /></div>],
37  }
38  export const Prominent: Story = {
39    args: {
40      label: 'Amount',
41      placeholder: '0.0000',
42      rightIcon: <span style={{ fontSize: '0.75rem', color: 'oklch(52.4% 0.22 264)' }}>AX</span>,
43      style: { fontSize: '1.125rem', padding: '0.625rem 1rem', paddingRight: '2.5rem' },
44    },
45    decorators: [(Story) => <div style={{ width: 320 }}><Story /></div>],
46  }
47  export const Minimal: Story = {
48    args: { placeholder: 'Search...', style: { border: 'none', borderBottom: '1px solid oklch(25% 0 0)', borderRadius: 0, background: 'transparent' } },
49    decorators: [(Story) => <div style={{ width: 320 }}><Story /></div>],
50  }