@povio/ui 2.3.0-rc.2 → 2.3.0-rc.3

package/dist/components/inputs/Checkbox/Checkbox.js

@@ -14,7 +14,9 @@ var CheckboxBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const checkboxTypographyMap = UIStyle.useMapper("checkbox.typography", checkboxTypography);
 	const checkboxContentClassNameMap = UIStyle.useMapper("checkbox.contentClassName", checkboxContentClassName);
-	const { className, children, isDisabled, error, variant = ui.checkbox.variant, hideLabel = ui.input.hideLabel, ...rest } = props;
+	const { className, children, isDisabled, error, variant: variantProp, hideLabel: hideLabelProp, ...rest } = props;
+	const variant = variantProp ?? ui.checkbox.variant;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
 	const formFieldErrorProps = {
 		error,
 		isDisabled

package/dist/components/inputs/DateTime/DatePicker/DatePicker.js

@@ -24,7 +24,20 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DatePicker/DatePicker.tsx
 var DatePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, granularity = ui.dateInput.granularity, autoFixYear = ui.dateInput.autoFixYear, format, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDirty, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, placeholder, inputClassName, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, granularity: granularityProp, autoFixYear: autoFixYearProp, format, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const granularity = granularityProp ?? ui.dateInput.granularity;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const normalizeByGranularity = useCallback((date) => {
 		if (granularity === "year") return date.set({
 			month: 1,

package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js

@@ -30,7 +30,18 @@ import { useDateRangePickerState, useRangeCalendarState } from "react-stately";
 var DateRangePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
 	const { t } = useTranslation();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, autoFixYear = ui.dateInput.autoFixYear, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, className, hideSidebar, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, autoFixYear: autoFixYearProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
 	const [validationRangeError, setValidationRangeError] = useState();
 	const datePickerInputRef = useRef(null);
 	const dateRangePickerRef = useMemo(() => ({ get current() {

package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js

@@ -24,7 +24,20 @@ import { useCalendarState, useDatePickerState } from "react-stately";
 //#region src/components/inputs/DateTime/DateTimePicker/DateTimePicker.tsx
 var DateTimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel = ui.input.hideLabel, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, isClearable = ui.input.isClearable, todayIcon = ui.dateInput.todayIcon, todayIconButtonSize = ui.dateInput.todayIconButtonSize, todayIconPlacement = ui.dateInput.todayIconPlacement, shouldForceLeadingZeros = ui.dateInput.shouldForceLeadingZeros, disableManualEntry = ui.dateInput.disableManualEntry, shouldUpdateDateOnMonthYearChange = ui.dateInput.shouldUpdateDateOnMonthYearChange, timeZone, autoFixYear = ui.dateInput.autoFixYear, format, setDateValueOnDateSelection = ui.dateInput.setDateValueOnDateSelection, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, isTimeOptional, placeholder, inputClassName, hideLabel: hideLabelProp, variant: variantProp, as: asProp, size: sizeProp, isClearable: isClearableProp, todayIcon: todayIconProp, todayIconButtonSize: todayIconButtonSizeProp, todayIconPlacement: todayIconPlacementProp, shouldForceLeadingZeros: shouldForceLeadingZerosProp, disableManualEntry: disableManualEntryProp, shouldUpdateDateOnMonthYearChange: shouldUpdateDateOnMonthYearChangeProp, timeZone, autoFixYear: autoFixYearProp, format, setDateValueOnDateSelection: setDateValueOnDateSelectionProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const todayIcon = todayIconProp ?? ui.dateInput.todayIcon;
+	const todayIconButtonSize = todayIconButtonSizeProp ?? ui.dateInput.todayIconButtonSize;
+	const todayIconPlacement = todayIconPlacementProp ?? ui.dateInput.todayIconPlacement;
+	const shouldForceLeadingZeros = shouldForceLeadingZerosProp ?? ui.dateInput.shouldForceLeadingZeros;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
+	const shouldUpdateDateOnMonthYearChange = shouldUpdateDateOnMonthYearChangeProp ?? ui.dateInput.shouldUpdateDateOnMonthYearChange;
+	const autoFixYear = autoFixYearProp ?? ui.dateInput.autoFixYear;
+	const setDateValueOnDateSelection = setDateValueOnDateSelectionProp ?? ui.dateInput.setDateValueOnDateSelection;
 	let effectiveTimeZone = getLocalTimeZone();
 	if (timeZone) effectiveTimeZone = timeZone;
 	const formFieldProps = {

package/dist/components/inputs/DateTime/TimePicker/TimePicker.js

@@ -22,7 +22,13 @@ import { useTimeFieldState } from "react-stately";
 //#region src/components/inputs/DateTime/TimePicker/TimePicker.tsx
 var TimePickerBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry, ...rest } = props;
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, onBlur, value, disableDropdown, placeholder, className, inputClassName, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, disableManualEntry: disableManualEntryProp, ...rest } = props;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
+	const disableManualEntry = disableManualEntryProp ?? ui.dateInput.disableManualEntry;
 	const formFieldProps = {
 		error,
 		label,

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

@@ -6,13 +6,16 @@ import { PillButton } from "../../../buttons/PillButton/PillButton.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Button, ToggleButtonGroup } from "react-aria-components";
-import { Time } from "@internationalized/date";
+import { CalendarDateTime, Time } from "@internationalized/date";
 import { useDateFormatter } from "@react-aria/i18n";
 //#region src/components/inputs/DateTime/shared/CalendarHeader.tsx
 var HourCycle = {
 	12: "h12",
 	24: "h23"
 };
+var getTimeFormatterDate = (timeValue, timeZone) => {
+	return new CalendarDateTime(2e3, 1, 1, timeValue.hour, timeValue.minute).toDate(timeZone);
+};
 var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextButtonProps, includesTime, hourCycle, granularity = "day", toggleState, setToggleState }) => {
 	const formatter = useDateFormatter({
 		month: "long",
@@ -25,9 +28,7 @@ var CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextBut
 	});
 	const year = calendarState.focusedDate.year.toString();
 	const month = formatter.format(calendarState.focusedDate.toDate(calendarState.timeZone));
-	const timeValue = datePickerState?.timeValue || new Time();
-	const date = /* @__PURE__ */ new Date();
-	date.setHours(timeValue.hour, timeValue.minute);
+	const date = getTimeFormatterDate(datePickerState?.timeValue || new Time(0, 0), calendarState.timeZone);
 	return /* @__PURE__ */ jsxs("div", {
 		className: "inline-flex w-full items-center justify-between border-elevation-outline-default-1 border-b border-solid px-1",
 		children: [

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -20,7 +20,13 @@ var NumberInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	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, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, formatOptions: formatOptionsProp, variant: variantProp, as: asProp, size: sizeProp, hideLabel: hideLabelProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
+	const formatOptions = formatOptionsProp ?? ui.numberInput.formatOptions;
+	const variant = variantProp ?? ui.input.variant;
+	const as = asProp ?? ui.input.as;
+	const size = sizeProp ?? ui.input.size;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const numberFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { locale } = useLocale();

package/dist/components/inputs/Input/TextArea/TextArea.js

@@ -20,7 +20,11 @@ var TextAreaBase = (props) => {
 	const inputSizeCva = UIStyle.useCva("input.sizeCva", inputSize);
 	const inputSideCva = UIStyle.useCva("input.sideCva", inputSide);
 	const textAreaWrapperCva = UIStyle.useCva("textArea.wrapperCva", textAreaWrapper);
-	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 { ref, className, inputClassName, error, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, isClearable: isClearableProp, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const textFieldRef = useRef(null);
 	const { labelProps, inputProps } = useTextField({
 		...rest,

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -18,7 +18,12 @@ var TextInputBase = (props) => {
 	const ui = UIConfig.useConfig();
 	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, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable, autoFocusOnMount, ...rest } = props;
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as: asProp, hideLabel: hideLabelProp, variant: variantProp, size: sizeProp, isClearable: isClearableProp, autoFocusOnMount, ...rest } = props;
+	const as = asProp ?? ui.input.as;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const variant = variantProp ?? ui.input.variant;
+	const size = sizeProp ?? ui.input.size;
+	const isClearable = isClearableProp ?? ui.input.isClearable;
 	const textFieldRef = useRef(null);
 	const { isFocusVisible } = useFocusVisible();
 	const { labelProps, inputProps } = useTextField({

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -88,13 +88,13 @@ function Autocomplete({ renderStaticInput, ...props }) {
 			...props,
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
-			inputClassName: clsx("px-0!", props.className, props.inputClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
 			contentWrapperClassName: "flex flex-1 flex-wrap gap-input-gap-input-text-to-elements truncate",
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
 			onStaticInteract: renderRealInput,
-			trailingClassName: "pl-1-5",
+			trailingClassName: "pl-1-5 gap-0!",
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",
 				children: props.leadingContent

package/dist/components/inputs/Selection/Select/Select.js

@@ -89,12 +89,12 @@ function Select({ renderStaticInput, ...props }) {
 			...props,
 			isDisabled,
 			className: clsx("w-full", props.containerClassName),
-			inputClassName: clsx("px-0!", props.className, props.inputClassName),
+			inputClassName: clsx(props.className, props.inputClassName),
 			typographySize: "label-1",
 			labelPlacement: "content-row",
 			dataAttributes,
 			renderStatic: true,
-			trailingClassName: "pl-1-5",
+			trailingClassName: "pl-1-5 gap-0!",
 			onStaticInteract: renderRealInput,
 			leadingContent: props.leadingContent && /* @__PURE__ */ jsx("div", {
 				className: "ml-input-side-default flex shrink-0 items-center",

package/dist/components/inputs/Slider/Slider.js

@@ -10,7 +10,10 @@ import { Controller } from "react-hook-form";
 //#region src/components/inputs/Slider/Slider.tsx
 var SliderBase = (props) => {
 	const ui = UIConfig.useConfig();
-	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel = ui.input.hideLabel, minValue = ui.slider.minValue, maxValue = ui.slider.maxValue, ...rest } = props;
+	const { label, tooltipText, helperText, isRequired, rightContent, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, unit, hideLabel: hideLabelProp, minValue: minValueProp, maxValue: maxValueProp, ...rest } = props;
+	const hideLabel = hideLabelProp ?? ui.input.hideLabel;
+	const minValue = minValueProp ?? ui.slider.minValue;
+	const maxValue = maxValueProp ?? ui.slider.maxValue;
 	const formFieldProps = {
 		error,
 		label,

package/dist/components/inputs/Toggle/Toggle.js

@@ -14,7 +14,8 @@ var ToggleBase = (props) => {
 	const toggleCva = UIStyle.useCva("toggle.cva", toggle);
 	const toggleTypographyMap = UIStyle.useMapper("toggle.typography", toggleTypography);
 	const toggleContentClassNameMap = UIStyle.useMapper("toggle.contentClassName", toggleContentClassName);
-	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
+	const { className, children, isDisabled, error, variant: variantProp, ...rest } = props;
+	const variant = variantProp ?? ui.toggle.variant;
 	const formFieldErrorProps = {
 		error,
 		isDisabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.3.0-rc.2",
+  "version": "2.3.0-rc.3",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",