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

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/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 {
@@ -33,7 +33,7 @@ type NeoTagOwnProps = {
      */
     color?: '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'> & Omit<ComponentPropsWithoutRef<C>, keyof NeoTagOwnProps | keyof ChipProps> & {
     component?: C;
 };
 /**