@moderneinc/neo-styled-components 0.0.0-development → 1.6.1-next.69cecf

package/dist/Badge.d.ts

@@ -0,0 +1,23 @@
+import { type ChipProps } from '@mui/material/Chip';
+export interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
+    /**
+     * The color/state of the badge
+     * @default "default"
+     */
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info';
+}
+/**
+ * NeoBadge - Status badge component based on MUI Chip
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
+ *
+ * Figma Props Mapping:
+ * - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
+ * - iconLeading → icon prop (pass React element)
+ * - iconTrailing → deleteIcon prop (pass React element)
+ * - Label → label prop
+ */
+export declare const NeoBadge: {
+    (props: NeoBadgeProps): import("react/jsx-dev-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Button.d.ts

@@ -0,0 +1,59 @@
+import { type ButtonBaseProps } from '@mui/material/ButtonBase';
+import type { ReactNode } from 'react';
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        destructive: true;
+        link: true;
+        linkColor: true;
+    }
+}
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonSize = 'small' | 'medium';
+export interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * The visual variant of the button
+     * @default "primary"
+     *
+     * @figma Hierarchy
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: ButtonSize;
+    /**
+     * Show loading spinner instead of children
+     * @default false
+     *
+     * @figma State=Loading
+     */
+    loading?: boolean;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoButton - Text button component based on MUI ButtonBase
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
+ *
+ * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Size (Small|Medium) → size prop
+ * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
+ * - State=Hover → CSS :hover
+ * - State=Pressed → CSS :active
+ * - State=Focused → CSS :focus-visible
+ */
+export declare const NeoButton: {
+    ({ variant, size, loading, children, disabled, ...props }: NeoButtonProps): import("react/jsx-dev-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/IconButton.d.ts

@@ -0,0 +1,31 @@
+import { type IconButtonProps } from '@mui/material/IconButton';
+type IconButtonSize = 'small' | 'medium';
+export interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
+    /**
+     * The size of the icon button
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: IconButtonSize;
+}
+/**
+ * NeoIconButton - Icon-only button component based on MUI IconButton
+ *
+ * Simple, neutral icon button with transparent background and icon color states.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
+ *
+ * Figma Props Mapping:
+ * - Hierarchy=Icon → Single default style (no variant prop)
+ * - Size (Small|Medium) → size prop
+ * - State=Disabled → disabled prop
+ * - State=Hover → CSS :hover
+ * - State=Pressed → CSS :active
+ * - State=Focused → CSS :focus-visible
+ */
+export declare const NeoIconButton: {
+    ({ size, ...props }: NeoIconButtonProps): import("react/jsx-dev-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Toast.d.ts

@@ -0,0 +1,68 @@
+import { type AlertProps } from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import type { ReactNode } from 'react';
+export interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The visual style variant of the toast
+     * @default "default"
+     */
+    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info' | 'download';
+    /**
+     * The title/header text
+     */
+    title?: string;
+    /**
+     * The body/supporting text
+     */
+    message?: string;
+    /**
+     * Whether to show the close button
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Custom action buttons (for default toast types)
+     * Pass action buttons as children of this prop
+     */
+    actions?: ReactNode;
+    /**
+     * Progress value (0-100) for download variant
+     */
+    progress?: number;
+    /**
+     * File name for download variant
+     */
+    fileName?: string;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+}
+/**
+ * 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|Download) → variant (default|dark|brand|error|success|info|download)
+ * - header → title (string)
+ * - supportingText → message (string)
+ * - xCloseButton → showClose (boolean)
+ * - actions → actions (ReactNode)
+ * - Progress bar → progress (number 0-100)
+ */
+export declare const NeoToast: {
+    ({ variant, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): import("react/jsx-dev-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Helper component for creating toast action buttons with proper styling
+ */
+export declare const NeoToastButton: {
+    ({ primary, variant, children, ...props }: {
+        primary?: boolean;
+        variant?: NeoToastProps["variant"];
+        children: ReactNode;
+    } & Omit<React.ComponentProps<typeof Button>, "variant">): import("react/jsx-dev-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/index.d.ts

@@ -1,10 +1,197 @@
+/// <reference path="./types.d.ts" />
+import * as react_jsx_dev_runtime from 'react/jsx-dev-runtime';
+import { ChipProps } from '@mui/material/Chip';
+import { ButtonBaseProps } from '@mui/material/ButtonBase';
+import { ReactNode } from 'react';
+import { IconButtonProps } from '@mui/material/IconButton';
+import { AlertProps } from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+
+interface NeoBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
+    /**
+     * The color/state of the badge
+     * @default "default"
+     */
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info';
+}
+/**
+ * NeoBadge - Status badge component based on MUI Chip
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system-w--correct-set-of-tokens?node-id=4091-17230
+ *
+ * Figma Props Mapping:
+ * - state (Neutral|Error|Warning|Success|Info) → color (default|error|warning|success|info)
+ * - iconLeading → icon prop (pass React element)
+ * - iconTrailing → deleteIcon prop (pass React element)
+ * - Label → label prop
+ */
+declare const NeoBadge: {
+    (props: NeoBadgeProps): react_jsx_dev_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        destructive: true;
+        link: true;
+        linkColor: true;
+    }
+}
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'link' | 'linkColor';
+type ButtonSize = 'small' | 'medium';
+interface NeoButtonProps extends Omit<ButtonBaseProps, 'children'> {
+    /**
+     * The visual variant of the button
+     * @default "primary"
+     *
+     * @figma Hierarchy
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: ButtonSize;
+    /**
+     * Show loading spinner instead of children
+     * @default false
+     *
+     * @figma State=Loading
+     */
+    loading?: boolean;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+}
+/**
+ * NeoButton - Text button component based on MUI ButtonBase
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
+ *
+ * Figma Props Mapping:
+ * - Hierarchy (Primary|Secondary|Destructive|Link|Link Color) → variant prop
+ * - Size (Small|Medium) → size prop
+ * - State=Disabled → disabled prop
+ * - State=Loading → loading prop
+ * - State=Hover → CSS :hover
+ * - State=Pressed → CSS :active
+ * - State=Focused → CSS :focus-visible
+ */
+declare const NeoButton: {
+    ({ variant, size, loading, children, disabled, ...props }: NeoButtonProps): react_jsx_dev_runtime.JSX.Element;
+    displayName: string;
+};
+
+type IconButtonSize = 'small' | 'medium';
+interface NeoIconButtonProps extends Omit<IconButtonProps, 'color' | 'size'> {
+    /**
+     * The size of the icon button
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: IconButtonSize;
+}
+/**
+ * NeoIconButton - Icon-only button component based on MUI IconButton
+ *
+ * Simple, neutral icon button with transparent background and icon color states.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4086-7590
+ *
+ * Figma Props Mapping:
+ * - Hierarchy=Icon → Single default style (no variant prop)
+ * - Size (Small|Medium) → size prop
+ * - State=Disabled → disabled prop
+ * - State=Hover → CSS :hover
+ * - State=Pressed → CSS :active
+ * - State=Focused → CSS :focus-visible
+ */
+declare const NeoIconButton: {
+    ({ size, ...props }: NeoIconButtonProps): react_jsx_dev_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface NeoToastProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The visual style variant of the toast
+     * @default "default"
+     */
+    variant?: 'default' | 'dark' | 'brand' | 'error' | 'success' | 'info' | 'download';
+    /**
+     * The title/header text
+     */
+    title?: string;
+    /**
+     * The body/supporting text
+     */
+    message?: string;
+    /**
+     * Whether to show the close button
+     * @default true
+     */
+    showClose?: boolean;
+    /**
+     * Custom action buttons (for default toast types)
+     * Pass action buttons as children of this prop
+     */
+    actions?: ReactNode;
+    /**
+     * Progress value (0-100) for download variant
+     */
+    progress?: number;
+    /**
+     * File name for download variant
+     */
+    fileName?: string;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+}
+/**
+ * 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|Download) → variant (default|dark|brand|error|success|info|download)
+ * - header → title (string)
+ * - supportingText → message (string)
+ * - xCloseButton → showClose (boolean)
+ * - actions → actions (ReactNode)
+ * - Progress bar → progress (number 0-100)
+ */
+declare const NeoToast: {
+    ({ variant, title, message, showClose, actions, progress, fileName, onClose, ...props }: NeoToastProps): react_jsx_dev_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Helper component for creating toast action buttons with proper styling
+ */
+declare const NeoToastButton: {
+    ({ primary, variant, children, ...props }: {
+        primary?: boolean;
+        variant?: NeoToastProps["variant"];
+        children: ReactNode;
+    } & Omit<React.ComponentProps<typeof Button>, "variant">): react_jsx_dev_runtime.JSX.Element;
+    displayName: string;
+};
+
 /**
  * @moderneinc/neo-styled-components
  *
- * Styled MUI components using Moderne design tokens
+ * TypeScript declarations for Moderne styled components
  */
 
-// Placeholder - components will be added here
-declare const version = '0.0.0-development'
+// Include MUI type augmentations
+
+declare const version: string
 
-export { version };
+export { NeoBadge, NeoButton, NeoIconButton, NeoToast, NeoToastButton, version };
+export type { NeoBadgeProps, NeoButtonProps, NeoIconButtonProps, NeoToastProps };