@payfit/unity-components/dist/esm/components/date-picker/parts/DateInput.js

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 { useContext 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 { DateInput as c, DatePickerStateContext as l, DateSegment as u } from "react-aria-components/DatePicker";
//#region src/components/date-picker/parts/DateInput.tsx
var d = i({
	base: [
		"uy:group uy:box-content uy:rounded-25 uy:px-25 uy:text-end uy:tabular-nums! uy:outline-none uy:typography-body uy:focus:bg-surface-form-active uy:focus:rounded-25",
		"uy:data-[disabled]:text-content-form-disabled",
		"uy:theme-legacy:focus:text-content-inverted",
		"uy:theme-rebrand:focus:text-content-form-active"
	],
	variants: {
		isPlaceholder: {
			true: ["uy:theme-legacy:text-content-neutral-lowest", "uy:theme-rebrand:text-content-neutral-lowest-enabled"],
			false: "uy:text-content-form-enabled"
		},
		isLiteral: {
			true: "uy:text-content-neutral-lowest-enabled",
			false: ""
		}
	}
}), f = i({
	slots: {
		base: "uy:flex uy:gap-50 uy:flex-grow uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75",
		input: "uy:flex uy:gap-25 uy:w-fit uy:grow",
		state: "uy:flex uy:gap-50 uy:items-center"
	},
	variants: {
		isInvalid: { true: {
			base: "uy:bg-surface-form-error",
			state: "uy:text-content-form-error"
		} },
		isReadOnly: { true: { base: "uy:border-border-form-disabled uy:bg-surface-form-disabled" } },
		isDisabled: { true: { base: "uy:bg-surface-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",
			state: "uy:text-content-neutral-disabled"
		}
	}]
});
function p({ isLoading: i, isInvalid: p, isReadOnly: m, isDisabled: h, onClearButtonPress: g }) {
	let _ = s(), v = r(l), { dateValue: y } = v, { base: b, input: x, state: S } = f({
		isInvalid: !!p,
		isReadOnly: !!m,
		isDisabled: !!h
	}), C = y && !i && !m && !h;
	return /* @__PURE__ */ o("div", {
		className: b(),
		children: [/* @__PURE__ */ a(c, {
			className: x(),
			children: (e) => /* @__PURE__ */ a(u, {
				segment: e,
				className: d({
					isPlaceholder: e.isPlaceholder,
					isLiteral: e.type === "literal"
				})
			})
		}), /* @__PURE__ */ o("div", {
			className: S(),
			children: [
				i && /* @__PURE__ */ a(t, {
					color: "inherit",
					size: "small",
					label: _.formatMessage({
						id: "unity:component:common:loading:label",
						defaultMessage: "Loading..."
					})
				}),
				p && /* @__PURE__ */ a(e, {
					src: "WarningCircleOutlined",
					color: "content.form.invalid",
					alt: _.formatMessage({
						id: "unity:component:form-field:form-input:error:alt",
						defaultMessage: "Error"
					})
				}),
				C && /* @__PURE__ */ a(n, {
					slot: null,
					title: _.formatMessage({
						id: "unity:component:common:clear:title",
						defaultMessage: "Clear"
					}),
					icon: "CloseOutlined",
					onPress: () => {
						v?.setValue(null), g?.();
					}
				})
			]
		})]
	});
}
p.displayName = "DateInput";
//#endregion
export { p as DateInput, f as dateInput, d as dateSegment };