import { jsxs as a, Fragment as o, jsx as e } from "react/jsx-runtime";
import { H as p, C as l, a as t, T as i, F as c, P as m, A as d, c as n } from "../index-sdOMz8GW.js";
import { Upload as u } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const I = () => /* @__PURE__ */ a(o, { children: [
  /* @__PURE__ */ e(
    p,
    {
      title: "FileInput",
      description: "An advanced file input component with native HTML5 drag-and-drop support, image preview, and flexible file type validation. The component implements native drag and drop functionality without external dependencies.",
      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-purple-500 via-fuchsia-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg border border-purple-500/50", children: /* @__PURE__ */ e(u, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Images Only" }),
      /* @__PURE__ */ e(
        c,
        {
          label: "Upload Images",
          accept: "img",
          placeholderText: "PNG, JPG, GIF, WEBP. Max 100mb."
        }
      )
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Multiple Images" }),
      /* @__PURE__ */ e(
        c,
        {
          label: "Upload Multiple Images",
          accept: "img",
          multiple: !0,
          placeholderText: "Select multiple images"
        }
      )
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "PDF Documents" }),
      /* @__PURE__ */ e(
        c,
        {
          label: "Upload PDF",
          accept: "pdf",
          placeholderText: "PDF files only. Max 100mb."
        }
      )
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "CSV & Excel Files" }),
      /* @__PURE__ */ e(
        c,
        {
          label: "Upload CSV or Excel",
          accept: "csvAndExcel",
          multiple: !0,
          placeholderText: "CSV, XLSX, or XLS files. Max 100mb."
        }
      )
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Images & PDFs" }),
      /* @__PURE__ */ e(
        c,
        {
          label: "Upload Images or PDFs",
          accept: "imgAndPdf",
          multiple: !0,
          placeholderText: "Images or PDF documents"
        }
      )
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "All File Types" }),
      /* @__PURE__ */ e(
        c,
        {
          label: "Upload Any File",
          accept: "all",
          multiple: !0,
          placeholderText: "Drag and drop any file type or click to browse"
        }
      )
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Any File (No Restriction)" }),
      /* @__PURE__ */ e(
        c,
        {
          label: "Upload Files",
          multiple: !0,
          placeholderText: "Accept any file type - no restrictions"
        }
      )
    ] }),
    /* @__PURE__ */ a(l, { className: "p-4", children: [
      /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: "Disabled" }),
      /* @__PURE__ */ e(c, { accept: "img", disabled: !0 })
    ] })
  ] }) }) }) }),
  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
    { label: "Primary", color: "primary" },
    { label: "Secondary", color: "secondary" },
    { label: "Danger", color: "danger" },
    { label: "Info", color: "info" },
    { label: "Success", color: "success" },
    { label: "Warning", color: "warning" }
  ].map(({ label: s, color: r }) => /* @__PURE__ */ a(l, { className: "p-4", children: [
    /* @__PURE__ */ e(i, { tag: "h5", className: "mb-3", children: s }),
    /* @__PURE__ */ e(
      c,
      {
        label: `Upload ${s}`,
        color: r,
        accept: "img",
        placeholderText: "PNG, JPG, GIF, WEBP. Max 100mb."
      }
    )
  ] }, r)) }) }) }) }),
  /* @__PURE__ */ e(
    m,
    {
      componentName: "FileInput",
      defaultValues: {
        label: "Upload Assets",
        accept: "img",
        multiple: !1,
        disabled: !1,
        color: "primary",
        placeholderText: "PNG, JPG, GIF or PDF. Max 100mb."
      },
      includeProps: [
        "label",
        "accept",
        "multiple",
        "disabled",
        "color",
        "placeholderText"
      ],
      excludeProps: [
        "children",
        "containerProps",
        "additionalInputProps",
        "wrapperClassName",
        "className",
        "labelClassName",
        "containerClassName"
      ],
      children: (s) => /* @__PURE__ */ e("div", { className: "w-full max-w-2xl", children: /* @__PURE__ */ e(c, { ...s }) })
    }
  ),
  /* @__PURE__ */ e(d, { componentName: "FileInput" }),
  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
    n,
    {
      language: "tsx",
      code: `import { FileInput } from '@e-burgos/tucu-ui';

// Images only
<FileInput
  label="Upload Images"
  accept="img"
  placeholderText="PNG, JPG, GIF, WEBP. Max 100mb."
/>

// Multiple images
<FileInput
  label="Upload Multiple Images"
  accept="img"
  multiple
  placeholderText="Select multiple images"
/>

// PDF documents
<FileInput
  label="Upload PDF"
  accept="pdf"
  placeholderText="PDF files only. Max 100mb."
/>

// CSV and Excel files
<FileInput
  label="Upload CSV or Excel"
  accept="csvAndExcel"
  multiple
  placeholderText="CSV, XLSX, or XLS files. Max 100mb."
/>

// Images and PDFs
<FileInput
  label="Upload Images or PDFs"
  accept="imgAndPdf"
  multiple
  placeholderText="Images or PDF documents"
/>

// All predefined file types
<FileInput
  label="Upload Any File"
  accept="all"
  multiple
  placeholderText="Drag and drop any file type or click to browse"
/>

// Any file type (no restrictions)
<FileInput
  label="Upload Files"
  multiple
  placeholderText="Accept any file type - no restrictions"
/>

// Disabled
<FileInput accept="img" disabled />

// Colors
<FileInput accept="img" color="primary" />
<FileInput accept="img" color="secondary" />
<FileInput accept="img" color="danger" />
<FileInput accept="img" color="info" />
<FileInput accept="img" color="success" />
<FileInput accept="img" color="warning" />

// Custom styling
<FileInput
  accept="img"
  wrapperClassName="custom-wrapper"
  containerClassName="custom-container"
  labelClassName="custom-label"
/>`
    }
  ) }) }) })
] });
export {
  I as default
};
