@moderneinc/neo-styled-components 5.0.0-next.3706d6 → 5.0.0-next.3dfbc7

package/dist/Alert/Alert.d.ts

@@ -2,6 +2,7 @@ import { type AlertProps } from '@mui/material/Alert';
 import type { ReactNode } from 'react';
 type Intent = 'success' | 'error' | 'warning' | 'offline' | 'info';
 type AlertType = 'outlined' | 'filled';
+type AlertSize = 'default' | 'compact';
 export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
     /**
      * The intent/purpose of the alert
@@ -15,6 +16,13 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
      * @figma Type
      */
     type?: AlertType;
+    /**
+     * Vertical density. `default` is page-level (64px fixed height,
+     * supports title + description). `compact` is inline-panel use
+     * (auto height, 40px min, single-line optimized for terse messages).
+     * @default "default"
+     */
+    size?: AlertSize;
     /**
      * The title text displayed in the alert
      */
@@ -31,6 +39,12 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
      * Optional action element (typically a button) displayed on the right
      */
     action?: ReactNode;
+    /**
+     * Optional content rendered below the title inside the alert container.
+     * Use for rich content like stack traces or code blocks. When present,
+     * the alert expands to auto height and top-aligns its icon and action.
+     */
+    children?: ReactNode;
 }
 /**
  * NeoAlert - Alert component for displaying contextual status messages
@@ -44,7 +58,7 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
  * - Show Button → action prop presence
  */
 export declare const NeoAlert: {
-    ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, type, size, title, description, icon, action, children, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/Badge/Badge.d.ts

@@ -1,10 +1,23 @@
 import { type ChipProps } from '@mui/material/Chip';
+type BadgeSize = 'small' | 'medium';
+type BadgeVariant = 'filled' | 'outlined';
 export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
     /**
-     * The color/state of the badge
+     * The color/state of the badge. Ignored when `variant="outlined"`.
      * @default "default"
      */
     color?: 'default' | 'error' | 'warning' | 'success' | 'info';
+    /**
+     * Visual density of the badge. `small` is 20px tall, `medium` is 24px tall.
+     * @default "medium"
+     */
+    size?: BadgeSize;
+    /**
+     * Visual treatment. `filled` uses a per-color tinted background;
+     * `outlined` uses a transparent background with a neutral secondary border.
+     * @default "filled"
+     */
+    variant?: BadgeVariant;
 }
 /**
  * NeoBadge - Status badge component based on MUI Chip
@@ -18,6 +31,7 @@ export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
  * - Label → label prop
  */
 export declare const NeoBadge: {
-    (props: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, variant, ...props }: NeoBadgeProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -3,16 +3,6 @@ import type { ElementType, 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 {

package/dist/Dot/Dot.d.ts

@@ -1,8 +1,8 @@
-import { type BadgeProps } from '@mui/material/Badge';
+import type { HTMLAttributes, ReactNode } from 'react';
 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'> {
+export interface NeoDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * The size of the dot
      * @default "medium"
@@ -18,9 +18,16 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
      * @default "neutral"
      */
     color?: DotColor;
+    /**
+     * Optional icon rendered centered inside the dot. Use to indicate intent within
+     * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
+     * using `currentColor` inherit a white stroke/fill for contrast against the
+     * colored background, and are scaled to 70% of the dot size.
+     */
+    children?: ReactNode;
 }
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -30,7 +37,7 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
  * - 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;
+    ({ size, variant, color, children, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/InputField/InputField.d.ts

@@ -1,6 +1,18 @@
 import { type InputBaseProps } from '@mui/material/InputBase';
 import type { ReactNode } from 'react';
 type InputFieldSize = 'small' | 'medium';
+export type { InputFieldSize as NeoInputFieldSize };
+export declare const StyledFormControl: import("@emotion/styled").StyledComponent<import("@mui/material/FormControl").FormControlOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "error" | "fullWidth" | "required" | "focused" | "hiddenLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    size?: InputFieldSize;
+}, {}, {}>;
+export declare const StyledInputLabel: import("@emotion/styled").StyledComponent<import("@mui/material/InputLabel").InputLabelOwnProps & Pick<import("@mui/material/FormLabel").FormLabelOwnProps, "color" | "filled"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "style" | "color" | "margin" | "size" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused" | "disableAnimation" | "shrink"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    size?: InputFieldSize;
+    infoIcon?: boolean;
+}, {}, {}>;
+export declare const InfoIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledFormHelperText: import("@emotion/styled").StyledComponent<import("@mui/material/FormHelperText").FormHelperTextOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "style" | "margin" | "children" | "sx" | "className" | "classes" | "disabled" | "variant" | "filled" | "error" | "required" | "focused"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    size?: InputFieldSize;
+}, {}, {}>;
 export interface NeoInputFieldProps extends Omit<InputBaseProps, 'size'> {
     /**
      * The size of the input field
@@ -87,4 +99,3 @@ 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/ListItemButton/ListItemButton.d.ts

@@ -1,4 +1,5 @@
 import type { ListItemButtonProps } from '@mui/material/ListItemButton';
+type ListItemButtonVariant = 'card' | 'nav';
 /**
  * Props for the NeoListItemButton component
  */
@@ -15,6 +16,15 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
      * @figma property1="Disabled"
      */
     disabled?: boolean;
+    /**
+     * Visual treatment.
+     * - `card` (default): bordered card-style for settings/radio-list patterns.
+     *   Expects ListItemIcon + ListItemText children for full styling support.
+     * - `nav`: borderless sidebar nav style with subtle hover/selected
+     *   highlights. Renders children inline; works with plain text.
+     * @default 'card'
+     */
+    variant?: ListItemButtonVariant;
 }
 /**
  * NeoListItemButton - Selectable list item with icon and text
@@ -60,6 +70,7 @@ export interface NeoListItemButtonProps extends ListItemButtonProps {
  * - colors.grey[50] (#f9fafb) - Disabled background
  */
 export declare const NeoListItemButton: {
-    ({ children, selected, disabled, ...props }: NeoListItemButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, selected, disabled, variant, ...props }: NeoListItemButtonProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/NavigationItem/NavigationItem.d.ts

@@ -30,7 +30,9 @@ type NeoNavigationItemOwnProps = {
          * Override `intent`, `variant`, or `size` to change appearance — e.g.
          * `{ variant: 'outlined', intent: 'default' }` for a calmer grey badge.
          */
-        badge?: NeoTagOwnProps;
+        badge?: NeoTagOwnProps & {
+            sx?: Record<string, unknown>;
+        };
     };
     /**
      * Additional content

package/dist/PageContent/PageContent.d.ts

@@ -73,6 +73,17 @@ export interface NeoPageContentProps extends BoxProps {
      * @default false
      */
     disableGutters?: boolean;
+    /**
+     * Page layout mode.
+     * - `default`: standard centered/max-width-constrained content with
+     *   gutters. Best for content-driven pages (settings, forms, lists).
+     * - `fullBleed`: removes max-width and horizontal/bottom padding, lets
+     *   the content area flex-fill the viewport. Best for full-height
+     *   layouts (sidebar + panel canvases, builders, explorers). Title
+     *   and breadcrumbs still render — they sit at the leading edge.
+     * @default 'default'
+     */
+    layout?: 'default' | 'fullBleed';
     /**
      * Loading state - shows spinner while content loads
      * @default false
@@ -143,7 +154,7 @@ export interface NeoPageContentProps extends BoxProps {
  * </NeoPageContent>
  * ```
  */
-export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth, centerContent, disableGutters, isLoading, showBackToTop, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky, contentMaxWidth: contentMaxWidthProp, centerContent, disableGutters: disableGuttersProp, isLoading, showBackToTop, layout, children, sx, ...boxProps }: NeoPageContentProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace NeoPageContent {
     var displayName: string;
 }

package/dist/SelectField/SelectField.d.ts

@@ -0,0 +1,64 @@
+import type { SelectChangeEvent, SelectProps } from '@mui/material/Select';
+import type { ReactNode } from 'react';
+import { type NeoInputFieldSize } from '../InputField/InputField';
+import { NeoSelectOption } from '../Select/Select';
+export interface NeoSelectFieldOption {
+    value: string | number;
+    label: ReactNode;
+    disabled?: boolean;
+}
+export interface NeoSelectFieldProps extends Omit<SelectProps, 'size' | 'variant' | 'error' | 'children'> {
+    /**
+     * Form-control size.
+     * @default 'medium'
+     */
+    size?: NeoInputFieldSize;
+    /**
+     * Show error/destructive state with red label + helper text styling.
+     * @default false
+     */
+    destructive?: boolean;
+    /** Label text rendered above the select. */
+    label?: string;
+    /** Show required indicator (asterisk) next to the label. @default false */
+    required?: boolean;
+    /** Optional info icon rendered next to the label. */
+    infoIcon?: ReactNode;
+    /** Helper text rendered below the select (normal state). */
+    helperText?: string;
+    /**
+     * Error message rendered below the select when `destructive` is true.
+     * Takes precedence over helperText when destructive.
+     */
+    errorMessage?: string;
+    /**
+     * Convenience option list. Each entry becomes a NeoSelectOption.
+     * Use `children` instead for custom option content.
+     */
+    options?: NeoSelectFieldOption[];
+    /** Custom option content. Overrides `options` if both are provided. */
+    children?: ReactNode;
+}
+/**
+ * NeoSelectField — composite of NeoInputField's form chrome (label,
+ * helper text, error state) wrapped around NeoSelect. Mirrors the
+ * MUI `<TextField select>` ergonomics with Neo design tokens, so
+ * consumers don't have to compose the two manually.
+ *
+ * @example
+ * <NeoSelectField
+ *   label="Response format"
+ *   value={format}
+ *   onChange={e => setFormat(e.target.value)}
+ *   options={[
+ *     { value: 'json', label: 'JSON' },
+ *     { value: 'plain', label: 'Plain text' },
+ *   ]}
+ * />
+ */
+export declare const NeoSelectField: {
+    ({ size, destructive, label, required, infoIcon, helperText, errorMessage, options, children, disabled, id, ...selectProps }: NeoSelectFieldProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { NeoSelectOption };
+export type NeoSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;

package/dist/TabPanel/TabPanel.d.ts

@@ -0,0 +1,47 @@
+import { type BoxProps } from '@mui/material/Box';
+import type { ReactNode } from 'react';
+type TabPanelVariant = 'default' | 'flush';
+export interface NeoTabPanelProps extends Omit<BoxProps, 'role'> {
+    /** This panel's identity — must match `currentValue` for the panel to render. */
+    value: string | number;
+    /**
+     * The currently selected tab value. When equal to `value`, this panel
+     * renders its children. Otherwise the panel is hidden (and removed from
+     * the accessibility tree via `hidden`).
+     */
+    currentValue: string | number;
+    /**
+     * Layout density.
+     * - `default`: 16px top padding — for standard content tabs.
+     * - `flush`: zero padding — for full-bleed sidebar/panel/canvas layouts
+     *   where content must sit flush against the tab bar's bottom border.
+     * @default 'default'
+     */
+    variant?: TabPanelVariant;
+    /** Panel content. */
+    children?: ReactNode;
+}
+/**
+ * NeoTabPanel — completes the NeoTabs + NeoTab + NeoTabPanel set.
+ *
+ * Lightweight ARIA-compliant tab panel that renders children when its
+ * `value` matches `currentValue`. No MUI Lab / TabContext dependency.
+ *
+ * @example
+ * const [tab, setTab] = useState('overview')
+ * return (
+ *   <>
+ *     <NeoTabs value={tab} onChange={(_, v) => setTab(v)}>
+ *       <NeoTab value="overview" label="Overview" />
+ *       <NeoTab value="details" label="Details" />
+ *     </NeoTabs>
+ *     <NeoTabPanel value="overview" currentValue={tab}>...</NeoTabPanel>
+ *     <NeoTabPanel value="details" currentValue={tab} variant="flush">...</NeoTabPanel>
+ *   </>
+ * )
+ */
+export declare const NeoTabPanel: {
+    ({ value, currentValue, variant, children, ...boxProps }: NeoTabPanelProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Table/Table.d.ts

@@ -0,0 +1,64 @@
+import { type TableProps } from '@mui/material/Table';
+import type { ReactNode } from 'react';
+type TableSize = 'small' | 'medium';
+type TableVariant = 'bordered' | 'plain';
+type CellAlign = 'left' | 'center' | 'right';
+export interface NeoTableColumn {
+    /** Unique key — looked up against each row to find the cell value. */
+    key: string;
+    /** Header label rendered in the thead. */
+    header: ReactNode;
+    /** Cell text alignment. @default 'left' */
+    align?: CellAlign;
+    /** Column width — any CSS length (e.g. '120px', '20%'). */
+    width?: string;
+}
+export interface NeoTableProps extends Omit<TableProps, 'size'> {
+    /** Column definitions. Order in the array determines render order. */
+    columns: NeoTableColumn[];
+    /**
+     * Row data. Each row is a record keyed by `column.key`. Cell values
+     * may be any ReactNode (strings, badges, icons, etc.).
+     */
+    rows: Array<Record<string, ReactNode>>;
+    /**
+     * Cell density.
+     * - 'small': tight padding for dense lists.
+     * - 'medium': comfortable padding for read-heavy tables.
+     * @default 'small'
+     */
+    size?: TableSize;
+    /**
+     * Container chrome.
+     * - 'bordered': container border + borderRadius.card.
+     * - 'plain': no container chrome — for embedding inside an existing surface.
+     * @default 'bordered'
+     */
+    variant?: TableVariant;
+    /** Optional accessible label for the table. */
+    ariaLabel?: string;
+}
+/**
+ * NeoTable — lightweight read-only table for static data (schema rows,
+ * key/value summaries, response metadata). For interactive grids with
+ * sorting / filtering / pagination, use NeoDataGrid instead.
+ *
+ * @example
+ * <NeoTable
+ *   columns={[
+ *     { key: 'name', header: 'Property' },
+ *     { key: 'type', header: 'Type', align: 'center', width: '120px' },
+ *     { key: 'description', header: 'Description' },
+ *   ]}
+ *   rows={[
+ *     { name: 'id', type: 'string', description: 'Resource identifier' },
+ *     { name: 'count', type: 'number', description: 'Item count' },
+ *   ]}
+ *   size="small"
+ * />
+ */
+export declare const NeoTable: {
+    ({ columns, rows, size, variant, ariaLabel, ...tableProps }: NeoTableProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ToggleButton/ToggleButton.d.ts

@@ -1,6 +1,21 @@
+import { type ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
+type ToggleButtonSize = 'small' | 'medium';
+export interface NeoToggleButtonProps extends Omit<MuiToggleButtonProps, 'color' | 'size'> {
+    /**
+     * Size of the toggle button. Set automatically by NeoToggleButtonGroup
+     * when used as a child; set explicitly only for standalone use.
+     * @default 'medium'
+     */
+    size?: ToggleButtonSize;
+}
 /**
- * NeoToggleButton
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4163-5777
+ * NeoToggleButton — a single button in a segmented control. Use inside
+ * NeoToggleButtonGroup; the group manages selection state and forwards
+ * size to its children. Suitable for inline toolbar mode switches
+ * ("Table" / "Raw"). For page-level tabs, prefer NeoButtonTab.
  */
-export declare const NeoToggleButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NeoToggleButton: {
+    ({ children, size, ...props }: NeoToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -0,0 +1,26 @@
+import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
+type ToggleButtonGroupSize = 'small' | 'medium';
+export interface NeoToggleButtonGroupProps extends Omit<MuiToggleButtonGroupProps, 'orientation' | 'color' | 'size' | 'fullWidth'> {
+    /**
+     * Size of the buttons in the group. Forwarded to each NeoToggleButton child.
+     * @default 'medium'
+     */
+    size?: ToggleButtonGroupSize;
+}
+/**
+ * NeoToggleButtonGroup — pill-shaped segmented control wrapping
+ * MUI ToggleButtonGroup with Neo tokens. Use for inline toolbar mode
+ * switches (e.g. "Table" / "Raw" in a panel header). For page-level
+ * tab navigation, prefer NeoButtonTabGroup.
+ *
+ * @example
+ * <NeoToggleButtonGroup value={mode} exclusive onChange={(_, v) => v && setMode(v)} size="small">
+ *   <NeoToggleButton value="table">Table</NeoToggleButton>
+ *   <NeoToggleButton value="raw">Raw</NeoToggleButton>
+ * </NeoToggleButtonGroup>
+ */
+export declare const NeoToggleButtonGroup: {
+    ({ size, children, ...props }: NeoToggleButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};