@moderneinc/design-system-components 6.0.0-rename.0

package/README.md

@@ -0,0 +1,76 @@
+# @moderneinc/design-system-components
+
+Styled MUI components for Moderne applications, built on top of `@moderneinc/design-system-tokens` design tokens.
+
+## Installation
+
+```bash
+npm install @moderneinc/design-system-components @mui/material react
+```
+
+## Usage
+
+```javascript
+import { /* components will be exported here */ } from '@moderneinc/design-system-components';
+```
+
+## Required stylesheet
+
+**Every component in this package renders its colours through CSS custom
+properties.** Import the stylesheet once at your app root:
+
+```javascript
+import '@moderneinc/design-system-tokens/semantic-colors.css';
+```
+
+Without it, every colour resolves to an unset custom property. Nothing throws —
+inherited properties inherit, backgrounds fall to their initial value, and SVG
+`fill`/`stroke` fall back to black. The UI simply looks wrong.
+
+## Dark mode
+
+With the stylesheet imported, set `data-theme` on the document root:
+
+```javascript
+document.documentElement.dataset.theme = 'dark' // or 'light'
+```
+
+Components follow automatically — no provider, no re-render. The design system deliberately
+does not emit `@media (prefers-color-scheme: dark)`, so an app opts in when it
+is ready rather than flipping the moment it upgrades.
+
+If you need a literal colour — canvas, WebGL, a charting library, or colour maths
+like `alpha()` — a CSS variable won't resolve. Use the literal-hex exports:
+
+```javascript
+import { semanticColorsLight, semanticColorsDark } from '@moderneinc/design-system-tokens';
+```
+
+Note that appending a hex alpha suffix no longer works, because the value is now
+a `var()` reference rather than a hex string:
+
+```javascript
+// Broken: yields "var(--mod-border-primary)80", which the browser discards
+`${semanticColors.border.primary}80`
+
+// Correct
+`color-mix(in srgb, ${semanticColors.border.primary} 50%, transparent)`
+```
+
+## Development
+
+This package is part of the design-system monorepo.
+
+- **Build**: `npm run build`
+- **Test**: `npm test`
+- **Development**: See monorepo root for workspace commands
+
+## Dependencies
+
+- `@moderneinc/design-system-tokens` - Design tokens and primitives
+- `@mui/material` - Material-UI component library
+- `react` - React library
+
+## License
+
+UNLICENSED - Proprietary to Moderne

package/dist/ActivityHeader/ActivityHeader.d.ts

@@ -0,0 +1,58 @@
+import type { GridDensity } from '@mui/x-data-grid';
+/**
+ * Size variant for ActivityHeader (matches DataGrid size variants)
+ * Alias for MUI's GridDensity type
+ */
+export type ActivityHeaderSize = GridDensity;
+/**
+ * Activity color type for ModActivityHeader
+ */
+export type ActivityColor = 'commitJob' | 'recipeRun' | 'visualization';
+/**
+ * Props for ModActivityHeader component
+ */
+export interface ModActivityHeaderProps {
+    /**
+     * Size variant matching DataGrid row heights
+     * @default 'compact'
+     */
+    size?: GridDensity;
+    /**
+     * Activity type color to display
+     * @default 'commitJob'
+     */
+    color?: ActivityColor;
+}
+/**
+ * ModActivityHeader - Header cell showing activity type legend for DataGrid
+ *
+ * A header cell component that displays a visual legend of activity event types
+ * using colored dots. Designed to be used as the column header for activity
+ * timeline columns in DataGrid.
+ *
+ * **Design Tokens:**
+ * - `semanticColors.activity.commitJob` - Blue dot for commit job events (#2F42FF)
+ * - `semanticColors.activity.recipeRun` - Purple dot for recipe run events (#992FB9)
+ * - `#27AA88` - Teal dot for visualization events (hardcoded - needs design token fix)
+ * - `semanticColors.border.secondary` - Bottom border (#e5e7eb)
+ * - `spacing.spacing_1_1_2` - Dot size (12px)
+ *
+ * @example
+ * // In DataGrid column definition
+ * {
+ *   field: 'activity',
+ *   headerName: '',
+ *   width: 34,
+ *   renderHeader: () => <ModActivityHeader size="condensed" color="commitJob" />,
+ *   renderCell: (params) => (
+ *     <ModActivityIndicatorCell
+ *       event={params.row.eventType}
+ *       scene={params.row.scene}
+ *     />
+ *   )
+ * }
+ */
+export declare const ModActivityHeader: {
+    ({ size, color, }: ModActivityHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ActivityIndicatorCell/ActivityIndicatorCell.d.ts

@@ -0,0 +1,65 @@
+export declare const CIRCLE_RADIUS = 6;
+/**
+ * Event type for activity indicator
+ */
+export type ActivityEvent = 'commit-job' | 'recipe-run' | 'visualization' | 'none';
+/**
+ * Scene types based on moderne-ui ActivityRowScenes
+ */
+export declare enum ActivityScene {
+    BLANK = "blank",
+    CIRCLE = "circle",
+    CIRCLE_WITH_RIGHT_PATH = "circle-with-right-path",
+    CIRCLE_WITH_TOP_PATH = "circle-with-top-path",
+    CIRCLE_WITH_TOP_AND_BOTTOM_PATH = "circle-with-top-and-bottom-path",
+    PATH_CORNER = "path-corner",
+    PATH_CORNER_WITH_HORIZONTAL = "path-corner-with-horizontal",
+    PATH_VERTICAL = "path-vertical",
+    PATH_HORIZONTAL = "path-horizontal"
+}
+/**
+ * Props for ModActivityIndicatorCell component
+ */
+export interface ModActivityIndicatorCellProps {
+    /**
+     * Type of activity event (determines color for circle/dot)
+     */
+    event?: ActivityEvent;
+    /**
+     * Secondary event type for path color (e.g., when a recipe-run connects to a commit-job)
+     * If not specified, paths use the primary event color
+     */
+    secondaryEvent?: ActivityEvent;
+    /**
+     * Scene to render (combines shapes and paths)
+     */
+    scene?: ActivityScene;
+    /**
+     * Whether to show the event dot
+     * @default true
+     */
+    showDot?: boolean;
+}
+/**
+ * ModActivityIndicatorCell - Timeline activity indicator for DataGrid cells
+ *
+ * Based on moderne-ui's RecentActivitySceneSelector with solid filled circles.
+ *
+ * @example
+ * // In DataGrid column definition
+ * {
+ *   field: 'activity',
+ *   headerName: '',
+ *   width: 35,
+ *   renderCell: (params) => (
+ *     <ModActivityIndicatorCell
+ *       event="commit-job"
+ *       scene={ActivityScene.CIRCLE_WITH_TOP_AND_BOTTOM_PATH}
+ *     />
+ *   )
+ * }
+ */
+export declare const ModActivityIndicatorCell: {
+    ({ event, secondaryEvent, scene, showDot, }: ModActivityIndicatorCellProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,54 @@
+import { type AlertProps } from '@mui/material/Alert';
+import type { ReactNode } from 'react';
+type Intent = 'success' | 'error' | 'warning' | 'offline' | 'info';
+type AlertType = 'outlined' | 'filled';
+type AlertSize = 'default' | 'compact';
+export interface ModAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
+    /**
+     * The intent/purpose of the alert
+     * @default "success"
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     */
+    type?: AlertType;
+    /**
+     * Vertical density. `default` is page-level (64px fixed height,
+     * supports title + description). `compact` is inline-panel use
+     * (auto height, 40px min, single-line optimized for terse messages).
+     * @default "default"
+     */
+    size?: AlertSize;
+    /**
+     * The title text displayed in the alert
+     */
+    title: string;
+    /**
+     * Optional supporting description text
+     */
+    description?: string;
+    /**
+     * Custom icon to display (defaults to intent-based icon)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional action element (typically a button) displayed on the right
+     */
+    action?: ReactNode;
+    /**
+     * Optional content rendered below the title inside the alert container.
+     * Use for rich content like stack traces or code blocks. When present,
+     * the alert expands to auto height and top-aligns its icon and action.
+     */
+    children?: ReactNode;
+}
+/**
+ * ModAlert - Alert component for displaying contextual status messages
+ */
+export declare const ModAlert: {
+    ({ intent, type, size, title, description, icon, action, children, ...props }: ModAlertProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Badge/Badge.d.ts

@@ -0,0 +1,40 @@
+import { type ChipProps } from '@mui/material/Chip';
+type BadgeSize = 'small' | 'medium';
+type BadgeVariant = 'filled' | 'outlined';
+type BadgeShape = 'square' | 'rounded';
+export interface ModBadgeProps extends Omit<ChipProps, 'variant' | 'size'> {
+    /**
+     * The color/state of the badge. Ignored when `variant="outlined"`.
+     * @default "default"
+     */
+    color?: 'default' | 'error' | 'warning' | 'success' | 'info';
+    /**
+     * Visual density of the badge. `small` is 20px tall, `medium` is 24px tall.
+     * @default "medium"
+     */
+    size?: BadgeSize;
+    /**
+     * Visual treatment. `filled` uses a per-color tinted background;
+     * `outlined` uses a transparent background with a neutral secondary border.
+     * @default "filled"
+     */
+    variant?: BadgeVariant;
+    /**
+     * Corner treatment. `square` = borderRadius.xS, `rounded` = borderRadius.full.
+     * Deliberately defaults to `square` even though Figma's Shape default differs —
+     * this keeps existing consumers rendering unchanged. Don't "fix" it.
+     * @default "square"
+     */
+    shape?: BadgeShape;
+}
+/**
+ * ModBadge - Status badge component based on MUI Chip
+ *
+ * `deleteIcon` still works via ChipProps — MUI renders it only when `onDelete`
+ * is also set.
+ */
+export declare const ModBadge: {
+    ({ size, variant, shape, ...props }: ModBadgeProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/Banner/Banner.d.ts

@@ -0,0 +1,52 @@
+import { type AlertProps } from '@mui/material/Alert';
+import { type ReactNode } from 'react';
+type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
+export interface ModBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
+    /**
+     * The intent/purpose of the banner
+     * @default "info"
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     */
+    type?: BannerType;
+    /**
+     * The message text to display
+     */
+    message: string;
+    /**
+     * Horizontal alignment of the message content
+     * @default "left"
+     */
+    messagePosition?: 'left' | 'center';
+    /**
+     * Optional link text to display after the message
+     */
+    linkText?: string;
+    /**
+     * Whether to show the close button
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Custom icon to display (optional)
+     * If not provided, no icon will be shown
+     */
+    icon?: ReactNode;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+    /**
+     * Callback when link text is clicked
+     */
+    onLinkClick?: () => void;
+}
+export declare const ModBanner: {
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: ModBannerProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,53 @@
+import { type LinkProps } from '@mui/material/Link';
+import type { ElementType, ReactNode } from 'react';
+/**
+ * ModBreadcrumbs - Navigation breadcrumb component
+ *
+ * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
+ */
+export interface ModBreadcrumbsProps {
+    /** Breadcrumb items as Link elements */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface ModBreadcrumbLinkProps extends Omit<LinkProps, 'color'> {
+    /** Marks this breadcrumb as the current page (sets aria-current="page") */
+    current?: boolean;
+    /** Link content */
+    children: ReactNode;
+    /** Custom link component for client-side navigation (e.g., Next.js Link) */
+    component?: ElementType;
+}
+/**
+ * ModBreadcrumbLink - Individual breadcrumb link
+ *
+ * Use this component as children of ModBreadcrumbs to create breadcrumb items.
+ * Set `current` prop on the last item to indicate the current page.
+ *
+ * @example
+ * ```tsx
+ * <ModBreadcrumbs>
+ *   <ModBreadcrumbLink href="/settings">Settings</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink href="/team">Team</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink current>Team Details</ModBreadcrumbLink>
+ * </ModBreadcrumbs>
+ * ```
+ */
+export declare function ModBreadcrumbLink({ current, children, component, ...props }: ModBreadcrumbLinkProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ModBreadcrumbs - Navigation breadcrumb component
+ *
+ * Provides hierarchical navigation with styled links and chevron separators.
+ * Use ModBreadcrumbLink components as children to create breadcrumb items.
+ *
+ * @example
+ * ```tsx
+ * <ModBreadcrumbs>
+ *   <ModBreadcrumbLink href="/settings">Settings</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink href="/team">Team</ModBreadcrumbLink>
+ *   <ModBreadcrumbLink current>Team Details</ModBreadcrumbLink>
+ * </ModBreadcrumbs>
+ * ```
+ */
+export declare function ModBreadcrumbs({ children, className }: ModBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;

package/dist/Button/Button.d.ts

@@ -0,0 +1,56 @@
+import ButtonBase from '@mui/material/ButtonBase';
+import React, { type ElementType, type ReactNode } from 'react';
+declare module '@mui/material/ButtonBase' {
+    interface ButtonBasePropsVariantOverrides {
+        primary: true;
+        secondary: true;
+        destructive: true;
+        tertiary: true;
+    }
+}
+type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'tertiary';
+type ButtonSize = 'small' | 'medium';
+type ModButtonOwnProps = {
+    /**
+     * The visual variant of the button
+     * @default "primary"
+     */
+    variant?: ButtonVariant;
+    /**
+     * The size of the button
+     * @default "medium"
+     */
+    size?: ButtonSize;
+    /**
+     * Show loading spinner instead of children
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Button content
+     */
+    children?: ReactNode;
+    /**
+     * URL to link to. When provided, the button renders as a link element.
+     */
+    href?: string;
+    /**
+     * Icon placed before the button label
+     */
+    startIcon?: ReactNode;
+    /**
+     * Icon placed after the button label
+     */
+    endIcon?: ReactNode;
+};
+export type ModButtonProps<C extends ElementType = typeof ButtonBase> = ModButtonOwnProps & Omit<React.ComponentPropsWithoutRef<C>, keyof ModButtonOwnProps> & {
+    component?: C;
+};
+/**
+ * ModButton - Text button component based on MUI ButtonBase
+ */
+export declare function ModButton<C extends ElementType = typeof ButtonBase>({ variant, size, loading, children, disabled, startIcon, endIcon, ...rest }: ModButtonProps<C>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ModButton {
+    var displayName: string;
+}
+export {};

package/dist/ButtonTab/ButtonTab.d.ts

@@ -0,0 +1,16 @@
+import { type ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';
+export interface ModButtonTabProps extends Omit<MuiToggleButtonProps, 'color'> {
+    /**
+     * Whether the tab is currently selected.
+     * When used inside ModButtonGroup, this is computed automatically from the group's value.
+     * @default false
+     */
+    selected?: boolean;
+}
+/**
+ * ModButtonTab - A tab-style toggle button for use within ModButtonGroup
+ */
+export declare const ModButtonTab: {
+    ({ children, ...props }: ModButtonTabProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/ButtonTabGroup/ButtonTabGroup.d.ts

@@ -0,0 +1,31 @@
+import { type ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';
+type ButtonTabGroupSize = 'small' | 'medium';
+export interface ModButtonTabGroupProps extends Omit<MuiToggleButtonGroupProps, 'orientation' | 'color' | 'fullWidth'> {
+    /**
+     * The size of the button tab group
+     * @default "medium"
+     */
+    size?: ButtonTabGroupSize;
+    /**
+     * Whether only one button can be selected at a time
+     * @default true
+     */
+    exclusive?: boolean;
+}
+/**
+ * ModButtonTabGroup - Button tab group container
+ *
+ * Usage:
+ * ```tsx
+ * <ModButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
+ *   <ModButtonTab value="tab1">Tab 1</ModButtonTab>
+ *   <ModButtonTab value="tab2">Tab 2</ModButtonTab>
+ *   <ModButtonTab value="tab3">Tab 3</ModButtonTab>
+ * </ModButtonTabGroup>
+ * ```
+ */
+export declare const ModButtonTabGroup: {
+    ({ size, exclusive, ...props }: ModButtonTabGroupProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/CanceledIcon/CanceledIcon.d.ts

@@ -0,0 +1,11 @@
+import { type SvgIconProps } from '@mui/material/SvgIcon';
+/**
+ * ModCanceledIcon - Outlined circle struck through by a horizontal line.
+ *
+ * Marks a CANCELED state. Color comes entirely from `currentColor` (stroke plus
+ * a 10% fill tint); set it via the `color`/`sx` prop or a parent.
+ */
+export declare const ModCanceledIcon: {
+    (props: SvgIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Card/Card.d.ts

@@ -0,0 +1,32 @@
+import { type CardProps } from '@mui/material/Card';
+import type { ReactNode } from 'react';
+export type ModCardSize = 'small' | 'large';
+export interface ModCardSmallProps extends Omit<CardProps, 'children' | 'title'> {
+    size: 'small';
+    logo: ReactNode;
+    recipeCount: string;
+    title: ReactNode | string;
+    description: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface ModCardLargeProps extends Omit<CardProps, 'children' | 'title'> {
+    size: 'large';
+    disabled?: boolean;
+    cardTheme?: 'light' | 'dark';
+    showIcon?: boolean;
+    showGel?: boolean;
+    showButtons?: boolean;
+    icon?: ReactNode;
+    gel?: ReactNode;
+    title?: ReactNode;
+    children?: ReactNode;
+    actions?: ReactNode;
+    onClick?: () => void;
+}
+export type ModCardProps = ModCardSmallProps | ModCardLargeProps;
+export declare const ModCard: {
+    (props: ModCardProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/Checkbox/Checkbox.d.ts

@@ -0,0 +1,78 @@
+import { type CheckboxProps } from '@mui/material/Checkbox';
+import type { ReactNode } from 'react';
+/**
+ * ModCheckbox uses Lucide icons (square / square-check / square-minus): a rounded
+ * outline drawn in `currentColor`, with the check/minus mark sharing that stroke —
+ * so a single per-state `color` (set in StyledCheckbox) drives every variant.
+ *
+ * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
+ */
+type CheckboxSize = 'xs' | 'small' | 'medium';
+declare module '@mui/material/Checkbox' {
+    interface CheckboxPropsSizeOverrides {
+        xs: true;
+        small: true;
+        medium: true;
+    }
+}
+declare const StyledCheckbox: import("@emotion/styled").StyledComponent<CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    size?: CheckboxSize;
+    disabled?: boolean;
+}, {}, {}>;
+export interface ModCheckboxProps extends Omit<CheckboxProps, 'size'> {
+    /**
+     * The size of the checkbox
+     * @default "medium"
+     */
+    size?: CheckboxSize;
+    /**
+     * The label text displayed next to the checkbox
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModCheckbox - Checkbox component based on MUI Checkbox
+ *
+ * @example
+ * // Basic checkbox
+ * <ModCheckbox />
+ *
+ * @example
+ * // With label
+ * <ModCheckbox label="Remember me" />
+ *
+ * @example
+ * // With label and helper text
+ * <ModCheckbox label="Remember me" helperText="Save my login details for next time." />
+ *
+ * @example
+ * // Small size
+ * <ModCheckbox size="small" label="Remember me" />
+ *
+ * @example
+ * // Extra small size
+ * <ModCheckbox size="xs" label="Remember me" />
+ *
+ * @example
+ * // Controlled
+ * <ModCheckbox checked={isChecked} onChange={handleChange} label="Remember me" />
+ *
+ * @example
+ * // Indeterminate state (for "select all" checkboxes)
+ * <ModCheckbox indeterminate={true} label="Select all" />
+ */
+export declare const ModCheckbox: {
+    ({ size, label, helperText, disabled, icon, checkedIcon, indeterminateIcon, className, ...props }: ModCheckboxProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Base styled checkbox component without label wrapper
+ * Used internally by ModCheckbox and directly in DataGrid
+ *
+ * @public
+ */
+export { StyledCheckbox as ModCheckboxBase };

package/dist/CheckboxWithText/CheckboxWithText.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+import { type ModCheckboxProps } from '../Checkbox/Checkbox';
+type CheckboxWithTextSize = 'small' | 'medium';
+/**
+ * Props for the ModCheckboxWithText component
+ */
+export interface ModCheckboxWithTextProps extends Omit<ModCheckboxProps, 'size'> {
+    /**
+     * The size of the checkbox with text
+     * @default "small"
+     */
+    size?: CheckboxWithTextSize;
+    /**
+     * The label text displayed next to the checkbox
+     */
+    label?: ReactNode;
+    /**
+     * The helper text displayed below the label
+     */
+    helperText?: ReactNode;
+}
+/**
+ * ModCheckboxWithText - Checkbox with label and supporting text
+ *
+ * Thin wrapper around ModCheckbox that maps the Figma "Checkbox with text"
+ * component to the existing ModCheckbox with label + helperText.
+ */
+export declare const ModCheckboxWithText: {
+    ({ size, ...props }: ModCheckboxWithTextProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};