@povio/ui 2.1.17 → 2.1.19

package/dist/BottomSheet.js

@@ -51,9 +51,9 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			const rect = dialogRef.current?.getBoundingClientRect();
 			if (!rect || oldHeightRef.current === rect.height) return;
 			oldHeightRef.current = rect.height;
-			if (rect.bottom < viewport.height) {
+			if (y.get() < 0) {
 				y.stop();
-				(0, react_exports.animate)(y, -(rect.height - viewport.height + sheetMarginTop));
+				(0, react_exports.animate)(y, 0);
 			}
 		}
 	});
@@ -98,8 +98,14 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 				minHeight: "100%"
 			},
 			drag: "y",
-			dragElastic: 1,
-			dragConstraints: overlayRef,
+			dragElastic: {
+				top: 0,
+				bottom: .5
+			},
+			dragConstraints: {
+				top: 0,
+				bottom: 0
+			},
 			onUpdate: (latest) => {
 				if (!latest || !footerRef.current) return;
 				footerRef.current?.style.setProperty("--scroll-position", `${(latest.y || 0).toFixed(0)}px`);
@@ -107,7 +113,7 @@ var BottomSheetBase = ({ isOpen, onOpenChange, onStateChange, isDismissable = fa
 			onDragStart: () => {
 				if (document.activeElement && DomUtils.isKeyboardInput(document.activeElement)) focusTrapRef.current?.focus();
 				y.animation?.stop();
-				closeVelocityRef.current = isScrollable ? y.get() >= -10 : true;
+				closeVelocityRef.current = true;
 				containerRef.current?.style.setProperty("pointer-events", "none");
 			},
 			onDragEnd: (e, { velocity }) => {

package/dist/CalendarHeader.js

@@ -1,7 +1,10 @@
+import { ArrowDropDownIcon } from "./ArrowDropDown.js";
+import { ArrowDropUpIcon } from "./ArrowDropUp.js";
 import { ChevronLeftIcon } from "./ChevronLeft.js";
 import { ChevronRightIcon } from "./ChevronRight.js";
 import { PillButton } from "./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 { useDateFormatter } from "@react-aria/i18n";
@@ -29,9 +32,10 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 		children: [
 			/* @__PURE__ */ jsx("div", {
 				className: "inline-flex h-12 items-center p-3",
-				children: !toggleState && /* @__PURE__ */ jsx(Button, {
+				children: /* @__PURE__ */ jsx(Button, {
 					...prevButtonProps,
-					className: "shrink-0 focus-visible:outline-interactive-contained-secondary-focus",
+					isDisabled: !!toggleState,
+					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
 					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6 text-interactive-text-secondary-idle" })
 				})
 			}),
@@ -40,6 +44,9 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 				children: [
 					/* @__PURE__ */ jsx(PillButton, {
 						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: toggleState === "month" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "month",
 						onChange: (isSelected) => setToggleState(isSelected ? "month" : null),
@@ -47,6 +54,9 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 					}),
 					/* @__PURE__ */ jsx(PillButton, {
 						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: toggleState === "year" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "year",
 						onChange: (isSelected) => setToggleState(isSelected ? "year" : null),
@@ -54,6 +64,9 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 					}),
 					includesTime && /* @__PURE__ */ jsx(PillButton, {
 						color: "secondary",
+						variant: "subtle",
+						iconPosition: "right",
+						icon: toggleState === "time" ? ArrowDropUpIcon : ArrowDropDownIcon,
 						toggle: true,
 						isSelected: toggleState === "time",
 						onChange: (isSelected) => setToggleState(isSelected ? "time" : null),
@@ -63,9 +76,10 @@ const CalendarHeader = ({ calendarState, datePickerState, prevButtonProps, nextB
 			}),
 			/* @__PURE__ */ jsx("div", {
 				className: "inline-flex h-12 items-center p-3",
-				children: !toggleState && /* @__PURE__ */ jsx(Button, {
+				children: /* @__PURE__ */ jsx(Button, {
 					...nextButtonProps,
-					className: "shrink-0 focus-visible:outline-interactive-contained-secondary-focus",
+					isDisabled: !!toggleState,
+					className: clsx("shrink-0 focus-visible:outline-interactive-contained-secondary-focus", !!toggleState && "opacity-0"),
 					children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6 text-interactive-text-secondary-idle" })
 				})
 			})

package/dist/CalendarSelectHeader.js

@@ -5,11 +5,14 @@ import { ChevronsLeftIcon } from "./ChevronsLeft.js";
 import { ChevronsRightIcon } from "./ChevronsRight.js";
 import { InlineIconButton } from "./InlineIconButton.js";
 import { PillButton } from "./PillButton.js";
+import { ns } from "./i18n.js";
 import { Select } from "./Select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { useDateFormatter } from "@react-aria/i18n";
+import { useTranslation } from "react-i18next";
 const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled, isNextMonthDisabled, isNextYearDisabled, offset = { months: 0 }, onNavigate, maxDate, minDate }) => {
+	const { t } = useTranslation("ui");
 	const displayDate = state.visibleRange.start.add(offset);
 	const currentMonth = displayDate.month - 1;
 	const currentYear = displayDate.year;
@@ -102,13 +105,13 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
 					isDisabled: isPrevYearDisabled,
 					onClick: handlePrevYear,
 					icon: ChevronsLeftIcon,
-					label: "Previous year"
+					label: t(($) => $.ui.datePicker.navigation.previousYear)
 				}), /* @__PURE__ */ jsx(InlineIconButton, {
 					color: "secondary",
 					isDisabled: isPrevMonthDisabled,
 					onClick: handlePrevMonth,
 					icon: ChevronLeftIcon,
-					label: "Previous month"
+					label: t(($) => $.ui.datePicker.navigation.previousMonth)
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
@@ -118,6 +121,7 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
 					hideLabel: true,
 					customTrigger: /* @__PURE__ */ jsx(PillButton, {
 						color: "secondary",
+						variant: "subtle",
 						iconPosition: "right",
 						icon: ArrowDropDownIcon,
 						children: MONTHS[currentMonth].slice(0, 3)
@@ -135,6 +139,7 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
 					hideLabel: true,
 					customTrigger: /* @__PURE__ */ jsx(PillButton, {
 						color: "secondary",
+						variant: "subtle",
 						iconPosition: "right",
 						icon: ArrowDropDownIcon,
 						children: currentYear.toString()
@@ -155,13 +160,13 @@ const CalendarSelectHeader = ({ state, isPrevMonthDisabled, isPrevYearDisabled,
 					isDisabled: isNextMonthDisabled,
 					onClick: handleNextMonth,
 					icon: ChevronRightIcon,
-					label: "Next month"
+					label: t(($) => $.ui.datePicker.navigation.nextMonth)
 				}), /* @__PURE__ */ jsx(InlineIconButton, {
 					color: "secondary",
 					isDisabled: isNextYearDisabled,
 					onClick: handleNextYear,
 					icon: ChevronsRightIcon,
-					label: "Next year"
+					label: t(($) => $.ui.datePicker.navigation.nextYear)
 				})]
 			})
 		]

package/dist/ChevronLeft.js

@@ -8,7 +8,7 @@ const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M15.707 5.293a1 1 0 0 1 0 1.414L10.414 12l5.293 5.293a1 1 0 0 1-1.414 1.414l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 0",
+		d: "M14.744 6.251a.845.845 0 0 1 0 1.212L10.112 12l4.632 4.537a.845.845 0 0 1 0 1.212.89.89 0 0 1-1.238 0l-5.25-5.143a.845.845 0 0 1 0-1.212l5.25-5.143a.89.89 0 0 1 1.238 0",
 		clipRule: "evenodd"
 	})
 });

package/dist/ChevronRight.js

@@ -8,7 +8,7 @@ const ChevronRightIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	children: /* @__PURE__ */ jsx("path", {
 		fill: "currentColor",
 		fillRule: "evenodd",
-		d: "M8.293 5.293a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414l-6 6a1 1 0 0 1-1.414-1.414L13.586 12 8.293 6.707a1 1 0 0 1 0-1.414",
+		d: "M9.256 6.251a.89.89 0 0 1 1.238 0l5.25 5.143a.845.845 0 0 1 0 1.212l-5.25 5.143a.89.89 0 0 1-1.238 0 .845.845 0 0 1 0-1.212L13.888 12 9.256 7.463a.845.845 0 0 1 0-1.212",
 		clipRule: "evenodd"
 	})
 });

package/dist/InputUploadContent.js

@@ -11,7 +11,7 @@ import { clsx } from "clsx";
 import { DropZone, FileTrigger } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 const InputUploadContent = (props) => {
-	const { variant, isDisabled, error,...rest } = props;
+	const { variant, isDisabled, error, placeholder, buttonText,...rest } = props;
 	const { t } = useTranslation("ui");
 	const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
 	return /* @__PURE__ */ jsx(FileTrigger, {
@@ -33,18 +33,18 @@ const InputUploadContent = (props) => {
 					size: "label-1",
 					as: "span",
 					className: "min-w-0 flex-fill select-none truncate text-text-default-3",
-					children: t(($) => $.ui.fileUpload.emptyText)
+					children: placeholder ?? t(($) => $.ui.fileUpload.emptyText)
 				}), variant === "nested" && /* @__PURE__ */ jsx(TextButton, {
 					isDisabled,
 					icon: UploadIcon,
-					children: t(($) => $.ui.fileUpload.upload)
+					children: buttonText ?? t(($) => $.ui.fileUpload.upload)
 				})]
 			}), variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
 				size: "s",
 				width: "hug",
 				isDisabled,
 				className: "truncate",
-				children: t(($) => $.ui.fileUpload.uploadFile)
+				children: buttonText ?? t(($) => $.ui.fileUpload.uploadFile)
 			})]
 		})
 	});

package/dist/SelectInput.js

@@ -73,7 +73,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 			className: clsx("group/select-content relative flex px-0!", isSearchable && "cursor-text", className)
 		}),
 		"data-rac": "",
-		"data-disabled": isDisabled,
+		"data-disabled": isDisabled || void 0,
 		"data-hovered": isHovered || void 0,
 		"data-focused": isOpen || isFocused || void 0,
 		"data-focus-within": isFocused || void 0,
@@ -110,7 +110,7 @@ const SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvali
 						}), isSearchable && /* @__PURE__ */ jsx(Input, {
 							placeholder,
 							onBlur,
-							className: clsx("flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", !showTags && inputSizeCva({
+							className: clsx("w-full flex-1 bg-transparent outline-none placeholder:text-text-default-3 disabled:text-interactive-text-secondary-disabled", !showTags && inputSizeCva({
 								size,
 								...props,
 								className: "rounded-input-rounding-default"

package/dist/components/inputs/File/inputUpload.types.d.ts

@@ -28,5 +28,7 @@ export type InputUploadBaseProps = {
     ref?: Ref<HTMLElement>;
     label?: string;
     className?: string;
+    placeholder?: string;
+    buttonText?: string;
 } & FormFieldProps & InputUploadButtonProps & Omit<FileTriggerProps, "children" | "onSelect" | "allowsMultiple"> & Omit<DropZoneProps, "children" | "onDrop"> & GroupedFileUploadProps;
 export type InputUploadProps<TFieldValues extends FieldValues = FieldValues> = InputUploadBaseProps & GroupedFileUploadControlProps<TFieldValues>;

package/dist/config/i18n.d.ts

@@ -32,6 +32,12 @@ export declare const resources: {
                         thisAndLastYear: string;
                         soFar: string;
                     };
+                    navigation: {
+                        previousMonth: string;
+                        nextMonth: string;
+                        previousYear: string;
+                        nextYear: string;
+                    };
                     errors: {
                         endDateBeforeStart: string;
                     };
@@ -191,6 +197,12 @@ export declare const resources: {
                         thisAndLastYear: string;
                         soFar: string;
                     };
+                    navigation: {
+                        previousMonth: string;
+                        nextMonth: string;
+                        previousYear: string;
+                        nextYear: string;
+                    };
                     errors: {
                         endDateBeforeStart: string;
                     };

package/dist/translation.js

@@ -27,6 +27,12 @@ var translation_default = {
 				"thisAndLastYear": "This & Last year",
 				"soFar": "So far"
 			},
+			"navigation": {
+				"previousMonth": "Previous month",
+				"nextMonth": "Next month",
+				"previousYear": "Previous year",
+				"nextYear": "Next year"
+			},
 			"errors": { "endDateBeforeStart": "End date cannot be before start date" }
 		},
 		"modal": { "closeBtn": "Close" },

package/dist/translation2.js

@@ -27,6 +27,12 @@ var translation_default = {
 				"thisAndLastYear": "Ta in prejšnje leto",
 				"soFar": "Od začetka"
 			},
+			"navigation": {
+				"previousMonth": "Prejšnji mesec",
+				"nextMonth": "Naslednji mesec",
+				"previousYear": "Prejšnje leto",
+				"nextYear": "Naslednje leto"
+			},
 			"errors": { "endDateBeforeStart": "Datum konca ne more biti pred datumom začetka" }
 		},
 		"modal": { "closeBtn": "Zapri" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",