@lglab/compose-ui 0.28.0 → 0.29.0

package/dist/menubar.js

@@ -1,170 +1,164 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import { Menu as t } from "@base-ui/react/menu";
-import { Menubar as i } from "@base-ui/react/menubar";
-import { A as m } from "./arrow-svg-C6zQTvgS.js";
-import { b as n } from "./button-variants-CbFMPwc8.js";
-import { c as d } from "./control-variants-Bwep4n0y.js";
-import { c as o } from "./utils-B6yFEsav.js";
-const b = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  i,
-  {
-    className: o(
-      "inline-flex",
-      // Connected items: collapse borders, round only outer corners
-      "[&>button]:rounded-none [&>button:not(:first-of-type)]:-ml-px",
-      "[&>button:first-of-type]:rounded-l-md [&>button:last-of-type]:rounded-r-md",
-      e
-    ),
-    ...a
-  }
-);
-b.displayName = "MenubarRoot";
-const l = (e) => /* @__PURE__ */ r(t.Root, { ...e });
-l.displayName = "MenubarMenu";
-const c = ({ className: e, variant: a, size: s, ...u }) => /* @__PURE__ */ r(
-  t.Trigger,
-  {
-    className: o(d({ variant: a, size: s }), e),
-    ...u
-  }
-);
-c.displayName = "MenubarTrigger";
-const p = (e) => /* @__PURE__ */ r(t.Portal, { ...e });
-p.displayName = "MenubarPortal";
-const M = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.Positioner,
-  {
-    className: o("z-50 outline-none", e),
-    sideOffset: 8,
-    ...a
-  }
-);
-M.displayName = "MenubarPositioner";
-const N = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.Popup,
-  {
-    className: o(
-      "rounded-md bg-background p-1 text-foreground shadow-sm border border-border transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-0 data-starting-style:opacity-0 dark:shadow-none",
-      "min-w-[8rem]",
-      e
-    ),
-    ...a
-  }
-);
-N.displayName = "MenubarPopup";
-const g = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.Arrow,
-  {
-    className: o(
-      "flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
-      e
-    ),
-    ...a,
-    children: /* @__PURE__ */ r(m, {})
-  }
-);
-g.displayName = "MenubarArrow";
-const y = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.Item,
-  {
-    className: o(
-      n({ variant: "ghost", size: "sm" }),
-      "flex justify-start",
-      e
-    ),
-    ...a
-  }
-);
-y.displayName = "MenubarItem";
-const f = ({ className: e, ...a }) => /* @__PURE__ */ r(t.Separator, { className: o("-mx-1 my-1 h-px bg-border", e), ...a });
-f.displayName = "MenubarSeparator";
-const I = ({ className: e, ...a }) => /* @__PURE__ */ r(t.Group, { className: o(e), ...a });
-I.displayName = "MenubarGroup";
-const x = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.GroupLabel,
-  {
-    className: o("px-3 py-1.5 text-sm font-semibold", e),
-    ...a
-  }
-);
-x.displayName = "MenubarGroupLabel";
-const h = ({ className: e, ...a }) => /* @__PURE__ */ r(t.RadioGroup, { className: o(e), ...a });
-h.displayName = "MenubarRadioGroup";
-const R = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.RadioItem,
-  {
-    className: o(
-      n({ variant: "ghost", size: "sm" }),
-      "grid grid-cols-[0.75rem_1fr] gap-2",
-      e
-    ),
-    ...a
-  }
-);
-R.displayName = "MenubarRadioItem";
-const k = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.CheckboxItem,
-  {
-    className: o(
-      n({ variant: "ghost", size: "sm" }),
-      "grid grid-cols-[0.75rem_1fr] gap-2",
-      e
-    ),
-    ...a
-  }
-);
-k.displayName = "MenubarCheckboxItem";
-const S = ({
-  className: e,
-  ...a
-}) => /* @__PURE__ */ r(t.RadioItemIndicator, { className: o("col-start-1", e), ...a });
-S.displayName = "MenubarRadioItemIndicator";
-const G = ({
-  className: e,
-  ...a
-}) => /* @__PURE__ */ r(t.CheckboxItemIndicator, { className: o("col-start-1", e), ...a });
-G.displayName = "MenubarCheckboxItemIndicator";
-const P = ({
-  className: e,
-  ...a
-}) => /* @__PURE__ */ r("span", { className: o("col-start-2", e), ...a });
-P.displayName = "MenubarCheckboxItemLabel";
-const w = ({ className: e, ...a }) => /* @__PURE__ */ r("span", { className: o("col-start-2", e), ...a });
-w.displayName = "MenubarRadioItemLabel";
-const C = ({ className: e, ...a }) => /* @__PURE__ */ r(
-  t.SubmenuTrigger,
-  {
-    className: o(
-      n({ variant: "ghost", size: "sm" }),
-      "flex justify-between",
-      e
-    ),
-    ...a
-  }
-);
-C.displayName = "MenubarSubmenuTrigger";
-const L = (e) => /* @__PURE__ */ r(t.SubmenuRoot, { ...e });
-L.displayName = "MenubarSubmenuRoot";
-export {
-  g as MenubarArrow,
-  k as MenubarCheckboxItem,
-  G as MenubarCheckboxItemIndicator,
-  P as MenubarCheckboxItemLabel,
-  I as MenubarGroup,
-  x as MenubarGroupLabel,
-  y as MenubarItem,
-  l as MenubarMenu,
-  N as MenubarPopup,
-  p as MenubarPortal,
-  M as MenubarPositioner,
-  h as MenubarRadioGroup,
-  R as MenubarRadioItem,
-  S as MenubarRadioItemIndicator,
-  w as MenubarRadioItemLabel,
-  b as MenubarRoot,
-  f as MenubarSeparator,
-  L as MenubarSubmenuRoot,
-  C as MenubarSubmenuTrigger,
-  c as MenubarTrigger
+'use client';
+
+import { buttonVariants } from "./lib/button-variants.js";
+import { cn } from "./lib/utils.js";
+import { ArrowSvg } from "./lib/arrow-svg.js";
+import { controlVariants } from "./lib/control-variants.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar } from "@base-ui/react/menubar";
+
+//#region src/components/menubar.tsx
+const MenubarRoot = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menubar, {
+		className: cn("inline-flex", "[&>button]:rounded-none [&>button:not(:first-of-type)]:-ml-px", "[&>button:first-of-type]:rounded-l-md [&>button:last-of-type]:rounded-r-md", className),
+		...props
+	});
 };
+MenubarRoot.displayName = "MenubarRoot";
+const MenubarMenu = (props) => {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+};
+MenubarMenu.displayName = "MenubarMenu";
+const MenubarTrigger = ({ className, variant, size, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		className: cn(controlVariants({
+			variant,
+			size
+		}), className),
+		...props
+	});
+};
+MenubarTrigger.displayName = "MenubarTrigger";
+const MenubarPortal = (props) => {
+	return /* @__PURE__ */ jsx(Menu.Portal, { ...props });
+};
+MenubarPortal.displayName = "MenubarPortal";
+const MenubarPositioner = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: cn("z-50 outline-none", className),
+		sideOffset: 8,
+		...props
+	});
+};
+MenubarPositioner.displayName = "MenubarPositioner";
+const MenubarPopup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Popup, {
+		className: cn("rounded-md bg-background p-1 text-foreground shadow-sm border border-border transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-0 data-starting-style:opacity-0 dark:shadow-none", "min-w-[8rem]", className),
+		...props
+	});
+};
+MenubarPopup.displayName = "MenubarPopup";
+const MenubarArrow = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Arrow, {
+		className: cn("flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ArrowSvg, {})
+	});
+};
+MenubarArrow.displayName = "MenubarArrow";
+const MenubarItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "sm"
+		}), "flex justify-start", className),
+		...props
+	});
+};
+MenubarItem.displayName = "MenubarItem";
+const MenubarSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		...props
+	});
+};
+MenubarSeparator.displayName = "MenubarSeparator";
+const MenubarGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		className: cn(className),
+		...props
+	});
+};
+MenubarGroup.displayName = "MenubarGroup";
+const MenubarGroupLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		className: cn("px-3 py-1.5 text-sm font-semibold", className),
+		...props
+	});
+};
+MenubarGroupLabel.displayName = "MenubarGroupLabel";
+const MenubarRadioGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		className: cn(className),
+		...props
+	});
+};
+MenubarRadioGroup.displayName = "MenubarRadioGroup";
+const MenubarRadioItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.RadioItem, {
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "sm"
+		}), "grid grid-cols-[0.75rem_1fr] gap-2", className),
+		...props
+	});
+};
+MenubarRadioItem.displayName = "MenubarRadioItem";
+const MenubarCheckboxItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItem, {
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "sm"
+		}), "grid grid-cols-[0.75rem_1fr] gap-2", className),
+		...props
+	});
+};
+MenubarCheckboxItem.displayName = "MenubarCheckboxItem";
+const MenubarRadioItemIndicator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		className: cn("col-start-1", className),
+		...props
+	});
+};
+MenubarRadioItemIndicator.displayName = "MenubarRadioItemIndicator";
+const MenubarCheckboxItemIndicator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		className: cn("col-start-1", className),
+		...props
+	});
+};
+MenubarCheckboxItemIndicator.displayName = "MenubarCheckboxItemIndicator";
+const MenubarCheckboxItemLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("col-start-2", className),
+		...props
+	});
+};
+MenubarCheckboxItemLabel.displayName = "MenubarCheckboxItemLabel";
+const MenubarRadioItemLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("col-start-2", className),
+		...props
+	});
+};
+MenubarRadioItemLabel.displayName = "MenubarRadioItemLabel";
+const MenubarSubmenuTrigger = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu.SubmenuTrigger, {
+		className: cn(buttonVariants({
+			variant: "ghost",
+			size: "sm"
+		}), "flex justify-between", className),
+		...props
+	});
+};
+MenubarSubmenuTrigger.displayName = "MenubarSubmenuTrigger";
+const MenubarSubmenuRoot = (props) => {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+};
+MenubarSubmenuRoot.displayName = "MenubarSubmenuRoot";
+
+//#endregion
+export { MenubarArrow, MenubarCheckboxItem, MenubarCheckboxItemIndicator, MenubarCheckboxItemLabel, MenubarGroup, MenubarGroupLabel, MenubarItem, MenubarMenu, MenubarPopup, MenubarPortal, MenubarPositioner, MenubarRadioGroup, MenubarRadioItem, MenubarRadioItemIndicator, MenubarRadioItemLabel, MenubarRoot, MenubarSeparator, MenubarSubmenuRoot, MenubarSubmenuTrigger, MenubarTrigger };
+//# sourceMappingURL=menubar.js.map

package/dist/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":["BaseMenubar"],"sources":["../src/components/menubar.tsx"],"sourcesContent":["'use client'\n\nimport { Menu } from '@base-ui/react/menu'\nimport { Menubar as BaseMenubar } from '@base-ui/react/menubar'\nimport * as React from 'react'\n\nimport { ArrowSvg } from '../lib/arrow-svg'\nimport { buttonVariants } from '../lib/button-variants'\nimport {\n  type ControlSize,\n  type ControlVariant,\n  controlVariants,\n} from '../lib/control-variants'\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// MenubarRoot\n// ============================================================================\n\ntype MenubarRootProps = React.ComponentProps<typeof BaseMenubar>\n\nconst MenubarRoot = ({ className, ...props }: MenubarRootProps) => {\n  return (\n    <BaseMenubar\n      className={cn(\n        'inline-flex',\n        // Connected items: collapse borders, round only outer corners\n        '[&>button]:rounded-none [&>button:not(:first-of-type)]:-ml-px',\n        '[&>button:first-of-type]:rounded-l-md [&>button:last-of-type]:rounded-r-md',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMenubarRoot.displayName = 'MenubarRoot'\n\n// ============================================================================\n// MenubarMenu\n// ============================================================================\n\ntype MenubarMenuProps = React.ComponentProps<typeof Menu.Root>\n\nconst MenubarMenu = (props: MenubarMenuProps) => {\n  return <Menu.Root {...props} />\n}\n\nMenubarMenu.displayName = 'MenubarMenu'\n\n// ============================================================================\n// MenubarTrigger\n// ============================================================================\n\ntype MenubarTriggerProps = React.ComponentProps<typeof Menu.Trigger> & {\n  /** Visual style of the trigger */\n  variant?: ControlVariant\n  /** Size of the trigger */\n  size?: ControlSize\n}\n\nconst MenubarTrigger = ({ className, variant, size, ...props }: MenubarTriggerProps) => {\n  return (\n    <Menu.Trigger\n      className={cn(controlVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n}\n\nMenubarTrigger.displayName = 'MenubarTrigger'\n\n// ============================================================================\n// MenubarPortal\n// ============================================================================\n\ntype MenubarPortalProps = React.ComponentProps<typeof Menu.Portal>\n\nconst MenubarPortal = (props: MenubarPortalProps) => {\n  return <Menu.Portal {...props} />\n}\n\nMenubarPortal.displayName = 'MenubarPortal'\n\n// ============================================================================\n// MenubarPositioner\n// ============================================================================\n\ntype MenubarPositionerProps = React.ComponentProps<typeof Menu.Positioner>\n\nconst MenubarPositioner = ({ className, ...props }: MenubarPositionerProps) => {\n  return (\n    <Menu.Positioner\n      className={cn('z-50 outline-none', className)}\n      sideOffset={8}\n      {...props}\n    />\n  )\n}\n\nMenubarPositioner.displayName = 'MenubarPositioner'\n\n// ============================================================================\n// MenubarPopup\n// ============================================================================\n\ntype MenubarPopupProps = React.ComponentProps<typeof Menu.Popup>\n\nconst MenubarPopup = ({ className, ...props }: MenubarPopupProps) => {\n  return (\n    <Menu.Popup\n      className={cn(\n        'rounded-md bg-background p-1 text-foreground shadow-sm border border-border transition-[transform,scale,opacity] data-ending-style:scale-90 data-ending-style:opacity-0 data-starting-style:scale-0 data-starting-style:opacity-0 dark:shadow-none',\n        'min-w-[8rem]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMenubarPopup.displayName = 'MenubarPopup'\n\n// ============================================================================\n// MenubarArrow\n// ============================================================================\n\ntype MenubarArrowProps = React.ComponentProps<typeof Menu.Arrow>\n\nconst MenubarArrow = ({ className, ...props }: MenubarArrowProps) => {\n  return (\n    <Menu.Arrow\n      className={cn(\n        'flex data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n        className,\n      )}\n      {...props}\n    >\n      <ArrowSvg />\n    </Menu.Arrow>\n  )\n}\n\nMenubarArrow.displayName = 'MenubarArrow'\n\n// ============================================================================\n// MenubarItem\n// ============================================================================\n\ntype MenubarItemProps = React.ComponentProps<typeof Menu.Item>\n\nconst MenubarItem = ({ className, ...props }: MenubarItemProps) => {\n  return (\n    <Menu.Item\n      className={cn(\n        buttonVariants({ variant: 'ghost', size: 'sm' }),\n        'flex justify-start',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMenubarItem.displayName = 'MenubarItem'\n\n// ============================================================================\n// MenubarSeparator\n// ============================================================================\n\ntype MenubarSeparatorProps = React.ComponentProps<typeof Menu.Separator>\n\nconst MenubarSeparator = ({ className, ...props }: MenubarSeparatorProps) => {\n  return (\n    <Menu.Separator className={cn('-mx-1 my-1 h-px bg-border', className)} {...props} />\n  )\n}\n\nMenubarSeparator.displayName = 'MenubarSeparator'\n\n// ============================================================================\n// MenubarGroup\n// ============================================================================\n\ntype MenubarGroupProps = React.ComponentProps<typeof Menu.Group>\n\nconst MenubarGroup = ({ className, ...props }: MenubarGroupProps) => {\n  return <Menu.Group className={cn(className)} {...props} />\n}\n\nMenubarGroup.displayName = 'MenubarGroup'\n\n// ============================================================================\n// MenubarGroupLabel\n// ============================================================================\n\ntype MenubarGroupLabelProps = React.ComponentProps<typeof Menu.GroupLabel>\n\nconst MenubarGroupLabel = ({ className, ...props }: MenubarGroupLabelProps) => {\n  return (\n    <Menu.GroupLabel\n      className={cn('px-3 py-1.5 text-sm font-semibold', className)}\n      {...props}\n    />\n  )\n}\n\nMenubarGroupLabel.displayName = 'MenubarGroupLabel'\n\n// ============================================================================\n// MenubarRadioGroup\n// ============================================================================\n\ntype MenubarRadioGroupProps = React.ComponentProps<typeof Menu.RadioGroup>\n\nconst MenubarRadioGroup = ({ className, ...props }: MenubarRadioGroupProps) => {\n  return <Menu.RadioGroup className={cn(className)} {...props} />\n}\n\nMenubarRadioGroup.displayName = 'MenubarRadioGroup'\n\n// ============================================================================\n// MenubarRadioItem\n// ============================================================================\n\ntype MenubarRadioItemProps = React.ComponentProps<typeof Menu.RadioItem>\n\nconst MenubarRadioItem = ({ className, ...props }: MenubarRadioItemProps) => {\n  return (\n    <Menu.RadioItem\n      className={cn(\n        buttonVariants({ variant: 'ghost', size: 'sm' }),\n        'grid grid-cols-[0.75rem_1fr] gap-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMenubarRadioItem.displayName = 'MenubarRadioItem'\n\n// ============================================================================\n// MenubarCheckboxItem\n// ============================================================================\n\ntype MenubarCheckboxItemProps = React.ComponentProps<typeof Menu.CheckboxItem>\n\nconst MenubarCheckboxItem = ({ className, ...props }: MenubarCheckboxItemProps) => {\n  return (\n    <Menu.CheckboxItem\n      className={cn(\n        buttonVariants({ variant: 'ghost', size: 'sm' }),\n        'grid grid-cols-[0.75rem_1fr] gap-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMenubarCheckboxItem.displayName = 'MenubarCheckboxItem'\n\n// ============================================================================\n// MenubarRadioItemIndicator\n// ============================================================================\n\ntype MenubarRadioItemIndicatorProps = React.ComponentProps<typeof Menu.RadioItemIndicator>\n\nconst MenubarRadioItemIndicator = ({\n  className,\n  ...props\n}: MenubarRadioItemIndicatorProps) => {\n  return <Menu.RadioItemIndicator className={cn('col-start-1', className)} {...props} />\n}\n\nMenubarRadioItemIndicator.displayName = 'MenubarRadioItemIndicator'\n\n// ============================================================================\n// MenubarCheckboxItemIndicator\n// ============================================================================\n\ntype MenubarCheckboxItemIndicatorProps = React.ComponentProps<\n  typeof Menu.CheckboxItemIndicator\n>\n\nconst MenubarCheckboxItemIndicator = ({\n  className,\n  ...props\n}: MenubarCheckboxItemIndicatorProps) => {\n  return (\n    <Menu.CheckboxItemIndicator className={cn('col-start-1', className)} {...props} />\n  )\n}\n\nMenubarCheckboxItemIndicator.displayName = 'MenubarCheckboxItemIndicator'\n\n// ============================================================================\n// MenubarCheckboxItemLabel\n// ============================================================================\n\ntype MenubarCheckboxItemLabelProps = React.ComponentProps<'span'>\n\nconst MenubarCheckboxItemLabel = ({\n  className,\n  ...props\n}: MenubarCheckboxItemLabelProps) => {\n  return <span className={cn('col-start-2', className)} {...props} />\n}\n\nMenubarCheckboxItemLabel.displayName = 'MenubarCheckboxItemLabel'\n\n// ============================================================================\n// MenubarRadioItemLabel\n// ============================================================================\n\ntype MenubarRadioItemLabelProps = React.ComponentProps<'span'>\n\nconst MenubarRadioItemLabel = ({ className, ...props }: MenubarRadioItemLabelProps) => {\n  return <span className={cn('col-start-2', className)} {...props} />\n}\n\nMenubarRadioItemLabel.displayName = 'MenubarRadioItemLabel'\n\n// ============================================================================\n// MenubarSubmenuTrigger\n// ============================================================================\n\ntype MenubarSubmenuTriggerProps = React.ComponentProps<typeof Menu.SubmenuTrigger>\n\nconst MenubarSubmenuTrigger = ({ className, ...props }: MenubarSubmenuTriggerProps) => {\n  return (\n    <Menu.SubmenuTrigger\n      className={cn(\n        buttonVariants({ variant: 'ghost', size: 'sm' }),\n        'flex justify-between',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMenubarSubmenuTrigger.displayName = 'MenubarSubmenuTrigger'\n\n// ============================================================================\n// MenubarSubmenuRoot\n// ============================================================================\n\ntype MenubarSubmenuRootProps = React.ComponentProps<typeof Menu.SubmenuRoot>\n\nconst MenubarSubmenuRoot = (props: MenubarSubmenuRootProps) => {\n  return <Menu.SubmenuRoot {...props} />\n}\n\nMenubarSubmenuRoot.displayName = 'MenubarSubmenuRoot'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n  MenubarRoot,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarPortal,\n  MenubarPositioner,\n  MenubarPopup,\n  MenubarArrow,\n  MenubarItem,\n  MenubarSeparator,\n  MenubarGroup,\n  MenubarGroupLabel,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarRadioItemIndicator,\n  MenubarRadioItemLabel,\n  MenubarCheckboxItem,\n  MenubarCheckboxItemIndicator,\n  MenubarCheckboxItemLabel,\n  MenubarSubmenuTrigger,\n  MenubarSubmenuRoot,\n}\n\nexport type {\n  MenubarRootProps,\n  MenubarMenuProps,\n  MenubarTriggerProps,\n  MenubarPortalProps,\n  MenubarPositionerProps,\n  MenubarPopupProps,\n  MenubarArrowProps,\n  MenubarItemProps,\n  MenubarSeparatorProps,\n  MenubarGroupProps,\n  MenubarGroupLabelProps,\n  MenubarRadioGroupProps,\n  MenubarRadioItemProps,\n  MenubarRadioItemIndicatorProps,\n  MenubarRadioItemLabelProps,\n  MenubarCheckboxItemProps,\n  MenubarCheckboxItemIndicatorProps,\n  MenubarCheckboxItemLabelProps,\n  MenubarSubmenuTriggerProps,\n  MenubarSubmenuRootProps,\n}\n"],"mappings":"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"}

package/dist/meter.d.ts

@@ -1,43 +1,53 @@
-import { JSX } from 'react/jsx-runtime';
-import { Meter } from '@base-ui/react/meter';
-import * as React_2 from 'react';
-
-export declare const MeterIndicator: {
-    ({ className, ...props }: MeterIndicatorProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type MeterIndicatorProps = React_2.ComponentProps<typeof Meter.Indicator>;
-
-export declare const MeterLabel: {
-    ({ className, ...props }: MeterLabelProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type MeterLabelProps = React_2.ComponentProps<typeof Meter.Label>;
-
-export declare const MeterRoot: {
-    ({ className, animated, value, ...props }: MeterRootProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type MeterRootProps = React_2.ComponentProps<typeof Meter.Root> & {
-    /** Whether to animate the meter from 0 to its value on mount */
-    animated?: boolean;
-};
-
-export declare const MeterTrack: {
-    ({ className, ...props }: MeterTrackProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type MeterTrackProps = React_2.ComponentProps<typeof Meter.Track>;
-
-export declare const MeterValue: {
-    ({ className, ...props }: MeterValueProps): JSX.Element;
-    displayName: string;
-};
-
-export declare type MeterValueProps = React_2.ComponentProps<typeof Meter.Value>;
-
-export { }
+import * as React from "react";
+import * as react_jsx_runtime61 from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+
+//#region src/components/meter.d.ts
+type MeterRootProps = React.ComponentProps<typeof Meter.Root> & {
+  /** Whether to animate the meter from 0 to its value on mount */
+  animated?: boolean;
+};
+declare const MeterRoot: {
+  ({
+    className,
+    animated,
+    value,
+    ...props
+  }: MeterRootProps): react_jsx_runtime61.JSX.Element;
+  displayName: string;
+};
+type MeterTrackProps = React.ComponentProps<typeof Meter.Track>;
+declare const MeterTrack: {
+  ({
+    className,
+    ...props
+  }: MeterTrackProps): react_jsx_runtime61.JSX.Element;
+  displayName: string;
+};
+type MeterIndicatorProps = React.ComponentProps<typeof Meter.Indicator>;
+declare const MeterIndicator: {
+  ({
+    className,
+    ...props
+  }: MeterIndicatorProps): react_jsx_runtime61.JSX.Element;
+  displayName: string;
+};
+type MeterValueProps = React.ComponentProps<typeof Meter.Value>;
+declare const MeterValue: {
+  ({
+    className,
+    ...props
+  }: MeterValueProps): react_jsx_runtime61.JSX.Element;
+  displayName: string;
+};
+type MeterLabelProps = React.ComponentProps<typeof Meter.Label>;
+declare const MeterLabel: {
+  ({
+    className,
+    ...props
+  }: MeterLabelProps): react_jsx_runtime61.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { MeterIndicator, type MeterIndicatorProps, MeterLabel, type MeterLabelProps, MeterRoot, type MeterRootProps, MeterTrack, type MeterTrackProps, MeterValue, type MeterValueProps };
+//# sourceMappingURL=meter.d.ts.map

package/dist/meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.d.ts","names":[],"sources":["../src/components/meter.tsx"],"sourcesContent":[],"mappings":";;;;;KAWK,cAAA,GAAiB,KAAA,CAAM,sBAAsB,KAAA,CAAU;;;AAR9B,CAAA;cAaxB,SALa,EAAA;;IAA+B,SAAU;IAAA,QAAA;IAAA,KAAA;IAAA,GAAA;EAAA,CAAA,EAKC,cALD,CAAA,EAKe,mBAAA,CAAA,GAAA,CAAA,OALf;aAAhC,EAAA,MAAA;CAAc;AAAA,KAoCrC,eAAA,GAAkB,KAAA,CAAM,cAR5B,CAAA,OAQkD,KAAA,CAAU,KAR5D,CAAA;cAUK,UAVL,EAAA;;;;KAU4C,kBAAe,mBAAA,CAAA,GAAA,CAAA;;;KAkBvD,mBAAA,GAAsB,KAAA,CAAM,cAnD4B,CAAA,OAmDN,KAAA,CAAU,SAnDJ,CAAA;cAqDvD,cArDqE,EAAA;EAAA,CAAA;IAAA,SAAA;IAAA,GAAA;EAAA,CAAA,EAqD1B,mBArD0B,CAAA,EAqDP,mBAAA,CAAA,GAAA,CAAA,OArDO;EA+BtE,WAAA,EAAA,MAAe;CAAA;KAwCf,eAAA,GAAkB,KAAA,CAAM,cAxCgC,CAAA,OAwCV,KAAA,CAAU,KAxCA,CAAA;cA0CvD,UA1CuB,EAAA;EAAc,CAAA;IAAA,SAAA;IAAA,GAAA;EAAA,CAAA,EA0CE,eA1CF,CAAA,EA0CiB,mBAAA,CAAA,GAAA,CAAA,OA1CjB;EAErC,WAAA,EAUL,MAAA;CAAA;KA6CI,eAAA,GAAkB,KAAA,CAAM,sBAAsB,KAAA,CAAU;cAEvD,UAzDuC,EAAA;;IAAe,SAAA;IAAA,GAAA;EAAA,CAAA,EAyDf,eAzDe,CAAA,EAyDA,mBAAA,CAAA,GAAA,CAAA,OAzDA;EAAA,WAAA,EAAA,MAAA;AAAA,CAAA"}

package/dist/meter.js

@@ -1,66 +1,61 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import { Meter as a } from "@base-ui/react/meter";
-import * as n from "react";
-import { c as o } from "./utils-B6yFEsav.js";
-const f = ({ className: t, animated: e, value: m, ...i }) => {
-  const l = m ?? 0, [u, s] = n.useState(e ? 0 : l);
-  return n.useEffect(() => {
-    if (e) {
-      const c = requestAnimationFrame(() => {
-        const d = requestAnimationFrame(() => {
-          s(l ?? 0);
-        });
-        return () => cancelAnimationFrame(d);
-      });
-      return () => cancelAnimationFrame(c);
-    } else
-      s(l ?? 0);
-  }, [e, l]), /* @__PURE__ */ r(a.Root, { className: o("w-full", t), value: u, ...i });
+'use client';
+
+import { cn } from "./lib/utils.js";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Meter } from "@base-ui/react/meter";
+
+//#region src/components/meter.tsx
+const MeterRoot = ({ className, animated, value, ...props }) => {
+	const targetValue = value ?? 0;
+	const [displayValue, setDisplayValue] = React.useState(animated ? 0 : targetValue);
+	React.useEffect(() => {
+		if (animated) {
+			const timer1 = requestAnimationFrame(() => {
+				const timer2 = requestAnimationFrame(() => {
+					setDisplayValue(targetValue ?? 0);
+				});
+				return () => cancelAnimationFrame(timer2);
+			});
+			return () => cancelAnimationFrame(timer1);
+		} else setDisplayValue(targetValue ?? 0);
+	}, [animated, targetValue]);
+	return /* @__PURE__ */ jsx(Meter.Root, {
+		className: cn("w-full", className),
+		value: displayValue,
+		...props
+	});
 };
-f.displayName = "MeterRoot";
-const p = ({ className: t, ...e }) => /* @__PURE__ */ r(
-  a.Track,
-  {
-    className: o(
-      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-      t
-    ),
-    ...e
-  }
-);
-p.displayName = "MeterTrack";
-const M = ({ className: t, ...e }) => /* @__PURE__ */ r(
-  a.Indicator,
-  {
-    className: o(
-      "h-full rounded-full bg-primary transition-all duration-1000 ease-out-expo",
-      t
-    ),
-    ...e
-  }
-);
-M.displayName = "MeterIndicator";
-const N = ({ className: t, ...e }) => /* @__PURE__ */ r(
-  a.Value,
-  {
-    className: o("text-sm font-medium text-foreground", t),
-    ...e
-  }
-);
-N.displayName = "MeterValue";
-const y = ({ className: t, ...e }) => /* @__PURE__ */ r(
-  a.Label,
-  {
-    className: o("text-sm font-medium text-foreground", t),
-    ...e
-  }
-);
-y.displayName = "MeterLabel";
-export {
-  M as MeterIndicator,
-  y as MeterLabel,
-  f as MeterRoot,
-  p as MeterTrack,
-  N as MeterValue
+MeterRoot.displayName = "MeterRoot";
+const MeterTrack = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Meter.Track, {
+		className: cn("relative h-2 w-full overflow-hidden rounded-full bg-primary/20", className),
+		...props
+	});
 };
+MeterTrack.displayName = "MeterTrack";
+const MeterIndicator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Meter.Indicator, {
+		className: cn("h-full rounded-full bg-primary transition-all duration-1000 ease-out-expo", className),
+		...props
+	});
+};
+MeterIndicator.displayName = "MeterIndicator";
+const MeterValue = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Meter.Value, {
+		className: cn("text-sm font-medium text-foreground", className),
+		...props
+	});
+};
+MeterValue.displayName = "MeterValue";
+const MeterLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Meter.Label, {
+		className: cn("text-sm font-medium text-foreground", className),
+		...props
+	});
+};
+MeterLabel.displayName = "MeterLabel";
+
+//#endregion
+export { MeterIndicator, MeterLabel, MeterRoot, MeterTrack, MeterValue };
+//# sourceMappingURL=meter.js.map

package/dist/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","names":["BaseMeter"],"sources":["../src/components/meter.tsx"],"sourcesContent":["'use client'\n\nimport { Meter as BaseMeter } from '@base-ui/react/meter'\nimport * as React from 'react'\n\nimport { cn } from '../lib/utils'\n\n// ============================================================================\n// MeterRoot\n// ============================================================================\n\ntype MeterRootProps = React.ComponentProps<typeof BaseMeter.Root> & {\n  /** Whether to animate the meter from 0 to its value on mount */\n  animated?: boolean\n}\n\nconst MeterRoot = ({ className, animated, value, ...props }: MeterRootProps) => {\n  const targetValue = value ?? 0\n  const [displayValue, setDisplayValue] = React.useState(animated ? 0 : targetValue)\n\n  React.useEffect(() => {\n    if (animated) {\n      // Double requestAnimationFrame ensures the initial 0 state is painted\n      // before transitioning to the target value\n      const timer1 = requestAnimationFrame(() => {\n        const timer2 = requestAnimationFrame(() => {\n          setDisplayValue(targetValue ?? 0)\n        })\n        return () => cancelAnimationFrame(timer2)\n      })\n      return () => cancelAnimationFrame(timer1)\n    } else {\n      setDisplayValue(targetValue ?? 0)\n    }\n  }, [animated, targetValue])\n\n  return (\n    <BaseMeter.Root className={cn('w-full', className)} value={displayValue} {...props} />\n  )\n}\n\nMeterRoot.displayName = 'MeterRoot'\n\n// ============================================================================\n// MeterTrack\n// ============================================================================\n\ntype MeterTrackProps = React.ComponentProps<typeof BaseMeter.Track>\n\nconst MeterTrack = ({ className, ...props }: MeterTrackProps) => {\n  return (\n    <BaseMeter.Track\n      className={cn(\n        'relative h-2 w-full overflow-hidden rounded-full bg-primary/20',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMeterTrack.displayName = 'MeterTrack'\n\n// ============================================================================\n// MeterIndicator\n// ============================================================================\n\ntype MeterIndicatorProps = React.ComponentProps<typeof BaseMeter.Indicator>\n\nconst MeterIndicator = ({ className, ...props }: MeterIndicatorProps) => {\n  return (\n    <BaseMeter.Indicator\n      className={cn(\n        'h-full rounded-full bg-primary transition-all duration-1000 ease-out-expo',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nMeterIndicator.displayName = 'MeterIndicator'\n\n// ============================================================================\n// MeterValue\n// ============================================================================\n\ntype MeterValueProps = React.ComponentProps<typeof BaseMeter.Value>\n\nconst MeterValue = ({ className, ...props }: MeterValueProps) => {\n  return (\n    <BaseMeter.Value\n      className={cn('text-sm font-medium text-foreground', className)}\n      {...props}\n    />\n  )\n}\n\nMeterValue.displayName = 'MeterValue'\n\n// ============================================================================\n// MeterLabel\n// ============================================================================\n\ntype MeterLabelProps = React.ComponentProps<typeof BaseMeter.Label>\n\nconst MeterLabel = ({ className, ...props }: MeterLabelProps) => {\n  return (\n    <BaseMeter.Label\n      className={cn('text-sm font-medium text-foreground', className)}\n      {...props}\n    />\n  )\n}\n\nMeterLabel.displayName = 'MeterLabel'\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport { MeterRoot, MeterTrack, MeterIndicator, MeterValue, MeterLabel }\n\nexport type {\n  MeterRootProps,\n  MeterTrackProps,\n  MeterIndicatorProps,\n  MeterValueProps,\n  MeterLabelProps,\n}\n"],"mappings":";;;;;;;;AAgBA,MAAM,aAAa,EAAE,WAAW,UAAU,OAAO,GAAG,YAA4B;CAC9E,MAAM,cAAc,SAAS;CAC7B,MAAM,CAAC,cAAc,mBAAmB,MAAM,SAAS,WAAW,IAAI,YAAY;AAElF,OAAM,gBAAgB;AACpB,MAAI,UAAU;GAGZ,MAAM,SAAS,4BAA4B;IACzC,MAAM,SAAS,4BAA4B;AACzC,qBAAgB,eAAe,EAAE;MACjC;AACF,iBAAa,qBAAqB,OAAO;KACzC;AACF,gBAAa,qBAAqB,OAAO;QAEzC,iBAAgB,eAAe,EAAE;IAElC,CAAC,UAAU,YAAY,CAAC;AAE3B,QACE,oBAACA,MAAU;EAAK,WAAW,GAAG,UAAU,UAAU;EAAE,OAAO;EAAc,GAAI;GAAS;;AAI1F,UAAU,cAAc;AAQxB,MAAM,cAAc,EAAE,WAAW,GAAG,YAA6B;AAC/D,QACE,oBAACA,MAAU;EACT,WAAW,GACT,kEACA,UACD;EACD,GAAI;GACJ;;AAIN,WAAW,cAAc;AAQzB,MAAM,kBAAkB,EAAE,WAAW,GAAG,YAAiC;AACvE,QACE,oBAACA,MAAU;EACT,WAAW,GACT,6EACA,UACD;EACD,GAAI;GACJ;;AAIN,eAAe,cAAc;AAQ7B,MAAM,cAAc,EAAE,WAAW,GAAG,YAA6B;AAC/D,QACE,oBAACA,MAAU;EACT,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;GACJ;;AAIN,WAAW,cAAc;AAQzB,MAAM,cAAc,EAAE,WAAW,GAAG,YAA6B;AAC/D,QACE,oBAACA,MAAU;EACT,WAAW,GAAG,uCAAuC,UAAU;EAC/D,GAAI;GACJ;;AAIN,WAAW,cAAc"}