@payfit/unity-components
Version:
124 lines (123 loc) • 5.13 kB
JavaScript
import { Icon as e } from "../icon/Icon.js";
import { Spinner as t } from "../spinner/Spinner.js";
import { CircularIconButton as n } from "../icon-button/CircularIconButton.js";
import { forwardRef as r } from "react";
import { uyTv as i } from "@payfit/unity-themes";
import { jsx as a, jsxs as o } from "react/jsx-runtime";
import { useIntl as s } from "react-intl";
import { Input as c } from "react-aria-components/Input";
//#region src/components/input/Input.tsx
var l = i({
slots: {
base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
prefix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0",
suffix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
},
variants: {
isInvalid: { true: {
base: "uy:border-border-form-error uy:bg-surface-form-error",
prefix: "uy:bg-surface-form-error uy:border-border-form-error",
inputWrapper: "uy:bg-surface-form-error",
input: "uy:bg-surface-form-error",
state: "uy:text-content-form-error",
suffix: "uy:bg-surface-form-error uy:border-border-form-error"
} },
isReadOnly: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly",
inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
input: "uy:bg-surface-form-disabled uy:text-content-form-readonly",
suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-readonly"
} },
isDisabled: { true: {
base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
prefix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled",
inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
input: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
} }
},
compoundVariants: [{
isInvalid: !1,
isDisabled: !1,
isReadOnly: !1,
className: {
base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
prefix: "uy:bg-surface-neutral-low uy:border-border-form-enabled uy:text-content-form-enabled",
inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
state: "uy:text-content-neutral-disabled",
suffix: "uy:border-border-form-enabled uy:bg-surface-neutral-low uy:text-content-form-enabled"
}
}]
}), u = r(({ type: r = "text", prefix: i, suffix: u, isInvalid: d, isLoading: f, isDisabled: p, isReadOnly: m, onClearButtonPress: h, ...g }, _) => {
let v = s(), { base: y, prefix: b, inputWrapper: x, input: S, state: C, suffix: w } = l({
isInvalid: !!d,
isReadOnly: !!m,
isDisabled: !!p
}), T = g.value && !f && !m && !p;
return delete g.isRequired, /* @__PURE__ */ o("div", {
className: y(),
children: [
i ? /* @__PURE__ */ a("span", {
className: b(),
children: i
}) : null,
/* @__PURE__ */ o("div", {
className: x(),
children: [/* @__PURE__ */ a(c, {
"data-dd-privacy": "mask",
...g,
ref: _,
type: r,
className: S(),
"aria-busy": f,
"aria-invalid": d,
readOnly: m,
disabled: p
}), /* @__PURE__ */ o("div", {
className: C(),
children: [
f && /* @__PURE__ */ a(t, {
color: "inherit",
size: "small",
label: v.formatMessage({
id: "unity:component:common:loading:label",
defaultMessage: "Loading..."
})
}),
d && /* @__PURE__ */ a(e, {
src: "WarningCircleOutlined",
color: "content.form.invalid",
alt: v.formatMessage({
id: "unity:component:form-field:form-input:error:alt",
defaultMessage: "Error"
})
}),
T && /* @__PURE__ */ a(n, {
title: v.formatMessage({
id: "unity:component:common:clear:title",
defaultMessage: "Clear"
}),
color: "content.neutral.low",
icon: "CloseOutlined",
onPress: () => {
h?.();
}
})
]
})]
}),
u ? /* @__PURE__ */ a("span", {
className: w(),
children: u
}) : null
]
});
});
u.displayName = "Input";
//#endregion
export { u as Input };