@moderneinc/neo-styled-components 3.0.0 → 4.0.0-next.3cddda

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,50 @@
+import { type AlertProps } from '@mui/material/Alert';
+import type { ReactNode } from 'react';
+type Intent = 'success' | 'error' | 'warning' | 'offline' | 'info';
+type AlertType = 'outlined' | 'filled';
+export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
+    /**
+     * The intent/purpose of the alert
+     * @default "success"
+     * @figma Intent
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     * @figma Type
+     */
+    type?: AlertType;
+    /**
+     * The title text displayed in the alert
+     */
+    title: string;
+    /**
+     * Optional supporting description text
+     */
+    description?: string;
+    /**
+     * Custom icon to display (defaults to intent-based icon)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional action element (typically a button) displayed on the right
+     */
+    action?: ReactNode;
+}
+/**
+ * NeoAlert - Alert component for displaying contextual status messages
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
+ *
+ * Figma Props Mapping:
+ * - Intent (Success|Error|Warning|Offline|Info) → intent
+ * - Type (Outlined|Filled) → type
+ * - Show supporting text → description prop presence
+ * - Show Button → action prop presence
+ */
+export declare const NeoAlert: {
+    ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/DataGridFilterPanel/DataGridFilterPanel.d.ts

@@ -1,6 +1,6 @@
 import { GridFilterPanel as MuiGridFilterPanel } from '@mui/x-data-grid';
 import type React from 'react';
-import { NeoDropdown } from '../Dropdown/Dropdown';
+import { NeoSelect } from '../Select/Select';
 export type { GridFilterItem as FilterItem, GridFilterOperator as FilterOperator, } from '@mui/x-data-grid';
 /**
  * Icon components for DataGrid filter panel slots
@@ -50,7 +50,7 @@ export declare const NeoDataGridFilterPanelRemoveAllIcon: {
  * />
  * ```
  */
-export { NeoDropdown as NeoDataGridSelect };
+export { NeoSelect as NeoDataGridSelect };
 export declare const NeoDataGridFilterPanel: {
     (props: React.ComponentProps<typeof MuiGridFilterPanel>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/DatePicker/DatePicker.d.ts

@@ -10,13 +10,12 @@ export interface NeoDatePickerProps {
     /**
      * Type of date picker to render
      * @default "single"
-     * @figma type
+     * @figma Mode
      */
     type?: DatePickerType;
     /**
      * Whether the picker is open
      * When not provided, the picker manages its own open state (uncontrolled mode)
-     * @figma opened
      */
     open?: boolean;
     /**
@@ -85,11 +84,10 @@ export interface NeoDatePickerProps {
  * customization. Supports both single date selection and date range selection with
  * built-in shortcuts.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4176-3700
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4176-8593
  *
  * Figma Props Mapping:
- * - opened → open (boolean)
- * - type ('Single date'|'Dual dates') → type ('single'|'range')
+ * - Mode ('Single'|'Range') → type ('single'|'range')
  *
  * Design Tokens Used:
  * - colors: semanticColors.grey[800], semanticColors.grey[700], semanticColors.surfaces.white, semanticColors.icons.hoverBackground

package/dist/Divider/Divider.d.ts

@@ -12,11 +12,11 @@ export interface NeoDividerProps extends DividerProps {
  * @example
  * ```tsx
  * // In a menu
- * <NeoDropdownMenu>
- *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
+ * <NeoMenu>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
  *   <NeoDivider />
- *   <NeoDropdownMenuItem>Sign out</NeoDropdownMenuItem>
- * </NeoDropdownMenu>
+ *   <NeoMenuItem>Sign out</NeoMenuItem>
+ * </NeoMenu>
  *
  * // In a card
  * <Card>

package/dist/ListItem/ListItem.d.ts

@@ -2,7 +2,7 @@ import { type ListItemButtonProps } from '@mui/material/ListItemButton';
 import type { ReactNode } from 'react';
 declare module '@mui/material/ListItemButton' {
     interface ListItemButtonPropsVariantOverrides {
-        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+        size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     }
 }
 /**
@@ -14,19 +14,19 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
      * @default "medium"
      * @figma size
      */
-    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+    size?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
     /**
      * Primary text content (required)
      * @figma Placeholder (primary text)
      */
     primaryText: ReactNode;
     /**
-     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge)
+     * Secondary/supporting text content (optional, shown in large/xlarge/xxlarge/xxxlarge)
      * @figma Recipe name (secondary text)
      */
     secondaryText?: ReactNode;
     /**
-     * Badge content for count display (optional, for xxlarge link variant)
+     * Badge content for count display (optional, for xxlarge/xxxlarge link variant)
      * @figma (# recipes)
      */
     badge?: ReactNode;
@@ -57,14 +57,14 @@ export interface NeoListItemProps extends Omit<ListItemButtonProps, 'children' |
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
  *
- * A versatile list item component built on MUI's ListItemButton that supports five size variants
- * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
+ * A versatile list item component built on MUI's ListItemButton that supports six size variants
+ * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
  * icons/logos, secondary text, and badges.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4205-36442
  *
  * Figma Props Mapping:
- * - size (small|medium|large|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
+ * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)

package/dist/{DropdownMenu/DropdownMenu.d.ts → Menu/Menu.d.ts}

@@ -1,12 +1,12 @@
 import { type MenuProps } from '@mui/material/Menu';
-export interface NeoDropdownMenuProps extends MenuProps {
+export interface NeoMenuProps extends MenuProps {
     /**
-     * Menu content (typically NeoDropdownMenuItem components)
+     * Menu content (typically NeoMenuItem components)
      */
     children?: React.ReactNode;
 }
 /**
- * NeoDropdownMenu - Dropdown menu component based on MUI Menu
+ * NeoMenu - Menu component based on MUI Menu
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11141-4980
  *
@@ -16,17 +16,17 @@ export interface NeoDropdownMenuProps extends MenuProps {
  * const open = Boolean(anchorEl);
  *
  * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
- * <NeoDropdownMenu
+ * <NeoMenu
  *   open={open}
  *   anchorEl={anchorEl}
  *   onClose={() => setAnchorEl(null)}
  * >
- *   <NeoDropdownMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoDropdownMenuItem>
- *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
- * </NeoDropdownMenu>
+ *   <NeoMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoMenuItem>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
+ * </NeoMenu>
  * ```
  */
-export declare const NeoDropdownMenu: {
-    ({ children, ...props }: NeoDropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare const NeoMenu: {
+    ({ children, ...props }: NeoMenuProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/{DropdownMenuItem/DropdownMenuItem.d.ts → MenuItem/MenuItem.d.ts}

@@ -1,6 +1,6 @@
 import { type MenuItemProps } from '@mui/material/MenuItem';
 import type { ReactNode } from 'react';
-export interface NeoDropdownMenuItemProps extends MenuItemProps {
+export interface NeoMenuItemProps extends MenuItemProps {
     /**
      * Optional icon to display on the left side
      * Note: Cannot be directly mapped from Figma (ReactNode)
@@ -25,26 +25,26 @@ export interface NeoDropdownMenuItemProps extends MenuItemProps {
     children?: ReactNode;
 }
 /**
- * NeoDropdownMenuItem - Dropdown menu item component based on MUI MenuItem
+ * NeoMenuItem - Menu item component based on MUI MenuItem
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
  *
  * @example
  * ```tsx
  * // With icon and shortcut
- * <NeoDropdownMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ * <NeoMenuItem icon={<UserIcon />} shortcut="⌘+P">
  *   View profile
- * </NeoDropdownMenuItem>
+ * </NeoMenuItem>
  *
  * // With secondary text (user list pattern from Figma node 4305:41844)
- * <NeoDropdownMenuItem secondaryText="@phoenix">Phoenix Baker</NeoDropdownMenuItem>
- * <NeoDropdownMenuItem secondaryText="@olivia">Olivia Rhye</NeoDropdownMenuItem>
+ * <NeoMenuItem secondaryText="@phoenix">Phoenix Baker</NeoMenuItem>
+ * <NeoMenuItem secondaryText="@olivia">Olivia Rhye</NeoMenuItem>
  *
  * // Disabled state
- * <NeoDropdownMenuItem disabled>Disabled item</NeoDropdownMenuItem>
+ * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
  * ```
  */
-export declare const NeoDropdownMenuItem: {
-    ({ icon, shortcut, secondaryText, children, ...props }: NeoDropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const NeoMenuItem: {
+    ({ icon, shortcut, secondaryText, children, ...props }: NeoMenuItemProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/NavigationItem/NavigationItem.d.ts

@@ -1,6 +1,6 @@
-import { type ButtonBaseProps } from '@mui/material/ButtonBase';
-import type { ReactNode } from 'react';
-export interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'> {
+import ButtonBase, { type ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+type NeoNavigationItemOwnProps = {
     /**
      * Icon element to display
      */
@@ -24,13 +24,17 @@ export interface NeoNavigationItemProps extends Omit<ButtonBaseProps, 'children'
      * Additional content
      */
     children?: ReactNode;
-}
+};
+export type NeoNavigationItemProps<C extends ElementType = typeof ButtonBase> = NeoNavigationItemOwnProps & Omit<ButtonBaseProps, keyof NeoNavigationItemOwnProps | 'component'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoNavigationItemOwnProps | keyof ButtonBaseProps> & {
+    component?: C;
+};
 /**
  * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
  */
-export declare const NeoNavigationItem: {
-    ({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare function NeoNavigationItem<C extends ElementType = typeof ButtonBase>({ icon, label, selected, tag, children, ...props }: NeoNavigationItemProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace NeoNavigationItem {
+    var displayName: string;
+}
+export {};

package/dist/Select/Select.d.ts

@@ -0,0 +1,24 @@
+import { type SelectProps as MuiSelectProps } from '@mui/material/Select';
+import { NeoMenuItem } from '../MenuItem/MenuItem';
+export type NeoSelectProps = MuiSelectProps;
+/**
+ * NeoSelect - Select component with Neo design system styling
+ *
+ * A styled version of MUI's Select that uses Neo design tokens, Lucide ChevronDown icon,
+ * and NeoMenu/NeoMenuItem for the dropdown list.
+ *
+ * @example
+ * ```tsx
+ * import { NeoSelect, NeoSelectOption } from '@moderneinc/neo-styled-components'
+ *
+ * <NeoSelect value={value} onChange={handleChange}>
+ *   <NeoSelectOption value="option1">Option 1</NeoSelectOption>
+ *   <NeoSelectOption value="option2">Option 2</NeoSelectOption>
+ * </NeoSelect>
+ * ```
+ */
+export declare const NeoSelect: {
+    (props: NeoSelectProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { NeoMenuItem as NeoSelectOption };

package/dist/Tabs/Tabs.d.ts

@@ -39,10 +39,7 @@ export interface NeoTabProps extends Omit<TabProps, 'label'> {
  *
  * 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)
+ * - Show tag → count prop (renders NeoTag)
  * - Text label → label prop
  */
 export declare const NeoTab: {

package/dist/Tag/Tag.d.ts

@@ -1,4 +1,4 @@
-import Chip from '@mui/material/Chip';
+import Chip, { type ChipProps } from '@mui/material/Chip';
 import type { ComponentPropsWithoutRef, ElementType } from 'react';
 declare module '@mui/material/Chip' {
     interface ChipPropsColorOverrides {
@@ -16,24 +16,24 @@ declare module '@mui/material/Chip' {
 type NeoTagOwnProps = {
     /**
      * The size of the tag
-     * @figma m (sm|md|lg)
+     * @figma Size (Small|Medium|Large)
      * @default "small"
      */
     size?: 'small' | 'medium' | 'large';
     /**
      * The variant style of the tag
-     * @figma type (light|dark)
+     * @figma Variant (Subtle|Filled)
      * @default "outlined"
      */
     variant?: 'outlined' | 'filled';
     /**
-     * The color/state of the tag
-     * @figma state (Neutral|Error|Warning|Success|Info|Violet|Beta)
+     * The intent/purpose of the tag
+     * @figma Intent (Neutral|Error|Warning|Success|Info|Violet)
      * @default "default"
      */
-    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
+    intent?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet' | 'beta';
 };
-export type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps> & {
+export type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps & Omit<ChipProps, keyof NeoTagOwnProps | 'component' | 'color'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps | keyof ChipProps> & {
     component?: C;
 };
 /**
@@ -42,12 +42,12 @@ export type NeoTagProps<C extends ElementType = typeof Chip> = NeoTagOwnProps &
  * @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|Beta) → color (default|error|warning|success|info|violet|beta)
- * - Label text → label prop
+ * - Size (Small|Medium|Large) → size (small|medium|large)
+ * - Variant (Subtle|Filled) → variant (outlined|filled)
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
+ * - TEXT Label → label prop
  */
-export declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, ...props }: NeoTagProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare function NeoTag<C extends ElementType = typeof Chip>({ size, variant, intent, ...props }: NeoTagProps<C>): import("react/jsx-runtime").JSX.Element;
 export declare namespace NeoTag {
     var displayName: string;
 }

package/dist/Toast/Toast.d.ts

@@ -1,12 +1,23 @@
 import { type AlertProps } from '@mui/material/Alert';
 import Button from '@mui/material/Button';
 import type { ReactNode } from 'react';
+type Intent = 'neutral' | 'info' | 'success' | 'error' | 'warning';
+type ToastType = 'outlined' | 'filled';
 export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the toast
-     * @default "default"
+     * The intent/purpose of the toast
+     * @default "neutral"
+     *
+     * @figmaPropMapping Intent (Neutral|Error|Success|Info|Warning) → intent
      */
-    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info';
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg + border) or filled (solid bg)
+     * @default "outlined"
+     *
+     * @figmaPropMapping Style (Outlined|Filled) → type
+     */
+    type?: ToastType;
     /**
      * The title/header text
      */
@@ -17,7 +28,7 @@ export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' |
     message?: string;
     /**
      * Whether to show the close button
-     * @default true
+     * @default false
      */
     showClose?: boolean;
     /**
@@ -34,26 +45,21 @@ export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' |
  * 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) → variant (default|dark|brand|error|success|info)
- * - header → title (string)
- * - supportingText → message (string)
- * - xCloseButton → showClose (boolean)
- * - actions → actions (ReactNode)
  */
 export declare const NeoToast: {
-    ({ variant, title, message, showClose, actions, onClose, ...props }: NeoToastProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, type, title, message, showClose, actions, 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, intent, type, children, ...props }: {
         primary?: boolean;
-        variant?: NeoToastProps["variant"];
+        intent?: Intent;
+        type?: ToastType;
         children: ReactNode;
     } & Omit<React.ComponentProps<typeof Button>, "variant">): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/Tooltip/Tooltip.d.ts

@@ -10,7 +10,7 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
     /**
      * The visual style variant
      * @default "light"
-     * @figma Type
+     * @figma Theme
      */
     variant?: TooltipVariant;
     /**
@@ -35,8 +35,8 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Type (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
- * - Arrow → arrow (boolean) + placement (top/bottom/left/right/etc)
+ * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
+ * - Placement → arrow (boolean) + placement (top/bottom/left/right/etc)
  * - Supporting text (True|False) → description (string|undefined)
  * - text → title (string, literal content)
  *