@povio/ui 2.2.0 → 2.2.2

package/README.md

@@ -4,7 +4,7 @@ UI Components that match Povio's Atlas Design System.
 
 ## Installation
 
-`yarn add @povio/ui`
+`pnpm add @povio/ui`
 
 ## Versioning
 
@@ -32,13 +32,20 @@ This is required for buttons to behave as expected. It is based on [Tailwind Upg
 In order for Tailwind to also compile classes for @povio/ui package, you need to include @source directive in Tailwind config.
 In your globals.css add (make sure path is correct):
 ```css
-@source "../../../../node_modules/@povio/ui/dist";
+@source "../../node_modules/@povio/ui/dist";
 ```
 
 ### React Aria
 
 We are using `react-aria-components` for our UI components including their plugin for Tailwind that makes classes for modifiers a bit shorter. As such, make sure to install and setup [`tailwindcss-react-aria-components`](https://www.npmjs.com/package/tailwindcss-react-aria-components)
 
+### Custom Tailwind plugin
+
+We also use a custom tailwind plugin to shorten some selectors inside the @povio/ui package. Install it by adding the following line to your `base.css`.
+```css
+@plugin "@povio/ui/tw-ui-plugin";
+```
+
 ### Translations
 
 We're using `i18next` for translations. Make sure the package versions match in your project. Out of sync major version might cause issues.

package/dist/{rolldown_runtime.js → _virtual/rolldown:runtime.js}

@@ -2,6 +2,15 @@ var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (all, symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
 		key = keys[i];
@@ -12,5 +21,11 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-export { __reExport };
+var __reExport = (target, mod, secondTarget, symbols) => {
+	if (symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+		secondTarget && __defProp(secondTarget, Symbol.toStringTag, { value: "Module" });
+	}
+	__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default");
+};
+export { __export, __reExport };

package/dist/{HighlightOn.js → assets/icons/HighlightOn.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-const HighlightOnIcon = ({ highlightColor,...props }) => /* @__PURE__ */ jsx("svg", {
+const HighlightOnIcon = ({ highlightColor, ...props }) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	fill: "none",
 	viewBox: "0 0 24 24",

package/dist/{TextColor.js → assets/icons/TextColor.js}

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-const TextColorIcon = ({ textColor,...props }) => /* @__PURE__ */ jsxs("svg", {
+const TextColorIcon = ({ textColor, ...props }) => /* @__PURE__ */ jsxs("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	fill: "none",
 	viewBox: "0 0 25 24",

package/dist/{Breadcrumbs.js → components/Breadcrumbs/Breadcrumbs.js}

@@ -1,21 +1,20 @@
-import { ChevronRightIcon } from "./ChevronRight.js";
+import { ChevronRightIcon } from "../../assets/icons/ChevronRight.js";
 import { breadcrumbChevron, breadcrumbIcon, breadcrumbItem, breadcrumbSegment, breadcrumbsCva } from "./breadcrumbs.cva.js";
-import { UIStyle } from "./uiStyle.context.js";
-import { MenuDesktop } from "./MenuDesktop.js";
-import { Typography } from "./Typography.js";
-import { Tooltip as Tooltip$1 } from "./Tooltip.js";
-import { LinkContext } from "./link.context.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
+import { MenuDesktop } from "../Menu/MenuDesktop.js";
+import { Typography } from "../text/Typography/Typography.js";
+import { Tooltip as Tooltip$1 } from "../overlays/Tooltip/Tooltip.js";
+import { LinkContext } from "../../config/link.context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useLayoutEffect, useRef, useState } from "react";
 import { Breadcrumb, Breadcrumbs, Button, Link } from "react-aria-components";
 const Breadcrumbs$1 = ({ items, className, onAction, iconOnly = false }) => {
-	const uiStyle = UIStyle.useConfig();
-	const breadcrumbsCva$1 = uiStyle?.breadcrumbs?.cva ?? breadcrumbsCva;
-	const breadcrumbItem$1 = uiStyle?.breadcrumbs?.itemCva ?? breadcrumbItem;
-	const breadcrumbSegmentCva = uiStyle?.breadcrumbs?.segmentCva ?? breadcrumbSegment;
-	const breadcrumbChevronCva = uiStyle?.breadcrumbs?.chevronCva ?? breadcrumbChevron;
-	const breadcrumbIconCva = uiStyle?.breadcrumbs?.iconCva ?? breadcrumbIcon;
+	const breadcrumbsCva$1 = UIStyle.useCva("breadcrumbs.cva", breadcrumbsCva);
+	const breadcrumbItem$1 = UIStyle.useCva("breadcrumbs.itemCva", breadcrumbItem);
+	const breadcrumbSegmentCva = UIStyle.useCva("breadcrumbs.segmentCva", breadcrumbSegment);
+	const breadcrumbChevronCva = UIStyle.useCva("breadcrumbs.chevronCva", breadcrumbChevron);
+	const breadcrumbIconCva = UIStyle.useCva("breadcrumbs.iconCva", breadcrumbIcon);
 	const containerRef = useRef(null);
 	const [isOverflowing, setIsOverflowing] = useState(items.length <= 2 ? false : null);
 	useLayoutEffect(() => {

package/dist/components/Menu/Menu.d.ts

@@ -9,7 +9,6 @@ export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue"
 export interface MenuProps {
     trigger: ReactElement;
     items: MenuItem[];
-    triggerOnHover?: boolean;
     closeDelay?: number;
     onAction?: (key: Key, e: any) => void;
 }

package/dist/{Menu2.js → components/Menu/Menu.js}

@@ -1,6 +1,6 @@
 import { MenuDesktop } from "./MenuDesktop.js";
 import { MenuMobile } from "./MenuMobile.js";
-import { useBreakpoint } from "./useBreakpoint.js";
+import { useBreakpoint } from "../../hooks/useBreakpoint.js";
 import { jsx } from "react/jsx-runtime";
 const Menu = (props) => {
 	if (useBreakpoint("md")) return /* @__PURE__ */ jsx(MenuDesktop, { ...props });

package/dist/components/Menu/MenuDesktop.d.ts

@@ -1,2 +1,2 @@
 import { MenuProps } from './Menu';
-export declare const MenuDesktop: ({ trigger, items, closeDelay, triggerOnHover, onAction, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuDesktop: ({ trigger, items, onAction, ...props }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuDesktop.js

@@ -0,0 +1,12 @@
+import { MenuPopover } from "./MenuPopover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuTrigger } from "react-aria-components";
+const MenuDesktop = ({ trigger, items, onAction, ...props }) => {
+	return /* @__PURE__ */ jsxs(MenuTrigger, { children: [trigger, /* @__PURE__ */ jsx(MenuPopover, {
+		...props,
+		offset: 0,
+		items,
+		onAction
+	})] });
+};
+export { MenuDesktop };

package/dist/{MenuItem.js → components/Menu/MenuItem.js}

@@ -1,12 +1,12 @@
-import { ArrowRightIcon } from "./ArrowRight.js";
+import { ArrowRightIcon } from "../../assets/icons/ArrowRight.js";
 import { menuItemCva } from "./menu.cva.js";
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { MenuItem } from "react-aria-components";
-const MenuItem$1 = ({ label, content, children, className,...item }) => {
+const MenuItem$1 = ({ label, content, children, className, ...item }) => {
 	const hasSubmenu = !!children && children?.length > 0;
-	const menuItemCva$1 = UIStyle.useConfig()?.menu?.itemCva ?? menuItemCva;
+	const menuItemCva$1 = UIStyle.useCva("menu.itemCva", menuItemCva);
 	return /* @__PURE__ */ jsxs(MenuItem, {
 		...item,
 		textValue: label,

package/dist/{MenuMobile.js → components/Menu/MenuMobile.js}

@@ -1,16 +1,15 @@
-import { ArrowLeftIcon } from "./ArrowLeft.js";
+import { ArrowLeftIcon } from "../../assets/icons/ArrowLeft.js";
 import { menuCva, menuItemCva } from "./menu.cva.js";
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { MenuItem as MenuItem$1 } from "./MenuItem.js";
-import { BottomSheet } from "./BottomSheet.js";
+import { BottomSheet } from "../overlays/BottomSheet/BottomSheet.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useRef, useState } from "react";
 import { Button, Menu } from "react-aria-components";
-const MenuMobile = ({ trigger, items, onAction,...props }) => {
-	const uiStyle = UIStyle.useConfig();
-	const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
-	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+const MenuMobile = ({ trigger, items, onAction, ...props }) => {
+	const menuItemCva$1 = UIStyle.useCva("menu.itemCva", menuItemCva);
+	const menuCva$1 = UIStyle.useCva("menu.cva", menuCva);
 	const activeItemRef = useRef(null);
 	const activeItemParentsRef = useRef([]);
 	const lastEventRef = useRef(null);

package/dist/{MenuPopover.js → components/Menu/MenuPopover.js}

@@ -1,21 +1,22 @@
 import { menuCva, menuPopoverCva, menuPopoverWrapperCva } from "./menu.cva.js";
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
 import { MenuItem as MenuItem$1 } from "./MenuItem.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
 import { useRef } from "react";
 import { Menu, Popover, SubmenuTrigger } from "react-aria-components";
-const MenuPopover = ({ items, className, onAction,...props }) => {
+const MenuPopover = ({ items, className, onAction, ...props }) => {
 	const lastEventRef = useRef(null);
-	const uiStyle = UIStyle.useConfig();
-	const menuPopoverCva$1 = uiStyle?.menu?.popoverCva ?? menuPopoverCva;
-	const menuPopoverWrapperCva$1 = uiStyle?.menu?.popoverWrapperCva ?? menuPopoverWrapperCva;
-	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+	const menuPopoverCva$1 = UIStyle.useCva("menu.popoverCva", menuPopoverCva);
+	const menuPopoverWrapperCva$1 = UIStyle.useCva("menu.popoverWrapperCva", menuPopoverWrapperCva);
+	const menuCva$1 = UIStyle.useCva("menu.cva", menuCva);
 	return /* @__PURE__ */ jsx(Popover, {
 		...props,
-		className: clsx(menuPopoverCva$1({ ...props }), className),
+		className: menuPopoverCva$1({
+			...props,
+			className
+		}),
 		children: /* @__PURE__ */ jsx("div", {
-			className: menuPopoverWrapperCva$1({ ...props }),
+			className: menuPopoverWrapperCva$1({}),
 			children: /* @__PURE__ */ jsx("div", {
 				onClickCapture: (e) => {
 					lastEventRef.current = e;

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

@@ -1,4 +1,4 @@
-import { FC, ReactElement, SVGProps } from 'react';
+import { FC, ReactElement, Ref, 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';
@@ -22,7 +22,7 @@ export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps &
     link?: LinkNavigationProps;
     noDisableWhenLoading?: boolean;
     iconClassName?: string;
-    disableTooltip?: boolean;
+    contentRef?: Ref<HTMLElement>;
 };
-export declare const Button: <IconOnly extends boolean = false>({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, disableTooltip, ...props }: ButtonProps<IconOnly>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: <IconOnly extends boolean = false>({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }: ButtonProps<IconOnly>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/Button/Button.js

@@ -0,0 +1,64 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { LinkContext } from "../../../config/link.context.js";
+import { ButtonContent } from "../shared/ButtonContent.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { button, buttonContent, buttonIconSize, buttonSize, buttonTypography } from "./button.cva.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, Link, ToggleButton } from "react-aria-components";
+const Button$1 = ({ icon: Icon, iconPosition, children, isLoading, className, link, iconClassName, noDisableWhenLoading, contentRef, ...props }) => {
+	const linkContext = LinkContext.useLinkContext();
+	const uiConfig = UIConfig.useConfig();
+	const { variant = uiConfig.button.variant, size = uiConfig.button.size } = props;
+	const buttonCva = UIStyle.useCva("button.cva", button);
+	const buttonSizeCva = UIStyle.useCva("button.sizeCva", buttonSize);
+	const buttonContentCva = UIStyle.useCva("button.contentCva", buttonContent);
+	const buttonIconSizeCva = UIStyle.useCva("button.iconSize", buttonIconSize);
+	const typographyMap = UIStyle.useMapper("button.typography", buttonTypography);
+	const Component = (() => {
+		if (link) return linkContext?.LinkComponent ?? Link;
+		if (props.toggle != null) return ToggleButton;
+		return Button;
+	})();
+	if (link && !link.to && link.href) link.to = link.href;
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		...link,
+		isDisabled: props.isDisabled || isLoading && !noDisableWhenLoading,
+		className: clsx(buttonCva({
+			...props,
+			variant,
+			size,
+			className
+		}), buttonSizeCva({
+			...props,
+			variant,
+			size
+		}), buttonContentCva({
+			...props,
+			variant,
+			size,
+			iconPosition: !Icon ? "none" : iconPosition
+		})),
+		children: /* @__PURE__ */ jsx(ButtonContent, {
+			ref: contentRef,
+			isLoading,
+			icon: Icon,
+			text: children,
+			hideText: props.iconOnly,
+			iconPosition,
+			iconClassName: buttonIconSizeCva({
+				...props,
+				variant,
+				size,
+				className: iconClassName
+			}),
+			typography: typographyMap({
+				...props,
+				variant,
+				size
+			})
+		})
+	});
+};
+export { Button$1 as Button };

package/dist/{button.cva.js → components/buttons/Button/button.cva.js}

@@ -1,5 +1,5 @@
-import { uiOutlineClass } from "./outline.clsx.js";
-import { compoundMapper } from "./compoundMapper.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
 const button = cva([
 	"group inline-flex items-center justify-center border border-solid",
@@ -584,19 +584,10 @@ const buttonContent = cva("", {
 			none: ""
 		},
 		iconOnly: {
-			true: "p-0",
+			true: "",
 			false: ""
 		}
 	},
-	compoundVariants: [{
-		iconOnly: false,
-		iconPosition: "left",
-		className: "pr-button-side-button-content"
-	}, {
-		iconOnly: false,
-		iconPosition: "right",
-		className: "pl-button-side-button-content"
-	}],
 	defaultVariants: {
 		size: "m",
 		iconPosition: "left",

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

@@ -8,4 +8,4 @@ export interface IconButtonProps extends ButtonVariantProps, Omit<AriaButtonProp
     link?: LinkNavigationProps;
     disableTooltip?: boolean;
 }
-export declare const IconButton: ({ label, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconButton: ({ label, disableTooltip, ...props }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/IconButton/IconButton.js

@@ -0,0 +1,17 @@
+import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { Button } from "../Button/Button.js";
+import { jsx } from "react/jsx-runtime";
+const IconButton = ({ label, disableTooltip, ...props }) => {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		text: label,
+		placement: "bottom",
+		hidden: !label || disableTooltip,
+		children: /* @__PURE__ */ jsx(Button, {
+			...props,
+			iconOnly: true,
+			width: "hug",
+			children: label
+		})
+	});
+};
+export { IconButton };

package/dist/{InlineIconButton.js → components/buttons/InlineIconButton/InlineIconButton.js}

@@ -1,6 +1,6 @@
-import { Button } from "./Button.js";
+import { Button } from "../Button/Button.js";
 import { jsx } from "react/jsx-runtime";
-const InlineIconButton = ({ label,...props }) => {
+const InlineIconButton = ({ label, ...props }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		iconOnly: true,

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

@@ -1,4 +1,4 @@
-import { FC, SVGProps } from 'react';
+import { FC, Ref, 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';
@@ -7,5 +7,6 @@ export interface PillButtonProps extends AriaButtonProps, Omit<AriaToggleButtonP
     dismissable?: boolean;
     toggle?: boolean;
     icon?: FC<SVGProps<SVGSVGElement>>;
+    contentRef?: Ref<HTMLElement>;
 }
-export declare const PillButton: ({ children, dismissable, toggle, icon, iconPosition, ...props }: PillButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PillButton: ({ children, dismissable, toggle, icon, iconPosition, contentRef, ...props }: PillButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/PillButton/PillButton.js

@@ -0,0 +1,32 @@
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { ButtonContent } from "../shared/ButtonContent.js";
+import { pillButton, pillButtonContent, pillButtonIconSize, pillButtonTypography } from "./pillButton.cva.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, ToggleButton } from "react-aria-components";
+const PillButton = ({ children, dismissable, toggle, icon, iconPosition, contentRef, ...props }) => {
+	const pillButtonCva = UIStyle.useCva("pillButton.cva", pillButton);
+	const pillButtonTypographyMap = UIStyle.useMapper("pillButton.typography", pillButtonTypography);
+	const Component = toggle ? ToggleButton : Button;
+	const getIconPosition = () => {
+		if (dismissable) return "right";
+		return icon ? iconPosition : "none";
+	};
+	return /* @__PURE__ */ jsx(Component, {
+		...props,
+		className: clsx(pillButtonCva({
+			...props,
+			className: props.className
+		}), pillButtonContent({ iconPosition: getIconPosition() })),
+		children: /* @__PURE__ */ jsx(ButtonContent, {
+			ref: contentRef,
+			text: children,
+			icon: dismissable ? CloseIcon : icon,
+			iconPosition: dismissable ? "right" : iconPosition,
+			iconClassName: pillButtonIconSize,
+			typography: pillButtonTypographyMap({ ...props })
+		})
+	});
+};
+export { PillButton };

package/dist/{pillButton.cva.js → components/buttons/PillButton/pillButton.cva.js}

@@ -1,5 +1,5 @@
-import { uiOutlineClass } from "./outline.clsx.js";
-import { compoundMapper } from "./compoundMapper.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
 const pillButton = cva([
@@ -240,8 +240,8 @@ const pillButton = cva([
 });
 const pillButtonContent = cva("", {
 	variants: { iconPosition: {
-		left: "gap-button-gap-icon-to-label pr-button-side-button-content",
-		right: "gap-button-gap-icon-to-label pl-button-side-button-content",
+		left: "gap-button-gap-icon-to-label",
+		right: "gap-button-gap-icon-to-label",
 		none: "gap-button-gap-icon-to-label"
 	} },
 	defaultVariants: { iconPosition: "left" }

package/dist/{SplitButton.js → components/buttons/SplitButton/SplitButton.js}

@@ -1,10 +1,10 @@
-import { ChevronDownIcon } from "./ChevronDown.js";
-import { Button } from "./Button.js";
-import { IconButton } from "./IconButton.js";
-import { Menu } from "./Menu2.js";
+import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+import { Menu } from "../../Menu/Menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-const SplitButton = ({ variant, color, width, size, label, labelRight, link, items, className, isLoading,...props }) => {
+const SplitButton = ({ variant, color, width, size, label, labelRight, link, items, className, isLoading, ...props }) => {
 	return /* @__PURE__ */ jsxs("div", {
 		className: "group/split flex items-center",
 		"data-split": "",

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

@@ -7,6 +7,5 @@ export type TextButtonProps = Omit<ButtonVariantProps, "variant"> & ButtonConten
     children: string;
     isLoading?: boolean;
     link?: LinkNavigationProps;
-    disableTooltip?: boolean;
 };
 export declare const TextButton: ({ children, ...props }: TextButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/{TextButton.js → components/buttons/TextButton/TextButton.js}

@@ -1,12 +1,11 @@
-import { Button } from "./Button.js";
+import { Button } from "../Button/Button.js";
 import { jsx } from "react/jsx-runtime";
-const TextButton = ({ children,...props }) => {
+const TextButton = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		variant: "text",
 		size: "none",
 		width: props.width ?? "hug",
-		disableTooltip: props.disableTooltip,
 		children
 	});
 };

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

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

package/dist/{ToggleButton.js → components/buttons/ToggleButton/ToggleButton.js}

@@ -1,12 +1,11 @@
-import { Button } from "./Button.js";
+import { Button } from "../Button/Button.js";
 import { jsx } from "react/jsx-runtime";
-const ToggleButton = ({ children,...props }) => {
+const ToggleButton = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx(Button, {
 		...props,
 		toggle: true,
 		variant: "outlined",
 		color: "primary",
-		disableTooltip: props.disableTooltip,
 		children
 	});
 };

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

@@ -1,16 +1,14 @@
 import { FC, ReactElement, 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>;
+interface ButtonContentProps extends ButtonContentVariantProps {
+    ref?: Ref<HTMLElement>;
     text: string;
     isLoading?: boolean;
-    className?: string;
     icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
     iconClassName?: string;
     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, text, isLoading, icon: Icon, iconClassName, hideText, iconPosition, typography: typographyOverrides, }: ButtonContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/shared/ButtonContent.js

@@ -0,0 +1,35 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { buttonContentLabel } from "./buttonContent.cva.js";
+import { Loader } from "../../status/Loader/Loader.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement } from "react";
+const ButtonContent = ({ ref, text, isLoading, icon: Icon, iconClassName, hideText, iconPosition = "left", typography: typographyOverrides }) => {
+	const typographyCva = UIStyle.useCva("typography.cva", typography);
+	let iconOrLoader = null;
+	if (isLoading) iconOrLoader = /* @__PURE__ */ jsx(Loader, { className: "shrink-0" });
+	else if (Icon) if (isValidElement(Icon)) iconOrLoader = Icon;
+	else iconOrLoader = /* @__PURE__ */ jsx(Icon, { className: clsx("shrink-0", iconClassName) });
+	const resolvedTypography = {
+		size: "label-2",
+		variant: "prominent-1",
+		...typographyOverrides
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		iconOrLoader && iconPosition === "left" && iconOrLoader,
+		/* @__PURE__ */ jsx("span", {
+			className: clsx(typographyCva({
+				...resolvedTypography,
+				sizeMobile: resolvedTypography.sizeMobile ?? resolvedTypography.size
+			}), buttonContentLabel({
+				iconPosition: iconOrLoader ? iconPosition : "none",
+				hideText: !!hideText
+			})),
+			ref,
+			children: text
+		}),
+		iconOrLoader && iconPosition === "right" && iconOrLoader
+	] });
+};
+export { ButtonContent };

package/dist/components/buttons/shared/buttonContent.cva.d.ts

@@ -2,5 +2,9 @@ import { VariantProps } from 'class-variance-authority';
 export declare const buttonContent: (props?: ({
     iconPosition?: "none" | "left" | "right" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonContentLabel: (props?: ({
+    iconPosition?: "none" | "left" | "right" | null | undefined;
+    hideText?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonContentVariantProps extends VariantProps<typeof buttonContent> {
 }

package/dist/components/buttons/shared/buttonContent.cva.js

@@ -0,0 +1,36 @@
+import { cva } from "class-variance-authority";
+cva("flex w-full items-center justify-center", {
+	variants: { iconPosition: {
+		left: "flex-row",
+		right: "flex-row-reverse",
+		none: "flex-row"
+	} },
+	defaultVariants: { iconPosition: "left" }
+});
+const buttonContentLabel = cva("hyphens-auto md:truncate", {
+	variants: {
+		iconPosition: {
+			left: "",
+			right: "",
+			none: ""
+		},
+		hideText: {
+			true: "sr-only",
+			false: ""
+		}
+	},
+	compoundVariants: [{
+		iconPosition: "left",
+		hideText: false,
+		className: "mr-button-side-button-content"
+	}, {
+		iconPosition: "right",
+		hideText: false,
+		className: "ml-button-side-button-content"
+	}],
+	defaultVariants: {
+		iconPosition: "none",
+		hideText: false
+	}
+});
+export { buttonContentLabel };