@szum-tech/design-system/dist/chunk-75T7KAAY.js

Szum-Tech design system with tailwindcss support

import { cn } from './chunk-ZD2QRAOX.js';
import { cva } from 'class-variance-authority';
import { jsxs, jsx } from 'react/jsx-runtime';

var inputCva = cva(
  [
    "bg-app-foreground font-poppins h-10 w-full appearance-none border py-2 outline-0 transition-colors duration-300 ease-in-out",
    "placeholder:select-none placeholder:text-gray-400",
    "invalid:border-error-500 focus:border-primary-500 active:border-primary-500",
    "disabled:border-gray-800 disabled:text-gray-300 disabled:placeholder:text-gray-600 disabled:cursor-not-allowed"
  ],
  {
    variants: {
      invalid: {
        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
        false: ["border-gray-600 hover:border-primary-600 text-gray-100"]
      },
      withStartIcon: {
        true: "pl-11",
        false: "pl-3"
      },
      withEndIcon: {
        true: "pr-11",
        false: "pr-3"
      }
    },
    defaultVariants: {
      invalid: false,
      withStartIcon: false,
      withEndIcon: false
    }
  }
);
var inputIconContainerCva = cva(
  ["pointer-events-none absolute inset-y-2 inline-flex w-10 place-content-center items-center text-center"],
  {
    variants: {
      disabled: {
        true: "text-gray-300"
      },
      site: {
        right: "right-0 border-l border-l-gray-800 pr-1",
        left: "left-0 border-r border-r-gray-800 pl-1"
      }
    },
    defaultVariants: {
      disabled: false
    }
  }
);
function Input({ invalid = false, startIcon, endIcon, disabled = false, className, ...props }) {
  const inputStyles = inputCva({ withEndIcon: !!endIcon, withStartIcon: !!startIcon, invalid });
  const inputIconStartContainer = inputIconContainerCva({ site: "left", disabled });
  const inputIconEndContainer = inputIconContainerCva({ site: "right", disabled });
  return /* @__PURE__ */ jsxs("div", { className: "text-body-2 relative text-gray-100", children: [
    startIcon ? /* @__PURE__ */ jsx("span", { className: inputIconStartContainer, children: startIcon }) : null,
    /* @__PURE__ */ jsx(
      "input",
      {
        "aria-invalid": invalid || void 0,
        disabled,
        className: cn(inputStyles, className),
        ...props
      }
    ),
    endIcon ? /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: inputIconEndContainer, children: endIcon }) : null
  ] });
}

export { Input };