@moderneinc/neo-styled-components 2.6.0 → 2.7.0-next.4bcf59

package/dist/utils/avatarColors.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
+ * Maps color index (1-7) to background color token pairs.
+ */
+export declare const avatarColorPalette: Record<number, {
+    bg: string;
+}>;

package/dist/utils/focusRing.d.ts

@@ -1,10 +1,10 @@
 /**
- * Outline-based focus ring styles derived from Neo shadow tokens.
+ * Outline-based focus ring styles derived from Neo border tokens.
  * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
  *
- * Produces a double-ring effect: a white inner gap (via outline-offset) and a blue outer ring.
+ * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 export declare const focusRingStyles: {
-    readonly outline: `${number}px solid rgba(47, 66, 255, 1)`;
+    readonly outline: "2px solid #3bcca6";
     readonly outlineOffset: "2px";
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moderneinc/neo-styled-components",
-  "version": "2.6.0",
+  "version": "2.7.0-next.4bcf59",
   "type": "module",
   "description": "Styled MUI components for Moderne applications",
   "main": "dist/index.js",
@@ -86,12 +86,12 @@
     "@semantic-release/github": "12.0.2",
     "@semantic-release/npm": "13.1.3",
     "@semantic-release/release-notes-generator": "14.1.0",
-    "@types/node": "25.3.0",
+    "@types/node": "25.5.0",
     "@types/react": "^19.2.7",
     "conventional-changelog-conventionalcommits": "9.3.0",
     "mustache": "4.2.0",
     "rollup": "4.59.0",
-    "rollup-plugin-dts": "6.3.0",
+    "rollup-plugin-dts": "6.4.0",
     "semantic-release": "25.0.2",
     "tslib": "2.8.1",
     "typescript": "5.9.2"

package/dist/ButtonGroup/ButtonGroup.d.ts

@@ -1,41 +0,0 @@
-import { type ButtonGroupProps as MuiButtonGroupProps } from '@mui/material/ButtonGroup';
-type ButtonGroupSize = 'small' | 'medium';
-export interface NeoButtonGroupProps extends Omit<MuiButtonGroupProps, 'size' | 'variant'> {
-    /**
-     * The size of the button group
-     * @default "medium"
-     *
-     * @figma Size=Sm → small, Size=Md → medium
-     */
-    size?: ButtonGroupSize;
-    /**
-     * The visual variant of the buttons
-     * ButtonGroup uses a fixed outlined style from the design
-     */
-    variant?: 'outlined';
-}
-/**
- * NeoButtonGroup - Button group component based on MUI ButtonGroup
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
- *
- * Figma Props Mapping:
- * - Size (Sm|Md) → size prop (small|medium)
- * - Active button state → Controlled externally via button props or classes
- *
- * Usage:
- * ```tsx
- * <NeoButtonGroup size="medium">
- *   <NeoButton>Button 1</NeoButton>
- *   <NeoButton>Button 2</NeoButton>
- *   <NeoButton>Button 3</NeoButton>
- * </NeoButtonGroup>
- * ```
- *
- * Note: To show active state, add 'active' class to the selected button
- */
-export declare const NeoButtonGroup: {
-    ({ size, variant, ...props }: NeoButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export {};

package/dist/Menu/Menu.d.ts

@@ -1,45 +0,0 @@
-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 https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4305-41844 (Dropdown list pattern)
- *
- * 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);
- *
- * // Standard menu with icons and shortcuts
- * <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>
- *
- * // Dropdown list with secondary text (user list pattern)
- * <NeoMenu open={open} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}>
- *   <NeoMenuItem secondaryText="@phoenix">Phoenix Baker</NeoMenuItem>
- *   <NeoMenuItem secondaryText="@olivia" selected>Olivia Rhye</NeoMenuItem>
- * </NeoMenu>
- * ```
- */
-export declare const NeoMenu: {
-    ({ children, ...props }: NeoMenuProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/MenuItem/MenuItem.d.ts

@@ -1,61 +0,0 @@
-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
-     * Note: Cannot be directly mapped from Figma (ReactNode)
-     */
-    icon?: ReactNode;
-    /**
-     * Optional keyboard shortcut to display on the right side
-     * @example "⌘+P" or "Ctrl+K"
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
-     */
-    shortcut?: string;
-    /**
-     * Optional secondary text to display next to the primary label
-     * @example "@username" or supporting text
-     * Note: Cannot be directly mapped from Figma (ReactNode/string)
-     */
-    secondaryText?: string;
-    /**
-     * Menu item content (text label)
-     * @figma children mapped from Figma layer content
-     */
-    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:
- * - Figma "Dropdown - Menu" component uses Type (Avatar|Button|Icon) and Open (True|False)
- *   to control the menu trigger. NeoMenuItem is the individual item inside the menu.
- * - Text label → children prop (mapped via figma.children)
- * - selected → selected prop (React-controlled)
- * - disabled → disabled prop (React-controlled)
- * - Hover state → CSS :hover (not mapped)
- * - Icon slot → icon prop (not mappable - ReactNode)
- * - Secondary text → secondaryText prop (not mappable - ReactNode/string)
- * - Keyboard shortcut → shortcut prop (not mappable - ReactNode/string)
- *
- * @example
- * ```tsx
- * // With icon and shortcut
- * <NeoMenuItem icon={<UserIcon />} shortcut="⌘+P">
- *   View profile
- * </NeoMenuItem>
- *
- * // With secondary text (user list pattern from Figma node 4305:41844)
- * <NeoMenuItem secondaryText="@phoenix">Phoenix Baker</NeoMenuItem>
- * <NeoMenuItem secondaryText="@olivia">Olivia Rhye</NeoMenuItem>
- *
- * // Disabled state
- * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
- * ```
- */
-export declare const NeoMenuItem: {
-    ({ icon, shortcut, secondaryText, children, ...props }: NeoMenuItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/dist/Select/Select.d.ts

@@ -1,24 +0,0 @@
-import { type SelectProps as MuiSelectProps } from '@mui/material/Select';
-import { NeoMenuItem } from '../MenuItem/MenuItem';
-export type NeoSelectProps = MuiSelectProps;
-/**
- * NeoSelect - Select dropdown 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 };