@povio/ui 4.0.2-rc.1 → 5.0.0-rc.1

package/dist/{uiConfig.context-CIoMqe1_.d.ts → uiConfig.context-aoarCLYX.d.ts}

@@ -1,11 +1,11 @@
-import { t as TypographyVariantProps } from "./typography.cva-YaO6JLqU.js";
-import { n as ButtonVariantProps } from "./button.cva-ChabF4Am.js";
-import { t as CheckboxVariantProps } from "./checkbox.cva-DwnPS5df.js";
-import { n as InputVariantProps } from "./input.cva-ByFuAEIS.js";
-import { t as RadioVariantProps } from "./radio.cva-DAq2M13H.js";
-import { t as SwitchVariantProps } from "./switch.cva-BIioyegR.js";
-import { r as TypographyPropsCva } from "./Typography-BWmZd20e.js";
-import { t as ToastVariantProps } from "./toast.cva-LU7TGprV.js";
+import { t as TypographyVariantProps } from "./typography.cva-jtp6WWUH.js";
+import { n as ButtonVariantProps } from "./button.cva-BvRI-3Gn.js";
+import { t as CheckboxVariantProps } from "./checkbox.cva-gv87kr1W.js";
+import { n as InputVariantProps } from "./input.cva-BhDJxc7r.js";
+import { t as RadioVariantProps } from "./radio.cva-BlOrmxzf.js";
+import { t as SwitchVariantProps } from "./switch.cva-8T0fw31t.js";
+import { r as TypographyPropsCva } from "./Typography-BiuidzDC.js";
+import { t as ToastVariantProps } from "./toast.cva-Cj6o2Rmu.js";
 import { FC, PropsWithChildren, ReactElement, SVGProps } from "react";
 import { ToastPosition } from "react-toastify";
 //#region src/config/uiConfig.types.d.ts
@@ -75,7 +75,7 @@ interface UIConfigOptions {
     /** Show ISO week numbers in a leading column and start calendar weeks on Monday. */
     showWeekNumbers?: boolean;
     todayIcon?: DatePickerIcon;
-    todayIconButtonSize?: ButtonVariantProps["size"] | "none";
+    todayIconButtonSize?: ButtonVariantProps["size"];
     todayIconButtonComponent?: "iconButton" | "inlineIconButton";
     todayIconPlacement?: "content" | "fieldLabel";
     shouldForceLeadingZeros?: boolean;
@@ -102,10 +102,9 @@ interface UIConfigOptions {
     hideThumb?: boolean;
     headerTypography?: TypographyVariantProps;
   };
-  tableHeaderText: Pick<TypographyPropsCva, "variant" | "size">;
-  tableCellText: Pick<TypographyPropsCva, "variant" | "size">;
+  tableHeaderText: Pick<TypographyPropsCva, "size">;
+  tableCellText: Pick<TypographyPropsCva, "size">;
   tag: {
-    textVariant?: TypographyVariantProps["variant"];
     textSize?: TypographyVariantProps["size"];
   };
   toast: Pick<ToastVariantProps, "variant"> & {

package/dist/{useBreakpoint-3kpqzjoC.js → useBreakpoint-BOA-MyoT.js}

@@ -1,4 +1,4 @@
-import { t as UIConfig } from "./uiConfig.context-RFvaQYzD.js";
+import { t as UIConfig } from "./uiConfig.context-D2eUIPHn.js";
 import { useSyncExternalStore } from "react";
 import { c } from "react/compiler-runtime";
 //#region src/hooks/useBreakpoint.ts

package/dist/{useFieldAccessibility-CtTdRX2u.js → useFieldAccessibility-D2_Qm26-.js}

@@ -1,11 +1,11 @@
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as typographyDefinition } from "./typography.cva-BI0FyIqm.js";
-import { t as Spinner } from "./Spinner-owSXOEzg.js";
+import { t as typographyDefinition } from "./typography.cva-CJZZSGXW.js";
+import { t as Spinner } from "./Spinner-BEYBu85B.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
-import { r as FormFieldLabel } from "./FormField-CAcDJ4HC.js";
-import { a as inputSizeDefinition, r as inputContentWrapperDefinition } from "./input.cva-KYGD4Bdz.js";
-import { n as InputClear } from "./TooltipWrapper-S2JC-w4e.js";
+import { r as FormFieldLabel } from "./FormField-CHD4OJOt.js";
+import { a as inputSizeDefinition, r as inputContentWrapperDefinition } from "./input.cva-BcXyC1vZ.js";
+import { n as InputClear } from "./TooltipWrapper-CRf-JFeo.js";
 import { isValidElement, useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/inputs/Input/shared/InputContent.tsx
@@ -25,7 +25,7 @@ const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, un
 			})),
 			children: [LeadingIcon && /* @__PURE__ */ jsx("div", {
 				className: clsx(!isLeadingIconElement && "pointer-events-none"),
-				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-inherit" })
 			}), /* @__PURE__ */ jsxs("div", {
 				className: inputContentWrapperCva({ as }),
 				children: [as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
@@ -49,10 +49,9 @@ const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, un
 				}),
 				unit && /* @__PURE__ */ jsx("span", {
 					className: typographyCva({
-						size: "label-2",
-						sizeMobile: "label-2",
-						variant: "prominent-1",
-						className: "text-text-default-3"
+						size: "small",
+						sizeMobile: "small",
+						className: "text-inherit font-bold"
 					}),
 					children: unit
 				}),
@@ -70,7 +69,7 @@ const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, un
 					className: clsx("border-0!", action.className),
 					"data-static-press-action": ""
 				}),
-				!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
+				!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-inherit" }))
 			]
 		})]
 	});

package/dist/{useFormAutosave-DqP6lB4l.js → useFormAutosave-BYFn3LH8.js}

@@ -1,9 +1,9 @@
-import { a as isEqual, o as ObjectUtils } from "./uiConfig.context-RFvaQYzD.js";
+import { a as isEqual, o as ObjectUtils } from "./uiConfig.context-D2eUIPHn.js";
 import { n as useForm } from "./form.binding-CG1RPv6o.js";
 import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
 import { t as ZodUtils } from "./zod.utils-DrrPDT9v.js";
 import { n as getDefaultInputComponentType } from "./dynamicInputs-CRMWIpHA.js";
-import { t as InputItem } from "./InputItem-B3PlrjuD.js";
+import { t as InputItem } from "./InputItem-2zf6QI5L.js";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { z } from "zod";

package/dist/{useStaticInputHandoff-BAaDW_0z.js → useStaticInputHandoff-DB9PgioW.js}

@@ -1,12 +1,12 @@
-import { t as UIConfig } from "./uiConfig.context-RFvaQYzD.js";
+import { t as UIConfig } from "./uiConfig.context-D2eUIPHn.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as typographyDefinition } from "./typography.cva-BI0FyIqm.js";
-import { t as Spinner } from "./Spinner-owSXOEzg.js";
+import { t as typographyDefinition } from "./typography.cva-CJZZSGXW.js";
+import { t as Spinner } from "./Spinner-BEYBu85B.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
-import { r as FormFieldLabel, t as FormField } from "./FormField-CAcDJ4HC.js";
-import { a as inputSizeDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "./input.cva-KYGD4Bdz.js";
-import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-S2JC-w4e.js";
+import { r as FormFieldLabel, t as FormField } from "./FormField-CHD4OJOt.js";
+import { a as inputSizeDefinition, r as inputContentWrapperDefinition, t as inputBaseDefinition } from "./input.cva-BcXyC1vZ.js";
+import { n as InputClear, t as TooltipWrapper } from "./TooltipWrapper-CRf-JFeo.js";
 import { isValidElement, useId, useLayoutEffect, useRef, useState } from "react";
 import { useFocusRing as $32daac5f69beb98a$re_export$useFocusRing } from "react-aria/useFocusRing";
 import "react-aria/FocusScope";
@@ -129,10 +129,9 @@ const InputFrame = (props) => {
 		trailingContent,
 		unit && /* @__PURE__ */ jsx("span", {
 			className: typographyCva({
-				size: "label-2",
-				sizeMobile: "label-2",
-				variant: "prominent-1",
-				className: "text-text-default-3"
+				size: "small",
+				sizeMobile: "small",
+				className: "text-inherit font-bold"
 			}),
 			children: unit
 		}),
@@ -163,7 +162,7 @@ const InputFrame = (props) => {
 		className: clsx("flex items-center gap-input-gap-trailing-elements", inputSizeCva({
 			size,
 			as
-		}), !isTrailingInteractive && "pointer-events-none", isDisabled && "text-interactive-text-secondary-disabled", trailingClassName),
+		}), !isTrailingInteractive && "pointer-events-none", trailingClassName),
 		children: trailingContentNodes
 	}) : trailingContentNodes;
 	const inputFrameContent = wrapContentAndTrailing ? /* @__PURE__ */ jsxs("div", {
@@ -251,7 +250,7 @@ const inputFrameContentGroupClassNames = {
 };
 const renderIconVisual = (icon) => {
 	if (isValidElement(icon)) return icon;
-	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-interactive-text-secondary-idle" });
+	return /* @__PURE__ */ jsx(icon, { className: "size-6 text-inherit" });
 };
 const getInputFrameDataAttributeProps = (dataAttributes) => ({
 	"data-is-empty": dataAttributes?.dataIsEmpty || void 0,

package/dist/{useTableColumnConfig-DVI_jVHz.js → useTableColumnConfig-CcJxu14U.js}

@@ -1,13 +1,13 @@
 import { t as logger } from "./logger-CqZjM-sn.js";
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { t as UIConfig } from "./uiConfig.context-RFvaQYzD.js";
+import { t as UIConfig } from "./uiConfig.context-D2eUIPHn.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronUp } from "./chevron-up-D_Gqpb5M.js";
 import { t as clsx } from "./clsx-CnD0nOiA.js";
-import { t as Checkbox } from "./Checkbox-DBV_Nxtq.js";
+import { t as Checkbox } from "./Checkbox-BepzfVfK.js";
 import { t as UIOverrides } from "./uiOverrides.context-Bfm2n-n8.js";
-import { t as Typography } from "./Typography-AcUd9df8.js";
-import { t as Spinner } from "./Spinner-owSXOEzg.js";
+import { t as Typography } from "./Typography-B0Gp1lpc.js";
+import { t as Spinner } from "./Spinner-BEYBu85B.js";
 import { InlineIconButton } from "./components/inline-icon-button.js";
 import "./i18n-CX2EjhJI.js";
 import { t as useIntersectionObserver } from "./useIntersectionObserver-DYfHnGGU.js";
@@ -15,7 +15,7 @@ import { t as IntlUtils } from "./intl.utils-zwAFoZ0U.js";
 import { t as DateUtils } from "./date.utils-B8_QF9y6.js";
 import { t as StringUtils } from "./string.utils-BPgv6QwA.js";
 import { t as ZodUtils } from "./zod.utils-DrrPDT9v.js";
-import { t as Dialog } from "./Dialog-BE9BSDDl.js";
+import { t as Dialog } from "./Dialog-DdRP4YFC.js";
 import { Pagination } from "./components/pagination.js";
 import { t as useTranslationMemo } from "./useTranslationMemo-CrZbeyBv.js";
 import { t as UIRouter } from "./router.context-B0jTMtE0.js";
@@ -83,25 +83,25 @@ const GripVertical = createLucideIcon(__iconData);
 const tableRowDefinition = UIOverrides.defineConfig({
 	base: [
 		"h-9 max-h-12",
-		"hover:bg-elevation-fill-default-2",
+		"not-selected:not-disabled:hover:bg-surface-default-background",
 		"disabled:opacity-50",
-		"selected:bg-elevation-fill-default-2",
-		"hover:selected:bg-interactive-subtle-secondary-hover",
+		"selected:bg-interactive-subtle-secondary-background",
+		"selected:not-disabled:hover:bg-tint-interactive-subtle-secondary-background/80",
 		"data-clickable:cursor-pointer",
-		"focus-within:bg-elevation-fill-default-2"
+		"not-disabled:focus-within:bg-tint-interactive-subtle-secondary-background/60"
 	],
 	config: { variants: { alternatingBackground: {
-		even: "even:bg-elevation-fill-inverted-4/5",
-		odd: "odd:bg-elevation-fill-inverted-4/5"
+		even: "even:bg-surface-inverted-alt/5",
+		odd: "odd:bg-surface-inverted-alt/5"
 	} } }
 });
 const theadDefinition = UIOverrides.defineConfig({ base: ["group/table-head sticky top-0 z-sticky data-is-sticky:shadow-2"] });
 const tableHeadRowDefinition = UIOverrides.defineConfig({ base: ["h-8 w-full"] });
 const tableHeadDataDefinition = UIOverrides.defineConfig({
-	base: ["border-b border-b-elevation-outline-default-1 border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-elevation-fill-default-1"],
+	base: ["border-b border-b-border-default-subtle border-solid px-table-header-cell-container-side-default py-table-header-cell-container-height-default text-left", "group-data-[is-sticky=true]/table-head:bg-surface-default-card"],
 	config: {
 		variants: { hasRightBorder: {
-			true: "border-l border-l-elevation-outline-default-1 border-solid",
+			true: "border-l border-l-border-default-subtle border-solid",
 			false: ""
 		} },
 		defaultVariants: { hasRightBorder: true }
@@ -109,32 +109,31 @@ const tableHeadDataDefinition = UIOverrides.defineConfig({
 });
 const tableDataDefinition = UIOverrides.defineConfig({
 	base: [
-		"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!",
-		"has-[*>[data-focused]]:border-b-input-outlined-outline-active"
+		"relative h-0.5 overflow-hidden text-ellipsis whitespace-nowrap border-t border-t-transparent px-2",
+		"border-b border-b-border-default-subtle",
+		"has-[*>[data-hovered]:not([data-disabled])]:hover:border-b-tint-border-default-input/80",
+		"has-[*>[data-invalid]]:border-b-border-destructive-base!",
+		"has-[*>[data-focused]]:border-b-interactive-ring"
 	],
 	config: {
 		variants: { hasRightBorder: {
-			true: "border-l border-l-elevation-outline-default-1",
+			true: "border-l border-l-border-default-subtle",
 			false: ""
 		} },
 		defaultVariants: { hasRightBorder: true }
 	}
 });
-const tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-text-default-1"] });
-const tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-text-default-2"] });
+const tableHeaderTextDefinition = UIOverrides.defineConfig({ base: ["overflow-hidden text-ellipsis px-table-cell-content-side-m py-table-cell-content-height-m text-surface-default-card-foreground"] });
+const tableCellTextDefinition = UIOverrides.defineConfig({ base: ["block overflow-hidden text-ellipsis text-surface-default-foreground"] });
 //#endregion
 //#region src/components/table/CellText.tsx
 const CellText = (props) => {
 	const uiConfig = UIConfig.useConfig();
-	const { variant = uiConfig.tableCellText.variant, size = uiConfig.tableCellText.size, children, style, className } = props;
+	const { size = uiConfig.tableCellText.size, children, style, className } = props;
 	const cellTextCva = UIOverrides.useCva("table.cellTextCva", tableCellTextDefinition);
 	return /* @__PURE__ */ jsx(Typography, {
 		className: cellTextCva({ className }),
 		as: "span",
-		variant,
 		size,
 		style,
 		"data-rac": true,
@@ -145,12 +144,11 @@ const CellText = (props) => {
 //#region src/components/table/HeaderText.tsx
 const HeaderText = (props) => {
 	const uiConfig = UIConfig.useConfig();
-	const { variant = uiConfig.tableHeaderText.variant, size = uiConfig.tableHeaderText.size, children, style, className } = props;
+	const { size = uiConfig.tableHeaderText.size, children, style, className } = props;
 	const headerTextCva = UIOverrides.useCva("table.headerTextCva", tableHeaderTextDefinition);
 	return /* @__PURE__ */ jsx(Typography, {
 		className: headerTextCva({ className }),
 		as: "span",
-		variant,
 		size,
 		style,
 		children
@@ -676,7 +674,7 @@ const Table = ({ items, showCellBorder, columns, onRowClick, onDoubleClick, clas
 						children: isAnyRowSelected ? /* @__PURE__ */ jsx(ActionHeader, { table }) : /* @__PURE__ */ jsxs("button", {
 							type: "button",
 							"aria-label": "Sort column",
-							className: clsx("flex select-none items-center gap-1 text-text-default-1", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-elevation-fill-default-2" : "cursor-default", columnMeta.sortClass),
+							className: clsx("flex select-none items-center gap-1 text-surface-default-card-foreground", header_0.column.getCanSort() ? "h-6 cursor-pointer rounded-xs px-1 hover:bg-surface-default-background" : "cursor-default", columnMeta.sortClass),
 							onClick: header_0.column.getToggleSortingHandler(),
 							children: [typeof header_0.column.columnDef.header === "function" ? flexRender(header_0.column.columnDef.header, header_0.getContext()) : /* @__PURE__ */ jsx(HeaderText, { children: header_0.column.columnDef.header }), {
 								asc: /* @__PURE__ */ jsx(ChevronUp, {
@@ -870,8 +868,8 @@ function ColumnConfigModal(t0) {
 	if ($[14] !== t7) {
 		t8 = /* @__PURE__ */ jsx(Typography, {
 			as: "h2",
-			variant: "prominent-1",
-			size: "title-5",
+			className: "font-bold",
+			size: "lead",
 			children: t7
 		});
 		$[14] = t7;

package/dist/{useTableNav-Tu8UZxHA.d.ts → useTableNav-D9mICzNW.d.ts}

@@ -1,13 +1,13 @@
 import { n as StyleMergeUtils, t as UIOverrides } from "./uiOverrides.context-C3xb4Ttq.js";
 import { t as FieldPath } from "./form.binding-DVJ5F0JE.js";
-import { n as TypographyProps } from "./Typography-BWmZd20e.js";
+import { n as TypographyProps } from "./Typography-BiuidzDC.js";
 import { CSSProperties, ComponentType, Dispatch, FC, KeyboardEvent, ReactNode, SetStateAction } from "react";
 import { z } from "zod";
 import { CellContext, ColumnDef, ColumnMeta, ColumnOrderState, ColumnVisibilityState, OnChangeFn, PaginationState, Row, RowData, RowSelectionState, SortingState, StockFeatures, Table } from "@tanstack/react-table";
 import { DragEndEvent, UniqueIdentifier } from "@dnd-kit/core";
 import { TFunction } from "i18next";
 //#region src/components/table/CellText.d.ts
-interface CellTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
+interface CellTextProps extends Partial<Pick<TypographyProps, "size">> {
   children: ReactNode;
   className?: string;
   style?: CSSProperties;
@@ -28,7 +28,7 @@ interface ColumnConfigModalProps<TData extends RowData, TValue> {
 declare function ColumnConfigModal<TData extends RowData, TValue>({ isOpen, onClose, configColumns, visibleColumns, onVisibilityChange, onOrderChange }: ColumnConfigModalProps<TData, TValue>): import("react").JSX.Element | null;
 //#endregion
 //#region src/components/table/HeaderText.d.ts
-interface HeaderTextProps extends Partial<Pick<TypographyProps, "variant" | "size">> {
+interface HeaderTextProps extends Partial<Pick<TypographyProps, "size">> {
   children: ReactNode;
   className?: string;
   style?: CSSProperties;
@@ -40,8 +40,8 @@ declare const tableRowDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly alternatingBackground: {
-      readonly even: "even:bg-elevation-fill-inverted-4/5";
-      readonly odd: "odd:bg-elevation-fill-inverted-4/5";
+      readonly even: "even:bg-surface-inverted-alt/5";
+      readonly odd: "odd:bg-surface-inverted-alt/5";
     };
   }>;
 };
@@ -55,7 +55,7 @@ declare const tableHeadDataDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly hasRightBorder: {
-      readonly true: "border-l border-l-elevation-outline-default-1 border-solid";
+      readonly true: "border-l border-l-border-default-subtle border-solid";
       readonly false: "";
     };
   }>;
@@ -64,7 +64,7 @@ declare const tableDataDefinition: {
   base: string[];
   config: StyleMergeUtils.Config<{
     readonly hasRightBorder: {
-      readonly true: "border-l border-l-elevation-outline-default-1";
+      readonly true: "border-l border-l-border-default-subtle";
       readonly false: "";
     };
   }>;

package/dist/{useToast-NBGlVeFP.d.ts → useToast-DMSm59Y6.d.ts}

@@ -1,4 +1,4 @@
-import { r as ToastProps } from "./Toast-DIlYlUQk.js";
+import { r as ToastProps } from "./Toast-B4cXs2rj.js";
 import { Id, ToastOptions, ToastPosition } from "react-toastify";
 //#region src/components/status/Toast/useToast.d.ts
 interface ToastParams extends Omit<ToastProps, "color"> {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "4.0.2-rc.1",
+  "version": "5.0.0-rc.1",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -1304,6 +1304,7 @@
       "default": "./dist/rich-text-editor.js"
     },
     "./rich-text-editor/styles": "./dist/styles/editor.css",
+    "./color-utilities": "./dist/styles/color-utilities.css",
     "./tw-ui-plugin": {
       "types": "./dist/tw-ui-plugin.d.ts",
       "import": "./dist/tw-ui-plugin.js",