@lunit/oui 2.4.18 → 3.0.0

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/DataTable/DataTable.d.ts

@@ -0,0 +1,3 @@
+import { type DataGridProProps } from '@mui/x-data-grid-pro';
+declare function DataTable({ rows, columns, ...otherProps }: DataGridProProps): import("react/jsx-runtime").JSX.Element;
+export default DataTable;

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/{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/{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/{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/{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/types/icons/EllipseExclude/index.d.ts

@@ -0,0 +1,12 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const variants: readonly ["outlined"];
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+    variant?: Variant;
+};
+declare const EllipseExclude: {
+    ({ variant, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+    variants: readonly ["outlined"];
+};
+export default EllipseExclude;

package/dist/types/icons/EllipseInclude/index.d.ts

@@ -0,0 +1,12 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const variants: readonly ["outlined"];
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+    variant?: Variant;
+};
+declare const EllipseInclude: {
+    ({ variant, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+    variants: readonly ["outlined"];
+};
+export default EllipseInclude;

package/dist/types/icons/RectangleExclude/index.d.ts

@@ -0,0 +1,12 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const variants: readonly ["outlined"];
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+    variant?: Variant;
+};
+declare const RectangleExclude: {
+    ({ variant, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+    variants: readonly ["outlined"];
+};
+export default RectangleExclude;

package/dist/types/icons/RectangleInclude/index.d.ts

@@ -0,0 +1,12 @@
+import { SvgIconProps } from '@mui/material/SvgIcon';
+declare const variants: readonly ["outlined"];
+type Variant = (typeof variants)[number];
+type IconProps = SvgIconProps & {
+    variant?: Variant;
+};
+declare const RectangleInclude: {
+    ({ variant, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+    variants: readonly ["outlined"];
+};
+export default RectangleInclude;

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

@@ -3,6 +3,8 @@ export { default as CloseLarge } from './CloseLarge';
 export { default as CloseSmall } from './CloseSmall';
 export { default as DownloadPdf } from './DownloadPdf';
 export { default as Ellipse } from './Ellipse';
+export { default as EllipseExclude } from './EllipseExclude';
+export { default as EllipseInclude } from './EllipseInclude';
 export { default as FilterNoti } from './FilterNoti';
 export { default as HideLarge } from './HideLarge';
 export { default as HideSmall } from './HideSmall';
@@ -10,6 +12,8 @@ export { default as InformationLarge } from './InformationLarge';
 export { default as InformationSmall } from './InformationSmall';
 export { default as Manufacturer } from './Manufacturer';
 export { default as Rectangle } from './Rectangle';
+export { default as RectangleExclude } from './RectangleExclude';
+export { default as RectangleInclude } from './RectangleInclude';
 export { default as RefreshLeft } from './RefreshLeft';
 export { default as RefreshRight } from './RefreshRight';
 export { default as ShowLarge } from './ShowLarge';

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,121 @@
+# @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 | — |
+| **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'` |
+| **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 | — |
+| **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`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "2.4.18",
+  "version": "3.0.0",
   "validate-branch-name": {
     "pattern": "^(main|develop)|(feature|fix|release|hotfix|qe)/.+$",
     "errorMsg": "The branch name is not correct. Please check the pattern. (ex. feature/add-something)"
@@ -8,25 +8,24 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/icons-material": "^5.15.2",
-    "@mui/lab": "^5.0.0-alpha.158",
-    "@mui/material": "^5.15.2",
-    "@mui/system": "^5.15.2",
-    "@mui/x-data-grid": "^6.18.6",
-    "@mui/x-date-pickers": "^6.18.6",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/lab": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/system": "^9.0.0",
+    "@mui/x-date-pickers": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@date-io/date-fns": "^2.17.0",
+    "@date-io/date-fns": "^3.2.1",
     "@lunit/design-system-icons": "2.1.0",
     "@lunit/design-system-logo": "1.1.1",
     "@uppy/core": "^3.12.0",
     "clsx": "^2.0.0",
-    "date-fns": "2.30.0",
+    "date-fns": "^3.6.0",
     "lodash": "^4.17.21",
     "tinycolor2": "^1.6.0",
-    "uuid": "^11.1.0",
+    "uuid": "^14.0.0",
     "victory": "^37.3.6",
     "web-vitals": "^2.1.4"
   },
@@ -122,12 +121,12 @@
     "@emotion/styled": "11.11.0",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@lunit/eslint-config": "^2.0.0",
-    "@mui/icons-material": "5.15.2",
-    "@mui/lab": "5.0.0-alpha.158",
-    "@mui/material": "5.15.2",
-    "@mui/system": "5.15.2",
-    "@mui/x-data-grid": "6.18.6",
-    "@mui/x-date-pickers": "6.18.6",
+    "@mui/icons-material": "9.1.0",
+    "@mui/lab": "9.0.0-beta.3",
+    "@mui/material": "9.1.0",
+    "@mui/system": "9.1.0",
+    "@mui/x-data-grid-pro": "9.4.0",
+    "@mui/x-date-pickers": "9.4.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@storybook/addon-actions": "^7.6.17",
     "@storybook/addon-essentials": "^7.6.17",
@@ -157,12 +156,12 @@
     "babel-loader": "^8.2.3",
     "babel-plugin-named-asset-import": "^0.3.8",
     "babel-preset-react-app": "^10.0.1",
-    "bfj": "^7.0.2",
+    "bfj": "^9.1.3",
     "browserslist": "^4.18.1",
     "camelcase": "^6.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
+    "css-minimizer-webpack-plugin": "^8.0.0",
     "dotenv": "^10.0.0",
     "dotenv-expand": "^5.1.0",
     "eslint": "^8.3.0",
@@ -176,7 +175,7 @@
     "html-webpack-plugin": "^5.5.0",
     "husky": "^8.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.3",
+    "jest": "^30.3.0",
     "jest-resolve": "^27.4.2",
     "jest-watch-typeahead": "^1.0.0",
     "lint-staged": "^15.2.0",
@@ -211,7 +210,7 @@
     "webpack-dev-server": "^5.2.3",
     "webpack-manifest-plugin": "^4.0.2",
     "webpack-node-externals": "^3.0.0",
-    "workbox-webpack-plugin": "^6.4.1"
+    "workbox-webpack-plugin": "^7.4.0"
   },
   "description": "Lunit Oncology UI components",
   "main": "dist/index.js",
@@ -220,7 +219,9 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "llms.txt",
+    "docs"
   ],
   "exports": {
     ".": {
@@ -267,6 +268,14 @@
   "overrides": {
     "nanoid": "^5.0.9",
     "postcss": "^8.4.31",
-    "esbuild": "^0.27.1"
+    "esbuild": "^0.28.1",
+    "react-is": "^18.3.1",
+    "tar": ">=7.5.11",
+    "sockjs": {
+      "uuid": ">=11.1.1"
+    },
+    "@storybook/addon-actions": {
+      "uuid": ">=11.1.1"
+    }
   }
 }

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

@@ -1,3 +0,0 @@
-import { DataGridProps } from '@mui/x-data-grid';
-declare function DataTable({ rows, columns, ...otherProps }: DataGridProps): import("react/jsx-runtime").JSX.Element;
-export default DataTable;