@povio/ui 2.1.9 → 2.1.11

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

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { MenuItemProps } from 'react-aria-components';
-export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children"> {
+import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from './menu.cva';
+export interface MenuItem extends Omit<MenuItemProps, "aria-label" | "textValue" | "children">, MenuItemVariantProps, MenuCvaVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps {
     label: string;
     content?: string | ReactElement;
     children?: MenuItem[];

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

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

package/dist/components/Menu/MenuDesktop.js

@@ -4,7 +4,13 @@ import { useHover } from "react-aria";
 import { MenuTrigger } from "react-aria-components";
 import { MenuPopover } from "./MenuPopover.js";
 const CLOSE_DELAY = 100;
-const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false }) => {
+const MenuDesktop = ({
+  trigger,
+  items,
+  closeDelay = CLOSE_DELAY,
+  triggerOnHover = false,
+  ...props
+}) => {
   const [isOpen, setIsOpen] = useState(false);
   const timeoutRef = useRef(null);
   const isHoveringTrigger = useRef(false);
@@ -50,8 +56,8 @@ const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover
         /* @__PURE__ */ jsx(
           MenuPopover,
           {
+            ...props,
             offset: 0,
-            className: "pt-2",
             items,
             isOpen: triggerOnHover ? isOpen : void 0,
             isNonModal: triggerOnHover,

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

@@ -1,5 +1,4 @@
 import { MenuItem as MenuItemType } from './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 declare const MenuItem: ({ label, content, children, className, ...item }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Menu/MenuItem.js

@@ -2,15 +2,19 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { MenuItem as MenuItem$1 } from "react-aria-components";
 import { ArrowRightIcon } from "../../assets/icons/ArrowRight.js";
-const MenuItem = ({ label, content, children, ...item }) => {
+import { menuItemCva } from "./menu.cva.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
+const MenuItem = ({ label, content, children, className, ...item }) => {
   const hasSubmenu = !!children && children?.length > 0;
+  const uiStyle = UIStyle.useConfig();
+  const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
   return /* @__PURE__ */ jsxs(
     MenuItem$1,
     {
       ...item,
       textValue: label,
       "aria-label": label,
-      className: clsx(menuItemClass, item.className),
+      className: clsx(menuItemCva$1({ ...item, isMobile: false }), className),
       children: [
         content ?? label,
         hasSubmenu && /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-6" })
@@ -18,17 +22,6 @@ const MenuItem = ({ label, content, children, ...item }) => {
     }
   );
 };
-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-contained-primary-on-idle",
-  "open:hover:bg-interactive-contained-primary-hover open:hover:text-interactive-contained-primary-on-hover",
-  "focus-visible:bg-elevation-fill-default-1 focus-visible:text-interactive-text-secondary-hover"
-);
 export {
-  MenuItem,
-  menuItemClass
+  MenuItem
 };

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

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

package/dist/components/Menu/MenuMobile.js

@@ -3,9 +3,14 @@ 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 { MenuItem } from "./MenuItem.js";
+import { menuItemCva, menuCva } from "./menu.cva.js";
 import { BottomSheet } from "../overlays/BottomSheet/BottomSheet.js";
-const MenuMobile = ({ trigger, items }) => {
+import { UIStyle } from "../../config/uiStyle.context.js";
+const MenuMobile = ({ trigger, items, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
+  const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
   const activeItemRef = useRef(null);
   const activeItemParentsRef = useRef([]);
   const [isOpen, setIsOpen] = useState(false);
@@ -45,7 +50,7 @@ const MenuMobile = ({ trigger, items }) => {
         activeItem && /* @__PURE__ */ jsxs(
           Button,
           {
-            className: clsx(menuItemClass, "!justify-start w-full font-labels-default"),
+            className: clsx(menuItemCva$1({ ...props, isMobile: true })),
             onPress: onBack,
             children: [
               /* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-6" }),
@@ -58,7 +63,7 @@ const MenuMobile = ({ trigger, items }) => {
           {
             autoFocus: true,
             onClose,
-            className: "outline-none",
+            className: menuCva$1({ ...props, isMobile: true }),
             children: (activeItem?.children ?? items).map((item, index) => /* @__PURE__ */ jsx(
               MenuItem,
               {

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

@@ -2,4 +2,4 @@ import { PopoverProps as AriaPopoverProps } from 'react-aria-components';
 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;
+export declare const MenuPopover: ({ items, className, ...props }: MenuPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Menu/MenuPopover.js

@@ -2,13 +2,19 @@ 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 }) => {
+import { menuPopoverCva, menuPopoverWrapperCva, menuCva } from "./menu.cva.js";
+import { UIStyle } from "../../config/uiStyle.context.js";
+const MenuPopover = ({ items, className, ...props }) => {
+  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;
   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(
+      className: clsx(menuPopoverCva$1({ ...props }), className),
+      children: /* @__PURE__ */ jsx("div", { className: menuPopoverWrapperCva$1({ ...props }), children: /* @__PURE__ */ jsx(Menu, { className: menuCva$1({ ...props, isMobile: false }), children: items.map(
         (item, index) => !item.children || item.children.length === 0 ? /* @__PURE__ */ jsx(
           MenuItem,
           {
@@ -23,7 +29,6 @@ const MenuPopover = ({ items, ...props }) => {
               MenuPopover,
               {
                 offset: 0,
-                className: "pl-2",
                 items: item.children
               }
             )

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

@@ -0,0 +1,17 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const menuCva: (props?: ({
+    isMobile?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface MenuCvaVariantProps extends VariantProps<typeof menuCva> {
+}
+export declare const menuItemCva: (props?: ({
+    isMobile?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface MenuItemVariantProps extends VariantProps<typeof menuItemCva> {
+}
+export declare const menuPopoverCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface MenuPopoverVariantProps extends VariantProps<typeof menuPopoverCva> {
+}
+export declare const menuPopoverWrapperCva: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface MenuPopoverWrapperVariantProps extends VariantProps<typeof menuPopoverWrapperCva> {
+}

package/dist/components/Menu/menu.cva.js

@@ -0,0 +1,45 @@
+import { cva } from "class-variance-authority";
+const menuCva = cva(["outline-none"], {
+  variants: {
+    isMobile: {
+      true: [],
+      false: []
+    }
+  },
+  defaultVariants: {
+    isMobile: false
+  }
+});
+const menuItemCva = cva(
+  [
+    "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-contained-primary-on-idle",
+    "open:hover:bg-interactive-contained-primary-hover open:hover:text-interactive-contained-primary-on-hover",
+    "focus-visible:bg-elevation-fill-default-1 focus-visible:text-interactive-text-secondary-hover"
+  ],
+  {
+    variants: {
+      isMobile: {
+        true: ["justify-start! w-full font-labels-default"],
+        false: []
+      }
+    },
+    defaultVariants: {
+      isMobile: false
+    }
+  }
+);
+const menuPopoverCva = cva(["pt-2 outline-none"]);
+const menuPopoverWrapperCva = cva([
+  "overflow-hidden rounded-list-rounding-dropdown border border-elevation-outline-default-1 shadow-5 outline-none"
+]);
+export {
+  menuCva,
+  menuItemCva,
+  menuPopoverCva,
+  menuPopoverWrapperCva
+};