@moderneinc/neo-styled-components 0.0.0-development → 1.6.1-next.1d7c75

package/dist/index.d.ts

@@ -1,10 +1,453 @@
+/// <reference path="./types.d.ts" />
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ChipProps } from '@mui/material/Chip';
+import { ButtonBaseProps } from '@mui/material/ButtonBase';
+import * as React$1 from 'react';
+import { ReactNode } from 'react';
+import { IconButtonProps } from '@mui/material/IconButton';
+import { InputBaseProps } from '@mui/material/InputBase';
+import * as _mui_system from '@mui/system';
+import * as _mui_material_styles from '@mui/material/styles';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
+import * as _mui_material_Tabs from '@mui/material/Tabs';
+import { TabProps } from '@mui/material/Tab';
+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_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_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_runtime.JSX.Element;
+    displayName: string;
+};
+
+type InputFieldSize = 'small' | 'medium';
+interface NeoInputFieldProps extends Omit<InputBaseProps, 'size'> {
+    /**
+     * The size of the input field
+     * @default "medium"
+     *
+     * @figma Size
+     */
+    size?: InputFieldSize;
+    /**
+     * Show error/destructive state with red styling
+     * @default false
+     *
+     * @figma Destructive
+     */
+    destructive?: boolean;
+    /**
+     * Label text for the input
+     *
+     * @figma Label
+     */
+    label?: string;
+    /**
+     * Show required indicator (asterisk)
+     * @default false
+     *
+     * @figma Required indicator
+     */
+    required?: boolean;
+    /**
+     * Info icon to display next to the label
+     *
+     * @figma Info icon
+     */
+    infoIcon?: ReactNode;
+    /**
+     * Helper text displayed below the input (normal state)
+     *
+     * @figma Helper text
+     */
+    helperText?: string;
+    /**
+     * Error message displayed below the input (destructive state)
+     * Takes precedence over helperText when destructive is true
+     *
+     * @figma Error message
+     */
+    errorMessage?: string;
+    /**
+     * Icon to display at the start of the input
+     *
+     * @figma Left icon
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon to display at the end of the input
+     * In destructive state, an error icon is automatically shown
+     *
+     * @figma Right icon
+     */
+    endIcon?: ReactNode;
+}
+/**
+ * NeoInputField - Form input field component using MUI FormControl composition
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-23373
+ *
+ * Figma Props Mapping:
+ * - Size (small|medium) → size prop
+ * - Destructive (false|true) → destructive prop
+ * - State=Placeholder → empty value with placeholder text
+ * - State=Hover → CSS :hover
+ * - State=Filled → value prop with text
+ * - State=Focused → CSS :focus
+ * - State=Disabled → disabled prop
+ * - Label → label prop
+ * - Required indicator (*) → required prop
+ * - Info icon → infoIcon prop
+ * - Helper text → helperText prop
+ * - Error message → errorMessage prop (shown when destructive=true)
+ * - Left icon → startIcon prop
+ * - Right icon → endIcon prop (auto error icon when destructive=true)
+ */
+declare const NeoInputField: {
+    ({ size, destructive, label, required, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }: NeoInputFieldProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface ComponentSelector {
+    __emotion_styles: any;
+}
+
+/**
+ * @desc Utility type for getting props type of React component.
+ * It takes `defaultProps` into an account - making props with defaults optional.
+ */
+type PropsOf<C extends keyof ReactJSX.IntrinsicElements | React.JSXElementConstructor<any>> = ReactJSX.LibraryManagedAttributes<C, React.ComponentProps<C>>;
+
+type IsPreReact19$1 = 2 extends Parameters<React.FunctionComponent<any>>['length'] ? true : false;
+/** @ts-ignore */
+type ReactJSXElement = true extends IsPreReact19$1 ? JSX.Element : React.JSX.Element;
+/** @ts-ignore */
+type ReactJSXElementClass = true extends IsPreReact19$1 ? JSX.ElementClass : React.JSX.ElementClass;
+/** @ts-ignore */
+type ReactJSXElementAttributesProperty = true extends IsPreReact19$1 ? JSX.ElementAttributesProperty : React.JSX.ElementAttributesProperty;
+/** @ts-ignore */
+type ReactJSXElementChildrenAttribute = true extends IsPreReact19$1 ? JSX.ElementChildrenAttribute : React.JSX.ElementChildrenAttribute;
+/** @ts-ignore */
+type ReactJSXLibraryManagedAttributes<C, P> = true extends IsPreReact19$1 ? JSX.LibraryManagedAttributes<C, P> : React.JSX.LibraryManagedAttributes<C, P>;
+/** @ts-ignore */
+type ReactJSXIntrinsicAttributes = true extends IsPreReact19$1 ? JSX.IntrinsicAttributes : React.JSX.IntrinsicAttributes;
+/** @ts-ignore */
+type ReactJSXIntrinsicClassAttributes<T> = true extends IsPreReact19$1 ? JSX.IntrinsicClassAttributes<T> : React.JSX.IntrinsicClassAttributes<T>;
+/** @ts-ignore */
+type ReactJSXIntrinsicElements$1 = true extends IsPreReact19$1 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements;
+/** @ts-ignore */
+type ReactJSXElementType = true extends IsPreReact19$1 ? string | React.JSXElementConstructor<any> : React.JSX.ElementType;
+declare namespace ReactJSX {
+    type ElementType = ReactJSXElementType;
+    interface Element extends ReactJSXElement {
+    }
+    interface ElementClass extends ReactJSXElementClass {
+    }
+    interface ElementAttributesProperty extends ReactJSXElementAttributesProperty {
+    }
+    interface ElementChildrenAttribute extends ReactJSXElementChildrenAttribute {
+    }
+    type LibraryManagedAttributes<C, P> = ReactJSXLibraryManagedAttributes<C, P>;
+    interface IntrinsicAttributes extends ReactJSXIntrinsicAttributes {
+    }
+    interface IntrinsicClassAttributes<T> extends ReactJSXIntrinsicClassAttributes<T> {
+    }
+    type IntrinsicElements = ReactJSXIntrinsicElements$1;
+}
+
+type IsPreReact19 = 2 extends Parameters<React.FunctionComponent<any>>['length'] ? true : false;
+/** @ts-ignore */
+type ReactJSXIntrinsicElements = true extends IsPreReact19 ? JSX.IntrinsicElements : React.JSX.IntrinsicElements;
+
+/**
+ * @typeparam ComponentProps  Props which will be included when withComponent is called
+ * @typeparam SpecificComponentProps  Props which will *not* be included when withComponent is called
+ */
+interface StyledComponent<ComponentProps extends {}, SpecificComponentProps extends {} = {}, JSXProps extends {} = {}> extends React.FC<ComponentProps & SpecificComponentProps & JSXProps>, ComponentSelector {
+    withComponent<C extends React.ComponentClass<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    withComponent<C extends React.ComponentType<React.ComponentProps<C>>>(component: C): StyledComponent<ComponentProps & PropsOf<C>>;
+    withComponent<Tag extends keyof ReactJSXIntrinsicElements>(tag: Tag): StyledComponent<ComponentProps, ReactJSXIntrinsicElements[Tag]>;
+}
+
+/**
+ * NeoTabs - Tabs container component based on MUI Tabs
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
+ *
+ * Figma Props Mapping:
+ * - Horizontal tab bar → default layout
+ * - Tab selection → value prop + onChange
+ * - Active indicator → styled via indicator slot
+ */
+declare const NeoTabs: StyledComponent<_mui_material_Tabs.TabsOwnProps & _mui_material_OverridableComponent.CommonProps & Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "className" | "style" | "classes" | "children" | "sx" | "variant" | "slots" | "slotProps" | "aria-label" | "aria-labelledby" | "onChange" | "action" | "value" | "orientation" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "selectionFollowsFocus" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & _mui_system.MUIStyledCommonProps<_mui_material_styles.Theme>, {}, {}>;
+interface NeoTabProps extends Omit<TabProps, 'label'> {
+    /**
+     * The label for the tab
+     *
+     * @figma Text layer in tab
+     */
+    label: ReactNode;
+    /**
+     * Optional count to display in a tag next to the label
+     * @default undefined
+     *
+     * @figma Tag with number (999)
+     */
+    count?: number | string;
+    /**
+     * Tab value identifier
+     *
+     * @figma Used for Current=True/False state
+     */
+    value: string | number;
+}
+/**
+ * NeoTab - Individual tab button component based on MUI Tab
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
+ *
+ * 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)
+ * - Text label → label prop
+ */
+declare const NeoTab: {
+    ({ label, count, ...props }: NeoTabProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare module '@mui/material/Chip' {
+    interface ChipPropsColorOverrides {
+        violet: true;
+    }
+    interface ChipPropsSizeOverrides {
+        large: true;
+    }
+    interface ChipPropsVariantOverrides {
+        outlined: true;
+        filled: true;
+    }
+}
+interface NeoTagProps extends Omit<ChipProps, 'variant' | 'size'> {
+    /**
+     * The size of the tag
+     * @figma m (sm|md|lg)
+     * @default "small"
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant style of the tag
+     * @figma type (light|dark)
+     * @default "outlined"
+     */
+    variant?: 'outlined' | 'filled';
+    /**
+     * The color/state of the tag
+     * @figma state (Neutral|Error|Warning|Success|Info|Violet)
+     * @default "default"
+     */
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info' | 'violet';
+}
+/**
+ * NeoTag - Small pill-shaped label component based on MUI Chip
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
+ *
+ * Figma Props Mapping:
+ * - m (sm|md|lg) → size (small|medium|large)
+ * - type (light|dark) → variant (outlined|filled)
+ * - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
+ * - Label text → label prop
+ */
+declare const NeoTag: {
+    ({ size, variant, ...props }: NeoTagProps): react_jsx_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_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_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, NeoInputField, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, version };
+export type { NeoBadgeProps, NeoButtonProps, NeoIconButtonProps, NeoInputFieldProps, NeoTabProps, NeoTagProps, NeoToastProps };