@povio/ui 2.1.26 → 2.1.28

package/dist/Button.js

@@ -34,7 +34,7 @@ const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, li
 			children: /* @__PURE__ */ jsx(ButtonContent, {
 				isLoading,
 				icon: Icon,
-				text: children,
+				content: children,
 				ref: onContentRef,
 				hideText: props.iconOnly,
 				iconPosition,

package/dist/ButtonContent.js

@@ -4,7 +4,7 @@ import { Typography } from "./Typography.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { isValidElement } from "react";
-const ButtonContent = ({ ref, text, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography }) => {
+const ButtonContent = ({ ref, content, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography }) => {
 	let iconOrLoader = null;
 	if (isLoading) iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
 	else if (Icon) if (isValidElement(Icon)) iconOrLoader = Icon;
@@ -21,7 +21,7 @@ const ButtonContent = ({ ref, text, isLoading, className, icon: Icon, iconClassN
 			...typography,
 			className: clsx("hyphens-auto md:truncate", hideText && "sr-only"),
 			ref,
-			children: text
+			children: content
 		})]
 	});
 };

package/dist/Calendar2.js

@@ -10,6 +10,30 @@ import { useCalendar } from "@react-aria/calendar";
 const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply, onMonthYearChange,...props }) => {
 	const [toggleState, setToggleState] = useState(null);
 	const { calendarProps, prevButtonProps, nextButtonProps } = useCalendar(props.calendarProps, props.state);
+	const handleHeaderMonthNavigation = (months) => {
+		if (toggleState) return;
+		if (!onMonthYearChange) return;
+		const focusedDate = props.state.focusedDate;
+		if (months === -1) {
+			onMonthYearChange(focusedDate.subtract({ months: 1 }));
+			return;
+		}
+		onMonthYearChange(focusedDate.add({ months: 1 }));
+	};
+	const headerPrevButtonProps = {
+		...prevButtonProps,
+		onPress: (event) => {
+			prevButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(-1);
+		}
+	};
+	const headerNextButtonProps = {
+		...nextButtonProps,
+		onPress: (event) => {
+			nextButtonProps.onPress?.(event);
+			handleHeaderMonthNavigation(1);
+		}
+	};
 	const handleDateChange = () => {
 		if (includesTime && !datePickerState.value) setToggleState("time");
 		else onApply();
@@ -41,8 +65,8 @@ const Calendar = ({ className, includesTime, datePickerState, hourCycle, onApply
 		children: [/* @__PURE__ */ jsx(CalendarHeader, {
 			calendarState: props.state,
 			datePickerState,
-			prevButtonProps,
-			nextButtonProps,
+			prevButtonProps: headerPrevButtonProps,
+			nextButtonProps: headerNextButtonProps,
 			includesTime,
 			hourCycle,
 			toggleState,

package/dist/PillButton.js

@@ -23,7 +23,7 @@ const PillButton = ({ children, dismissable, toggle, icon, iconPosition,...props
 				className: props.className
 			}),
 			children: /* @__PURE__ */ jsx(ButtonContent, {
-				text: children,
+				content: children,
 				ref: onContentRef,
 				icon: dismissable ? CloseIcon : icon,
 				iconPosition: dismissable ? "right" : iconPosition,

package/dist/Segment.js

@@ -10,7 +10,7 @@ import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
-var SegmentBase = ({ className, items, error, onChange, value, defaultValue,...rest }) => {
+var SegmentBase = ({ className, items, error, onChange, value, defaultValue, segmentItemClassName,...rest }) => {
 	const props = {
 		...rest,
 		defaultSelectedKeys: defaultValue ? Array.isArray(defaultValue) ? defaultValue : [defaultValue] : void 0,
@@ -49,6 +49,7 @@ var SegmentBase = ({ className, items, error, onChange, value, defaultValue,...r
 			style: { gridTemplateColumns },
 			children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SegmentItem, {
 				...item,
+				className: clsx(item.className, segmentItemClassName),
 				isDisabled: item.isDisabled || props.isDisabled,
 				isSelected: state.selectedKeys.has(item.id),
 				onPress: () => {

package/dist/SegmentItem.js

@@ -3,14 +3,17 @@ import { Typography } from "./Typography.js";
 import { segmentItemCva } from "./segment.cva.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ToggleButton } from "react-aria-components";
-const SegmentItem = ({ label, icon, id, isDisabled,...props }) => {
+const SegmentItem = ({ label, icon, id, isDisabled, className,...props }) => {
 	const IconComponent = icon;
 	const iconOnly = !!(icon && !label);
 	const segmentItemCva$1 = UIStyle.useConfig()?.segment?.itemCva ?? segmentItemCva;
 	return /* @__PURE__ */ jsxs(ToggleButton, {
 		...props,
 		id,
-		className: segmentItemCva$1({ iconOnly }),
+		className: segmentItemCva$1({
+			iconOnly,
+			className
+		}),
 		isDisabled,
 		children: [icon && /* @__PURE__ */ jsx(IconComponent, { className: "size-6" }), label && /* @__PURE__ */ jsx(Typography, {
 			size: "label-2",

package/dist/components/buttons/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactElement, SVGProps } from 'react';
+import { FC, ReactElement, ReactNode, SVGProps } from 'react';
 import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 import { LinkNavigationProps } from '../../text/Link/Link';
@@ -17,7 +17,7 @@ type ToggleButtonProps = {
     isSelected?: boolean;
 } & AriaToggleButtonProps);
 export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<IconOnly> & ToggleButtonProps & {
-    children: string;
+    children: ReactNode;
     isLoading?: boolean;
     link?: LinkNavigationProps;
     noDisableWhenLoading?: boolean;

package/dist/components/buttons/PillButton/PillButton.d.ts

@@ -1,9 +1,9 @@
-import { FC, SVGProps } from 'react';
+import { FC, ReactNode, SVGProps } from 'react';
 import { ButtonProps as AriaButtonProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { PillButtonVariants } from './pillButton.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export interface PillButtonProps extends AriaButtonProps, Omit<AriaToggleButtonProps, keyof AriaButtonProps>, ButtonContentVariantProps, PillButtonVariants {
-    children: string;
+    children: ReactNode;
     dismissable?: boolean;
     toggle?: boolean;
     icon?: FC<SVGProps<SVGSVGElement>>;

package/dist/components/buttons/TextButton/TextButton.d.ts

@@ -1,10 +1,11 @@
+import { ReactNode } from 'react';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components';
 import { ButtonIconProps } from '../Button/Button';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 import { LinkNavigationProps } from '../../text/Link/Link';
 export type TextButtonProps = Omit<ButtonVariantProps, "variant"> & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<true | false> & {
-    children: string;
+    children: ReactNode;
     isLoading?: boolean;
     link?: LinkNavigationProps;
     disableTooltip?: boolean;

package/dist/components/buttons/ToggleButton/ToggleButton.d.ts

@@ -1,9 +1,10 @@
+import { ReactNode } from 'react';
 import { ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
 import { ButtonIconProps } from '../Button/Button';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 export type ToggleButtonProps = ButtonVariantProps & ButtonContentVariantProps & AriaToggleButtonProps & ButtonIconProps<true | false> & {
-    children: string;
+    children: ReactNode;
     disableTooltip?: boolean;
 };
 export declare const ToggleButton: ({ children, ...props }: ToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/shared/ButtonContent.d.ts

@@ -1,10 +1,10 @@
-import { FC, ReactElement, Ref, SVGProps } from 'react';
+import { FC, ReactElement, ReactNode, Ref, SVGProps } from 'react';
 import { ButtonVariantProps } from '../Button/button.cva';
 import { ButtonContentVariantProps } from './buttonContent.cva';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVariantProps, "size"> {
     ref?: Ref<HTMLHeadingElement>;
-    text: string;
+    content: ReactNode;
     isLoading?: boolean;
     className?: string;
     icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
@@ -12,5 +12,5 @@ interface ButtonContentProps extends ButtonContentVariantProps, Pick<ButtonVaria
     hideText?: boolean;
     typography?: TypographyVariantProps;
 }
-export declare const ButtonContent: ({ ref, text, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonContent: ({ ref, content, isLoading, className, icon: Icon, iconClassName, hideText, iconPosition, typography, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/overlays/Tooltip/TooltipEllipsis.d.ts

@@ -1,6 +1,6 @@
-import { JSX, Ref } from 'react';
+import { JSX, ReactNode, Ref } from 'react';
 export interface TooltipEllipsisProps {
-    text: string;
+    text: ReactNode;
     children: (ref: Ref<HTMLHeadingElement> | undefined) => JSX.Element;
     isDisabled?: boolean;
 }

package/dist/components/segment/SegmentItem.d.ts

@@ -1,2 +1,2 @@
 import { SegmentItem as SegmentItemProps } from './segment.types';
-export declare const SegmentItem: ({ label, icon, id, isDisabled, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentItem: ({ label, icon, id, isDisabled, className, ...props }: SegmentItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/segment.types.d.ts

@@ -30,6 +30,7 @@ export type SegmentProps<TKey extends Key = Key> = Omit<ToggleButtonGroupProps &
     ref?: Ref<HTMLElement>;
     items: SegmentItem<TKey>[];
     className?: string;
+    segmentItemClassName?: string;
     error?: string;
 } & GroupedSegmentProps<TKey>;
 export type ControlledSegmentProps<TFieldValues extends FieldValues, TKey extends Key = Key> = SegmentProps<TKey> & GroupedSegmentControlProps<TFieldValues, TKey>;

package/package.json

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