@oneplatformdev/ui 0.1.99-beta.297 → 0.1.99-beta.299

package/Dropzone/Dropzone.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Dropzone } from './Dropzone';\r\nimport {\r\n  DEFAULT_DOCUMENT_TYPES,\r\n  DEFAULT_IMAGES_TYPES,\r\n  DropzoneValueItem,\r\n  DEFAULT_VIDEO_TYPES,\r\n} from './Dropzone.types';\r\n\r\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\r\n  initialValue?: string[];\r\n};\r\n\r\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\r\n  const [value, setValue] = useState<DropzoneValueItem[]>(initialValue);\r\n\r\n  return (\r\n    <div className=\"w-full space-y-3\">\r\n      <Dropzone\r\n        {...args}\r\n        value={value}\r\n        onChangeValue={(items) => setValue(items)}\r\n      />\r\n\r\n      <div className=\"text-xs text-muted-foreground\">\r\n        value:\r\n        <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\r\n          {JSON.stringify(value, null, 2)}\r\n        </pre>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst meta = {\r\n  title: 'Dropzone',\r\n  component: Dropzone,\r\n  parameters: {\r\n    layout: 'centered',\r\n  },\r\n  args: {\r\n    labelSelectedFiles: 'Selected files',\r\n    labelFileTooLarge: 'File is too large',\r\n    maxFiles: 1,\r\n    maxSizeMB: 100,\r\n    singlePick: true,\r\n    className: 'w-full',\r\n  },\r\n  argTypes: {\r\n    onChangeValue: { control: false },\r\n    value: { control: false },\r\n  },\r\n  decorators: [\r\n    (Story) => (\r\n      <div className=\"p-6 w-[680px]\">\r\n        <Story />\r\n      </div>\r\n    ),\r\n  ],\r\n} satisfies Meta<typeof Dropzone>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Images: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload image',\r\n    labelDropzoneSubPrompt: 'Formats: .jpg .jpeg .png .webp',\r\n    maxSizeMB: 5,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Files: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n    labelDropzonePrompt: 'Upload file',\r\n    labelDropzoneSubPrompt: 'Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Videos: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoYoutubeLink: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm or YouTube URL as value',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => {\r\n    const YoutubeStory = () => {\r\n      const [url, setUrl] = useState('https://www.youtube.com/watch?v=dQw4w9WgXcQ');\r\n      const value = url.trim() ? [url.trim()] : [];\r\n\r\n      return (\r\n        <div className=\"w-full space-y-3\">\r\n          <input\r\n            type=\"text\"\r\n            value={url}\r\n            onChange={(event) => setUrl(event.target.value)}\r\n            placeholder=\"Paste YouTube URL\"\r\n            className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n          />\r\n\r\n          <Dropzone\r\n            {...args}\r\n            value={value}\r\n            onChangeValue={(items) => {\r\n              const next = items[0];\r\n              if (typeof next === 'string') {\r\n                setUrl(next);\r\n              }\r\n            }}\r\n          />\r\n        </div>\r\n      );\r\n    };\r\n\r\n    return <YoutubeStory />;\r\n  },\r\n};\r\n\r\nfunction UploadingDropzoneMock(args: React.ComponentProps<typeof Dropzone>) {\r\n  const [value, setValue] = useState<DropzoneValueItem[]>([]);\r\n  const [isUploading, setIsUploading] = useState(false);\r\n  const [uploadProgress, setUploadProgress] = useState(0);\r\n  const [uploadLoadedBytes, setUploadLoadedBytes] = useState(0);\r\n  const [uploadTotalBytes, setUploadTotalBytes] = useState(0);\r\n  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timerRef.current) clearInterval(timerRef.current);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\"w-full space-y-3\">\r\n      <Dropzone\r\n        {...args}\r\n        value={value}\r\n        isUploading={isUploading}\r\n        uploadProgress={uploadProgress}\r\n        uploadLoadedBytes={uploadLoadedBytes}\r\n        uploadTotalBytes={uploadTotalBytes}\r\n        onCancelUpload={() => {\r\n          if (timerRef.current) clearInterval(timerRef.current);\r\n          timerRef.current = null;\r\n          setIsUploading(false);\r\n          setUploadProgress(0);\r\n          setUploadLoadedBytes(0);\r\n          setUploadTotalBytes(0);\r\n        }}\r\n        onChangeValue={(items) => {\r\n          setValue(items);\r\n          if (!items.length) return;\r\n\r\n          if (timerRef.current) clearInterval(timerRef.current);\r\n          timerRef.current = null;\r\n\r\n          const selected = items[0];\r\n          const totalBytes =\r\n            selected instanceof File ? selected.size : 50 * 1024 * 1024;\r\n          let loadedBytes = 0;\r\n\r\n          setUploadTotalBytes(totalBytes);\r\n          setUploadLoadedBytes(0);\r\n          setUploadProgress(0);\r\n          setIsUploading(true);\r\n\r\n          timerRef.current = setInterval(() => {\r\n            loadedBytes = Math.min(totalBytes, loadedBytes + totalBytes * 0.08);\r\n            const progress = totalBytes ? Math.round((loadedBytes / totalBytes) * 100) : 0;\r\n\r\n            setUploadLoadedBytes(loadedBytes);\r\n            setUploadProgress(progress);\r\n\r\n            if (loadedBytes >= totalBytes) {\r\n              if (timerRef.current) clearInterval(timerRef.current);\r\n              timerRef.current = null;\r\n              setTimeout(() => setIsUploading(false), 350);\r\n            }\r\n          }, 250);\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const VideoRemoteUrl: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => {\r\n    const RemoteVideoStory = () => {\r\n      const [url, setUrl] = useState(\r\n        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'\r\n      );\r\n      const value: DropzoneValueItem[] = url.trim() ? [url.trim()] : [];\r\n\r\n      return (\r\n        <div className=\"w-full space-y-3\">\r\n          <input\r\n            type=\"text\"\r\n            value={url}\r\n            onChange={(e) => setUrl(e.target.value)}\r\n            placeholder=\"Paste remote video URL (.mp4, .avi, .webm)\"\r\n            className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n          />\r\n          <Dropzone\r\n            {...args}\r\n            value={value}\r\n            onChangeValue={(items) => {\r\n              const next = items[0];\r\n              setUrl(typeof next === 'string' ? next : '');\r\n            }}\r\n          />\r\n        </div>\r\n      );\r\n    };\r\n\r\n    return <RemoteVideoStory />;\r\n  },\r\n};\r\n\r\nexport const VideoUploadingMock: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    labelUploadingTitle: 'Завантаження відео...',\r\n    labelUploadingHint: 'Будь ласка, не закривайте сторінку',\r\n    labelUploadingActionCancel: 'Скасувати',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <UploadingDropzoneMock {...args} />,\r\n};\r\n\r\nexport const MultiImagesPersistent: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n    labelOrClickToSelect: 'Завантажити файл',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const MultiImagesCoverFirst: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n    labelOrClickToSelect: 'Завантажити файл',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    coverFirstItem: true,\r\n    className: 'w-[400px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const MultilinePromptSpacing: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Додайте файл\\nПеретягніть сюди або натисніть',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP до 5 МБ кожне',\r\n    labelOrClickToSelect: 'Обрати',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n    labelDropzonePrompt: 'Upload file...',\r\n    labelDropzoneSubPrompt: 'PDF only, max 1 MB',\r\n    labelFileTooLarge: 'File is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: ['application/pdf'],\r\n    labelDropzonePrompt: 'Upload file...',\r\n    labelDropzoneSubPrompt: 'Only PDF is supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload a PDF file.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload photo...',\r\n    labelDropzoneSubPrompt: 'JPG/PNG/WEBP, max 1 MB',\r\n    labelFileTooLarge: 'Photo is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload photo...',\r\n    labelDropzoneSubPrompt: 'Only image files are supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload an image file.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Drag photos or choose files',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP · max 1 MB each',\r\n    labelFileTooLarge: 'One or more photos are too large. Max size is 1 MB each.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Drag photos or choose files',\r\n    labelDropzoneSubPrompt: 'Only image files are supported',\r\n    labelInvalidFileType: 'One or more files have invalid type.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video...',\r\n    labelDropzoneSubPrompt: 'MP4/MOV/AVI/WEBM, max 1 MB',\r\n    labelFileTooLarge: 'Video is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video...',\r\n    labelDropzoneSubPrompt: 'Only video files are supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload a video file.',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","items","meta","Story","Images","DEFAULT_IMAGES_TYPES","Files","DEFAULT_DOCUMENT_TYPES","Videos","DEFAULT_VIDEO_TYPES","VideoYoutubeLink","url","setUrl","event","next","UploadingDropzoneMock","isUploading","setIsUploading","uploadProgress","setUploadProgress","uploadLoadedBytes","setUploadLoadedBytes","uploadTotalBytes","setUploadTotalBytes","timerRef","useRef","useEffect","selected","totalBytes","loadedBytes","progress","VideoRemoteUrl","e","VideoUploadingMock","MultiImagesPersistent","MultiImagesCoverFirst","MultilinePromptSpacing","FileErrorTooLarge","FileErrorInvalidType","PhotoErrorTooLarge","PhotoErrorInvalidType","PhotosMultiErrorTooLarge","PhotosMultiErrorInvalidType","VideoErrorTooLarge","VideoErrorInvalidType"],"mappings":"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"}
+{"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Dropzone } from './Dropzone';\r\nimport {\r\n  DEFAULT_AUDIO_TYPES,\r\n  DEFAULT_DOCUMENT_TYPES,\r\n  DEFAULT_IMAGES_TYPES,\r\n  DropzoneValueItem,\r\n  DEFAULT_VIDEO_TYPES,\r\n} from './Dropzone.types';\r\n\r\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\r\n  initialValue?: string[];\r\n};\r\n\r\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\r\n  const [value, setValue] = useState<DropzoneValueItem[]>(initialValue);\r\n\r\n  return (\r\n    <div className=\"w-full space-y-3\">\r\n      <Dropzone\r\n        {...args}\r\n        value={value}\r\n        onChangeValue={(items) => setValue(items)}\r\n      />\r\n\r\n      <div className=\"text-xs text-muted-foreground\">\r\n        value:\r\n        <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\r\n          {JSON.stringify(value, null, 2)}\r\n        </pre>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst meta = {\r\n  title: 'Dropzone',\r\n  component: Dropzone,\r\n  parameters: {\r\n    layout: 'centered',\r\n  },\r\n  args: {\r\n    labelSelectedFiles: 'Selected files',\r\n    labelFileTooLarge: 'File is too large',\r\n    maxFiles: 1,\r\n    maxSizeMB: 100,\r\n    singlePick: true,\r\n    className: 'w-full',\r\n  },\r\n  argTypes: {\r\n    onChangeValue: { control: false },\r\n    value: { control: false },\r\n  },\r\n  decorators: [\r\n    (Story) => (\r\n      <div className=\"p-6 w-[680px]\">\r\n        <Story />\r\n      </div>\r\n    ),\r\n  ],\r\n} satisfies Meta<typeof Dropzone>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Images: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload image',\r\n    labelDropzoneSubPrompt: 'Formats: .jpg .jpeg .png .webp',\r\n    maxSizeMB: 5,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Files: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n    labelDropzonePrompt: 'Upload file',\r\n    labelDropzoneSubPrompt: 'Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Videos: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoYoutubeLink: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm or YouTube URL as value',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => {\r\n    const YoutubeStory = () => {\r\n      const [url, setUrl] = useState('https://www.youtube.com/watch?v=dQw4w9WgXcQ');\r\n      const value = url.trim() ? [url.trim()] : [];\r\n\r\n      return (\r\n        <div className=\"w-full space-y-3\">\r\n          <input\r\n            type=\"text\"\r\n            value={url}\r\n            onChange={(event) => setUrl(event.target.value)}\r\n            placeholder=\"Paste YouTube URL\"\r\n            className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n          />\r\n\r\n          <Dropzone\r\n            {...args}\r\n            value={value}\r\n            onChangeValue={(items) => {\r\n              const next = items[0];\r\n              if (typeof next === 'string') {\r\n                setUrl(next);\r\n              }\r\n            }}\r\n          />\r\n        </div>\r\n      );\r\n    };\r\n\r\n    return <YoutubeStory />;\r\n  },\r\n};\r\n\r\nfunction UploadingDropzoneMock(args: React.ComponentProps<typeof Dropzone>) {\r\n  const [value, setValue] = useState<DropzoneValueItem[]>([]);\r\n  const [isUploading, setIsUploading] = useState(false);\r\n  const [uploadProgress, setUploadProgress] = useState(0);\r\n  const [uploadLoadedBytes, setUploadLoadedBytes] = useState(0);\r\n  const [uploadTotalBytes, setUploadTotalBytes] = useState(0);\r\n  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (timerRef.current) clearInterval(timerRef.current);\r\n    };\r\n  }, []);\r\n\r\n  return (\r\n    <div className=\"w-full space-y-3\">\r\n      <Dropzone\r\n        {...args}\r\n        value={value}\r\n        isUploading={isUploading}\r\n        uploadProgress={uploadProgress}\r\n        uploadLoadedBytes={uploadLoadedBytes}\r\n        uploadTotalBytes={uploadTotalBytes}\r\n        onCancelUpload={() => {\r\n          if (timerRef.current) clearInterval(timerRef.current);\r\n          timerRef.current = null;\r\n          setIsUploading(false);\r\n          setUploadProgress(0);\r\n          setUploadLoadedBytes(0);\r\n          setUploadTotalBytes(0);\r\n        }}\r\n        onChangeValue={(items) => {\r\n          setValue(items);\r\n          if (!items.length) return;\r\n\r\n          if (timerRef.current) clearInterval(timerRef.current);\r\n          timerRef.current = null;\r\n\r\n          const selected = items[0];\r\n          const totalBytes =\r\n            selected instanceof File ? selected.size : 50 * 1024 * 1024;\r\n          let loadedBytes = 0;\r\n\r\n          setUploadTotalBytes(totalBytes);\r\n          setUploadLoadedBytes(0);\r\n          setUploadProgress(0);\r\n          setIsUploading(true);\r\n\r\n          timerRef.current = setInterval(() => {\r\n            loadedBytes = Math.min(totalBytes, loadedBytes + totalBytes * 0.08);\r\n            const progress = totalBytes ? Math.round((loadedBytes / totalBytes) * 100) : 0;\r\n\r\n            setUploadLoadedBytes(loadedBytes);\r\n            setUploadProgress(progress);\r\n\r\n            if (loadedBytes >= totalBytes) {\r\n              if (timerRef.current) clearInterval(timerRef.current);\r\n              timerRef.current = null;\r\n              setTimeout(() => setIsUploading(false), 350);\r\n            }\r\n          }, 250);\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nexport const VideoRemoteUrl: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => {\r\n    const RemoteVideoStory = () => {\r\n      const [url, setUrl] = useState(\r\n        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'\r\n      );\r\n      const value: DropzoneValueItem[] = url.trim() ? [url.trim()] : [];\r\n\r\n      return (\r\n        <div className=\"w-full space-y-3\">\r\n          <input\r\n            type=\"text\"\r\n            value={url}\r\n            onChange={(e) => setUrl(e.target.value)}\r\n            placeholder=\"Paste remote video URL (.mp4, .avi, .webm)\"\r\n            className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n          />\r\n          <Dropzone\r\n            {...args}\r\n            value={value}\r\n            onChangeValue={(items) => {\r\n              const next = items[0];\r\n              setUrl(typeof next === 'string' ? next : '');\r\n            }}\r\n          />\r\n        </div>\r\n      );\r\n    };\r\n\r\n    return <RemoteVideoStory />;\r\n  },\r\n};\r\n\r\nexport const VideoUploadingMock: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video',\r\n    labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n    labelUploadingTitle: 'Завантаження відео...',\r\n    labelUploadingHint: 'Будь ласка, не закривайте сторінку',\r\n    labelUploadingActionCancel: 'Скасувати',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n  },\r\n  render: (args) => <UploadingDropzoneMock {...args} />,\r\n};\r\n\r\nexport const MultiImagesPersistent: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n    labelOrClickToSelect: 'Завантажити файл',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const MultiFilesList: Story = {\r\n  args: {\r\n    acceptTypes: [\r\n      ...DEFAULT_DOCUMENT_TYPES,\r\n      ...DEFAULT_IMAGES_TYPES,\r\n      ...DEFAULT_VIDEO_TYPES,\r\n      ...DEFAULT_AUDIO_TYPES,\r\n    ],\r\n    labelDropzonePrompt: 'Перетягніть файли або оберіть',\r\n    labelDropzoneSubPrompt:\r\n      'PDF, DOC/DOCX, XLS/XLSX, зображення, відео, аудіо · до 50 МБ кожне',\r\n    labelOrClickToSelect: 'Завантажити файл',\r\n    labelSelectedFiles: 'Обрані файли',\r\n    maxSizeMB: 50,\r\n    maxFiles: 4,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'file-list',\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const MultiImagesCoverFirst: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n    labelOrClickToSelect: 'Завантажити файл',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    coverFirstItem: true,\r\n    className: 'w-[400px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const MultilinePromptSpacing: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Додайте файл\\nПеретягніть сюди або натисніть',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP до 5 МБ кожне',\r\n    labelOrClickToSelect: 'Обрати',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n    labelDropzonePrompt: 'Upload file...',\r\n    labelDropzoneSubPrompt: 'PDF only, max 1 MB',\r\n    labelFileTooLarge: 'File is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: ['application/pdf'],\r\n    labelDropzonePrompt: 'Upload file...',\r\n    labelDropzoneSubPrompt: 'Only PDF is supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload a PDF file.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload photo...',\r\n    labelDropzoneSubPrompt: 'JPG/PNG/WEBP, max 1 MB',\r\n    labelFileTooLarge: 'Photo is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Upload photo...',\r\n    labelDropzoneSubPrompt: 'Only image files are supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload an image file.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Drag photos or choose files',\r\n    labelDropzoneSubPrompt: 'JPG, PNG, WEBP · max 1 MB each',\r\n    labelFileTooLarge: 'One or more photos are too large. Max size is 1 MB each.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_IMAGES_TYPES,\r\n    labelDropzonePrompt: 'Drag photos or choose files',\r\n    labelDropzoneSubPrompt: 'Only image files are supported',\r\n    labelInvalidFileType: 'One or more files have invalid type.',\r\n    maxSizeMB: 5,\r\n    maxFiles: 20,\r\n    singlePick: false,\r\n    persistentDropzone: true,\r\n    previewVariant: 'image-grid',\r\n    className: 'w-[598px]',\r\n    classNames: {\r\n      previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n      previewImage: 'rounded-[8px] object-cover',\r\n    },\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorTooLarge: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video...',\r\n    labelDropzoneSubPrompt: 'MP4/MOV/AVI/WEBM, max 1 MB',\r\n    labelFileTooLarge: 'Video is too large. Max size is 1 MB.',\r\n    maxSizeMB: 1,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorInvalidType: Story = {\r\n  args: {\r\n    acceptTypes: DEFAULT_VIDEO_TYPES,\r\n    labelDropzonePrompt: 'Upload video...',\r\n    labelDropzoneSubPrompt: 'Only video files are supported',\r\n    labelInvalidFileType: 'Invalid file type. Please upload a video file.',\r\n    maxSizeMB: 100,\r\n    maxFiles: 1,\r\n    singlePick: true,\r\n    className: 'w-[598px]',\r\n  },\r\n  render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","items","meta","Story","Images","DEFAULT_IMAGES_TYPES","Files","DEFAULT_DOCUMENT_TYPES","Videos","DEFAULT_VIDEO_TYPES","VideoYoutubeLink","url","setUrl","event","next","UploadingDropzoneMock","isUploading","setIsUploading","uploadProgress","setUploadProgress","uploadLoadedBytes","setUploadLoadedBytes","uploadTotalBytes","setUploadTotalBytes","timerRef","useRef","useEffect","selected","totalBytes","loadedBytes","progress","VideoRemoteUrl","e","VideoUploadingMock","MultiImagesPersistent","MultiFilesList","DEFAULT_AUDIO_TYPES","MultiImagesCoverFirst","MultilinePromptSpacing","FileErrorTooLarge","FileErrorInvalidType","PhotoErrorTooLarge","PhotoErrorInvalidType","PhotosMultiErrorTooLarge","PhotosMultiErrorInvalidType","VideoErrorTooLarge","VideoErrorInvalidType"],"mappings":"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"}

package/Dropzone/Dropzone.types.d.ts

@@ -44,7 +44,7 @@ export interface DropzoneProps extends DropzoneTranslations, React.HTMLAttribute
         size?: number;
     };
     persistentDropzone?: boolean;
-    previewVariant?: 'default' | 'image-grid';
+    previewVariant?: 'default' | 'image-grid' | 'file-list';
     designVariant?: 'legacy' | 'modern';
     documentUploadCard?: boolean;
     /**
@@ -64,6 +64,7 @@ export interface DropzoneStyles {
 export declare const DEFAULT_DOCUMENT_TYPES: string[];
 export declare const DEFAULT_IMAGES_TYPES: string[];
 export declare const DEFAULT_VIDEO_TYPES: string[];
+export declare const DEFAULT_AUDIO_TYPES: string[];
 export declare const DEFAULT_FILE_TYPES: string[];
 export interface DropzoneControl {
     setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;

package/Dropzone/Dropzone.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.types.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.types.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropzone.types.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.types.tsx"],"names":[],"mappings":"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"}

package/Dropzone/Dropzone.types.js

@@ -1,4 +1,4 @@
-const e = [
+const o = [
   "application/pdf",
   "application/msword",
   "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
@@ -8,7 +8,7 @@ const e = [
   "application/vnd.openxmlformats-officedocument.presentationml.presentation",
   "text/csv",
   "text/plain"
-], o = [
+], e = [
   "image/png",
   "image/jpeg",
   "image/jpg",
@@ -20,11 +20,22 @@ const e = [
   "video/x-msvideo",
   "video/webm",
   "video/avi"
-], n = e;
+], a = [
+  "audio/mpeg",
+  // mp3
+  "audio/wav",
+  "audio/x-wav",
+  "audio/ogg",
+  "audio/mp4",
+  // m4a
+  "audio/aac",
+  "audio/webm"
+], p = o;
 export {
-  e as DEFAULT_DOCUMENT_TYPES,
-  n as DEFAULT_FILE_TYPES,
-  o as DEFAULT_IMAGES_TYPES,
+  a as DEFAULT_AUDIO_TYPES,
+  o as DEFAULT_DOCUMENT_TYPES,
+  p as DEFAULT_FILE_TYPES,
+  e as DEFAULT_IMAGES_TYPES,
   i as DEFAULT_VIDEO_TYPES
 };
 //# sourceMappingURL=Dropzone.types.js.map

package/Dropzone/Dropzone.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.types.js","sources":["../../src/Dropzone/Dropzone.types.tsx"],"sourcesContent":["import { FileRejection } from 'react-dropzone';\r\nimport { Dispatch, SetStateAction } from 'react';\r\n\r\nexport type DropzoneValueItem = File | string;\r\n\r\nexport interface FilePreviewProps {\r\n  item: DropzoneValueItem;\r\n  styles?: Pick<\r\n    DropzoneStyles,\r\n    'previewWraper' | 'previewImage' | 'previewFile'\r\n  >;\r\n}\r\n\r\nexport interface DropzoneTranslations {\r\n  labelDropzonePrompt?: string;\r\n  labelDropzoneSubPrompt?: string;\r\n  labelOrClickToSelect?: string;\r\n  labelSelectedFiles?: string;\r\n  labelUploadErrors?: string;\r\n  labelFileTooLarge?: string;\r\n  labelInvalidFileType?: string;\r\n  labelVideoUploaded?: string;\r\n  labelVideoReplace?: string;\r\n}\r\n\r\nexport interface DropzoneProps\r\n  extends DropzoneTranslations,\r\n    React.HTMLAttributes<HTMLDivElement> {\r\n  acceptTypes?: string[];\r\n  maxSizeMB: number;\r\n  maxFiles?: number;\r\n  onErrors?: (errors: FileRejection[]) => void;\r\n  hideErrors?: boolean;\r\n  disabled?: boolean;\r\n  classNames?: DropzoneStyles;\r\n  value?: DropzoneValueItem[];\r\n  onChangeValue?: (items: DropzoneValueItem[]) => void;\r\n  singlePick?: boolean;\r\n  labelDropzoneClassname?: string;\r\n  labelDropzoneSubClassname?: string;\r\n  isUploading?: boolean;\r\n  uploadProgress?: number;\r\n  uploadLoadedBytes?: number;\r\n  uploadTotalBytes?: number;\r\n  onCancelUpload?: () => void;\r\n  labelUploadingTitle?: string;\r\n  labelUploadingHint?: string;\r\n  labelUploadingActionCancel?: string;\r\n  labelUploadingOf?: string;\r\n  playerTranslations?: Partial<Record<string, string>>;\r\n  singlePickFileInfo?: { name?: string; size?: number };\r\n  persistentDropzone?: boolean;\r\n  previewVariant?: 'default' | 'image-grid';\r\n  designVariant?: 'legacy' | 'modern';\r\n  documentUploadCard?: boolean;\r\n  /**\r\n   * In `image-grid` variant, render the first item as a full-width cover preview.\r\n   * Other items keep the regular grid size. The remove (X) button is preserved.\r\n   */\r\n  coverFirstItem?: boolean;\r\n}\r\n\r\nexport interface DropzoneStyles {\r\n  idleWrapper?: string;\r\n  previewWrapper?: string;\r\n  errorWrapper?: string;\r\n  previewWraper?: string;\r\n  previewImage?: string;\r\n  previewFile?: string;\r\n}\r\n\r\nexport const DEFAULT_DOCUMENT_TYPES = [\r\n  'application/pdf',\r\n  'application/msword',\r\n  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\r\n  'application/vnd.ms-excel',\r\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\r\n  'application/vnd.ms-powerpoint',\r\n  'application/vnd.openxmlformats-officedocument.presentationml.presentation',\r\n  'text/csv',\r\n  'text/plain',\r\n];\r\n\r\nexport const DEFAULT_IMAGES_TYPES = [\r\n  'image/png',\r\n  'image/jpeg',\r\n  'image/jpg',\r\n  'image/webp',\r\n  // 'image/gif', // TODO: normalize this type\r\n];\r\n\r\nexport const DEFAULT_VIDEO_TYPES = [\r\n  'video/mp4',\r\n  'video/quicktime',\r\n  'video/x-msvideo',\r\n  'video/webm',\r\n  'video/avi'\r\n];\r\n\r\n// Backward-compatible alias.\r\nexport const DEFAULT_FILE_TYPES = DEFAULT_DOCUMENT_TYPES;\r\n\r\n\r\nexport interface DropzoneControl {\r\n  setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;\r\n}\r\n"],"names":["DEFAULT_DOCUMENT_TYPES","DEFAULT_IMAGES_TYPES","DEFAULT_VIDEO_TYPES","DEFAULT_FILE_TYPES"],"mappings":"AAuEO,MAAMA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAEF,GAEaC,IAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAqBH;"}
+{"version":3,"file":"Dropzone.types.js","sources":["../../src/Dropzone/Dropzone.types.tsx"],"sourcesContent":["import { FileRejection } from 'react-dropzone';\r\nimport { Dispatch, SetStateAction } from 'react';\r\n\r\nexport type DropzoneValueItem = File | string;\r\n\r\nexport interface FilePreviewProps {\r\n  item: DropzoneValueItem;\r\n  styles?: Pick<\r\n    DropzoneStyles,\r\n    'previewWraper' | 'previewImage' | 'previewFile'\r\n  >;\r\n}\r\n\r\nexport interface DropzoneTranslations {\r\n  labelDropzonePrompt?: string;\r\n  labelDropzoneSubPrompt?: string;\r\n  labelOrClickToSelect?: string;\r\n  labelSelectedFiles?: string;\r\n  labelUploadErrors?: string;\r\n  labelFileTooLarge?: string;\r\n  labelInvalidFileType?: string;\r\n  labelVideoUploaded?: string;\r\n  labelVideoReplace?: string;\r\n}\r\n\r\nexport interface DropzoneProps\r\n  extends DropzoneTranslations,\r\n    React.HTMLAttributes<HTMLDivElement> {\r\n  acceptTypes?: string[];\r\n  maxSizeMB: number;\r\n  maxFiles?: number;\r\n  onErrors?: (errors: FileRejection[]) => void;\r\n  hideErrors?: boolean;\r\n  disabled?: boolean;\r\n  classNames?: DropzoneStyles;\r\n  value?: DropzoneValueItem[];\r\n  onChangeValue?: (items: DropzoneValueItem[]) => void;\r\n  singlePick?: boolean;\r\n  labelDropzoneClassname?: string;\r\n  labelDropzoneSubClassname?: string;\r\n  isUploading?: boolean;\r\n  uploadProgress?: number;\r\n  uploadLoadedBytes?: number;\r\n  uploadTotalBytes?: number;\r\n  onCancelUpload?: () => void;\r\n  labelUploadingTitle?: string;\r\n  labelUploadingHint?: string;\r\n  labelUploadingActionCancel?: string;\r\n  labelUploadingOf?: string;\r\n  playerTranslations?: Partial<Record<string, string>>;\r\n  singlePickFileInfo?: { name?: string; size?: number };\r\n  persistentDropzone?: boolean;\r\n  previewVariant?: 'default' | 'image-grid' | 'file-list';\r\n  designVariant?: 'legacy' | 'modern';\r\n  documentUploadCard?: boolean;\r\n  /**\r\n   * In `image-grid` variant, render the first item as a full-width cover preview.\r\n   * Other items keep the regular grid size. The remove (X) button is preserved.\r\n   */\r\n  coverFirstItem?: boolean;\r\n}\r\n\r\nexport interface DropzoneStyles {\r\n  idleWrapper?: string;\r\n  previewWrapper?: string;\r\n  errorWrapper?: string;\r\n  previewWraper?: string;\r\n  previewImage?: string;\r\n  previewFile?: string;\r\n}\r\n\r\nexport const DEFAULT_DOCUMENT_TYPES = [\r\n  'application/pdf',\r\n  'application/msword',\r\n  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',\r\n  'application/vnd.ms-excel',\r\n  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',\r\n  'application/vnd.ms-powerpoint',\r\n  'application/vnd.openxmlformats-officedocument.presentationml.presentation',\r\n  'text/csv',\r\n  'text/plain',\r\n];\r\n\r\nexport const DEFAULT_IMAGES_TYPES = [\r\n  'image/png',\r\n  'image/jpeg',\r\n  'image/jpg',\r\n  'image/webp',\r\n  // 'image/gif', // TODO: normalize this type\r\n];\r\n\r\nexport const DEFAULT_VIDEO_TYPES = [\r\n  'video/mp4',\r\n  'video/quicktime',\r\n  'video/x-msvideo',\r\n  'video/webm',\r\n  'video/avi'\r\n];\r\n\r\nexport const DEFAULT_AUDIO_TYPES = [\r\n  'audio/mpeg', // mp3\r\n  'audio/wav',\r\n  'audio/x-wav',\r\n  'audio/ogg',\r\n  'audio/mp4', // m4a\r\n  'audio/aac',\r\n  'audio/webm',\r\n];\r\n\r\n// Backward-compatible alias.\r\nexport const DEFAULT_FILE_TYPES = DEFAULT_DOCUMENT_TYPES;\r\n\r\n\r\nexport interface DropzoneControl {\r\n  setItems: Dispatch<SetStateAction<DropzoneValueItem[]>>;\r\n}\r\n"],"names":["DEFAULT_DOCUMENT_TYPES","DEFAULT_IMAGES_TYPES","DEFAULT_VIDEO_TYPES","DEFAULT_AUDIO_TYPES","DEFAULT_FILE_TYPES"],"mappings":"AAuEO,MAAMA,IAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAuB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAEF,GAEaC,IAAsB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAsB;AAAA,EACjC;AAAA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EACA;AAAA,EACA;AACF,GAGaC,IAAqBJ;"}

package/Dropzone/DropzoneFileCard.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+export interface DropzoneFileCardProps {
+    name: string;
+    sizeLabel?: string;
+    /** Resolved extension icon (svg src). When absent a generic icon is shown. */
+    iconSrc?: string | null;
+    disabled?: boolean;
+    className?: string;
+    onRemove?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * Прямокутна картка файлу для мультизавантаження (variant `file-list`):
+ * іконка за типом + назва + розмір + кнопка видалення. Підходить під будь-який
+ * тип (pdf / doc / фото / відео) — усі показуються однаково.
+ */
+export declare const DropzoneFileCard: FC<DropzoneFileCardProps>;
+//# sourceMappingURL=DropzoneFileCard.d.ts.map

package/Dropzone/DropzoneFileCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFileCard.d.ts","sourceRoot":"","sources":["../../src/Dropzone/DropzoneFileCard.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAI3B,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC9D;AAED;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA6CtD,CAAC"}

package/Dropzone/DropzoneFileCard.js

@@ -0,0 +1,39 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { FileTextIcon as o, X as m } from "lucide-react";
+import { cn as x } from "@oneplatformdev/utils";
+const h = ({
+  name: r,
+  sizeLabel: t,
+  iconSrc: i,
+  disabled: n = !1,
+  className: a,
+  onRemove: s
+}) => /* @__PURE__ */ l(
+  "div",
+  {
+    className: x(
+      "w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4",
+      a
+    ),
+    onClick: (c) => c.stopPropagation(),
+    children: [
+      i ? /* @__PURE__ */ e("img", { src: i, alt: "", className: "size-10 shrink-0" }) : /* @__PURE__ */ e("div", { className: "size-10 rounded-[8px] bg-[#9368FF] text-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(o, { size: 20 }) }),
+      /* @__PURE__ */ l("div", { className: "flex flex-col items-start text-left gap-1 min-w-0 flex-1", children: [
+        /* @__PURE__ */ e("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate", children: r }),
+        t && /* @__PURE__ */ e("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#666A78]", children: t })
+      ] }),
+      !n && s && /* @__PURE__ */ e(
+        "div",
+        {
+          className: "size-6 flex items-center justify-center cursor-pointer shrink-0",
+          onClick: s,
+          children: /* @__PURE__ */ e(m, { size: 24, color: "#06080D" })
+        }
+      )
+    ]
+  }
+);
+export {
+  h as DropzoneFileCard
+};
+//# sourceMappingURL=DropzoneFileCard.js.map

package/Dropzone/DropzoneFileCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFileCard.js","sources":["../../src/Dropzone/DropzoneFileCard.tsx"],"sourcesContent":["import { FileTextIcon, X } from 'lucide-react';\nimport { FC } from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\n\nexport interface DropzoneFileCardProps {\n  name: string;\n  sizeLabel?: string;\n  /** Resolved extension icon (svg src). When absent a generic icon is shown. */\n  iconSrc?: string | null;\n  disabled?: boolean;\n  className?: string;\n  onRemove?: (event: React.MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * Прямокутна картка файлу для мультизавантаження (variant `file-list`):\n * іконка за типом + назва + розмір + кнопка видалення. Підходить під будь-який\n * тип (pdf / doc / фото / відео) — усі показуються однаково.\n */\nexport const DropzoneFileCard: FC<DropzoneFileCardProps> = ({\n  name,\n  sizeLabel,\n  iconSrc,\n  disabled = false,\n  className,\n  onRemove,\n}) => {\n  return (\n    <div\n      className={cn(\n        'w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4',\n        className\n      )}\n      onClick={(event) => event.stopPropagation()}\n    >\n      {iconSrc ? (\n        <img src={iconSrc} alt=\"\" className=\"size-10 shrink-0\" />\n      ) : (\n        <div className=\"size-10 rounded-[8px] bg-[#9368FF] text-white flex items-center justify-center shrink-0\">\n          <FileTextIcon size={20} />\n        </div>\n      )}\n\n      <div className=\"flex flex-col items-start text-left gap-1 min-w-0 flex-1\">\n        <span className=\"w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate\">\n          {name}\n        </span>\n        {sizeLabel && (\n          <span className=\"w-full text-[12px] font-medium leading-[120%] text-[#666A78]\">\n            {sizeLabel}\n          </span>\n        )}\n      </div>\n\n      {!disabled && onRemove && (\n        <div\n          className=\"size-6 flex items-center justify-center cursor-pointer shrink-0\"\n          onClick={onRemove}\n        >\n          <X size={24} color=\"#06080D\" />\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":["DropzoneFileCard","name","sizeLabel","iconSrc","disabled","className","onRemove","jsxs","cn","event","jsx","FileTextIcon","X"],"mappings":";;;AAoBO,MAAMA,IAA8C,CAAC;AAAA,EAC1D,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,UAAAC;AACF,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAH;AAAA,IAAA;AAAA,IAEF,SAAS,CAACI,MAAUA,EAAM,gBAAA;AAAA,IAEzB,UAAA;AAAA,MAAAN,sBACE,OAAA,EAAI,KAAKA,GAAS,KAAI,IAAG,WAAU,oBAAmB,IAEvD,gBAAAO,EAAC,SAAI,WAAU,2FACb,4BAACC,GAAA,EAAa,MAAM,IAAI,GAC1B;AAAA,MAGF,gBAAAJ,EAAC,OAAA,EAAI,WAAU,4DACb,UAAA;AAAA,QAAA,gBAAAG,EAAC,QAAA,EAAK,WAAU,2EACb,UAAAT,GACH;AAAA,QACCC,KACC,gBAAAQ,EAAC,QAAA,EAAK,WAAU,gEACb,UAAAR,EAAA,CACH;AAAA,MAAA,GAEJ;AAAA,MAEC,CAACE,KAAYE,KACZ,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAASJ;AAAA,UAET,UAAA,gBAAAI,EAACE,GAAA,EAAE,MAAM,IAAI,OAAM,UAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAC/B;AAAA,EAAA;AAAA;"}

package/Dropzone/index.js

@@ -1,10 +1,11 @@
 import { Dropzone as _ } from "./Dropzone.js";
-import { DEFAULT_DOCUMENT_TYPES as o, DEFAULT_FILE_TYPES as r, DEFAULT_IMAGES_TYPES as A, DEFAULT_VIDEO_TYPES as F } from "./Dropzone.types.js";
+import { DEFAULT_AUDIO_TYPES as A, DEFAULT_DOCUMENT_TYPES as U, DEFAULT_FILE_TYPES as o, DEFAULT_IMAGES_TYPES as F, DEFAULT_VIDEO_TYPES as L } from "./Dropzone.types.js";
 export {
-  o as DEFAULT_DOCUMENT_TYPES,
-  r as DEFAULT_FILE_TYPES,
-  A as DEFAULT_IMAGES_TYPES,
-  F as DEFAULT_VIDEO_TYPES,
+  A as DEFAULT_AUDIO_TYPES,
+  U as DEFAULT_DOCUMENT_TYPES,
+  o as DEFAULT_FILE_TYPES,
+  F as DEFAULT_IMAGES_TYPES,
+  L as DEFAULT_VIDEO_TYPES,
   _ as Dropzone
 };
 //# sourceMappingURL=index.js.map

package/Form/Form.js

@@ -9,7 +9,7 @@ const S = I, c = s.createContext(
 ), $ = ({
   ...e
 }) => /* @__PURE__ */ m(c.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m(u, { ...e }) }), d = () => {
-  const e = s.useContext(c), t = s.useContext(l), { getFieldState: o } = F(), r = x({ name: e.name }), n = o(e.name, r);
+  const e = s.useContext(c), t = s.useContext(l), { getFieldState: r } = F(), o = x({ name: e.name }), n = r(e.name, o);
   if (!e)
     throw new Error("useFormField should be used within <FormField>");
   const { id: i } = t;
@@ -25,8 +25,8 @@ const S = I, c = s.createContext(
   {}
 );
 function D({ className: e, ...t }) {
-  const o = s.useId();
-  return /* @__PURE__ */ m(l.Provider, { value: { id: o }, children: /* @__PURE__ */ m(
+  const r = s.useId();
+  return /* @__PURE__ */ m(l.Provider, { value: { id: r }, children: /* @__PURE__ */ m(
     "div",
     {
       "data-slot": "form-item",
@@ -39,50 +39,50 @@ function M({
   className: e,
   ...t
 }) {
-  const { error: o, formItemId: r } = d();
+  const { error: r, formItemId: o } = d();
   return /* @__PURE__ */ m(
     p,
     {
       "data-slot": "form-label",
-      "data-error": !!o,
-      className: a(e),
-      htmlFor: r,
+      "data-error": !!r,
+      className: a("data-[error=true]:text-destructive", e),
+      htmlFor: o,
       ...t
     }
   );
 }
 function N({ ...e }) {
-  const { error: t, formItemId: o, formDescriptionId: r, formMessageId: n } = d();
+  const { error: t, formItemId: r, formDescriptionId: o, formMessageId: n } = d();
   return /* @__PURE__ */ m(
     f,
     {
       "data-slot": "form-control",
-      id: o,
-      "aria-describedby": t ? `${r} ${n}` : `${r}`,
+      id: r,
+      "aria-describedby": t ? `${o} ${n}` : `${o}`,
       "aria-invalid": !!t,
       ...e
     }
   );
 }
 function w({ className: e, ...t }) {
-  const { formDescriptionId: o } = d();
+  const { formDescriptionId: r } = d();
   return /* @__PURE__ */ m(
     "p",
     {
       "data-slot": "form-description",
-      id: o,
+      id: r,
       className: a("text-muted-foreground text-sm", e),
       ...t
     }
   );
 }
 function P({ className: e, ...t }) {
-  const { error: o, formMessageId: r } = d(), n = o ? String(o?.message ?? "") : t.children;
+  const { error: r, formMessageId: o } = d(), n = r ? String(r?.message ?? "") : t.children;
   return n ? /* @__PURE__ */ m(
     "p",
     {
       "data-slot": "form-message",
-      id: r,
+      id: o,
       className: a("text-destructive text-sm", e),
       ...t,
       children: n

package/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport {\r\n  Controller,\r\n  FormProvider,\r\n  useFormContext,\r\n  useFormState,\r\n  type ControllerProps,\r\n  type FieldPath,\r\n  type FieldValues,\r\n} from \"react-hook-form\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { Label } from \"../Label\"\r\n\r\nconst Form = FormProvider\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n  name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n  {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n    ...props\r\n  }: ControllerProps<TFieldValues, TName>) => {\r\n  return (\r\n    <FormFieldContext.Provider value={{ name: props.name }}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  )\r\n}\r\n\r\nconst useFormField = () => {\r\n  const fieldContext = React.useContext(FormFieldContext)\r\n  const itemContext = React.useContext(FormItemContext)\r\n  const { getFieldState } = useFormContext()\r\n  const formState = useFormState({ name: fieldContext.name })\r\n  const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\")\r\n  }\r\n\r\n  const { id } = itemContext\r\n\r\n  return {\r\n    id,\r\n    name: fieldContext.name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n  id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n  {} as FormItemContextValue\r\n)\r\n\r\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  const id = React.useId()\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{ id }}>\r\n      <div\r\n        data-slot=\"form-item\"\r\n        className={cn(\"flex flex-col gap-2\", className)}\r\n        {...props}\r\n      />\r\n    </FormItemContext.Provider>\r\n  )\r\n}\r\n\r\nfunction FormLabel({\r\n                     className,\r\n                     ...props\r\n                   }: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n  const { error, formItemId } = useFormField()\r\n\r\n  return (\r\n    <Label\r\n      data-slot=\"form-label\"\r\n      data-error={!!error}\r\n      className={cn(className)}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\r\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n  return (\r\n    <Slot\r\n      data-slot=\"form-control\"\r\n      id={formItemId}\r\n      aria-describedby={\r\n        !error\r\n          ? `${formDescriptionId}`\r\n          : `${formDescriptionId} ${formMessageId}`\r\n      }\r\n      aria-invalid={!!error}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n  const { formDescriptionId } = useFormField()\r\n\r\n  return (\r\n    <p\r\n      data-slot=\"form-description\"\r\n      id={formDescriptionId}\r\n      className={cn(\"text-muted-foreground text-sm\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\r\n  const { error, formMessageId } = useFormField()\r\n  const body = error ? String(error?.message ?? \"\") : props.children\r\n\r\n  if (!body) {\r\n    return null\r\n  }\r\n\r\n  return (\r\n    <p\r\n      data-slot=\"form-message\"\r\n      id={formMessageId}\r\n      className={cn(\"text-destructive text-sm\", className)}\r\n      {...props}\r\n    >\r\n      {body}\r\n    </p>\r\n  )\r\n}\r\n\r\nexport {\r\n  useFormField,\r\n  Form,\r\n  FormItem,\r\n  FormLabel,\r\n  FormControl,\r\n  FormDescription,\r\n  FormMessage,\r\n  FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"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"}
+{"version":3,"file":"Form.js","sources":["../../src/Form/Form.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\nimport {\r\n  Controller,\r\n  FormProvider,\r\n  useFormContext,\r\n  useFormState,\r\n  type ControllerProps,\r\n  type FieldPath,\r\n  type FieldValues,\r\n} from \"react-hook-form\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { Label } from \"../Label\"\r\n\r\nconst Form = FormProvider\r\n\r\ntype FormFieldContextValue<\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n> = {\r\n  name: TName\r\n}\r\n\r\nconst FormFieldContext = React.createContext<FormFieldContextValue>(\r\n  {} as FormFieldContextValue\r\n)\r\n\r\nconst FormField = <\r\n  TFieldValues extends FieldValues = FieldValues,\r\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\r\n>({\r\n    ...props\r\n  }: ControllerProps<TFieldValues, TName>) => {\r\n  return (\r\n    <FormFieldContext.Provider value={{ name: props.name }}>\r\n      <Controller {...props} />\r\n    </FormFieldContext.Provider>\r\n  )\r\n}\r\n\r\nconst useFormField = () => {\r\n  const fieldContext = React.useContext(FormFieldContext)\r\n  const itemContext = React.useContext(FormItemContext)\r\n  const { getFieldState } = useFormContext()\r\n  const formState = useFormState({ name: fieldContext.name })\r\n  const fieldState = getFieldState(fieldContext.name, formState)\r\n\r\n  if (!fieldContext) {\r\n    throw new Error(\"useFormField should be used within <FormField>\")\r\n  }\r\n\r\n  const { id } = itemContext\r\n\r\n  return {\r\n    id,\r\n    name: fieldContext.name,\r\n    formItemId: `${id}-form-item`,\r\n    formDescriptionId: `${id}-form-item-description`,\r\n    formMessageId: `${id}-form-item-message`,\r\n    ...fieldState,\r\n  }\r\n}\r\n\r\ntype FormItemContextValue = {\r\n  id: string\r\n}\r\n\r\nconst FormItemContext = React.createContext<FormItemContextValue>(\r\n  {} as FormItemContextValue\r\n)\r\n\r\nfunction FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  const id = React.useId()\r\n\r\n  return (\r\n    <FormItemContext.Provider value={{ id }}>\r\n      <div\r\n        data-slot=\"form-item\"\r\n        className={cn(\"flex flex-col gap-2\", className)}\r\n        {...props}\r\n      />\r\n    </FormItemContext.Provider>\r\n  )\r\n}\r\n\r\nfunction FormLabel({\r\n                     className,\r\n                     ...props\r\n                   }: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n  const { error, formItemId } = useFormField()\r\n\r\n  return (\r\n    <Label\r\n      data-slot=\"form-label\"\r\n      data-error={!!error}\r\n      className={cn(\"data-[error=true]:text-destructive\", className)}\r\n      htmlFor={formItemId}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot>) {\r\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()\r\n\r\n  return (\r\n    <Slot\r\n      data-slot=\"form-control\"\r\n      id={formItemId}\r\n      aria-describedby={\r\n        !error\r\n          ? `${formDescriptionId}`\r\n          : `${formDescriptionId} ${formMessageId}`\r\n      }\r\n      aria-invalid={!!error}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\r\n  const { formDescriptionId } = useFormField()\r\n\r\n  return (\r\n    <p\r\n      data-slot=\"form-description\"\r\n      id={formDescriptionId}\r\n      className={cn(\"text-muted-foreground text-sm\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction FormMessage({ className, ...props }: React.ComponentProps<\"p\">) {\r\n  const { error, formMessageId } = useFormField()\r\n  const body = error ? String(error?.message ?? \"\") : props.children\r\n\r\n  if (!body) {\r\n    return null\r\n  }\r\n\r\n  return (\r\n    <p\r\n      data-slot=\"form-message\"\r\n      id={formMessageId}\r\n      className={cn(\"text-destructive text-sm\", className)}\r\n      {...props}\r\n    >\r\n      {body}\r\n    </p>\r\n  )\r\n}\r\n\r\nexport {\r\n  useFormField,\r\n  Form,\r\n  FormItem,\r\n  FormLabel,\r\n  FormControl,\r\n  FormDescription,\r\n  FormMessage,\r\n  FormField,\r\n}\r\n"],"names":["Form","FormProvider","FormFieldContext","React","FormField","props","jsx","Controller","useFormField","fieldContext","itemContext","FormItemContext","getFieldState","useFormContext","formState","useFormState","fieldState","id","FormItem","className","cn","FormLabel","error","formItemId","Label","FormControl","formDescriptionId","formMessageId","Slot","FormDescription","FormMessage","body"],"mappings":"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"}

package/FormInput/FormInput.stories.js

@@ -1,18 +1,20 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { useEffect as c } from "react";
-import { useForm as s, FormProvider as m } from "react-hook-form";
-import { FormInput as n } from "./FormInput.js";
-function d({ initialValue: o = "", ...r }) {
-  const t = s({
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { useEffect as i } from "react";
+import { useForm as n, FormProvider as m } from "react-hook-form";
+import { FormInput as o } from "./FormInput.js";
+import { FormTextarea as c } from "../FormTextarea/FormTextarea.js";
+import { Button as d } from "../Button/Button.js";
+function f({ initialValue: e = "", ...t }) {
+  const a = n({
     defaultValues: {
-      name: o
+      name: e
     }
-  }), l = t.watch("name");
-  return /* @__PURE__ */ e(m, { ...t, children: /* @__PURE__ */ a("div", { className: "max-w-sm space-y-3", children: [
-    /* @__PURE__ */ e(
-      n,
+  }), s = a.watch("name");
+  return /* @__PURE__ */ r(m, { ...a, children: /* @__PURE__ */ l("div", { className: "max-w-sm space-y-3", children: [
+    /* @__PURE__ */ r(
+      o,
       {
-        form: t,
+        form: a,
         name: "name",
         counter: !0,
         maxLength: 255,
@@ -20,19 +22,19 @@ function d({ initialValue: o = "", ...r }) {
         label: "Label"
       }
     ),
-    /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground", children: [
       "value: ",
-      /* @__PURE__ */ e("span", { className: "font-mono", children: l })
+      /* @__PURE__ */ r("span", { className: "font-mono", children: s })
     ] }),
-    /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: [
+    /* @__PURE__ */ l("div", { className: "text-xs text-muted-foreground", children: [
       "length: ",
-      /* @__PURE__ */ e("span", { className: "font-mono", children: l?.length ?? 0 })
+      /* @__PURE__ */ r("span", { className: "font-mono", children: s?.length ?? 0 })
     ] })
   ] }) });
 }
-const g = {
+const w = {
   title: "FormInput",
-  component: n,
+  component: o,
   parameters: {
     layout: "centered"
   },
@@ -50,31 +52,87 @@ const g = {
     onPastePrepare: { control: !1 }
   },
   decorators: [
-    (o) => /* @__PURE__ */ e("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ e(o, {}) })
+    (e) => /* @__PURE__ */ r("div", { className: "p-6 w-[420px]", children: /* @__PURE__ */ r(e, {}) })
   ]
-}, v = {
-  render: (o) => /* @__PURE__ */ e(d, { ...o })
+}, I = {
+  render: (e) => /* @__PURE__ */ r(f, { ...e })
 };
-function i(o) {
-  const r = s({ defaultValues: { name: "" } });
-  return c(() => {
-    r.setError("name", { message: "Це поле обовʼязкове" });
-  }, []), /* @__PURE__ */ e(m, { ...r, children: /* @__PURE__ */ e("div", { className: "max-w-sm", children: /* @__PURE__ */ e(
-    n,
+function p(e) {
+  const t = n({ defaultValues: { name: "" } });
+  return i(() => {
+    t.setError("name", { message: "Це поле обовʼязкове" });
+  }, []), /* @__PURE__ */ r(m, { ...t, children: /* @__PURE__ */ r("div", { className: "max-w-sm", children: /* @__PURE__ */ r(
+    o,
     {
-      form: r,
+      form: t,
       name: "name",
       label: "Label",
-      ...o
+      ...e
     }
   ) }) });
 }
-const b = {
-  render: (o) => /* @__PURE__ */ e(i, { ...o })
+const V = {
+  render: (e) => /* @__PURE__ */ r(p, { ...e })
+}, u = (e) => {
+  const t = {};
+  return e.email?.trim() ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e.email.trim()) || (t.email = { type: "pattern", message: "Невірний формат пошти" }) : t.email = { type: "required", message: "Обовʼязкове поле" }, e.fullName?.trim() || (t.fullName = { type: "required", message: "Обовʼязкове поле" }), e.description?.trim() ? e.description.trim().length < 10 && (t.description = { type: "minLength", message: "Мінімум 10 символів" }) : t.description = { type: "required", message: "Обовʼязкове поле" }, {
+    values: Object.keys(t).length ? {} : e,
+    errors: t
+  };
+};
+function h() {
+  const e = n({
+    mode: "onTouched",
+    resolver: u,
+    defaultValues: { email: "", fullName: "", description: "" }
+  }), { isValid: t, isSubmitting: a } = e.formState;
+  return /* @__PURE__ */ r(m, { ...e, children: /* @__PURE__ */ l(
+    "form",
+    {
+      className: "max-w-sm space-y-4",
+      onSubmit: e.handleSubmit(() => {
+        alert("Форму надіслано ✅");
+      }),
+      children: [
+        /* @__PURE__ */ r(
+          o,
+          {
+            form: e,
+            name: "email",
+            label: "Email",
+            placeholder: "name@example.com"
+          }
+        ),
+        /* @__PURE__ */ r(
+          o,
+          {
+            form: e,
+            name: "fullName",
+            label: "Імʼя",
+            placeholder: "Іван Петренко"
+          }
+        ),
+        /* @__PURE__ */ r(
+          c,
+          {
+            form: e,
+            name: "description",
+            label: "Опис",
+            placeholder: "Мінімум 10 символів"
+          }
+        ),
+        /* @__PURE__ */ r(d, { type: "submit", disabled: !t || a, className: "w-full", children: "Зберегти" })
+      ]
+    }
+  ) });
+}
+const E = {
+  render: () => /* @__PURE__ */ r(h, {})
 };
 export {
-  v as Default,
-  b as WithError,
-  g as default
+  I as Default,
+  E as HybridValidation,
+  V as WithError,
+  w as default
 };
 //# sourceMappingURL=FormInput.stories.js.map