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

package/dist/index.esm.js

@@ -1,11 +1,1094 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { semanticColors, spacing, borderRadius, typography, colors } from '@moderneinc/neo-design';
+import Chip, { chipClasses } from '@mui/material/Chip';
+import { styled } from '@mui/material/styles';
+import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
+import CircularProgress from '@mui/material/CircularProgress';
+import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
+import FormControl from '@mui/material/FormControl';
+import FormHelperText, { formHelperTextClasses } from '@mui/material/FormHelperText';
+import InputAdornment from '@mui/material/InputAdornment';
+import InputBase, { inputBaseClasses } from '@mui/material/InputBase';
+import InputLabel, { inputLabelClasses } from '@mui/material/InputLabel';
+import { forwardRef, createElement } from 'react';
+import MuiTab, { tabClasses } from '@mui/material/Tab';
+import MuiTabs, { tabsClasses } from '@mui/material/Tabs';
+import Alert, { alertClasses } from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+import Stack from '@mui/material/Stack';
+
+const StyledChip$1 = styled(Chip)(({ theme }) => ({
+    height: 24,
+    padding: `${spacing.spacing_1_4}px ${spacing.spacing_1}px`,
+    borderRadius: borderRadius.full,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    lineHeight: 1,
+    gap: spacing.spacing_1_2,
+    overflow: 'visible',
+    [`& .${chipClasses.label}`]: {
+        padding: 0,
+        overflow: 'visible',
+    },
+    [`& .${chipClasses.icon}`]: {
+        margin: 0,
+        width: 12,
+        height: 12,
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
+        margin: 0,
+        width: 12,
+        height: 12,
+    },
+    // Default (Neutral) state
+    [`&.${chipClasses.colorDefault}`]: {
+        backgroundColor: semanticColors.status.neutral.light,
+        color: semanticColors.status.neutral.dark,
+        border: `1px solid ${semanticColors.status.neutral.medium}80`,
+        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+            color: semanticColors.status.neutral.dark,
+        },
+    },
+    // Error state
+    [`&.${chipClasses.colorError}`]: {
+        backgroundColor: semanticColors.status.error.light,
+        color: semanticColors.status.error.dark,
+        border: `1px solid ${semanticColors.status.error.medium}80`,
+        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+            color: semanticColors.status.error.dark,
+        },
+    },
+    // Warning state
+    [`&.${chipClasses.colorWarning}`]: {
+        backgroundColor: semanticColors.status.warning.light,
+        color: semanticColors.status.warning.dark,
+        border: `1px solid ${semanticColors.status.warning.medium}80`,
+        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+            color: semanticColors.status.warning.dark,
+        },
+    },
+    // Success state
+    [`&.${chipClasses.colorSuccess}`]: {
+        backgroundColor: semanticColors.status.success.light,
+        color: semanticColors.status.success.dark,
+        border: `1px solid ${semanticColors.status.success.medium}80`,
+        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+            color: semanticColors.status.success.dark,
+        },
+    },
+    // Info state
+    [`&.${chipClasses.colorInfo}`]: {
+        backgroundColor: semanticColors.status.info.light,
+        color: semanticColors.status.info.dark,
+        border: `1px solid ${semanticColors.status.info.medium}80`,
+        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+            color: semanticColors.status.info.dark,
+        },
+    },
+}));
+/**
+ * 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
+ */
+const NeoBadge = (props) => {
+    return jsx(StyledChip$1, { ...props });
+};
+NeoBadge.displayName = 'NeoBadge';
+
+const StyledButtonBase = styled(ButtonBase, {
+    shouldForwardProp: prop => prop !== 'variant' && prop !== 'size' && prop !== 'loading',
+})(({ theme, variant = 'primary', size = 'medium', loading = false }) => {
+    // Size configurations using theme.spacing()
+    const sizeConfig = {
+        small: {
+            height: 32,
+            padding: `0 ${theme.spacing(2)}`,
+            fontSize: theme.typography.pxToRem(14),
+        },
+        medium: {
+            height: 40,
+            padding: `0 ${theme.spacing(3)}`,
+            fontSize: theme.typography.pxToRem(16),
+        },
+    };
+    const sizeStyles = sizeConfig[size];
+    // Base styles shared by all variants
+    const baseStyles = {
+        height: sizeStyles.height,
+        padding: sizeStyles.padding,
+        fontSize: sizeStyles.fontSize,
+        fontWeight: 500,
+        lineHeight: 1.5,
+        borderRadius: borderRadius.button,
+        textTransform: 'none',
+        transition: theme.transitions.create(['background-color', 'border-color', 'color'], {
+            duration: theme.transitions.duration.short,
+        }),
+        position: 'relative',
+        minWidth: 'fit-content',
+        gap: theme.spacing(1),
+        // Disabled state (always show cursor)
+        [`&.${buttonBaseClasses.disabled}`]: {
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
+        },
+        // Focus visible for keyboard navigation
+        [`&.${buttonBaseClasses.focusVisible}`]: {
+            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outlineOffset: 2,
+        },
+    };
+    // Variant-specific styles
+    const variantStyles = {
+        primary: {
+            backgroundColor: semanticColors.buttons.primary.default,
+            color: theme.palette.common.white,
+            border: 'none',
+            '&:hover': {
+                backgroundColor: semanticColors.buttons.primary.hover,
+            },
+            '&:active': {
+                backgroundColor: semanticColors.buttons.primary.pressed,
+            },
+            ...(loading
+                ? {}
+                : {
+                    [`&.${buttonBaseClasses.disabled}`]: {
+                        backgroundColor: semanticColors.buttons.primary.disabled,
+                        color: semanticColors.typography.button.disabled,
+                    },
+                }),
+        },
+        secondary: {
+            backgroundColor: semanticColors.buttons.secondary.defaultBackground,
+            color: semanticColors.buttons.primary.default,
+            border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
+            '&:hover': {
+                backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+            },
+            '&:active': {
+                backgroundColor: semanticColors.buttons.secondary.pressedBackground,
+            },
+            ...(loading
+                ? {}
+                : {
+                    [`&.${buttonBaseClasses.disabled}`]: {
+                        backgroundColor: semanticColors.buttons.secondary.disabledBackground,
+                        borderColor: semanticColors.buttons.secondary.disabledBorder,
+                        color: semanticColors.typography.button.disabled,
+                    },
+                }),
+        },
+        destructive: {
+            backgroundColor: semanticColors.buttons.destructive,
+            color: theme.palette.common.white,
+            border: 'none',
+            '&:hover': {
+                backgroundColor: semanticColors.status.error.dark,
+            },
+            '&:active': {
+                backgroundColor: semanticColors.status.error.dark,
+                filter: 'brightness(0.9)',
+            },
+            ...(loading
+                ? {}
+                : {
+                    [`&.${buttonBaseClasses.disabled}`]: {
+                        backgroundColor: semanticColors.buttons.primary.disabled,
+                        color: semanticColors.typography.button.disabled,
+                    },
+                }),
+        },
+        link: {
+            backgroundColor: 'transparent',
+            color: semanticColors.buttons.tertiary.default,
+            border: 'none',
+            padding: `0 ${theme.spacing(1)}`,
+            '&:hover': {
+                backgroundColor: 'transparent',
+                color: semanticColors.buttons.tertiary.hover,
+            },
+            '&:active': {
+                color: semanticColors.buttons.tertiary.pressed,
+            },
+            ...(loading
+                ? {}
+                : {
+                    [`&.${buttonBaseClasses.disabled}`]: {
+                        backgroundColor: 'transparent',
+                        color: semanticColors.buttons.tertiary.disabled,
+                    },
+                }),
+        },
+        linkColor: {
+            backgroundColor: 'transparent',
+            color: semanticColors.buttons.primary.default,
+            border: 'none',
+            padding: `0 ${theme.spacing(1)}`,
+            '&:hover': {
+                backgroundColor: 'transparent',
+                color: semanticColors.buttons.primary.hover,
+            },
+            '&:active': {
+                color: semanticColors.buttons.primary.pressed,
+            },
+            ...(loading
+                ? {}
+                : {
+                    [`&.${buttonBaseClasses.disabled}`]: {
+                        backgroundColor: 'transparent',
+                        color: semanticColors.buttons.tertiary.disabled,
+                    },
+                }),
+        },
+    };
+    return {
+        ...baseStyles,
+        ...variantStyles[variant],
+    };
+});
+const LoadingSpinner = styled(CircularProgress)(({ theme, $variant }) => {
+    // Use appropriate spinner color for each variant to ensure visibility
+    const spinnerColors = {
+        primary: theme.palette.common.white,
+        secondary: semanticColors.buttons.primary.default,
+        destructive: theme.palette.common.white,
+        link: semanticColors.buttons.primary.default,
+        linkColor: semanticColors.buttons.primary.default,
+    };
+    return {
+        color: spinnerColors[$variant],
+    };
+});
+/**
+ * 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
+ */
+const NeoButton = ({ variant = 'primary', size = 'medium', loading = false, children, disabled, ...props }) => {
+    return (jsx(StyledButtonBase, { variant: variant, size: size, loading: loading, disabled: disabled || loading, ...props, children: loading ? jsx(LoadingSpinner, { "$variant": variant, size: size === 'small' ? 16 : 20 }) : children }));
+};
+NeoButton.displayName = 'NeoButton';
+
+const StyledIconButton = styled(IconButton, {
+    shouldForwardProp: prop => prop !== 'size',
+})(({ theme, size = 'medium' }) => {
+    // Size configurations using theme.spacing()
+    const sizeConfig = {
+        small: {
+            width: 32,
+            height: 32,
+            padding: theme.spacing(0.5),
+        },
+        medium: {
+            width: 44,
+            height: 44,
+            padding: theme.spacing(1.25),
+        },
+    };
+    const sizeStyles = sizeConfig[size];
+    // Base styles shared by all variants
+    const baseStyles = {
+        width: sizeStyles.width,
+        height: sizeStyles.height,
+        padding: sizeStyles.padding,
+        borderRadius: borderRadius.button, // Fully rounded/circular
+        transition: theme.transitions.create(['background-color', 'border-color', 'color'], {
+            duration: theme.transitions.duration.short,
+        }),
+        // Disabled state
+        [`&.${iconButtonClasses.disabled}`]: {
+            cursor: 'not-allowed',
+            pointerEvents: 'auto',
+        },
+        // Focus visible for keyboard navigation
+        '&:focus-visible': {
+            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outlineOffset: 2,
+        },
+    };
+    // Icon button styling - single neutral style
+    const iconButtonStyles = {
+        backgroundColor: 'transparent',
+        color: semanticColors.icons.default,
+        border: 'none',
+        '&:hover': {
+            backgroundColor: semanticColors.icons.hoverBackground,
+            color: semanticColors.icons.hover,
+        },
+        '&:active': {
+            color: semanticColors.icons.pressed,
+        },
+        [`&.${iconButtonClasses.disabled}`]: {
+            backgroundColor: 'transparent',
+            color: semanticColors.icons.disabled,
+        },
+    };
+    return {
+        ...baseStyles,
+        ...iconButtonStyles,
+    };
+});
+/**
+ * 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
+ */
+const NeoIconButton = ({ size = 'medium', ...props }) => {
+    return jsx(StyledIconButton, { size: size, ...props });
+};
+NeoIconButton.displayName = 'NeoIconButton';
+
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+};
+
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => createElement(
+    "svg",
+    {
+      ref,
+      ...defaultAttributes,
+      width: size,
+      height: size,
+      stroke: color,
+      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+      className: mergeClasses("lucide", className),
+      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+      ...rest
+    },
+    [
+      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+      ...Array.isArray(children) ? children : [children]
+    ]
+  )
+);
+
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+];
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$1);
+
+/**
+ * @license lucide-react v0.552.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("x", __iconNode);
+
+const StyledFormControl = styled(FormControl, {
+    shouldForwardProp: prop => prop !== 'size',
+})(({ size = 'medium' }) => {
+    const sizeConfig = {
+        small: {
+            gap: spacing.spacing_1,
+        },
+        medium: {
+            gap: spacing.spacing_2,
+        },
+    };
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: sizeConfig[size].gap,
+        width: '100%',
+    };
+});
+const StyledInputLabel = styled(InputLabel, {
+    shouldForwardProp: prop => prop !== 'size' && prop !== 'infoIcon',
+})(({ theme, size = 'medium' }) => {
+    const sizeConfig = {
+        small: {
+            fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+        },
+        medium: {
+            fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+        },
+    };
+    return {
+        position: 'static',
+        transform: 'none',
+        fontSize: sizeConfig[size].fontSize,
+        fontWeight: 500,
+        color: semanticColors.typography.input.label,
+        display: 'flex',
+        alignItems: 'center',
+        gap: spacing.spacing_1,
+        [`&.${inputLabelClasses.disabled}`]: {
+            color: semanticColors.icons.disabled,
+        },
+        [`&.${inputLabelClasses.error}`]: {
+            color: semanticColors.typography.input.label,
+        },
+        // Required asterisk styling
+        [`& .${inputLabelClasses.asterisk}`]: {
+            color: semanticColors.status.error.medium,
+        },
+    };
+});
+const InfoIconWrapper = styled('span')({
+    display: 'inline-flex',
+    alignItems: 'center',
+    color: semanticColors.icons.placeholder,
+});
+const StyledInputBase = styled(InputBase, {
+    shouldForwardProp: prop => prop !== 'size' && prop !== 'destructive',
+})(({ theme, size = 'medium', destructive }) => {
+    const sizeConfig = {
+        small: {
+            height: 40,
+            padding: `${spacing.spacing_1}px ${spacing.spacing_2}px`,
+            fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+            borderRadius: borderRadius.input,
+        },
+        medium: {
+            height: 44,
+            padding: `${spacing.spacing_2}px ${spacing.spacing_3}px`,
+            fontSize: theme.typography.pxToRem(typography.fontSize.default),
+            borderRadius: borderRadius.full,
+        },
+    };
+    const sizeStyles = sizeConfig[size];
+    return {
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        borderRadius: sizeStyles.borderRadius,
+        backgroundColor: semanticColors.input.background,
+        border: `1px solid ${destructive ? semanticColors.status.error.medium : semanticColors.border.input}`,
+        transition: theme.transitions.create(['border-color', 'background-color'], {
+            duration: theme.transitions.duration.short,
+        }),
+        [`& .${inputBaseClasses.input}`]: {
+            padding: sizeStyles.padding,
+            color: semanticColors.typography.input.default,
+            '&::placeholder': {
+                color: semanticColors.typography.input.placeholder,
+            },
+        },
+        // Hover state
+        '&:hover': {
+            backgroundColor: semanticColors.input.hoverBackground,
+            borderColor: destructive ? semanticColors.status.error.medium : semanticColors.border.input,
+        },
+        // Focused state
+        [`&.${inputBaseClasses.focused}`]: {
+            backgroundColor: semanticColors.input.background,
+            borderColor: destructive
+                ? semanticColors.status.error.medium
+                : semanticColors.buttons.primary.default,
+        },
+        // Disabled state
+        [`&.${inputBaseClasses.disabled}`]: {
+            backgroundColor: semanticColors.input.disabledBackground,
+            borderColor: semanticColors.border.input,
+            color: semanticColors.icons.disabled,
+            [`& .${inputBaseClasses.input}`]: {
+                WebkitTextFillColor: semanticColors.icons.disabled,
+            },
+        },
+        // Error state
+        [`&.${inputBaseClasses.error}`]: {
+            borderColor: semanticColors.status.error.medium,
+        },
+        // Adornment styling
+        '& .MuiInputAdornment-root': {
+            color: destructive ? semanticColors.status.error.medium : semanticColors.icons.placeholder,
+        },
+    };
+});
+const StyledFormHelperText = styled(FormHelperText, {
+    shouldForwardProp: prop => prop !== 'size',
+})(({ theme }) => {
+    return {
+        fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+        color: semanticColors.typography.input.helper,
+        [`&.${formHelperTextClasses.error}`]: {
+            color: semanticColors.status.error.medium,
+        },
+        [`&.${formHelperTextClasses.disabled}`]: {
+            color: semanticColors.icons.disabled,
+        },
+    };
+});
+/**
+ * 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)
+ */
+const NeoInputField = ({ size = 'medium', destructive = false, label, required = false, infoIcon, helperText, errorMessage, startIcon, endIcon, disabled, id, ...props }) => {
+    const inputId = id || `neo-input-${Math.random().toString(36).substring(7)}`;
+    const helperTextId = helperText || errorMessage ? `${inputId}-helper-text` : undefined;
+    return (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, required: required, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, required: required, disabled: disabled, error: destructive, children: [label, infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(StyledInputBase, { id: inputId, size: size, destructive: destructive, disabled: disabled, error: destructive, "aria-describedby": helperTextId, startAdornment: startIcon ? jsx(InputAdornment, { position: "start", children: startIcon }) : undefined, endAdornment: destructive ? (jsx(InputAdornment, { position: "end", children: jsx(CircleAlert, { size: size === 'small' ? 16 : 20 }) })) : endIcon ? (jsx(InputAdornment, { position: "end", children: endIcon })) : undefined, ...props }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, children: destructive ? errorMessage : helperText }))] }));
+};
+NeoInputField.displayName = 'NeoInputField';
+
+const StyledChip = styled(Chip)(({ theme, size, variant, color }) => ({
+    padding: 0,
+    borderRadius: borderRadius.full,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    fontWeight: typography.fontWeight.medium,
+    // Size variants
+    ...(size === 'small' && {
+        height: 16,
+        paddingLeft: spacing.spacing_1_2, // 4px
+        paddingRight: spacing.spacing_1_2, // 4px
+    }),
+    ...(size === 'medium' && {
+        height: 18,
+        paddingLeft: spacing.spacing_3_4, // 6px
+        paddingRight: spacing.spacing_3_4, // 6px
+    }),
+    ...(size === 'large' && {
+        height: 20,
+        paddingLeft: spacing.spacing_3_4, // 6px
+        paddingRight: spacing.spacing_3_4, // 6px
+    }),
+    [`& .${chipClasses.label}`]: {
+        padding: 0,
+    },
+    // Outlined variant (light type in Figma) - Neutral/Default
+    ...(variant === 'outlined' &&
+        color === 'default' && {
+        backgroundColor: semanticColors.status.neutral.light,
+        color: semanticColors.status.neutral.dark,
+        borderColor: colors.grey[200], // base/grey/200
+    }),
+    // Outlined variant - Error
+    ...(variant === 'outlined' &&
+        color === 'error' && {
+        backgroundColor: semanticColors.status.error.light,
+        color: semanticColors.status.error.dark,
+        borderColor: colors.red[100], // base/red/100
+    }),
+    // Outlined variant - Warning
+    ...(variant === 'outlined' &&
+        color === 'warning' && {
+        backgroundColor: semanticColors.status.warning.light,
+        color: semanticColors.status.warning.dark,
+        borderColor: colors.orange[100], // base/orange/100
+    }),
+    // Outlined variant - Success
+    ...(variant === 'outlined' &&
+        color === 'success' && {
+        backgroundColor: semanticColors.status.success.light,
+        color: semanticColors.status.success.dark,
+        borderColor: 'rgba(94, 196, 111, 0.24)', // rgba from Figma
+    }),
+    // Outlined variant - Info
+    ...(variant === 'outlined' &&
+        color === 'info' && {
+        backgroundColor: semanticColors.status.info.light,
+        color: semanticColors.status.info.dark,
+        borderColor: colors.digitalBlue[100], // base/digital-blue/100
+    }),
+    // Outlined variant - Violet
+    ...(variant === 'outlined' &&
+        color === 'violet' && {
+        backgroundColor: `${colors.violet[100]}66`, // rgba(235,213,241,0.4)
+        color: colors.violet[600],
+        borderColor: colors.violet[100], // base/violet/100
+    }),
+    // Filled variant (dark type in Figma) - Neutral/Default
+    ...(variant === 'filled' &&
+        color === 'default' && {
+        backgroundColor: semanticColors.status.neutral.medium,
+        color: '#ffffff',
+        border: 'none',
+    }),
+    // Filled variant - Error
+    ...(variant === 'filled' &&
+        color === 'error' && {
+        backgroundColor: semanticColors.status.error.medium,
+        color: '#ffffff',
+        border: 'none',
+    }),
+    // Filled variant - Warning
+    ...(variant === 'filled' &&
+        color === 'warning' && {
+        backgroundColor: semanticColors.status.warning.medium,
+        color: '#ffffff',
+        border: 'none',
+    }),
+    // Filled variant - Success
+    ...(variant === 'filled' &&
+        color === 'success' && {
+        backgroundColor: semanticColors.status.success.medium,
+        color: '#ffffff',
+        border: 'none',
+    }),
+    // Filled variant - Info
+    ...(variant === 'filled' &&
+        color === 'info' && {
+        backgroundColor: semanticColors.status.info.medium,
+        color: '#ffffff',
+        border: 'none',
+    }),
+    // Filled variant - Violet
+    ...(variant === 'filled' &&
+        color === 'violet' && {
+        backgroundColor: colors.violet[500],
+        color: '#ffffff',
+        border: 'none',
+    }),
+}));
+/**
+ * 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
+ */
+const NeoTag = ({ size = 'small', variant = 'outlined', ...props }) => {
+    return jsx(StyledChip, { size: size, variant: variant, ...props });
+};
+NeoTag.displayName = 'NeoTag';
+
+/**
+ * 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
+ */
+const NeoTabs = styled(MuiTabs)(() => ({
+    minHeight: 40,
+    [`& .${tabsClasses.indicator}`]: {
+        backgroundColor: semanticColors.border.tabActive,
+        height: 2,
+    },
+    [`& .${tabsClasses.flexContainer}`]: {
+        gap: 0,
+    },
+}));
+NeoTabs.displayName = 'NeoTabs';
+const StyledTab = styled(MuiTab)(({ theme }) => ({
+    minHeight: 40,
+    padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
+    textTransform: 'none',
+    fontWeight: 500,
+    fontSize: theme.typography.pxToRem(14),
+    lineHeight: 1.5,
+    color: semanticColors.typography.tab.inactive,
+    transition: theme.transitions.create(['color', 'background-color'], {
+        duration: theme.transitions.duration.short,
+    }),
+    [`&.${tabClasses.selected}`]: {
+        color: semanticColors.typography.tab.active,
+        fontWeight: 600,
+    },
+    [`&.${buttonBaseClasses.focusVisible}`]: {
+        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outlineOffset: -2,
+    },
+    [`&.${tabClasses.disabled}`]: {
+        color: semanticColors.typography.button.disabled,
+        cursor: 'not-allowed',
+        pointerEvents: 'auto',
+    },
+}));
+const TabLabelContainer = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: theme.spacing(1),
+}));
+/**
+ * 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
+ */
+const NeoTab = ({ label, count, ...props }) => {
+    const tabLabel = count !== undefined ? (jsxs(TabLabelContainer, { children: [label, jsx(NeoTag, { label: String(count), size: "large", variant: "outlined", color: "default" })] })) : (label);
+    return jsx(StyledTab, { label: tabLabel, ...props });
+};
+NeoTab.displayName = 'NeoTab';
+
+const StyledAlert = styled(Alert, {
+    shouldForwardProp: prop => prop !== 'variant' && prop !== 'showProgress',
+})(({ theme, variant = 'default' }) => {
+    // Base styles
+    const baseStyles = {
+        padding: spacing.spacing_2,
+        borderRadius: borderRadius.s,
+        gap: spacing.spacing_4,
+        alignItems: 'flex-start',
+        fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+        lineHeight: 1.4,
+        [`& .${alertClasses.icon}`]: {
+            display: 'none',
+        },
+        [`& .${alertClasses.message}`]: {
+            padding: 0,
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: spacing.spacing_3,
+        },
+        [`& .${alertClasses.action}`]: {
+            padding: 0,
+            marginRight: 0,
+        },
+    };
+    // Variant-specific styles
+    const variantStyles = {
+        default: {
+            backgroundColor: semanticColors.surfaces.snackbarDarkMode,
+            color: colors.grey['800'],
+            border: `1px solid ${semanticColors.border.primary}`,
+        },
+        dark: {
+            backgroundColor: semanticColors.surfaces.snackbarLightMode,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.surfaces.snackbarLightMode}`,
+        },
+        brand: {
+            backgroundColor: semanticColors.surfaces.snackbarBrand,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.surfaces.snackbarBrand}`,
+        },
+        error: {
+            backgroundColor: semanticColors.status.error.light,
+            color: semanticColors.status.error.dark,
+            border: `1px solid ${semanticColors.status.error.medium}`,
+        },
+        success: {
+            backgroundColor: semanticColors.status.success.light,
+            color: semanticColors.status.success.dark,
+            border: `1px solid ${semanticColors.status.success.medium}`,
+        },
+        info: {
+            backgroundColor: semanticColors.status.info.light,
+            color: semanticColors.status.info.dark,
+            border: `1px solid ${semanticColors.status.info.medium}`,
+        },
+        download: {
+            backgroundColor: semanticColors.surfaces.snackbarDarkMode,
+            color: colors.grey['800'],
+            border: `1px solid ${semanticColors.border.primary}`,
+        },
+    };
+    return {
+        ...baseStyles,
+        ...variantStyles[variant],
+    };
+});
+const ToastTitle = styled('p')(({ theme, variant = 'default' }) => {
+    const colorMap = {
+        default: colors.grey['700'],
+        dark: semanticColors.surfaces.white,
+        brand: semanticColors.surfaces.white,
+        error: semanticColors.status.error.dark,
+        success: semanticColors.status.success.dark,
+        info: semanticColors.status.info.dark,
+        download: colors.grey['700'],
+    };
+    return {
+        margin: 0,
+        fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+        fontWeight: 600,
+        lineHeight: 1.4,
+        color: colorMap[variant],
+    };
+});
+const ToastMessage = styled('p')(({ theme, variant = 'default' }) => {
+    const colorMap = {
+        default: semanticColors.typography.bodySecondary,
+        dark: colors.grey['200'],
+        brand: colors.grey['200'],
+        error: semanticColors.status.error.dark,
+        success: semanticColors.status.success.dark,
+        info: semanticColors.status.info.dark,
+        download: colors.grey['800'],
+    };
+    return {
+        margin: 0,
+        fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+        fontWeight: 400,
+        lineHeight: 1.4,
+        color: colorMap[variant],
+    };
+});
+const ToastActions = styled(Stack)({
+    gap: spacing.spacing_3,
+    alignItems: 'flex-start',
+    justifyContent: 'flex-start',
+});
+const ToastButton = styled(Button, {
+    shouldForwardProp: prop => prop !== 'toastVariant' && prop !== 'primary',
+})(({ toastVariant = 'default', primary }) => {
+    const getColor = () => {
+        if (primary) {
+            if (toastVariant === 'dark' || toastVariant === 'brand') {
+                return colors.digitalBlue['200'];
+            }
+            return semanticColors.typography.link.primary;
+        }
+        // Non-primary button colors
+        if (toastVariant === 'dark' || toastVariant === 'brand') {
+            return semanticColors.surfaces.white;
+        }
+        if (toastVariant === 'error') {
+            return semanticColors.status.error.dark;
+        }
+        if (toastVariant === 'success') {
+            return semanticColors.status.success.dark;
+        }
+        if (toastVariant === 'info') {
+            return semanticColors.status.info.dark;
+        }
+        // default and download variants use icon placeholder color
+        return semanticColors.icons.placeholder;
+    };
+    return {
+        padding: 0,
+        minWidth: 'auto',
+        fontSize: typography.fontSize.sm,
+        fontWeight: 500,
+        lineHeight: 'normal',
+        textTransform: 'none',
+        color: getColor(),
+        '&:hover': {
+            backgroundColor: 'transparent',
+            textDecoration: 'underline',
+        },
+    };
+});
+const ProgressSection = styled(Stack)({
+    gap: spacing.spacing_1,
+    width: '100%',
+});
+const FileName = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    fontWeight: 500,
+    lineHeight: 1.5,
+    color: colors.grey['800'],
+}));
+const ProgressLabel = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    fontWeight: 500,
+    lineHeight: 1.5,
+    color: colors.grey['800'],
+}));
+const StyledLinearProgress = styled(LinearProgress)({
+    width: '100%',
+    height: spacing.spacing_2,
+    borderRadius: borderRadius.s,
+    backgroundColor: colors.grey['200'],
+    [`& .${linearProgressClasses.bar}`]: {
+        backgroundColor: semanticColors.buttons.primary.default,
+        borderRadius: `${borderRadius.xS}px 0 0 ${borderRadius.xS}px`,
+    },
+});
+const DownloadActions = styled(Stack)({
+    gap: `${spacing.spacing_4}px`,
+    alignItems: 'center',
+});
+const DownloadIconButton = styled(IconButton)({
+    padding: 0,
+    width: 16,
+    height: 16,
+    color: colors.grey['800'],
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+});
+/**
+ * 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)
+ */
+const NeoToast = ({ variant = 'default', title, message, showClose = true, actions, progress, fileName, onClose, ...props }) => {
+    const isDownloadVariant = variant === 'download';
+    return (jsx(StyledAlert, { ...props, variant: variant, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: semanticColors.icons.placeholder }, children: jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", sx: {
+                        alignItems: 'flex-start',
+                        justifyContent: 'space-between',
+                        width: '100%',
+                        gap: `${spacing.spacing_4}px`,
+                    }, children: [title && jsx(ToastTitle, { variant: variant, children: title }), showClose && (jsxs(DownloadActions, { direction: "row", children: [jsx(DownloadIconButton, { size: "small", children: jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsx(X, { size: 16 }) })] }))] }), jsxs(ProgressSection, { children: [jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsx(FileName, { children: fileName }), progress !== undefined && jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxs(Fragment, { children: [jsxs(Stack, { sx: { gap: `${spacing.spacing_1}px`, width: '100%' }, children: [title && jsx(ToastTitle, { variant: variant, children: title }), message && jsx(ToastMessage, { variant: variant, children: message })] }), actions && jsx(ToastActions, { direction: "row", children: actions })] })) }));
+};
+/**
+ * Helper component for creating toast action buttons with proper styling
+ */
+const NeoToastButton = ({ primary, variant = 'default', children, ...props }) => {
+    return (jsx(ToastButton, { variant: "text", toastVariant: variant, primary: primary, ...props, children: children }));
+};
+NeoToast.displayName = 'NeoToast';
+NeoToastButton.displayName = 'NeoToastButton';
+
 /**
  * @moderneinc/neo-styled-components
  *
  * Styled MUI components using Moderne design tokens
  */
 
-// Placeholder - components will be added here
 const version = '0.0.0-development';
 
-export { version };
+export { NeoBadge, NeoButton, NeoIconButton, NeoInputField, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, version };
 //# sourceMappingURL=index.esm.js.map