@llamaindex/ui/dist/chunk-QMXCUFNI.mjs

A comprehensive UI component library built with React, TypeScript, and Tailwind CSS for LlamaIndex applications

import { cn } from './chunk-MG2ARK3A.mjs';
import { __objRest, __spreadValues } from './chunk-4AMAFZLZ.mjs';
import * as React from 'react';
import { cva } from 'class-variance-authority';
import { Eye, EyeOff } from 'lucide-react';
import { jsx, jsxs } from 'react/jsx-runtime';

var inputVariants = cva(
  "flex w-full min-w-0 rounded-md border border-input bg-transparent text-base shadow-xs transition-[color,box-shadow] outline-none ring-offset-background file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
  {
    variants: {
      size: {
        default: "h-10 px-3 py-2 md:text-sm",
        xs: "h-8 px-2.5 py-1.5 text-xs"
      }
    },
    defaultVariants: {
      size: "default"
    }
  }
);
var Input = React.forwardRef(
  (_a, ref) => {
    var _b = _a, { className, size, type = "text", disabled } = _b, props = __objRest(_b, ["className", "size", "type", "disabled"]);
    const [showPassword, setShowPassword] = React.useState(false);
    const isPassword = type === "password";
    React.useEffect(() => {
      if (!isPassword && showPassword) {
        setShowPassword(false);
      }
    }, [isPassword, showPassword]);
    const inputType = isPassword && showPassword ? "text" : type;
    const inputClasses = cn(
      inputVariants({ size }),
      isPassword && "pr-10",
      className,
      disabled ? "cursor-not-allowed" : "",
      "focus-visible:border-[#8B5CF6]"
    );
    const inputElement = /* @__PURE__ */ jsx(
      "input",
      __spreadValues({
        ref,
        type: inputType,
        "data-slot": "input",
        className: inputClasses
      }, props)
    );
    if (!isPassword) {
      return inputElement;
    }
    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
      inputElement,
      /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          className: "absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground",
          onClick: () => setShowPassword((prev) => !prev),
          "aria-label": showPassword ? "Hide password" : "Show password",
          "aria-pressed": showPassword,
          disabled,
          children: showPassword ? /* @__PURE__ */ jsx(Eye, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeOff, { className: "size-4", "aria-hidden": "true" })
        }
      )
    ] });
  }
);
Input.displayName = "Input";

export { Input, inputVariants };