analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
193 lines (192 loc) • 8.03 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/Input/Input.tsx
var Input_exports = {};
__export(Input_exports, {
default: () => Input_default
});
module.exports = __toCommonJS(Input_exports);
var import_phosphor_react = require("phosphor-react");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var SIZE_CLASSES = {
small: "text-sm",
medium: "text-md",
large: "text-lg",
"extra-large": "text-xl"
};
var STATE_CLASSES = {
default: "border-border-300 placeholder:text-text-600 hover:border-border-400",
error: "border-2 border-indicator-error placeholder:text-text-600",
disabled: "border-border-300 placeholder:text-text-600 cursor-not-allowed opacity-40",
"read-only": "border-transparent !text-text-600 cursor-default focus:outline-none bg-transparent"
};
var VARIANT_CLASSES = {
outlined: "border rounded-lg",
underlined: "border-0 border-b rounded-none bg-transparent focus:outline-none focus:border-primary-950 focus:border-b-2",
rounded: "border rounded-full"
};
var getActualState = (disabled, readOnly, errorMessage, state) => {
if (disabled) return "disabled";
if (readOnly) return "read-only";
if (errorMessage) return "error";
return state || "default";
};
var getIconSize = (size) => {
const iconSizeClasses = {
small: "w-4 h-4",
medium: "w-5 h-5",
large: "w-6 h-6",
"extra-large": "w-7 h-7"
};
return iconSizeClasses[size] || iconSizeClasses.medium;
};
var getPasswordToggleConfig = (type, disabled, readOnly, showPassword, iconRight) => {
const isPasswordType = type === "password";
const shouldShowPasswordToggle = isPasswordType && !disabled && !readOnly;
let actualIconRight = iconRight;
let ariaLabel;
if (shouldShowPasswordToggle) {
actualIconRight = showPassword ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.EyeSlash, {}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.Eye, {});
ariaLabel = showPassword ? "Ocultar senha" : "Mostrar senha";
}
return { shouldShowPasswordToggle, actualIconRight, ariaLabel };
};
var getCombinedClasses = (actualState, variant) => {
const stateClasses = STATE_CLASSES[actualState];
const variantClasses = VARIANT_CLASSES[variant];
if (actualState === "error" && variant === "underlined") {
return "border-0 border-b-2 border-indicator-error rounded-none bg-transparent focus:outline-none focus:border-primary-950 placeholder:text-text-600";
}
if (actualState === "read-only" && variant === "underlined") {
return "border-0 border-b-0 rounded-none bg-transparent focus:outline-none !text-text-900 cursor-default";
}
return `${stateClasses} ${variantClasses}`;
};
var Input = (0, import_react.forwardRef)(
({
label,
helperText,
errorMessage,
size = "medium",
variant = "outlined",
state = "default",
iconLeft,
iconRight,
className = "",
containerClassName = "",
disabled,
readOnly,
required,
id,
type = "text",
...props
}, ref) => {
const [showPassword, setShowPassword] = (0, import_react.useState)(false);
const isPasswordType = type === "password";
const actualType = isPasswordType && showPassword ? "text" : type;
const actualState = getActualState(disabled, readOnly, errorMessage, state);
const sizeClasses = SIZE_CLASSES[size];
const combinedClasses = (0, import_react.useMemo)(
() => getCombinedClasses(actualState, variant),
[actualState, variant]
);
const iconSize = getIconSize(size);
const baseClasses = `bg-background w-full py-2 ${actualState === "read-only" ? "px-0" : "px-3"} font-normal text-text-900 focus:outline-primary-950`;
const generatedId = (0, import_react.useId)();
const inputId = id ?? `input-${generatedId}`;
const togglePasswordVisibility = () => setShowPassword(!showPassword);
const { shouldShowPasswordToggle, actualIconRight, ariaLabel } = getPasswordToggleConfig(
type,
disabled,
readOnly,
showPassword,
iconRight
);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `${containerClassName}`, children: [
label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"label",
{
htmlFor: inputId,
className: `block font-bold text-text-900 mb-1.5 ${sizeClasses}`,
children: [
label,
" ",
required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-indicator-error", children: "*" })
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
iconLeft && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center`,
children: iconLeft
}
) }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"input",
{
ref,
id: inputId,
type: actualType,
className: `${baseClasses} ${sizeClasses} ${combinedClasses} ${iconLeft ? "pl-10" : ""} ${actualIconRight ? "pr-10" : ""} ${className}`,
disabled,
readOnly,
required,
"aria-invalid": actualState === "error" ? "true" : void 0,
...props
}
),
actualIconRight && (shouldShowPasswordToggle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
type: "button",
className: "absolute right-3 top-1/2 transform -translate-y-1/2 cursor-pointer border-0 bg-transparent p-0",
onClick: togglePasswordVisibility,
"aria-label": ariaLabel,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center hover:text-text-600 transition-colors`,
children: actualIconRight
}
)
}
) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
className: `${iconSize} text-text-400 flex items-center justify-center`,
children: actualIconRight
}
) }))
] }),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
helperText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_phosphor_react.WarningCircle, { size: 16 }),
" ",
errorMessage
] })
] })
] });
}
);
var Input_default = Input;
//# sourceMappingURL=index.js.map