@paradise-ui/text-field/dist/elementClass.js

An enhanced version of common <input> component

'use client'
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/elementClass.ts
var elementClass_exports = {};
__export(elementClass_exports, {
  defaultTextFieldElementClass: () => defaultTextFieldElementClass,
  tailwindTextFieldElementClass: () => tailwindTextFieldElementClass
});
module.exports = __toCommonJS(elementClass_exports);
var import_clsx = __toESM(require("clsx"));
var defaultTextFieldElementClass = (props) => {
  return {
    root: (0, import_clsx.default)([
      "pui-text-field",
      `pui-text-field--${props.variant}`,
      `pui-text-field--${props.size}`,
      !!props.errorMessage || props.invalid ? `pui-text-field--error` : "",
      props.focus ? "pui-text-field--focus" : "",
      props.disabled ? `pui-text-field--disabled` : "",
      props.className
    ]),
    labelBlock: "pui-text-field__label-block",
    label: "pui-text-field__label",
    secondaryLabel: "pui-text-field__label-secondary",
    inputBlock: "pui-text-field__input-block",
    inputPrefix: "pui-text-field__input-prefix",
    input: "",
    inputSuffix: "pui-text-field__input-suffix",
    messageBlock: "pui-text-field__message-block",
    helperText: "pui-text-field__helper-text",
    errorMessage: "pui-text-field__error-message"
  };
};
var tailwindTextFieldElementClass = (props) => {
  return {
    root: (0, import_clsx.default)([
      "w-full text-[var(--pui-text,#31333e)] dark:text-[var(--pui-text-in-dark,#e7e7e9)] border-box text-[1rem]",
      props.className
    ]),
    labelBlock: (0, import_clsx.default)(["flex justify-between mb-[0.25rem]", props.size === "sm" ? "text-[0.75rem]" : "text-[0.875rem]"]),
    label: "",
    secondaryLabel: "text-[var(--pui-text-secondary,#63636e)] dark:text-[var(--pui-text-secondary-in-dark,#a4a4ad)]",
    inputBlock: (0, import_clsx.default)([
      "flex overflow-hidden antialiased",
      props.size === "sm" && "text-[0.875rem]",
      props.size === "sm" && (props.variant === "line" ? "h-[1.625rem]" : "h-[2rem]"),
      props.size === "md" && (props.variant === "line" ? "h-[1.875rem]" : "h-[2.5rem]"),
      props.size === "lg" && "text-[1.125rem]",
      props.size === "lg" && (props.variant === "line" ? "h-[2rem]" : "h-[3rem]"),
      props.variant === "outlined" && [
        "rounded-[5px]",
        "border border-solid",
        !props.focus && !props.errorMessage && !props.invalid && "border-[var(--pui-soft-border,#dadce3)] dark:border-[var(--pui-soft-border-in-dark,#373a3a)]"
      ],
      props.variant === "line" && [
        "bg-transparent mb-[0.3rem]",
        "border-0 border-b border-solid",
        !props.focus && !props.errorMessage && !props.invalid && "border-[var(--pui-soft-border,#dadce3)] dark:border-[var(--pui-soft-border-in-dark,#373a3a)]"
      ],
      props.variant === "filled" && [
        "rounded-[5px]",
        !props.errorMessage && !props.invalid && "bg-[var(--pui-input-filler,#f0f0f2)] dark:bg-[var(--pui-input-filler-dark,#313437)]",
        "border border-solid",
        !props.focus && !props.errorMessage && !props.invalid && !props.disabled && "border-[var(--pui-input-filler,#f0f0f2)] dark:border-[var(--pui-input-filler-dark,#313437)]"
      ],
      !props.focus && !props.errorMessage && !props.disabled && "hover:border-[var(--pui-border,#c3c7d0)] dark:hover:var(--pui-border-in-dark,#43474a)",
      props.disabled && "opacity-50 cursor-not-allowed",
      props.focus && !props.errorMessage && "border-[var(--pui-info,#008DDA)]",
      props.focus && !props.errorMessage && (props.variant === "line" ? "border-b-[1.5px]" : "shadow-[0_0_0_0.5px_var(--pui-info,#008DDA)]"),
      (!!props.errorMessage || props.invalid) && "border-[var(--pui-error,#e74747)]",
      (!!props.errorMessage || props.invalid) && (props.variant === "line" ? "border-b-[1.5px]" : "shadow-[0_0_0_0.5px_var(--pui-error,#e74747)]"),
      (!!props.errorMessage || props.invalid) && props.variant === "filled" && "bg-[var(--pui-error-lighten,#fbe3e3)] dark:bg-[var(--pui-error-darken,#230b0b)]"
    ]),
    inputPrefix: (0, import_clsx.default)([
      "h-full flex items-center",
      props.variant !== "line" && props.size === "sm" && "pl-[0.5rem]",
      props.variant !== "line" && props.size === "md" && "pl-[0.75rem]",
      props.variant !== "line" && props.size === "lg" && "pl-[1rem]",
      props.variant === "line" && props.size === "sm" && "pr-[0.5rem]",
      props.variant === "line" && props.size === "md" && "pr-[0.75rem]",
      props.variant === "line" && props.size === "lg" && "pr-[1rem]"
    ]),
    input: (0, import_clsx.default)([
      "w-full h-full font-inherit text-inherit border-0 outline-0 shadow-none bg-inherit disabled:cursor-not-allowed disabled:bg-inherit",
      "placeholder:text-[var(--pui-input-placeholder,#adb5bd)] dark:placeholder:text-[var(--pui-input-placeholder-dark,#696969)]",
      props.variant === "filled" && "bg-inherit",
      props.variant === "line" ? "p-0" : "py-0",
      props.variant !== "line" && props.size === "sm" && "px-[0.5rem]",
      props.variant !== "line" && props.size === "md" && "px-[0.75rem]",
      props.variant !== "line" && props.size === "lg" && "px-[1rem]"
    ]),
    inputSuffix: (0, import_clsx.default)([
      "h-full flex items-center",
      props.variant === "line" && props.size === "sm" && "pl-[0.5rem]",
      props.variant === "line" && props.size === "md" && "pl-[0.75rem]",
      props.variant === "line" && props.size === "lg" && "pl-[1rem]",
      props.variant !== "line" && props.size === "sm" && "pr-[0.5rem]",
      props.variant !== "line" && props.size === "md" && "pr-[0.75rem]",
      props.variant !== "line" && props.size === "lg" && "pr-[1rem]"
    ]),
    messageBlock: (0, import_clsx.default)([
      "mt-[0.25em] text-[var(--pui-text-secondary,#63636e)] dark:text-[var(--pui-text-secondary-in-dark,#a4a4ad)]",
      props.size === "sm" ? "text-[0.65rem]" : "text-[0.75rem]"
    ]),
    helperText: "",
    errorMessage: "text-[var(--pui-error,#e74747)]"
  };
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  defaultTextFieldElementClass,
  tailwindTextFieldElementClass
});