@povio/ui 0.0.10 → 2.1.0

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

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Typography } from "../../../text/Typography/Typography.js";
+const ProgressBar = ({ progress = 0, valueLabel = "trailing" }) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex w-full items-center justify-center gap-file-upload-content-gap-progress-actions",
+        valueLabel === "leading" && "flex-row-reverse"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex flex-fill flex-col items-start gap-2 py-progress-height-height", children: /* @__PURE__ */ jsxs("div", { className: "relative h-1 w-full", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-1 w-full shrink-0 rounded-xs bg-input-filled-idle" }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute top-0 left-0 h-1 shrink-0 rounded-xs bg-interactive-contained-primary-idle transition-all duration-300",
+              style: { width: `${progress}%` }
+            }
+          )
+        ] }) }),
+        valueLabel !== "none" && /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "default",
+            size: "label-2",
+            as: "span",
+            className: "text-center text-text-default-3",
+            children: [
+              progress,
+              "%"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ProgressBar
+};

package/dist/components/inputs/File/shared/inputUploadButton.cva.js

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 import { clsx } from "clsx";
 const inputUploadButtonBase = cva(
-  ["flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap"],
+  ["flex w-full items-center justify-between gap-input-gap-input-to-button-gap"],
   {
     variants: {
       variant: {
@@ -22,7 +22,7 @@ const inputUploadDropZone = cva(
   [
     "min-w-0 flex-1",
     "flex items-center",
-    "group-data-[invalid]/input-upload:border group-data-[invalid]/input-upload:border-input-outlined-outline-error",
+    "group-invalid/input-upload:border group-invalid/input-upload:border-input-outlined-outline-error",
     "data-[drop-target]:border-input-outlined-outline-hover",
     "hover:border-input-outlined-outline-hover"
   ],

package/dist/components/inputs/FormField/FormFieldHeader.js

@@ -46,7 +46,7 @@ const FormFieldHeader = ({
       {
         slot: "description",
         size: "label-2",
-        className: clsx(isDisabled ? "text-interactive-3" : "text-text-default-2"),
+        className: "text-text-default-2",
         children: helperText
       }
     )

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

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
 import { RadioGroup as RadioGroup$1, Radio } from "react-aria-components";
 import { Controller } from "react-hook-form";
 import { FormField } from "../FormField/FormField.js";
@@ -62,16 +61,7 @@ const RadioGroupBase = (props) => {
                 className: radioCva({
                   variant,
                   ...rest
-                }),
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "absolute hidden size-1 rounded-full group-selected:block",
-                      "bg-interactive-contained-primary-on-idle group-hover:bg-interactive-contained-primary-on-hover"
-                    )
-                  }
-                )
+                })
               }
             ),
             /* @__PURE__ */ jsx(CheckContent, { typography: radioTypographyMap({ variant, ...rest }), children: option.label })

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

@@ -2,7 +2,12 @@ import { cva } from "class-variance-authority";
 import { uiGroupOutlineClass } from "../../outline.clsx.js";
 import { compoundMapper } from "../../../utils/compoundMapper.js";
 const radio = cva(
-  ["flex items-center justify-center border-2", "relative size-3-5 rounded-full p-1-5", uiGroupOutlineClass],
+  [
+    "flex items-center justify-center border-2",
+    "relative size-3-5 rounded-full p-1-5",
+    "before:absolute before:hidden before:size-1 before:rounded-full",
+    uiGroupOutlineClass
+  ],
   {
     variants: {
       variant: {
@@ -17,6 +22,8 @@ const radio = cva(
           "group-selected:group-hover:border-interactive-contained-primary-hover",
           "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
           "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-selected:group-disabled:bg-interactive-contained-primary-disabled",
+          "group-selected:group-disabled:border-interactive-contained-primary-disabled",
           "group-indeterminate:border-interactive-contained-primary-idle",
           "group-indeterminate:bg-interactive-contained-primary-idle",
           "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
@@ -24,7 +31,10 @@ const radio = cva(
           "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-focus-visible:outline-interactive-contained-primary-focus"
+          "group-focus-visible:outline-interactive-contained-primary-focus",
+          "before:bg-interactive-contained-primary-on-idle",
+          "group-hover:before:bg-interactive-contained-primary-on-hover",
+          "group-selected:before:block"
         ]
       }
     },

package/dist/components/inputs/shared/input.cva.js

@@ -10,7 +10,13 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
     },
     as: {
       default: "rounded-input-rounding-default",
-      floating: "rounded-input-rounding-default",
+      floating: [
+        "rounded-input-rounding-default",
+        "py-floating-label-input-height-empty!",
+        "group-has-[input:not(:placeholder-shown)]/input-content:pb-floating-label-input-height-filled!",
+        "group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-input-height-default)+14px)]!"
+        // TODO: remove this hardcoded value
+      ],
       filter: "rounded-input-rounding-default",
       inline: [
         "h-full",
@@ -110,10 +116,10 @@ const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
 const inputSize = cva("", {
   variants: {
     size: {
-      "extra-small": "px-input-side-xs py-input-height-extra-small text-label-1",
-      small: "px-input-side-s py-input-height-small text-label-1",
-      default: "px-input-side-m py-input-height-default text-label-1",
-      large: "px-input-side-l py-input-height-large text-label-1"
+      "extra-small": "px-input-side-default py-input-height-default text-label-1",
+      small: "px-input-side-default py-input-height-default text-label-1",
+      default: "px-input-side-default py-input-height-default text-label-1",
+      large: "px-input-side-default py-input-height-default text-label-1"
     }
   },
   defaultVariants: {
@@ -135,18 +141,18 @@ const inputSide = cva("", {
     }
   },
   compoundVariants: [
-    { type: "left", size: "extra-small", className: "left-input-side-xs" },
-    { type: "right", size: "extra-small", className: "right-input-side-xs" },
-    { type: "var", size: "extra-small", className: "--spacing-input-side-xs" },
-    { type: "left", size: "small", className: "left-input-side-s" },
-    { type: "right", size: "small", className: "right-input-side-s" },
-    { type: "var", size: "small", className: "--spacing-input-side-s" },
-    { type: "left", size: "default", className: "left-input-side-m" },
-    { type: "right", size: "default", className: "right-input-side-m" },
-    { type: "var", size: "default", className: "--spacing-input-side-m" },
-    { type: "left", size: "large", className: "left-input-side-l" },
-    { type: "right", size: "large", className: "right-input-side-l" },
-    { type: "var", size: "large", className: "--spacing-input-side-l" }
+    { type: "left", size: "extra-small", className: "left-input-side-default" },
+    { type: "right", size: "extra-small", className: "right-input-side-default" },
+    { type: "var", size: "extra-small", className: "--spacing-input-side-default" },
+    { type: "left", size: "small", className: "left-input-side-default" },
+    { type: "right", size: "small", className: "right-input-side-default" },
+    { type: "var", size: "small", className: "--spacing-input-side-default" },
+    { type: "left", size: "default", className: "left-input-side-default" },
+    { type: "right", size: "default", className: "right-input-side-default" },
+    { type: "var", size: "default", className: "--spacing-input-side-default" },
+    { type: "left", size: "large", className: "left-input-side-default" },
+    { type: "right", size: "large", className: "right-input-side-default" },
+    { type: "var", size: "large", className: "--spacing-input-side-default" }
   ],
   defaultVariants: {
     size: "default"

package/dist/components/inputs/shared/label.cva.js

@@ -7,6 +7,7 @@ const labelBase = cva("text-text-default-1", {
       filter: ["-translate-y-1/2 absolute top-1/2"],
       inline: ["flex items-start gap-1"],
       floating: [
+        "pointer-events-none",
         "absolute transition-all duration-75",
         "-translate-y-1/2 top-1/2",
         "text-text-default-2 group-has-[input:disabled]/input-content:text-interactive-text-secondary-disabled",
@@ -19,17 +20,11 @@ const labelBase = cva("text-text-default-1", {
         // TextEditor default positioning
         "group-data-[text-editor]/text-editor:top-5 group-data-[text-editor]/text-editor:left-2 group-data-[text-editor]/text-editor:translate-y-0",
         // Text and Number Input
-        "group-focus/input-content:top-1 group-focus/input-content:translate-y-0",
-        "group-focus-within/input-content:top-1 group-focus-within/input-content:translate-y-0",
-        "group-has-[input:not(:placeholder-shown)]/input-content:top-1 group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
+        "group-has-[input:not(:placeholder-shown)]/input-content:top-floating-label-input-height-filled group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
         // TextArea
-        "group-focus/text-area:top-1 group-focus/text-area:translate-y-0",
-        "group-focus-within/text-area:top-1 group-focus-within/text-area:translate-y-0",
-        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-1 group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
+        "group-has-[textarea:not(:placeholder-shown)]/text-area:top-floating-label-input-height-filled group-has-[textarea:not(:placeholder-shown)]/text-area:translate-y-0",
         // TextEditor
-        "group-focus/text-editor:top-1 group-focus/text-editor:translate-y-0",
-        "group-focus-within/text-editor:top-1 group-focus-within/text-editor:translate-y-0",
-        "group-data-[is-filled=true]/text-editor:top-1 group-data-[is-filled=true]/text-editor:translate-y-0",
+        "group-data-[is-filled=true]/text-editor:top-floating-label-input-height-filled group-data-[is-filled=true]/text-editor:translate-y-0",
         // Date and Time Picker
         "group-data-[has-selection]/date-picker-content:top-1 group-data-[has-selection]/date-picker-content:translate-y-0",
         "group-focus-within/date-picker-content:top-1 group-focus-within/date-picker-content:translate-y-0",
@@ -40,12 +35,12 @@ const labelBase = cva("text-text-default-1", {
         // Text and Number Input
         "group-has-[input:placeholder-shown]/input-content:text-text-default-3",
         "group-has-[input:placeholder-shown]/input-content:!font-medium",
-        "group-has-[input:not(placeholder-shown)]/input-content:!font-semibold",
+        "group-has-[input:not(:placeholder-shown)]/input-content:!font-semibold",
         "group-has-[input:not(:placeholder-shown)]/input-content:!text-label-3",
-        "group-has-[input:not(placeholder-shown)]/input-content:text-text-default-1",
-        "group-focus-within/input-content:!text-text-default-1",
-        "group-focus-within/input-content:text-label-3",
-        "group-has-[input:focus-within]/input-content:!font-semibold",
+        "group-has-[input:not(:placeholder-shown)]/input-content:text-text-default-1",
+        // "group-focus-within/input-content:!text-text-default-1",
+        // "group-focus-within/input-content:text-label-3",
+        // "group-has-[input:focus-within]/input-content:!font-semibold",
         // TextArea
         "group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
         "group-has-[textarea:placeholder-shown]/text-area:!font-medium",

package/dist/components/overlays/Modal/Modal.d.ts

@@ -5,7 +5,8 @@ export interface ModalProps extends ModalVariantProps {
     portalContainerRef?: RefObject<HTMLElement>;
     onClose: () => void;
     modalClassName?: string;
+    closeIconClassName?: string;
     showCloseIcon?: boolean;
     isDismissable?: boolean;
 }
-export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ isOpen, portalContainerRef, onClose, aside, children, modalClassName, closeIconClassName, showCloseIcon, isDismissable, }: PropsWithChildren<ModalProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/overlays/Modal/Modal.js

@@ -4,7 +4,7 @@ import { ModalOverlay, Modal as Modal$1, Dialog } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { CloseIcon } from "../../../assets/icons/Close.js";
 import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
-import { modalOverlay, modalContent, modalMain } from "./modal.cva.js";
+import { modalOverlay, modalMain, modalContent } from "./modal.cva.js";
 import { ns } from "../../../config/i18n.js";
 const Modal = ({
   isOpen,
@@ -13,6 +13,7 @@ const Modal = ({
   aside,
   children,
   modalClassName,
+  closeIconClassName,
   showCloseIcon,
   isDismissable = true
 }) => {
@@ -32,14 +33,17 @@ const Modal = ({
           onClose();
         }
       },
-      children: /* @__PURE__ */ jsx(Modal$1, { className: clsx(modalMain({ aside })), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
+      children: /* @__PURE__ */ jsx(Modal$1, { className: modalMain({ aside }), children: /* @__PURE__ */ jsxs(Dialog, { className: modalContent({ aside, className: modalClassName }), children: [
         showCloseIcon && /* @__PURE__ */ jsx(
           InlineIconButton,
           {
             color: "secondary",
             onPress: onClose,
             icon: CloseIcon,
-            className: "absolute top-0 right-0 p-2",
+            className: clsx(
+              "absolute top-0 right-0 p-modal-gap-desktop-modal-close-icon-top-right",
+              closeIconClassName
+            ),
             label: t(($) => $.ui.modal.closeBtn)
           }
         ),

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

@@ -39,7 +39,15 @@ const Tooltip = ({
       closeDelay: closeDelay ?? 0,
       isDisabled,
       children: [
-        /* @__PURE__ */ jsx(Trigger, { className: triggerClassName, children }),
+        /* @__PURE__ */ jsx(
+          Trigger,
+          {
+            ...isNonInteractiveTrigger && {
+              className: triggerClassName
+            },
+            children
+          }
+        ),
         /* @__PURE__ */ jsxs(
           Tooltip$1,
           {

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

@@ -5,7 +5,7 @@ const tooltipCva = cva(
     variants: {
       color: {
         default: ["bg-interactive-contained-secondary-idle"],
-        error: ["w-max bg-text-error-1"]
+        error: ["w-max bg-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -19,7 +19,7 @@ const tooltipPointerHorizontalCva = cva(
     variants: {
       color: {
         default: ["text-interactive-contained-secondary-idle"],
-        error: ["text-text-error-1"]
+        error: ["text-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -33,7 +33,7 @@ const tooltipPointerVerticalCva = cva(
     variants: {
       color: {
         default: ["text-interactive-contained-secondary-idle"],
-        error: ["text-text-error-1"]
+        error: ["text-elevation-fill-error-1"]
       }
     },
     defaultVariants: {
@@ -45,7 +45,7 @@ const tooltipTextCva = cva([], {
   variants: {
     color: {
       default: ["text-text-inverted-3"],
-      error: ["text-interactive-text-secondary-idle-inverted"]
+      error: ["text-text-error-inverted-1"]
     }
   },
   defaultVariants: {

package/dist/components/segment/SegmentItem.js

@@ -11,16 +11,17 @@ const SegmentItem = ({ label, icon, id, isDisabled, ...props }) => {
       ...props,
       id,
       className: clsx(
-        "flex items-center justify-center gap-1 transition-all duration-200",
-        "border border-transparent",
+        "flex items-center justify-center gap-segmented-control-gap-content-icon-to-text transition-all duration-200",
+        "border border-support-transparent-outline",
         "py-segmented-control-height-segment",
-        iconOnly ? "px-segmented-control-height-segment" : "px-segmented-control-side-segment py-segmented-control-height-segment",
+        iconOnly ? "px-segmented-control-height-segment" : "px-segmented-control-side-segment",
         "rounded-segmented-control-rounding-segment",
-        "hover:bg-interactive-subtle-secondary-hover",
-        "pressed:bg-interactive-subtle-secondary-pressed",
-        "selected:text-interactive-subtle-secondary-on-toggled-idle text-interactive-subtle-secondary-on-idle hover:text-interactive-subtle-secondary-on-hover",
-        "disabled:selected:text-interactive-subtle-secondary-on-toggled-disabled disabled:text-interactive-subtle-secondary-on-disabled",
-        "selected:bg-interactive-subtle-secondary-toggled-idle disabled:selected:bg-interactive-subtle-secondary-toggled-disabled"
+        "text-interactive-subtle-secondary-on-idle",
+        "hover:border-interactive-subtle-secondary-hover hover:bg-interactive-subtle-secondary-hover hover:text-interactive-subtle-secondary-on-hover",
+        "pressed:border-interactive-subtle-secondary-pressed pressed:bg-interactive-subtle-secondary-pressed pressed:text-interactive-subtle-secondary-on-pressed",
+        "disabled:border-support-transparent-outline disabled:text-interactive-subtle-secondary-on-disabled",
+        "selected:border-interactive-subtle-secondary-toggled-idle selected:bg-interactive-subtle-secondary-toggled-idle selected:text-interactive-subtle-secondary-on-toggled-idle",
+        "selected:disabled:border-interactive-subtle-secondary-toggled-disabled selected:disabled:bg-interactive-subtle-secondary-toggled-disabled selected:disabled:text-interactive-subtle-secondary-on-toggled-disabled"
       ),
       isDisabled,
       children: [

package/dist/components/shared/pagination/PaginationList.d.ts

@@ -6,7 +6,7 @@ export interface PaginationListProps {
     hideFirstLast?: boolean;
     hidePrevNext?: boolean;
     hideNumbers?: boolean;
-    size?: ButtonProps["size"];
+    size?: Exclude<ButtonProps["size"], "none">;
     color?: ButtonProps["color"];
     variant?: ButtonProps["variant"];
     className?: string;

package/dist/components/shared/pagination/minWidth.cva.d.ts

@@ -1,3 +1,3 @@
 export declare const minWidth: (props?: ({
-    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+    size?: "xs" | "s" | "m" | "l" | "xxs" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/status/Toast/Toast.js

@@ -32,7 +32,8 @@ const Toast = ({ text, isLoading = false, actions = [], icon: Icon, ...props })
           onPress,
           ...buttonColor({ ...props }),
           variant: "text",
-          size: "xs",
+          size: "none",
+          width: "hug",
           children: buttonText
         },
         buttonText

package/dist/components/text/Link/Link.d.ts

@@ -1,7 +1,9 @@
 import { PropsWithChildren } from 'react';
 import { LinkProps as AriaLinkProps } from 'react-aria-components';
 import { LinkVariantProps } from './link.cva';
-export interface LinkProps extends PropsWithChildren<AriaLinkProps>, LinkVariantProps {
+export interface LinkNavigationProps extends AriaLinkProps {
+}
+export interface LinkProps extends PropsWithChildren<LinkNavigationProps>, LinkVariantProps {
     className?: string;
 }
 export declare const Link: ({ variant, ...props }: LinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/text/Link/Link.js

@@ -1,12 +1,18 @@
 import { jsx } from "react/jsx-runtime";
 import { Link as Link$1 } from "react-aria-components";
 import { link } from "./link.cva.js";
+import { LinkContext } from "../../../config/link.context.js";
 import { UIStyle } from "../../../config/uiStyle.context.js";
 const Link = ({ variant, ...props }) => {
+  const linkContext = LinkContext.useLinkContext();
   const uiStyle = UIStyle.useConfig();
   const linkCva = uiStyle?.link?.cva ?? link;
+  const LinkComponent = linkContext?.LinkComponent ?? Link$1;
+  if (!props.to && props.href) {
+    props.to = props.href;
+  }
   return /* @__PURE__ */ jsx(
-    Link$1,
+    LinkComponent,
     {
       ...props,
       className: linkCva({ variant, className: props.className })

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

@@ -0,0 +1,10 @@
+import { ComponentType, PropsWithChildren } from 'react';
+import { LinkNavigationProps } from '../components/text/Link/Link';
+interface LinkContextValue {
+    LinkComponent?: ComponentType<LinkNavigationProps>;
+}
+export declare namespace LinkContext {
+    const LinkContextProvider: ({ children, LinkComponent }: PropsWithChildren<LinkContextValue>) => import("react/jsx-runtime").JSX.Element;
+    const useLinkContext: () => LinkContextValue;
+}
+export {};

package/dist/config/link.context.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+var LinkContext;
+((LinkContext2) => {
+  const LinkContextInternal = createContext(null);
+  LinkContext2.LinkContextProvider = ({ children, LinkComponent }) => {
+    const value = {
+      LinkComponent
+    };
+    return /* @__PURE__ */ jsx(LinkContextInternal.Provider, { value, children });
+  };
+  LinkContext2.useLinkContext = () => {
+    const context = use(LinkContextInternal);
+    return context;
+  };
+})(LinkContext || (LinkContext = {}));
+export {
+  LinkContext
+};

package/dist/hooks/useFilters.d.ts

@@ -1,7 +1,11 @@
+import { z } from 'zod';
+type FilterValue = string | string[] | boolean | number;
 export interface FilterStore<TFilterData> {
     filterData: TFilterData;
     setFilterValue: (data: Partial<TFilterData>) => void;
     getFilterValue: (keys: (keyof TFilterData)[]) => Partial<TFilterData>;
     clearAllFilters: () => void;
 }
-export declare const useFilters: <TFilterData>(defaultFilterValues?: TFilterData, prefix?: string) => FilterStore<TFilterData>;
+export declare function parseFilterFromQuery(query: Record<string, any>, schema?: z.ZodObject<any>): Record<string, FilterValue>;
+export declare function useFilters<TFilterData>(defaultFilterValues?: TFilterData, prefix?: string, schema?: z.ZodObject<any>): FilterStore<TFilterData>;
+export {};