@povio/ui 2.1.4 → 2.1.6

package/dist/assets/icons/CheckboxCheckmark.js

@@ -10,7 +10,7 @@ const CheckboxCheckmarkIcon = (props) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx(
       "path",
       {
-        stroke: "#F8F8FA",
+        stroke: "currentColor",
         strokeLinecap: "round",
         strokeLinejoin: "round",
         strokeWidth: 2,

package/dist/assets/icons/CheckboxIndeterminate.js

@@ -10,7 +10,7 @@ const CheckboxIndeterminateIcon = (props) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx(
       "path",
       {
-        stroke: "#F8F8FA",
+        stroke: "currentColor",
         strokeLinecap: "round",
         strokeLinejoin: "round",
         strokeWidth: 2,

package/dist/assets/icons/Drag.js

@@ -10,7 +10,7 @@ const DragIcon = (props) => /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx(
       "path",
       {
-        fill: "#6D7688",
+        fill: "currentColor",
         d: "M9 19.615q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 9 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 19.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 18q0-.666.474-1.14A1.56 1.56 0 0 1 15 16.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 9 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 13.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 12q0-.666.474-1.14A1.56 1.56 0 0 1 15 10.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14a1.56 1.56 0 0 1-1.141.475m-6-6q-.666 0-1.14-.474A1.56 1.56 0 0 1 7.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 9 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 9 7.616m6 0q-.666 0-1.14-.474A1.56 1.56 0 0 1 13.384 6q0-.666.474-1.14A1.56 1.56 0 0 1 15 4.384q.666 0 1.14.474.475.475.475 1.141t-.474 1.14A1.56 1.56 0 0 1 15 7.616"
       }
     )

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

@@ -7,14 +7,14 @@ const checkbox = cva(
     variants: {
       variant: {
         default: [
-          "m-1 border-interactive-contained-secondary-idle",
+          "m-1 border-interactive-outlined-secondary-on-idle",
           "text-interactive-contained-primary-on-idle",
           "group-hover:text-interactive-contained-primary-on-hover",
           "group-pressed:text-interactive-contained-primary-on-pressed",
           "group-disabled:text-interactive-contained-primary-on-disabled",
-          "group-disabled:border-interactive-contained-secondary-disabled",
-          "group-hover:border-interactive-contained-secondary-hover",
-          "group-pressed:border-interactive-contained-secondary-pressed",
+          "group-disabled:border-interactive-outlined-secondary-on-disabled",
+          "group-hover:border-interactive-outlined-secondary-on-hover",
+          "group-pressed:border-interactive-outlined-secondary-on-pressed",
           "group-selected:border-interactive-contained-primary-idle",
           "group-selected:bg-interactive-contained-primary-idle",
           "group-selected:group-hover:bg-interactive-contained-primary-hover",
@@ -27,7 +27,7 @@ const checkbox = cva(
           "group-indeterminate:group-hover:border-interactive-contained-primary-hover",
           "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
           "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
-          "group-invalid:border-interactive-contained-error-idle",
+          "group-invalid:border-interactive-outlined-error-on-idle",
           "group-focus-visible:outline-interactive-contained-primary-focus"
         ]
       }

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

@@ -153,6 +153,7 @@ const DatePickerBase = (props) => {
                 footer: /* @__PURE__ */ jsx(
                   DateTimeDialogFooter,
                   {
+                    isDisabled,
                     isValid: !dialogState.isInvalid && !!dialogState.value,
                     onTodayPress,
                     onApply

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

@@ -555,6 +555,7 @@ const DateRangePickerBase = (props) => {
                 footer: /* @__PURE__ */ jsx(
                   DateTimeDialogFooter,
                   {
+                    isDisabled,
                     isValid: !dialogState.isInvalid && !!dialogState.value,
                     onTodayPress,
                     onApply

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

@@ -176,6 +176,7 @@ const DateTimePickerBase = (props) => {
                 footer: /* @__PURE__ */ jsx(
                   DateTimeDialogFooter,
                   {
+                    isDisabled,
                     isValid: !dialogState.isInvalid && !!dialogState.value,
                     onTodayPress,
                     onApply

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

@@ -162,6 +162,7 @@ const TimePickerBase = (props) => {
                 footer: /* @__PURE__ */ jsx(
                   DateTimeDialogFooter,
                   {
+                    isDisabled,
                     onApply,
                     isValid: !dialogState.isInvalid && !!dialogState.value
                   }

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

@@ -136,7 +136,7 @@ const DatePickerInput = ({
                   }
                 ),
                 endFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  !((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", { className: "select-none", children: "–" }),
+                  !((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", { className: clsx("select-none", isDisabled && "text-interactive-text-secondary-disabled"), children: "–" }),
                   /* @__PURE__ */ jsx(
                     DateField,
                     {

package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.d.ts

@@ -1,7 +1,8 @@
 interface DatePickerFooterProps {
     isValid?: boolean;
+    isDisabled?: boolean;
     onTodayPress?: () => void;
     onApply: () => void;
 }
-export declare const DateTimeDialogFooter: ({ isValid, onTodayPress, onApply }: DatePickerFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateTimeDialogFooter: ({ isValid, isDisabled, onTodayPress, onApply, }: DatePickerFooterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,7 +3,12 @@ import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
 import { ns } from "../../../../config/i18n.js";
-const DateTimeDialogFooter = ({ isValid = true, onTodayPress, onApply }) => {
+const DateTimeDialogFooter = ({
+  isValid = true,
+  isDisabled = false,
+  onTodayPress,
+  onApply
+}) => {
   const { t } = useTranslation(ns);
   return /* @__PURE__ */ jsxs(
     "footer",
@@ -18,6 +23,7 @@ const DateTimeDialogFooter = ({ isValid = true, onTodayPress, onApply }) => {
           {
             type: "button",
             color: "primary",
+            isDisabled,
             onPress: onTodayPress,
             children: t(($) => $.ui.datePicker.today)
           }

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -12,10 +12,10 @@ const radio = cva(
     variants: {
       variant: {
         default: [
-          "border-interactive-contained-secondary-idle",
-          "group-disabled:border-interactive-contained-secondary-disabled",
-          "group-hover:border-interactive-contained-secondary-hover",
-          "group-pressed:border-interactive-contained-secondary-pressed",
+          "border-interactive-outlined-secondary-on-idle",
+          "group-disabled:border-interactive-outlined-secondary-on-disabled",
+          "group-hover:border-interactive-outlined-secondary-on-hover",
+          "group-pressed:border-interactive-outlined-secondary-on-pressed",
           "group-selected:border-interactive-contained-primary-idle",
           "group-selected:bg-interactive-contained-primary-idle",
           "group-selected:group-hover:bg-interactive-contained-primary-hover",
@@ -30,7 +30,7 @@ const radio = cva(
           "group-indeterminate:group-hover:border-interactive-contained-primary-hover",
           "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
           "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
-          "group-invalid:border-interactive-contained-error-idle",
+          "group-invalid:border-interactive-outlined-error-on-idle",
           "group-focus-visible:outline-interactive-contained-primary-focus",
           "before:bg-interactive-contained-primary-on-idle",
           "group-hover:before:bg-interactive-contained-primary-on-hover",

package/dist/components/overlays/ActionModal/ActionModal.js

@@ -32,7 +32,7 @@ const ActionModal = ({
               size: "title-5",
               variant: "prominent-1",
               as: "h2",
-              className: textAlignClass,
+              className: clsx("text-text-default-1", textAlignClass),
               children: heading
             }
           ),
@@ -40,7 +40,7 @@ const ActionModal = ({
             Typography,
             {
               size: "body-3",
-              className: textAlignClass,
+              className: clsx("text-text-default-1", textAlignClass),
               children: description
             }
           )

package/dist/components/overlays/Tooltip/Tooltip.js

@@ -4,8 +4,9 @@ import { useFocusable } from "react-aria";
 import { TooltipTrigger, Tooltip as Tooltip$1, OverlayArrow } from "react-aria-components";
 import { PointerHorizontalIcon } from "../../../assets/icons/PointerHorizontal.js";
 import { PointerVerticalIcon } from "../../../assets/icons/PointerVertical.js";
-import { tooltipCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva, tooltipTextCva } from "./tooltip.cva.js";
+import { tooltipCva, tooltipTextCva, tooltipPointerHorizontalCva, tooltipPointerVerticalCva } from "./tooltip.cva.js";
 import { Typography } from "../../text/Typography/Typography.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
 const CustomTrigger = ({ children, className }) => {
   const ref = useRef(null);
   const { focusableProps } = useFocusable({}, ref);
@@ -31,6 +32,9 @@ const Tooltip = ({
   triggerClassName,
   ...tooltipProps
 }) => {
+  const uiStyle = UIStyle.useConfig();
+  const tooltipCva$1 = uiStyle?.tooltip?.cva ?? tooltipCva;
+  const tooltipTextCva$1 = uiStyle?.tooltip?.textCva ?? tooltipTextCva;
   const Trigger = isNonInteractiveTrigger ? CustomTrigger : Fragment;
   return /* @__PURE__ */ jsxs(
     TooltipTrigger,
@@ -51,7 +55,7 @@ const Tooltip = ({
         /* @__PURE__ */ jsxs(
           Tooltip$1,
           {
-            className: tooltipCva({ color }),
+            className: tooltipCva$1({ color }),
             ...tooltipProps,
             offset: 13,
             children: [
@@ -64,7 +68,7 @@ const Tooltip = ({
                 {
                   size: "body-4",
                   variant: "prominent-1",
-                  className: tooltipTextCva({ color }),
+                  className: tooltipTextCva$1({ color }),
                   children: text
                 }
               )

package/dist/components/table/CellText.js

@@ -7,7 +7,7 @@ const CellText = ({ children, style, className }) => /* @__PURE__ */ jsx(
     variant: "default",
     size: "label-1",
     as: "span",
-    className: clsx("block overflow-hidden text-ellipsis px-2 py-1-5 text-text-default-2", className),
+    className: clsx("block overflow-hidden text-ellipsis text-text-default-2", className),
     style,
     "data-rac": true,
     children

package/dist/components/table/table.cva.js

@@ -6,7 +6,7 @@ const tableRow = cva(
     "disabled:opacity-50",
     "selected:bg-elevation-fill-default-2",
     "hover:selected:bg-interactive-subtle-secondary-hover",
-    "clickable:cursor-pointer",
+    "data-clickable:cursor-pointer",
     "focus-within:bg-elevation-fill-default-2"
   ],
   {
@@ -37,7 +37,7 @@ const tableHeadData = cva(
 );
 const tableData = cva(
   [
-    "relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2 py-2",
+    "relative h-0-5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2",
     "border-b border-b-elevation-outline-default-1",
     "has-[*>[data-hovered]:not([data-disabled])]:hover:border-b-input-outlined-outline-hover",
     "has-[*>[data-invalid]]:border-b-input-outlined-outline-error!",

package/dist/config/theme.context.js

@@ -45,8 +45,12 @@ var ThemeContext;
       document.documentElement.classList.remove("dark");
       if ((!theme || theme === "system") && systemTheme === "dark" || theme === "dark") {
         document.documentElement.classList.add("dark");
+        document.documentElement.style.colorScheme = "dark";
       } else if (theme === "light") {
         document.documentElement.classList.add("light");
+        document.documentElement.style.colorScheme = "light";
+      } else {
+        document.documentElement.style.colorScheme = "light";
       }
     }, [theme, systemTheme]);
     const contextValue = useMemo(

package/dist/config/uiStyle.context.d.ts

@@ -7,6 +7,7 @@ import { RadioVariantProps } from '../components/inputs/RadioGroup/radio.cva';
 import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
 import { LabelBaseProps } from '../components/inputs/shared/label.cva';
 import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
+import { TooltipTextVariantProps, TooltipVariantProps } from '../components/overlays/Tooltip/tooltip.cva';
 import { AlertVariantProps } from '../components/status/Alert/alert.cva';
 import { ToastVariantProps } from '../components/status/Toast/toast.cva';
 import { TableDataVariantProps, TableHeadDataVariantProps, TableHeadRowVariantProps, TableRowVariantProps } from '../components/table/table.cva';
@@ -75,6 +76,10 @@ export declare namespace UIStyle {
             rowCva?: Cva<TableRowVariantProps>;
             dataCva?: Cva<TableDataVariantProps>;
         };
+        tooltip: {
+            cva?: Cva<TooltipVariantProps>;
+            textCva?: Cva<TooltipTextVariantProps>;
+        };
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/utils/date.utils.d.ts

@@ -1,3 +1,5 @@
+import { ToRelativeOptions } from 'luxon';
 export declare namespace DateUtils {
     function formatDate(date: Date, format?: string): string;
+    function formatRelativeTime(date: Date | string, options?: ToRelativeOptions): string;
 }

package/dist/utils/date.utils.js

@@ -2,10 +2,21 @@ import { DateTime } from "luxon";
 var DateUtils;
 ((DateUtils2) => {
   const DATE_FORMAT = "dd/MM/yyyy";
+  const DATETIME_FORMAT = "dd/MM/yyyy HH:mm:ss";
   function formatDate(date, format = DATE_FORMAT) {
     return DateTime.fromJSDate(date).toFormat(format);
   }
   DateUtils2.formatDate = formatDate;
+  function formatRelativeTime(date, options) {
+    const dateTime = typeof date === "string" ? DateTime.fromISO(date) : DateTime.fromJSDate(date);
+    if (!dateTime.isValid) {
+      const dateObj = typeof date === "string" ? new Date(date) : date;
+      return formatDate(dateObj, DATETIME_FORMAT);
+    }
+    const relative = dateTime.toRelative(options);
+    return relative || formatDate(dateTime.toJSDate(), DATETIME_FORMAT);
+  }
+  DateUtils2.formatRelativeTime = formatRelativeTime;
 })(DateUtils || (DateUtils = {}));
 export {
   DateUtils

package/dist/utils/vendor/auth/auth.context.d.ts

@@ -16,7 +16,7 @@ export declare namespace AuthContext {
         loadingState?: ReactNode;
     }
     type ProviderProps<TUser = unknown> = Type<TUser>;
-    export const Provider: <TUser = unknown>({ isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, userPromise, routes, loadingState, children, }: PropsWithChildren<ProviderProps<TUser>>) => import("react/jsx-runtime").JSX.Element;
-    export const useAuth: <TUser = unknown>() => Type<TUser>;
+    export const Provider: <TUser>({ isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, userPromise, routes, loadingState, children, }: PropsWithChildren<ProviderProps<TUser>>) => import("react/jsx-runtime").JSX.Element;
+    export const useAuth: <TUser>() => Type<TUser>;
     export {};
 }

package/dist/utils/vendor/auth/auth.context.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { createContext, use } from "react";
+import { createContext, useMemo, use } from "react";
 var AuthContext;
 ((AuthContext2) => {
   const Context = createContext({});
@@ -15,17 +15,20 @@ var AuthContext;
     loadingState,
     children
   }) => {
-    const value = {
-      isAuthenticated,
-      isInitializing,
-      logout,
-      updateTokens,
-      accessToken,
-      user,
-      userPromise,
-      routes,
-      loadingState
-    };
+    const value = useMemo(
+      () => ({
+        isAuthenticated,
+        isInitializing,
+        logout,
+        updateTokens,
+        accessToken,
+        user,
+        userPromise,
+        routes,
+        loadingState
+      }),
+      [isAuthenticated, isInitializing, logout, updateTokens, accessToken, user, userPromise, routes, loadingState]
+    );
     return /* @__PURE__ */ jsx(Context.Provider, { value, children });
   };
   AuthContext2.useAuth = () => {

package/package.json

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