@povio/ui 2.1.23 → 2.1.24

package/dist/ActionModal.js

@@ -1,5 +1,6 @@
 import { Typography } from "./Typography.js";
 import { Button } from "./Button.js";
+import { UIConfig } from "./uiConfig.context.js";
 import { Modal } from "./Modal.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -8,7 +9,8 @@ var textAlignClassMap = {
 	center: "text-center",
 	right: "text-right"
 };
-const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName,...modalProps }) => {
+const ActionModal = ({ heading, description, primaryAction, secondaryAction, buttonSize = "m", textAlign = "left", modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName,...modalProps }) => {
+	const ui = UIConfig.useConfig();
 	const textAlignClass = textAlignClassMap[textAlign];
 	return /* @__PURE__ */ jsxs(Modal, {
 		modalClassName: clsx("w-modal", modalClassName),
@@ -16,14 +18,13 @@ const ActionModal = ({ heading, description, primaryAction, secondaryAction, but
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-modal-gap-text",
 			children: [/* @__PURE__ */ jsx(Typography, {
-				size: "title-5",
-				variant: "prominent-1",
+				...titleTypography ?? ui.actionModal.titleTypography,
 				as: "h2",
-				className: clsx("text-text-default-1", textAlignClass),
+				className: clsx("text-text-default-1", textAlignClass, titleClassName),
 				children: heading
 			}), /* @__PURE__ */ jsx(Typography, {
-				size: "body-3",
-				className: clsx("text-text-default-1", textAlignClass),
+				...descriptionTypography ?? ui.actionModal.descriptionTypography,
+				className: clsx("text-text-default-1", textAlignClass, descriptionClassName),
 				children: description
 			})]
 		}), /* @__PURE__ */ jsxs("div", {

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

@@ -1,5 +1,6 @@
 import { ButtonVariantProps } from '../../buttons/Button/button.cva';
 import { ModalProps } from '../Modal/Modal';
+import { TypographyPropsCva } from '../../text/Typography/Typography';
 interface ActionModalAction {
     label: string;
     onPress: () => void;
@@ -14,6 +15,10 @@ export interface ActionModalProps extends ModalProps {
     secondaryAction?: ActionModalAction;
     buttonSize?: ButtonVariantProps["size"];
     textAlign?: "left" | "center" | "right";
+    titleTypography?: TypographyPropsCva;
+    titleClassName?: string;
+    descriptionTypography?: TypographyPropsCva;
+    descriptionClassName?: string;
 }
-export declare const ActionModal: ({ heading, description, primaryAction, secondaryAction, buttonSize, textAlign, modalClassName, ...modalProps }: ActionModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionModal: ({ heading, description, primaryAction, secondaryAction, buttonSize, textAlign, modalClassName, titleTypography, titleClassName, descriptionTypography, descriptionClassName, ...modalProps }: ActionModalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { HTMLAttributes, Ref } from 'react';
 import { TypographyVariantProps } from './typography.cva';
 type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
-interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
+export interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {
 }
 export interface TypographyProps extends TypographyPropsCva, HTMLAttributes<HTMLElement> {
     ref?: Ref<HTMLHeadingElement>;

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

@@ -7,6 +7,7 @@ import { RadioGroupProps } from '../components/inputs/RadioGroup/RadioGroup';
 import { SelectBaseProps } from '../components/inputs/Selection/shared/SelectBase';
 import { SliderProps } from '../components/inputs/Slider/Slider';
 import { ToggleProps } from '../components/inputs/Toggle/Toggle';
+import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
 export declare namespace UIConfig {
     type DeepRequired<T> = {
         [P in keyof T]-?: T[P] extends object ? DeepRequired<T[P]> : Exclude<T[P], null | undefined>;
@@ -20,6 +21,7 @@ export declare namespace UIConfig {
         toggle: Pick<ToggleProps, "variant">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
         dateInput: Pick<DatePickerProps, "todayIcon" | "shouldForceLeadingZeros" | "disableManualEntry">;
+        actionModal: Pick<ActionModalProps, "titleTypography" | "descriptionTypography">;
     }
     interface ProviderProps {
         config?: Partial<Options>;

package/dist/uiConfig.context.js

@@ -36,6 +36,13 @@ let UIConfig;
 			todayIcon: false,
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false
+		},
+		actionModal: {
+			titleTypography: {
+				size: "title-5",
+				variant: "prominent-1"
+			},
+			descriptionTypography: { size: "body-3" }
 		}
 	};
 	const Context = createContext(DEFAULT_CONFIG);

package/package.json

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