@povio/ui 0.0.9 → 0.1.0

package/dist/components/buttons/Button/Button.d.ts

@@ -1,6 +1,7 @@
 import { FC, ReactElement, SVGProps } from 'react';
-import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
+import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
+import { LinkNavigationProps } from '../../text/Link/Link';
 import { ButtonVariantProps } from './button.cva';
 export type ButtonIconProps<IconOnly extends boolean = false> = {
     iconOnly?: IconOnly;
@@ -18,7 +19,7 @@ type ToggleButtonProps = {
 export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<IconOnly> & ToggleButtonProps & {
     children: string;
     isLoading?: boolean;
-    link?: AriaLinkProps;
+    link?: LinkNavigationProps;
     noDisableWhenLoading?: boolean;
     iconClassName?: string;
     disableTooltip?: boolean;

package/dist/components/buttons/Button/Button.js

@@ -3,6 +3,7 @@ import { clsx } from "clsx";
 import { Link, ToggleButton, Button as Button$1 } from "react-aria-components";
 import { ButtonContent } from "../shared/ButtonContent.js";
 import { TooltipEllipsis } from "../../overlays/Tooltip/TooltipEllipsis.js";
+import { LinkContext } from "../../../config/link.context.js";
 import { UIStyle } from "../../../config/uiStyle.context.js";
 import { button, buttonSize, buttonContent, buttonIconSize, buttonTypography } from "./button.cva.js";
 const Button = ({
@@ -17,6 +18,7 @@ const Button = ({
   disableTooltip,
   ...props
 }) => {
+  const linkContext = LinkContext.useLinkContext();
   const uiStyle = UIStyle.useConfig();
   const buttonCva = uiStyle?.button?.cva ?? button;
   const buttonSizeCva = uiStyle?.button?.sizeCva ?? buttonSize;
@@ -25,13 +27,16 @@ const Button = ({
   const typographyMap = uiStyle?.button?.typography ?? buttonTypography;
   const Component = (() => {
     if (link) {
-      return Link;
+      return linkContext?.LinkComponent ?? Link;
     }
     if (props.toggle != null) {
       return ToggleButton;
     }
     return Button$1;
   })();
+  if (link && !link.to && link.href) {
+    link.to = link.href;
+  }
   return /* @__PURE__ */ jsx(
     TooltipEllipsis,
     {

package/dist/components/buttons/IconButton/IconButton.d.ts

@@ -1,10 +1,11 @@
 import { FC, ReactElement, SVGProps } from 'react';
-import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { ButtonVariantProps } from '../Button/button.cva';
+import { LinkNavigationProps } from '../../text/Link/Link';
 export interface IconButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
     label: string;
     icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
-    link?: AriaLinkProps;
+    link?: LinkNavigationProps;
     disableTooltip?: boolean;
 }
 export declare const IconButton: ({ label, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/InlineIconButton/InlineIconButton.d.ts

@@ -1,10 +1,11 @@
 import { FC, ReactElement, RefObject, SVGProps } from 'react';
-import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { ButtonVariantProps } from '../Button/button.cva';
+import { LinkNavigationProps } from '../../text/Link/Link';
 export interface InlineIconButtonProps extends Omit<AriaButtonProps, "children">, ButtonVariantProps {
     label: string;
     icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
-    link?: AriaLinkProps;
+    link?: LinkNavigationProps;
     ref?: RefObject<HTMLButtonElement | HTMLAnchorElement | null>;
     disableTooltip?: boolean;
 }

package/dist/components/buttons/SplitButton/SplitButton.d.ts

@@ -1,10 +1,11 @@
-import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { MenuItem } from '../../Menu/Menu';
+import { LinkNavigationProps } from '../../text/Link/Link';
 export interface SplitButtonProps extends ButtonVariantProps, Omit<AriaButtonProps, "children"> {
     label: string;
     labelRight: string;
-    link?: AriaLinkProps;
+    link?: LinkNavigationProps;
     items: MenuItem[];
 }
 export declare const SplitButton: ({ variant, color, width, size, label, labelRight, link, items, className, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/TextButton/TextButton.d.ts

@@ -1,11 +1,12 @@
-import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps } from 'react-aria-components';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { ButtonIconProps } from '../Button/Button';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
+import { LinkNavigationProps } from '../../text/Link/Link';
 export type TextButtonProps = Omit<ButtonVariantProps, "variant"> & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<true | false> & {
     children: string;
     isLoading?: boolean;
-    link?: AriaLinkProps;
+    link?: LinkNavigationProps;
     disableTooltip?: boolean;
 };
 export declare const TextButton: ({ children, ...props }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;

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 })
+              }
+            )
+          ]
+        }
+      )
     }
   );
 };