@povio/ui 2.2.0 → 2.2.2

package/dist/{TimePickerForm.js → components/inputs/DateTime/shared/TimePickerForm.js}

@@ -1,10 +1,10 @@
-import { ChevronDownIcon } from "./ChevronDown.js";
-import { ChevronUpIcon } from "./ChevronUp.js";
-import { Typography } from "./Typography.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { useBreakpoint } from "./useBreakpoint.js";
+import { ChevronDownIcon } from "../../../../assets/icons/ChevronDown.js";
+import { ChevronUpIcon } from "../../../../assets/icons/ChevronUp.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
 import { getPlaceholder } from "./DateSegmentItem.js";
-import { useLongPressRepeat } from "./useLongPressRepeat.js";
+import { useLongPressRepeat } from "../../../../hooks/useLongPressRepeat.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef } from "react";

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -0,0 +1,88 @@
+import { ClockIcon } from "../../../../assets/icons/Clock.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputBase, inputSize } from "../../shared/input.cva.js";
+import { TimeField } from "./TimeField.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState } from "react";
+import { Button } from "react-aria-components";
+import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
+const TimePickerInput = ({ ref, as, fieldProps, state, isDisabled, isDirty, isInvalid, disableDropdown, variant, size, isClearable, headerProps, disableManualEntry, placeholder, onPress, ...props }) => {
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const { hoverProps, isHovered } = useHover({ isDisabled });
+	const [isFocused, setIsFocused] = useState(false);
+	const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
+	const { isFocusVisible } = useFocusVisible();
+	const hidePlaceholder = as === "floating" && !state.value && !isFocused;
+	const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: inputBaseCva({
+			variant,
+			as,
+			...props,
+			className: clsx("group/date-picker-content relative min-w-input-width-min-width", "flex items-center justify-between gap-input-gap-input-text-to-elements")
+		}),
+		"data-rac": "",
+		"data-datetime-input": "",
+		"data-hovered": isHovered || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		"data-is-empty": state.value === null || void 0,
+		"data-focus-within": isFocused || void 0,
+		"data-focus-visible": isFocused && isFocusVisible || void 0,
+		"data-has-selection": state.value !== null || void 0,
+		"data-is-dirty": isDirty || void 0,
+		...fieldProps,
+		...focusWithinProps,
+		...hoverProps,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex w-full items-center gap-input-gap-input-text-to-elements pr-0!"),
+			children: [
+				disableManualEntry && /* @__PURE__ */ jsx(Button, {
+					onPress,
+					className: "absolute inset-0 z-0"
+				}),
+				as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+					as,
+					...headerProps
+				}),
+				/* @__PURE__ */ jsx("div", { children: disableManualEntry && placeholder && !state.value ? /* @__PURE__ */ jsx(Typography, {
+					size: "label-1",
+					className: "text-text-default-3",
+					children: placeholder
+				}) : /* @__PURE__ */ jsx(TimeField, {
+					fieldProps,
+					state,
+					isDisabled,
+					hidePlaceholder
+				}) })
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: clsx(inputSizeCva({
+				size,
+				as
+			}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
+			children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
+				onClear: () => state.setValue(null),
+				show: canClear
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
+				label: "",
+				color: "secondary",
+				onPress,
+				icon: ClockIcon,
+				isDisabled,
+				className: "border-0!"
+			})]
+		})]
+	});
+};
+export { TimePickerInput };

package/dist/{YearPicker.js → components/inputs/DateTime/shared/YearPicker.js}

@@ -1,5 +1,5 @@
-import { Typography } from "./Typography.js";
-import { useScrollableListBox } from "./useScrollableListBox.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useMemo } from "react";

package/dist/{FileUpload.js → components/inputs/File/FileUpload.js}

@@ -1,11 +1,11 @@
-import { UIConfig } from "./uiConfig.context.js";
-import { ns } from "./i18n.js";
-import { FormField } from "./FormField.js";
-import { FileUtils } from "./file.utils.js";
-import { FileCardList } from "./FileCardList.js";
-import { FileUploadContentEmpty } from "./FileUploadContentEmpty.js";
-import { FileUploadContent } from "./FileUploadContent.js";
-import { fileUploadDropZone } from "./fileUpload.cva.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { ns } from "../../../config/i18n.js";
+import { FormField } from "../FormField/FormField.js";
+import { FileUtils } from "../../../utils/file.utils.js";
+import { FileCardList } from "./shared/FileCardList.js";
+import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty.js";
+import { FileUploadContent } from "./shared/FileUploadContent.js";
+import { fileUploadDropZone } from "./shared/fileUpload.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useState } from "react";
@@ -15,7 +15,7 @@ import { Controller } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 var FileUploadBase = (props) => {
 	const { t } = useTranslation("ui");
-	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType,...rest } = props;
+	const { ref: _ref, label, tooltipText, variant = "vertical", as = "button", helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, allowsMultiple = false, hideLabel, acceptedFileTypes, clearOnSuccess, emptyText = t(($) => $.ui.fileUpload.emptyText), uploadText = t(($) => $.ui.fileUpload.uploadText), browseText = t(($) => $.ui.fileUpload.browse), fileUpload, fileRemove, children, listRenderer, onInvalidFileType, ...rest } = props;
 	const ui = UIConfig.useConfig();
 	const [uploadState, setUploadState] = useState(props.value ?? []);
 	const formFieldProps = {
@@ -170,7 +170,7 @@ var FileUploadBase = (props) => {
 };
 const FileUpload = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{InputUpload.js → components/inputs/File/InputUpload.js}

@@ -1,14 +1,14 @@
-import { UIConfig } from "./uiConfig.context.js";
-import { FormField } from "./FormField.js";
-import { FileUtils } from "./file.utils.js";
-import { InputUploadContent } from "./InputUploadContent.js";
-import { InputUploadFilled } from "./InputUploadFilled.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { FormField } from "../FormField/FormField.js";
+import { FileUtils } from "../../../utils/file.utils.js";
+import { InputUploadContent } from "./shared/InputUploadContent.js";
+import { InputUploadFilled } from "./shared/InputUploadFilled.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useState } from "react";
 import { mergeRefs, useLabels } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
-var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes,...rest }) => {
+var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes, ...rest }) => {
 	const ui = UIConfig.useConfig();
 	const [internalFiles, setInternalFiles] = useState(() => {
 		if (value !== void 0) {
@@ -92,7 +92,7 @@ var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isR
 };
 const InputUpload = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{FileUploadContent.js → components/inputs/File/shared/FileUploadContent.js}

@@ -4,7 +4,7 @@ import { FileUploadContentLoading } from "./FileUploadContentLoading.js";
 import { FileUploadContentEmpty } from "./FileUploadContentEmpty.js";
 import { jsx } from "react/jsx-runtime";
 import { FileTrigger } from "react-aria-components";
-const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, emptyText, uploadState, handleCancelUpload, handleRemove, acceptedFileTypes, allowsMultiple, handleSelect,...rest }) => {
+const FileUploadContent = ({ variant, as, isDisabled, browseText, uploadText, emptyText, uploadState, handleCancelUpload, handleRemove, acceptedFileTypes, allowsMultiple, handleSelect, ...rest }) => {
 	const currentState = uploadState.at(0);
 	const fileTriggerProps = {
 		...rest,

package/dist/{FileUploadContentEmpty.js → components/inputs/File/shared/FileUploadContentEmpty.js}

@@ -1,7 +1,7 @@
-import { Typography } from "./Typography.js";
-import { Button } from "./Button.js";
-import { TextButton } from "./TextButton.js";
-import { UploadIcon } from "./Upload.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { UploadIcon } from "../../../../assets/icons/Upload.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 const FileUploadContentEmpty = ({ variant, as, isDisabled, title, browseText, uploadText, singleFile, hideButton = false, className }) => {

package/dist/{FileUploadContentError.js → components/inputs/File/shared/FileUploadContentError.js}

@@ -1,10 +1,10 @@
-import { CloseIcon } from "./Close.js";
-import { Typography } from "./Typography.js";
-import { Button as Button$1 } from "./Button.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { TextButton } from "./TextButton.js";
-import { ns } from "./i18n.js";
-import { WarningFilledIcon } from "./WarningFilled.js";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { Button as Button$1 } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { ns } from "../../../../config/i18n.js";
+import { WarningFilledIcon } from "../../../../assets/icons/WarningFilled.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { FileTrigger } from "react-aria-components";

package/dist/{FileUploadContentFilled.js → components/inputs/File/shared/FileUploadContentFilled.js}

@@ -1,11 +1,11 @@
-import { CloseIcon } from "./Close.js";
-import { Typography } from "./Typography.js";
-import { Button as Button$1 } from "./Button.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { TextButton } from "./TextButton.js";
-import { ns } from "./i18n.js";
-import { FileUtils } from "./file.utils.js";
-import { CheckCircleIcon } from "./CheckCircle.js";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { Button as Button$1 } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { ns } from "../../../../config/i18n.js";
+import { FileUtils } from "../../../../utils/file.utils.js";
+import { CheckCircleIcon } from "../../../../assets/icons/CheckCircle.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { FileTrigger } from "react-aria-components";

package/dist/{FileUploadContentLoading.js → components/inputs/File/shared/FileUploadContentLoading.js}

@@ -1,10 +1,10 @@
-import { CloseIcon } from "./Close.js";
-import { Typography } from "./Typography.js";
-import { Button } from "./Button.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
-import { FileUtils } from "./file.utils.js";
-import { FileIcon } from "./File.js";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
+import { FileUtils } from "../../../../utils/file.utils.js";
+import { FileIcon } from "../../../../assets/icons/File.js";
 import { ProgressBar } from "./ProgressBar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{InputUploadContent.js → components/inputs/File/shared/InputUploadContent.js}

@@ -1,19 +1,19 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { Button as Button$1 } from "./Button.js";
-import { TextButton } from "./TextButton.js";
-import { inputSize } from "./input.cva.js";
-import { ns } from "./i18n.js";
-import { UploadIcon } from "./Upload.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { Button as Button$1 } from "../../../buttons/Button/Button.js";
+import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { ns } from "../../../../config/i18n.js";
+import { inputSize } from "../../shared/input.cva.js";
+import { UploadIcon } from "../../../../assets/icons/Upload.js";
 import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { DropZone, FileTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 const InputUploadContent = (props) => {
-	const { variant, isDisabled, error, placeholder, buttonText,...rest } = props;
+	const { variant, isDisabled, error, placeholder, buttonText, ...rest } = props;
 	const { t } = useTranslation("ui");
-	const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	return /* @__PURE__ */ jsx(FileTrigger, {
 		...rest,
 		children: /* @__PURE__ */ jsxs("div", {

package/dist/{InputUploadFilled.js → components/inputs/File/shared/InputUploadFilled.js}

@@ -1,13 +1,13 @@
-import { CloseIcon } from "./Close.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { Typography } from "./Typography.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { inputSize } from "./input.cva.js";
+import { CloseIcon } from "../../../../assets/icons/Close.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { inputSize } from "../../shared/input.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 const InputUploadFilled = ({ files, onRemove, isDisabled }) => {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", (UIStyle.useConfig()?.input?.sizeCva ?? inputSize)({ size: "default" })),
+		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", UIStyle.useCva("input.sizeCva", inputSize)({ size: "default" })),
 		children: [/* @__PURE__ */ jsx(Typography, {
 			variant: "default",
 			size: "label-1",

package/dist/{ProgressBar.js → components/inputs/File/shared/ProgressBar.js}

@@ -1,4 +1,4 @@
-import { Typography } from "./Typography.js";
+import { Typography } from "../../../text/Typography/Typography.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx$1 from "clsx";
 const ProgressBar = ({ progress = 0, valueLabel = "trailing" }) => {

package/dist/{fileUpload.cva.js → components/inputs/File/shared/fileUpload.cva.js}

@@ -36,7 +36,7 @@ const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-defa
 	defaultVariants: { variant: "vertical" }
 });
 const fileUploadDropZone = (props) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	return clsx(fileUploadDropZoneBase(rest), className);
 };
 cva(["flex gap-3"], {

package/dist/{inputUploadButton.cva.js → components/inputs/File/shared/inputUploadButton.cva.js}

@@ -8,7 +8,7 @@ const inputUploadButtonBase = cva(["flex w-full items-center justify-between gap
 	defaultVariants: { variant: "default" }
 });
 const inputUploadButton = (props) => {
-	const { className,...rest } = props;
+	const { className, ...rest } = props;
 	return clsx(inputUploadButtonBase(rest), className);
 };
 const inputUploadDropZone = cva([

package/dist/{FormField.js → components/inputs/FormField/FormField.js}

@@ -16,7 +16,7 @@ const FormField = ({ ref, as, label, tooltipText, helperText, isRequired, rightC
 	const errorProps = {
 		error,
 		isDisabled,
-		isHidden: isHeaderHidden,
+		isHidden: ["filter", "inline"].includes(as ?? ""),
 		className: errorClassName
 	};
 	return /* @__PURE__ */ jsxs("div", {

package/dist/components/inputs/FormField/FormFieldError.js

@@ -0,0 +1,11 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const FormFieldError = ({ error, isDisabled, isHidden, className }) => {
+	return /* @__PURE__ */ jsx("p", {
+		className: clsx(UIStyle.useCva("typography.cva", typography)({ size: "label-3" }), "text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className),
+		children: error
+	});
+};
+export { FormFieldError };

package/dist/{FormFieldHeader.js → components/inputs/FormField/FormFieldHeader.js}

@@ -1,6 +1,6 @@
-import { InfoIcon } from "./Info.js";
-import { Typography } from "./Typography.js";
-import { Tooltip as Tooltip$1 } from "./Tooltip.js";
+import { InfoIcon } from "../../../assets/icons/Info.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { Tooltip as Tooltip$1 } from "../../overlays/Tooltip/Tooltip.js";
 import { FormFieldLabel } from "./FormFieldLabel.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";

package/dist/{FormFieldHeaderClose.js → components/inputs/FormField/FormFieldHeaderClose.js}

@@ -1,5 +1,5 @@
-import { CloseIcon } from "./Close.js";
-import { ns } from "./i18n.js";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { ns } from "../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { Button } from "react-aria-components";
 import { useTranslation } from "react-i18next";

package/dist/components/inputs/FormField/FormFieldLabel.d.ts

@@ -8,5 +8,6 @@ export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
     labelProps?: DOMAttributes<HTMLLabelElement>;
+    className?: string;
 }
-export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, size }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, className, }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/FormField/FormFieldLabel.js

@@ -0,0 +1,25 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { labelBase, labelTypography } from "../shared/label.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Label } from "react-aria-components";
+const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps, className }) => {
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	const labelTypographyMap = UIStyle.useMapper("label.typography", labelTypography);
+	const labelBaseCva = UIStyle.useCva("label.cva", labelBase);
+	return /* @__PURE__ */ jsxs(Label, {
+		...labelProps,
+		ref,
+		className: clsx(typographyCva({
+			size: "label-2",
+			variant: "prominent-1",
+			...labelTypographyMap({ as })
+		}), labelBaseCva({ as }), className, labelProps?.className),
+		children: [label, isRequired && /* @__PURE__ */ jsx("span", {
+			className: clsx(!isDisabled && "text-text-error-1"),
+			children: "*"
+		})]
+	});
+};
+export { FormFieldLabel };

package/dist/{NumberInput.js → components/inputs/Input/NumberInput/NumberInput.js}

@@ -1,8 +1,9 @@
-import { UIConfig } from "./uiConfig.context.js";
-import { useInputCva } from "./input.cva.js";
-import { FormField } from "./FormField.js";
-import { TooltipWrapper } from "./TooltipWrapper.js";
-import { InputContent } from "./InputContent.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { inputBase } from "../../shared/input.cva.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+import { InputContent } from "../shared/InputContent.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useCallback, useRef } from "react";
@@ -13,8 +14,9 @@ import { Controller } from "react-hook-form";
 import { useNumberFieldState } from "react-stately";
 var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const inputCva = useInputCva();
-	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable,...rest } = props;
+	const inputBaseCva = UIStyle.useCva("input.baseCva", inputBase);
+	const inputRef = useRef(null);
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions = ui.numberInput.formatOptions, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, ...rest } = props;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();
@@ -80,30 +82,31 @@ var NumberInputBase = (props) => {
 			labelProps,
 			className: clsx("group w-full", className),
 			tabIndex: as === "inline" ? -1 : void 0,
-			children: /* @__PURE__ */ jsx(InputContent, {
-				...inputContentProps,
-				headerProps,
-				as,
-				size,
-				children: (style) => /* @__PURE__ */ jsx(Input, {
-					...inputProps,
-					ref,
-					"data-is-dirty": isDirty || void 0,
-					"data-is-required": isRequired || void 0,
-					"data-is-empty": value === null || value === void 0 || void 0,
-					placeholder: as === "floating" ? "" : inputProps.placeholder,
-					className: inputCva({
-						variant,
-						as,
-						size,
-						...rest,
-						className: inputClassName
-					}),
-					style,
-					onFocus: (e) => {
-						inputProps.onFocus?.(e);
-						if (isFocusVisible) e.target.select();
-					}
+			children: /* @__PURE__ */ jsx("div", {
+				className: clsx("relative flex cursor-text has-disabled:cursor-default", inputBaseCva({
+					variant,
+					as,
+					...rest
+				}), inputClassName),
+				onClick: () => inputRef.current?.focus(),
+				children: /* @__PURE__ */ jsx(InputContent, {
+					...inputContentProps,
+					headerProps,
+					as,
+					size,
+					children: /* @__PURE__ */ jsx(Input, {
+						...inputProps,
+						ref: mergeRefs(ref, inputRef),
+						"data-is-dirty": isDirty || void 0,
+						"data-is-required": isRequired || void 0,
+						"data-is-empty": value === null || value === void 0 || void 0,
+						placeholder: as === "floating" ? "" : inputProps.placeholder,
+						className: "w-full outline-none",
+						onFocus: (e) => {
+							inputProps.onFocus?.(e);
+							if (isFocusVisible) e.target.select();
+						}
+					})
 				})
 			})
 		})
@@ -111,7 +114,7 @@ var NumberInputBase = (props) => {
 };
 const NumberInput = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{PasswordInput.js → components/inputs/Input/PasswordInput/PasswordInput.js}

@@ -1,7 +1,7 @@
-import { VisibilityIcon } from "./Visibility.js";
-import { VisibilityOffIcon } from "./VisibilityOff.js";
-import { ns } from "./i18n.js";
-import { TextInput } from "./TextInput.js";
+import { VisibilityIcon } from "../../../../assets/icons/Visibility.js";
+import { VisibilityOffIcon } from "../../../../assets/icons/VisibilityOff.js";
+import { ns } from "../../../../config/i18n.js";
+import { TextInput } from "../TextInput/TextInput.js";
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

package/dist/{TextArea.js → components/inputs/Input/TextArea/TextArea.js}

@@ -1,10 +1,10 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { UIConfig } from "./uiConfig.context.js";
-import { inputSize, useInputCva } from "./input.cva.js";
-import { FormFieldLabel } from "./FormFieldLabel.js";
-import { InputClear } from "./InputClear.js";
-import { FormField } from "./FormField.js";
-import { TooltipWrapper } from "./TooltipWrapper.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
+import { InputClear } from "../../shared/InputClear.js";
+import { inputSide, inputSize, useInputCva } from "../../shared/input.cva.js";
+import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef } from "react";
@@ -15,8 +15,9 @@ import { Controller } from "react-hook-form";
 var TextAreaBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const inputCva = useInputCva();
-	const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
-	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable,...rest } = props;
+	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
+	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
+	const { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, isClearable = ui.input.isClearable, ...rest } = props;
 	const textFieldRef = useRef(null);
 	const { labelProps, inputProps } = useTextField({
 		...rest,
@@ -69,7 +70,11 @@ var TextAreaBase = (props) => {
 				children: [
 					as === "floating" && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
 						as,
-						...headerProps
+						...headerProps,
+						className: clsx(headerProps.className, inputSideCva({
+							size: "default",
+							type: "left"
+						}))
 					}),
 					/* @__PURE__ */ jsx(TextArea, {
 						...inputProps,
@@ -87,10 +92,13 @@ var TextAreaBase = (props) => {
 					}),
 					showClear && /* @__PURE__ */ jsx("span", {
 						className: clsx("absolute top-0 right-0", inputSizeCva({ size: "default" })),
-						children: /* @__PURE__ */ jsx(InputClear, { onClear: () => {
-							onChange?.("");
-							onBlur?.(null);
-						} })
+						children: /* @__PURE__ */ jsx(InputClear, {
+							onClear: () => {
+								onChange?.("");
+								onBlur?.(null);
+							},
+							show: true
+						})
 					})
 				]
 			})
@@ -99,7 +107,7 @@ var TextAreaBase = (props) => {
 };
 const TextArea$1 = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,