nextuiq/dist/index22.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 InputComponent = forwardRef(({
  type = "text",
  id,
  name,
  placeholder,
  defaultValue,
  onChange,
  className = "",
  min,
  max,
  step,
  disabled = false,
  success = false,
  error = false,
  hint,
  label,
  required = false,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedby,
  maxLength,
  minLength,
  pattern,
  readOnly = false,
  autoComplete = "off",
  autoFocus = false,
  value,
  size,
  ...props
}, ref) => {
  const uniqueId = useId();
  const inputId = id || uniqueId;
  const hintId = `${inputId}-hint`;
  let inputClasses = ` ${className} h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-sm 
      bg-[oklch(var(--theme-background))] 
      text-[oklch(var(--theme-foreground))] 
      placeholder:text-[oklch(var(--theme-muted-foreground))] 
      focus:outline-none focus:ring-0 focus:ring-[oklch(var(--theme-ring))]`;
  if (disabled) {
    inputClasses += ` text-[oklch(var(--theme-muted-foreground))] border-[oklch(var(--theme-border))] 
      bg-[oklch(var(--theme-muted))] cursor-not-allowed`;
  } else if (error) {
    inputClasses += ` text-[oklch(var(--theme-destructive))] border-[oklch(var(--theme-destructive))] 
      focus:ring-[oklch(var(--theme-destructive)/0.2)]`;
  } else if (success) {
    inputClasses += ` text-[oklch(var(--theme-success))] border-[oklch(var(--theme-success))] 
      focus:ring-[oklch(var(--theme-success)/0.2)]`;
  } else {
    inputClasses += ` border-[oklch(var(--theme-border))] 
      focus:border-[oklch(var(--theme-ring))]`;
  }
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1.5", children: [
    label && /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "label",
      {
        htmlFor: inputId,
        className: `text-sm font-medium ${disabled ? "text-[oklch(var(--theme-muted-foreground))]" : "text-[oklch(var(--theme-foreground))]"}`,
        children: [
          label,
          required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[oklch(var(--theme-destructive))] ml-1", children: "*" })
        ]
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
      /* @__PURE__ */ jsxRuntimeExports.jsx(
        "input",
        {
          ref,
          type,
          id: inputId,
          name,
          placeholder,
          defaultValue,
          onChange,
          min,
          max,
          step,
          disabled,
          required,
          "aria-invalid": error,
          "aria-label": ariaLabel || label,
          "aria-describedby": hint ? hintId : ariaDescribedby,
          className: inputClasses,
          ...props
        }
      ),
      hint && /* @__PURE__ */ jsxRuntimeExports.jsx(
        "p",
        {
          id: hintId,
          className: `mt-1.5 text-xs ${error ? "text-[oklch(var(--theme-destructive))]" : success ? "text-[oklch(var(--theme-success))]" : "text-[oklch(var(--theme-muted-foreground))]"}`,
          children: hint
        }
      )
    ] })
  ] });
});
InputComponent.displayName = "Input";
const Input = InputComponent;

export { Input, Input as default };