@geomak/ui 6.1.0 → 6.2.0

package/dist/index.d.cts

@@ -1641,6 +1641,98 @@ interface SidebarProps {
  */
 declare function Sidebar({ sections, isExpanded, onToggle, expandedWidth, collapsedWidth, footer, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
+interface MegaMenuProps {
+    /** `MegaMenu.Item` children. */
+    children: React__default.ReactNode;
+    /** Where the dropdown panel aligns under the bar. Default `'start'`. */
+    align?: 'start' | 'center' | 'end';
+    /** Delay (ms) before a hovered item opens. Default `200`. */
+    delayDuration?: number;
+    /** Extra classes merged onto the menu bar root. */
+    className?: string;
+    style?: React__default.CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Horizontal navigation bar with wide "mega" dropdown panels, built on
+ * `@radix-ui/react-navigation-menu` (hover-intent open, arrow-key navigation,
+ * focus management, and a shared animated viewport for free).
+ *
+ * Compose top-level items with `MegaMenu.Item`. An item with children opens a
+ * panel (`MegaMenu.Panel` → `MegaMenu.Section` → `MegaMenu.Link`, plus an
+ * optional `MegaMenu.Featured` promo column); an item with just `href` is a
+ * plain top-level link.
+ *
+ * @example
+ * ```tsx
+ * <MegaMenu aria-label="Main">
+ *   <MegaMenu.Item label="Products">
+ *     <MegaMenu.Panel>
+ *       <MegaMenu.Section title="Platform">
+ *         <MegaMenu.Link href="/analytics" icon={<ChartIcon />} description="Dashboards & reports">
+ *           Analytics
+ *         </MegaMenu.Link>
+ *       </MegaMenu.Section>
+ *     </MegaMenu.Panel>
+ *   </MegaMenu.Item>
+ *   <MegaMenu.Item label="Pricing" href="/pricing" />
+ * </MegaMenu>
+ * ```
+ */
+declare function MegaMenu({ children, align, delayDuration, className, style, 'aria-label': ariaLabel }: MegaMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace MegaMenu {
+    var Item: typeof MegaMenuItem;
+    var Panel: typeof MegaMenuPanel;
+    var Section: typeof MegaMenuSection;
+    var Link: typeof MegaMenuLink;
+    var Featured: typeof MegaMenuFeatured;
+}
+interface MegaMenuItemProps {
+    /** Top-level label shown in the bar. */
+    label: React__default.ReactNode;
+    /** Optional leading icon for the top-level item. */
+    icon?: React__default.ReactNode;
+    /** When set (and no children), the item is a plain top-level link. */
+    href?: string;
+    /** The panel (`MegaMenu.Panel`) revealed on hover/focus. Omit for a link. */
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuItem({ label, icon, href, children, className }: MegaMenuItemProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuPanelProps {
+    children: React__default.ReactNode;
+    /** Number of section columns (the featured column sits outside this grid). Default auto. */
+    columns?: 1 | 2 | 3 | 4;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function MegaMenuPanel({ children, columns, className, style }: MegaMenuPanelProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuSectionProps {
+    /** Section heading (uppercase eyebrow). */
+    title?: React__default.ReactNode;
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuSection({ title, children, className }: MegaMenuSectionProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuLinkProps {
+    href?: string;
+    /** Leading icon, shown in a tinted square. */
+    icon?: React__default.ReactNode;
+    /** Secondary line under the title. */
+    description?: React__default.ReactNode;
+    /** Mark as the active route. */
+    active?: boolean;
+    onClick?: React__default.MouseEventHandler;
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuLink({ href, icon, description, active, onClick, children, className }: MegaMenuLinkProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuFeaturedProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuFeatured({ children, className }: MegaMenuFeaturedProps): react_jsx_runtime.JSX.Element;
+
 interface AppShellProps {
     /**
      * Top navigation bar.
@@ -3831,4 +3923,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.d.ts

@@ -1641,6 +1641,98 @@ interface SidebarProps {
  */
 declare function Sidebar({ sections, isExpanded, onToggle, expandedWidth, collapsedWidth, footer, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
 
+interface MegaMenuProps {
+    /** `MegaMenu.Item` children. */
+    children: React__default.ReactNode;
+    /** Where the dropdown panel aligns under the bar. Default `'start'`. */
+    align?: 'start' | 'center' | 'end';
+    /** Delay (ms) before a hovered item opens. Default `200`. */
+    delayDuration?: number;
+    /** Extra classes merged onto the menu bar root. */
+    className?: string;
+    style?: React__default.CSSProperties;
+    'aria-label'?: string;
+}
+/**
+ * Horizontal navigation bar with wide "mega" dropdown panels, built on
+ * `@radix-ui/react-navigation-menu` (hover-intent open, arrow-key navigation,
+ * focus management, and a shared animated viewport for free).
+ *
+ * Compose top-level items with `MegaMenu.Item`. An item with children opens a
+ * panel (`MegaMenu.Panel` → `MegaMenu.Section` → `MegaMenu.Link`, plus an
+ * optional `MegaMenu.Featured` promo column); an item with just `href` is a
+ * plain top-level link.
+ *
+ * @example
+ * ```tsx
+ * <MegaMenu aria-label="Main">
+ *   <MegaMenu.Item label="Products">
+ *     <MegaMenu.Panel>
+ *       <MegaMenu.Section title="Platform">
+ *         <MegaMenu.Link href="/analytics" icon={<ChartIcon />} description="Dashboards & reports">
+ *           Analytics
+ *         </MegaMenu.Link>
+ *       </MegaMenu.Section>
+ *     </MegaMenu.Panel>
+ *   </MegaMenu.Item>
+ *   <MegaMenu.Item label="Pricing" href="/pricing" />
+ * </MegaMenu>
+ * ```
+ */
+declare function MegaMenu({ children, align, delayDuration, className, style, 'aria-label': ariaLabel }: MegaMenuProps): react_jsx_runtime.JSX.Element;
+declare namespace MegaMenu {
+    var Item: typeof MegaMenuItem;
+    var Panel: typeof MegaMenuPanel;
+    var Section: typeof MegaMenuSection;
+    var Link: typeof MegaMenuLink;
+    var Featured: typeof MegaMenuFeatured;
+}
+interface MegaMenuItemProps {
+    /** Top-level label shown in the bar. */
+    label: React__default.ReactNode;
+    /** Optional leading icon for the top-level item. */
+    icon?: React__default.ReactNode;
+    /** When set (and no children), the item is a plain top-level link. */
+    href?: string;
+    /** The panel (`MegaMenu.Panel`) revealed on hover/focus. Omit for a link. */
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuItem({ label, icon, href, children, className }: MegaMenuItemProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuPanelProps {
+    children: React__default.ReactNode;
+    /** Number of section columns (the featured column sits outside this grid). Default auto. */
+    columns?: 1 | 2 | 3 | 4;
+    className?: string;
+    style?: React__default.CSSProperties;
+}
+declare function MegaMenuPanel({ children, columns, className, style }: MegaMenuPanelProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuSectionProps {
+    /** Section heading (uppercase eyebrow). */
+    title?: React__default.ReactNode;
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuSection({ title, children, className }: MegaMenuSectionProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuLinkProps {
+    href?: string;
+    /** Leading icon, shown in a tinted square. */
+    icon?: React__default.ReactNode;
+    /** Secondary line under the title. */
+    description?: React__default.ReactNode;
+    /** Mark as the active route. */
+    active?: boolean;
+    onClick?: React__default.MouseEventHandler;
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuLink({ href, icon, description, active, onClick, children, className }: MegaMenuLinkProps): react_jsx_runtime.JSX.Element;
+interface MegaMenuFeaturedProps {
+    children: React__default.ReactNode;
+    className?: string;
+}
+declare function MegaMenuFeatured({ children, className }: MegaMenuFeaturedProps): react_jsx_runtime.JSX.Element;
+
 interface AppShellProps {
     /**
      * Top navigation bar.
@@ -3831,4 +3923,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
 /** Validate the CVV against the detected brand's expected length. */
 declare function cvvError(value: string, cardNumber: string): string | undefined;
 
-export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { AppShell, type AppShellProps, AutoComplete, type AutoCompleteProps, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, type AvatarStatus, Box, type BoxBackground, type BoxBorder, type BoxProps, type BoxRadius, type BoxShadow, Button, type ButtonProps, CARD_BRANDS, type CardBrand, Catalog, CatalogCarousel, type CatalogCarouselProps, CatalogGrid, type CatalogGridProps, type CatalogProps, Checkbox, type CheckboxProps, ColorPicker, type ColorPickerProps, ContextMenu, type ContextMenuActionItem, type ContextMenuPosition, type ContextMenuProps, CreditCardForm, type CreditCardFormProps, type CreditCardValue, type DatePickerProps, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, Drawer, type DrawerProps, Dropdown, type DropdownItem, type DropdownProps, type ErrorMap, type ExpandRowOptions, FadingBase, type FadingBaseProps, Field, type FieldArrayItem, type FieldBindings, FieldHelpIcon, type FieldKind, FieldLabel, type FieldLabelProps, type FieldProps, type FieldRule, type FieldRules, type FieldShellOptions, type FieldSize, type FieldSnapshot, FileInput, type FileInputProps, Flex, type FlexAlign, type FlexDirection, type FlexJustify, type FlexProps, type FlexWrap, Form, FormContext, FormField, type FormFieldProps, type FormProps, FormStore, type FormStoreOptions, type FormValues, Grid, GridCard, type GridCardItem, type GridCardProps, type GridProps, Icon, IconButton, type IconButtonProps, List, type ListItem, type ListProps, LoadingSpinner, type LoadingSpinnerProps, MegaMenu, type MegaMenuFeaturedProps, type MegaMenuItemProps, type MegaMenuLinkProps, type MegaMenuPanelProps, type MegaMenuProps, type MegaMenuSectionProps, Modal, type ModalProps, type NotificationPayload, NotificationProvider, NumberInput, type NumberInputProps, OpaqueGridCard, type OpaqueGridCardProps, OtpInput, type OtpInputProps, type PaginationOptions, Password, type PasswordProps, Portal, type PortalProps, RadioGroup, type RadioGroupProps, type RadioOption, Rating, type RatingProps, type RulesMap, ScalableContainer, type ScalableContainerProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlProps, type SegmentedOption, Sidebar, type SidebarItem, type SidebarProps, type SidebarSection, SkeletonBox, type SkeletonBoxProps, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonText, type SkeletonTextProps, Slider, type SliderMark, type SliderProps, type SliderValue, type Spacing, Switch, type SwitchInputProps, Table, type TableColumn, type TableProps, Tabs, type TabsAddProps, type TabsListProps, type TabsOrientation, type TabsPanelProps, type TabsProps, type TabsSize, type TabsTriggerProps, type TabsVariant, TagsInput, type TagsInputProps, DatePicker as Temporal, type TemporalPickerProps, TextArea, type TextAreaProps, TextInput, type TextInputProps, type ThemeColors, type ThemeConfig, type ThemeDensity, type ThemeMotion, ThemeProvider, type ThemeProviderProps, type ThemeRadius, type ThemeShadows, ThemeSwitch, type ThemeSwitchProps, type ThemeTypography, TimePicker, type TimePickerProps, Tooltip, type TooltipProps, TooltipProvider, TopBar, type TopBarProps, Tree, type TreeItemClickPayload, type TreeNode, type TreeProps, TreeSelect, type TreeSelectProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type TypographyWeight, type UseFieldArrayReturn, type UseFormFieldOptions, type UseFormReturn, type ValidateTrigger, Wizard, type WizardProps, type WizardStep, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };

package/dist/index.js

@@ -12,6 +12,7 @@ import * as Accordion from '@radix-ui/react-accordion';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as NavigationMenu from '@radix-ui/react-navigation-menu';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
@@ -3386,6 +3387,104 @@ function Sidebar({
     }
   ) });
 }
+function MegaMenu({ children, align = "start", delayDuration = 200, className = "", style, "aria-label": ariaLabel }) {
+  const justify = align === "center" ? "justify-center" : align === "end" ? "justify-end" : "justify-start";
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu.Root,
+    {
+      delayDuration,
+      "aria-label": ariaLabel,
+      className: ["relative z-10 flex", className].filter(Boolean).join(" "),
+      style,
+      children: [
+        /* @__PURE__ */ jsx(NavigationMenu.List, { className: "flex items-center gap-1", children }),
+        /* @__PURE__ */ jsx("div", { className: `absolute left-0 top-full flex w-full ${justify} pt-2`, children: /* @__PURE__ */ jsx(
+          NavigationMenu.Viewport,
+          {
+            className: "relative origin-top overflow-hidden rounded-lg border border-border bg-surface shadow-lg\n                        h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)]\n                        transition-[width,height] duration-200 ease-out\n                        data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\n                        data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
+          }
+        ) })
+      ]
+    }
+  );
+}
+var TOP_ITEM = "group/top inline-flex items-center gap-1.5 h-10 px-3 rounded-md text-sm font-medium select-none text-foreground-secondary hover:text-foreground hover:bg-surface-raised data-[state=open]:text-accent data-[active]:text-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
+function MegaMenuItem({ label, icon, href, children, className = "" }) {
+  if (!children) {
+    return /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxs(NavigationMenu.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
+      label
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs(NavigationMenu.Item, { children: [
+    /* @__PURE__ */ jsxs(NavigationMenu.Trigger, { className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
+      icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
+      label,
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          "aria-hidden": "true",
+          className: "h-3.5 w-3.5 text-foreground-muted transition-transform duration-200 group-data-[state=open]/top:rotate-180 group-data-[state=open]/top:text-accent",
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(NavigationMenu.Content, { className: "data-[motion=from-start]:animate-in data-[motion=to-end]:animate-out", children })
+  ] });
+}
+var COLS = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" };
+function MegaMenuPanel({ children, columns, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: ["grid gap-6 p-6", columns ? COLS[columns] : "auto-cols-fr grid-flow-col", "w-max max-w-[min(92vw,860px)]", className].filter(Boolean).join(" "),
+      style,
+      children
+    }
+  );
+}
+function MegaMenuSection({ title, children, className = "" }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["min-w-[200px] flex flex-col", className].filter(Boolean).join(" "), children: [
+    title && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-widest text-foreground-muted select-none", children: title }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children })
+  ] });
+}
+function MegaMenuLink({ href, icon, description, active, onClick, children, className = "" }) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu.Link,
+    {
+      active,
+      href,
+      onClick,
+      className: [
+        "group/link flex items-start gap-3 rounded-md p-3 transition-colors select-none",
+        "hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        "data-[active]:bg-surface-raised",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-surface-raised text-accent group-hover/link:bg-surface group-data-[active]/link:bg-surface transition-colors", children: /* @__PURE__ */ jsx("span", { className: "h-[18px] w-[18px] inline-flex items-center justify-center", children: icon }) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground group-data-[active]/link:text-accent", children }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-muted leading-snug mt-0.5", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function MegaMenuFeatured({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("div", { className: ["min-w-[220px] rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
+}
+MegaMenu.Item = MegaMenuItem;
+MegaMenu.Panel = MegaMenuPanel;
+MegaMenu.Section = MegaMenuSection;
+MegaMenu.Link = MegaMenuLink;
+MegaMenu.Featured = MegaMenuFeatured;
+var MegaMenu_default = MegaMenu;
 function AppShell({
   topBar,
   sidebarSections = [],
@@ -6814,6 +6913,6 @@ function CreditCardForm({
   );
 }
 
-export { AppShell, AutoComplete, Avatar, Box, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
+export { AppShell, AutoComplete, Avatar, Box, Button, CARD_BRANDS, Catalog, CatalogCarousel, CatalogGrid, Checkbox, ColorPicker, ContextMenu, CreditCardForm, DateRangePicker, Drawer, Dropdown, FadingBase, Field, FieldHelpIcon, FieldLabel, FileInput, Flex, Form, FormContext, FormField, FormStore, Grid2 as Grid, GridCard, icons_default as Icon, IconButton, List2 as List, LoadingSpinner, MegaMenu_default as MegaMenu, Modal, NotificationProvider, NumberInput, OpaqueGridCard, OtpInput, Password, Portal, RadioGroup, Rating, ScalableContainer, SearchInput_default as SearchInput, SegmentedControl, Sidebar, SkeletonBox, SkeletonCard, SkeletonCircle, SkeletonText, Slider, Switch, Table, Tabs_default as Tabs, TagsInput, DatePicker as Temporal, TextArea, TextInput, ThemeProvider, ThemeSwitch, TimePicker, Tooltip, TooltipProvider, TopBar, Tree, TreeSelect, Typography, Wizard, cardNumberError, cvvError, detectBrand, expiryError, fieldShell, formatCardNumber, formatExpiry, isRequired, luhnValid, onlyDigits, patterns, runFieldRules, useFieldArray, useForm, useFormField, useFormStore, useNotification };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map