@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/Label/Label.d.ts

@@ -0,0 +1,225 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+import { ChipProps } from "@heroui/chip";
+
+//#region src/Label/Label.d.ts
+declare const labelVariants: import("tailwind-variants").TVReturnType<{
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, undefined, {
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, import("tailwind-variants").TVReturnType<{
+  color: {
+    default: {
+      dot: string;
+    };
+    primary: {
+      dot: string;
+    };
+    secondary: {
+      dot: string;
+    };
+    success: {
+      dot: string;
+    };
+    warning: {
+      dot: string;
+    };
+    danger: {
+      dot: string;
+    };
+    info: {
+      dot: string;
+    };
+  };
+  isIconOnly: {
+    true: {
+      content: string;
+    };
+    false: {
+      content: string;
+    };
+  };
+  hasEndContent: {
+    true: {
+      base: string;
+    };
+  };
+  variant: {
+    solid: {};
+    bordered: {
+      base: string;
+    };
+    light: {
+      base: string;
+    };
+    flat: {};
+    faded: {
+      base: string;
+    };
+    shadow: {};
+    dot: {
+      base: string;
+    };
+  };
+}, {
+  base: string;
+  closeButton: string;
+  content: string;
+  dot: string;
+  icon: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof labelVariants>;
+type ClassName = TVClassName<typeof labelVariants>;
+interface LabelProps extends VariantProps {
+  /** content of the label */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** color of the label */
+  color?: VariantProps['color'];
+  /** element to be rendered in the right side of the label */
+  endContent?: ChipProps['endContent'];
+  /** optional label icon, when only icon provided without children and endContent  */
+  icon?: ReactNode;
+  /** add close button to endContent */
+  onClose?: ChipProps['onClose'];
+  /** radius of the label */
+  radius?: ChipProps['radius'];
+  /** size of the label */
+  size?: ChipProps['size'];
+  /** style variant of the label */
+  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'dot';
+}
+/**
+ * Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)
+ */
+declare const Label: ({
+  children,
+  className: _className,
+  color,
+  endContent,
+  icon,
+  onClose,
+  radius,
+  size,
+  variant
+}: LabelProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Label, LabelProps, labelVariants };
+//# sourceMappingURL=Label.d.ts.map

package/dist/Label/Label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.d.ts","names":[],"sources":["../../src/Label/Label.tsx"],"mappings":";;;;;cAUa,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8ErB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,UAAA,SAAmB,YAAA;EAwBrB;EAtBb,QAAA,GAAW,SAAA;EAgCV;EA9BD,SAAA,GAAY,SAAA;EA8BD;EA5BX,KAAA,GAAQ,YAAA;EAkBK;EAhBb,UAAA,GAAa,SAAA;EAgBA;EAdb,IAAA,GAAO,SAAA;EAcM;EAZb,OAAA,GAAU,SAAA;EAYG;EAVb,MAAA,GAAS,SAAA;EAUI;EARb,IAAA,GAAO,SAAA;EAQM;EANb,OAAA;AAAA;;;;cAMI,KAAA;EAAS,QAAA;EAAA,SAAA,EAAA,UAAA;EAAA,KAAA;EAAA,UAAA;EAAA,IAAA;EAAA,OAAA;EAAA,MAAA;EAAA,IAAA;EAAA;AAAA,GAUZ,UAAA,iCAAU,GAAA,CAAA,OAAA"}

package/dist/Label/Label.js

@@ -0,0 +1,82 @@
+import { tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { chip } from "@heroui/theme";
+import { Chip } from "@heroui/chip";
+//#region src/Label/Label.tsx
+const labelVariants = tv({
+	slots: {
+		base: "",
+		closeButton: "",
+		content: "",
+		dot: "",
+		icon: ""
+	},
+	variants: {
+		color: {
+			info: { dot: "bg-info" },
+			...chip.variants.color
+		},
+		isIconOnly: {
+			true: { content: "px-1" },
+			false: { content: "flex items-center gap-2" }
+		},
+		hasEndContent: { true: { base: "pr-2" } },
+		variant: chip.variants.variant
+	},
+	defaultVariants: chip.defaultVariants,
+	compoundVariants: [
+		...chip.compoundVariants,
+		{
+			variant: "solid",
+			color: "info",
+			class: { base: "bg-info text-info-foreground" }
+		},
+		{
+			variant: "bordered",
+			color: "info",
+			class: { base: "border-info text-info" }
+		},
+		{
+			variant: "light",
+			color: "info",
+			class: { base: "text-info" }
+		},
+		{
+			variant: "flat",
+			color: "info",
+			class: { base: "bg-info/20 text-info-600" }
+		},
+		{
+			variant: "faded",
+			color: "info",
+			class: { base: "border-default text-info" }
+		}
+	]
+});
+/**
+* Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)
+*/
+const Label = ({ children = void 0, className: _className = void 0, color = "default", endContent = void 0, icon = void 0, onClose = void 0, radius = "full", size = "md", variant = "solid" }) => {
+	const classNames = variantsToClassNames(labelVariants({
+		color,
+		isIconOnly: !!icon && !children && !endContent,
+		hasEndContent: !!endContent,
+		variant
+	}), _className, "base");
+	return /* @__PURE__ */ jsxs(Chip, {
+		classNames,
+		endContent,
+		onClose,
+		radius,
+		size,
+		variant,
+		children: [icon ? /* @__PURE__ */ jsx("span", {
+			className: classNames.icon,
+			children: icon
+		}) : null, children]
+	});
+};
+//#endregion
+export { Label as default, labelVariants };
+
+//# sourceMappingURL=Label.js.map

package/dist/Label/Label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","names":["heroLabelVariants","HeroLabel"],"sources":["../../src/Label/Label.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ChipProps as HeroLabelProps } from '@heroui/chip';\nimport type { ReactNode } from 'react';\n\nimport { Chip as HeroLabel } from '@heroui/chip';\nimport { chip as heroLabelVariants } from '@heroui/theme';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// label variants\nexport const labelVariants = tv({\n  slots: {\n    base: '',\n    closeButton: '',\n    content: '',\n    dot: '',\n    icon: '',\n  },\n  variants: {\n    color: {\n      // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n      info: {\n        dot: 'bg-info',\n      },\n      ...heroLabelVariants.variants.color,\n    },\n    isIconOnly: {\n      true: {\n        content: 'px-1',\n      },\n      false: {\n        content: 'flex items-center gap-2',\n      },\n    },\n    hasEndContent: {\n      true: {\n        base: 'pr-2',\n      },\n    },\n    variant: heroLabelVariants.variants.variant,\n  },\n  defaultVariants: heroLabelVariants.defaultVariants,\n  compoundVariants: [\n    // see: https://github.com/heroui-inc/heroui/blob/canary/packages/core/theme/src/components/chip.ts\n    ...heroLabelVariants.compoundVariants,\n    // solid / color info\n    {\n      variant: 'solid',\n      color: 'info',\n      class: {\n        base: 'bg-info text-info-foreground',\n      },\n    },\n    // bordered / color info\n    {\n      variant: 'bordered',\n      color: 'info',\n      class: {\n        base: 'border-info text-info',\n      },\n    },\n    // light / color info\n    {\n      variant: 'light',\n      color: 'info',\n      class: {\n        base: 'text-info',\n      },\n    },\n    // flat / color info\n    {\n      variant: 'flat',\n      color: 'info',\n      class: {\n        base: 'bg-info/20 text-info-600',\n      },\n    },\n    // faded / color info\n    {\n      variant: 'faded',\n      color: 'info',\n      class: {\n        base: 'border-default text-info',\n      },\n    },\n  ],\n});\n\ntype VariantProps = TVProps<typeof labelVariants>;\ntype ClassName = TVClassName<typeof labelVariants>;\n\nexport interface LabelProps extends VariantProps {\n  /** content of the label */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** color of the label */\n  color?: VariantProps['color'];\n  /** element to be rendered in the right side of the label */\n  endContent?: HeroLabelProps['endContent'];\n  /** optional label icon, when only icon provided without children and endContent  */\n  icon?: ReactNode;\n  /** add close button to endContent */\n  onClose?: HeroLabelProps['onClose'];\n  /** radius of the label */\n  radius?: HeroLabelProps['radius'];\n  /** size of the label */\n  size?: HeroLabelProps['size'];\n  /** style variant of the label */\n  variant?: 'solid' | 'bordered' | 'light' | 'flat' | 'faded' | 'dot';\n}\n\n/**\n * Label component based on [HeroUI Chip](https://www.heroui.com//docs/components/chip)\n */\nconst Label = ({\n  children = undefined,\n  className: _className = undefined,\n  color = 'default',\n  endContent = undefined,\n  icon = undefined,\n  onClose = undefined,\n  radius = 'full',\n  size = 'md',\n  variant = 'solid',\n}: LabelProps) => {\n  // determine variants based on props\n  const isIconOnly = !!icon && !children && !endContent;\n  const hasEndContent = !!endContent;\n\n  // classNames from slots\n  const variants = labelVariants({ color, isIconOnly, hasEndContent, variant });\n  const classNames = variantsToClassNames(variants, _className, 'base');\n\n  return (\n    <HeroLabel\n      classNames={classNames}\n      endContent={endContent}\n      onClose={onClose}\n      radius={radius}\n      size={size}\n      variant={variant}\n    >\n      {icon ? <span className={classNames.icon}>{icon}</span> : null}\n      {children}\n    </HeroLabel>\n  );\n};\n\nexport default Label;\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,GAAG;CAC9B,OAAO;EACL,MAAM;EACN,aAAa;EACb,SAAS;EACT,KAAK;EACL,MAAM;CACR;CACA,UAAU;EACR,OAAO;GAEL,MAAM,EACJ,KAAK,UACP;GACA,GAAGA,KAAkB,SAAS;EAChC;EACA,YAAY;GACV,MAAM,EACJ,SAAS,OACX;GACA,OAAO,EACL,SAAS,0BACX;EACF;EACA,eAAe,EACb,MAAM,EACJ,MAAM,OACR,EACF;EACA,SAASA,KAAkB,SAAS;CACtC;CACA,iBAAiBA,KAAkB;CACnC,kBAAkB;EAEhB,GAAGA,KAAkB;EAErB;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,+BACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,wBACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,YACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,2BACR;EACF;EAEA;GACE,SAAS;GACT,OAAO;GACP,OAAO,EACL,MAAM,2BACR;EACF;CACF;AACF,CAAC;;;;AA6BD,MAAM,SAAS,EACb,WAAW,KAAA,GACX,WAAW,aAAa,KAAA,GACxB,QAAQ,WACR,aAAa,KAAA,GACb,OAAO,KAAA,GACP,UAAU,KAAA,GACV,SAAS,QACT,OAAO,MACP,UAAU,cACM;CAOhB,MAAM,aAAa,qBADF,cAAc;EAAE;EAAO,YAJrB,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;EAIS,eAAA,CAH7B,CAAC;EAG2C;CAAQ,CAC5B,GAAG,YAAY,MAAM;CAEpE,OACE,qBAACC,MAAD;EACc;EACA;EACH;EACD;EACF;EACG;YANX,CAQG,OAAO,oBAAC,QAAD;GAAM,WAAW,WAAW;aAAO;EAAW,CAAA,IAAI,MACzD,QACQ;;AAEf"}

package/dist/Label/index.cjs

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Label = require("./Label.cjs");
+//#region src/Label/index.ts
+var Label_default = require_Label.default;
+//#endregion
+exports.Label = require_Label.default;
+exports.default = Label_default;
+exports.labelVariants = require_Label.labelVariants;
 
-
-
-var _chunkBPBEZCSPcjs = require('../chunk-BPBEZCSP.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-
-exports.Label = _chunkBPBEZCSPcjs.Label_default; exports.default = _chunkBPBEZCSPcjs.Label_default2; exports.labelVariants = _chunkBPBEZCSPcjs.labelVariants;
 //# sourceMappingURL=index.cjs.map

package/dist/Label/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Label/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACA;AACF,6JAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Label/index.cjs"}
+{"version":3,"file":"index.cjs","names":["Label"],"sources":["../../src/Label/index.ts"],"sourcesContent":["import Label, { labelVariants } from './Label';\n\nexport type { LabelProps } from './Label';\n\nexport { Label, labelVariants };\n\nexport default Label;\n"],"mappings":";;;;;;AAMA,IAAA,gBAAeA,cAAAA"}

package/dist/Label/index.d.cts

@@ -1,11 +1,2 @@
-import { L as Label } from '../Label-B5fd7vp_.cjs';
-export { a as LabelProps, l as labelVariants } from '../Label-B5fd7vp_.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import '@heroui/chip';
-import 'react';
-
-
-
-export { Label, Label as default };
+import { Label, LabelProps, labelVariants } from "./Label.cjs";
+export { Label, Label as default, type LabelProps, labelVariants };

package/dist/Label/index.d.ts

@@ -1,11 +1,2 @@
-import { L as Label } from '../Label-B5fd7vp_.js';
-export { a as LabelProps, l as labelVariants } from '../Label-B5fd7vp_.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import '@fuf-stack/pixel-utils';
-import '@heroui/chip';
-import 'react';
-
-
-
-export { Label, Label as default };
+import { Label, LabelProps, labelVariants } from "./Label.js";
+export { Label, Label as default, type LabelProps, labelVariants };

package/dist/Label/index.js

@@ -1,12 +1,7 @@
-import {
-  Label_default,
-  Label_default2,
-  labelVariants
-} from "../chunk-4AXE6KZW.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  Label_default as Label,
-  Label_default2 as default,
-  labelVariants
-};
+import Label, { labelVariants } from "./Label.js";
+//#region src/Label/index.ts
+var Label_default = Label;
+//#endregion
+export { Label, Label_default as default, labelVariants };
+
 //# sourceMappingURL=index.js.map

package/dist/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Label/index.ts"],"sourcesContent":["import Label, { labelVariants } from './Label';\n\nexport type { LabelProps } from './Label';\n\nexport { Label, labelVariants };\n\nexport default Label;\n"],"mappings":";;AAMA,IAAA,gBAAe"}

package/dist/Menu/Menu.cjs

@@ -0,0 +1,87 @@
+require("../_virtual/_rolldown/runtime.cjs");
+const require_VerticalDotsIcon = require("./VerticalDotsIcon.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_button = require("@heroui/button");
+let _heroui_dropdown = require("@heroui/dropdown");
+//#region src/Menu/Menu.tsx
+const menuVariants = (0, _fuf_stack_pixel_utils.tv)({ slots: {
+	item: "",
+	trigger: "z-auto"
+} });
+const isMenuSection = (item) => {
+	return "items" in item;
+};
+const getDisabledKeys = (items) => {
+	return items.reduce((acc, item) => {
+		if (isMenuSection(item)) acc.push(...item.items);
+		else acc.push(item);
+		return acc;
+	}, []).filter((item) => {
+		return item.disabled === true;
+	}).map((item) => {
+		return item.key;
+	});
+};
+const renderMenuItem = (item, itemClassName) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_dropdown.DropdownItem, {
+		className: (0, _fuf_stack_pixel_utils.cn)(itemClassName, item.className),
+		"data-testid": (0, _fuf_stack_pixel_utils.slugify)(item.testId ?? item.key),
+		description: item.description,
+		onPress: item.onClick,
+		startContent: item.icon,
+		children: item.label
+	}, item.key);
+};
+/**
+* Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)
+*/
+const Menu = ({ ariaLabel = void 0, children = null, className: _className = void 0, isDisabled = false, items, onAction = void 0, placement = void 0, testId = void 0, triggerButtonProps = void 0 }) => {
+	const className = (0, _fuf_stack_pixel_utils.variantsToClassNames)(menuVariants(), _className, "trigger");
+	let triggerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		className: className.trigger,
+		type: "button",
+		children
+	});
+	if (!children) triggerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_button.Button, {
+		isIconOnly: true,
+		className: (0, _fuf_stack_pixel_utils.cn)("min-w-0 outline outline-divider", className.trigger),
+		radius: "full",
+		size: "sm",
+		variant: "light",
+		...triggerButtonProps,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VerticalDotsIcon.default, {})
+	});
+	else if (triggerButtonProps) triggerButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_button.Button, {
+		className: className.trigger,
+		...triggerButtonProps,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_heroui_dropdown.Dropdown, {
+		"aria-label": ariaLabel,
+		isDisabled,
+		placement,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_dropdown.DropdownTrigger, {
+			"data-testid": testId,
+			children: triggerButton
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_dropdown.DropdownMenu, {
+			disabledKeys: getDisabledKeys(items),
+			items,
+			onAction,
+			children: (item) => {
+				if ("items" in item) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_dropdown.DropdownSection, {
+					items: item.items,
+					title: item.label,
+					children: (sectionItem) => {
+						return renderMenuItem(sectionItem, className.item);
+					}
+				}, item.key);
+				return renderMenuItem(item, className.item);
+			}
+		})]
+	});
+};
+//#endregion
+exports.default = Menu;
+
+//# sourceMappingURL=Menu.cjs.map

package/dist/Menu/Menu.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.cjs","names":["HeroDropdownItem","Button","VerticalDotsIcon","HeroDropdown","HeroDropdownTrigger","HeroDropdownMenu","HeroDropdownSection"],"sources":["../../src/Menu/Menu.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ButtonProps } from '@heroui/button';\nimport type {\n  DropdownItemProps as HeroDropdownItemProps,\n  DropdownProps as HeroDropdownProps,\n  DropdownSectionProps as HeroDropdownSectionProps,\n} from '@heroui/dropdown';\nimport type { Key, ReactNode } from 'react';\n\nimport { Button } from '@heroui/button';\nimport {\n  Dropdown as HeroDropdown,\n  DropdownItem as HeroDropdownItem,\n  DropdownMenu as HeroDropdownMenu,\n  DropdownSection as HeroDropdownSection,\n  DropdownTrigger as HeroDropdownTrigger,\n} from '@heroui/dropdown';\n\nimport { cn, slugify, tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\nimport VerticalDotsIcon from './VerticalDotsIcon';\n\n/**\n * Menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)\n */\nexport interface MenuItem {\n  /** unique identifier */\n  key: string;\n  /** CSS class name */\n  className?: string;\n  /** additional description shown under the label */\n  description?: string;\n  /** disables the menu item */\n  disabled?: boolean;\n  /** menu item icon  */\n  icon?: ReactNode;\n  /** menu item name */\n  label: ReactNode;\n  /** click event handler */\n  onClick?: HeroDropdownItemProps['onPress'];\n  /** e2e test identifier */\n  testId?: string;\n}\n\n/**\n * Menu section type\n */\nexport interface MenuSection {\n  /** unique identifier */\n  key: string;\n  /** section label */\n  label: ReactNode;\n  /** section items (array of MenuItem) */\n  items: MenuItem[];\n}\n\n// menu styling variants\nexport const menuVariants = tv({\n  slots: {\n    item: '',\n    trigger: 'z-auto',\n  },\n});\n\ntype VariantProps = TVProps<typeof menuVariants>;\ntype ClassName = TVClassName<typeof menuVariants>;\n\nexport interface MenuProps extends VariantProps {\n  /** sets HTML aria-label attribute */\n  ariaLabel?: string;\n  /** child components */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** menu item structure */\n  items: (MenuSection | MenuItem)[];\n  /** disable menu trigger */\n  isDisabled?: boolean;\n  /** placement of the menu */\n  placement?: HeroDropdownProps['placement'];\n  /** called if item is selected */\n  onAction?: (key: Key) => void;\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n  /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */\n  triggerButtonProps?: Pick<\n    ButtonProps,\n    | 'aria-label'\n    | 'className'\n    | 'color'\n    | 'disableAnimation'\n    | 'disableRipple'\n    | 'disabled'\n    | 'size'\n    | 'variant'\n  > & { 'data-testid'?: string };\n}\n\n// type guard for MenuSection\nconst isMenuSection = (item: MenuSection | MenuItem): item is MenuSection => {\n  return 'items' in item;\n};\n\n// returns String[] of disabled items/keys\nconst getDisabledKeys = (items: (MenuSection | MenuItem)[]): string[] => {\n  const flatItems = items.reduce<MenuItem[]>((acc, item) => {\n    if (isMenuSection(item)) {\n      acc.push(...item.items);\n    } else {\n      acc.push(item);\n    }\n    return acc;\n  }, []);\n  return flatItems\n    .filter((item) => {\n      return item.disabled === true;\n    })\n    .map((item) => {\n      return item.key;\n    });\n};\n\nconst renderMenuItem = (item: MenuItem, itemClassName?: string) => {\n  return (\n    <HeroDropdownItem\n      key={item.key}\n      className={cn(itemClassName, item.className)}\n      data-testid={slugify(item.testId ?? item.key)}\n      description={item.description}\n      onPress={item.onClick}\n      startContent={item.icon}\n    >\n      {item.label}\n    </HeroDropdownItem>\n  );\n};\n\n/**\n * Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)\n */\nconst Menu = ({\n  ariaLabel = undefined,\n  children = null,\n  className: _className = undefined,\n  isDisabled = false,\n  items,\n  onAction = undefined,\n  placement = undefined,\n  testId = undefined,\n  triggerButtonProps = undefined,\n}: MenuProps) => {\n  // className from slots\n  const variants = menuVariants();\n  const className = variantsToClassNames(variants, _className, 'trigger');\n\n  // determine trigger button variant\n  let triggerButton = (\n    <button className={className.trigger} type=\"button\">\n      {children}\n    </button>\n  );\n  if (!children) {\n    //  default to ellipsis icon when no children are provided\n    triggerButton = (\n      <Button\n        isIconOnly\n        className={cn('min-w-0 outline outline-divider', className.trigger)}\n        radius=\"full\"\n        size=\"sm\"\n        variant=\"light\"\n        {...triggerButtonProps}\n      >\n        <VerticalDotsIcon />\n      </Button>\n    );\n  } else if (triggerButtonProps) {\n    // use provided triggerButtonProps with hero button\n    triggerButton = (\n      <Button className={className.trigger} {...triggerButtonProps}>\n        {children}\n      </Button>\n    );\n  }\n\n  return (\n    <HeroDropdown\n      aria-label={ariaLabel}\n      isDisabled={isDisabled}\n      placement={placement}\n    >\n      <HeroDropdownTrigger data-testid={testId}>\n        {/* NOTE: type and aria properties are injected by HeroDropdownTrigger */}\n        {triggerButton}\n      </HeroDropdownTrigger>\n      <HeroDropdownMenu\n        disabledKeys={getDisabledKeys(items)}\n        items={items}\n        onAction={onAction}\n      >\n        {(item) => {\n          if ('items' in item) {\n            return (\n              <HeroDropdownSection\n                key={item.key}\n                items={item.items}\n                title={item.label as HeroDropdownSectionProps['title']}\n              >\n                {(sectionItem) => {\n                  return renderMenuItem(sectionItem, className.item);\n                }}\n              </HeroDropdownSection>\n            );\n          }\n          return renderMenuItem(item, className.item);\n        }}\n      </HeroDropdownMenu>\n    </HeroDropdown>\n  );\n};\n\nexport default Menu;\n"],"mappings":";;;;;;;AAyDA,MAAa,gBAAA,GAAA,uBAAA,IAAkB,EAC7B,OAAO;CACL,MAAM;CACN,SAAS;AACX,EACF,CAAC;AAqCD,MAAM,iBAAiB,SAAsD;CAC3E,OAAO,WAAW;AACpB;AAGA,MAAM,mBAAmB,UAAgD;CASvE,OARkB,MAAM,QAAoB,KAAK,SAAS;EACxD,IAAI,cAAc,IAAI,GACpB,IAAI,KAAK,GAAG,KAAK,KAAK;OAEtB,IAAI,KAAK,IAAI;EAEf,OAAO;CACT,GAAG,CAAC,CACW,EACZ,QAAQ,SAAS;EAChB,OAAO,KAAK,aAAa;CAC3B,CAAC,EACA,KAAK,SAAS;EACb,OAAO,KAAK;CACd,CAAC;AACL;AAEA,MAAM,kBAAkB,MAAgB,kBAA2B;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,iBAAAA,cAAD;EAEE,YAAA,GAAA,uBAAA,IAAc,eAAe,KAAK,SAAS;EAC3C,gBAAA,GAAA,uBAAA,SAAqB,KAAK,UAAU,KAAK,GAAG;EAC5C,aAAa,KAAK;EAClB,SAAS,KAAK;EACd,cAAc,KAAK;YAElB,KAAK;CACU,GARX,KAAK,GAQM;AAEtB;;;;AAKA,MAAM,QAAQ,EACZ,YAAY,KAAA,GACZ,WAAW,MACX,WAAW,aAAa,KAAA,GACxB,aAAa,OACb,OACA,WAAW,KAAA,GACX,YAAY,KAAA,GACZ,SAAS,KAAA,GACT,qBAAqB,KAAA,QACN;CAGf,MAAM,aAAA,GAAA,uBAAA,sBADW,aAC6B,GAAG,YAAY,SAAS;CAGtE,IAAI,gBACF,iBAAA,GAAA,kBAAA,KAAC,UAAD;EAAQ,WAAW,UAAU;EAAS,MAAK;EACxC;CACK,CAAA;CAEV,IAAI,CAAC,UAEH,gBACE,iBAAA,GAAA,kBAAA,KAACC,eAAAA,QAAD;EACE,YAAA;EACA,YAAA,GAAA,uBAAA,IAAc,mCAAmC,UAAU,OAAO;EAClE,QAAO;EACP,MAAK;EACL,SAAQ;EACR,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,SAAD,CAAmB,CAAA;CACb,CAAA;MAEL,IAAI,oBAET,gBACE,iBAAA,GAAA,kBAAA,KAACD,eAAAA,QAAD;EAAQ,WAAW,UAAU;EAAS,GAAI;EACvC;CACK,CAAA;CAIZ,OACE,iBAAA,GAAA,kBAAA,MAACE,iBAAAA,UAAD;EACE,cAAY;EACA;EACD;YAHb,CAKE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,iBAAD;GAAqB,eAAa;aAE/B;EACkB,CAAA,GACrB,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,cAAD;GACE,cAAc,gBAAgB,KAAK;GAC5B;GACG;cAER,SAAS;IACT,IAAI,WAAW,MACb,OACE,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,iBAAD;KAEE,OAAO,KAAK;KACZ,OAAO,KAAK;gBAEV,gBAAgB;MAChB,OAAO,eAAe,aAAa,UAAU,IAAI;KACnD;IACmB,GAPd,KAAK,GAOS;IAGzB,OAAO,eAAe,MAAM,UAAU,IAAI;GAC5C;EACgB,CAAA,CACN;;AAElB"}

package/dist/Menu/Menu.d.cts

@@ -0,0 +1,110 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { Key, ReactNode } from "react";
+import { ButtonProps } from "@heroui/button";
+import { DropdownItemProps, DropdownProps } from "@heroui/dropdown";
+
+//#region src/Menu/Menu.d.ts
+/**
+ * Menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)
+ */
+interface MenuItem {
+  /** unique identifier */
+  key: string;
+  /** CSS class name */
+  className?: string;
+  /** additional description shown under the label */
+  description?: string;
+  /** disables the menu item */
+  disabled?: boolean;
+  /** menu item icon  */
+  icon?: ReactNode;
+  /** menu item name */
+  label: ReactNode;
+  /** click event handler */
+  onClick?: DropdownItemProps['onPress'];
+  /** e2e test identifier */
+  testId?: string;
+}
+/**
+ * Menu section type
+ */
+interface MenuSection {
+  /** unique identifier */
+  key: string;
+  /** section label */
+  label: ReactNode;
+  /** section items (array of MenuItem) */
+  items: MenuItem[];
+}
+declare const menuVariants: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-merge").ClassNameValue | {
+      trigger?: import("tailwind-merge").ClassNameValue;
+      item?: import("tailwind-merge").ClassNameValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-merge").ClassNameValue | {
+      trigger?: import("tailwind-merge").ClassNameValue;
+      item?: import("tailwind-merge").ClassNameValue;
+    };
+  };
+} | {}, {
+  item: string;
+  trigger: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-merge").ClassNameValue | {
+      trigger?: import("tailwind-merge").ClassNameValue;
+      item?: import("tailwind-merge").ClassNameValue;
+    };
+  };
+} | {}, {
+  item: string;
+  trigger: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+  item: string;
+  trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof menuVariants>;
+type ClassName = TVClassName<typeof menuVariants>;
+interface MenuProps extends VariantProps {
+  /** sets HTML aria-label attribute */
+  ariaLabel?: string;
+  /** child components */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** menu item structure */
+  items: (MenuSection | MenuItem)[];
+  /** disable menu trigger */
+  isDisabled?: boolean;
+  /** placement of the menu */
+  placement?: DropdownProps['placement'];
+  /** called if item is selected */
+  onAction?: (key: Key) => void;
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+  /** When defined a Button will be rendered as trigger (with provided props) instead of unstyled html button */
+  triggerButtonProps?: Pick<ButtonProps, 'aria-label' | 'className' | 'color' | 'disableAnimation' | 'disableRipple' | 'disabled' | 'size' | 'variant'> & {
+    'data-testid'?: string;
+  };
+}
+/**
+ * Dropdown menu component based on [HeroUI Dropdown](https://www.heroui.com//docs/components/dropdown)
+ */
+declare const Menu: ({
+  ariaLabel,
+  children,
+  className: _className,
+  isDisabled,
+  items,
+  onAction,
+  placement,
+  testId,
+  triggerButtonProps
+}: MenuProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Menu, MenuItem, MenuProps, MenuSection };
+//# sourceMappingURL=Menu.d.cts.map

package/dist/Menu/Menu.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.cts","names":[],"sources":["../../src/Menu/Menu.tsx"],"mappings":";;;;;;;;AAyBA;UAAiB,QAAA;;EAEf,GAAA;EAUO;EARP,SAAA;EAU+B;EAR/B,WAAA;EAJA;EAMA,QAAA;EAFA;EAIA,IAAA,GAAO,SAAA;EAAP;EAEA,KAAA,EAAO,SAAA;EAAP;EAEA,OAAA,GAAU,iBAAA;EAAV;EAEA,MAAA;AAAA;;AAAM;AAMR;UAAiB,WAAA;;EAEf,GAAA;EAAA;EAEA,KAAA,EAAO,SAAA;EAAA;EAEP,KAAA,EAAO,QAAQ;AAAA;AAAA,cAIJ,YAAA,8BAAY,YAAA;EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAOpB,YAAA,GAAe,OAAO,QAAQ,YAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,YAAA;AAAA,UAEnB,SAAA,SAAkB,YAAA;;EAEjC,SAAA;;EAEA,QAAA,GAAW,SAAA;EAPI;EASf,SAAA,GAAY,SAAA;EATM;EAWlB,KAAA,GAAQ,WAAA,GAAc,QAAA;EAVnB;EAYH,UAAA;;EAEA,SAAA,GAAY,aAAA;EAdkC;EAgB9C,QAAA,IAAY,GAAA,EAAK,GAAA;EAdQ;EAgBzB,MAAA;EAZW;EAcX,kBAAA,GAAqB,IAAA,CACnB,WAAA;IASI,aAAA;EAAA;AAAA;;;;cA6CF,IAAA;EAAQ,SAAA;EAAA,QAAA;EAAA,SAAA,EAAA,UAAA;EAAA,UAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,MAAA;EAAA;AAAA,GAUX,SAAA,iCAAS,GAAA,CAAA,OAAA"}