@raystack/apsara 0.56.7 → 1.0.0-rc.1

package/dist/components/command/command.js

@@ -3,39 +3,53 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
 import { cva } from 'class-variance-authority';
 import { Command as Command$1 } from 'cmdk';
-import React__default from 'react';
 import { Dialog } from '../dialog/dialog.js';
 import { Flex } from '../flex/flex.js';
 import styles from './command.module.css.js';
 
 const command = cva(styles.command);
-const CommandRoot = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1, { ref: ref, className: command({ className }), ...props })));
-CommandRoot.displayName = Command$1?.displayName;
+function CommandRoot({ className, ...props }) {
+    return jsx(Command$1, { className: command({ className }), ...props });
+}
+CommandRoot.displayName = 'Command';
 const CommandDialog = ({ children, ...props }) => {
     return (jsx(Dialog, { ...props, children: jsx(Dialog.Content, { style: { overflow: 'hidden', padding: '0' }, children: jsx(Command, { className: styles.dialogcommand, children: children }) }) }));
 };
+CommandDialog.displayName = 'Command.Dialog';
 const input = cva(styles.input);
-const CommandInput = React__default.forwardRef(({ className, ...props }, ref) => (jsxs(Flex, { align: 'center', gap: 'small', "cmdk-input-wrapper": '', className: styles.inputWrapper, children: [jsx(MagnifyingGlassIcon, { className: styles.inputIcon, width: 16, height: 16 }), jsx(Command$1.Input, { ref: ref, className: input({ className }), ...props })] })));
-CommandInput.displayName = Command$1.Input.displayName;
+function CommandInput({ className, ...props }) {
+    return (jsxs(Flex, { align: 'center', gap: 'small', "cmdk-input-wrapper": '', className: styles.inputWrapper, children: [jsx(MagnifyingGlassIcon, { className: styles.inputIcon, width: 16, height: 16 }), jsx(Command$1.Input, { className: input({ className }), ...props })] }));
+}
+CommandInput.displayName = 'Command.Input';
 const list = cva(styles.list);
-const CommandList = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.List, { ref: ref, className: list({ className }), ...props })));
-CommandList.displayName = Command$1.List.displayName;
-const CommandEmpty = React__default.forwardRef((props, ref) => (jsx(Command$1.Empty, { ref: ref, className: styles.empty, ...props })));
-CommandEmpty.displayName = Command$1.Empty.displayName;
+function CommandList({ className, ...props }) {
+    return jsx(Command$1.List, { className: list({ className }), ...props });
+}
+CommandList.displayName = 'Command.List';
+function CommandEmpty(props) {
+    return jsx(Command$1.Empty, { className: styles.empty, ...props });
+}
+CommandEmpty.displayName = 'Command.Empty';
 const group = cva(styles.group);
-const CommandGroup = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.Group, { ref: ref, className: group({ className }), ...props })));
-CommandGroup.displayName = Command$1.Group.displayName;
+function CommandGroup({ className, ...props }) {
+    return jsx(Command$1.Group, { className: group({ className }), ...props });
+}
+CommandGroup.displayName = 'Command.Group';
 const separator = cva(styles.separator);
-const CommandSeparator = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.Separator, { ref: ref, className: separator({ className }), ...props })));
-CommandSeparator.displayName = Command$1.Separator.displayName;
+function CommandSeparator({ className, ...props }) {
+    return (jsx(Command$1.Separator, { className: separator({ className }), ...props }));
+}
+CommandSeparator.displayName = 'Command.Separator';
 const item = cva(styles.item);
-const CommandItem = React__default.forwardRef(({ className, ...props }, ref) => (jsx(Command$1.Item, { ref: ref, className: item({ className }), ...props })));
-CommandItem.displayName = Command$1.Item.displayName;
+function CommandItem({ className, ...props }) {
+    return jsx(Command$1.Item, { className: item({ className }), ...props });
+}
+CommandItem.displayName = 'Command.Item';
 const shortcut = cva(styles.shortcut);
 const CommandShortcut = ({ className, ...props }) => {
     return jsx("span", { className: shortcut({ className }), ...props });
 };
-CommandShortcut.displayName = 'CommandShortcut';
+CommandShortcut.displayName = 'Command.Shortcut';
 const Command = Object.assign(CommandRoot, {
     Dialog: CommandDialog,
     Input: CommandInput,

package/dist/components/command/command.js.map

@@ -1 +1 @@
-{"version":3,"file":"command.js","sources":["../../../components/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport React from 'react';\n\nimport { Dialog } from '../dialog';\nimport { Flex } from '../flex';\nimport styles from './command.module.css';\n\nconst command = cva(styles.command);\nconst CommandRoot = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive ref={ref} className={command({ className })} {...props} />\n));\nCommandRoot.displayName = CommandPrimitive?.displayName;\n\ninterface CommandDialogProps extends DialogPrimitive.DialogProps {}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content style={{ overflow: 'hidden', padding: '0' }}>\n        <Command className={styles.dialogcommand}>{children}</Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n\nconst input = cva(styles.input);\nconst CommandInput = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Input>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(({ className, ...props }, ref) => (\n  <Flex\n    align='center'\n    gap='small'\n    cmdk-input-wrapper=''\n    className={styles.inputWrapper}\n  >\n    <MagnifyingGlassIcon className={styles.inputIcon} width={16} height={16} />\n    <CommandPrimitive.Input\n      ref={ref}\n      className={input({ className })}\n      {...props}\n    />\n  </Flex>\n));\n\nCommandInput.displayName = CommandPrimitive.Input.displayName;\n\nconst list = cva(styles.list);\nconst CommandList = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.List>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.List ref={ref} className={list({ className })} {...props} />\n));\n\nCommandList.displayName = CommandPrimitive.List.displayName;\n\nconst CommandEmpty = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Empty>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>((props, ref) => (\n  <CommandPrimitive.Empty ref={ref} className={styles.empty} {...props} />\n));\n\nCommandEmpty.displayName = CommandPrimitive.Empty.displayName;\n\nconst group = cva(styles.group);\nconst CommandGroup = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Group>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Group\n    ref={ref}\n    className={group({ className })}\n    {...props}\n  />\n));\n\nCommandGroup.displayName = CommandPrimitive.Group.displayName;\n\nconst separator = cva(styles.separator);\nconst CommandSeparator = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Separator>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Separator\n    ref={ref}\n    className={separator({ className })}\n    {...props}\n  />\n));\nCommandSeparator.displayName = CommandPrimitive.Separator.displayName;\n\nconst item = cva(styles.item);\nconst CommandItem = React.forwardRef<\n  React.ElementRef<typeof CommandPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <CommandPrimitive.Item ref={ref} className={item({ className })} {...props} />\n));\n\nCommandItem.displayName = CommandPrimitive.Item.displayName;\n\nconst shortcut = cva(styles.shortcut);\nconst CommandShortcut = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n  return <span className={shortcut({ className })} {...props} />;\n};\nCommandShortcut.displayName = 'CommandShortcut';\n\nexport const Command: any = Object.assign(CommandRoot, {\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n  Separator: CommandSeparator\n});\n"],"names":[],"mappings":";;;;;;;;;;AAYA;AACA;AAMA;AAIA;AACE;AAOF;AAEA;AACA;AAmBA;AAEA;AACA;AAOA;AAEA;AAOA;AAEA;AACA;AAWA;AAEA;AACA;AAUA;AAEA;AACA;AAOA;AAEA;AACA;AAIE;AACF;AACA;;AAGE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}
+{"version":3,"file":"command.js","sources":["../../../components/command/command.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react';\nimport { MagnifyingGlassIcon } from '@radix-ui/react-icons';\nimport { cva } from 'class-variance-authority';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { type ComponentProps, ReactNode } from 'react';\n\nimport { Dialog } from '../dialog';\nimport { Flex } from '../flex';\nimport styles from './command.module.css';\n\nconst command = cva(styles.command);\nfunction CommandRoot({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive>) {\n  return <CommandPrimitive className={command({ className })} {...props} />;\n}\nCommandRoot.displayName = 'Command';\n\ninterface CommandDialogProps extends DialogPrimitive.Root.Props {\n  children: ReactNode;\n}\n\nconst CommandDialog = ({ children, ...props }: CommandDialogProps) => {\n  return (\n    <Dialog {...props}>\n      <Dialog.Content style={{ overflow: 'hidden', padding: '0' }}>\n        <Command className={styles.dialogcommand}>{children}</Command>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\nCommandDialog.displayName = 'Command.Dialog';\n\nconst input = cva(styles.input);\nfunction CommandInput({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <Flex\n      align='center'\n      gap='small'\n      cmdk-input-wrapper=''\n      className={styles.inputWrapper}\n    >\n      <MagnifyingGlassIcon\n        className={styles.inputIcon}\n        width={16}\n        height={16}\n      />\n      <CommandPrimitive.Input className={input({ className })} {...props} />\n    </Flex>\n  );\n}\n\nCommandInput.displayName = 'Command.Input';\n\nconst list = cva(styles.list);\nfunction CommandList({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.List>) {\n  return <CommandPrimitive.List className={list({ className })} {...props} />;\n}\n\nCommandList.displayName = 'Command.List';\n\nfunction CommandEmpty(props: ComponentProps<typeof CommandPrimitive.Empty>) {\n  return <CommandPrimitive.Empty className={styles.empty} {...props} />;\n}\n\nCommandEmpty.displayName = 'Command.Empty';\n\nconst group = cva(styles.group);\nfunction CommandGroup({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Group>) {\n  return <CommandPrimitive.Group className={group({ className })} {...props} />;\n}\n\nCommandGroup.displayName = 'Command.Group';\n\nconst separator = cva(styles.separator);\nfunction CommandSeparator({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      className={separator({ className })}\n      {...props}\n    />\n  );\n}\nCommandSeparator.displayName = 'Command.Separator';\n\nconst item = cva(styles.item);\nfunction CommandItem({\n  className,\n  ...props\n}: ComponentProps<typeof CommandPrimitive.Item>) {\n  return <CommandPrimitive.Item className={item({ className })} {...props} />;\n}\n\nCommandItem.displayName = 'Command.Item';\n\nconst shortcut = cva(styles.shortcut);\nconst CommandShortcut = ({ className, ...props }: ComponentProps<'span'>) => {\n  return <span className={shortcut({ className })} {...props} />;\n};\nCommandShortcut.displayName = 'Command.Shortcut';\n\nexport const Command = Object.assign(CommandRoot, {\n  Dialog: CommandDialog,\n  Input: CommandInput,\n  List: CommandList,\n  Empty: CommandEmpty,\n  Group: CommandGroup,\n  Item: CommandItem,\n  Shortcut: CommandShortcut,\n  Separator: CommandSeparator\n});\n"],"names":[],"mappings":";;;;;;;;;AAYA;AACA;AAIE;AACF;AACA;AAMA;AACE;AAOF;AACA;AAEA;AACA;;AAmBA;AAEA;AAEA;AACA;AAIE;AACF;AAEA;AAEA;AACE;AACF;AAEA;AAEA;AACA;AAIE;AACF;AAEA;AAEA;AACA;AAIE;AAMF;AACA;AAEA;AACA;AAIE;AACF;AAEA;AAEA;AACA;AACE;AACF;AACA;;AAGE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;"}

package/dist/components/container/container.cjs

@@ -7,25 +7,26 @@ var container_module = require('./container.module.css.cjs');
 const container = classVarianceAuthority.cva(container_module.default.container, {
     variants: {
         size: {
-            small: container_module.default["container-small"],
-            medium: container_module.default["container-medium"],
-            large: container_module.default["container-large"],
-            none: container_module.default["container-none"],
+            small: container_module.default['container-small'],
+            medium: container_module.default['container-medium'],
+            large: container_module.default['container-large'],
+            none: container_module.default['container-none']
         },
         align: {
-            left: container_module.default["container-align-left"],
-            center: container_module.default["container-align-center"],
-            right: container_module.default["container-align-right"],
+            left: container_module.default['container-align-left'],
+            center: container_module.default['container-align-center'],
+            right: container_module.default['container-align-right']
         }
     },
     defaultVariants: {
-        size: "none",
-        align: "center",
-    },
+        size: 'none',
+        align: 'center'
+    }
 });
-function Container({ children, size, align, className, role = "region", ...props }) {
+function Container({ children, size, align, className, role = 'region', ...props }) {
     return (jsxRuntime.jsx("div", { className: container({ size, align, className }), role: role, ...props, children: children }));
 }
+Container.displayName = 'Container';
 
 exports.Container = Container;
 //# sourceMappingURL=container.cjs.map

package/dist/components/container/container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"container.cjs","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./container.module.css\";\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles[\"container-small\"],\n      medium: styles[\"container-medium\"],\n      large: styles[\"container-large\"],\n      none: styles[\"container-none\"],\n    },\n    align: {\n      left: styles[\"container-align-left\"],\n      center: styles[\"container-align-center\"],\n      right: styles[\"container-align-right\"],\n    }\n  },\n  defaultVariants: {\n    size: \"none\",\n    align: \"center\",\n  },\n});\n\ntype ContainerProps = PropsWithChildren<VariantProps<typeof container>> &\n  HTMLAttributes<HTMLElement> & {\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n  };\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = \"region\",\n  ...props\n}: ContainerProps) {\n  return (\n    <div \n      className={container({ size, align, className })} \n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n} "],"names":["cva","styles","_jsx"],"mappings":";;;;;;AAKA,MAAM,SAAS,GAAGA,0BAAG,CAACC,wBAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,wBAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAEA,wBAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAEA,wBAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAQa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEC,cACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ;;;;"}
+{"version":3,"file":"container.cjs","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\n\nimport styles from './container.module.css';\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles['container-small'],\n      medium: styles['container-medium'],\n      large: styles['container-large'],\n      none: styles['container-none']\n    },\n    align: {\n      left: styles['container-align-left'],\n      center: styles['container-align-center'],\n      right: styles['container-align-right']\n    }\n  },\n  defaultVariants: {\n    size: 'none',\n    align: 'center'\n  }\n});\n\ntype ContainerProps = VariantProps<typeof container> & ComponentProps<'div'>;\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = 'region',\n  ...props\n}: ContainerProps) {\n  return (\n    <div\n      className={container({ size, align, className })}\n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nContainer.displayName = 'Container';\n"],"names":["cva","styles","_jsx"],"mappings":";;;;;;AAKA,MAAM,SAAS,GAAGA,0BAAG,CAACC,wBAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAEA,wBAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAEA,wBAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAEA,wBAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,wBAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAEA,wBAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAEA,wBAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAIa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEC,cACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/container/container.d.ts

@@ -1,13 +1,13 @@
-import { VariantProps } from "class-variance-authority";
-import { HTMLAttributes, PropsWithChildren } from "react";
+import { VariantProps } from 'class-variance-authority';
+import { ComponentProps } from 'react';
 declare const container: (props?: ({
     size?: "small" | "none" | "medium" | "large" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type ContainerProps = PropsWithChildren<VariantProps<typeof container>> & HTMLAttributes<HTMLElement> & {
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-};
+type ContainerProps = VariantProps<typeof container> & ComponentProps<'div'>;
 export declare function Container({ children, size, align, className, role, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Container {
+    var displayName: string;
+}
 export {};
 //# sourceMappingURL=container.d.ts.map

package/dist/components/container/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI1D,QAAA,MAAM,SAAS;;;8EAkBb,CAAC;AAEH,KAAK,cAAc,GAAG,iBAAiB,CAAC,YAAY,CAAC,OAAO,SAAS,CAAC,CAAC,GACrE,cAAc,CAAC,WAAW,CAAC,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC;AAEJ,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,2CAUhB"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../components/container/container.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAIvC,QAAA,MAAM,SAAS;;;8EAkBb,CAAC;AAEH,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,SAAS,CAAC,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE7E,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAe,EACf,GAAG,KAAK,EACT,EAAE,cAAc,2CAUhB;yBAjBe,SAAS"}

package/dist/components/container/container.js

@@ -5,25 +5,26 @@ import styles from './container.module.css.js';
 const container = cva(styles.container, {
     variants: {
         size: {
-            small: styles["container-small"],
-            medium: styles["container-medium"],
-            large: styles["container-large"],
-            none: styles["container-none"],
+            small: styles['container-small'],
+            medium: styles['container-medium'],
+            large: styles['container-large'],
+            none: styles['container-none']
         },
         align: {
-            left: styles["container-align-left"],
-            center: styles["container-align-center"],
-            right: styles["container-align-right"],
+            left: styles['container-align-left'],
+            center: styles['container-align-center'],
+            right: styles['container-align-right']
         }
     },
     defaultVariants: {
-        size: "none",
-        align: "center",
-    },
+        size: 'none',
+        align: 'center'
+    }
 });
-function Container({ children, size, align, className, role = "region", ...props }) {
+function Container({ children, size, align, className, role = 'region', ...props }) {
     return (jsx("div", { className: container({ size, align, className }), role: role, ...props, children: children }));
 }
+Container.displayName = 'Container';
 
 export { Container };
 //# sourceMappingURL=container.js.map

package/dist/components/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from \"class-variance-authority\";\nimport { HTMLAttributes, PropsWithChildren } from \"react\";\n\nimport styles from \"./container.module.css\";\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles[\"container-small\"],\n      medium: styles[\"container-medium\"],\n      large: styles[\"container-large\"],\n      none: styles[\"container-none\"],\n    },\n    align: {\n      left: styles[\"container-align-left\"],\n      center: styles[\"container-align-center\"],\n      right: styles[\"container-align-right\"],\n    }\n  },\n  defaultVariants: {\n    size: \"none\",\n    align: \"center\",\n  },\n});\n\ntype ContainerProps = PropsWithChildren<VariantProps<typeof container>> &\n  HTMLAttributes<HTMLElement> & {\n    \"aria-label\"?: string;\n    \"aria-labelledby\"?: string;\n  };\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = \"region\",\n  ...props\n}: ContainerProps) {\n  return (\n    <div \n      className={container({ size, align, className })} \n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n} "],"names":["_jsx"],"mappings":";;;;AAKA,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAE,MAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAQa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ;;;;"}
+{"version":3,"file":"container.js","sources":["../../../components/container/container.tsx"],"sourcesContent":["import { cva, VariantProps } from 'class-variance-authority';\nimport { ComponentProps } from 'react';\n\nimport styles from './container.module.css';\n\nconst container = cva(styles.container, {\n  variants: {\n    size: {\n      small: styles['container-small'],\n      medium: styles['container-medium'],\n      large: styles['container-large'],\n      none: styles['container-none']\n    },\n    align: {\n      left: styles['container-align-left'],\n      center: styles['container-align-center'],\n      right: styles['container-align-right']\n    }\n  },\n  defaultVariants: {\n    size: 'none',\n    align: 'center'\n  }\n});\n\ntype ContainerProps = VariantProps<typeof container> & ComponentProps<'div'>;\n\nexport function Container({\n  children,\n  size,\n  align,\n  className,\n  role = 'region',\n  ...props\n}: ContainerProps) {\n  return (\n    <div\n      className={container({ size, align, className })}\n      role={role}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nContainer.displayName = 'Container';\n"],"names":["_jsx"],"mappings":";;;;AAKA,MAAM,SAAS,GAAG,GAAG,CAAC,MAAM,CAAC,SAAS,EAAE;AACtC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,MAAM,EAAE,MAAM,CAAC,kBAAkB,CAAC;AAClC,YAAA,KAAK,EAAE,MAAM,CAAC,iBAAiB,CAAC;AAChC,YAAA,IAAI,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACpC,YAAA,MAAM,EAAE,MAAM,CAAC,wBAAwB,CAAC;AACxC,YAAA,KAAK,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;SAIa,SAAS,CAAC,EACxB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACO,EAAA;IACf,QACEA,GACE,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,SAAS,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,EAChD,IAAI,EAAE,IAAI,EAAA,GACN,KAAK,EAER,QAAA,EAAA,QAAQ,EACL,CAAA,EACN;AACJ,CAAC;AAED,SAAS,CAAC,WAAW,GAAG,WAAW;;;;"}

package/dist/components/context-menu/__tests__/context-menu.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=context-menu.test.d.ts.map

package/dist/components/context-menu/__tests__/context-menu.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.test.d.ts","sourceRoot":"","sources":["../../../../components/context-menu/__tests__/context-menu.test.tsx"],"names":[],"mappings":""}

package/dist/components/context-menu/context-menu-content.cjs

@@ -0,0 +1,92 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var menu_module = require('../menu/menu.module.css.cjs');
+var menuRoot = require('../menu/menu-root.cjs');
+var utils = require('../menu/utils.cjs');
+
+const ContextMenuContent = ({ ref, className, children, searchPlaceholder = 'Search...', render, finalFocus, style, sideOffset = 4, align = 'start', onFocus, ...positionerProps }) => {
+    const { autocomplete, inputValue, onInputValueChange, inputRef, isInitialRender, parent } = menuRoot.useMenuContext();
+    const focusInput = React.useCallback(() => {
+        if (document?.activeElement !== inputRef?.current)
+            inputRef?.current?.focus();
+    }, [inputRef]);
+    const highlightedItem = React.useRef([-1, 'none']);
+    const containerRef = React.useRef(null);
+    const highlightFirstItem = React.useCallback(() => {
+        if (!isInitialRender?.current)
+            return;
+        isInitialRender.current = false;
+        const item = containerRef.current?.querySelector('[role="option"]');
+        if (!item)
+            return;
+        item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+    }, [isInitialRender]);
+    const checkAndOpenSubMenu = React.useCallback(() => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item || !utils.isElementSubMenuTrigger(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ARROW_RIGHT);
+    }, []);
+    const checkAndCloseSubMenu = React.useCallback((e) => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item ||
+            !utils.isElementSubMenuTrigger(item) ||
+            !utils.isElementSubMenuOpen(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ESCAPE);
+        e.stopPropagation();
+    }, []);
+    const blurStaleMenuItem = React.useCallback((index) => {
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[index];
+        if (!item || !utils.isElementSubMenuTrigger(item) || !utils.isElementSubMenuOpen(item))
+            return;
+        utils.dispatchKeyboardEvent(item, utils.KEYCODES.ESCAPE);
+        item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+    }, []);
+    return (jsxRuntime.jsx(react.ContextMenu.Portal, { children: jsxRuntime.jsx(react.ContextMenu.Positioner, { className: classVarianceAuthority.cx(menu_module.default.positioner), sideOffset: sideOffset, align: align, ...positionerProps, children: jsxRuntime.jsx(react.ContextMenu.Popup, { ref: ref, className: classVarianceAuthority.cx(menu_module.default.content, autocomplete && menu_module.default.comboboxContainer, className), style: style, render: render, finalFocus: finalFocus, role: autocomplete ? 'dialog' : 'menu', onFocus: autocomplete || parent?.autocomplete
+                    ? e => {
+                        focusInput();
+                        e.stopPropagation();
+                        highlightFirstItem();
+                        onFocus?.(e);
+                    }
+                    : undefined, children: autocomplete ? (jsxRuntime.jsxs(react.Autocomplete.Root, { inline: true, open: true, value: inputValue, onValueChange: (value) => onInputValueChange?.(value), autoHighlight: !!inputValue?.length, mode: 'none', loopFocus: false, onItemHighlighted: (value, eventDetails) => {
+                        if (highlightedItem.current[1] === 'pointer' &&
+                            eventDetails.reason === 'keyboard') {
+                            blurStaleMenuItem(highlightedItem.current[0]);
+                        }
+                        highlightedItem.current = [
+                            eventDetails.index,
+                            eventDetails.reason
+                        ];
+                    }, children: [jsxRuntime.jsx(react.Autocomplete.Input, { placeholder: searchPlaceholder, className: menu_module.default.comboboxInput, ref: inputRef, onPointerEnter: e => {
+                                focusInput();
+                            }, onKeyDown: e => {
+                                if (e.key === 'ArrowLeft')
+                                    return;
+                                if (e.key === 'Escape')
+                                    return checkAndCloseSubMenu(e);
+                                if (e.key === 'ArrowRight' || e.key === 'Enter')
+                                    checkAndOpenSubMenu();
+                                e.stopPropagation();
+                            }, tabIndex: -1 }), jsxRuntime.jsx(react.Autocomplete.List, { className: menu_module.default.comboboxContent, ref: containerRef, children: children })] })) : (children) }) }) }));
+};
+ContextMenuContent.displayName = 'ContextMenu.Content';
+const ContextMenuSubContent = ({ ...props }) => jsxRuntime.jsx(ContextMenuContent, { sideOffset: 2, ...props });
+ContextMenuSubContent.displayName = 'ContextMenu.SubContent';
+
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuSubContent = ContextMenuSubContent;
+//# sourceMappingURL=context-menu-content.cjs.map

package/dist/components/context-menu/context-menu-content.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-content.cjs","sources":["../../../components/context-menu/context-menu-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { KeyboardEvent, useCallback, useRef } from 'react';\nimport styles from '../menu/menu.module.css';\nimport { useMenuContext } from '../menu/menu-root';\nimport {\n  dispatchKeyboardEvent,\n  isElementSubMenuOpen,\n  isElementSubMenuTrigger,\n  KEYCODES\n} from '../menu/utils';\n\nexport interface ContextMenuContentProps\n  extends Omit<\n      ContextMenuPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    ContextMenuPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport const ContextMenuContent = ({\n  ref,\n  className,\n  children,\n  searchPlaceholder = 'Search...',\n  render,\n  finalFocus,\n  style,\n  sideOffset = 4,\n  align = 'start',\n  onFocus,\n  ...positionerProps\n}: ContextMenuContentProps) => {\n  const {\n    autocomplete,\n    inputValue,\n    onInputValueChange,\n    inputRef,\n    isInitialRender,\n    parent\n  } = useMenuContext();\n\n  const focusInput = useCallback(() => {\n    if (document?.activeElement !== inputRef?.current)\n      inputRef?.current?.focus();\n  }, [inputRef]);\n  const highlightedItem = useRef<\n    [index: number, reason: 'keyboard' | 'pointer' | 'none']\n  >([-1, 'none']);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const highlightFirstItem = useCallback(() => {\n    if (!isInitialRender?.current) return;\n    isInitialRender.current = false;\n    const item = containerRef.current?.querySelector('[role=\"option\"]');\n    if (!item) return;\n    item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));\n  }, [isInitialRender]);\n\n  const checkAndOpenSubMenu = useCallback(() => {\n    if (highlightedItem.current[0] === -1) return;\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[highlightedItem.current[0]];\n    if (!item || !isElementSubMenuTrigger(item)) return;\n    dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);\n  }, []);\n\n  const checkAndCloseSubMenu = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (highlightedItem.current[0] === -1) return;\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[highlightedItem.current[0]];\n      if (\n        !item ||\n        !isElementSubMenuTrigger(item) ||\n        !isElementSubMenuOpen(item)\n      )\n        return;\n      dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const blurStaleMenuItem = useCallback((index: number) => {\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[index];\n    if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))\n      return;\n    dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n    item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));\n  }, []);\n\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className={cx(styles.positioner)}\n        sideOffset={sideOffset}\n        align={align}\n        {...positionerProps}\n      >\n        <ContextMenuPrimitive.Popup\n          ref={ref}\n          className={cx(\n            styles.content,\n            autocomplete && styles.comboboxContainer,\n            className\n          )}\n          style={style}\n          render={render}\n          finalFocus={finalFocus}\n          role={autocomplete ? 'dialog' : 'menu'}\n          onFocus={\n            autocomplete || parent?.autocomplete\n              ? e => {\n                  focusInput();\n                  e.stopPropagation();\n                  highlightFirstItem();\n                  onFocus?.(e);\n                }\n              : undefined\n          }\n        >\n          {autocomplete ? (\n            <AutocompletePrimitive.Root\n              inline\n              open\n              value={inputValue}\n              onValueChange={(value: string) => onInputValueChange?.(value)}\n              autoHighlight={!!inputValue?.length}\n              mode='none'\n              loopFocus={false}\n              onItemHighlighted={(value, eventDetails) => {\n                if (\n                  highlightedItem.current[1] === 'pointer' &&\n                  eventDetails.reason === 'keyboard'\n                ) {\n                  blurStaleMenuItem(highlightedItem.current[0]);\n                }\n                highlightedItem.current = [\n                  eventDetails.index,\n                  eventDetails.reason\n                ];\n              }}\n            >\n              <AutocompletePrimitive.Input\n                placeholder={searchPlaceholder}\n                className={styles.comboboxInput}\n                ref={inputRef}\n                onPointerEnter={e => {\n                  focusInput();\n                }}\n                onKeyDown={e => {\n                  if (e.key === 'ArrowLeft') return;\n                  if (e.key === 'Escape') return checkAndCloseSubMenu(e);\n                  if (e.key === 'ArrowRight' || e.key === 'Enter')\n                    checkAndOpenSubMenu();\n                  e.stopPropagation();\n                }}\n                tabIndex={-1}\n              />\n              <AutocompletePrimitive.List\n                className={styles.comboboxContent}\n                ref={containerRef}\n              >\n                {children}\n              </AutocompletePrimitive.List>\n            </AutocompletePrimitive.Root>\n          ) : (\n            children\n          )}\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\nContextMenuContent.displayName = 'ContextMenu.Content';\n\nexport const ContextMenuSubContent = ({\n  ...props\n}: ContextMenuContentProps) => <ContextMenuContent sideOffset={2} {...props} />;\nContextMenuSubContent.displayName = 'ContextMenu.SubContent';\n"],"names":[],"mappings":";;;;;;;;;;;AA0Ba;AAaX;AASA;AACE;AACE;AACJ;;AAIA;AAEA;;;AAEE;;AAEA;;AACA;AACF;AAEA;;;;AAGE;AACA;;AACA;;AAGF;;;;AAII;AACA;;;;AAMA;;;AAMJ;;AAEE;AACA;;AAEA;AACA;;AAGF;;AAsBgB;;AAEA;AACA;;;AAeF;AAEE;;;;AAKA;AACA;;;AASA;AACF;AAEE;;AACA;AAAwB;;AAEtB;;AAEJ;AAiBhB;AACA;;AAKA;;;"}

package/dist/components/context-menu/context-menu-content.d.ts

@@ -0,0 +1,13 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
+export interface ContextMenuContentProps extends Omit<ContextMenuPrimitive.Positioner.Props, 'render' | 'className' | 'style'>, ContextMenuPrimitive.Popup.Props {
+    searchPlaceholder?: string;
+}
+export declare const ContextMenuContent: {
+    ({ ref, className, children, searchPlaceholder, render, finalFocus, style, sideOffset, align, onFocus, ...positionerProps }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const ContextMenuSubContent: {
+    ({ ...props }: ContextMenuContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=context-menu-content.d.ts.map

package/dist/components/context-menu/context-menu-content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-content.d.ts","sourceRoot":"","sources":["../../../components/context-menu/context-menu-content.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,IAAI,oBAAoB,EACpC,MAAM,gBAAgB,CAAC;AAYxB,MAAM,WAAW,uBACf,SAAQ,IAAI,CACR,oBAAoB,CAAC,UAAU,CAAC,KAAK,EACrC,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC,EACD,oBAAoB,CAAC,KAAK,CAAC,KAAK;IAClC,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB;iIAY5B,uBAAuB;;CA+IzB,CAAC;AAGF,eAAO,MAAM,qBAAqB;mBAE/B,uBAAuB;;CAAqD,CAAC"}

package/dist/components/context-menu/context-menu-content.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ContextMenu, Autocomplete } from '@base-ui/react';
+import { cx } from 'class-variance-authority';
+import { useCallback, useRef } from 'react';
+import styles from '../menu/menu.module.css.js';
+import { useMenuContext } from '../menu/menu-root.js';
+import { isElementSubMenuTrigger, dispatchKeyboardEvent, isElementSubMenuOpen, KEYCODES } from '../menu/utils.js';
+
+const ContextMenuContent = ({ ref, className, children, searchPlaceholder = 'Search...', render, finalFocus, style, sideOffset = 4, align = 'start', onFocus, ...positionerProps }) => {
+    const { autocomplete, inputValue, onInputValueChange, inputRef, isInitialRender, parent } = useMenuContext();
+    const focusInput = useCallback(() => {
+        if (document?.activeElement !== inputRef?.current)
+            inputRef?.current?.focus();
+    }, [inputRef]);
+    const highlightedItem = useRef([-1, 'none']);
+    const containerRef = useRef(null);
+    const highlightFirstItem = useCallback(() => {
+        if (!isInitialRender?.current)
+            return;
+        isInitialRender.current = false;
+        const item = containerRef.current?.querySelector('[role="option"]');
+        if (!item)
+            return;
+        item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));
+    }, [isInitialRender]);
+    const checkAndOpenSubMenu = useCallback(() => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item || !isElementSubMenuTrigger(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);
+    }, []);
+    const checkAndCloseSubMenu = useCallback((e) => {
+        if (highlightedItem.current[0] === -1)
+            return;
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[highlightedItem.current[0]];
+        if (!item ||
+            !isElementSubMenuTrigger(item) ||
+            !isElementSubMenuOpen(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+        e.stopPropagation();
+    }, []);
+    const blurStaleMenuItem = useCallback((index) => {
+        const items = containerRef.current?.querySelectorAll('[role="option"]');
+        const item = items?.[index];
+        if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))
+            return;
+        dispatchKeyboardEvent(item, KEYCODES.ESCAPE);
+        item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
+    }, []);
+    return (jsx(ContextMenu.Portal, { children: jsx(ContextMenu.Positioner, { className: cx(styles.positioner), sideOffset: sideOffset, align: align, ...positionerProps, children: jsx(ContextMenu.Popup, { ref: ref, className: cx(styles.content, autocomplete && styles.comboboxContainer, className), style: style, render: render, finalFocus: finalFocus, role: autocomplete ? 'dialog' : 'menu', onFocus: autocomplete || parent?.autocomplete
+                    ? e => {
+                        focusInput();
+                        e.stopPropagation();
+                        highlightFirstItem();
+                        onFocus?.(e);
+                    }
+                    : undefined, children: autocomplete ? (jsxs(Autocomplete.Root, { inline: true, open: true, value: inputValue, onValueChange: (value) => onInputValueChange?.(value), autoHighlight: !!inputValue?.length, mode: 'none', loopFocus: false, onItemHighlighted: (value, eventDetails) => {
+                        if (highlightedItem.current[1] === 'pointer' &&
+                            eventDetails.reason === 'keyboard') {
+                            blurStaleMenuItem(highlightedItem.current[0]);
+                        }
+                        highlightedItem.current = [
+                            eventDetails.index,
+                            eventDetails.reason
+                        ];
+                    }, children: [jsx(Autocomplete.Input, { placeholder: searchPlaceholder, className: styles.comboboxInput, ref: inputRef, onPointerEnter: e => {
+                                focusInput();
+                            }, onKeyDown: e => {
+                                if (e.key === 'ArrowLeft')
+                                    return;
+                                if (e.key === 'Escape')
+                                    return checkAndCloseSubMenu(e);
+                                if (e.key === 'ArrowRight' || e.key === 'Enter')
+                                    checkAndOpenSubMenu();
+                                e.stopPropagation();
+                            }, tabIndex: -1 }), jsx(Autocomplete.List, { className: styles.comboboxContent, ref: containerRef, children: children })] })) : (children) }) }) }));
+};
+ContextMenuContent.displayName = 'ContextMenu.Content';
+const ContextMenuSubContent = ({ ...props }) => jsx(ContextMenuContent, { sideOffset: 2, ...props });
+ContextMenuSubContent.displayName = 'ContextMenu.SubContent';
+
+export { ContextMenuContent, ContextMenuSubContent };
+//# sourceMappingURL=context-menu-content.js.map

package/dist/components/context-menu/context-menu-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-content.js","sources":["../../../components/context-menu/context-menu-content.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { cx } from 'class-variance-authority';\nimport { KeyboardEvent, useCallback, useRef } from 'react';\nimport styles from '../menu/menu.module.css';\nimport { useMenuContext } from '../menu/menu-root';\nimport {\n  dispatchKeyboardEvent,\n  isElementSubMenuOpen,\n  isElementSubMenuTrigger,\n  KEYCODES\n} from '../menu/utils';\n\nexport interface ContextMenuContentProps\n  extends Omit<\n      ContextMenuPrimitive.Positioner.Props,\n      'render' | 'className' | 'style'\n    >,\n    ContextMenuPrimitive.Popup.Props {\n  searchPlaceholder?: string;\n}\n\nexport const ContextMenuContent = ({\n  ref,\n  className,\n  children,\n  searchPlaceholder = 'Search...',\n  render,\n  finalFocus,\n  style,\n  sideOffset = 4,\n  align = 'start',\n  onFocus,\n  ...positionerProps\n}: ContextMenuContentProps) => {\n  const {\n    autocomplete,\n    inputValue,\n    onInputValueChange,\n    inputRef,\n    isInitialRender,\n    parent\n  } = useMenuContext();\n\n  const focusInput = useCallback(() => {\n    if (document?.activeElement !== inputRef?.current)\n      inputRef?.current?.focus();\n  }, [inputRef]);\n  const highlightedItem = useRef<\n    [index: number, reason: 'keyboard' | 'pointer' | 'none']\n  >([-1, 'none']);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const highlightFirstItem = useCallback(() => {\n    if (!isInitialRender?.current) return;\n    isInitialRender.current = false;\n    const item = containerRef.current?.querySelector('[role=\"option\"]');\n    if (!item) return;\n    item.dispatchEvent(new PointerEvent('mousemove', { bubbles: true }));\n  }, [isInitialRender]);\n\n  const checkAndOpenSubMenu = useCallback(() => {\n    if (highlightedItem.current[0] === -1) return;\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[highlightedItem.current[0]];\n    if (!item || !isElementSubMenuTrigger(item)) return;\n    dispatchKeyboardEvent(item, KEYCODES.ARROW_RIGHT);\n  }, []);\n\n  const checkAndCloseSubMenu = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (highlightedItem.current[0] === -1) return;\n      const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n      const item = items?.[highlightedItem.current[0]];\n      if (\n        !item ||\n        !isElementSubMenuTrigger(item) ||\n        !isElementSubMenuOpen(item)\n      )\n        return;\n      dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const blurStaleMenuItem = useCallback((index: number) => {\n    const items = containerRef.current?.querySelectorAll('[role=\"option\"]');\n    const item = items?.[index];\n    if (!item || !isElementSubMenuTrigger(item) || !isElementSubMenuOpen(item))\n      return;\n    dispatchKeyboardEvent(item, KEYCODES.ESCAPE);\n    item.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));\n  }, []);\n\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className={cx(styles.positioner)}\n        sideOffset={sideOffset}\n        align={align}\n        {...positionerProps}\n      >\n        <ContextMenuPrimitive.Popup\n          ref={ref}\n          className={cx(\n            styles.content,\n            autocomplete && styles.comboboxContainer,\n            className\n          )}\n          style={style}\n          render={render}\n          finalFocus={finalFocus}\n          role={autocomplete ? 'dialog' : 'menu'}\n          onFocus={\n            autocomplete || parent?.autocomplete\n              ? e => {\n                  focusInput();\n                  e.stopPropagation();\n                  highlightFirstItem();\n                  onFocus?.(e);\n                }\n              : undefined\n          }\n        >\n          {autocomplete ? (\n            <AutocompletePrimitive.Root\n              inline\n              open\n              value={inputValue}\n              onValueChange={(value: string) => onInputValueChange?.(value)}\n              autoHighlight={!!inputValue?.length}\n              mode='none'\n              loopFocus={false}\n              onItemHighlighted={(value, eventDetails) => {\n                if (\n                  highlightedItem.current[1] === 'pointer' &&\n                  eventDetails.reason === 'keyboard'\n                ) {\n                  blurStaleMenuItem(highlightedItem.current[0]);\n                }\n                highlightedItem.current = [\n                  eventDetails.index,\n                  eventDetails.reason\n                ];\n              }}\n            >\n              <AutocompletePrimitive.Input\n                placeholder={searchPlaceholder}\n                className={styles.comboboxInput}\n                ref={inputRef}\n                onPointerEnter={e => {\n                  focusInput();\n                }}\n                onKeyDown={e => {\n                  if (e.key === 'ArrowLeft') return;\n                  if (e.key === 'Escape') return checkAndCloseSubMenu(e);\n                  if (e.key === 'ArrowRight' || e.key === 'Enter')\n                    checkAndOpenSubMenu();\n                  e.stopPropagation();\n                }}\n                tabIndex={-1}\n              />\n              <AutocompletePrimitive.List\n                className={styles.comboboxContent}\n                ref={containerRef}\n              >\n                {children}\n              </AutocompletePrimitive.List>\n            </AutocompletePrimitive.Root>\n          ) : (\n            children\n          )}\n        </ContextMenuPrimitive.Popup>\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  );\n};\nContextMenuContent.displayName = 'ContextMenu.Content';\n\nexport const ContextMenuSubContent = ({\n  ...props\n}: ContextMenuContentProps) => <ContextMenuContent sideOffset={2} {...props} />;\nContextMenuSubContent.displayName = 'ContextMenu.SubContent';\n"],"names":[],"mappings":";;;;;;;;;AA0Ba;AAaX;AASA;AACE;AACE;AACJ;;AAIA;AAEA;;;AAEE;;AAEA;;AACA;AACF;AAEA;;;;AAGE;AACA;;AACA;;AAGF;;;;AAII;AACA;;;;AAMA;;;AAMJ;;AAEE;AACA;;AAEA;AACA;;AAGF;;AAsBgB;;AAEA;AACA;;;AAeF;AAEE;;;;AAKA;AACA;;;AASA;AACF;AAEE;;AACA;AAAwB;;AAEtB;;AAEJ;AAiBhB;AACA;;AAKA;;"}

package/dist/components/context-menu/context-menu-item.cjs

@@ -0,0 +1,29 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var cell = require('../menu/cell.cjs');
+var menuRoot = require('../menu/menu-root.cjs');
+var utils = require('../menu/utils.cjs');
+
+const ContextMenuItem = ({ children, value, leadingIcon, trailingIcon, render, ...props }) => {
+    const { autocomplete, inputValue, shouldFilter } = menuRoot.useMenuContext();
+    const cell$1 = render ?? (jsxRuntime.jsx(cell.Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon }));
+    // In auto mode, hide items that don't match the search value
+    if (shouldFilter && !utils.getMatch(value, children, inputValue)) {
+        return null;
+    }
+    if (autocomplete) {
+        return (jsxRuntime.jsx(react.Autocomplete.Item, { value: value, render: jsxRuntime.jsx(react.ContextMenu.Item, { render: cell$1 }), ...props, children: children }));
+    }
+    return (jsxRuntime.jsx(react.ContextMenu.Item, { render: cell$1, ...props, onFocus: e => {
+            e.stopPropagation();
+            e.preventDefault();
+            e.preventBaseUIHandler();
+        }, children: children }));
+};
+ContextMenuItem.displayName = 'ContextMenu.Item';
+
+exports.ContextMenuItem = ContextMenuItem;
+//# sourceMappingURL=context-menu-item.cjs.map

package/dist/components/context-menu/context-menu-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-item.cjs","sources":["../../../components/context-menu/context-menu-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { Cell, CellBaseProps } from '../menu/cell';\nimport { useMenuContext } from '../menu/menu-root';\nimport { getMatch } from '../menu/utils';\n\nexport interface ContextMenuItemProps\n  extends ContextMenuPrimitive.Item.Props,\n    CellBaseProps {\n  value?: string;\n}\n\nexport const ContextMenuItem = ({\n  children,\n  value,\n  leadingIcon,\n  trailingIcon,\n  render,\n  ...props\n}: ContextMenuItemProps) => {\n  const { autocomplete, inputValue, shouldFilter } = useMenuContext();\n\n  const cell = render ?? (\n    <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />\n  );\n\n  // In auto mode, hide items that don't match the search value\n  if (shouldFilter && !getMatch(value, children, inputValue)) {\n    return null;\n  }\n\n  if (autocomplete) {\n    return (\n      <AutocompletePrimitive.Item\n        value={value}\n        render={<ContextMenuPrimitive.Item render={cell} />}\n        {...props}\n      >\n        {children}\n      </AutocompletePrimitive.Item>\n    );\n  }\n\n  return (\n    <ContextMenuPrimitive.Item\n      render={cell}\n      {...props}\n      onFocus={e => {\n        e.stopPropagation();\n        e.preventDefault();\n        e.preventBaseUIHandler();\n      }}\n    >\n      {children}\n    </ContextMenuPrimitive.Item>\n  );\n};\nContextMenuItem.displayName = 'ContextMenu.Item';\n"],"names":[],"mappings":";;;;;;;;;;;AA0BE;;AAKA;AACE;;;;;AAeF;;;;AAQI;AAKN;AACA;;"}

package/dist/components/context-menu/context-menu-item.d.ts

@@ -0,0 +1,10 @@
+import { ContextMenu as ContextMenuPrimitive } from '@base-ui/react';
+import { CellBaseProps } from '../menu/cell';
+export interface ContextMenuItemProps extends ContextMenuPrimitive.Item.Props, CellBaseProps {
+    value?: string;
+}
+export declare const ContextMenuItem: {
+    ({ children, value, leadingIcon, trailingIcon, render, ...props }: ContextMenuItemProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+//# sourceMappingURL=context-menu-item.d.ts.map

package/dist/components/context-menu/context-menu-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-item.d.ts","sourceRoot":"","sources":["../../../components/context-menu/context-menu-item.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,WAAW,IAAI,oBAAoB,EACpC,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAQ,aAAa,EAAE,MAAM,cAAc,CAAC;AAInD,MAAM,WAAW,oBACf,SAAQ,oBAAoB,CAAC,IAAI,CAAC,KAAK,EACrC,aAAa;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,eAAe;uEAOzB,oBAAoB;;CAqCtB,CAAC"}

package/dist/components/context-menu/context-menu-item.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Autocomplete, ContextMenu } from '@base-ui/react';
+import { Cell } from '../menu/cell.js';
+import { useMenuContext } from '../menu/menu-root.js';
+import { getMatch } from '../menu/utils.js';
+
+const ContextMenuItem = ({ children, value, leadingIcon, trailingIcon, render, ...props }) => {
+    const { autocomplete, inputValue, shouldFilter } = useMenuContext();
+    const cell = render ?? (jsx(Cell, { leadingIcon: leadingIcon, trailingIcon: trailingIcon }));
+    // In auto mode, hide items that don't match the search value
+    if (shouldFilter && !getMatch(value, children, inputValue)) {
+        return null;
+    }
+    if (autocomplete) {
+        return (jsx(Autocomplete.Item, { value: value, render: jsx(ContextMenu.Item, { render: cell }), ...props, children: children }));
+    }
+    return (jsx(ContextMenu.Item, { render: cell, ...props, onFocus: e => {
+            e.stopPropagation();
+            e.preventDefault();
+            e.preventBaseUIHandler();
+        }, children: children }));
+};
+ContextMenuItem.displayName = 'ContextMenu.Item';
+
+export { ContextMenuItem };
+//# sourceMappingURL=context-menu-item.js.map

package/dist/components/context-menu/context-menu-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-item.js","sources":["../../../components/context-menu/context-menu-item.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Autocomplete as AutocompletePrimitive,\n  ContextMenu as ContextMenuPrimitive\n} from '@base-ui/react';\nimport { Cell, CellBaseProps } from '../menu/cell';\nimport { useMenuContext } from '../menu/menu-root';\nimport { getMatch } from '../menu/utils';\n\nexport interface ContextMenuItemProps\n  extends ContextMenuPrimitive.Item.Props,\n    CellBaseProps {\n  value?: string;\n}\n\nexport const ContextMenuItem = ({\n  children,\n  value,\n  leadingIcon,\n  trailingIcon,\n  render,\n  ...props\n}: ContextMenuItemProps) => {\n  const { autocomplete, inputValue, shouldFilter } = useMenuContext();\n\n  const cell = render ?? (\n    <Cell leadingIcon={leadingIcon} trailingIcon={trailingIcon} />\n  );\n\n  // In auto mode, hide items that don't match the search value\n  if (shouldFilter && !getMatch(value, children, inputValue)) {\n    return null;\n  }\n\n  if (autocomplete) {\n    return (\n      <AutocompletePrimitive.Item\n        value={value}\n        render={<ContextMenuPrimitive.Item render={cell} />}\n        {...props}\n      >\n        {children}\n      </AutocompletePrimitive.Item>\n    );\n  }\n\n  return (\n    <ContextMenuPrimitive.Item\n      render={cell}\n      {...props}\n      onFocus={e => {\n        e.stopPropagation();\n        e.preventDefault();\n        e.preventBaseUIHandler();\n      }}\n    >\n      {children}\n    </ContextMenuPrimitive.Item>\n  );\n};\nContextMenuItem.displayName = 'ContextMenu.Item';\n"],"names":[],"mappings":";;;;;;;;;AA0BE;;AAKA;AACE;;;;;AAeF;;;;AAQI;AAKN;AACA;;"}

package/dist/components/context-menu/context-menu-misc.cjs

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@base-ui/react');
+var classVarianceAuthority = require('class-variance-authority');
+var React = require('react');
+var menu_module = require('../menu/menu.module.css.cjs');
+var menuRoot = require('../menu/menu-root.cjs');
+
+const ContextMenuGroup = ({ className, children, ...props }) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return jsxRuntime.jsx(React.Fragment, { children: children });
+    }
+    return (jsxRuntime.jsx(react.ContextMenu.Group, { className: classVarianceAuthority.cx(className), ...props, children: children }));
+};
+ContextMenuGroup.displayName = 'ContextMenu.Group';
+const ContextMenuLabel = ({ className, ...props }) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsxRuntime.jsx(react.ContextMenu.GroupLabel, { className: classVarianceAuthority.cx(menu_module.default.label, className), ...props }));
+};
+ContextMenuLabel.displayName = 'ContextMenu.Label';
+const ContextMenuSeparator = ({ className, ...props }) => {
+    const { shouldFilter } = menuRoot.useMenuContext();
+    if (shouldFilter) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { role: 'separator', className: classVarianceAuthority.cx(menu_module.default.separator, className), ...props }));
+};
+ContextMenuSeparator.displayName = 'ContextMenu.Separator';
+const ContextMenuEmptyState = ({ className, children, ...props }) => (jsxRuntime.jsx("div", { className: classVarianceAuthority.cx(menu_module.default.empty, className), ...props, children: children }));
+ContextMenuEmptyState.displayName = 'ContextMenu.EmptyState';
+
+exports.ContextMenuEmptyState = ContextMenuEmptyState;
+exports.ContextMenuGroup = ContextMenuGroup;
+exports.ContextMenuLabel = ContextMenuLabel;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+//# sourceMappingURL=context-menu-misc.cjs.map