nextuiq/dist/index25.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { forwardRef, useId } from 'react';

const FileInputComponent = forwardRef(({
  className,
  onChange,
  label,
  accept,
  multiple,
  required = false,
  disabled = false,
  id,
  name,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedby,
  ...props
}, ref) => {
  const uniqueId = useId();
  const inputId = id || uniqueId;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
    label && /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "label",
      {
        htmlFor: inputId,
        className: "block text-sm font-medium text-[oklch(var(--theme-foreground))] mb-1",
        children: [
          label,
          required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[oklch(var(--theme-destructive))] ml-1", children: "*" })
        ]
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "input",
      {
        ref,
        type: "file",
        id: inputId,
        name,
        onChange,
        accept,
        multiple,
        required,
        disabled,
        "aria-label": ariaLabel || label,
        "aria-describedby": ariaDescribedby,
        "aria-required": required,
        className: `h-11 w-full overflow-hidden rounded-lg border text-sm shadow-sm transition-colors
          border-[oklch(var(--theme-border))]
          bg-[oklch(var(--theme-background))]
          text-[oklch(var(--theme-muted-foreground))]
          file:mr-5 file:border-collapse file:cursor-pointer file:rounded-l-lg 
          file:border-0 file:border-r file:border-solid 
          file:border-[oklch(var(--theme-border))]
          file:bg-[oklch(var(--theme-muted))]
          file:py-3 file:pl-3.5 file:pr-3 file:text-sm
          file:text-[oklch(var(--theme-foreground))]
          hover:file:bg-[oklch(var(--theme-muted/0.8))]
          focus:outline-none focus:ring-2
          focus:ring-[oklch(var(--theme-ring))]
          disabled:cursor-not-allowed disabled:opacity-50
          ${className}`,
        ...props
      }
    )
  ] });
});
FileInputComponent.displayName = "FileInput";
const FileInput = FileInputComponent;

export { FileInput };