@moderneinc/neo-styled-components 0.0.0-development → 1.6.1-next.02b147

package/dist/Avatar.d.ts

@@ -0,0 +1,57 @@
+import { type AvatarProps } from '@mui/material/Avatar';
+declare module '@mui/material/Avatar' {
+    interface AvatarPropsVariantOverrides {
+        initials: true;
+        rounded: false;
+        square: false;
+    }
+}
+export interface NeoAvatarProps extends Omit<AvatarProps, 'variant'> {
+    /**
+     * The size of the avatar
+     * @default "medium"
+     */
+    size?: 'small' | 'medium';
+    /**
+     * The variant of the avatar
+     * - "circular": Image avatar with white surface container (medium only)
+     * - "initials": Text/initials avatar with violet background (no container)
+     * @default "circular"
+     */
+    variant?: 'circular' | 'initials';
+}
+/**
+ * NeoAvatar - User avatar component based on MUI Avatar
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4214-58134
+ *
+ * Figma Props Mapping:
+ * - Figma Type "Initials" → variant="initials", size="small" (20px)
+ * - Figma Type "Small" → variant="circular", size="small" (20px with image)
+ * - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
+ * - State: Hover (tooltip) → Wrap component with MUI Tooltip
+ *
+ * Usage:
+ * ```tsx
+ * // Medium image avatar (with white container)
+ * <NeoAvatar variant="circular" size="medium" src="/avatar.jpg" alt="User" />
+ *
+ * // Small image avatar (no container)
+ * <NeoAvatar variant="circular" size="small" src="/avatar.jpg" alt="User" />
+ *
+ * // Small initials avatar
+ * <NeoAvatar variant="initials" size="small">A</NeoAvatar>
+ *
+ * // Medium initials avatar
+ * <NeoAvatar variant="initials" size="medium">AB</NeoAvatar>
+ *
+ * // With tooltip (user wraps)
+ * <Tooltip title="This is a tooltip" arrow placement="top">
+ *   <NeoAvatar variant="initials">A</NeoAvatar>
+ * </Tooltip>
+ * ```
+ */
+export declare const NeoAvatar: {
+    ({ size, variant, ...props }: NeoAvatarProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Badge.d.ts

@@ -0,0 +1,23 @@
+import { type ChipProps } from '@mui/material/Chip';
+export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
+    /**
+     * The color/state of the badge
+     * @default "default"
+     */
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info';
+}
+/**
+ * NeoBadge - Status badge component based on MUI Chip
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
+ *
+ * Figma Props Mapping:
+ * - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
+ * - iconLeading → icon prop (pass React element)
+ * - iconTrailing → deleteIcon prop (pass React element)
+ * - Label → label prop
+ */
+export declare const NeoBadge: {
+    (props: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Banner.d.ts

@@ -0,0 +1,66 @@
+import { type AlertProps } from '@mui/material/Alert';
+import type { ReactNode } from 'react';
+export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The visual style variant of the banner
+     * @default "light"
+     *
+     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     */
+    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    /**
+     * The message text to display
+     *
+     * @figmaPropMapping {Message} → message
+     */
+    message: string;
+    /**
+     * Horizontal alignment of the message content
+     * @default "left"
+     *
+     * @figmaPropMapping messagePosition (Left|Center) → messagePosition
+     */
+    messagePosition?: 'left' | 'center';
+    /**
+     * Optional link text to display after the message
+     *
+     * @figmaPropMapping link (boolean) → linkText (string)
+     */
+    linkText?: string;
+    /**
+     * Whether to show the close button
+     * @default true
+     *
+     * @figmaPropMapping closeIcon → showClose
+     */
+    showClose?: boolean;
+    /**
+     * Custom icon to display (optional)
+     * If not provided, no icon will be shown
+     */
+    icon?: ReactNode;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Callback when link text is clicked
+     */
+    onLinkClick?: () => void;
+}
+/**
+ * NeoBanner - Inline banner/alert component based on MUI Alert
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
+ *
+ * Figma Props Mapping:
+ * - color (Dark|Light|Success|Error|Warning) → variant (dark|light|success|error|warning)
+ * - messagePosition (Left|Center) → messagePosition ("left"|"center")
+ * - closeIcon (boolean) → showClose (boolean)
+ * - link (boolean) → linkText (string)
+ * - {Message} → message (string)
+ */
+export declare const NeoBanner: {
+    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Breadcrumbs.d.ts

@@ -0,0 +1,61 @@
+import { type LinkProps } from '@mui/material/Link';
+import type { ReactNode } from 'react';
+/**
+ * NeoBreadcrumbs - Navigation breadcrumb component
+ *
+ * Figma Mapping:
+ * - Base component uses MuiBreadcrumbs with custom styled Links
+ * - Uses chevron separator (ChevronRight from lucide-react)
+ * - Typography: 14px Medium (500 weight)
+ * - Colors:
+ *   - Non-current: semanticColors.typography.bodySecondary (#6b7280)
+ *   - Current: semanticColors.buttons.primary.default (#2f42ff)
+ *   - Hover: semanticColors.icons.hover (#1f2937) or buttons.tertiary.hover (#1e2ec2)
+ * - Focus: 2px outline with buttons.primary.focus
+ *
+ * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
+ */
+export interface NeoBreadcrumbsProps {
+    /** Breadcrumb items as Link elements */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface NeoBreadcrumbLinkProps extends Omit<LinkProps, 'color'> {
+    /** Marks this breadcrumb as the current page (sets aria-current="page") */
+    current?: boolean;
+    /** Link content */
+    children: ReactNode;
+}
+/**
+ * NeoBreadcrumbLink - Individual breadcrumb link
+ *
+ * Use this component as children of NeoBreadcrumbs to create breadcrumb items.
+ * Set `current` prop on the last item to indicate the current page.
+ *
+ * @example
+ * ```tsx
+ * <NeoBreadcrumbs>
+ *   <NeoBreadcrumbLink href="/settings">Settings</NeoBreadcrumbLink>
+ *   <NeoBreadcrumbLink href="/team">Team</NeoBreadcrumbLink>
+ *   <NeoBreadcrumbLink current>Team Details</NeoBreadcrumbLink>
+ * </NeoBreadcrumbs>
+ * ```
+ */
+export declare function NeoBreadcrumbLink({ current, children, ...props }: NeoBreadcrumbLinkProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * NeoBreadcrumbs - Navigation breadcrumb component
+ *
+ * Provides hierarchical navigation with styled links and chevron separators.
+ * Use NeoBreadcrumbLink components as children to create breadcrumb items.
+ *
+ * @example
+ * ```tsx
+ * <NeoBreadcrumbs>
+ *   <NeoBreadcrumbLink href="/settings">Settings</NeoBreadcrumbLink>
+ *   <NeoBreadcrumbLink href="/team">Team</NeoBreadcrumbLink>
+ *   <NeoBreadcrumbLink current>Team Details</NeoBreadcrumbLink>
+ * </NeoBreadcrumbs>
+ * ```
+ */
+export declare function NeoBreadcrumbs({ children, className }: NeoBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/Button.d.ts

@@ -0,0 +1,59 @@
+import { type ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        destructive: true;
+        link: true;
+        linkColor: true;
+    }
+}
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonSize = 'small' | 'medium';
+export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * The visual variant of the button
+     * @default "primary"
+     *
+     * @figma Hierarchy
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: ButtonSize;
+    /**
+     * Show loading spinner instead of children
+     * @default false
+     *
+     * @figma State=Loading
+     */
+    loading?: boolean;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoButton - Text button component based on MUI ButtonBase
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
+ *
+ * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Size (Small|Medium) → size prop
+ * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
+ * - State=Hover → CSS :hover
+ * - State=Pressed → CSS :active
+ * - State=Focused → CSS :focus-visible
+ */
+export declare const NeoButton: {
+    ({ variant, size, loading, children, disabled, ...props }: NeoButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ButtonGroup.d.ts

@@ -0,0 +1,42 @@
+import { type ButtonGroupProps as MuiButtonGroupProps } from '@mui/material/ButtonGroup';
+type ButtonGroupSize = 'small' | 'medium';
+export interface NeoButtonGroupProps extends Omit<MuiButtonGroupProps, 'size' | 'variant'> {
+    /**
+     * The size of the button group
+     * @default "medium"
+     *
+     * @figma Size=Sm → small, Size=Md → medium
+     */
+    size?: ButtonGroupSize;
+    /**
+     * The visual variant of the buttons
+     * ButtonGroup uses a fixed outlined style from the design
+     */
+    variant?: 'outlined';
+}
+/**
+ * NeoButtonGroup - Button group component based on MUI ButtonGroup
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
+ *
+ * Figma Props Mapping:
+ * - Size (Sm|Md) → size prop (small|medium)
+ * - Icon=False → Icon support not included in this implementation
+ * - Active button state → Controlled externally via button props or classes
+ *
+ * Usage:
+ * ```tsx
+ * <NeoButtonGroup size="medium">
+ *   <NeoButton>Button 1</NeoButton>
+ *   <NeoButton>Button 2</NeoButton>
+ *   <NeoButton>Button 3</NeoButton>
+ * </NeoButtonGroup>
+ * ```
+ *
+ * Note: To show active state, add 'active' class to the selected button
+ */
+export declare const NeoButtonGroup: {
+    ({ size, variant, ...props }: NeoButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Checkbox.d.ts

@@ -0,0 +1,80 @@
+import { type CheckboxProps } from '@mui/material/Checkbox';
+import type { ReactNode } from 'react';
+declare module '@mui/material/Checkbox' {
+    interface CheckboxPropsSizeOverrides {
+        xs: true;
+        small: true;
+        medium: true;
+    }
+}
+type CheckboxSize = 'xs' | 'small' | 'medium';
+export interface NeoCheckboxProps extends Omit<CheckboxProps, 'size'> {
+    /**
+     * The size of the checkbox
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: CheckboxSize;
+    /**
+     * The label text displayed next to the checkbox
+     *
+     * @figma Text (label)
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     *
+     * @figma Text (supporting text)
+     */
+    helperText?: ReactNode;
+}
+/**
+ * NeoCheckbox - Checkbox component based on MUI Checkbox
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-39311
+ *
+ * Figma Props Mapping:
+ * - Checked (True|False) → checked prop
+ * - Indeterminate (True|False) → indeterminate prop
+ * - Size (xs|sm|md) → size prop (xs|small|medium)
+ * - State=Default → default state
+ * - State=Hover → CSS :hover
+ * - State=Focused → CSS :focus-visible
+ * - State=Disabled → disabled prop
+ * - Text (label) → label prop
+ * - Text (supporting text) → helperText prop
+ *
+ * @example
+ * // Basic checkbox
+ * <NeoCheckbox />
+ *
+ * @example
+ * // With label
+ * <NeoCheckbox label="Remember me" />
+ *
+ * @example
+ * // With label and helper text
+ * <NeoCheckbox label="Remember me" helperText="Save my login details for next time." />
+ *
+ * @example
+ * // Small size
+ * <NeoCheckbox size="small" label="Remember me" />
+ *
+ * @example
+ * // Extra small size
+ * <NeoCheckbox size="xs" label="Remember me" />
+ *
+ * @example
+ * // Controlled
+ * <NeoCheckbox checked={isChecked} onChange={handleChange} label="Remember me" />
+ *
+ * @example
+ * // Indeterminate state (for "select all" checkboxes)
+ * <NeoCheckbox indeterminate={true} label="Select all" />
+ */
+export declare const NeoCheckbox: {
+    ({ size, label, helperText, disabled, ...props }: NeoCheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/CodeSnippet.d.ts

@@ -0,0 +1,59 @@
+import type { ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+type CodeSnippetVariant = 'outlined' | 'filled';
+type CodeSnippetSize = 'xs' | 'small' | 'large';
+export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * The visual variant of the code snippet
+     * @default "outlined"
+     *
+     * @figma Color (Light|Dark)
+     */
+    variant?: CodeSnippetVariant;
+    /**
+     * The size of the code snippet
+     * @default "small"
+     *
+     * @figma size (xs|small|large)
+     */
+    size?: CodeSnippetSize;
+    /**
+     * Icon to display at the start (leading position)
+     *
+     * @figma leadingIcon
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon to display at the end (trailing position)
+     *
+     * @figma trailingIcon
+     */
+    endIcon?: ReactNode;
+    /**
+     * Code snippet content to display
+     */
+    children: ReactNode;
+}
+/**
+ * NeoCodeSnippet - Inline code snippet component based on MUI ButtonBase
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4187-30353
+ *
+ * Figma Props Mapping:
+ * - Color (Light|Dark) → variant (outlined|filled)
+ * - size (xs|small|large) → size prop
+ * - leadingIcon (boolean) → startIcon (ReactNode)
+ * - trailingIcon (boolean) → endIcon (ReactNode)
+ * - Text content → children prop
+ */
+export declare const NeoCodeSnippet: {
+    ({ variant, size, startIcon, endIcon, children, ...props }: NeoCodeSnippetProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/DataGridCell.d.ts

@@ -0,0 +1,144 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface CellContentProps extends HTMLAttributes<HTMLDivElement> {
+    children?: ReactNode;
+}
+/**
+ * DataGridCellContent - Layout helper for cells that need flex layout with gap spacing
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41631
+ *
+ * Use this for any cell content that needs horizontal flex layout with proper spacing:
+ * - Multiple badges
+ * - Avatar + text
+ * - Action buttons/icons
+ * - Any other horizontal layouts
+ *
+ * @example
+ * // Badges
+ * renderCell: (params) => (
+ *   <DataGridCellContent>
+ *     <NeoBadge label="Active" color="success" />
+ *     <NeoBadge label="New" color="info" />
+ *   </DataGridCellContent>
+ * )
+ *
+ * @example
+ * // Avatar with text
+ * renderCell: (params) => (
+ *   <DataGridCellContent>
+ *     <NeoAvatar src={params.row.avatarUrl} />
+ *     <span>{params.row.name}</span>
+ *   </DataGridCellContent>
+ * )
+ *
+ * @example
+ * // Action buttons
+ * renderCell: () => (
+ *   <DataGridCellContent>
+ *     <NeoIconButton size="small"><Edit2 /></NeoIconButton>
+ *     <NeoIconButton size="small"><Delete /></NeoIconButton>
+ *   </DataGridCellContent>
+ * )
+ */
+export declare const DataGridCellContent: {
+    ({ children, ...props }: CellContentProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Utility function to get DataGrid sx styles for consistent cell appearance
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41631
+ *
+ * Apply this to DataGrid's `sx` prop to ensure cells are properly aligned and styled.
+ *
+ * @param size - Row size variant (affects row height)
+ * @returns SxProps for DataGrid
+ *
+ * @example
+ * <DataGrid
+ *   sx={getDataGridCellStyles('default')}
+ *   rows={rows}
+ *   columns={columns}
+ * />
+ */
+export declare const getDataGridCellStyles: (size?: "condensed" | "default" | "relaxed") => {
+    [x: string]: {
+        minHeight: string;
+        maxHeight: string;
+        display?: undefined;
+        alignItems?: undefined;
+    } | {
+        display: string;
+        alignItems: string;
+        minHeight?: undefined;
+        maxHeight?: undefined;
+    };
+};
+/**
+ * StatusBadgeCell - Ready-to-use cell component for status badges
+ *
+ * @example
+ * renderCell: (params) => (
+ *   <StatusBadgeCell
+ *     status={params.value}
+ *     colorMap={{
+ *       Active: 'success',
+ *       Pending: 'warning',
+ *       Inactive: 'default'
+ *     }}
+ *   />
+ * )
+ */
+export interface StatusBadgeCellProps {
+    status: string;
+    colorMap?: Record<string, 'default' | 'error' | 'info' | 'success' | 'warning'>;
+}
+export declare const StatusBadgeCell: {
+    ({ status, colorMap }: StatusBadgeCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * UserAvatarCell - Ready-to-use cell component for user avatar + name
+ *
+ * @example
+ * renderCell: (params) => (
+ *   <UserAvatarCell
+ *     name={params.row.name}
+ *     avatarUrl={params.row.avatarUrl}
+ *   />
+ * )
+ */
+export interface UserAvatarCellProps {
+    name: string;
+    avatarUrl?: string;
+    avatarSize?: number;
+}
+export declare const UserAvatarCell: {
+    ({ name, avatarUrl, avatarSize }: UserAvatarCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * MultiBadgesCell - Ready-to-use cell component for multiple badges
+ *
+ * Uses tighter spacing (8px) between badges compared to standard DataGridCellContent (16px).
+ *
+ * @example
+ * renderCell: (params) => (
+ *   <MultiBadgesCell
+ *     badges={[
+ *       { label: 'Active', color: 'success' },
+ *       { label: 'New', color: 'info' }
+ *     ]}
+ *   />
+ * )
+ */
+export interface MultiBadgesCellProps {
+    badges: Array<{
+        label: string;
+        color?: 'default' | 'error' | 'info' | 'success' | 'warning';
+    }>;
+}
+export declare const MultiBadgesCell: {
+    ({ badges }: MultiBadgesCellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/DataGridFilterPanel.d.ts

@@ -0,0 +1,57 @@
+import { GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
+import type React from 'react';
+import { NeoSelect } from './Select';
+export type { GridFilterItem as FilterItem, GridFilterOperator as FilterOperator, } from '@mui/x-data-grid';
+/**
+ * Icon components for DataGrid filter panel slots
+ * These must be passed to the DataGrid's slots prop
+ */
+export declare const NeoDataGridFilterPanelAddIcon: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const NeoDataGridFilterPanelDeleteIcon: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const NeoDataGridFilterPanelRemoveAllIcon: {
+    (): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * NeoDataGridFilterPanel - MUI GridFilterPanel with Neo design system styling and Lucide icons
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4594-163847
+ *
+ * A styled version of MUI's GridFilterPanel that applies Neo design tokens.
+ * The per-row delete icon uses Lucide Trash2 internally.
+ *
+ * For footer button icons ("Add filter" and "Remove all"), you must also pass the icon components
+ * to the DataGrid's slots prop.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   NeoDataGridFilterPanel,
+ *   FilterPanelAddIcon,
+ *   FilterPanelDeleteIcon,
+ *   FilterPanelRemoveAllIcon
+ * } from '@moderneinc/neo-styled-components'
+ *
+ * <DataGridPro
+ *   rows={rows}
+ *   columns={columns}
+ *   slots={{
+ *     filterPanel: NeoDataGridFilterPanel,
+ *     filterPanelAddIcon: FilterPanelAddIcon,
+ *     filterPanelDeleteIcon: FilterPanelDeleteIcon,
+ *     filterPanelRemoveAllIcon: FilterPanelRemoveAllIcon,
+ *   }}
+ * />
+ * ```
+ */
+export { NeoSelect as NeoDataGridSelect };
+export declare const NeoDataGridFilterPanel: {
+    (props: React.ComponentProps<typeof MuiGridFilterPanel>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Divider.d.ts

@@ -0,0 +1,32 @@
+import { type DividerProps } from '@mui/material/Divider';
+export interface NeoDividerProps extends DividerProps {
+}
+/**
+ * NeoDivider - Horizontal divider for separating content
+ *
+ * Generic divider component that can be used in menus, lists, cards, or any layout
+ * that needs visual separation between content sections.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
+ *
+ * @example
+ * ```tsx
+ * // In a menu
+ * <NeoMenu>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
+ *   <NeoDivider />
+ *   <NeoMenuItem>Sign out</NeoMenuItem>
+ * </NeoMenu>
+ *
+ * // In a card
+ * <Card>
+ *   <CardHeader>Title</CardHeader>
+ *   <NeoDivider />
+ *   <CardContent>Content</CardContent>
+ * </Card>
+ * ```
+ */
+export declare const NeoDivider: {
+    (props: NeoDividerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};