@povio/ui 0.0.9 → 0.0.10

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

@@ -12,6 +12,7 @@ import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 const PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
@@ -115,59 +116,66 @@ const DatePickerBase = (props) => {
       dialogState.setValue(state.value);
     }
   };
-  return /* @__PURE__ */ jsxs(
-    FormField,
+  return /* @__PURE__ */ jsx(
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: clsx("relative inline-flex w-full flex-col text-left", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          DatePickerInput,
-          {
-            ref: mergeRefs(ref, datePickerRef),
-            as,
-            groupProps,
-            fieldProps: { ...fieldProps, placeholderValue: PLACEHOLDER_VALUE },
-            buttonProps,
-            isDisabled,
-            isInvalid: !!error,
-            disableDropdown,
-            variant,
-            size,
-            isClearable,
-            headerProps,
-            todayIcon
-          }
-        ),
-        !disableDropdown && /* @__PURE__ */ jsx(
-          DateTimeDialog,
-          {
-            footer: /* @__PURE__ */ jsx(
-              DateTimeDialogFooter,
+      error,
+      children: /* @__PURE__ */ jsxs(
+        FormField,
+        {
+          ...formFieldProps,
+          as,
+          labelProps,
+          className: clsx("relative inline-flex w-full flex-col text-left", className),
+          children: [
+            /* @__PURE__ */ jsx(
+              DatePickerInput,
               {
-                isValid: !dialogState.isInvalid && !!dialogState.value,
-                onTodayPress,
-                onApply
+                ref: mergeRefs(ref, datePickerRef),
+                as,
+                groupProps,
+                fieldProps: { ...fieldProps, placeholderValue: PLACEHOLDER_VALUE },
+                buttonProps,
+                isDisabled,
+                isInvalid: !!error,
+                disableDropdown,
+                variant,
+                size,
+                isClearable,
+                headerProps,
+                todayIcon
               }
             ),
-            label,
-            triggerRef: datePickerRef,
-            dialogProps,
-            isOpen: state.isOpen,
-            onOpenChange,
-            children: /* @__PURE__ */ jsx(
-              Calendar,
+            !disableDropdown && /* @__PURE__ */ jsx(
+              DateTimeDialog,
               {
-                state: calendarState,
-                calendarProps,
-                onApply
+                footer: /* @__PURE__ */ jsx(
+                  DateTimeDialogFooter,
+                  {
+                    isValid: !dialogState.isInvalid && !!dialogState.value,
+                    onTodayPress,
+                    onApply
+                  }
+                ),
+                label,
+                triggerRef: datePickerRef,
+                dialogProps,
+                isOpen: state.isOpen,
+                onOpenChange,
+                children: /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    state: calendarState,
+                    calendarProps,
+                    onApply
+                  }
+                )
               }
             )
-          }
-        )
-      ]
+          ]
+        }
+      )
     }
   );
 };

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

@@ -14,6 +14,7 @@ import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { RangeCalendar } from "../shared/RangeCalendar.js";
 import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { ns } from "../../../../config/i18n.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
@@ -367,6 +368,7 @@ const DateRangePickerBase = (props) => {
     const todayDate2 = today(getLocalTimeZone());
     leftCalendarState.setFocusedDate(todayDate2);
     rightCalendarState.setFocusedDate(todayDate2.add({ months: 1 }));
+    syncCalendarStates({ start: todayDate2, end: todayDate2 });
   };
   const onOpenChange = (isOpen) => {
     state.toggle();
@@ -492,90 +494,97 @@ const DateRangePickerBase = (props) => {
       rightCalendarState.setFocusedDate(rightCalendarMonth);
     }
   };
-  return /* @__PURE__ */ jsxs(
-    FormField,
+  return /* @__PURE__ */ jsx(
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: clsx("relative inline-flex w-full flex-col text-left", className),
-      children: [
-        /* @__PURE__ */ jsx(
-          DatePickerInput,
-          {
-            ref: mergeRefs(ref, dateRangePickerRef),
-            as,
-            groupProps,
-            fieldProps: { ...startFieldProps, placeholderValue: PLACEHOLDER_VALUE },
-            endFieldProps: { ...endFieldProps, placeholderValue: PLACEHOLDER_VALUE },
-            buttonProps,
-            isDisabled,
-            isInvalid: !!error,
-            disableDropdown,
-            variant,
-            size,
-            isClearable,
-            headerProps,
-            todayIcon
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          DateTimeDialog,
-          {
-            hideSidebar,
-            sidebar: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden", children: presets.map((preset) => /* @__PURE__ */ jsx(
-              Button,
+      error,
+      children: /* @__PURE__ */ jsxs(
+        FormField,
+        {
+          ...formFieldProps,
+          as,
+          labelProps,
+          className: clsx("relative inline-flex w-full flex-col text-left", className),
+          children: [
+            /* @__PURE__ */ jsx(
+              DatePickerInput,
               {
-                onClick: () => selectPreset(preset),
-                className: clsx(
-                  "w-full px-2 py-1 text-left md:px-list-side-item md:py-list-height-item",
-                  activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover",
-                  activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  Typography,
-                  {
-                    size: "label-2",
-                    sizeMobile: "label-3",
-                    as: "span",
-                    className: "whitespace-nowrap",
-                    children: preset.label
-                  }
-                )
-              },
-              preset.label
-            )) }),
-            footer: /* @__PURE__ */ jsx(
-              DateTimeDialogFooter,
-              {
-                isValid: !dialogState.isInvalid && !!dialogState.value,
-                onTodayPress,
-                onApply
+                ref: mergeRefs(ref, dateRangePickerRef),
+                as,
+                groupProps,
+                fieldProps: { ...startFieldProps, placeholderValue: PLACEHOLDER_VALUE },
+                endFieldProps: { ...endFieldProps, placeholderValue: PLACEHOLDER_VALUE },
+                buttonProps,
+                isDisabled,
+                isInvalid: !!error,
+                disableDropdown,
+                variant,
+                size,
+                isClearable,
+                headerProps,
+                todayIcon
               }
             ),
-            label,
-            triggerRef: dateRangePickerRef,
-            dialogProps,
-            isOpen: state.isOpen,
-            onOpenChange,
-            children: /* @__PURE__ */ jsx("div", { className: "mb-4 flex max-w-[804px] md:mb-0", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ jsx(
-              RangeCalendar,
+            /* @__PURE__ */ jsx(
+              DateTimeDialog,
               {
-                leftCalendarState,
-                rightCalendarState,
-                calendarProps,
-                onApply,
-                onRangeChange: syncCalendarStates,
-                onDateSelection: handleDateSelection,
-                onDateHover: handleDateHover,
-                rangeSelection,
-                hoverDate,
-                onKeyboardNavigation: handleKeyboardNavigation
+                hideSidebar,
+                sidebar: /* @__PURE__ */ jsx("div", { className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden", children: presets.map((preset) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    onClick: () => selectPreset(preset),
+                    className: clsx(
+                      "w-full px-2 py-1 text-left md:px-list-side-item md:py-list-height-item",
+                      activePreset !== preset.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover",
+                      activePreset === preset.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        size: "label-2",
+                        sizeMobile: "label-3",
+                        as: "span",
+                        className: "whitespace-nowrap",
+                        children: preset.label
+                      }
+                    )
+                  },
+                  preset.label
+                )) }),
+                footer: /* @__PURE__ */ jsx(
+                  DateTimeDialogFooter,
+                  {
+                    isValid: !dialogState.isInvalid && !!dialogState.value,
+                    onTodayPress,
+                    onApply
+                  }
+                ),
+                label,
+                triggerRef: dateRangePickerRef,
+                dialogProps,
+                isOpen: state.isOpen,
+                onOpenChange,
+                children: /* @__PURE__ */ jsx("div", { className: "mb-4 flex max-w-[804px] md:mb-0", children: /* @__PURE__ */ jsx("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ jsx(
+                  RangeCalendar,
+                  {
+                    leftCalendarState,
+                    rightCalendarState,
+                    calendarProps,
+                    onApply,
+                    onRangeChange: syncCalendarStates,
+                    onDateSelection: handleDateSelection,
+                    onDateHover: handleDateHover,
+                    rangeSelection,
+                    hoverDate,
+                    onKeyboardNavigation: handleKeyboardNavigation
+                  }
+                ) }) })
               }
-            ) }) })
-          }
-        )
-      ]
+            )
+          ]
+        }
+      )
     }
   );
 };

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

@@ -10,6 +10,7 @@ import { DatePickerInput } from "../shared/DatePickerInput.js";
 import { DateTimeDialog } from "../shared/DateTimeDialog.js";
 import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 const PLACEHOLDER_VALUE = new CalendarDateTime(2024, 1, 1);
@@ -130,69 +131,76 @@ const DateTimePickerBase = (props) => {
       dialogState.setTimeValue(new Time(0, 0));
     }
   };
-  return /* @__PURE__ */ jsxs(
-    FormField,
+  return /* @__PURE__ */ jsx(
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: "relative inline-flex w-full flex-col text-left",
-      children: [
-        /* @__PURE__ */ jsx(
-          DatePickerInput,
-          {
-            ref: mergeRefs(ref, datePickerRef),
-            as,
-            groupProps,
-            fieldProps: {
-              ...fieldProps,
-              placeholderValue: PLACEHOLDER_VALUE,
-              onBlur: (e) => {
-                fieldProps.onBlur?.(e);
-                onInputBlur(e);
-              }
-            },
-            buttonProps,
-            isDisabled,
-            isInvalid: !!error,
-            disableDropdown,
-            variant,
-            size,
-            isDateTime: true,
-            isClearable,
-            headerProps,
-            todayIcon
-          }
-        ),
-        !disableDropdown && /* @__PURE__ */ jsx(
-          DateTimeDialog,
-          {
-            footer: /* @__PURE__ */ jsx(
-              DateTimeDialogFooter,
+      error,
+      children: /* @__PURE__ */ jsxs(
+        FormField,
+        {
+          ...formFieldProps,
+          as,
+          labelProps,
+          className: "relative inline-flex w-full flex-col text-left",
+          children: [
+            /* @__PURE__ */ jsx(
+              DatePickerInput,
               {
-                isValid: !dialogState.isInvalid && !!dialogState.value,
-                onTodayPress,
-                onApply
+                ref: mergeRefs(ref, datePickerRef),
+                as,
+                groupProps,
+                fieldProps: {
+                  ...fieldProps,
+                  placeholderValue: PLACEHOLDER_VALUE,
+                  onBlur: (e) => {
+                    fieldProps.onBlur?.(e);
+                    onInputBlur(e);
+                  }
+                },
+                buttonProps,
+                isDisabled,
+                isInvalid: !!error,
+                disableDropdown,
+                variant,
+                size,
+                isDateTime: true,
+                isClearable,
+                headerProps,
+                todayIcon
               }
             ),
-            label,
-            triggerRef: datePickerRef,
-            dialogProps,
-            isOpen: state.isOpen,
-            onOpenChange,
-            children: /* @__PURE__ */ jsx(
-              Calendar,
+            !disableDropdown && /* @__PURE__ */ jsx(
+              DateTimeDialog,
               {
-                state: calendarState,
-                calendarProps,
-                includesTime: true,
-                datePickerState: dialogState,
-                onApply
+                footer: /* @__PURE__ */ jsx(
+                  DateTimeDialogFooter,
+                  {
+                    isValid: !dialogState.isInvalid && !!dialogState.value,
+                    onTodayPress,
+                    onApply
+                  }
+                ),
+                label,
+                triggerRef: datePickerRef,
+                dialogProps,
+                isOpen: state.isOpen,
+                onOpenChange,
+                children: /* @__PURE__ */ jsx(
+                  Calendar,
+                  {
+                    state: calendarState,
+                    calendarProps,
+                    includesTime: true,
+                    datePickerState: dialogState,
+                    onApply
+                  }
+                )
               }
             )
-          }
-        )
-      ]
+          ]
+        }
+      )
     }
   );
 };

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

@@ -11,6 +11,7 @@ import { DateTimeDialogFooter } from "../shared/DateTimeDialogFooter.js";
 import { TimePickerForm } from "../shared/TimePickerForm.js";
 import { TimePickerInput } from "../shared/TimePickerInput.js";
 import { FormField } from "../../FormField/FormField.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
 const TimePickerBase = (props) => {
@@ -125,49 +126,56 @@ const TimePickerBase = (props) => {
     dialogState.setValue(state.value);
     setIsOpen(true);
   };
-  return /* @__PURE__ */ jsxs(
-    FormField,
+  return /* @__PURE__ */ jsx(
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: "relative inline-flex w-full flex-col text-left",
-      children: [
-        /* @__PURE__ */ jsx(
-          TimePickerInput,
-          {
-            ref: mergeRefs(ref, timeFieldRef),
-            as,
-            fieldProps,
-            state,
-            onPress: onOpen,
-            isDisabled,
-            isInvalid: !!error,
-            disableDropdown,
-            variant,
-            size,
-            isClearable,
-            headerProps
-          }
-        ),
-        !disableDropdown && /* @__PURE__ */ jsx(
-          DateTimeDialog,
-          {
-            footer: /* @__PURE__ */ jsx(
-              DateTimeDialogFooter,
+      error,
+      children: /* @__PURE__ */ jsxs(
+        FormField,
+        {
+          ...formFieldProps,
+          as,
+          labelProps,
+          className: "relative inline-flex w-full flex-col text-left",
+          children: [
+            /* @__PURE__ */ jsx(
+              TimePickerInput,
               {
-                onApply,
-                isValid: !dialogState.isInvalid && !!dialogState.value
+                ref: mergeRefs(ref, timeFieldRef),
+                as,
+                fieldProps,
+                state,
+                onPress: onOpen,
+                isDisabled,
+                isInvalid: !!error,
+                disableDropdown,
+                variant,
+                size,
+                isClearable,
+                headerProps
               }
             ),
-            label,
-            triggerRef: timeFieldRef,
-            isOpen,
-            onOpenChange,
-            children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
-          }
-        )
-      ]
+            !disableDropdown && /* @__PURE__ */ jsx(
+              DateTimeDialog,
+              {
+                footer: /* @__PURE__ */ jsx(
+                  DateTimeDialogFooter,
+                  {
+                    onApply,
+                    isValid: !dialogState.isInvalid && !!dialogState.value
+                  }
+                ),
+                label,
+                triggerRef: timeFieldRef,
+                isOpen,
+                onOpenChange,
+                children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };

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

@@ -92,6 +92,7 @@ const DatePickerInput = ({
       "data-hovered": isHovered || void 0,
       "data-disabled": isDisabled || void 0,
       "data-invalid": isInvalid || void 0,
+      "data-is-empty": fieldProps.value === null || void 0,
       "data-focus-within": isFocused || void 0,
       "data-focus-visible": isFocused && isFocusVisible || void 0,
       "data-has-selection": fieldProps.value !== null || void 0,

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

@@ -58,6 +58,7 @@ const TimePickerInput = ({
       "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,

package/dist/components/inputs/File/shared/FileUploadContentEmpty.js

@@ -70,7 +70,7 @@ const FileUploadContentEmpty = ({
                   children: uploadText
                 }
               ),
-              !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, { className: "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase", children: browseText }) : /* @__PURE__ */ jsx(
+              !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, { className: "text-interactive-text-primary-idle lowercase", children: browseText }) : /* @__PURE__ */ jsx(
                 Button,
                 {
                   variant: "outlined",

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

@@ -9,6 +9,7 @@ import { useNumberFieldState } from "react-stately";
 import { FormField } from "../../FormField/FormField.js";
 import { InputContent } from "../shared/InputContent.js";
 import { useInputCva } from "../../shared/input.cva.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 const NumberInputBase = (props) => {
   const ui = UIConfig.useConfig();
@@ -93,33 +94,41 @@ const NumberInputBase = (props) => {
     labelProps
   };
   return /* @__PURE__ */ jsx(
-    FormField,
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: clsx("group w-full", className),
+      error,
       children: /* @__PURE__ */ jsx(
-        InputContent,
+        FormField,
         {
-          ...inputContentProps,
-          headerProps,
+          ...formFieldProps,
           as,
-          size,
-          children: (style) => /* @__PURE__ */ jsx(
-            Input,
+          labelProps,
+          className: clsx("group w-full", className),
+          children: /* @__PURE__ */ jsx(
+            InputContent,
             {
-              ...inputProps,
-              ref,
-              placeholder: as === "floating" ? "" : inputProps.placeholder,
-              className: inputCva({
-                variant,
-                as,
-                size,
-                ...rest,
-                className: inputClassName
-              }),
-              style
+              ...inputContentProps,
+              headerProps,
+              as,
+              size,
+              children: (style) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...inputProps,
+                  ref,
+                  "data-is-empty": value === null || value === void 0 || void 0,
+                  placeholder: as === "floating" ? "" : inputProps.placeholder,
+                  className: inputCva({
+                    variant,
+                    as,
+                    size,
+                    ...rest,
+                    className: inputClassName
+                  }),
+                  style
+                }
+              )
             }
           )
         }