@beautinique/frontend-components 1.0.7 → 1.0.9

package/dist/file-input/index.cjs

@@ -0,0 +1,259 @@
+'use strict';
+
+var react = require('@iconify/react');
+var react$1 = require('react');
+var inputs = require('@beautinique/frontend-components/inputs');
+var media = require('@beautinique/frontend-components/media');
+var jsxRuntime = require('react/jsx-runtime');
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) react.addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/file-input/file-input-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "gallery-add-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2"/><path d="M2 12.5001L3.75159 10.9675C4.66286 10.1702 6.03628 10.2159 6.89249 11.0721L11.1822 15.3618C11.8694 16.0491 12.9512 16.1428 13.7464 15.5839L14.0446 15.3744C15.1888 14.5702 16.7369 14.6634 17.7765 15.599L21 18.5001"/><path d="M15 5.5H18.5M18.5 5.5H22M18.5 5.5V9M18.5 5.5V2"/></g>'
+      }
+    }
+  }
+];
+var { register: registerFileInputIcons, names: FILE_INPUT_ICON_NAMES } = createIconRegistry(ICON_SETS);
+
+// src/file-input/media-type.ts
+var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([
+  "avi",
+  "m3u8",
+  "m4v",
+  "mkv",
+  "mov",
+  "mp4",
+  "ogg",
+  "ogv",
+  "webm"
+]);
+var getMediaType = /* @__PURE__ */ __name((value) => {
+  if (typeof value !== "string") return value.type.startsWith("video/") ? "video" : "image";
+  const path = value.split(/[?#]/, 1).at(0) ?? "";
+  const extension = /\.([a-z0-9]+)$/i.exec(path)?.at(1)?.toLowerCase() ?? "";
+  return VIDEO_EXTENSIONS.has(extension) ? "video" : "image";
+}, "getMediaType");
+var useObjectUrls = /* @__PURE__ */ __name((files) => {
+  const liveRef = react$1.useRef(/* @__PURE__ */ new Map());
+  const [urls, setUrls] = react$1.useState(/* @__PURE__ */ new Map());
+  react$1.useEffect(() => {
+    const live = liveRef.current;
+    const wanted = new Set(files);
+    for (const [file, url] of live) {
+      if (wanted.has(file)) continue;
+      URL.revokeObjectURL(url);
+      live.delete(file);
+    }
+    for (const file of wanted) {
+      if (!live.has(file)) live.set(file, URL.createObjectURL(file));
+    }
+    setUrls(new Map(live));
+  }, [files]);
+  react$1.useEffect(() => {
+    const live = liveRef.current;
+    return () => {
+      for (const url of live.values()) URL.revokeObjectURL(url);
+      live.clear();
+    };
+  }, []);
+  return urls;
+}, "useObjectUrls");
+var asList = /* @__PURE__ */ __name((value) => {
+  if (value === void 0) return [];
+  return typeof value === "string" || value instanceof File ? [value] : value;
+}, "asList");
+var FileInput = /* @__PURE__ */ __name(({
+  label = "",
+  className = "",
+  containerClassName = "",
+  mediaModalClassName = "",
+  mediaCarouselClassName = "",
+  errors = [],
+  handleRemove,
+  fileInputProps,
+  icons,
+  getMediaType: getMediaType2 = getMediaType,
+  labels,
+  playerProps
+}) => {
+  registerFileInputIcons();
+  const {
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    multiple,
+    accept,
+    id: givenId,
+    ...inputProps
+  } = fileInputProps;
+  const baseId = react$1.useId();
+  const id = givenId ?? fileInputProps.name ?? `${baseId}-field`;
+  const errorsId = `${id}-errors`;
+  const text = {
+    choose: labels?.choose ?? "Choose file",
+    chooseMany: labels?.chooseMany ?? "Choose files",
+    addMore: labels?.addMore ?? "Add more files"
+  };
+  const [openIndex, setOpenIndex] = react$1.useState(null);
+  const values = react$1.useMemo(() => asList(value), [value]);
+  const files = react$1.useMemo(() => values.filter((item) => item instanceof File), [values]);
+  const urls = useObjectUrls(files);
+  const previews = react$1.useMemo(
+    () => values.flatMap((item, index) => {
+      const url = typeof item === "string" ? item : urls.get(item);
+      return url === void 0 ? [] : [{ index, media: { type: getMediaType2(item), url } }];
+    }),
+    [values, urls, getMediaType2]
+  );
+  const media$1 = react$1.useMemo(() => previews.map((preview) => preview.media), [previews]);
+  const messages = errors.flatMap((error, index) => error ? [{ error, index }] : []);
+  const hasErrors = messages.length > 0;
+  if (openIndex !== null && openIndex >= previews.length) setOpenIndex(null);
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    if (disabled) return;
+    onChange?.(event);
+    event.target.value = "";
+  }, "handleChange");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(inputs.InputLabel, { htmlFor: id, children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          "data-invalid": hasErrors ? "" : void 0,
+          className: `border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c has-focus-visible:border-blue-crayola-c data-invalid:border-red-c group flex items-center justify-between gap-3 rounded-lg border px-3 ${className}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(inputs.InputIcon, { icon: icons?.left }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                htmlFor: id,
+                className: `text-primary/30 min-w-0 flex-1 truncate py-2 text-[13px] xl:py-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${inputProps.className ?? ""}`,
+                children: [
+                  placeholder ?? (multiple ? text.chooseMany : text.choose),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ...inputProps,
+                      id,
+                      type: "file",
+                      accept: accept ?? "image/*",
+                      multiple,
+                      disabled,
+                      "aria-invalid": hasErrors ? true : void 0,
+                      "aria-describedby": [inputProps["aria-describedby"], hasErrors ? errorsId : void 0].filter(Boolean).join(" ") || void 0,
+                      onChange: handleChange,
+                      className: "sr-only"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(inputs.InputIcon, { icon: icons?.right })
+          ]
+        }
+      )
+    ] }),
+    hasErrors && /* @__PURE__ */ jsxRuntime.jsx("div", { id: errorsId, className: "space-y-1", children: messages.map(({ error, index }) => /* @__PURE__ */ jsxRuntime.jsx(
+      inputs.InputError,
+      {
+        error: messages.length > 1 ? `${String(index + 1)}. ${error}` : error
+      },
+      index
+    )) }),
+    previews.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-primary/10 bg-smoke-eerie relative flex rounded-lg border", children: [
+      multiple && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sticky left-0 mr-1 ml-2 flex items-center justify-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: `border-primary/50 bg-tertiary-invert hover:border-tertiary flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md border shadow-xs transition-colors duration-300 md:size-16 lg:size-20 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: text.addMore }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                react.Icon,
+                {
+                  "aria-hidden": "true",
+                  icon: "solar:gallery-add-linear",
+                  className: "text-primary size-[40%]"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "group bg-hr-line my-2 h-14 w-px shrink-0 md:h-16 lg:h-20"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        media.MediaCarousel,
+        {
+          className: mediaCarouselClassName,
+          gradientClassNames: {
+            left: "from-smoke-eerie rounded-l-[7px] z-2",
+            right: "from-smoke-eerie rounded-r-[7px] z-2"
+          },
+          media: media$1,
+          invalid: previews.map((preview) => !!errors.at(preview.index)),
+          labels,
+          playerProps,
+          onClick: setOpenIndex,
+          handleRemove: handleRemove && ((position) => {
+            const preview = previews.at(position);
+            if (preview) handleRemove(preview.index);
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      media.MediaModal,
+      {
+        className: mediaModalClassName,
+        media: media$1,
+        isOpen: openIndex !== null,
+        selected: openIndex,
+        onClose: () => {
+          setOpenIndex(null);
+        },
+        labels,
+        playerProps,
+        handleRemove: handleRemove && ((position) => {
+          const preview = previews.at(position);
+          if (preview) handleRemove(preview.index);
+        })
+      }
+    )
+  ] });
+}, "FileInput");
+
+exports.FileInput = FileInput;
+exports.getMediaType = getMediaType;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/file-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/icon-registry.ts","../../src/file-input/file-input-icons.ts","../../src/file-input/media-type.ts","../../src/file-input/useObjectUrls.ts","../../src/file-input/FileInput.tsx"],"names":["addCollection","useRef","useState","useEffect","getMediaType","useId","useMemo","media","jsxs","jsx","InputLabel","InputIcon","InputError","Icon","MediaCarousel","MediaModal"],"mappings":"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","file":"index.cjs","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the file input, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'gallery-add-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2\"/><path d=\"M2 12.5001L3.75159 10.9675C4.66286 10.1702 6.03628 10.2159 6.89249 11.0721L11.1822 15.3618C11.8694 16.0491 12.9512 16.1428 13.7464 15.5839L14.0446 15.3744C15.1888 14.5702 16.7369 14.6634 17.7765 15.599L21 18.5001\"/><path d=\"M15 5.5H18.5M18.5 5.5H22M18.5 5.5V9M18.5 5.5V2\"/></g>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerFileInputIcons, names: FILE_INPUT_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import type { TMediaResource } from '../media/index.js';\n\n// The endings of an address of a video. Anything else is taken for a picture.\nconst VIDEO_EXTENSIONS: ReadonlySet<string> = new Set([\n  'avi',\n  'm3u8',\n  'm4v',\n  'mkv',\n  'mov',\n  'mp4',\n  'ogg',\n  'ogv',\n  'webm',\n]);\n\n/**\n * Whether a file or an address is a picture or a video. A file says it with its type (`video/mp4`);\n * an address says it with its ending (`.mp4`, also before a `?` or a `#`). What is not known is a\n * picture, so a preview is always drawn.\n */\nexport const getMediaType = (value: File | string): TMediaResource => {\n  if (typeof value !== 'string') return value.type.startsWith('video/') ? 'video' : 'image';\n\n  const path = value.split(/[?#]/, 1).at(0) ?? '';\n  const extension = /\\.([a-z0-9]+)$/i.exec(path)?.at(1)?.toLowerCase() ?? '';\n\n  return VIDEO_EXTENSIONS.has(extension) ? 'video' : 'image';\n};\n","import { useEffect, useRef, useState } from 'react';\n\n/**\n * An address the browser can show for each file (`URL.createObjectURL`), made once for a file, and\n * given back (`URL.revokeObjectURL`) when the file is no longer in the list and when the component\n * goes away, so the memory of a file is not kept after it is not needed.\n *\n * The addresses are made after the render (it is an effect: making them is a change in the browser),\n * so a file that was just added has none for one render; look for it with `urls.get(file)`.\n */\nexport const useObjectUrls = (files: readonly File[]): ReadonlyMap<File, string> => {\n  const liveRef = useRef(new Map<File, string>());\n  const [urls, setUrls] = useState<ReadonlyMap<File, string>>(new Map());\n\n  useEffect(() => {\n    const live = liveRef.current;\n    const wanted = new Set(files);\n\n    for (const [file, url] of live) {\n      if (wanted.has(file)) continue;\n\n      URL.revokeObjectURL(url);\n      live.delete(file);\n    }\n\n    for (const file of wanted) {\n      if (!live.has(file)) live.set(file, URL.createObjectURL(file));\n    }\n\n    // making an address changes the browser, which is what an effect is for; the render has to be\n    // told about it to draw the files\n\n    setUrls(new Map(live));\n  }, [files]);\n\n  useEffect(() => {\n    const live = liveRef.current;\n\n    return () => {\n      for (const url of live.values()) URL.revokeObjectURL(url);\n\n      live.clear();\n    };\n  }, []);\n\n  return urls;\n};\n","import { Icon } from '@iconify/react';\nimport { type ChangeEvent, type InputHTMLAttributes, useId, useMemo, useState } from 'react';\n\nimport {\n  type IFieldBase,\n  InputError,\n  InputIcon,\n  InputLabel,\n  type TInputIcons,\n} from '../inputs/index.js';\nimport {\n  type IMediaLabels,\n  MediaCarousel,\n  MediaModal,\n  type TMediaOption,\n  type TMediaResource,\n  type TPlayerProps,\n} from '../media/index.js';\nimport { registerFileInputIcons } from './file-input-icons.js';\nimport { getMediaType as defaultGetMediaType } from './media-type.js';\nimport { useObjectUrls } from './useObjectUrls.js';\n\n/** A file the person chose, or the address of one that is already saved. */\nexport type TFileInputValue = File | string;\n\n/** The words on the field and the buttons. English by default. */\nexport interface IFileInputLabels extends IMediaLabels {\n  /** What the field says for one file. */\n  choose: string;\n  /** What the field says when it takes several files. */\n  chooseMany: string;\n  /** The name of the tile that adds more files to the ones chosen. */\n  addMore: string;\n}\n\nexport interface IFileInput extends Omit<IFieldBase, 'error'> {\n  /** The attributes of the `<input type=\"file\">`; `value` is what is shown under the field. */\n  fileInputProps: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> & {\n    /** The file (or its address) or the list of them, to show a thumbnail for each. */\n    value?: TFileInputValue | readonly TFileInputValue[];\n  };\n  /** An icon at each end of the field. One with an `onClick` is a button and needs a `label`. */\n  icons?: TInputIcons;\n  /**\n   * What is wrong with each file, in the order of the files (`undefined` or `''` for one that is\n   * fine). Each message is shown under the field, and the thumbnail of the file gets a red border.\n   */\n  errors?: readonly (string | undefined)[];\n  /** Adds a button on each thumbnail that calls this with the index of its file. */\n  handleRemove?: (index: number) => void;\n  /** The class of the backdrop of the dialog that shows a file big. */\n  mediaModalClassName?: string;\n  /** The class of the row of thumbnails. */\n  mediaCarouselClassName?: string;\n  /** Says if a file or an address is a picture or a video. The default looks at the type and at the ending. */\n  getMediaType?: (value: TFileInputValue) => TMediaResource;\n  labels?: Partial<IFileInputLabels>;\n  /** What to give the players of the videos, e.g. `getPoster` to ask a service for their posters. */\n  playerProps?: TPlayerProps;\n}\n\ninterface IPreview {\n  /** The place of the file in the list the app gave. */\n  index: number;\n  media: TMediaOption;\n}\n\nconst asList = (value: TFileInputValue | readonly TFileInputValue[] | undefined) => {\n  if (value === undefined) return [];\n\n  return typeof value === 'string' || value instanceof File ? [value] : value;\n};\n\n/**\n * A field to choose files, with a thumbnail under it for each file that is chosen. A thumbnail opens\n * the file big, in a dialog where the others can be browsed, and can have a button that removes it.\n *\n * - It is a real file input: the keyboard reaches it (it shows the focus on the field), and pressing\n *   the label or the field opens the browser's chooser. The same file can be chosen again (the input\n *   is emptied after each choice).\n * - The files are `value` (the app keeps them, as with any field); a text in the list is the address\n *   of a file that is already saved, shown as it is.\n * - The messages of `errors` are said as they show up, and the thumbnail of a file with a problem has a\n *   red border.\n */\nexport const FileInput = ({\n  label = '',\n  className = '',\n  containerClassName = '',\n  mediaModalClassName = '',\n  mediaCarouselClassName = '',\n  errors = [],\n  handleRemove,\n  fileInputProps,\n  icons,\n  getMediaType = defaultGetMediaType,\n  labels,\n  playerProps,\n}: IFileInput) => {\n  registerFileInputIcons();\n\n  const {\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    multiple,\n    accept,\n    id: givenId,\n    ...inputProps\n  } = fileInputProps;\n  const baseId = useId();\n  const id = givenId ?? fileInputProps.name ?? `${baseId}-field`;\n  const errorsId = `${id}-errors`;\n  const text = {\n    choose: labels?.choose ?? 'Choose file',\n    chooseMany: labels?.chooseMany ?? 'Choose files',\n    addMore: labels?.addMore ?? 'Add more files',\n  };\n\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n\n  const values = useMemo(() => asList(value), [value]);\n  const files = useMemo(() => values.filter((item) => item instanceof File), [values]);\n  const urls = useObjectUrls(files);\n\n  // A file has its thumbnail once it has an address; its place in the list is kept for the app.\n  const previews = useMemo(\n    () =>\n      values.flatMap<IPreview>((item, index) => {\n        const url = typeof item === 'string' ? item : urls.get(item);\n\n        return url === undefined ? [] : [{ index, media: { type: getMediaType(item), url } }];\n      }),\n    [values, urls, getMediaType],\n  );\n  const media = useMemo(() => previews.map((preview) => preview.media), [previews]);\n  const messages = errors.flatMap((error, index) => (error ? [{ error, index }] : []));\n  const hasErrors = messages.length > 0;\n\n  // The dialog is closed when the file it was opened on is no longer there.\n  if (openIndex !== null && openIndex >= previews.length) setOpenIndex(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    onChange?.(event);\n    // emptied, so the same file can be chosen again\n    event.target.value = '';\n  };\n\n  return (\n    <div className={`flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`}>\n      <div className=\"relative\">\n        <InputLabel htmlFor={id}>{label}</InputLabel>\n        <div\n          data-invalid={hasErrors ? '' : undefined}\n          className={`border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c has-focus-visible:border-blue-crayola-c data-invalid:border-red-c group flex items-center justify-between gap-3 rounded-lg border px-3 ${className}`}\n        >\n          <InputIcon icon={icons?.left} />\n          <label\n            htmlFor={id}\n            className={`text-primary/30 min-w-0 flex-1 truncate py-2 text-[13px] xl:py-3 ${\n              disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n            } ${inputProps.className ?? ''}`}\n          >\n            {placeholder ?? (multiple ? text.chooseMany : text.choose)}\n            <input\n              {...inputProps}\n              id={id}\n              type=\"file\"\n              accept={accept ?? 'image/*'}\n              multiple={multiple}\n              disabled={disabled}\n              aria-invalid={hasErrors ? true : undefined}\n              aria-describedby={\n                [inputProps['aria-describedby'], hasErrors ? errorsId : undefined]\n                  .filter(Boolean)\n                  .join(' ') || undefined\n              }\n              onChange={handleChange}\n              className=\"sr-only\"\n            />\n          </label>\n          <InputIcon icon={icons?.right} />\n        </div>\n      </div>\n\n      {hasErrors && (\n        <div id={errorsId} className=\"space-y-1\">\n          {messages.map(({ error, index }) => (\n            <InputError\n              key={index}\n              error={messages.length > 1 ? `${String(index + 1)}. ${error}` : error}\n            />\n          ))}\n        </div>\n      )}\n\n      {previews.length > 0 && (\n        <div className=\"border-primary/10 bg-smoke-eerie relative flex rounded-lg border\">\n          {multiple && (\n            <div className=\"sticky left-0 mr-1 ml-2 flex items-center justify-start gap-3\">\n              <label\n                htmlFor={id}\n                className={`border-primary/50 bg-tertiary-invert hover:border-tertiary flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md border shadow-xs transition-colors duration-300 md:size-16 lg:size-20 ${\n                  disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n                }`}\n              >\n                <span className=\"sr-only\">{text.addMore}</span>\n                <Icon\n                  aria-hidden=\"true\"\n                  icon=\"solar:gallery-add-linear\"\n                  className=\"text-primary size-[40%]\"\n                />\n              </label>\n              <div\n                aria-hidden=\"true\"\n                className=\"group bg-hr-line my-2 h-14 w-px shrink-0 md:h-16 lg:h-20\"\n              />\n            </div>\n          )}\n          <MediaCarousel\n            className={mediaCarouselClassName}\n            gradientClassNames={{\n              left: 'from-smoke-eerie rounded-l-[7px] z-2',\n              right: 'from-smoke-eerie rounded-r-[7px] z-2',\n            }}\n            media={media}\n            invalid={previews.map((preview) => !!errors.at(preview.index))}\n            labels={labels}\n            playerProps={playerProps}\n            onClick={setOpenIndex}\n            handleRemove={\n              handleRemove &&\n              ((position) => {\n                const preview = previews.at(position);\n\n                if (preview) handleRemove(preview.index);\n              })\n            }\n          />\n        </div>\n      )}\n\n      <MediaModal\n        className={mediaModalClassName}\n        media={media}\n        isOpen={openIndex !== null}\n        selected={openIndex}\n        onClose={() => {\n          setOpenIndex(null);\n        }}\n        labels={labels}\n        playerProps={playerProps}\n        handleRemove={\n          handleRemove &&\n          ((position) => {\n            const preview = previews.at(position);\n\n            if (preview) handleRemove(preview.index);\n          })\n        }\n      />\n    </div>\n  );\n};\n"]}

package/dist/file-input/index.d.cts

@@ -0,0 +1,3 @@
+export { FileInput, type IFileInput, type IFileInputLabels, type TFileInputValue, } from './FileInput.js';
+export { getMediaType } from './media-type.js';
+//# sourceMappingURL=index.d.cts.map

package/dist/file-input/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../src/file-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/file-input/index.d.ts

@@ -0,0 +1,3 @@
+export { FileInput, type IFileInput, type IFileInputLabels, type TFileInputValue, } from './FileInput.js';
+export { getMediaType } from './media-type.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/file-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/file-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,KAAK,UAAU,EACf,KAAK,gBAAgB,EACrB,KAAK,eAAe,GACrB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/file-input/index.js

@@ -0,0 +1,256 @@
+import { addCollection, Icon } from '@iconify/react';
+import { useId, useState, useMemo, useRef, useEffect } from 'react';
+import { InputLabel, InputIcon, InputError } from '@beautinique/frontend-components/inputs';
+import { MediaCarousel, MediaModal } from '@beautinique/frontend-components/media';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+var createIconRegistry = /* @__PURE__ */ __name((sets) => {
+  let registered = false;
+  return {
+    register: /* @__PURE__ */ __name(() => {
+      if (registered) return;
+      for (const set of sets) addCollection(set);
+      registered = true;
+    }, "register"),
+    names: sets.flatMap(
+      ({ prefix, icons, aliases }) => [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`)
+    )
+  };
+}, "createIconRegistry");
+
+// src/file-input/file-input-icons.ts
+var ICON_SETS = [
+  {
+    prefix: "solar",
+    width: 24,
+    height: 24,
+    icons: {
+      "gallery-add-linear": {
+        body: '<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2"/><path d="M2 12.5001L3.75159 10.9675C4.66286 10.1702 6.03628 10.2159 6.89249 11.0721L11.1822 15.3618C11.8694 16.0491 12.9512 16.1428 13.7464 15.5839L14.0446 15.3744C15.1888 14.5702 16.7369 14.6634 17.7765 15.599L21 18.5001"/><path d="M15 5.5H18.5M18.5 5.5H22M18.5 5.5V9M18.5 5.5V2"/></g>'
+      }
+    }
+  }
+];
+var { register: registerFileInputIcons, names: FILE_INPUT_ICON_NAMES } = createIconRegistry(ICON_SETS);
+
+// src/file-input/media-type.ts
+var VIDEO_EXTENSIONS = /* @__PURE__ */ new Set([
+  "avi",
+  "m3u8",
+  "m4v",
+  "mkv",
+  "mov",
+  "mp4",
+  "ogg",
+  "ogv",
+  "webm"
+]);
+var getMediaType = /* @__PURE__ */ __name((value) => {
+  if (typeof value !== "string") return value.type.startsWith("video/") ? "video" : "image";
+  const path = value.split(/[?#]/, 1).at(0) ?? "";
+  const extension = /\.([a-z0-9]+)$/i.exec(path)?.at(1)?.toLowerCase() ?? "";
+  return VIDEO_EXTENSIONS.has(extension) ? "video" : "image";
+}, "getMediaType");
+var useObjectUrls = /* @__PURE__ */ __name((files) => {
+  const liveRef = useRef(/* @__PURE__ */ new Map());
+  const [urls, setUrls] = useState(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const live = liveRef.current;
+    const wanted = new Set(files);
+    for (const [file, url] of live) {
+      if (wanted.has(file)) continue;
+      URL.revokeObjectURL(url);
+      live.delete(file);
+    }
+    for (const file of wanted) {
+      if (!live.has(file)) live.set(file, URL.createObjectURL(file));
+    }
+    setUrls(new Map(live));
+  }, [files]);
+  useEffect(() => {
+    const live = liveRef.current;
+    return () => {
+      for (const url of live.values()) URL.revokeObjectURL(url);
+      live.clear();
+    };
+  }, []);
+  return urls;
+}, "useObjectUrls");
+var asList = /* @__PURE__ */ __name((value) => {
+  if (value === void 0) return [];
+  return typeof value === "string" || value instanceof File ? [value] : value;
+}, "asList");
+var FileInput = /* @__PURE__ */ __name(({
+  label = "",
+  className = "",
+  containerClassName = "",
+  mediaModalClassName = "",
+  mediaCarouselClassName = "",
+  errors = [],
+  handleRemove,
+  fileInputProps,
+  icons,
+  getMediaType: getMediaType2 = getMediaType,
+  labels,
+  playerProps
+}) => {
+  registerFileInputIcons();
+  const {
+    value,
+    onChange,
+    placeholder,
+    disabled,
+    multiple,
+    accept,
+    id: givenId,
+    ...inputProps
+  } = fileInputProps;
+  const baseId = useId();
+  const id = givenId ?? fileInputProps.name ?? `${baseId}-field`;
+  const errorsId = `${id}-errors`;
+  const text = {
+    choose: labels?.choose ?? "Choose file",
+    chooseMany: labels?.chooseMany ?? "Choose files",
+    addMore: labels?.addMore ?? "Add more files"
+  };
+  const [openIndex, setOpenIndex] = useState(null);
+  const values = useMemo(() => asList(value), [value]);
+  const files = useMemo(() => values.filter((item) => item instanceof File), [values]);
+  const urls = useObjectUrls(files);
+  const previews = useMemo(
+    () => values.flatMap((item, index) => {
+      const url = typeof item === "string" ? item : urls.get(item);
+      return url === void 0 ? [] : [{ index, media: { type: getMediaType2(item), url } }];
+    }),
+    [values, urls, getMediaType2]
+  );
+  const media = useMemo(() => previews.map((preview) => preview.media), [previews]);
+  const messages = errors.flatMap((error, index) => error ? [{ error, index }] : []);
+  const hasErrors = messages.length > 0;
+  if (openIndex !== null && openIndex >= previews.length) setOpenIndex(null);
+  const handleChange = /* @__PURE__ */ __name((event) => {
+    if (disabled) return;
+    onChange?.(event);
+    event.target.value = "";
+  }, "handleChange");
+  return /* @__PURE__ */ jsxs("div", { className: `flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(InputLabel, { htmlFor: id, children: label }),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-invalid": hasErrors ? "" : void 0,
+          className: `border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c has-focus-visible:border-blue-crayola-c data-invalid:border-red-c group flex items-center justify-between gap-3 rounded-lg border px-3 ${className}`,
+          children: [
+            /* @__PURE__ */ jsx(InputIcon, { icon: icons?.left }),
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                htmlFor: id,
+                className: `text-primary/30 min-w-0 flex-1 truncate py-2 text-[13px] xl:py-3 ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${inputProps.className ?? ""}`,
+                children: [
+                  placeholder ?? (multiple ? text.chooseMany : text.choose),
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      ...inputProps,
+                      id,
+                      type: "file",
+                      accept: accept ?? "image/*",
+                      multiple,
+                      disabled,
+                      "aria-invalid": hasErrors ? true : void 0,
+                      "aria-describedby": [inputProps["aria-describedby"], hasErrors ? errorsId : void 0].filter(Boolean).join(" ") || void 0,
+                      onChange: handleChange,
+                      className: "sr-only"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(InputIcon, { icon: icons?.right })
+          ]
+        }
+      )
+    ] }),
+    hasErrors && /* @__PURE__ */ jsx("div", { id: errorsId, className: "space-y-1", children: messages.map(({ error, index }) => /* @__PURE__ */ jsx(
+      InputError,
+      {
+        error: messages.length > 1 ? `${String(index + 1)}. ${error}` : error
+      },
+      index
+    )) }),
+    previews.length > 0 && /* @__PURE__ */ jsxs("div", { className: "border-primary/10 bg-smoke-eerie relative flex rounded-lg border", children: [
+      multiple && /* @__PURE__ */ jsxs("div", { className: "sticky left-0 mr-1 ml-2 flex items-center justify-start gap-3", children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: id,
+            className: `border-primary/50 bg-tertiary-invert hover:border-tertiary flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md border shadow-xs transition-colors duration-300 md:size-16 lg:size-20 ${disabled ? "cursor-not-allowed" : "cursor-pointer"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: text.addMore }),
+              /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  "aria-hidden": "true",
+                  icon: "solar:gallery-add-linear",
+                  className: "text-primary size-[40%]"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "group bg-hr-line my-2 h-14 w-px shrink-0 md:h-16 lg:h-20"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        MediaCarousel,
+        {
+          className: mediaCarouselClassName,
+          gradientClassNames: {
+            left: "from-smoke-eerie rounded-l-[7px] z-2",
+            right: "from-smoke-eerie rounded-r-[7px] z-2"
+          },
+          media,
+          invalid: previews.map((preview) => !!errors.at(preview.index)),
+          labels,
+          playerProps,
+          onClick: setOpenIndex,
+          handleRemove: handleRemove && ((position) => {
+            const preview = previews.at(position);
+            if (preview) handleRemove(preview.index);
+          })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      MediaModal,
+      {
+        className: mediaModalClassName,
+        media,
+        isOpen: openIndex !== null,
+        selected: openIndex,
+        onClose: () => {
+          setOpenIndex(null);
+        },
+        labels,
+        playerProps,
+        handleRemove: handleRemove && ((position) => {
+          const preview = previews.at(position);
+          if (preview) handleRemove(preview.index);
+        })
+      }
+    )
+  ] });
+}, "FileInput");
+
+export { FileInput, getMediaType };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/file-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/lib/icon-registry.ts","../../src/file-input/file-input-icons.ts","../../src/file-input/media-type.ts","../../src/file-input/useObjectUrls.ts","../../src/file-input/FileInput.tsx"],"names":["getMediaType","useState"],"mappings":"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","file":"index.js","sourcesContent":["import { addCollection, type IconifyJSON } from '@iconify/react';\n\n/**\n * Makes the registration of a bundled icon set: `register` puts the sets in Iconify (once, calling it\n * again does nothing) and `names` lists every icon, e.g. `solar:info-circle-linear`.\n *\n * A component calls `register` when it renders, not when its file is imported: an app that never\n * renders the component never runs it, and nothing depends on the bundler keeping an import that is\n * only there for its effect (the build says \"ignored-bare-import\" for those).\n */\nexport const createIconRegistry = (sets: readonly IconifyJSON[]) => {\n  let registered = false;\n\n  return {\n    register: () => {\n      if (registered) return;\n\n      for (const set of sets) addCollection(set);\n      registered = true;\n    },\n    names: sets.flatMap(({ prefix, icons, aliases }) =>\n      [...Object.keys(icons), ...Object.keys(aliases ?? {})].map((name) => `${prefix}:${name}`),\n    ),\n  };\n};\n","import type { IconifyJSON } from '@iconify/react';\n\nimport { createIconRegistry } from '../lib/icon-registry.js';\n\n/*\n * The icons of the file input, bundled so they show without a network and without waiting for the\n * Iconify API (see `toast/toast-icons.ts`). The data is what\n * `https://api.iconify.design/<prefix>.json?icons=<name>` answers.\n */\nconst ICON_SETS: IconifyJSON[] = [\n  {\n    prefix: 'solar',\n    width: 24,\n    height: 24,\n    icons: {\n      'gallery-add-linear': {\n        body: '<g fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-width=\"1.5\"><path d=\"M22 12C22 16.714 22 19.0711 20.5355 20.5355C19.0711 22 16.714 22 12 22C7.28595 22 4.92893 22 3.46447 20.5355C2 19.0711 2 16.714 2 12C2 7.28595 2 4.92893 3.46447 3.46447C4.92893 2 7.28595 2 12 2\"/><path d=\"M2 12.5001L3.75159 10.9675C4.66286 10.1702 6.03628 10.2159 6.89249 11.0721L11.1822 15.3618C11.8694 16.0491 12.9512 16.1428 13.7464 15.5839L14.0446 15.3744C15.1888 14.5702 16.7369 14.6634 17.7765 15.599L21 18.5001\"/><path d=\"M15 5.5H18.5M18.5 5.5H22M18.5 5.5V9M18.5 5.5V2\"/></g>',\n      },\n    },\n  },\n];\n\n/**\n * Registers the icons above with Iconify; the components of this entry call it when they render\n * (calling it again is harmless).\n */\nexport const { register: registerFileInputIcons, names: FILE_INPUT_ICON_NAMES } =\n  createIconRegistry(ICON_SETS);\n","import type { TMediaResource } from '../media/index.js';\n\n// The endings of an address of a video. Anything else is taken for a picture.\nconst VIDEO_EXTENSIONS: ReadonlySet<string> = new Set([\n  'avi',\n  'm3u8',\n  'm4v',\n  'mkv',\n  'mov',\n  'mp4',\n  'ogg',\n  'ogv',\n  'webm',\n]);\n\n/**\n * Whether a file or an address is a picture or a video. A file says it with its type (`video/mp4`);\n * an address says it with its ending (`.mp4`, also before a `?` or a `#`). What is not known is a\n * picture, so a preview is always drawn.\n */\nexport const getMediaType = (value: File | string): TMediaResource => {\n  if (typeof value !== 'string') return value.type.startsWith('video/') ? 'video' : 'image';\n\n  const path = value.split(/[?#]/, 1).at(0) ?? '';\n  const extension = /\\.([a-z0-9]+)$/i.exec(path)?.at(1)?.toLowerCase() ?? '';\n\n  return VIDEO_EXTENSIONS.has(extension) ? 'video' : 'image';\n};\n","import { useEffect, useRef, useState } from 'react';\n\n/**\n * An address the browser can show for each file (`URL.createObjectURL`), made once for a file, and\n * given back (`URL.revokeObjectURL`) when the file is no longer in the list and when the component\n * goes away, so the memory of a file is not kept after it is not needed.\n *\n * The addresses are made after the render (it is an effect: making them is a change in the browser),\n * so a file that was just added has none for one render; look for it with `urls.get(file)`.\n */\nexport const useObjectUrls = (files: readonly File[]): ReadonlyMap<File, string> => {\n  const liveRef = useRef(new Map<File, string>());\n  const [urls, setUrls] = useState<ReadonlyMap<File, string>>(new Map());\n\n  useEffect(() => {\n    const live = liveRef.current;\n    const wanted = new Set(files);\n\n    for (const [file, url] of live) {\n      if (wanted.has(file)) continue;\n\n      URL.revokeObjectURL(url);\n      live.delete(file);\n    }\n\n    for (const file of wanted) {\n      if (!live.has(file)) live.set(file, URL.createObjectURL(file));\n    }\n\n    // making an address changes the browser, which is what an effect is for; the render has to be\n    // told about it to draw the files\n\n    setUrls(new Map(live));\n  }, [files]);\n\n  useEffect(() => {\n    const live = liveRef.current;\n\n    return () => {\n      for (const url of live.values()) URL.revokeObjectURL(url);\n\n      live.clear();\n    };\n  }, []);\n\n  return urls;\n};\n","import { Icon } from '@iconify/react';\nimport { type ChangeEvent, type InputHTMLAttributes, useId, useMemo, useState } from 'react';\n\nimport {\n  type IFieldBase,\n  InputError,\n  InputIcon,\n  InputLabel,\n  type TInputIcons,\n} from '../inputs/index.js';\nimport {\n  type IMediaLabels,\n  MediaCarousel,\n  MediaModal,\n  type TMediaOption,\n  type TMediaResource,\n  type TPlayerProps,\n} from '../media/index.js';\nimport { registerFileInputIcons } from './file-input-icons.js';\nimport { getMediaType as defaultGetMediaType } from './media-type.js';\nimport { useObjectUrls } from './useObjectUrls.js';\n\n/** A file the person chose, or the address of one that is already saved. */\nexport type TFileInputValue = File | string;\n\n/** The words on the field and the buttons. English by default. */\nexport interface IFileInputLabels extends IMediaLabels {\n  /** What the field says for one file. */\n  choose: string;\n  /** What the field says when it takes several files. */\n  chooseMany: string;\n  /** The name of the tile that adds more files to the ones chosen. */\n  addMore: string;\n}\n\nexport interface IFileInput extends Omit<IFieldBase, 'error'> {\n  /** The attributes of the `<input type=\"file\">`; `value` is what is shown under the field. */\n  fileInputProps: Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'value'> & {\n    /** The file (or its address) or the list of them, to show a thumbnail for each. */\n    value?: TFileInputValue | readonly TFileInputValue[];\n  };\n  /** An icon at each end of the field. One with an `onClick` is a button and needs a `label`. */\n  icons?: TInputIcons;\n  /**\n   * What is wrong with each file, in the order of the files (`undefined` or `''` for one that is\n   * fine). Each message is shown under the field, and the thumbnail of the file gets a red border.\n   */\n  errors?: readonly (string | undefined)[];\n  /** Adds a button on each thumbnail that calls this with the index of its file. */\n  handleRemove?: (index: number) => void;\n  /** The class of the backdrop of the dialog that shows a file big. */\n  mediaModalClassName?: string;\n  /** The class of the row of thumbnails. */\n  mediaCarouselClassName?: string;\n  /** Says if a file or an address is a picture or a video. The default looks at the type and at the ending. */\n  getMediaType?: (value: TFileInputValue) => TMediaResource;\n  labels?: Partial<IFileInputLabels>;\n  /** What to give the players of the videos, e.g. `getPoster` to ask a service for their posters. */\n  playerProps?: TPlayerProps;\n}\n\ninterface IPreview {\n  /** The place of the file in the list the app gave. */\n  index: number;\n  media: TMediaOption;\n}\n\nconst asList = (value: TFileInputValue | readonly TFileInputValue[] | undefined) => {\n  if (value === undefined) return [];\n\n  return typeof value === 'string' || value instanceof File ? [value] : value;\n};\n\n/**\n * A field to choose files, with a thumbnail under it for each file that is chosen. A thumbnail opens\n * the file big, in a dialog where the others can be browsed, and can have a button that removes it.\n *\n * - It is a real file input: the keyboard reaches it (it shows the focus on the field), and pressing\n *   the label or the field opens the browser's chooser. The same file can be chosen again (the input\n *   is emptied after each choice).\n * - The files are `value` (the app keeps them, as with any field); a text in the list is the address\n *   of a file that is already saved, shown as it is.\n * - The messages of `errors` are said as they show up, and the thumbnail of a file with a problem has a\n *   red border.\n */\nexport const FileInput = ({\n  label = '',\n  className = '',\n  containerClassName = '',\n  mediaModalClassName = '',\n  mediaCarouselClassName = '',\n  errors = [],\n  handleRemove,\n  fileInputProps,\n  icons,\n  getMediaType = defaultGetMediaType,\n  labels,\n  playerProps,\n}: IFileInput) => {\n  registerFileInputIcons();\n\n  const {\n    value,\n    onChange,\n    placeholder,\n    disabled,\n    multiple,\n    accept,\n    id: givenId,\n    ...inputProps\n  } = fileInputProps;\n  const baseId = useId();\n  const id = givenId ?? fileInputProps.name ?? `${baseId}-field`;\n  const errorsId = `${id}-errors`;\n  const text = {\n    choose: labels?.choose ?? 'Choose file',\n    chooseMany: labels?.chooseMany ?? 'Choose files',\n    addMore: labels?.addMore ?? 'Add more files',\n  };\n\n  const [openIndex, setOpenIndex] = useState<number | null>(null);\n\n  const values = useMemo(() => asList(value), [value]);\n  const files = useMemo(() => values.filter((item) => item instanceof File), [values]);\n  const urls = useObjectUrls(files);\n\n  // A file has its thumbnail once it has an address; its place in the list is kept for the app.\n  const previews = useMemo(\n    () =>\n      values.flatMap<IPreview>((item, index) => {\n        const url = typeof item === 'string' ? item : urls.get(item);\n\n        return url === undefined ? [] : [{ index, media: { type: getMediaType(item), url } }];\n      }),\n    [values, urls, getMediaType],\n  );\n  const media = useMemo(() => previews.map((preview) => preview.media), [previews]);\n  const messages = errors.flatMap((error, index) => (error ? [{ error, index }] : []));\n  const hasErrors = messages.length > 0;\n\n  // The dialog is closed when the file it was opened on is no longer there.\n  if (openIndex !== null && openIndex >= previews.length) setOpenIndex(null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    onChange?.(event);\n    // emptied, so the same file can be chosen again\n    event.target.value = '';\n  };\n\n  return (\n    <div className={`flex max-w-full min-w-0 flex-col gap-1.5 ${containerClassName}`}>\n      <div className=\"relative\">\n        <InputLabel htmlFor={id}>{label}</InputLabel>\n        <div\n          data-invalid={hasErrors ? '' : undefined}\n          className={`border-primary/10 bg-smoke-eerie focus-within:border-blue-crayola-c has-focus-visible:border-blue-crayola-c data-invalid:border-red-c group flex items-center justify-between gap-3 rounded-lg border px-3 ${className}`}\n        >\n          <InputIcon icon={icons?.left} />\n          <label\n            htmlFor={id}\n            className={`text-primary/30 min-w-0 flex-1 truncate py-2 text-[13px] xl:py-3 ${\n              disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n            } ${inputProps.className ?? ''}`}\n          >\n            {placeholder ?? (multiple ? text.chooseMany : text.choose)}\n            <input\n              {...inputProps}\n              id={id}\n              type=\"file\"\n              accept={accept ?? 'image/*'}\n              multiple={multiple}\n              disabled={disabled}\n              aria-invalid={hasErrors ? true : undefined}\n              aria-describedby={\n                [inputProps['aria-describedby'], hasErrors ? errorsId : undefined]\n                  .filter(Boolean)\n                  .join(' ') || undefined\n              }\n              onChange={handleChange}\n              className=\"sr-only\"\n            />\n          </label>\n          <InputIcon icon={icons?.right} />\n        </div>\n      </div>\n\n      {hasErrors && (\n        <div id={errorsId} className=\"space-y-1\">\n          {messages.map(({ error, index }) => (\n            <InputError\n              key={index}\n              error={messages.length > 1 ? `${String(index + 1)}. ${error}` : error}\n            />\n          ))}\n        </div>\n      )}\n\n      {previews.length > 0 && (\n        <div className=\"border-primary/10 bg-smoke-eerie relative flex rounded-lg border\">\n          {multiple && (\n            <div className=\"sticky left-0 mr-1 ml-2 flex items-center justify-start gap-3\">\n              <label\n                htmlFor={id}\n                className={`border-primary/50 bg-tertiary-invert hover:border-tertiary flex size-14 shrink-0 items-center justify-center overflow-hidden rounded-md border shadow-xs transition-colors duration-300 md:size-16 lg:size-20 ${\n                  disabled ? 'cursor-not-allowed' : 'cursor-pointer'\n                }`}\n              >\n                <span className=\"sr-only\">{text.addMore}</span>\n                <Icon\n                  aria-hidden=\"true\"\n                  icon=\"solar:gallery-add-linear\"\n                  className=\"text-primary size-[40%]\"\n                />\n              </label>\n              <div\n                aria-hidden=\"true\"\n                className=\"group bg-hr-line my-2 h-14 w-px shrink-0 md:h-16 lg:h-20\"\n              />\n            </div>\n          )}\n          <MediaCarousel\n            className={mediaCarouselClassName}\n            gradientClassNames={{\n              left: 'from-smoke-eerie rounded-l-[7px] z-2',\n              right: 'from-smoke-eerie rounded-r-[7px] z-2',\n            }}\n            media={media}\n            invalid={previews.map((preview) => !!errors.at(preview.index))}\n            labels={labels}\n            playerProps={playerProps}\n            onClick={setOpenIndex}\n            handleRemove={\n              handleRemove &&\n              ((position) => {\n                const preview = previews.at(position);\n\n                if (preview) handleRemove(preview.index);\n              })\n            }\n          />\n        </div>\n      )}\n\n      <MediaModal\n        className={mediaModalClassName}\n        media={media}\n        isOpen={openIndex !== null}\n        selected={openIndex}\n        onClose={() => {\n          setOpenIndex(null);\n        }}\n        labels={labels}\n        playerProps={playerProps}\n        handleRemove={\n          handleRemove &&\n          ((position) => {\n            const preview = previews.at(position);\n\n            if (preview) handleRemove(preview.index);\n          })\n        }\n      />\n    </div>\n  );\n};\n"]}

package/dist/file-input/media-type.d.cts

@@ -0,0 +1,8 @@
+import type { TMediaResource } from '../media/index.js';
+/**
+ * Whether a file or an address is a picture or a video. A file says it with its type (`video/mp4`);
+ * an address says it with its ending (`.mp4`, also before a `?` or a `#`). What is not known is a
+ * picture, so a preview is always drawn.
+ */
+export declare const getMediaType: (value: File | string) => TMediaResource;
+//# sourceMappingURL=media-type.d.cts.map

package/dist/file-input/media-type.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-type.d.cts","sourceRoot":"","sources":["../../src/file-input/media-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAexD;;;;GAIG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,IAAI,GAAG,MAAM,KAAG,cAOnD,CAAC"}