@geomak/ui 6.0.1 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.cts CHANGED
@@ -1641,6 +1641,98 @@ interface SidebarProps {
1641
1641
  */
1642
1642
  declare function Sidebar({ sections, isExpanded, onToggle, expandedWidth, collapsedWidth, footer, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
1643
1643
 
1644
+ interface MegaMenuProps {
1645
+ /** `MegaMenu.Item` children. */
1646
+ children: React__default.ReactNode;
1647
+ /** Where the dropdown panel aligns under the bar. Default `'start'`. */
1648
+ align?: 'start' | 'center' | 'end';
1649
+ /** Delay (ms) before a hovered item opens. Default `200`. */
1650
+ delayDuration?: number;
1651
+ /** Extra classes merged onto the menu bar root. */
1652
+ className?: string;
1653
+ style?: React__default.CSSProperties;
1654
+ 'aria-label'?: string;
1655
+ }
1656
+ /**
1657
+ * Horizontal navigation bar with wide "mega" dropdown panels, built on
1658
+ * `@radix-ui/react-navigation-menu` (hover-intent open, arrow-key navigation,
1659
+ * focus management, and a shared animated viewport for free).
1660
+ *
1661
+ * Compose top-level items with `MegaMenu.Item`. An item with children opens a
1662
+ * panel (`MegaMenu.Panel` → `MegaMenu.Section` → `MegaMenu.Link`, plus an
1663
+ * optional `MegaMenu.Featured` promo column); an item with just `href` is a
1664
+ * plain top-level link.
1665
+ *
1666
+ * @example
1667
+ * ```tsx
1668
+ * <MegaMenu aria-label="Main">
1669
+ * <MegaMenu.Item label="Products">
1670
+ * <MegaMenu.Panel>
1671
+ * <MegaMenu.Section title="Platform">
1672
+ * <MegaMenu.Link href="/analytics" icon={<ChartIcon />} description="Dashboards & reports">
1673
+ * Analytics
1674
+ * </MegaMenu.Link>
1675
+ * </MegaMenu.Section>
1676
+ * </MegaMenu.Panel>
1677
+ * </MegaMenu.Item>
1678
+ * <MegaMenu.Item label="Pricing" href="/pricing" />
1679
+ * </MegaMenu>
1680
+ * ```
1681
+ */
1682
+ declare function MegaMenu({ children, align, delayDuration, className, style, 'aria-label': ariaLabel }: MegaMenuProps): react_jsx_runtime.JSX.Element;
1683
+ declare namespace MegaMenu {
1684
+ var Item: typeof MegaMenuItem;
1685
+ var Panel: typeof MegaMenuPanel;
1686
+ var Section: typeof MegaMenuSection;
1687
+ var Link: typeof MegaMenuLink;
1688
+ var Featured: typeof MegaMenuFeatured;
1689
+ }
1690
+ interface MegaMenuItemProps {
1691
+ /** Top-level label shown in the bar. */
1692
+ label: React__default.ReactNode;
1693
+ /** Optional leading icon for the top-level item. */
1694
+ icon?: React__default.ReactNode;
1695
+ /** When set (and no children), the item is a plain top-level link. */
1696
+ href?: string;
1697
+ /** The panel (`MegaMenu.Panel`) revealed on hover/focus. Omit for a link. */
1698
+ children?: React__default.ReactNode;
1699
+ className?: string;
1700
+ }
1701
+ declare function MegaMenuItem({ label, icon, href, children, className }: MegaMenuItemProps): react_jsx_runtime.JSX.Element;
1702
+ interface MegaMenuPanelProps {
1703
+ children: React__default.ReactNode;
1704
+ /** Number of section columns (the featured column sits outside this grid). Default auto. */
1705
+ columns?: 1 | 2 | 3 | 4;
1706
+ className?: string;
1707
+ style?: React__default.CSSProperties;
1708
+ }
1709
+ declare function MegaMenuPanel({ children, columns, className, style }: MegaMenuPanelProps): react_jsx_runtime.JSX.Element;
1710
+ interface MegaMenuSectionProps {
1711
+ /** Section heading (uppercase eyebrow). */
1712
+ title?: React__default.ReactNode;
1713
+ children: React__default.ReactNode;
1714
+ className?: string;
1715
+ }
1716
+ declare function MegaMenuSection({ title, children, className }: MegaMenuSectionProps): react_jsx_runtime.JSX.Element;
1717
+ interface MegaMenuLinkProps {
1718
+ href?: string;
1719
+ /** Leading icon, shown in a tinted square. */
1720
+ icon?: React__default.ReactNode;
1721
+ /** Secondary line under the title. */
1722
+ description?: React__default.ReactNode;
1723
+ /** Mark as the active route. */
1724
+ active?: boolean;
1725
+ onClick?: React__default.MouseEventHandler;
1726
+ children: React__default.ReactNode;
1727
+ className?: string;
1728
+ }
1729
+ declare function MegaMenuLink({ href, icon, description, active, onClick, children, className }: MegaMenuLinkProps): react_jsx_runtime.JSX.Element;
1730
+ interface MegaMenuFeaturedProps {
1731
+ children: React__default.ReactNode;
1732
+ className?: string;
1733
+ }
1734
+ declare function MegaMenuFeatured({ children, className }: MegaMenuFeaturedProps): react_jsx_runtime.JSX.Element;
1735
+
1644
1736
  interface AppShellProps {
1645
1737
  /**
1646
1738
  * Top navigation bar.
@@ -3831,4 +3923,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
3831
3923
  /** Validate the CVV against the detected brand's expected length. */
3832
3924
  declare function cvvError(value: string, cardNumber: string): string | undefined;
3833
3925
 
3834
- 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 };
3926
+ 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 CHANGED
@@ -1641,6 +1641,98 @@ interface SidebarProps {
1641
1641
  */
1642
1642
  declare function Sidebar({ sections, isExpanded, onToggle, expandedWidth, collapsedWidth, footer, className, }: SidebarProps): react_jsx_runtime.JSX.Element;
1643
1643
 
1644
+ interface MegaMenuProps {
1645
+ /** `MegaMenu.Item` children. */
1646
+ children: React__default.ReactNode;
1647
+ /** Where the dropdown panel aligns under the bar. Default `'start'`. */
1648
+ align?: 'start' | 'center' | 'end';
1649
+ /** Delay (ms) before a hovered item opens. Default `200`. */
1650
+ delayDuration?: number;
1651
+ /** Extra classes merged onto the menu bar root. */
1652
+ className?: string;
1653
+ style?: React__default.CSSProperties;
1654
+ 'aria-label'?: string;
1655
+ }
1656
+ /**
1657
+ * Horizontal navigation bar with wide "mega" dropdown panels, built on
1658
+ * `@radix-ui/react-navigation-menu` (hover-intent open, arrow-key navigation,
1659
+ * focus management, and a shared animated viewport for free).
1660
+ *
1661
+ * Compose top-level items with `MegaMenu.Item`. An item with children opens a
1662
+ * panel (`MegaMenu.Panel` → `MegaMenu.Section` → `MegaMenu.Link`, plus an
1663
+ * optional `MegaMenu.Featured` promo column); an item with just `href` is a
1664
+ * plain top-level link.
1665
+ *
1666
+ * @example
1667
+ * ```tsx
1668
+ * <MegaMenu aria-label="Main">
1669
+ * <MegaMenu.Item label="Products">
1670
+ * <MegaMenu.Panel>
1671
+ * <MegaMenu.Section title="Platform">
1672
+ * <MegaMenu.Link href="/analytics" icon={<ChartIcon />} description="Dashboards & reports">
1673
+ * Analytics
1674
+ * </MegaMenu.Link>
1675
+ * </MegaMenu.Section>
1676
+ * </MegaMenu.Panel>
1677
+ * </MegaMenu.Item>
1678
+ * <MegaMenu.Item label="Pricing" href="/pricing" />
1679
+ * </MegaMenu>
1680
+ * ```
1681
+ */
1682
+ declare function MegaMenu({ children, align, delayDuration, className, style, 'aria-label': ariaLabel }: MegaMenuProps): react_jsx_runtime.JSX.Element;
1683
+ declare namespace MegaMenu {
1684
+ var Item: typeof MegaMenuItem;
1685
+ var Panel: typeof MegaMenuPanel;
1686
+ var Section: typeof MegaMenuSection;
1687
+ var Link: typeof MegaMenuLink;
1688
+ var Featured: typeof MegaMenuFeatured;
1689
+ }
1690
+ interface MegaMenuItemProps {
1691
+ /** Top-level label shown in the bar. */
1692
+ label: React__default.ReactNode;
1693
+ /** Optional leading icon for the top-level item. */
1694
+ icon?: React__default.ReactNode;
1695
+ /** When set (and no children), the item is a plain top-level link. */
1696
+ href?: string;
1697
+ /** The panel (`MegaMenu.Panel`) revealed on hover/focus. Omit for a link. */
1698
+ children?: React__default.ReactNode;
1699
+ className?: string;
1700
+ }
1701
+ declare function MegaMenuItem({ label, icon, href, children, className }: MegaMenuItemProps): react_jsx_runtime.JSX.Element;
1702
+ interface MegaMenuPanelProps {
1703
+ children: React__default.ReactNode;
1704
+ /** Number of section columns (the featured column sits outside this grid). Default auto. */
1705
+ columns?: 1 | 2 | 3 | 4;
1706
+ className?: string;
1707
+ style?: React__default.CSSProperties;
1708
+ }
1709
+ declare function MegaMenuPanel({ children, columns, className, style }: MegaMenuPanelProps): react_jsx_runtime.JSX.Element;
1710
+ interface MegaMenuSectionProps {
1711
+ /** Section heading (uppercase eyebrow). */
1712
+ title?: React__default.ReactNode;
1713
+ children: React__default.ReactNode;
1714
+ className?: string;
1715
+ }
1716
+ declare function MegaMenuSection({ title, children, className }: MegaMenuSectionProps): react_jsx_runtime.JSX.Element;
1717
+ interface MegaMenuLinkProps {
1718
+ href?: string;
1719
+ /** Leading icon, shown in a tinted square. */
1720
+ icon?: React__default.ReactNode;
1721
+ /** Secondary line under the title. */
1722
+ description?: React__default.ReactNode;
1723
+ /** Mark as the active route. */
1724
+ active?: boolean;
1725
+ onClick?: React__default.MouseEventHandler;
1726
+ children: React__default.ReactNode;
1727
+ className?: string;
1728
+ }
1729
+ declare function MegaMenuLink({ href, icon, description, active, onClick, children, className }: MegaMenuLinkProps): react_jsx_runtime.JSX.Element;
1730
+ interface MegaMenuFeaturedProps {
1731
+ children: React__default.ReactNode;
1732
+ className?: string;
1733
+ }
1734
+ declare function MegaMenuFeatured({ children, className }: MegaMenuFeaturedProps): react_jsx_runtime.JSX.Element;
1735
+
1644
1736
  interface AppShellProps {
1645
1737
  /**
1646
1738
  * Top navigation bar.
@@ -3831,4 +3923,4 @@ declare function expiryError(value: string, now?: Date): string | undefined;
3831
3923
  /** Validate the CVV against the detected brand's expected length. */
3832
3924
  declare function cvvError(value: string, cardNumber: string): string | undefined;
3833
3925
 
3834
- 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 };
3926
+ 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 CHANGED
@@ -1,7 +1,7 @@
1
1
  import { colors_default } from './chunk-GKXP6OJJ.js';
2
2
  export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
3
3
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
4
- import React8, { createContext, useState, useEffect, useMemo, useId, useCallback, useContext, useRef, useLayoutEffect, useSyncExternalStore } from 'react';
4
+ import React8, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
5
5
  import { createPortal } from 'react-dom';
6
6
  import * as AvatarPrimitive from '@radix-ui/react-avatar';
7
7
  import * as Dialog from '@radix-ui/react-dialog';
@@ -12,6 +12,7 @@ import * as Accordion from '@radix-ui/react-accordion';
12
12
  import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
13
13
  import * as Popover from '@radix-ui/react-popover';
14
14
  import * as SwitchPrimitive from '@radix-ui/react-switch';
15
+ import * as NavigationMenu from '@radix-ui/react-navigation-menu';
15
16
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
16
17
  import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
17
18
  import * as ToggleGroup from '@radix-ui/react-toggle-group';
@@ -951,15 +952,27 @@ function Tabs({
951
952
  const current = isControlled ? value : internal;
952
953
  const reduced = !!useReducedMotion();
953
954
  const indicatorId = useId();
954
- const handle = (next) => {
955
+ const select = useCallback((next) => {
955
956
  if (!isControlled) setInternal(next);
956
957
  onValueChange?.(next);
957
- };
958
- return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced }, children: /* @__PURE__ */ jsx(
958
+ }, [isControlled, onValueChange]);
959
+ const registry = useRef(/* @__PURE__ */ new Map());
960
+ const orderRef = useRef(0);
961
+ const [, bump] = useState(0);
962
+ const registerTab = useCallback((val, meta) => {
963
+ const existing = registry.current.get(val);
964
+ registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
965
+ if (!existing) bump((v) => v + 1);
966
+ }, []);
967
+ const unregisterTab = useCallback((val) => {
968
+ if (registry.current.delete(val)) bump((v) => v + 1);
969
+ }, []);
970
+ const getTabs = useCallback(() => [...registry.current.entries()].sort((a, b) => a[1].order - b[1].order).map(([val, m]) => ({ value: val, label: m.label, icon: m.icon, disabled: m.disabled })), []);
971
+ return /* @__PURE__ */ jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsx(
959
972
  TabsPrimitive.Root,
960
973
  {
961
974
  value: current,
962
- onValueChange: handle,
975
+ onValueChange: select,
963
976
  orientation,
964
977
  className: [
965
978
  "flex min-w-0",
@@ -972,7 +985,7 @@ function Tabs({
972
985
  ) });
973
986
  }
974
987
  function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
975
- const { variant, orientation, reduced } = useTabsContext();
988
+ const { variant, orientation, reduced, value } = useTabsContext();
976
989
  const horizontal = orientation === "horizontal";
977
990
  const scrollRef = useRef(null);
978
991
  const [edges, setEdges] = useState({ start: false, end: false });
@@ -1008,6 +1021,14 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
1008
1021
  const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
1009
1022
  el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
1010
1023
  }, [horizontal, reduced]);
1024
+ useLayoutEffect(() => {
1025
+ const el = scrollRef.current;
1026
+ if (!el || !scrollable) return;
1027
+ const active = el.querySelector("[role=tab][data-state=active]");
1028
+ if (active && typeof active.scrollIntoView === "function") {
1029
+ active.scrollIntoView({ block: "nearest", inline: "nearest", behavior: reduced ? "auto" : "smooth" });
1030
+ }
1031
+ }, [value, scrollable, reduced]);
1011
1032
  const maskStyle = scrollable && (edges.start || edges.end) ? (() => {
1012
1033
  const dir = horizontal ? "to right" : "to bottom";
1013
1034
  const a = edges.start ? "transparent, black 36px" : "black";
@@ -1024,7 +1045,8 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
1024
1045
  return `flex ${horizontal ? "flex-row" : "flex-col"} ${align} gap-1 ${hairline}`;
1025
1046
  })();
1026
1047
  const scrollClass = scrollable ? horizontal ? "overflow-x-auto overflow-y-hidden hidden-scrollbar" : "overflow-y-auto overflow-x-hidden hidden-scrollbar" : "";
1027
- return /* @__PURE__ */ jsxs("div", { className: ["relative flex min-w-0", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
1048
+ const overflowing = scrollable && (edges.start || edges.end);
1049
+ return /* @__PURE__ */ jsxs("div", { className: ["relative flex min-w-0 gap-1", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
1028
1050
  scrollable && edges.start && /* @__PURE__ */ jsx(Chevron, { side: "start", orientation, onClick: () => nudge(-1) }),
1029
1051
  /* @__PURE__ */ jsx(
1030
1052
  TabsPrimitive.List,
@@ -1036,37 +1058,131 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
1036
1058
  children
1037
1059
  }
1038
1060
  ),
1039
- scrollable && edges.end && /* @__PURE__ */ jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) })
1061
+ scrollable && edges.end && /* @__PURE__ */ jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) }),
1062
+ overflowing && /* @__PURE__ */ jsx(OverflowMenu, {})
1040
1063
  ] });
1041
1064
  }
1042
1065
  function Chevron({ side, orientation, onClick }) {
1043
1066
  const horizontal = orientation === "horizontal";
1044
1067
  const rotate = horizontal ? side === "start" ? "rotate-180" : "" : side === "start" ? "-rotate-90" : "rotate-90";
1045
- const pos = horizontal ? side === "start" ? "left-0 top-1/2 -translate-y-1/2" : "right-0 top-1/2 -translate-y-1/2" : side === "start" ? "top-0 left-1/2 -translate-x-1/2" : "bottom-0 left-1/2 -translate-x-1/2";
1046
1068
  return /* @__PURE__ */ jsx(
1047
1069
  "button",
1048
1070
  {
1049
1071
  type: "button",
1050
1072
  "aria-label": side === "start" ? "Scroll tabs backward" : "Scroll tabs forward",
1051
1073
  onClick,
1052
- className: `absolute z-20 ${pos} flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
1074
+ className: "flex-shrink-0 self-center flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
1053
1075
  children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 ${rotate}`, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
1054
1076
  }
1055
1077
  );
1056
1078
  }
1079
+ function OverflowMenu() {
1080
+ const { getTabs, value, select, orientation } = useTabsContext();
1081
+ const horizontal = orientation === "horizontal";
1082
+ const [open, setOpen] = useState(false);
1083
+ const wrapRef = useRef(null);
1084
+ const timer = useRef(null);
1085
+ const openNow = () => {
1086
+ if (timer.current) clearTimeout(timer.current);
1087
+ setOpen(true);
1088
+ };
1089
+ const closeSoon = () => {
1090
+ timer.current = setTimeout(() => setOpen(false), 160);
1091
+ };
1092
+ useLayoutEffect(() => {
1093
+ if (!open) return;
1094
+ const onDoc = (e) => {
1095
+ if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
1096
+ };
1097
+ const onKey = (e) => {
1098
+ if (e.key === "Escape") setOpen(false);
1099
+ };
1100
+ document.addEventListener("mousedown", onDoc);
1101
+ document.addEventListener("keydown", onKey);
1102
+ return () => {
1103
+ document.removeEventListener("mousedown", onDoc);
1104
+ document.removeEventListener("keydown", onKey);
1105
+ };
1106
+ }, [open]);
1107
+ const tabs = getTabs();
1108
+ return /* @__PURE__ */ jsxs(
1109
+ "div",
1110
+ {
1111
+ ref: wrapRef,
1112
+ className: "relative flex-shrink-0 self-center",
1113
+ onMouseEnter: openNow,
1114
+ onMouseLeave: closeSoon,
1115
+ children: [
1116
+ /* @__PURE__ */ jsx(
1117
+ "button",
1118
+ {
1119
+ type: "button",
1120
+ "aria-haspopup": "menu",
1121
+ "aria-expanded": open,
1122
+ "aria-label": "Show all tabs",
1123
+ onClick: () => setOpen((o) => !o),
1124
+ className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised data-[expanded=true]:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
1125
+ "data-expanded": open,
1126
+ children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", "aria-hidden": "true", children: [
1127
+ /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1.6" }),
1128
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.6" }),
1129
+ /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1.6" })
1130
+ ] })
1131
+ }
1132
+ ),
1133
+ open && /* @__PURE__ */ jsx(
1134
+ "div",
1135
+ {
1136
+ role: "menu",
1137
+ onMouseEnter: openNow,
1138
+ onMouseLeave: closeSoon,
1139
+ className: `absolute z-30 ${horizontal ? "right-0 top-full mt-1.5" : "left-full top-0 ml-1.5"} min-w-[184px] max-h-72 overflow-y-auto hidden-scrollbar rounded-lg border border-border bg-surface p-1 shadow-md animate-in fade-in-0 zoom-in-95`,
1140
+ children: tabs.map((t) => {
1141
+ const isActive = t.value === value;
1142
+ return /* @__PURE__ */ jsxs(
1143
+ "button",
1144
+ {
1145
+ type: "button",
1146
+ role: "menuitem",
1147
+ disabled: t.disabled,
1148
+ onClick: () => {
1149
+ select(t.value);
1150
+ setOpen(false);
1151
+ },
1152
+ className: `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isActive ? "bg-surface-raised text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"}`,
1153
+ children: [
1154
+ t.icon && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0 inline-flex h-4 w-4 items-center justify-center", children: t.icon }),
1155
+ /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: t.label }),
1156
+ isActive && /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-4 w-4 flex-shrink-0 text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 10l4.5 4.5L16 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
1157
+ ]
1158
+ },
1159
+ t.value
1160
+ );
1161
+ })
1162
+ }
1163
+ )
1164
+ ]
1165
+ }
1166
+ );
1167
+ }
1057
1168
  function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, className = "", children }) {
1058
- const { value: active, variant, size, orientation, indicatorId, reduced } = useTabsContext();
1169
+ const { value: active, variant, size, orientation, indicatorId, reduced, registerTab, unregisterTab } = useTabsContext();
1059
1170
  const isActive = active === value;
1060
1171
  const horizontal = orientation === "horizontal";
1061
1172
  const sz = SIZE[size];
1062
- const base = "group/trigger relative inline-flex items-center justify-center whitespace-nowrap font-medium select-none transition-colors duration-150 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0";
1173
+ useLayoutEffect(() => {
1174
+ registerTab(value, { label: children, icon, disabled });
1175
+ return () => unregisterTab(value);
1176
+ }, [value, children, icon, disabled, registerTab, unregisterTab]);
1177
+ const layoutCls = horizontal ? "justify-center flex-shrink-0" : "justify-start w-full";
1178
+ const base = "group/trigger relative inline-flex items-center whitespace-nowrap font-medium select-none transition-colors duration-150 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed";
1063
1179
  const variantCls = variant === "segmented" ? `rounded-md ${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent` : variant === "enclosed" ? `${horizontal ? "rounded-t-md border border-b-0 -mb-px" : "rounded-l-md border border-r-0 -mr-px"} ${isActive ? "bg-surface border-border text-foreground" : "border-transparent text-foreground-secondary hover:text-foreground hover:bg-surface-raised"} focus-visible:text-accent` : `${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent`;
1064
1180
  const trigger = /* @__PURE__ */ jsxs(
1065
1181
  TabsPrimitive.Trigger,
1066
1182
  {
1067
1183
  value,
1068
1184
  disabled,
1069
- className: [base, sz.trigger, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
1185
+ className: [base, sz.trigger, layoutCls, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
1070
1186
  children: [
1071
1187
  variant === "segmented" && isActive && /* @__PURE__ */ jsx(
1072
1188
  motion.span,
@@ -1099,7 +1215,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
1099
1215
  }
1100
1216
  );
1101
1217
  if (!closeable) return trigger;
1102
- return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex items-center flex-shrink-0", children: [
1218
+ return /* @__PURE__ */ jsxs("span", { className: `relative inline-flex items-center ${horizontal ? "flex-shrink-0" : "w-full"}`, children: [
1103
1219
  trigger,
1104
1220
  /* @__PURE__ */ jsx(
1105
1221
  "button",
@@ -3271,6 +3387,104 @@ function Sidebar({
3271
3387
  }
3272
3388
  ) });
3273
3389
  }
3390
+ function MegaMenu({ children, align = "start", delayDuration = 200, className = "", style, "aria-label": ariaLabel }) {
3391
+ const justify = align === "center" ? "justify-center" : align === "end" ? "justify-end" : "justify-start";
3392
+ return /* @__PURE__ */ jsxs(
3393
+ NavigationMenu.Root,
3394
+ {
3395
+ delayDuration,
3396
+ "aria-label": ariaLabel,
3397
+ className: ["relative z-10 flex", className].filter(Boolean).join(" "),
3398
+ style,
3399
+ children: [
3400
+ /* @__PURE__ */ jsx(NavigationMenu.List, { className: "flex items-center gap-1", children }),
3401
+ /* @__PURE__ */ jsx("div", { className: `absolute left-0 top-full flex w-full ${justify} pt-2`, children: /* @__PURE__ */ jsx(
3402
+ NavigationMenu.Viewport,
3403
+ {
3404
+ 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"
3405
+ }
3406
+ ) })
3407
+ ]
3408
+ }
3409
+ );
3410
+ }
3411
+ 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";
3412
+ function MegaMenuItem({ label, icon, href, children, className = "" }) {
3413
+ if (!children) {
3414
+ return /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxs(NavigationMenu.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
3415
+ icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
3416
+ label
3417
+ ] }) });
3418
+ }
3419
+ return /* @__PURE__ */ jsxs(NavigationMenu.Item, { children: [
3420
+ /* @__PURE__ */ jsxs(NavigationMenu.Trigger, { className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
3421
+ icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
3422
+ label,
3423
+ /* @__PURE__ */ jsx(
3424
+ "svg",
3425
+ {
3426
+ viewBox: "0 0 24 24",
3427
+ fill: "none",
3428
+ stroke: "currentColor",
3429
+ strokeWidth: 2,
3430
+ "aria-hidden": "true",
3431
+ 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",
3432
+ children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
3433
+ }
3434
+ )
3435
+ ] }),
3436
+ /* @__PURE__ */ jsx(NavigationMenu.Content, { className: "data-[motion=from-start]:animate-in data-[motion=to-end]:animate-out", children })
3437
+ ] });
3438
+ }
3439
+ var COLS = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" };
3440
+ function MegaMenuPanel({ children, columns, className = "", style }) {
3441
+ return /* @__PURE__ */ jsx(
3442
+ "div",
3443
+ {
3444
+ 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(" "),
3445
+ style,
3446
+ children
3447
+ }
3448
+ );
3449
+ }
3450
+ function MegaMenuSection({ title, children, className = "" }) {
3451
+ return /* @__PURE__ */ jsxs("div", { className: ["min-w-[200px] flex flex-col", className].filter(Boolean).join(" "), children: [
3452
+ title && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-widest text-foreground-muted select-none", children: title }),
3453
+ /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children })
3454
+ ] });
3455
+ }
3456
+ function MegaMenuLink({ href, icon, description, active, onClick, children, className = "" }) {
3457
+ return /* @__PURE__ */ jsxs(
3458
+ NavigationMenu.Link,
3459
+ {
3460
+ active,
3461
+ href,
3462
+ onClick,
3463
+ className: [
3464
+ "group/link flex items-start gap-3 rounded-md p-3 transition-colors select-none",
3465
+ "hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
3466
+ "data-[active]:bg-surface-raised",
3467
+ className
3468
+ ].filter(Boolean).join(" "),
3469
+ children: [
3470
+ 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 }) }),
3471
+ /* @__PURE__ */ jsxs("span", { className: "flex flex-col min-w-0", children: [
3472
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground group-data-[active]/link:text-accent", children }),
3473
+ description && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-muted leading-snug mt-0.5", children: description })
3474
+ ] })
3475
+ ]
3476
+ }
3477
+ );
3478
+ }
3479
+ function MegaMenuFeatured({ children, className = "" }) {
3480
+ 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 });
3481
+ }
3482
+ MegaMenu.Item = MegaMenuItem;
3483
+ MegaMenu.Panel = MegaMenuPanel;
3484
+ MegaMenu.Section = MegaMenuSection;
3485
+ MegaMenu.Link = MegaMenuLink;
3486
+ MegaMenu.Featured = MegaMenuFeatured;
3487
+ var MegaMenu_default = MegaMenu;
3274
3488
  function AppShell({
3275
3489
  topBar,
3276
3490
  sidebarSections = [],
@@ -6699,6 +6913,6 @@ function CreditCardForm({
6699
6913
  );
6700
6914
  }
6701
6915
 
6702
- 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 };
6916
+ 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 };
6703
6917
  //# sourceMappingURL=index.js.map
6704
6918
  //# sourceMappingURL=index.js.map