@fuf-stack/pixels 1.9.0 → 1.10.0

package/dist/Menu/Menu.d.ts

@@ -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.ts.map

package/dist/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","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"}

package/dist/Menu/Menu.js

@@ -0,0 +1,86 @@
+import VerticalDotsIcon from "./VerticalDotsIcon.js";
+import { cn, slugify, tv, variantsToClassNames } from "@fuf-stack/pixel-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@heroui/button";
+import { Dropdown, DropdownItem, DropdownMenu, DropdownSection, DropdownTrigger } from "@heroui/dropdown";
+//#region src/Menu/Menu.tsx
+const menuVariants = 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__ */ jsx(DropdownItem, {
+		className: cn(itemClassName, item.className),
+		"data-testid": 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 = variantsToClassNames(menuVariants(), _className, "trigger");
+	let triggerButton = /* @__PURE__ */ jsx("button", {
+		className: className.trigger,
+		type: "button",
+		children
+	});
+	if (!children) triggerButton = /* @__PURE__ */ jsx(Button, {
+		isIconOnly: true,
+		className: cn("min-w-0 outline outline-divider", className.trigger),
+		radius: "full",
+		size: "sm",
+		variant: "light",
+		...triggerButtonProps,
+		children: /* @__PURE__ */ jsx(VerticalDotsIcon, {})
+	});
+	else if (triggerButtonProps) triggerButton = /* @__PURE__ */ jsx(Button, {
+		className: className.trigger,
+		...triggerButtonProps,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Dropdown, {
+		"aria-label": ariaLabel,
+		isDisabled,
+		placement,
+		children: [/* @__PURE__ */ jsx(DropdownTrigger, {
+			"data-testid": testId,
+			children: triggerButton
+		}), /* @__PURE__ */ jsx(DropdownMenu, {
+			disabledKeys: getDisabledKeys(items),
+			items,
+			onAction,
+			children: (item) => {
+				if ("items" in item) return /* @__PURE__ */ jsx(DropdownSection, {
+					items: item.items,
+					title: item.label,
+					children: (sectionItem) => {
+						return renderMenuItem(sectionItem, className.item);
+					}
+				}, item.key);
+				return renderMenuItem(item, className.item);
+			}
+		})]
+	});
+};
+//#endregion
+export { Menu as default };
+
+//# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","names":["HeroDropdownItem","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,eAAe,GAAG,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,oBAACA,cAAD;EAEE,WAAW,GAAG,eAAe,KAAK,SAAS;EAC3C,eAAa,QAAQ,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,YAAY,qBADD,aAC6B,GAAG,YAAY,SAAS;CAGtE,IAAI,gBACF,oBAAC,UAAD;EAAQ,WAAW,UAAU;EAAS,MAAK;EACxC;CACK,CAAA;CAEV,IAAI,CAAC,UAEH,gBACE,oBAAC,QAAD;EACE,YAAA;EACA,WAAW,GAAG,mCAAmC,UAAU,OAAO;EAClE,QAAO;EACP,MAAK;EACL,SAAQ;EACR,GAAI;YAEJ,oBAAC,kBAAD,CAAmB,CAAA;CACb,CAAA;MAEL,IAAI,oBAET,gBACE,oBAAC,QAAD;EAAQ,WAAW,UAAU;EAAS,GAAI;EACvC;CACK,CAAA;CAIZ,OACE,qBAACC,UAAD;EACE,cAAY;EACA;EACD;YAHb,CAKE,oBAACC,iBAAD;GAAqB,eAAa;aAE/B;EACkB,CAAA,GACrB,oBAACC,cAAD;GACE,cAAc,gBAAgB,KAAK;GAC5B;GACG;cAER,SAAS;IACT,IAAI,WAAW,MACb,OACE,oBAACC,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/VerticalDotsIcon.cjs

@@ -0,0 +1,23 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Menu/VerticalDotsIcon.tsx
+const VerticalDotsIcon = ({ size = 24, width, height, ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		"aria-hidden": "true",
+		fill: "none",
+		focusable: "false",
+		height: size ?? height,
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		width: size ?? width,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+			d: "M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+			fill: "currentColor"
+		})
+	});
+};
+//#endregion
+exports.default = VerticalDotsIcon;
+
+//# sourceMappingURL=VerticalDotsIcon.cjs.map

package/dist/Menu/VerticalDotsIcon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalDotsIcon.cjs","names":[],"sources":["../../src/Menu/VerticalDotsIcon.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\n\n// Default Icon for Menu button\nconst VerticalDotsIcon = ({\n  size = 24,\n  width,\n  height,\n  ...props\n}: SVGProps<SVGSVGElement> & { size?: number }) => {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      focusable=\"false\"\n      height={size ?? height}\n      role=\"presentation\"\n      viewBox=\"0 0 24 24\"\n      width={size ?? width}\n      {...props}\n    >\n      <path\n        d=\"M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default VerticalDotsIcon;\n"],"mappings":";;;AAGA,MAAM,oBAAoB,EACxB,OAAO,IACP,OACA,QACA,GAAG,YAC8C;CACjD,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,eAAY;EACZ,MAAK;EACL,WAAU;EACV,QAAQ,QAAQ;EAChB,MAAK;EACL,SAAQ;EACR,OAAO,QAAQ;EACf,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;CACE,CAAA;AAET"}

package/dist/Menu/VerticalDotsIcon.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/Menu/VerticalDotsIcon.tsx
+const VerticalDotsIcon = ({ size = 24, width, height, ...props }) => {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		fill: "none",
+		focusable: "false",
+		height: size ?? height,
+		role: "presentation",
+		viewBox: "0 0 24 24",
+		width: size ?? width,
+		...props,
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",
+			fill: "currentColor"
+		})
+	});
+};
+//#endregion
+export { VerticalDotsIcon as default };
+
+//# sourceMappingURL=VerticalDotsIcon.js.map

package/dist/Menu/VerticalDotsIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalDotsIcon.js","names":[],"sources":["../../src/Menu/VerticalDotsIcon.tsx"],"sourcesContent":["import type { SVGProps } from 'react';\n\n// Default Icon for Menu button\nconst VerticalDotsIcon = ({\n  size = 24,\n  width,\n  height,\n  ...props\n}: SVGProps<SVGSVGElement> & { size?: number }) => {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      focusable=\"false\"\n      height={size ?? height}\n      role=\"presentation\"\n      viewBox=\"0 0 24 24\"\n      width={size ?? width}\n      {...props}\n    >\n      <path\n        d=\"M12 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z\"\n        fill=\"currentColor\"\n      />\n    </svg>\n  );\n};\n\nexport default VerticalDotsIcon;\n"],"mappings":";;AAGA,MAAM,oBAAoB,EACxB,OAAO,IACP,OACA,QACA,GAAG,YAC8C;CACjD,OACE,oBAAC,OAAD;EACE,eAAY;EACZ,MAAK;EACL,WAAU;EACV,QAAQ,QAAQ;EAChB,MAAK;EACL,SAAQ;EACR,OAAO,QAAQ;EACf,GAAI;YAEJ,oBAAC,QAAD;GACE,GAAE;GACF,MAAK;EACN,CAAA;CACE,CAAA;AAET"}

package/dist/Menu/index.cjs

@@ -1,10 +1,12 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Menu = require("./Menu.cjs");
+//#region src/Menu/index.ts
+var Menu_default = require_Menu.default;
+//#endregion
+exports.Menu = require_Menu.default;
+exports.default = Menu_default;
 
-
-var _chunk5ZT7C5IPcjs = require('../chunk-5ZT7C5IP.cjs');
-require('../chunk-AHEA4IJV.cjs');
-
-
-
-exports.Menu = _chunk5ZT7C5IPcjs.Menu_default; exports.default = _chunk5ZT7C5IPcjs.Menu_default2;
 //# sourceMappingURL=index.cjs.map

package/dist/Menu/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/pixels/pixels/packages/pixels/dist/Menu/index.cjs"],"names":[],"mappings":"AAAA;AACE;AACA;AACF,yDAA8B;AAC9B,iCAA8B;AAC9B;AACE;AACA;AACF,iGAAC","file":"/home/runner/work/pixels/pixels/packages/pixels/dist/Menu/index.cjs"}
+{"version":3,"file":"index.cjs","names":["Menu"],"sources":["../../src/Menu/index.ts"],"sourcesContent":["import Menu from './Menu';\n\nexport type { MenuProps, MenuItem, MenuSection } from './Menu';\n\nexport { Menu };\n\nexport default Menu;\n"],"mappings":";;;;;;AAMA,IAAA,eAAeA,aAAAA"}

package/dist/Menu/index.d.cts

@@ -1,13 +1,2 @@
-import { M as Menu } from '../Menu-C9M_q1Z6.cjs';
-export { b as MenuItem, a as MenuProps, c as MenuSection } from '../Menu-C9M_q1Z6.cjs';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import 'tailwind-merge';
-import '@fuf-stack/pixel-utils';
-import '@heroui/button';
-import '@heroui/dropdown';
-import 'react';
-
-
-
-export { Menu, Menu as default };
+import { Menu, MenuItem, MenuProps, MenuSection } from "./Menu.cjs";
+export { Menu, Menu as default, type MenuItem, type MenuProps, type MenuSection };

package/dist/Menu/index.d.ts

@@ -1,13 +1,2 @@
-import { M as Menu } from '../Menu-C9M_q1Z6.js';
-export { b as MenuItem, a as MenuProps, c as MenuSection } from '../Menu-C9M_q1Z6.js';
-import 'react/jsx-runtime';
-import 'tailwind-variants';
-import 'tailwind-merge';
-import '@fuf-stack/pixel-utils';
-import '@heroui/button';
-import '@heroui/dropdown';
-import 'react';
-
-
-
-export { Menu, Menu as default };
+import { Menu, MenuItem, MenuProps, MenuSection } from "./Menu.js";
+export { Menu, Menu as default, type MenuItem, type MenuProps, type MenuSection };

package/dist/Menu/index.js

@@ -1,10 +1,7 @@
-import {
-  Menu_default,
-  Menu_default2
-} from "../chunk-SRDRLHAA.js";
-import "../chunk-OAIRL2FN.js";
-export {
-  Menu_default as Menu,
-  Menu_default2 as default
-};
+import Menu from "./Menu.js";
+//#region src/Menu/index.ts
+var Menu_default = Menu;
+//#endregion
+export { Menu, Menu_default as default };
+
 //# sourceMappingURL=index.js.map

package/dist/Menu/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Menu/index.ts"],"sourcesContent":["import Menu from './Menu';\n\nexport type { MenuProps, MenuItem, MenuSection } from './Menu';\n\nexport { Menu };\n\nexport default Menu;\n"],"mappings":";;AAMA,IAAA,eAAe"}

package/dist/Modal/Modal.cjs

@@ -0,0 +1,57 @@
+require("../_virtual/_rolldown/runtime.cjs");
+let _fuf_stack_pixel_utils = require("@fuf-stack/pixel-utils");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _heroui_modal = require("@heroui/modal");
+//#region src/Modal/Modal.tsx
+const modalVariants = (0, _fuf_stack_pixel_utils.tv)({
+	slots: {
+		backdrop: "",
+		base: "",
+		body: "py-4",
+		closeButton: "",
+		footer: "border-t border-t-divider",
+		header: "border-b border-b-divider",
+		wrapper: ""
+	},
+	variants: { size: {
+		sm: { base: "max-w-sm" },
+		md: { base: "max-w-md" },
+		lg: { base: "max-w-lg" },
+		xl: { base: "max-w-5xl" },
+		full: { base: "h-[80dvh] max-w-full" }
+	} }
+});
+/**
+* Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)
+*/
+const Modal = ({ children = null, className = void 0, disableAnimation = false, footer = void 0, header = void 0, isOpen, onClose, portalContainer = void 0, size = "md", testId = void 0 }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_modal.Modal, {
+		backdrop: "opaque",
+		classNames: (0, _fuf_stack_pixel_utils.variantsToClassNames)(modalVariants({ size }), className, "base"),
+		"data-testid": testId,
+		disableAnimation,
+		isOpen,
+		onClose,
+		placement: "center",
+		portalContainer,
+		scrollBehavior: "inside",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_modal.ModalContent, {
+			"data-testid": testId ? `modal_${testId}` : "modal",
+			children: () => {
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+					header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_modal.ModalHeader, { children: header }) : null,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_modal.ModalBody, {
+						id: "modal_body",
+						children
+					}),
+					footer ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_heroui_modal.ModalFooter, { children: footer }) : null
+				] });
+			}
+		})
+	});
+};
+//#endregion
+exports.default = Modal;
+exports.modalVariants = modalVariants;
+
+//# sourceMappingURL=Modal.cjs.map

package/dist/Modal/Modal.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.cjs","names":["HeroModal","HeroModalContent","HeroModalHeader","HeroModalBody","HeroModalFooter"],"sources":["../../src/Modal/Modal.tsx"],"sourcesContent":["import type { TVClassName, TVProps } from '@fuf-stack/pixel-utils';\nimport type { ModalProps as HeroModalProps } from '@heroui/modal';\nimport type { ReactNode } from 'react';\n\nimport {\n  Modal as HeroModal,\n  ModalBody as HeroModalBody,\n  ModalContent as HeroModalContent,\n  ModalFooter as HeroModalFooter,\n  ModalHeader as HeroModalHeader,\n} from '@heroui/modal';\n\nimport { tv, variantsToClassNames } from '@fuf-stack/pixel-utils';\n\n// modal variants\nexport const modalVariants = tv({\n  slots: {\n    backdrop: '',\n    base: '',\n    body: 'py-4',\n    closeButton: '',\n    footer: 'border-t border-t-divider',\n    header: 'border-b border-b-divider',\n    wrapper: '',\n  },\n  variants: {\n    size: {\n      sm: { base: 'max-w-sm' },\n      md: { base: 'max-w-md' },\n      lg: { base: 'max-w-lg' },\n      xl: { base: 'max-w-5xl' },\n      full: { base: 'h-[80dvh] max-w-full' },\n    },\n  },\n});\n\ntype VariantProps = TVProps<typeof modalVariants>;\ntype ClassName = TVClassName<typeof modalVariants>;\n\nexport interface ModalProps extends VariantProps {\n  /** modal body content */\n  children?: ReactNode;\n  /** CSS class name */\n  className?: ClassName;\n  /** Disable animations completely */\n  disableAnimation?: boolean;\n  /** modal footer */\n  footer?: ReactNode;\n  /** modal header */\n  header?: ReactNode;\n  /** open state (controlled) */\n  isOpen: boolean;\n  /** close event handler */\n  onClose: () => void;\n  /** The container element in which the overlay portal will be placed */\n  portalContainer?: HeroModalProps['portalContainer'];\n  /** modal size */\n  size?: VariantProps['size'];\n  /** HTML data-testid attribute used in e2e tests */\n  testId?: string;\n}\n\n/**\n * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)\n */\nconst Modal = ({\n  children = null,\n  className = undefined,\n  disableAnimation = false,\n  footer = undefined,\n  header = undefined,\n  isOpen,\n  onClose,\n  portalContainer = undefined,\n  size = 'md',\n  testId = undefined,\n}: ModalProps) => {\n  // classNames from slots\n  const variants = modalVariants({ size });\n  const classNames = variantsToClassNames(variants, className, 'base');\n\n  return (\n    <HeroModal\n      backdrop=\"opaque\"\n      classNames={classNames}\n      data-testid={testId}\n      disableAnimation={disableAnimation}\n      isOpen={isOpen}\n      onClose={onClose}\n      placement=\"center\"\n      portalContainer={portalContainer}\n      scrollBehavior=\"inside\"\n    >\n      <HeroModalContent data-testid={testId ? `modal_${testId}` : 'modal'}>\n        {() => {\n          return (\n            <>\n              {header ? <HeroModalHeader>{header}</HeroModalHeader> : null}\n              <HeroModalBody id=\"modal_body\">{children}</HeroModalBody>\n              {footer ? <HeroModalFooter>{footer}</HeroModalFooter> : null}\n            </>\n          );\n        }}\n      </HeroModalContent>\n    </HeroModal>\n  );\n};\n\nexport default Modal;\n"],"mappings":";;;;;AAeA,MAAa,iBAAA,GAAA,uBAAA,IAAmB;CAC9B,OAAO;EACL,UAAU;EACV,MAAM;EACN,MAAM;EACN,aAAa;EACb,QAAQ;EACR,QAAQ;EACR,SAAS;CACX;CACA,UAAU,EACR,MAAM;EACJ,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,WAAW;EACvB,IAAI,EAAE,MAAM,YAAY;EACxB,MAAM,EAAE,MAAM,uBAAuB;CACvC,EACF;AACF,CAAC;;;;AA+BD,MAAM,SAAS,EACb,WAAW,MACX,YAAY,KAAA,GACZ,mBAAmB,OACnB,SAAS,KAAA,GACT,SAAS,KAAA,GACT,QACA,SACA,kBAAkB,KAAA,GAClB,OAAO,MACP,SAAS,KAAA,QACO;CAKhB,OACE,iBAAA,GAAA,kBAAA,KAACA,cAAAA,OAAD;EACE,UAAS;EACT,aAAA,GAAA,uBAAA,sBANa,cAAc,EAAE,KAAK,CACS,GAAG,WAAW,MAKpC;EACrB,eAAa;EACK;EACV;EACC;EACT,WAAU;EACO;EACjB,gBAAe;YAEf,iBAAA,GAAA,kBAAA,KAACC,cAAAA,cAAD;GAAkB,eAAa,SAAS,SAAS,WAAW;mBACnD;IACL,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;KACG,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;KACxD,iBAAA,GAAA,kBAAA,KAACC,cAAAA,WAAD;MAAe,IAAG;MAAc;KAAwB,CAAA;KACvD,SAAS,iBAAA,GAAA,kBAAA,KAACC,cAAAA,aAAD,EAAA,UAAkB,OAAwB,CAAA,IAAI;IACxD,EAAA,CAAA;GAEN;EACgB,CAAA;CACT,CAAA;AAEf"}

package/dist/Modal/Modal.d.cts

@@ -0,0 +1,126 @@
+import { TVClassName, TVProps } from "@fuf-stack/pixel-utils";
+import { ReactNode } from "react";
+import { ModalProps } from "@heroui/modal";
+
+//#region src/Modal/Modal.d.ts
+declare const modalVariants: import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+    xl: {
+      base: string;
+    };
+    full: {
+      base: string;
+    };
+  };
+}, {
+  backdrop: string;
+  base: string;
+  body: string;
+  closeButton: string;
+  footer: string;
+  header: string;
+  wrapper: string;
+}, undefined, {
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+    xl: {
+      base: string;
+    };
+    full: {
+      base: string;
+    };
+  };
+}, {
+  backdrop: string;
+  base: string;
+  body: string;
+  closeButton: string;
+  footer: string;
+  header: string;
+  wrapper: string;
+}, import("tailwind-variants").TVReturnType<{
+  size: {
+    sm: {
+      base: string;
+    };
+    md: {
+      base: string;
+    };
+    lg: {
+      base: string;
+    };
+    xl: {
+      base: string;
+    };
+    full: {
+      base: string;
+    };
+  };
+}, {
+  backdrop: string;
+  base: string;
+  body: string;
+  closeButton: string;
+  footer: string;
+  header: string;
+  wrapper: string;
+}, undefined, unknown, unknown, undefined>>;
+type VariantProps = TVProps<typeof modalVariants>;
+type ClassName = TVClassName<typeof modalVariants>;
+interface ModalProps$1 extends VariantProps {
+  /** modal body content */
+  children?: ReactNode;
+  /** CSS class name */
+  className?: ClassName;
+  /** Disable animations completely */
+  disableAnimation?: boolean;
+  /** modal footer */
+  footer?: ReactNode;
+  /** modal header */
+  header?: ReactNode;
+  /** open state (controlled) */
+  isOpen: boolean;
+  /** close event handler */
+  onClose: () => void;
+  /** The container element in which the overlay portal will be placed */
+  portalContainer?: ModalProps['portalContainer'];
+  /** modal size */
+  size?: VariantProps['size'];
+  /** HTML data-testid attribute used in e2e tests */
+  testId?: string;
+}
+/**
+ * Modal component based on [HeroUI Modal](https://www.heroui.com//docs/components/modal)
+ */
+declare const Modal: ({
+  children,
+  className,
+  disableAnimation,
+  footer,
+  header,
+  isOpen,
+  onClose,
+  portalContainer,
+  size,
+  testId
+}: ModalProps$1) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Modal, ModalProps$1 as ModalProps, modalVariants };
+//# sourceMappingURL=Modal.d.cts.map

package/dist/Modal/Modal.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.cts","names":[],"sources":["../../src/Modal/Modal.tsx"],"mappings":";;;;;cAea,aAAA,8BAAa,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqBrB,YAAA,GAAe,OAAO,QAAQ,aAAA;AAAA,KAC9B,SAAA,GAAY,WAAW,QAAQ,aAAA;AAAA,UAEnB,YAAA,SAAmB,YAAA;EAkB3B;EAhBP,QAAA,GAAW,SAAA;EAFmC;EAI9C,SAAA,GAAY,SAAA;EAJsB;EAMlC,gBAAA;EAJW;EAMX,MAAA,GAAS,SAAA;EAJG;EAMZ,MAAA,GAAS,SAAA;EAFT;EAIA,MAAA;EAFA;EAIA,OAAA;EAFA;EAIA,eAAA,GAAkB,UAAA;EAAlB;EAEA,IAAA,GAAO,YAAA;EAAP;EAEA,MAAA;AAAA;;AAAM;AACP;cAKK,KAAA;EAAS,QAAA;EAAA,SAAA;EAAA,gBAAA;EAAA,MAAA;EAAA,MAAA;EAAA,MAAA;EAAA,OAAA;EAAA,eAAA;EAAA,IAAA;EAAA;AAAA,GAWZ,YAAA,iCAAU,GAAA,CAAA,OAAA"}