@moderneinc/neo-styled-components 5.0.0-next.e88b47 → 5.0.0

package/dist/SideNav/SideNav.d.ts

@@ -1,26 +1,19 @@
-import type { ReactNode } from 'react';
-/**
- * Props for the NeoSideNav component
- */
-export interface NeoSideNavProps {
-    /**
-     * The content to display inside the component
-     */
-    children?: ReactNode;
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+export type NeoSideNavProps = {
+    /** Controlled collapsed state. */
+    collapsed: boolean;
+    /** Called with the next collapsed value when the toggle is activated. */
+    onCollapsedChange: (next: boolean) => void;
+    /** Fixed top slot (e.g. product logo). */
+    header?: ReactNode;
+    /** Fixed bottom slot (e.g. tenant branding), rendered above the toggle. */
+    footer?: ReactNode;
+    /** Scrolling content slot — the nav items. */
+    children: ReactNode;
+    /** Toggle label shown when expanded. Default "Less". */
+    collapseLabel?: string;
+} & Pick<ComponentPropsWithoutRef<'nav'>, 'className' | 'id' | 'aria-label'>;
+export declare function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel, ...rest }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NeoSideNav {
+    var displayName: string;
 }
-/**
- * NeoSideNav - TODO: Add component description
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4065-3425
- *
- * Figma Props Mapping:
- * - TODO: Document Figma property mappings
- * - FigmaProp → reactProp
- *
- * Design Tokens Used:
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
- */
-export declare const NeoSideNav: {
-    ({ children, ...props }: NeoSideNavProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

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/Tabs/Tabs.d.ts

@@ -10,7 +10,7 @@ import type { ReactNode } from 'react';
  * - 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>, "style" | "children" | "sx" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "classes" | "action" | "value" | "variant" | "orientation" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const NeoTabs: import("@emotion/styled").StyledComponent<import("@mui/material").TabsOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "children" | "sx" | "className" | "aria-label" | "aria-labelledby" | "onChange" | "classes" | "action" | "value" | "variant" | "orientation" | "slots" | "slotProps" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface NeoTabProps extends Omit<TabProps, 'label'> {
     /**
      * The label for the tab

package/dist/Tag/Tag.d.ts

@@ -13,7 +13,7 @@ declare module '@mui/material/Chip' {
         filled: true;
     }
 }
-type NeoTagOwnProps = {
+export type NeoTagOwnProps = {
     /**
      * The size of the tag
      * @figma Size (Small|Medium|Large)
@@ -51,4 +51,3 @@ export declare function NeoTag<C extends ElementType = typeof Chip>({ size, vari
 export declare namespace NeoTag {
     var displayName: string;
 }
-export {};

package/dist/ToggleButton/ToggleButton.d.ts

@@ -1,26 +1,21 @@
-import type { ReactNode } from 'react';
-/**
- * Props for the NeoToggleButton component
- */
-export interface NeoToggleButtonProps {
+import { type ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
+type ToggleButtonSize = 'small' | 'medium';
+export interface NeoToggleButtonProps extends Omit<MuiToggleButtonProps, 'color' | 'size'> {
     /**
-     * The content to display inside the component
+     * Size of the toggle button. Set automatically by NeoToggleButtonGroup
+     * when used as a child; set explicitly only for standalone use.
+     * @default 'medium'
      */
-    children?: ReactNode;
+    size?: ToggleButtonSize;
 }
 /**
- * NeoToggleButton - TODO: Add component description
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4163-5777
- *
- * Figma Props Mapping:
- * - TODO: Document Figma property mappings
- * - FigmaProp → reactProp
- *
- * Design Tokens Used:
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
+ * 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: {
-    ({ children, ...props }: NeoToggleButtonProps): import("react/jsx-runtime").JSX.Element;
+    ({ 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 {};

package/dist/ToggleButtonWithText/ToggleButtonWithText.d.ts

@@ -1,26 +1,6 @@
-import type { ReactNode } from 'react';
 /**
- * Props for the NeoToggleButtonWithText component
- */
-export interface NeoToggleButtonWithTextProps {
-    /**
-     * The content to display inside the component
-     */
-    children?: ReactNode;
-}
-/**
- * NeoToggleButtonWithText - TODO: Add component description
+ * NeoToggleButtonWithText
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-10485
- *
- * Figma Props Mapping:
- * - TODO: Document Figma property mappings
- * - FigmaProp → reactProp
- *
- * Design Tokens Used:
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
  */
-export declare const NeoToggleButtonWithText: {
-    ({ children, ...props }: NeoToggleButtonWithTextProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const NeoToggleButtonWithText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/Tooltip/Tooltip.d.ts

@@ -1,4 +1,5 @@
 import { type TooltipProps } from '@mui/material/Tooltip';
+import type { ReactNode } from 'react';
 /**
  * Variant type for NeoTooltip
  */
@@ -14,13 +15,15 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
      */
     variant?: TooltipVariant;
     /**
-     * The main tooltip text
+     * The main tooltip content. Accepts a string or any ReactNode, so callers can
+     * compose richer content when the `description` variant isn't enough.
      * @figma text (literal content, not a variant property)
      */
-    title: string;
+    title: ReactNode;
     /**
-     * Optional supporting description text
-     * When provided, shows a larger tooltip with title (semibold) + description (medium)
+     * Optional supporting description text. When provided, shows a larger tooltip
+     * with a heading + body hierarchy: title (13px semibold) above a muted
+     * description (12px medium).
      * @default undefined
      * @figma Supporting text
      */
@@ -45,7 +48,7 @@ export interface NeoTooltipProps extends Omit<TooltipProps, 'title' | 'variant'>
  * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
  * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
  * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontWeight.medium (500), fontWeight.semiBold (600)
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
  */
 export declare const NeoTooltip: {
     ({ variant, title, description, children, arrow, placement, ...props }: NeoTooltipProps): import("react/jsx-runtime").JSX.Element;

package/dist/TopNav/TopNav.d.ts

@@ -1,26 +1,6 @@
-import type { ReactNode } from 'react';
 /**
- * Props for the NeoTopNav component
- */
-export interface NeoTopNavProps {
-    /**
-     * The content to display inside the component
-     */
-    children?: ReactNode;
-}
-/**
- * NeoTopNav - TODO: Add component description
+ * NeoTopNav
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4618-185228
- *
- * Figma Props Mapping:
- * - TODO: Document Figma property mappings
- * - FigmaProp → reactProp
- *
- * Design Tokens Used:
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
  */
-export declare const NeoTopNav: {
-    ({ children, ...props }: NeoTopNavProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const NeoTopNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/TourModal/TourModal.d.ts

@@ -1,26 +1,6 @@
-import type { ReactNode } from 'react';
 /**
- * Props for the NeoTourModal component
- */
-export interface NeoTourModalProps {
-    /**
-     * The content to display inside the component
-     */
-    children?: ReactNode;
-}
-/**
- * NeoTourModal - TODO: Add component description
+ * NeoTourModal
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12408-1800
- *
- * Figma Props Mapping:
- * - TODO: Document Figma property mappings
- * - FigmaProp → reactProp
- *
- * Design Tokens Used:
- * - TODO: List design tokens used (e.g., semanticColors.text.primary, typography.body.medium)
  */
-export declare const NeoTourModal: {
-    ({ children, ...props }: NeoTourModalProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const NeoTourModal: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/TypologyControl/TypologyControl.d.ts

@@ -1,5 +1,5 @@
 import { type ToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
-declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material/ToggleButton").ToggleButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+declare const StyledToggleButton: import("@emotion/styled").StyledComponent<import("@mui/material").ToggleButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style" | "color" | "size" | "children" | "sx" | "className" | "tabIndex" | "onChange" | "onClick" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "value" | "fullWidth" | "selected"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface NeoTypologyControlProps extends Omit<ToggleButtonGroupProps, 'orientation'> {
 }
 /**

package/dist/VibratingDot/VibratingDot.d.ts

@@ -0,0 +1,12 @@
+import { type BoxProps } from '@mui/material';
+import type { FunctionComponent } from 'react';
+export interface NeoVibratingDotProps extends BoxProps {
+}
+/**
+ * NeoVibratingDot - Animated status dot with a breathing pulse halo.
+ *
+ * Indicates a waiting/pending state (QUEUED / CREATED). Color is inherited from
+ * `currentColor`; set it via the `color`/`sx` prop or a parent. Sized to the
+ * lowercase-letter height regardless of parent fontSize.
+ */
+export declare const NeoVibratingDot: FunctionComponent<NeoVibratingDotProps>;