@vtex/faststore 0.0.1

package/dist/particles/menu/menu.js

@@ -0,0 +1,409 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/particles/menu/menu.tsx
+const MenuRootDefinition = defineComponent({
+	name: "MenuRoot",
+	importPath: "@vtex/faststore/components",
+	component: MenuRoot,
+	editor: {
+		label: "Menu Root",
+		category: "layout"
+	},
+	schema: { modal: {
+		type: "boolean",
+		default: true,
+		label: "Modal"
+	} },
+	guideline: "Root of a floating dropdown menu. Manages open state and keyboard navigation. Compose as: MenuRoot > (MenuTrigger + MenuPortal > (MenuBackdrop + MenuPositioner > MenuPopup > [MenuItem + MenuLinkItem + MenuSeparator + MenuGroup > (MenuGroupLabel + [MenuCheckboxItem > MenuCheckboxItemIndicator]) + MenuRadioGroup > [MenuRadioItem > MenuRadioItemIndicator]])). Set modal=false only when the menu must coexist with page interactions."
+});
+const MenuTriggerDefinition = defineComponent({
+	name: "MenuTrigger",
+	importPath: "@vtex/faststore/components",
+	component: MenuTrigger,
+	editor: {
+		label: "Menu Trigger",
+		category: "action"
+	},
+	schema: {},
+	guideline: "Button that opens the menu. Place inside Menu.Root."
+});
+const MenuPortalDefinition = defineComponent({
+	name: "MenuPortal",
+	importPath: "@vtex/faststore/components",
+	component: MenuPortal,
+	editor: {
+		label: "Menu Portal",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Teleports menu content to <body> to avoid overflow/z-index issues."
+});
+const MenuBackdropDefinition = defineComponent({
+	name: "MenuBackdrop",
+	importPath: "@vtex/faststore/components",
+	component: MenuBackdrop,
+	editor: {
+		label: "Menu Backdrop",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Invisible overlay that closes the menu when clicked outside."
+});
+const MenuPositionerDefinition = defineComponent({
+	name: "MenuPositioner",
+	importPath: "@vtex/faststore/components",
+	component: MenuPositioner,
+	editor: {
+		label: "Menu Positioner",
+		category: "layout"
+	},
+	schema: {
+		side: {
+			type: [
+				"top",
+				"bottom",
+				"left",
+				"right"
+			],
+			default: "bottom",
+			label: "Side"
+		},
+		align: {
+			type: [
+				"start",
+				"center",
+				"end"
+			],
+			default: "start",
+			label: "Align"
+		},
+		sideOffset: {
+			type: "number",
+			default: 0,
+			label: "Side Offset"
+		},
+		alignOffset: {
+			type: "number",
+			default: 0,
+			label: "Align Offset"
+		}
+	},
+	guideline: "Controls menu popup placement relative to the trigger."
+});
+const MenuPopupDefinition = defineComponent({
+	name: "MenuPopup",
+	importPath: "@vtex/faststore/components",
+	component: MenuPopup,
+	editor: {
+		label: "Menu Popup",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Visible container for the menu items. Apply background, shadow, and border styles here."
+});
+const MenuArrowDefinition = defineComponent({
+	name: "MenuArrow",
+	importPath: "@vtex/faststore/components",
+	component: MenuArrow,
+	editor: {
+		label: "Menu Arrow",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Pointing arrow attached to the popup. Optional — omit when not using an arrow indicator."
+});
+const MenuItemDefinition = defineComponent({
+	name: "MenuItem",
+	importPath: "@vtex/faststore/components",
+	component: MenuItem,
+	editor: {
+		label: "Menu Item",
+		category: "layout"
+	},
+	schema: { closeOnClick: {
+		type: "boolean",
+		default: true,
+		label: "Close On Click"
+	} },
+	guideline: "Single action item in a Menu. Set closeOnClick=false for items that change state without dismissing."
+});
+const MenuLinkItemDefinition = defineComponent({
+	name: "MenuLinkItem",
+	importPath: "@vtex/faststore/components",
+	component: MenuLinkItem,
+	editor: {
+		label: "Menu Link Item",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Anchor-based menu item for navigation links. Renders as <a> with proper keyboard support."
+});
+const MenuSeparatorDefinition = defineComponent({
+	name: "MenuSeparator",
+	importPath: "@vtex/faststore/components",
+	component: MenuSeparator,
+	editor: {
+		label: "Menu Separator",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Visual divider between menu items or groups."
+});
+const MenuGroupDefinition = defineComponent({
+	name: "MenuGroup",
+	importPath: "@vtex/faststore/components",
+	component: MenuGroup,
+	editor: {
+		label: "Menu Group",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Groups related menu items under a shared MenuGroupLabel for semantic grouping."
+});
+const MenuGroupLabelDefinition = defineComponent({
+	name: "MenuGroupLabel",
+	importPath: "@vtex/faststore/components",
+	component: MenuGroupLabel,
+	editor: {
+		label: "Menu Group Label",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Non-interactive label for a Menu.Group. Announced by screen readers as a group name."
+});
+const MenuCheckboxItemDefinition = defineComponent({
+	name: "MenuCheckboxItem",
+	importPath: "@vtex/faststore/components",
+	component: MenuCheckboxItem,
+	editor: {
+		label: "Menu Checkbox Item",
+		category: "layout"
+	},
+	schema: {
+		checked: {
+			type: "boolean",
+			default: false,
+			label: "Checked"
+		},
+		closeOnClick: {
+			type: "boolean",
+			default: false,
+			label: "Close On Click"
+		}
+	},
+	guideline: "Toggle item with checkmark. Style check state via data-checked attribute."
+});
+const MenuCheckboxItemIndicatorDefinition = defineComponent({
+	name: "MenuCheckboxItemIndicator",
+	importPath: "@vtex/faststore/components",
+	component: MenuCheckboxItemIndicator,
+	editor: {
+		label: "Menu Checkbox Item Indicator",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Checkmark icon shown inside MenuCheckboxItem when checked."
+});
+const MenuRadioGroupDefinition = defineComponent({
+	name: "MenuRadioGroup",
+	importPath: "@vtex/faststore/components",
+	component: MenuRadioGroup,
+	editor: {
+		label: "Menu Radio Group",
+		category: "layout"
+	},
+	schema: { value: {
+		type: "string",
+		label: "Value"
+	} },
+	guideline: "Mutually exclusive option group inside a menu. MenuRadioGroup.value controls selection."
+});
+const MenuRadioItemDefinition = defineComponent({
+	name: "MenuRadioItem",
+	importPath: "@vtex/faststore/components",
+	component: MenuRadioItem,
+	editor: {
+		label: "Menu Radio Item",
+		category: "layout"
+	},
+	schema: { value: {
+		type: "string",
+		label: "Value"
+	} },
+	guideline: "One option inside MenuRadioGroup. Requires a unique value prop."
+});
+const MenuRadioItemIndicatorDefinition = defineComponent({
+	name: "MenuRadioItemIndicator",
+	importPath: "@vtex/faststore/components",
+	component: MenuRadioItemIndicator,
+	editor: {
+		label: "Menu Radio Item Indicator",
+		category: "layout"
+	},
+	schema: {},
+	guideline: "Radio indicator icon shown inside MenuRadioItem when selected."
+});
+function MenuRoot({ modal = true, children }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		modal,
+		children
+	});
+}
+function MenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		...props,
+		className,
+		"data-fs-menu-trigger": "",
+		children
+	});
+}
+function MenuPortal({ children }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children });
+}
+function MenuBackdrop({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Backdrop, {
+		...props,
+		className,
+		"data-fs-menu-backdrop": "",
+		children
+	});
+}
+function MenuPositioner({ side = "bottom", align = "start", sideOffset = 0, alignOffset = 0, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		...props,
+		side,
+		align,
+		sideOffset,
+		alignOffset,
+		className,
+		"data-fs-menu-positioner": "",
+		children
+	});
+}
+function MenuPopup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Popup, {
+		...props,
+		className,
+		"data-fs-menu-popup": "",
+		children
+	});
+}
+function MenuArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Arrow, {
+		...props,
+		className,
+		"data-fs-menu-arrow": "",
+		children
+	});
+}
+function MenuItem({ closeOnClick = true, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		...props,
+		closeOnClick,
+		className,
+		"data-fs-menu-item": "",
+		children
+	});
+}
+function MenuLinkItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.LinkItem, {
+		...props,
+		className,
+		"data-fs-menu-link-item": "",
+		children
+	});
+}
+function MenuSeparator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		...props,
+		className,
+		"data-fs-menu-separator": "",
+		children
+	});
+}
+function MenuGroup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		...props,
+		className,
+		"data-fs-menu-group": "",
+		children
+	});
+}
+function MenuGroupLabel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		...props,
+		className,
+		"data-fs-menu-group-label": "",
+		children
+	});
+}
+function MenuCheckboxItem({ checked, closeOnClick = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+		...props,
+		checked,
+		closeOnClick,
+		className,
+		"data-fs-menu-checkbox-item": "",
+		children
+	});
+}
+function MenuCheckboxItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		...props,
+		className,
+		"data-fs-menu-checkbox-item-indicator": "",
+		children
+	});
+}
+function MenuRadioGroup({ value, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		...props,
+		value,
+		className,
+		"data-fs-menu-radio-group": "",
+		children
+	});
+}
+function MenuRadioItem({ value, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItem, {
+		...props,
+		value,
+		className,
+		"data-fs-menu-radio-item": "",
+		children
+	});
+}
+function MenuRadioItemIndicator({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		...props,
+		className,
+		"data-fs-menu-radio-item-indicator": "",
+		children
+	});
+}
+const Menu$1 = {
+	Root: MenuRoot,
+	Trigger: MenuTrigger,
+	Portal: MenuPortal,
+	Backdrop: MenuBackdrop,
+	Positioner: MenuPositioner,
+	Popup: MenuPopup,
+	Arrow: MenuArrow,
+	Item: MenuItem,
+	LinkItem: MenuLinkItem,
+	Separator: MenuSeparator,
+	Group: MenuGroup,
+	GroupLabel: MenuGroupLabel,
+	CheckboxItem: MenuCheckboxItem,
+	CheckboxItemIndicator: MenuCheckboxItemIndicator,
+	RadioGroup: MenuRadioGroup,
+	RadioItem: MenuRadioItem,
+	RadioItemIndicator: MenuRadioItemIndicator
+};
+//#endregion
+export { Menu$1 as Menu, MenuArrow, MenuArrowDefinition, MenuBackdrop, MenuBackdropDefinition, MenuCheckboxItem, MenuCheckboxItemDefinition, MenuCheckboxItemIndicator, MenuCheckboxItemIndicatorDefinition, MenuGroup, MenuGroupDefinition, MenuGroupLabel, MenuGroupLabelDefinition, MenuItem, MenuItemDefinition, MenuLinkItem, MenuLinkItemDefinition, MenuPopup, MenuPopupDefinition, MenuPortal, MenuPortalDefinition, MenuPositioner, MenuPositionerDefinition, MenuRadioGroup, MenuRadioGroupDefinition, MenuRadioItem, MenuRadioItemDefinition, MenuRadioItemIndicator, MenuRadioItemIndicatorDefinition, MenuRoot, MenuRootDefinition, MenuSeparator, MenuSeparatorDefinition, MenuTrigger, MenuTriggerDefinition };
+
+//# sourceMappingURL=menu.js.map

package/dist/particles/menu/menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu.js","names":["BaseMenu","Menu"],"sources":["../../../src/particles/menu/menu.tsx"],"sourcesContent":["'use client';\nimport { Menu as BaseMenu } from '@base-ui/react/menu';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ComponentPropsWithRef, ReactNode } from 'react';\n\nexport type MenuSide = 'top' | 'bottom' | 'left' | 'right';\nexport type MenuAlign = 'start' | 'center' | 'end';\n\nexport type MenuRootProps = {\n  modal?: boolean;\n  children?: ReactNode;\n};\n\nexport type MenuTriggerProps = ComponentPropsWithRef<'button'>;\n\nexport type MenuPortalProps = {\n  children?: ReactNode;\n};\n\nexport type MenuBackdropProps = ComponentPropsWithRef<'div'>;\n\nexport type MenuPositionerProps = ComponentPropsWithRef<'div'> & {\n  side?: MenuSide;\n  align?: MenuAlign;\n  sideOffset?: number;\n  alignOffset?: number;\n};\n\nexport type MenuPopupProps = ComponentPropsWithRef<'div'>;\n\nexport type MenuArrowProps = ComponentPropsWithRef<'div'>;\n\nexport type MenuItemProps = ComponentPropsWithRef<'div'> & {\n  closeOnClick?: boolean;\n};\n\nexport type MenuLinkItemProps = ComponentPropsWithRef<'a'>;\n\nexport type MenuSeparatorProps = ComponentPropsWithRef<'div'>;\n\nexport type MenuGroupProps = ComponentPropsWithRef<'div'>;\n\nexport type MenuGroupLabelProps = ComponentPropsWithRef<'div'>;\n\nexport type MenuCheckboxItemProps = ComponentPropsWithRef<'div'> & {\n  checked?: boolean;\n  closeOnClick?: boolean;\n};\n\nexport type MenuCheckboxItemIndicatorProps = Omit<\n  ComponentPropsWithRef<typeof BaseMenu.CheckboxItemIndicator>,\n  'className'\n> & {\n  className?: string;\n};\n\nexport type MenuRadioGroupProps = ComponentPropsWithRef<'div'> & {\n  value?: string;\n};\n\nexport type MenuRadioItemProps = ComponentPropsWithRef<'div'> & {\n  value: string;\n};\n\nexport type MenuRadioItemIndicatorProps = Omit<\n  ComponentPropsWithRef<typeof BaseMenu.RadioItemIndicator>,\n  'className'\n> & {\n  className?: string;\n};\n\nexport const MenuRootDefinition = defineComponent<MenuRootProps>({\n  name: 'MenuRoot',\n  importPath: '@vtex/faststore/components',\n  component: MenuRoot,\n  editor: { label: 'Menu Root', category: 'layout' },\n  schema: {\n    modal: { type: 'boolean', default: true, label: 'Modal' },\n  },\n  guideline:\n    'Root of a floating dropdown menu. Manages open state and keyboard navigation. Compose as: MenuRoot > (MenuTrigger + MenuPortal > (MenuBackdrop + MenuPositioner > MenuPopup > [MenuItem + MenuLinkItem + MenuSeparator + MenuGroup > (MenuGroupLabel + [MenuCheckboxItem > MenuCheckboxItemIndicator]) + MenuRadioGroup > [MenuRadioItem > MenuRadioItemIndicator]])). Set modal=false only when the menu must coexist with page interactions.',\n});\n\nexport const MenuTriggerDefinition = defineComponent<MenuTriggerProps>({\n  name: 'MenuTrigger',\n  importPath: '@vtex/faststore/components',\n  component: MenuTrigger,\n  editor: { label: 'Menu Trigger', category: 'action' },\n  schema: {},\n  guideline: 'Button that opens the menu. Place inside Menu.Root.',\n});\n\nexport const MenuPortalDefinition = defineComponent<MenuPortalProps>({\n  name: 'MenuPortal',\n  importPath: '@vtex/faststore/components',\n  component: MenuPortal,\n  editor: { label: 'Menu Portal', category: 'layout' },\n  schema: {},\n  guideline: 'Teleports menu content to <body> to avoid overflow/z-index issues.',\n});\n\nexport const MenuBackdropDefinition = defineComponent<MenuBackdropProps>({\n  name: 'MenuBackdrop',\n  importPath: '@vtex/faststore/components',\n  component: MenuBackdrop,\n  editor: { label: 'Menu Backdrop', category: 'layout' },\n  schema: {},\n  guideline: 'Invisible overlay that closes the menu when clicked outside.',\n});\n\nexport const MenuPositionerDefinition = defineComponent<MenuPositionerProps>({\n  name: 'MenuPositioner',\n  importPath: '@vtex/faststore/components',\n  component: MenuPositioner,\n  editor: { label: 'Menu Positioner', category: 'layout' },\n  schema: {\n    side: { type: ['top', 'bottom', 'left', 'right'] as const, default: 'bottom', label: 'Side' },\n    align: { type: ['start', 'center', 'end'] as const, default: 'start', label: 'Align' },\n    sideOffset: { type: 'number', default: 0, label: 'Side Offset' },\n    alignOffset: { type: 'number', default: 0, label: 'Align Offset' },\n  },\n  guideline: 'Controls menu popup placement relative to the trigger.',\n});\n\nexport const MenuPopupDefinition = defineComponent<MenuPopupProps>({\n  name: 'MenuPopup',\n  importPath: '@vtex/faststore/components',\n  component: MenuPopup,\n  editor: { label: 'Menu Popup', category: 'layout' },\n  schema: {},\n  guideline: 'Visible container for the menu items. Apply background, shadow, and border styles here.',\n});\n\nexport const MenuArrowDefinition = defineComponent<MenuArrowProps>({\n  name: 'MenuArrow',\n  importPath: '@vtex/faststore/components',\n  component: MenuArrow,\n  editor: { label: 'Menu Arrow', category: 'layout' },\n  schema: {},\n  guideline: 'Pointing arrow attached to the popup. Optional — omit when not using an arrow indicator.',\n});\n\nexport const MenuItemDefinition = defineComponent<MenuItemProps>({\n  name: 'MenuItem',\n  importPath: '@vtex/faststore/components',\n  component: MenuItem,\n  editor: { label: 'Menu Item', category: 'layout' },\n  schema: {\n    closeOnClick: { type: 'boolean', default: true, label: 'Close On Click' },\n  },\n  guideline: 'Single action item in a Menu. Set closeOnClick=false for items that change state without dismissing.',\n});\n\nexport const MenuLinkItemDefinition = defineComponent<MenuLinkItemProps>({\n  name: 'MenuLinkItem',\n  importPath: '@vtex/faststore/components',\n  component: MenuLinkItem,\n  editor: { label: 'Menu Link Item', category: 'layout' },\n  schema: {},\n  guideline: 'Anchor-based menu item for navigation links. Renders as <a> with proper keyboard support.',\n});\n\nexport const MenuSeparatorDefinition = defineComponent<MenuSeparatorProps>({\n  name: 'MenuSeparator',\n  importPath: '@vtex/faststore/components',\n  component: MenuSeparator,\n  editor: { label: 'Menu Separator', category: 'layout' },\n  schema: {},\n  guideline: 'Visual divider between menu items or groups.',\n});\n\nexport const MenuGroupDefinition = defineComponent<MenuGroupProps>({\n  name: 'MenuGroup',\n  importPath: '@vtex/faststore/components',\n  component: MenuGroup,\n  editor: { label: 'Menu Group', category: 'layout' },\n  schema: {},\n  guideline: 'Groups related menu items under a shared MenuGroupLabel for semantic grouping.',\n});\n\nexport const MenuGroupLabelDefinition = defineComponent<MenuGroupLabelProps>({\n  name: 'MenuGroupLabel',\n  importPath: '@vtex/faststore/components',\n  component: MenuGroupLabel,\n  editor: { label: 'Menu Group Label', category: 'layout' },\n  schema: {},\n  guideline: 'Non-interactive label for a Menu.Group. Announced by screen readers as a group name.',\n});\n\nexport const MenuCheckboxItemDefinition = defineComponent<MenuCheckboxItemProps>({\n  name: 'MenuCheckboxItem',\n  importPath: '@vtex/faststore/components',\n  component: MenuCheckboxItem,\n  editor: { label: 'Menu Checkbox Item', category: 'layout' },\n  schema: {\n    checked: { type: 'boolean', default: false, label: 'Checked' },\n    closeOnClick: { type: 'boolean', default: false, label: 'Close On Click' },\n  },\n  guideline: 'Toggle item with checkmark. Style check state via data-checked attribute.',\n});\n\nexport const MenuCheckboxItemIndicatorDefinition = defineComponent<MenuCheckboxItemIndicatorProps>({\n  name: 'MenuCheckboxItemIndicator',\n  importPath: '@vtex/faststore/components',\n  component: MenuCheckboxItemIndicator,\n  editor: { label: 'Menu Checkbox Item Indicator', category: 'layout' },\n  schema: {},\n  guideline: 'Checkmark icon shown inside MenuCheckboxItem when checked.',\n});\n\nexport const MenuRadioGroupDefinition = defineComponent<MenuRadioGroupProps>({\n  name: 'MenuRadioGroup',\n  importPath: '@vtex/faststore/components',\n  component: MenuRadioGroup,\n  editor: { label: 'Menu Radio Group', category: 'layout' },\n  schema: {\n    value: { type: 'string', label: 'Value' },\n  },\n  guideline: 'Mutually exclusive option group inside a menu. MenuRadioGroup.value controls selection.',\n});\n\nexport const MenuRadioItemDefinition = defineComponent<MenuRadioItemProps>({\n  name: 'MenuRadioItem',\n  importPath: '@vtex/faststore/components',\n  component: MenuRadioItem,\n  editor: { label: 'Menu Radio Item', category: 'layout' },\n  schema: {\n    value: { type: 'string', label: 'Value' },\n  },\n  guideline: 'One option inside MenuRadioGroup. Requires a unique value prop.',\n});\n\nexport const MenuRadioItemIndicatorDefinition = defineComponent<MenuRadioItemIndicatorProps>({\n  name: 'MenuRadioItemIndicator',\n  importPath: '@vtex/faststore/components',\n  component: MenuRadioItemIndicator,\n  editor: { label: 'Menu Radio Item Indicator', category: 'layout' },\n  schema: {},\n  guideline: 'Radio indicator icon shown inside MenuRadioItem when selected.',\n});\n\nexport function MenuRoot({ modal = true, children }: MenuRootProps) {\n  return <BaseMenu.Root modal={modal}>{children}</BaseMenu.Root>;\n}\n\nexport function MenuTrigger({ className, children, ...props }: MenuTriggerProps) {\n  return (\n    <BaseMenu.Trigger {...props} className={className} data-fs-menu-trigger=\"\">\n      {children}\n    </BaseMenu.Trigger>\n  );\n}\n\nexport function MenuPortal({ children }: MenuPortalProps) {\n  return <BaseMenu.Portal>{children}</BaseMenu.Portal>;\n}\n\nexport function MenuBackdrop({ className, children, ...props }: MenuBackdropProps) {\n  return (\n    <BaseMenu.Backdrop {...props} className={className} data-fs-menu-backdrop=\"\">\n      {children}\n    </BaseMenu.Backdrop>\n  );\n}\n\nexport function MenuPositioner({\n  side = 'bottom',\n  align = 'start',\n  sideOffset = 0,\n  alignOffset = 0,\n  className,\n  children,\n  ...props\n}: MenuPositionerProps) {\n  return (\n    <BaseMenu.Positioner\n      {...props}\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      alignOffset={alignOffset}\n      className={className}\n      data-fs-menu-positioner=\"\"\n    >\n      {children}\n    </BaseMenu.Positioner>\n  );\n}\n\nexport function MenuPopup({ className, children, ...props }: MenuPopupProps) {\n  return (\n    <BaseMenu.Popup {...props} className={className} data-fs-menu-popup=\"\">\n      {children}\n    </BaseMenu.Popup>\n  );\n}\n\nexport function MenuArrow({ className, children, ...props }: MenuArrowProps) {\n  return (\n    <BaseMenu.Arrow {...props} className={className} data-fs-menu-arrow=\"\">\n      {children}\n    </BaseMenu.Arrow>\n  );\n}\n\nexport function MenuItem({ closeOnClick = true, className, children, ...props }: MenuItemProps) {\n  return (\n    <BaseMenu.Item {...props} closeOnClick={closeOnClick} className={className} data-fs-menu-item=\"\">\n      {children}\n    </BaseMenu.Item>\n  );\n}\n\nexport function MenuLinkItem({ className, children, ...props }: MenuLinkItemProps) {\n  return (\n    <BaseMenu.LinkItem {...props} className={className} data-fs-menu-link-item=\"\">\n      {children}\n    </BaseMenu.LinkItem>\n  );\n}\n\nexport function MenuSeparator({ className, children, ...props }: MenuSeparatorProps) {\n  return (\n    <BaseMenu.Separator {...props} className={className} data-fs-menu-separator=\"\">\n      {children}\n    </BaseMenu.Separator>\n  );\n}\n\nexport function MenuGroup({ className, children, ...props }: MenuGroupProps) {\n  return (\n    <BaseMenu.Group {...props} className={className} data-fs-menu-group=\"\">\n      {children}\n    </BaseMenu.Group>\n  );\n}\n\nexport function MenuGroupLabel({ className, children, ...props }: MenuGroupLabelProps) {\n  return (\n    <BaseMenu.GroupLabel {...props} className={className} data-fs-menu-group-label=\"\">\n      {children}\n    </BaseMenu.GroupLabel>\n  );\n}\n\nexport function MenuCheckboxItem({\n  checked,\n  closeOnClick = false,\n  className,\n  children,\n  ...props\n}: MenuCheckboxItemProps) {\n  return (\n    <BaseMenu.CheckboxItem\n      {...props}\n      checked={checked}\n      closeOnClick={closeOnClick}\n      className={className}\n      data-fs-menu-checkbox-item=\"\"\n    >\n      {children}\n    </BaseMenu.CheckboxItem>\n  );\n}\n\nexport function MenuCheckboxItemIndicator({ className, children, ...props }: MenuCheckboxItemIndicatorProps) {\n  return (\n    <BaseMenu.CheckboxItemIndicator {...props} className={className} data-fs-menu-checkbox-item-indicator=\"\">\n      {children}\n    </BaseMenu.CheckboxItemIndicator>\n  );\n}\n\nexport function MenuRadioGroup({ value, className, children, ...props }: MenuRadioGroupProps) {\n  return (\n    <BaseMenu.RadioGroup {...props} value={value} className={className} data-fs-menu-radio-group=\"\">\n      {children}\n    </BaseMenu.RadioGroup>\n  );\n}\n\nexport function MenuRadioItem({ value, className, children, ...props }: MenuRadioItemProps) {\n  return (\n    <BaseMenu.RadioItem {...props} value={value} className={className} data-fs-menu-radio-item=\"\">\n      {children}\n    </BaseMenu.RadioItem>\n  );\n}\n\nexport function MenuRadioItemIndicator({ className, children, ...props }: MenuRadioItemIndicatorProps) {\n  return (\n    <BaseMenu.RadioItemIndicator {...props} className={className} data-fs-menu-radio-item-indicator=\"\">\n      {children}\n    </BaseMenu.RadioItemIndicator>\n  );\n}\n\nexport const Menu = {\n  Root: MenuRoot,\n  Trigger: MenuTrigger,\n  Portal: MenuPortal,\n  Backdrop: MenuBackdrop,\n  Positioner: MenuPositioner,\n  Popup: MenuPopup,\n  Arrow: MenuArrow,\n  Item: MenuItem,\n  LinkItem: MenuLinkItem,\n  Separator: MenuSeparator,\n  Group: MenuGroup,\n  GroupLabel: MenuGroupLabel,\n  CheckboxItem: MenuCheckboxItem,\n  CheckboxItemIndicator: MenuCheckboxItemIndicator,\n  RadioGroup: MenuRadioGroup,\n  RadioItem: MenuRadioItem,\n  RadioItemIndicator: MenuRadioItemIndicator,\n};\n"],"mappings":"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"}

package/dist/particles/menubar/menubar.d.ts

@@ -0,0 +1,18 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ReactNode } from "react";
+//#region src/particles/menubar/menubar.d.ts
+export type MenubarOrientation = 'horizontal' | 'vertical';
+export type MenubarRootProps = {
+  disabled?: boolean;
+  orientation?: MenubarOrientation;
+  className?: string;
+  children?: ReactNode;
+};
+export declare const MenubarRootDefinition: ComponentDefinition<MenubarRootProps>;
+export declare function MenubarRoot({ disabled, orientation, className, children }: MenubarRootProps): import("react/jsx-runtime").JSX.Element;
+export declare const Menubar: {
+  Root: typeof MenubarRoot;
+};
+//#endregion
+//# sourceMappingURL=menubar.d.ts.map

package/dist/particles/menubar/menubar.js

@@ -0,0 +1,42 @@
+"use client";
+import { defineComponent } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { jsx } from "react/jsx-runtime";
+import { Menubar } from "@base-ui/react/menubar";
+//#region src/particles/menubar/menubar.tsx
+const MenubarRootDefinition = defineComponent({
+	name: "MenubarRoot",
+	importPath: "@vtex/faststore/components",
+	component: MenubarRoot,
+	editor: {
+		label: "Menubar Root",
+		category: "layout"
+	},
+	schema: {
+		disabled: {
+			type: "boolean",
+			default: false,
+			label: "Disabled"
+		},
+		orientation: {
+			type: ["horizontal", "vertical"],
+			default: "horizontal",
+			label: "Orientation"
+		}
+	},
+	guideline: "Top-level navigation bar connecting multiple Menu instances with unified keyboard focus cycling. Use for app-level navbars with File/Edit/View-style menus. Menus inside Menubar use the Menu.* namespace."
+});
+function MenubarRoot({ disabled = false, orientation = "horizontal", className, children }) {
+	return /* @__PURE__ */ jsx(Menubar, {
+		disabled,
+		orientation,
+		className,
+		"data-fs-menubar-root": "",
+		children
+	});
+}
+const Menubar$1 = { Root: MenubarRoot };
+//#endregion
+export { Menubar$1 as Menubar, MenubarRoot, MenubarRootDefinition };
+
+//# sourceMappingURL=menubar.js.map

package/dist/particles/menubar/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["BaseMenubar","Menubar"],"sources":["../../../src/particles/menubar/menubar.tsx"],"sourcesContent":["'use client';\nimport { Menubar as BaseMenubar } from '@base-ui/react/menubar';\nimport { defineComponent } from '@vtex/fs-core';\nimport type { ReactNode } from 'react';\n\nexport type MenubarOrientation = 'horizontal' | 'vertical';\n\nexport type MenubarRootProps = {\n  disabled?: boolean;\n  orientation?: MenubarOrientation;\n  className?: string;\n  children?: ReactNode;\n};\n\nexport const MenubarRootDefinition = defineComponent<MenubarRootProps>({\n  name: 'MenubarRoot',\n  importPath: '@vtex/faststore/components',\n  component: MenubarRoot,\n  editor: { label: 'Menubar Root', category: 'layout' },\n  schema: {\n    disabled: { type: 'boolean', default: false, label: 'Disabled' },\n    orientation: { type: ['horizontal', 'vertical'] as const, default: 'horizontal', label: 'Orientation' },\n  },\n  guideline:\n    'Top-level navigation bar connecting multiple Menu instances with unified keyboard focus cycling. Use for app-level navbars with File/Edit/View-style menus. Menus inside Menubar use the Menu.* namespace.',\n});\n\nexport function MenubarRoot({ disabled = false, orientation = 'horizontal', className, children }: MenubarRootProps) {\n  return (\n    <BaseMenubar disabled={disabled} orientation={orientation} className={className} data-fs-menubar-root=\"\">\n      {children}\n    </BaseMenubar>\n  );\n}\n\nexport const Menubar = {\n  Root: MenubarRoot,\n};\n"],"mappings":";;;;;;AAcA,MAAa,wBAAwB,gBAAkC;CACrE,MAAM;CACN,YAAY;CACZ,WAAW;CACX,QAAQ;EAAE,OAAO;EAAgB,UAAU;CAAS;CACpD,QAAQ;EACN,UAAU;GAAE,MAAM;GAAW,SAAS;GAAO,OAAO;EAAW;EAC/D,aAAa;GAAE,MAAM,CAAC,cAAc,UAAU;GAAY,SAAS;GAAc,OAAO;EAAc;CACxG;CACA,WACE;AACJ,CAAC;AAED,SAAgB,YAAY,EAAE,WAAW,OAAO,cAAc,cAAc,WAAW,YAA8B;CACnH,OACE,oBAACA,SAAD;EAAuB;EAAuB;EAAwB;EAAW,wBAAqB;EACnG;CACU,CAAA;AAEjB;AAEA,MAAaC,YAAU,EACrB,MAAM,YACR"}

package/dist/particles/meter/meter.d.ts

@@ -0,0 +1,36 @@
+import { ComponentDefinition } from "../../core/dist/define-component.js";
+import "../../core/dist/index.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/particles/meter/meter.d.ts
+export type MeterRootProps = Omit<ComponentPropsWithRef<'div'>, 'defaultValue'> & {
+  value: number;
+  min?: number;
+  max?: number;
+  locale?: string;
+  getAriaValueText?: (formattedValue: string, value: number) => string;
+};
+export type MeterTrackProps = ComponentPropsWithRef<'div'>;
+export type MeterIndicatorProps = ComponentPropsWithRef<'div'>;
+export type MeterLabelProps = ComponentPropsWithRef<'span'>;
+export type MeterValueProps = Omit<ComponentPropsWithRef<'span'>, 'children'> & {
+  children?: (formattedValue: string, value: number) => ReactNode;
+};
+export declare const MeterRootDefinition: ComponentDefinition<MeterRootProps>;
+export declare const MeterTrackDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const MeterIndicatorDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const MeterLabelDefinition: ComponentDefinition<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const MeterValueDefinition: ComponentDefinition<MeterValueProps>;
+export declare function MeterRoot({ value, min, max, locale, getAriaValueText, className, children, ...props }: MeterRootProps): import("react/jsx-runtime").JSX.Element;
+export declare function MeterTrack({ className, children, ...props }: MeterTrackProps): import("react/jsx-runtime").JSX.Element;
+export declare function MeterIndicator({ className, ...props }: MeterIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function MeterLabel({ className, children, ...props }: MeterLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare function MeterValue({ className, children, ...props }: MeterValueProps): import("react/jsx-runtime").JSX.Element;
+export declare const Meter: {
+  Root: typeof MeterRoot;
+  Track: typeof MeterTrack;
+  Indicator: typeof MeterIndicator;
+  Label: typeof MeterLabel;
+  Value: typeof MeterValue;
+};
+//#endregion
+//# sourceMappingURL=meter.d.ts.map