@lunit/oui 2.4.19 → 3.0.1

package/dist/foundations/palette.js

@@ -200,6 +200,10 @@ const palette = {
         InvalidHover: '#A7A7A7',
         InvalidSelected: '#6E6E74',
     },
+    DataGrid: {
+        bg: 'transparent',
+        headerBg: 'transparent',
+    },
     scope1: '#7292FD',
     scope2: '#587EFC',
     scope3: '#B0C0F4',

package/dist/presentations/AnalysisBar/AnalysisBar.styled.js

@@ -52,10 +52,13 @@ export const GraphScoreIndicator = ({ value, isCutoff, isJet, }) => {
             leftPos = '20px';
         }
     }
-    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: {
-            left: leftPos,
-            transform: isJet ? 'translateX(-50%) translateY(8px)' : 'translateX(-50%)',
-        }, isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
+    return (_jsxs(GraphScoreIndicatorContainer, { className: "analysis-bar-score-indicator", sx: [{
+                left: leftPos
+            }, isJet ? {
+                transform: 'translateX(-50%) translateY(8px)'
+            } : {
+                transform: 'translateX(-50%)'
+            }], isJet: isJet, children: [_jsx(Typography, { variant: "small_body_sb1", sx: { textAlign: 'center' }, children: value }), _jsx(GraphScoreIndicatorPip, {})] }));
 };
 const GraphAxisLabelContainer = styled('span')(() => {
     return {

package/dist/presentations/FreeText/FreeText.js

@@ -7,27 +7,45 @@ const FreeText = ({ componentType = 'freeText', size = 'medium', content, height
         throw new Error("The 'componentType' prop is required.");
     if (!content)
         throw new Error("The 'content' prop is required.");
-    return (_jsx(Box, { sx: {
-            padding: background ? '8px 6px 8px 16px' : 0,
-            borderRadius: background ? '8px' : 0,
-            backgroundColor: background ? theme.palette.neutralGrey[75] : 'transparent',
-            height: height ? height : 'auto',
-            display: 'flex',
-            overflowY: 'auto',
-        }, children: _jsx(PresentationTypography, { size: size, sx: {
-                display: 'block',
-                whiteSpace: 'pre-wrap',
-                overflow: 'auto',
-                color: background ? '#FFFFFF' : 'inherit',
-                height: height ? '100%' : 'auto',
-                '&::-webkit-scrollbar': {
-                    width: '12px',
-                },
-                '&::-webkit-scrollbar-thumb': {
-                    width: '6px',
-                    backgroundColor: theme.palette.neutralGrey[65],
-                    borderRadius: '6px',
-                },
-            }, children: content }) }));
+    return (_jsx(Box, { sx: [{
+                display: 'flex',
+                overflowY: 'auto'
+            }, background ? {
+                padding: '8px 6px 8px 16px'
+            } : {
+                padding: 0
+            }, background ? {
+                borderRadius: '8px'
+            } : {
+                borderRadius: 0
+            }, background ? {
+                backgroundColor: theme.palette.neutralGrey[75]
+            } : {
+                backgroundColor: 'transparent'
+            }, height ? {
+                height: height
+            } : {
+                height: 'auto'
+            }], children: _jsx(PresentationTypography, { size: size, sx: [{
+                    display: 'block',
+                    whiteSpace: 'pre-wrap',
+                    overflow: 'auto',
+                    '&::-webkit-scrollbar': {
+                        width: '12px',
+                    },
+                    '&::-webkit-scrollbar-thumb': {
+                        width: '6px',
+                        backgroundColor: theme.palette.neutralGrey[65],
+                        borderRadius: '6px',
+                    }
+                }, background ? {
+                    color: '#FFFFFF'
+                } : {
+                    color: 'inherit'
+                }, height ? {
+                    height: '100%'
+                } : {
+                    height: 'auto'
+                }], children: content }) }));
 };
 export default FreeText;

package/dist/theme.js

@@ -1,4 +1,5 @@
 import { createTheme } from '@mui/material/styles';
+import '@mui/x-data-grid/themeAugmentation';
 import MuiCssBaseline from './components/MuiCssBaseline';
 import MuiInputBase from './components/MuiInputBase';
 import MuiOutlinedInput from './components/MuiOutlinedInput';

package/dist/types/components/Autocomplete/Autocomplete.d.ts

@@ -0,0 +1,3 @@
+import type { AutocompleteProps } from './Autocomplete.types';
+declare function Autocomplete({ placeholder, error, helperText, loading, noOptionsText, onDelete, onClearButtonClick, disabled, inputValue, sx, ...otherProps }: AutocompleteProps): import("react/jsx-runtime").JSX.Element;
+export default Autocomplete;

package/dist/types/components/Autocomplete/Autocomplete.styled.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from '@mui/material/styles';
+import type { SxProps } from '@mui/system';
+/** Tokenized styling for the underlying MUI Autocomplete. */
+export declare const autocompleteSx: (theme: Theme, disabled?: boolean) => SxProps<Theme>;
+/** Tokenized styling for the listbox paper. */
+export declare const paperSx: (theme: Theme) => SxProps<Theme>;

package/dist/types/components/Autocomplete/Autocomplete.types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { AutocompleteProps as MuiAutocompleteProps } from '@mui/material';
+type MuiBase = MuiAutocompleteProps<string, true, true, true>;
+export interface AutocompleteProps extends Omit<MuiBase, 'renderInput' | 'renderValue' | 'renderTags' | 'multiple' | 'freeSolo' | 'disableClearable'> {
+    /** Placeholder shown in the text input. */
+    placeholder?: string;
+    /** Whether the field is in an error state. */
+    error?: boolean;
+    /** Helper / error message shown below the input. */
+    helperText?: string;
+    /** Shows a loading indicator and `noOptionsText` while fetching options. */
+    loading?: boolean;
+    /** Message shown when there are no matching options. */
+    noOptionsText?: ReactNode;
+    /** Called when a selected chip's delete icon is clicked. */
+    onDelete?: (value: string) => void;
+    /** When provided, renders a clear button in the input adornment. */
+    onClearButtonClick?: () => void;
+}
+export {};

package/dist/types/components/Autocomplete/index.d.ts

@@ -0,0 +1,4 @@
+import Autocomplete from './Autocomplete';
+import type { AutocompleteProps } from './Autocomplete.types';
+export { Autocomplete };
+export type { AutocompleteProps };

package/dist/{components → types/components}/Checkbox/Checkbox.types.d.ts

@@ -10,6 +10,6 @@ export interface CheckboxProps extends Omit<BoxProps<'span'>, 'onChange' | 'onCh
     onChange?: MuiCheckboxProps['onChange'];
     onChangeCapture?: MuiCheckboxProps['onChangeCapture'];
     label?: string;
-    inputProps?: MuiCheckboxProps['inputProps'];
-    inputRef?: MuiCheckboxProps['inputRef'];
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
 }

package/dist/types/components/Collapse/Collapse.d.ts

@@ -0,0 +1,3 @@
+import type { CollapseProps } from './Collapse.types';
+declare function Collapse({ children, ...otherProps }: CollapseProps): import("react/jsx-runtime").JSX.Element;
+export default Collapse;

package/dist/types/components/Collapse/Collapse.types.d.ts

@@ -0,0 +1,4 @@
+import type { CollapseProps as MuiCollapseProps } from '@mui/material';
+/** Props for Collapse. Re-exports MUI Collapse props for expand/collapse transitions. */
+export interface CollapseProps extends MuiCollapseProps {
+}

package/dist/types/components/Collapse/index.d.ts

@@ -0,0 +1,4 @@
+import Collapse from './Collapse';
+import type { CollapseProps } from './Collapse.types';
+export { Collapse };
+export type { CollapseProps };

package/dist/types/components/DataTable/DataTable.d.ts

@@ -0,0 +1,3 @@
+import type { DataTableProps } from './DataTable.types';
+declare function DataTable({ rows, columns, slots, ...otherProps }: DataTableProps): import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/dist/types/components/DataTable/DataTable.types.d.ts

@@ -0,0 +1,8 @@
+import type { DataGridProProps } from '@mui/x-data-grid-pro';
+/**
+ * Props for the DataTable component. Extends MUI X DataGridPro props; OUI sets
+ * sensible defaults (header/row height, borders, base checkbox, empty overlay)
+ * that consumers can still override, including per-key `slots` merging.
+ */
+export interface DataTableProps extends DataGridProProps {
+}

package/dist/types/components/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DataTable } from './DataTable';
+export type { DataTableProps } from './DataTable.types';

package/dist/{components → types/components}/DatePicker/DatePicker.types.d.ts

@@ -1,6 +1,6 @@
 import type { DatePickerProps as MuiDatePickerProps } from '@mui/x-date-pickers/DatePicker';
 export type DatePickerAlignment = 'left' | 'center' | 'right';
-export interface DatePickerProps extends MuiDatePickerProps<Date> {
+export interface DatePickerProps extends MuiDatePickerProps {
     alignment?: DatePickerAlignment;
     placeholder?: string;
 }

package/dist/types/components/Drawer/Drawer.d.ts

@@ -0,0 +1,3 @@
+import type { DrawerProps } from './Drawer.types';
+declare function Drawer({ children, open, wide, variant, ...otherProps }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export default Drawer;

package/dist/types/components/Drawer/Drawer.styled.d.ts

@@ -0,0 +1,3 @@
+import type { BaseDrawerProps } from './Drawer.types';
+declare const BaseDrawer: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & BaseDrawerProps, {}, {}>;
+export default BaseDrawer;

package/dist/types/components/Drawer/Drawer.types.d.ts

@@ -0,0 +1,14 @@
+import type { DrawerProps as MuiDrawerProps } from '@mui/material';
+export interface BaseDrawerProps extends MuiDrawerProps {
+    /** Whether the drawer is expanded. When false, collapses to `closedWidth`. */
+    open?: boolean;
+    /** Whether to use the wider expanded width (`wideWidth`) instead of `openWidth`. */
+    wide?: boolean;
+    /** Width when collapsed (`open=false`). Defaults to 52px. */
+    closedWidth?: number | string;
+    /** Width when expanded. Defaults to 240px. */
+    openWidth?: number | string;
+    /** Width when expanded and `wide` is set. Defaults to 280px. */
+    wideWidth?: number | string;
+}
+export type DrawerProps = BaseDrawerProps;

package/dist/types/components/Drawer/index.d.ts

@@ -0,0 +1,4 @@
+import Drawer from './Drawer';
+import type { BaseDrawerProps, DrawerProps } from './Drawer.types';
+export { Drawer };
+export type { BaseDrawerProps, DrawerProps };

package/dist/{components → types/components}/Dropdown/Dropdown.types.d.ts

@@ -7,6 +7,7 @@ type BaseDropdownProps<T = unknown> = SelectProps<T>;
 interface DropdownProps<T = unknown> extends Omit<BaseDropdownProps<T>, 'IconComponent' | 'error' | 'sx' | 'style'> {
     error?: string;
     helperMsg?: string;
+    placeholder?: string;
     ContainerProps?: BoxProps;
     sx?: SelectProps['sx'];
     style?: SelectProps['style'];

package/dist/{components → types/components}/Dropdown/IconDropdown.types.d.ts

@@ -1,10 +1,9 @@
 import type { TypographyProps } from '@mui/system';
 import type { BaseDropdownProps } from '../Dropdown/Dropdown.types';
-interface BaseIconDropdownProps extends BaseDropdownProps {
+type BaseIconDropdownProps = BaseDropdownProps & {
     isToggled?: boolean;
-}
-interface IconDropdownProps extends BaseIconDropdownProps {
-}
+};
+type IconDropdownProps = BaseIconDropdownProps;
 interface PlaceholderProps extends TypographyProps {
     disabled?: boolean;
 }

package/dist/types/components/EllipsisTypography/EllipsisTypography.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { EllipsisTypographyProps } from './EllipsisTypography.types';
+declare const EllipsisTypography: React.ForwardRefExoticComponent<Omit<EllipsisTypographyProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default EllipsisTypography;

package/dist/{components → types/components}/Menu/Menu.types.d.ts

@@ -1,4 +1,4 @@
-import type { MenuProps as MuiMenuProps } from '@mui/material';
+import type { MenuProps as MuiMenuProps, PaperProps } from '@mui/material';
 export type MenuSize = 'small' | 'medium';
 export interface MenuProps extends StyledMenuProps {
     size?: MenuSize;
@@ -7,6 +7,8 @@ export interface MenuProps extends StyledMenuProps {
 }
 export interface StyledMenuProps extends MuiMenuProps {
     size?: MenuSize;
+    /** @deprecated Use slotProps={{ paper: ... }} instead */
+    PaperProps?: PaperProps;
 }
 export interface MenuContextValue {
     size: MenuSize;

package/dist/types/components/Popover/Popover.d.ts

@@ -0,0 +1,3 @@
+import type { PopoverProps } from './Popover.types';
+declare function Popover({ children, ...otherProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export default Popover;

package/dist/types/components/Popover/Popover.styled.d.ts

@@ -0,0 +1,2 @@
+declare const StyledPopover: import("@emotion/styled").StyledComponent<import("@mui/material").PopoverProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export default StyledPopover;

package/dist/types/components/Popover/Popover.types.d.ts

@@ -0,0 +1,4 @@
+import type { PopoverProps as MuiPopoverProps } from '@mui/material';
+/** Props for Popover. Extends MUI Popover with OUI's tokenized paper styling. */
+export interface PopoverProps extends MuiPopoverProps {
+}

package/dist/types/components/Popover/index.d.ts

@@ -0,0 +1,4 @@
+import Popover from './Popover';
+import type { PopoverProps } from './Popover.types';
+export { Popover };
+export type { PopoverProps };

package/dist/{components → types/components}/Radio/Radio.types.d.ts

@@ -9,6 +9,6 @@ export interface RadioProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChang
     onChange?: MuiRadioProps['onChange'];
     onChangeCapture?: MuiRadioProps['onChangeCapture'];
     label?: string;
-    inputProps?: MuiRadioProps['inputProps'];
-    inputRef?: MuiRadioProps['inputRef'];
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
 }

package/dist/{components → types/components}/Toggle/Toggle.types.d.ts

@@ -8,8 +8,8 @@ export interface ToggleProps extends Omit<BoxProps<'span'>, 'onChange' | 'onChan
     required?: MuiSwitchProps['required'];
     onChange?: MuiSwitchProps['onChange'];
     onChangeCapture?: MuiSwitchProps['onChangeCapture'];
-    inputProps?: MuiSwitchProps['inputProps'];
-    inputRef?: MuiSwitchProps['inputRef'];
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    inputRef?: React.Ref<HTMLInputElement>;
     indeterminate?: boolean;
     label?: string;
     labelPlacement?: 'left' | 'right';

package/dist/{components → types/components}/index.d.ts

@@ -1,16 +1,20 @@
 export * from './Alert';
+export * from './Autocomplete';
 export * from './Button';
 export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
+export * from './Collapse';
 export * from './DataTable';
 export * from './DatePicker';
 export * from './Dialog';
 export * from './Divider';
+export * from './Drawer';
 export * from './Dropdown';
 export * from './EllipsisTypography';
 export * from './FileDnDZone';
 export * from './List';
+export * from './Popover';
 export * from './LoadingIndicator';
 export * from './Menu';
 export * from './Pagination';

package/dist/{foundations → types/foundations}/typography.d.ts

@@ -1,4 +1,4 @@
-import { TypographyOptions } from '@mui/material/styles/createTypography';
+import type { TypographyVariantsOptions } from '@mui/material/styles';
 export interface LunitTypographyVariants {
     h7: React.CSSProperties;
     h8: React.CSSProperties;
@@ -153,5 +153,5 @@ declare module '@mui/material/Typography' {
     interface TypographyPropsVariantOverrides extends LunitTypographyPropsVariantOverrides {
     }
 }
-declare const typographyOptions: TypographyOptions;
+declare const typographyOptions: TypographyVariantsOptions;
 export default typographyOptions;

package/dist/{theme.d.ts → types/theme.d.ts}

@@ -1,3 +1,4 @@
+import '@mui/x-data-grid/themeAugmentation';
 import { LunitPalette, LunitTypographyPropsVariantOverrides, LunitTypographyVariants, LunitTypographyVariantsOptions } from './foundations';
 declare module '@mui/material/styles' {
     interface Palette extends LunitPalette {

package/docs/COMPONENTS.md

@@ -0,0 +1,125 @@
+# @lunit/oui — Component Catalog
+
+A scannable index of components for AI/developers. Each entry: **what it is · key props · example**.
+The exact props are defined by each component's `*.types.ts` (source of truth). When you add a new component, add a line here too.
+
+## Install & Setup
+
+```bash
+npm i --save @lunit/oui
+```
+
+Wrap your app root with `ThemeProvider` to inject the OUI theme so every component renders correctly.
+
+```tsx
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { theme } from '@lunit/oui';
+
+<ThemeProvider theme={theme}>
+  <CssBaseline />
+  <App />
+</ThemeProvider>;
+```
+
+## Import paths
+
+```ts
+import { Button, Dialog, TextField } from '@lunit/oui'; // components
+import { ArrowDoubleDown } from '@lunit/oui/icons'; // icons
+import { theme, palette, typography, spacing } from '@lunit/oui'; // theme & tokens
+```
+
+❌ Do not import Button/TextField etc. directly from `@mui/material`. ✅ Prefer the equivalent `@lunit/oui` component.
+
+---
+
+## Components
+
+### Input / Form
+
+| Component                         | Purpose                                                  | Key props                                                                                                                                                         |
+| --------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Button**                        | Trigger actions. Supports label/icon buttons and loading | `variant: 'contained' \| 'ghost' \| 'outlined'`, `color: 'primary' \| 'secondary' \| 'error'`, `size: 'small' \| 'medium' \| 'large'`, `label`, `icon`, `loading` |
+| **TextField** / **BaseTextField** | Text input                                               | extends MUI TextField                                                                                                                                             |
+| **Checkbox**                      | Checkbox                                                 | —                                                                                                                                                                 |
+| **Radio**                         | Radio button                                             | —                                                                                                                                                                 |
+| **Toggle**                        | on/off switch                                            | —                                                                                                                                                                 |
+| **Dropdown**                      | Selection dropdown                                       | —                                                                                                                                                                 |
+| **Autocomplete**                  | Multi-select chip input with clear button + loading      | `placeholder`, `error`, `helperText`, `loading`, `noOptionsText`, `onDelete`, `onClearButtonClick`                                                                |
+| **DatePicker**                    | Date selection (based on `@mui/x-date-pickers`)          | —                                                                                                                                                                 |
+| **FileDnDZone**                   | File drag-and-drop area                                  | —                                                                                                                                                                 |
+| **UploadManager**                 | Upload progress/management UI                            | —                                                                                                                                                                 |
+
+### Display / Layout
+
+| Component              | Purpose                                         | Key props                                               |
+| ---------------------- | ----------------------------------------------- | ------------------------------------------------------- |
+| **Card**               | Content card container                          | `size: 'small' \| 'large'`                              |
+| **Divider**            | Separator line                                  | `orientation: 'horizontal' \| 'vertical'`               |
+| **Drawer**             | Side drawer with collapsed/expanded/wide widths | `open`, `wide`, `closedWidth`, `openWidth`, `wideWidth` |
+| **Collapse**           | Expand/collapse transition wrapper              | extends MUI Collapse (`in`, `orientation`, `timeout`)   |
+| **List**               | List                                            | `size: 'small' \| 'medium' \| 'large'`                  |
+| **DataTable**          | Data table (based on `@mui/x-data-grid`)        | —                                                       |
+| **EllipsisTypography** | Text with ellipsis (...) truncation             | —                                                       |
+| **ProductLabel**       | Product label badge                             | —                                                       |
+| **NoMatchContainer**   | Empty state (e.g. no search results)            | —                                                       |
+
+### Feedback / Overlay
+
+| Component            | Purpose                                          | Key props                                                |
+| -------------------- | ------------------------------------------------ | -------------------------------------------------------- |
+| **Alert**            | Inline notification (info/success/error/warning) | —                                                        |
+| **Dialog**           | Modal dialog                                     | —                                                        |
+| **Popover**          | Anchored overlay with tokenized paper styling    | extends MUI Popover (`open`, `anchorEl`, `anchorOrigin`) |
+| **Tooltip**          | Tooltip                                          | `size: 'small' \| 'large'`, `placement`                  |
+| **Progress**         | Progress indicator (Circular/Linear)             | `CircularProgress`: `size`, `circleColor`                |
+| **LoadingIndicator** | Loading spinner                                  | —                                                        |
+| **Chip**             | Chip/tag                                         | `preset` (ChipsPreset)                                   |
+
+### Navigation / Structure
+
+| Component       | Purpose                 | Key props                                                    |
+| --------------- | ----------------------- | ------------------------------------------------------------ |
+| **Menu**        | Menu                    | `size: 'small' \| 'medium'`                                  |
+| **Pagination**  | Pagination              | `size: number`                                               |
+| **Stepper**     | Step progress indicator | —                                                            |
+| **TabbedPanel** | Tab panel               | `size: 'small' \| 'medium'`, `variant: 'normal' \| 'toggle'` |
+
+### Utility
+
+| Component          | Purpose                       |
+| ------------------ | ----------------------------- |
+| **ResizeObserver** | Size-change detection wrapper |
+
+---
+
+## Presentations (domain-specific components)
+
+Exported together from `@lunit/oui`. Composite components for the oncology analysis domain.
+
+`Accordion`, `AnalysisBar`, `FreeText`, `Histogram`, `HorizonDivider`, `ModelType`, `Preview`, `Score`, `Statistic`, `Threshold`, `ToggleControl`, `ToggleControlGroup`
+
+---
+
+## Usage examples
+
+```tsx
+import { Button, Dialog } from '@lunit/oui';
+
+// basic button
+<Button variant="contained" color="primary" size="medium" label="Save" onClick={save} />
+
+// loading state
+<Button variant="contained" loading label="Processing" />
+
+// icon button
+import { Close } from '@lunit/oui/icons';
+<Button icon={<Close />} onClick={close} />
+```
+
+### Do / Don't
+
+- ✅ Use only the union values defined above for variant/size/color.
+- ✅ Use `theme.palette.*` / `theme.spacing()` tokens for color and spacing (→ [TOKENS.md](TOKENS.md)).
+- ❌ Do not use the equivalent `@mui/material` component directly.
+- ❌ Do not hardcode magic values like `#fff` or `16px` in `sx`.

package/docs/TOKENS.md

@@ -0,0 +1,60 @@
+# @lunit/oui — Design Tokens
+
+Always use tokens for color, spacing, and typography. Never hardcode magic values (`#3BC9DB`, `16px`).
+The source of truth is `src/foundations/` (palette.ts / spacing.ts / typography.ts).
+
+```ts
+import { palette, spacing, typography, theme } from '@lunit/oui';
+// Inside a component's styled, access via the theme arg: (theme) => ({ color: theme.palette.lunitTeal[40] })
+```
+
+## Usage rules
+
+| Kind | ❌ Don't | ✅ Do |
+|---|---|---|
+| Color | `color: '#3BC9DB'` | `color: theme.palette.lunitTeal[30]` |
+| Spacing | `padding: '16px'` | `padding: theme.spacing(4)` |
+| Typography | `fontSize: 14, fontWeight: 600` | `<Typography variant="body_sb1">` |
+
+## Color (palette)
+
+Form: `theme.palette.<group>[<key>]`. The key is a brightness scale (lower = brighter).
+
+| Group | Key scale | Purpose |
+|---|---|---|
+| `brand` | `primary`, `secondary` | Brand colors (`#3BC9DB`, `#96EDFF`) |
+| `lunitTeal` | 5–90 | Main teal palette (primary actions) |
+| `neutralGrey` | 0–100 | Grayscale (0 = white, 100 = black). Backgrounds, text, borders |
+| `red` | 5–50 | Error/danger |
+| `blue` | 5–75 | Info |
+| `green` | 10–50 | Success |
+| `yellow` / `orange` | 5–20 | Caution/warning |
+| `magenta` / `purple` | — | Secondary accents |
+| `text` | `primary`, `secondary`, `disabled` | Text colors |
+| `alert` | `InfoBG`, `SuccessBG`, `ErrorBG`, `WarningBG` | Alert backgrounds |
+
+### Domain (histology) colors
+
+Color groups exclusive to tumor analysis — do not use them for general UI.
+`pdl1Tps`, `pdl1Cps`, `io`, `tumorPurity`, `her2`, `erpr`, `analysisStatus`
+
+## Spacing
+
+base unit = **4px**. `theme.spacing(n)` = `n * 4px`.
+
+```
+spacing(1)=4px  spacing(2)=8px  spacing(3)=12px  spacing(4)=16px  spacing(6)=24px
+```
+
+## Typography (variants)
+
+Use via `<Typography variant="...">`, or `theme.typography.<variant>` in styled. Custom variants:
+
+- **Heading**: `h7`, `h8`, `h9`, `h10`, `subtitle3`
+- **Body (weight suffix)**: `b`=bold, `sb`=semibold, `m`=medium, none=regular, `l`=light
+  - `body_b1~2`, `body_sb1~5`, `body_m1~2`, `body1~8`
+  - `small_body_b1~5`, `small_body_sb1`, `small_body_m1~7`, `small_body1~5`, `small_body_l1~2`
+- **Other**: `button1`, `button2`, `overline`, `caption`
+
+> If you need a new token, define it in `src/foundations/` first. When you extend palette/typography,
+> also update the `declare module '@mui/material/styles'` type augmentation in `theme.ts`.

package/llms.txt

@@ -0,0 +1,58 @@
+# @lunit/oui
+
+> React UI component library for Lunit Scope applications. Built on MUI v9.
+> When building UI in an app that uses this package, do not use MUI directly —
+> use the OUI components and design tokens below.
+
+## Setup
+
+Wrap your app root with the OUI theme:
+
+```tsx
+import { ThemeProvider, CssBaseline } from '@mui/material';
+import { theme } from '@lunit/oui';
+
+<ThemeProvider theme={theme}>
+  <CssBaseline />
+  <App />
+</ThemeProvider>
+```
+
+## Import rules
+
+- Components: `import { Button, Dialog, TextField } from '@lunit/oui'`
+- Icons: `import { ArrowDoubleDown } from '@lunit/oui/icons'`
+- Tokens/theme: `import { theme, palette, spacing, typography } from '@lunit/oui'`
+
+## Core rules (must follow)
+
+- ❌ Do not import equivalent components (Button/TextField/Dialog, etc.) directly from `@mui/material`.
+  ✅ Use the `@lunit/oui` component for the same functionality.
+- ❌ Do not hardcode magic values like `#fff` or `16px` in `sx`/styles.
+  ✅ Use tokens: color `theme.palette.lunitTeal[40]`, spacing `theme.spacing(n)` (base 4px), typography `<Typography variant="body_b1">`.
+- For variant/size/color, use only the union values each component allows (e.g. Button `variant: contained|ghost|outlined`).
+
+## Common components
+
+- Button: `variant` contained|ghost|outlined, `color` primary|secondary|error, `size` small|medium|large, `label`, `icon`, `loading`
+- TextField, Checkbox, Radio, Toggle, Dropdown, DatePicker — input/form
+- Card(`size` small|large), List, Divider, DataTable, EllipsisTypography — display/layout
+- Alert, Dialog, Tooltip, Progress, LoadingIndicator, Chip — feedback/overlay
+- Menu, Pagination, Stepper, TabbedPanel — navigation
+
+## Examples
+
+```tsx
+import { Button } from '@lunit/oui';
+import { Close } from '@lunit/oui/icons';
+
+<Button variant="contained" color="primary" size="medium" label="Save" onClick={save} />
+<Button variant="contained" loading label="Processing" />
+<Button icon={<Close />} onClick={close} />
+```
+
+## See also
+
+- Full component catalog: docs/COMPONENTS.md
+- Design tokens (color/spacing/typography): docs/TOKENS.md
+- Interactive docs: Storybook (`npm run storybook`)