nextuiq/dist/index31.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 React__default, { useState, useId, useCallback } from 'react';
import { FiChevronDown } from './index47.mjs';

const SelectComponent = ({
  options,
  placeholder = "Select an option",
  onChange,
  className = "",
  defaultValue = "",
  disabled = false,
  error = false,
  required = false,
  name,
  id,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedby,
  ...props
}) => {
  const [selectedValue, setSelectedValue] = useState(defaultValue);
  const uniqueId = useId();
  const selectId = id || uniqueId;
  const handleChange = useCallback((e) => {
    const value = e.target.value;
    setSelectedValue(value);
    onChange(value);
  }, [onChange]);
  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
    /* @__PURE__ */ jsxRuntimeExports.jsxs(
      "select",
      {
        id: selectId,
        name,
        value: selectedValue,
        onChange: handleChange,
        disabled,
        required,
        "aria-label": ariaLabel,
        "aria-describedby": ariaDescribedby,
        "aria-invalid": error,
        className: `h-11 w-full appearance-none rounded-lg border px-4 py-2.5 pr-11 text-sm shadow-sm 
          ${error ? "border-[oklch(var(--theme-destructive))]" : "border-[oklch(var(--theme-border))]"}
          ${disabled ? "cursor-not-allowed opacity-50" : ""}
          ${selectedValue ? "text-[oklch(var(--theme-foreground))]" : "text-[oklch(var(--theme-muted-foreground))]"}
          bg-[oklch(var(--theme-background))]
          placeholder:text-[oklch(var(--theme-muted-foreground))]
          focus:border-[oklch(var(--theme-primary))]
          focus:outline-none
          focus:ring-2
          focus:ring-[oklch(var(--theme-ring))]
          ${className}`,
        ...props,
        children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
          options.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsx(
            "option",
            {
              value: option.value,
              disabled: option.disabled,
              className: "text-[oklch(var(--theme-foreground))] bg-[oklch(var(--theme-background))]",
              children: option.label
            },
            option.value
          ))
        ]
      }
    ),
    /* @__PURE__ */ jsxRuntimeExports.jsx(
      "div",
      {
        className: "pointer-events-none absolute right-3 top-1/2 -translate-y-1/2",
        "aria-hidden": "true",
        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
          FiChevronDown,
          {
            className: `h-5 w-5 ${error ? "text-[oklch(var(--theme-destructive))]" : "text-[oklch(var(--theme-muted-foreground))]"}`
          }
        )
      }
    )
  ] });
};
SelectComponent.displayName = "Select";
const Select = React__default.memo(SelectComponent);

export { Select };