@povio/ui 0.0.4 → 0.0.6

package/dist/assets/locales/en/translation.json.js

@@ -0,0 +1,14 @@
+const ui = { "openAlt": "Open", "closeAlt": "Close", "clearAlt": "Clear", "loadingState": { "text": "Loading..." }, "select": { "closeAlt": "Close the menu", "selectAll": "Select all", "clearSelection": "Clear", "allOption": "All", "search": "Search", "clearSearch": "Clear search" }, "datePicker": { "today": "Today", "clear": "Clear", "save": "Save", "presets": { "thisWeek": "This week", "lastWeek": "Last week", "thisAndLastWeek": "This & Last week", "thisMonth": "This month", "thisAndLastMonth": "This & Last month", "thisYear": "This year", "lastYear": "Last year", "thisAndLastYear": "This & Last year", "soFar": "So far" }, "errors": { "endDateBeforeStart": "End date cannot be before start date" } }, "modal": { "closeBtn": "Close" }, "autocomplete": { "createNewBtn": "Create" }, "password": { "reveal": "Reveal password", "hide": "Hide password" }, "textEditor": { "textStyle": { "label": "Text style", "normal": "Normal text", "heading1": "Heading 1", "heading2": "Heading 2", "heading3": "Heading 3", "heading4": "Heading 4", "heading5": "Heading 5", "heading6": "Heading 6" }, "marks": { "bold": "Bold", "italic": "Italic", "underline": "Underline", "strikethrough": "Strikethrough" }, "textAlign": { "label": "Text align", "left": "Left", "center": "Center", "right": "Right", "justify": "Justify" }, "link": { "label": "Hyperlink", "apply": "Apply", "remove": "Remove", "urlLabel": "URL", "urlPlaceholder": "Enter the URL" } }, "tag": { "dismiss": "Dismiss" }, "clearInput": "Clear input", "pagination": { "nextBtn": "Next", "backBtn": "Previous", "firstBtn": "First", "lastBtn": "Last", "resultsPerPage": "Results per page" }, "confirmation": { "cancel": "Cancel", "confirm": "Confirm" }, "fileUpload": { "emptyText": "Upload file", "uploadText": "Drag & drop files here or", "browse": "Browse", "noFileUploaded": "No file uploaded", "upload": "Upload", "uploadFile": "Upload file", "or": "or", "removeFile": "Remove file", "cancel": "Cancel" }, "table": { "column": "Column", "show": "Show", "configureColumns": "Configure columns" } };
+const zodErrors = { "required": "Required", "invalid": "Invalid", "string": { "includes": 'Must include "{{text}}"', "startsWith": 'Must start with "{{text}}"', "endsWith": 'Must end with "{{text}}"', "constraint": "Invalid {{text}}", "contains": "Must contain exactly {{count}} character(s)", "containsAtLeast": "Must contain at least {{count}} character(s)", "containsOver": "Must contain over {{count}} character(s)", "containsAtMost": "Must contain at most {{count}} character(s)", "containsUnder": "Must contain under {{count}} character(s)" }, "array": { "contains": "Array must contain exactly {{count}} element(s)", "containsAtLeast": "Array must contain at least {{count}} element(s)", "containsMoreThan": "Array must contain more than {{count}} element(s)", "containsAtMost": "Array must contain at most {{count}} element(s)", "containsLessThan": "Array must contain less than {{count}} element(s)" }, "number": { "exact": "Number must be exactly equal to {{number}}", "greaterThanOrEqual": "Number must be greater than or equal to {{number}}", "greaterThan": "Number must be greater than {{number}}", "over": "Number must be over {{number}}", "lessThanOrEqual": "Number must be less than or equal to {{number}}", "lessThan": "Number must be less than {{number}}", "multipleOf": "Number must be a multiple of {{multipleOf}}" }, "date": { "invalid": "Invalid date", "exact": "Date must be exactly equal to {{date}}", "greaterThanOrEqual": "Date must be greater than or equal to {{date}}", "greaterThan": "Date must be greater than {{date}}", "smallerThanOrEqual": "Date must be smaller than or equal to {{date}}", "smallerThan": "Date must be smaller than {{date}}" } };
+const sharedErrors = { "dataValidation": "An error occurred while validating the data", "internalError": "An internal error occurred. This is most likely a bug on our end. Please try again later.", "networkError": "A network error occurred. Are you connected to the internet?", "canceledError": "The request was canceled.", "unknownError": "An unknown error occurred. Please try again later." };
+const translationEN = {
+  ui,
+  zodErrors,
+  sharedErrors
+};
+export {
+  translationEN as default,
+  sharedErrors,
+  ui,
+  zodErrors
+};

package/dist/assets/locales/sl/translation.json.js

@@ -0,0 +1,14 @@
+const ui = { "openAlt": "Odpri", "closeAlt": "Zapri", "clearAlt": "Sprazni", "loadingState": { "text": "Nalaganje..." }, "select": { "closeAlt": "Zapri meni", "selectAll": "Izberi vse", "clearSelection": "Sprazni", "allOption": "Vse", "search": "Išči", "clearSearch": "Sprazni iskanje" }, "datePicker": { "today": "Danes", "clear": "Sprazni", "save": "Shrani", "presets": { "thisWeek": "Ta teden", "lastWeek": "Prejšnji teden", "thisAndLastWeek": "Ta in prejšnji teden", "thisMonth": "Ta mesec", "thisAndLastMonth": "Ta in prejšnji mesec", "thisYear": "Ta leto", "lastYear": "Prejšnje leto", "thisAndLastYear": "Ta in prejšnje leto", "soFar": "Od začetka" }, "errors": { "endDateBeforeStart": "Datum konca ne more biti pred datumom začetka" } }, "modal": { "closeBtn": "Zapri" }, "autocomplete": { "createNewBtn": "Ustvari" }, "password": { "reveal": "Prikaži geslo", "hide": "Skrij geslo" }, "textEditor": { "textStyle": { "label": "Vrsta besedila", "normal": "Normalni tekst", "heading1": "Naslov 1", "heading2": "Naslov 2", "heading3": "Naslov 3", "heading4": "Naslov 4", "heading5": "Naslov 5", "heading6": "Naslov 6" }, "marks": { "bold": "Krepko", "italic": "Poševno", "underline": "Podčrtano", "strikethrough": "Prečrtano" }, "textAlign": { "label": "Poravnava besedila", "left": "Levo", "center": "Sredina", "right": "Desno", "justify": "Obojestransko" }, "link": { "label": "Povezava", "apply": "Ustvari", "remove": "Odstrani", "urlLabel": "URL", "urlPlaceholder": "Vnesite URL" } }, "pagination": { "nextBtn": "Naprej", "backBtn": "Nazaj", "firstBtn": "Prva", "lastBtn": "Zadnja", "resultsPerPage": "Rezultatov na stran" }, "confirmation": { "cancel": "Prekliči", "confirm": "Potrdi" }, "fileUpload": { "emptyText": "Naloži datoteko", "uploadText": "Povlecite datoteke sem ali", "browse": "Izberi", "noFileUploaded": "Ni datotek", "upload": "Naloži", "uploadFile": "Naloži datoteko", "or": "ali", "removeFile": "Odstrani datoteko", "cancel": "Prekliči" }, "table": { "column": "Stolpec", "show": "Prikaži", "configureColumns": "Nastavi stolpce" } };
+const zodErrors = { "required": "Obvezno", "invalid": "Neveljavno", "string": { "includes": 'Mora vključevati "{{text}}"', "startsWith": 'Se mora začeti z "{{text}}"', "endsWith": 'Se mora končati z "{{text}}"', "constraint": "Neveljaven {{text}}", "contains": "Mora vsebovati natančno {{count}} znak(ov)", "containsAtLeast": "Mora vsebovati vsaj {{count}} znak(ov)", "containsOver": "Mora vsebovati več kot {{count}} znak(ov)", "containsAtMost": "Mora vsebovati največ {{count}} znak(ov)", "containsUnder": "Mora vsebovati manj kot {{count}} znak(ov)" }, "array": { "contains": "Polje mora vsebovati natančno {{count}} element(ov)", "containsAtLeast": "Polje mora vsebovati vsaj {{count}} element(ov)", "containsMoreThan": "Polje mora vsebovati več kot {{count}} element(ov)", "containsAtMost": "Polje mora vsebovati največ {{count}} element(ov)", "containsLessThan": "Polje mora vsebovati manj kot {{count}} element(ov)" }, "number": { "exact": "Število mora biti natančno enako {{number}}", "greaterThanOrEqual": "Število mora biti večje ali enako {{number}}", "greaterThan": "Število mora biti večje od {{number}}", "over": "Število mora biti nad {{number}}", "lessThanOrEqual": "Število mora biti manjše ali enako {{number}}", "lessThan": "Število mora biti manjše od {{number}}", "multipleOf": "Število mora biti večkratnik števila {{multipleOf}}" }, "date": { "invalid": "Neveljaven datum", "exact": "Datum mora biti natančno enak {{date}}", "greaterThanOrEqual": "Datum mora biti večji ali enak {{date}}", "greaterThan": "Datum mora biti večji od {{date}}", "smallerThanOrEqual": "Datum mora biti manjši ali enak {{date}}", "smallerThan": "Datum mora biti manjši od {{date}}" } };
+const sharedErrors = { "dataValidation": "Pri preverjanju podatkov je prišlo do napake", "internalError": "Prišlo je do notranje napake. ", "networkError": "Prišlo je do napake v omrežju. ", "canceledError": "Zahteva je bila preklicana.", "unknownError": "Prišlo je do neznane napake. " };
+const translationSL = {
+  ui,
+  zodErrors,
+  sharedErrors
+};
+export {
+  translationSL as default,
+  sharedErrors,
+  ui,
+  zodErrors
+};

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

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+import { MenuItemProps } from 'react-aria-components';
+export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children"> {
+    label: string;
+    content?: string | ReactElement;
+    children?: MenuItem[];
+}
+export interface MenuProps {
+    trigger: ReactElement;
+    items: MenuItem[];
+    triggerOnHover?: boolean;
+    closeDelay?: number;
+}
+export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/Menu.js

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

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

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

package/{src/components/Menu/MenuDesktop.tsx → dist/components/Menu/MenuDesktop.js}

@@ -1,17 +1,13 @@
-import React, { useRef, useState } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef } from "react";
 import { useHover } from "react-aria";
-import { MenuTrigger as AriaMenuTrigger } from "react-aria-components";
-
-import type { MenuProps } from "#ui/components/Menu/Menu";
-import { MenuPopover } from "#ui/components/Menu/MenuPopover";
-
+import { MenuTrigger } from "react-aria-components";
+import { MenuPopover } from "./MenuPopover.js";
 const CLOSE_DELAY = 100;
-
-export const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false }: MenuProps) => {
+const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const timeoutRef = useRef(null);
   const isHoveringTrigger = useRef(false);
-
   const openMenu = () => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -19,7 +15,6 @@ export const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerO
     }
     setIsOpen(true);
   };
-
   const closeMenu = () => {
     if (isHoveringTrigger.current) {
       return;
@@ -29,7 +24,6 @@ export const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerO
       timeoutRef.current = null;
     }, closeDelay);
   };
-
   const { hoverProps } = useHover({
     isDisabled: !triggerOnHover,
     onHoverChange: (isHovering) => {
@@ -40,29 +34,35 @@ export const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerO
         isHoveringTrigger.current = false;
         closeMenu();
       }
-    },
+    }
   });
-
   let triggerComponent = trigger;
   if (triggerOnHover) {
     triggerComponent = React.cloneElement(trigger, hoverProps);
   }
-
-  return (
-    <AriaMenuTrigger
-      isOpen={triggerOnHover ? isOpen : undefined}
-      onOpenChange={setIsOpen}
-    >
-      {triggerComponent}
-      <MenuPopover
-        offset={0}
-        className="pt-2"
-        items={items}
-        isOpen={triggerOnHover ? isOpen : undefined}
-        isNonModal={triggerOnHover}
-        onMouseEnter={triggerOnHover ? openMenu : undefined}
-        onMouseLeave={triggerOnHover ? closeMenu : undefined}
-      />
-    </AriaMenuTrigger>
+  return /* @__PURE__ */ jsxs(
+    MenuTrigger,
+    {
+      isOpen: triggerOnHover ? isOpen : void 0,
+      onOpenChange: setIsOpen,
+      children: [
+        triggerComponent,
+        /* @__PURE__ */ jsx(
+          MenuPopover,
+          {
+            offset: 0,
+            className: "pt-2",
+            items,
+            isOpen: triggerOnHover ? isOpen : void 0,
+            isNonModal: triggerOnHover,
+            onMouseEnter: triggerOnHover ? openMenu : void 0,
+            onMouseLeave: triggerOnHover ? closeMenu : void 0
+          }
+        )
+      ]
+    }
   );
 };
+export {
+  MenuDesktop
+};

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

@@ -0,0 +1,5 @@
+import { MenuItem as MenuItemType } from '#ui/components/Menu/Menu';
+type MenuListItemProps = MenuItemType;
+export declare const MenuItem: ({ label, content, children, ...item }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const menuItemClass: string;
+export {};

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

@@ -1,33 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { MenuItem as AriaMenuItem } from "react-aria-components";
-
-import { ArrowRightIcon } from "#ui/assets/icons/ArrowRight";
-import type { MenuItem as MenuItemType } from "#ui/components/Menu/Menu";
-
-type MenuListItemProps = MenuItemType;
-
-export const MenuItem = ({ label, content, children, ...item }: MenuListItemProps) => {
+import { MenuItem as MenuItem$1 } from "react-aria-components";
+import { ArrowRightIcon } from "../../assets/icons/ArrowRight.js";
+const MenuItem = ({ label, content, children, ...item }) => {
   const hasSubmenu = !!children && children?.length > 0;
-
-  return (
-    <AriaMenuItem
-      {...item}
-      textValue={label}
-      aria-label={label}
-      className={clsx(menuItemClass, item.className)}
-    >
-      {content ?? label}
-      {hasSubmenu && <ArrowRightIcon className="size-6" />}
-    </AriaMenuItem>
+  return /* @__PURE__ */ jsxs(
+    MenuItem$1,
+    {
+      ...item,
+      textValue: label,
+      "aria-label": label,
+      className: clsx(menuItemClass, item.className),
+      children: [
+        content ?? label,
+        hasSubmenu && /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-6" })
+      ]
+    }
   );
 };
-
-export const menuItemClass = clsx(
+const menuItemClass = clsx(
   "flex cursor-pointer items-center justify-between gap-list-gap-checkbox-to-label px-list-side-item py-list-height-item",
   "border-b border-b-elevation-outline-default-1 outline-none last:border-b-0",
   "bg-elevation-fill-default-1 text-interactive-text-secondary-idle",
   "disabled:cursor-default disabled:text-interactive-text-secondary-disabled",
   "hover:bg-elevation-fill-default-1 hover:text-interactive-text-secondary-hover",
   "open:bg-interactive-contained-primary-idle open:text-interactive-text-secondary-idle-inverted",
-  "focus-visible:bg-elevation-fill-default-1 focus-visible:text-interactive-text-secondary-hover",
+  "focus-visible:bg-elevation-fill-default-1 focus-visible:text-interactive-text-secondary-hover"
 );
+export {
+  MenuItem,
+  menuItemClass
+};

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

@@ -0,0 +1,2 @@
+import { MenuProps } from '#ui/components/Menu/Menu';
+export declare const MenuMobile: ({ trigger, items }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuMobile.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useRef, useState } from "react";
+import { Button, Menu } from "react-aria-components";
+import { ArrowLeftIcon } from "../../assets/icons/ArrowLeft.js";
+import { menuItemClass, MenuItem } from "./MenuItem.js";
+import { BottomSheet } from "../overlays/BottomSheet/BottomSheet.js";
+const MenuMobile = ({ trigger, items }) => {
+  const activeItemRef = useRef(null);
+  const activeItemParentsRef = useRef([]);
+  const [isOpen, setIsOpen] = useState(false);
+  const [activeItem, setActiveItem] = useState(null);
+  const onAction = (item) => {
+    if (!item.children) {
+      activeItemRef.current = null;
+      activeItemParentsRef.current = [];
+      setActiveItem(null);
+      setIsOpen(false);
+      return;
+    }
+    if (activeItemRef.current) {
+      activeItemParentsRef.current.push(activeItemRef.current);
+    }
+    activeItemRef.current = item;
+    setActiveItem(activeItemRef.current);
+  };
+  const onClose = () => {
+    if (activeItemRef.current) {
+      return;
+    }
+    setIsOpen(false);
+  };
+  const onBack = () => {
+    activeItemRef.current = activeItemParentsRef.current.pop() ?? null;
+    setActiveItem(activeItemRef.current);
+  };
+  return /* @__PURE__ */ jsx(
+    BottomSheet,
+    {
+      isOpen,
+      onOpenChange: setIsOpen,
+      trigger,
+      isDismissable: true,
+      children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+        activeItem && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: clsx(menuItemClass, "!justify-start w-full font-labels-default"),
+            onPress: onBack,
+            children: [
+              /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-6" }),
+              activeItem.label
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Menu,
+          {
+            autoFocus: true,
+            onClose,
+            className: "outline-none",
+            children: (activeItem?.children ?? items).map((item, index) => /* @__PURE__ */ jsx(
+              MenuItem,
+              {
+                ...item,
+                onAction: () => onAction(item)
+              },
+              index
+            ))
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  MenuMobile
+};

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

@@ -0,0 +1,5 @@
+import { PopoverProps as AriaPopoverProps } from 'react-aria-components';
+import { MenuProps } from '#ui/components/Menu/Menu';
+export interface MenuPopoverProps extends Pick<MenuProps, "items">, AriaPopoverProps {
+}
+export declare const MenuPopover: ({ items, ...props }: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuPopover.js

@@ -0,0 +1,38 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Popover, Menu, SubmenuTrigger } from "react-aria-components";
+import { MenuItem } from "./MenuItem.js";
+const MenuPopover = ({ items, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      ...props,
+      className: clsx("outline-none", props.className),
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none", children: /* @__PURE__ */ jsx(Menu, { children: items.map(
+        (item, index) => !item.children || item.children.length === 0 ? /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            ...item
+          },
+          index
+        ) : (
+          // oxlint-disable-next-line react/no-array-index-key
+          /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [
+            /* @__PURE__ */ jsx(MenuItem, { ...item }),
+            /* @__PURE__ */ jsx(
+              MenuPopover,
+              {
+                offset: 0,
+                className: "pl-2",
+                items: item.children
+              }
+            )
+          ] }, index)
+        )
+      ) }) })
+    }
+  );
+};
+export {
+  MenuPopover
+};

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

@@ -0,0 +1,27 @@
+import { FC, ReactElement, SVGProps } from 'react';
+import { ButtonProps as AriaButtonProps, LinkProps as AriaLinkProps, ToggleButtonProps as AriaToggleButtonProps } from 'react-aria-components';
+import { ButtonContentVariantProps } from '#ui/components/buttons/shared/buttonContent.cva';
+import { ButtonVariantProps } from './button.cva';
+export type ButtonIconProps<IconOnly extends boolean = false> = {
+    iconOnly?: IconOnly;
+} & (IconOnly extends true ? {
+    icon: FC<SVGProps<SVGSVGElement>> | ReactElement;
+} : {
+    icon?: FC<SVGProps<SVGSVGElement>> | ReactElement;
+});
+type ToggleButtonProps = {
+    toggle?: false;
+} | ({
+    toggle: true;
+    isSelected?: boolean;
+} & AriaToggleButtonProps);
+export type ButtonProps<IconOnly extends boolean = false> = ButtonVariantProps & ButtonContentVariantProps & AriaButtonProps & ButtonIconProps<IconOnly> & ToggleButtonProps & {
+    children: string;
+    isLoading?: boolean;
+    link?: AriaLinkProps;
+    noDisableWhenLoading?: boolean;
+    iconClassName?: string;
+    disableTooltip?: boolean;
+};
+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 {};

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

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

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

@@ -0,0 +1,30 @@
+import { VariantProps } from 'class-variance-authority';
+import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+export declare const button: (props?: ({
+    width?: "fill" | "hug" | null | undefined;
+    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | "dual" | null | undefined;
+    variant?: "contained" | "outlined" | "subtle" | "text" | "ghost" | null | undefined;
+    inverted?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonVariantProps extends VariantProps<typeof button> {
+}
+export declare const buttonSize: (props?: ({
+    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonContent: (props?: ({
+    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+    iconPosition?: "none" | "left" | "right" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonIconSize: (props?: ({
+    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const buttonTypography: (props: {
+    color?: "primary" | "secondary" | "success" | "warning" | "error" | "dual" | null | undefined;
+    width?: "fill" | "hug" | null | undefined;
+    size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;
+    variant?: "contained" | "outlined" | "subtle" | "text" | "ghost" | null | undefined;
+    inverted?: boolean | null | undefined;
+}) => TypographyVariantProps | undefined;