@povio/ui 3.4.0-rc.15 → 3.4.0-rc.17

package/dist/components/{buttons/ToggleButton/ToggleButton.js → toggle-button.js}

@@ -1,8 +1,8 @@
-import { Button } from "../Button/Button.js";
+import { Button } from "./buttons/Button/Button.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/buttons/ToggleButton/ToggleButton.tsx
-var ToggleButton = (t0) => {
+const ToggleButton = (t0) => {
 	const $ = c(6);
 	let children;
 	let props;

package/dist/components/toggle.d.ts

@@ -0,0 +1,19 @@
+import { FieldValues } from "./inputs/shared/form.binding.js";
+import { FormFieldErrorProps } from "./inputs/FormField/FormFieldError.js";
+import { ControlProps } from "./inputs/shared/form.types.js";
+import { ToggleVariantProps } from "./inputs/Toggle/toggle.cva.js";
+import { Ref } from "react";
+import { SwitchProps } from "react-aria-components";
+//#region src/components/inputs/Toggle/Toggle.d.ts
+interface ToggleBaseProps extends FormFieldErrorProps, ToggleVariantProps, Omit<SwitchProps, "className"> {
+  ref?: Ref<HTMLLabelElement>;
+  children?: string;
+  isDirty?: boolean;
+  isRequired?: boolean;
+}
+type ToggleProps = ToggleBaseProps;
+type ControlledToggleProps<TFieldValues extends FieldValues> = ControlProps<ToggleProps, TFieldValues, "isSelected">;
+declare const ToggleComponent: <TFieldValues extends FieldValues>(props: ControlledToggleProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
+declare const Toggle: typeof ToggleComponent;
+//#endregion
+export { ControlledToggleProps, Toggle, ToggleProps };

package/dist/components/toggle.js

@@ -0,0 +1,74 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { UIConfig } from "../config/uiConfig.context.js";
+import { FieldController } from "./inputs/shared/form.binding.js";
+import { FormFieldError } from "./inputs/FormField/FormFieldError.js";
+import { CheckContent } from "./inputs/shared/CheckContent.js";
+import { toggleContentClassName, toggleDefinition, toggleTypography } from "./inputs/Toggle/toggle.cva.js";
+import { clsx } from "clsx";
+import { memo } from "react";
+import { Switch } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+//#region src/components/inputs/Toggle/Toggle.tsx
+const ToggleBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const toggleCva = UIOverrides.useCva("toggle.cva", toggleDefinition);
+	const toggleTypographyMap = UIOverrides.useMapper("toggle.typography", toggleTypography);
+	const toggleContentClassNameMap = UIOverrides.useMapper("toggle.contentClassName", toggleContentClassName);
+	const { className, children, isDisabled, error, variant: variantProp, onChange, onBlur, ...rest } = props;
+	const variant = variantProp ?? ui.toggle.variant;
+	const formFieldErrorProps = {
+		error,
+		isDisabled
+	};
+	const handleChange = (isSelected) => {
+		onChange?.(isSelected);
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Switch, {
+		...rest,
+		"data-is-dirty": props.isDirty || void 0,
+		"data-is-required": props.isRequired || void 0,
+		isDisabled,
+		onChange: handleChange,
+		onBlur,
+		className: clsx("group flex items-center gap-2", !isDisabled && "cursor-pointer", className),
+		children: [/* @__PURE__ */ jsx("div", { className: toggleCva({
+			variant,
+			...rest
+		}) }), /* @__PURE__ */ jsx(CheckContent, {
+			typography: toggleTypographyMap({
+				variant,
+				...rest
+			}),
+			contentClassName: toggleContentClassNameMap({
+				variant,
+				...rest
+			}),
+			children
+		})]
+	}), /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })] });
+};
+const ToggleComponent = (props) => {
+	if ("field" in props && props.field) {
+		const { field, ref, ...innerProps } = props;
+		return /* @__PURE__ */ jsx(FieldController, {
+			control: field.form,
+			name: field.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(ToggleBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				isSelected: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				name: field.name,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(ToggleBase, { ...props });
+};
+const Toggle = memo(ToggleComponent);
+//#endregion
+export { Toggle };

package/dist/components/tooltip-ellipsis.d.ts

@@ -0,0 +1,11 @@
+import { JSX, ReactNode, Ref } from "react";
+//#region src/components/overlays/Tooltip/TooltipEllipsis.d.ts
+interface TooltipEllipsisProps {
+  text: ReactNode;
+  children: (ref: Ref<HTMLElement> | undefined) => JSX.Element;
+  isDisabled?: boolean;
+  isNonInteractiveTrigger?: boolean;
+}
+declare const TooltipEllipsis: ({ text, children, isDisabled, isNonInteractiveTrigger }: TooltipEllipsisProps) => JSX.Element;
+//#endregion
+export { TooltipEllipsis, TooltipEllipsisProps };

package/dist/components/{overlays/Tooltip/TooltipEllipsis.js → tooltip-ellipsis.js}

@@ -1,9 +1,9 @@
-import { Tooltip } from "./Tooltip.js";
-import { useState } from "react";
+import { Tooltip } from "./tooltip.js";
 import { c } from "react/compiler-runtime";
+import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/overlays/Tooltip/TooltipEllipsis.tsx
-var TooltipEllipsis = (t0) => {
+const TooltipEllipsis = (t0) => {
 	const $ = c(8);
 	const { text, children, isDisabled, isNonInteractiveTrigger } = t0;
 	const [isEllipsisActive, setIsEllipsisActive] = useState(false);

package/dist/components/tooltip.d.ts

@@ -0,0 +1,16 @@
+import { TooltipVariantProps } from "./overlays/Tooltip/tooltip.cva.js";
+import { PropsWithChildren, ReactNode } from "react";
+import { TooltipProps as TooltipProps$1 } from "react-aria-components";
+//#region src/components/overlays/Tooltip/Tooltip.d.ts
+interface TooltipProps extends PropsWithChildren<TooltipProps$1>, TooltipVariantProps {
+  text: ReactNode;
+  isDisabled?: boolean;
+  delay?: number;
+  closeDelay?: number;
+  isNonInteractiveTrigger?: boolean;
+  triggerClassName?: string;
+  triggerTabIndex?: number;
+}
+declare const Tooltip: ({ children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Tooltip, TooltipProps };

package/dist/components/{overlays/Tooltip/Tooltip.js → tooltip.js}

@@ -1,15 +1,15 @@
-import { UIOverrides } from "../../../config/uiOverrides.context.js";
-import { tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition } from "./tooltip.cva.js";
-import { Typography } from "../../text/Typography/Typography.js";
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { tooltipDefinition, tooltipPointerHorizontalDefinition, tooltipPointerVerticalDefinition, tooltipTextDefinition } from "./overlays/Tooltip/tooltip.cva.js";
+import { Typography } from "./typography.js";
 import { Triangle, TriangleRight } from "lucide-react";
+import { c } from "react/compiler-runtime";
 import { clsx } from "clsx";
 import { Fragment, useRef } from "react";
-import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
-import { c } from "react/compiler-runtime";
+import { OverlayArrow, Tooltip as Tooltip$1, TooltipTrigger } from "react-aria-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useFocusable } from "react-aria";
 //#region src/components/overlays/Tooltip/Tooltip.tsx
-var CustomTrigger = (t0) => {
+const CustomTrigger = (t0) => {
 	const $ = c(8);
 	const { children, className, tabIndex } = t0;
 	const ref = useRef(null);
@@ -43,7 +43,7 @@ var CustomTrigger = (t0) => {
 	} else t4 = $[7];
 	return t4;
 };
-var Tooltip$1 = (t0) => {
+const Tooltip = (t0) => {
 	const $ = c(38);
 	const { children, text, isDisabled, delay, closeDelay, color, isNonInteractiveTrigger, triggerClassName, triggerTabIndex, ...tooltipProps } = t0;
 	const tooltipCva = UIOverrides.useCva("tooltip.cva", tooltipDefinition);
@@ -68,7 +68,7 @@ var Tooltip$1 = (t0) => {
 		$[4] = triggerTabIndex;
 		$[5] = t3;
 	} else t3 = $[5];
-	const T1 = Tooltip;
+	const T1 = Tooltip$1;
 	const t4 = tooltipCva({
 		color,
 		className: tooltipProps.className
@@ -167,4 +167,4 @@ var Tooltip$1 = (t0) => {
 	return t13;
 };
 //#endregion
-export { Tooltip$1 as Tooltip };
+export { Tooltip };

package/dist/components/typography.d.ts

@@ -0,0 +1,12 @@
+import { TypographyVariantProps } from "./text/Typography/typography.cva.js";
+import { HTMLAttributes, Ref } from "react";
+//#region src/components/text/Typography/Typography.d.ts
+type TypographyTag = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div";
+interface TypographyPropsCva extends Omit<TypographyVariantProps, "size">, Required<Pick<TypographyVariantProps, "size">> {}
+interface TypographyProps extends TypographyPropsCva, HTMLAttributes<HTMLElement> {
+  ref?: Ref<HTMLHeadingElement>;
+  as?: TypographyTag;
+}
+declare const Typography: ({ as, className, ...props }: TypographyProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Typography, TypographyProps, TypographyPropsCva };

package/dist/components/typography.js

@@ -0,0 +1,31 @@
+import { UIOverrides } from "../config/uiOverrides.context.js";
+import { typographyDefinition } from "./text/Typography/typography.cva.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/text/Typography/Typography.tsx
+const Typography = (t0) => {
+	const $ = c(4);
+	const { as: t1, className, ...props } = t0;
+	const as = t1 === void 0 ? "p" : t1;
+	const typographyCva = UIOverrides.useCva("typography.cva", typographyDefinition);
+	const Tag = as;
+	const t2 = typographyCva({
+		...props,
+		sizeMobile: props.sizeMobile ?? props.size,
+		className
+	});
+	let t3;
+	if ($[0] !== Tag || $[1] !== props || $[2] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Tag, {
+			className: t2,
+			...props
+		});
+		$[0] = Tag;
+		$[1] = props;
+		$[2] = t2;
+		$[3] = t3;
+	} else t3 = $[3];
+	return t3;
+};
+//#endregion
+export { Typography };

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

@@ -1,20 +1,23 @@
-import { PropsWithChildren } from 'react';
-import { ActionModalProps } from '../components/overlays/ActionModal/ActionModal';
-export declare namespace Confirmation {
-    type ContextState = Pick<ActionModalProps, "heading" | "description" | "buttonSize" | "textAlign" | "primaryAction" | "secondaryAction" | "modalClassName"> & {
-        isOpen: boolean;
-    };
-    type ConfirmationInput = Pick<ContextState, "heading" | "description" | "buttonSize" | "textAlign" | "modalClassName"> & {
-        cancelLabel?: NonNullable<ContextState["secondaryAction"]>["label"];
-        confirmLabel?: NonNullable<ContextState["primaryAction"]>["label"];
-        cancelVariant?: NonNullable<ContextState["secondaryAction"]>["variant"];
-        cancelColor?: NonNullable<ContextState["secondaryAction"]>["color"];
-        confirmVariant?: NonNullable<ContextState["primaryAction"]>["variant"];
-        confirmColor?: NonNullable<ContextState["primaryAction"]>["color"];
-    };
-    interface Options {
-        confirm: (input: ConfirmationInput) => Promise<boolean>;
-    }
-    const Provider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
-    const useConfirmation: () => Options;
+import { ActionModalProps } from "../components/action-modal.js";
+import { PropsWithChildren } from "react";
+//#region src/config/confirmation.context.d.ts
+declare namespace Confirmation {
+  type ContextState = Pick<ActionModalProps, "heading" | "description" | "buttonSize" | "textAlign" | "primaryAction" | "secondaryAction" | "modalClassName"> & {
+    isOpen: boolean;
+  };
+  type ConfirmationInput = Pick<ContextState, "heading" | "description" | "buttonSize" | "textAlign" | "modalClassName"> & {
+    cancelLabel?: NonNullable<ContextState["secondaryAction"]>["label"];
+    confirmLabel?: NonNullable<ContextState["primaryAction"]>["label"];
+    cancelVariant?: NonNullable<ContextState["secondaryAction"]>["variant"];
+    cancelColor?: NonNullable<ContextState["secondaryAction"]>["color"];
+    confirmVariant?: NonNullable<ContextState["primaryAction"]>["variant"];
+    confirmColor?: NonNullable<ContextState["primaryAction"]>["color"];
+  };
+  interface Options {
+    confirm: (input: ConfirmationInput) => Promise<boolean>;
+  }
+  const Provider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+  const useConfirmation: () => Options;
 }
+//#endregion
+export { Confirmation };

package/dist/config/confirmation.context.js

@@ -1,10 +1,10 @@
 import "./i18n.js";
-import { ActionModal } from "../components/overlays/ActionModal/ActionModal.js";
+import { ActionModal } from "../components/action-modal.js";
 import { createContext, use, useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 //#region src/config/confirmation.context.tsx
-var Confirmation;
+let Confirmation;
 (function(_Confirmation) {
 	const DEFAULT_STATE = {
 		heading: "",
@@ -24,7 +24,7 @@ var Confirmation;
 		const [state, setState] = useState(DEFAULT_STATE);
 		const { t } = useTranslation("ui");
 		const onCancel = () => setState(DEFAULT_STATE);
-		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($) => $.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
+		const confirm = useCallback(async ({ heading, description, buttonSize, textAlign, modalClassName, cancelLabel = t(($) => $.ui.confirmation.cancel), confirmLabel = t(($_0) => $_0.ui.confirmation.confirm), confirmVariant, confirmColor, cancelVariant, cancelColor }) => {
 			return new Promise((resolve) => {
 				setState({
 					heading,