@moderneinc/neo-styled-components 0.0.0-development → 1.6.1-next.024dce

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/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/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/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;
+};

package/dist/Dot.d.ts

@@ -0,0 +1,36 @@
+import { type BadgeProps } from '@mui/material/Badge';
+type DotSize = 'small' | 'medium' | 'large';
+type DotVariant = 'solid' | 'outline';
+type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeContent' | 'children'> {
+    /**
+     * The size of the dot
+     * @default "medium"
+     */
+    size?: DotSize;
+    /**
+     * The variant of the dot
+     * @default "solid"
+     */
+    variant?: DotVariant;
+    /**
+     * The color/status of the dot
+     * @default "neutral"
+     */
+    color?: DotColor;
+}
+/**
+ * NeoDot - Status indicator dot component based on MUI Badge
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
+ *
+ * Figma Props Mapping:
+ * - size (sm|md|lg) → size prop (small|medium|large)
+ * - outline (False|True) → variant prop (solid|outline)
+ * - Color is configurable via color prop (success|error|warning|info|neutral)
+ */
+export declare const NeoDot: {
+    ({ size, variant, color, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/IconButton.d.ts

@@ -0,0 +1,31 @@
+import { type IconButtonProps } from '@mui/material/IconButton';
+type IconButtonSize = 'small' | 'medium';
+export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
+    /**
+     * The size of the icon button
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: IconButtonSize;
+}
+/**
+ * NeoIconButton - Icon-only button component based on MUI IconButton
+ *
+ * Simple, neutral icon button with transparent background and icon color states.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
+ *
+ * Figma Props Mapping:
+ * - Hierarchy=Icon → Single default style (no variant prop)
+ * - Size (Small|Medium) → size prop
+ * - State=Disabled → disabled prop
+ * - State=Hover → CSS :hover
+ * - State=Pressed → CSS :active
+ * - State=Focused → CSS :focus-visible
+ */
+export declare const NeoIconButton: {
+    ({ size, ...props }: NeoIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/InputField.d.ts

@@ -0,0 +1,90 @@
+import { type InputBaseProps } from '@mui/material/InputBase';
+import type { ReactNode } from 'react';
+type InputFieldSize = 'small' | 'medium';
+export interface NeoInputFieldProps extends Omit<InputBaseProps, 'size'> {
+    /**
+     * The size of the input field
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: InputFieldSize;
+    /**
+     * Show error/destructive state with red styling
+     * @default false
+     *
+     * @figma Destructive
+     */
+    destructive?: boolean;
+    /**
+     * Label text for the input
+     *
+     * @figma Label
+     */
+    label?: string;
+    /**
+     * Show required indicator (asterisk)
+     * @default false
+     *
+     * @figma Required indicator
+     */
+    required?: boolean;
+    /**
+     * Info icon to display next to the label
+     *
+     * @figma Info icon
+     */
+    infoIcon?: ReactNode;
+    /**
+     * Helper text displayed below the input (normal state)
+     *
+     * @figma Helper text
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the input (destructive state)
+     * Takes precedence over helperText when destructive is true
+     *
+     * @figma Error message
+     */
+    errorMessage?: string;
+    /**
+     * Icon to display at the start of the input
+     *
+     * @figma Left icon
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon to display at the end of the input
+     * In destructive state, an error icon is automatically shown
+     *
+     * @figma Right icon
+     */
+    endIcon?: ReactNode;
+}
+/**
+ * NeoInputField - Form input field component using MUI FormControl composition
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-23373
+ *
+ * Figma Props Mapping:
+ * - Size (small|medium) → size prop
+ * - Destructive (false|true) → destructive prop
+ * - State=Placeholder → empty value with placeholder text
+ * - State=Hover → CSS :hover
+ * - State=Filled → value prop with text
+ * - State=Focused → CSS :focus
+ * - State=Disabled → disabled prop
+ * - Label → label prop
+ * - Required indicator (*) → required prop
+ * - Info icon → infoIcon prop
+ * - Helper text → helperText prop
+ * - Error message → errorMessage prop (shown when destructive=true)
+ * - Left icon → startIcon prop
+ * - Right icon → endIcon prop (auto error icon when destructive=true)
+ */
+export declare const NeoInputField: {
+    ({ size, destructive, label, required, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }: NeoInputFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Menu.d.ts

@@ -0,0 +1,37 @@
+import { type MenuProps } from '@mui/material/Menu';
+export interface NeoMenuProps extends MenuProps {
+    /**
+     * Menu content (typically NeoMenuItem components)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * NeoMenu - Dropdown menu component based on MUI Menu
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
+ *
+ * Figma Props Mapping:
+ * - Container shown in Figma is the Menu Paper component
+ * - Menu items are styled separately via NeoMenuItem
+ * - Any trigger component (Button, IconButton, etc.) can open the menu
+ *
+ * @example
+ * ```tsx
+ * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ * const open = Boolean(anchorEl);
+ *
+ * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
+ * <NeoMenu
+ *   open={open}
+ *   anchorEl={anchorEl}
+ *   onClose={() => setAnchorEl(null)}
+ * >
+ *   <NeoMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoMenuItem>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
+ * </NeoMenu>
+ * ```
+ */
+export declare const NeoMenu: {
+    ({ children, ...props }: NeoMenuProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/MenuItem.d.ts

@@ -0,0 +1,47 @@
+import { type MenuItemProps } from '@mui/material/MenuItem';
+import type { ReactNode } from 'react';
+export interface NeoMenuItemProps extends MenuItemProps {
+    /**
+     * Optional icon to display on the left side
+     */
+    icon?: ReactNode;
+    /**
+     * Optional keyboard shortcut to display on the right side
+     * @example "⌘+P" or "Ctrl+K"
+     */
+    shortcut?: string;
+    /**
+     * Menu item content (text label)
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoMenuItem - Menu item component based on MUI MenuItem
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
+ *
+ * Figma Props Mapping:
+ * - Icon slot → icon prop
+ * - Text label → children prop
+ * - Keyboard shortcut → shortcut prop
+ * - Hover state → CSS :hover
+ * - Selected state → selected prop
+ * - Disabled state → disabled prop
+ *
+ * @example
+ * ```tsx
+ * <NeoMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ *   View profile
+ * </NeoMenuItem>
+ * <NeoMenuItem icon={<SettingsIcon />} shortcut="⌘+S">
+ *   Settings
+ * </NeoMenuItem>
+ * <NeoMenuItem disabled>
+ *   Disabled item
+ * </NeoMenuItem>
+ * ```
+ */
+export declare const NeoMenuItem: {
+    ({ icon, shortcut, children, ...props }: NeoMenuItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Tabs.d.ts

@@ -0,0 +1,51 @@
+import { type TabProps } from '@mui/material/Tab';
+import type { ReactNode } from 'react';
+/**
+ * NeoTabs - Tabs container component based on MUI Tabs
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
+ *
+ * Figma Props Mapping:
+ * - Horizontal tab bar → default layout
+ * - Tab selection → value prop + onChange
+ * - Active indicator → styled via indicator slot
+ */
+export declare const NeoTabs: import("@emotion/styled").StyledComponent<import("@mui/material/Tabs").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "slots" | "slotProps" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "value" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export interface NeoTabProps extends Omit<TabProps, 'label'> {
+    /**
+     * The label for the tab
+     *
+     * @figma Text layer in tab
+     */
+    label: ReactNode;
+    /**
+     * Optional count to display in a tag next to the label
+     * @default undefined
+     *
+     * @figma Tag with number (999)
+     */
+    count?: number | string;
+    /**
+     * Tab value identifier
+     *
+     * @figma Used for Current=True/False state
+     */
+    value: string | number;
+}
+/**
+ * NeoTab - Individual tab button component based on MUI Tab
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
+ *
+ * Figma Props Mapping:
+ * - Current=True/False → Controlled by parent NeoTabs value
+ * - State=Default → default styling
+ * - State=Hover → CSS :hover
+ * - State=Focus → CSS :focus-visible
+ * - Tag count → count prop (renders NeoTag)
+ * - Text label → label prop
+ */
+export declare const NeoTab: {
+    ({ label, count, ...props }: NeoTabProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Tag.d.ts

@@ -0,0 +1,48 @@
+import { type ChipProps } from '@mui/material/Chip';
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        violet: true;
+    }
+    interface ChipPropsSizeOverrides {
+        large: true;
+    }
+    interface ChipPropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+export interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
+    /**
+     * The size of the tag
+     * @figma m (sm|md|lg)
+     * @default "small"
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant style of the tag
+     * @figma type (light|dark)
+     * @default "outlined"
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * The color/state of the tag
+     * @figma state (Neutral|Error|Warning|Success|Info|Violet)
+     * @default "default"
+     */
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet';
+}
+/**
+ * NeoTag - Small pill-shaped label component based on MUI Chip
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
+ *
+ * Figma Props Mapping:
+ * - m (sm|md|lg) → size (small|medium|large)
+ * - type (light|dark) → variant (outlined|filled)
+ * - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
+ * - Label text → label prop
+ */
+export declare const NeoTag: {
+    ({ size, variant, ...props }: NeoTagProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Toast.d.ts

@@ -0,0 +1,68 @@
+import { type AlertProps } from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import type { ReactNode } from 'react';
+export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The visual style variant of the toast
+     * @default "default"
+     */
+    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info' | 'download';
+    /**
+     * The title/header text
+     */
+    title?: string;
+    /**
+     * The body/supporting text
+     */
+    message?: string;
+    /**
+     * Whether to show the close button
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Custom action buttons (for default toast types)
+     * Pass action buttons as children of this prop
+     */
+    actions?: ReactNode;
+    /**
+     * Progress value (0-100) for download variant
+     */
+    progress?: number;
+    /**
+     * File name for download variant
+     */
+    fileName?: string;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+}
+/**
+ * NeoToast - Notification/Toast component based on MUI Alert
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-37223
+ *
+ * Figma Props Mapping:
+ * - type (Light mode|Dark mode|Brand color|Error|Success|Info|Download) → variant (default|dark|brand|error|success|info|download)
+ * - header → title (string)
+ * - supportingText → message (string)
+ * - xCloseButton → showClose (boolean)
+ * - actions → actions (ReactNode)
+ * - Progress bar → progress (number 0-100)
+ */
+export declare const NeoToast: {
+    ({ variant, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Helper component for creating toast action buttons with proper styling
+ */
+export declare const NeoToastButton: {
+    ({ primary, variant, children, ...props }: {
+        primary?: boolean;
+        variant?: NeoToastProps["variant"];
+        children: ReactNode;
+    } & Omit<React.ComponentProps<typeof Button>, "variant">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};