@cerberus-design/react/dist/components/file-upload/file-uploader.js

The Cerberus Design React component library.

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { cx } from 'styled-system/css';
import { vstack } from 'styled-system/patterns';
import { fileUploader } from 'styled-system/recipes';
import { Show } from '../show/show.js';
import { useCerberusContext } from '../../context/cerberus.js';
import { Avatar } from '../avatar/avatar.js';

function FileUploader(props) {
  const { icons } = useCerberusContext();
  const styles = fileUploader();
  const { waitingFileUploader: Icon } = icons;
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ...props.disabled ? { "aria-disabled": true } : {},
      className: cx(
        vstack({
          justify: "center"
        }),
        styles.container
      ),
      children: [
        /* @__PURE__ */ jsx("div", { className: styles.icon, children: /* @__PURE__ */ jsx(Avatar, { gradient: "charon-light", fallback: /* @__PURE__ */ jsx(Icon, {}) }) }),
        /* @__PURE__ */ jsxs(
          "label",
          {
            className: cx(
              vstack({
                justify: "center"
              }),
              styles.label
            ),
            htmlFor: props.name,
            children: [
              /* @__PURE__ */ jsx(Show, { when: props.heading, children: /* @__PURE__ */ jsx("p", { className: styles.heading, children: props.heading }) }),
              "Import ",
              props.accept?.replace(",", ", "),
              " files",
              /* @__PURE__ */ jsx("p", { className: styles.description, children: "Click to select files" }),
              /* @__PURE__ */ jsx(
                "input",
                {
                  ...props,
                  className: cx(props.className, styles.input),
                  type: "file"
                }
              )
            ]
          }
        )
      ]
    }
  );
}

export { FileUploader };