@povio/ui 0.0.8 → 0.0.9

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/{src → dist}/components/Menu/MenuPopover.d.ts

@@ -1,5 +1,5 @@
 import { PopoverProps as AriaPopoverProps } from 'react-aria-components';
-import { MenuProps } from '#ui/components/Menu/Menu';
+import { MenuProps } from './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, { className: "outline-none", 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/{src → dist}/components/buttons/Button/Button.d.ts

@@ -1,6 +1,6 @@
 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 { ButtonContentVariantProps } from '../shared/buttonContent.cva';
 import { ButtonVariantProps } from './button.cva';
 export type ButtonIconProps<IconOnly extends boolean = false> = {
     iconOnly?: IconOnly;

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/{src → dist}/components/buttons/Button/button.cva.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const button: (props?: ({
     width?: "fill" | "hug" | null | undefined;
     size?: "xxs" | "xs" | "s" | "m" | "l" | null | undefined;