@lunit/oui 3.0.0 → 3.1.0

package/dist/presentations/Threshold/Threshold.styled.js

@@ -1,4 +1,5 @@
 import { Box, Slider, styled } from '@mui/material';
+import { NO_LABEL_ONLY_MARK } from './Threshold.utils';
 import theme from '../../theme';
 export const Container = styled(Box)({
     display: 'flex',
@@ -6,67 +7,64 @@ export const Container = styled(Box)({
     gap: '12px',
 });
 export const BaseSlider = styled(Slider, {
-    shouldForwardProp: (prop) => prop !== 'defaultThreshold',
-})(({ defaultThreshold, marks, disabled }) => {
-    let markIndex = 0;
-    if (Array.isArray(marks) && marks.length > 0) {
-        markIndex = marks.findIndex((mark) => mark.value === defaultThreshold);
-    }
-    const defaultThresClass = `&:nth-of-type(${markIndex + 4})`;
-    const defaultLabelClass = `&:nth-of-type(${markIndex + 5})`;
-    return {
-        '& .MuiSlider-rail': {
-            background: theme.palette.neutralGrey[75],
-            height: '8px',
+    shouldForwardProp: (prop) => prop !== 'labelOnlyMarkIndex',
+})(({ disabled, labelOnlyMarkIndex = NO_LABEL_ONLY_MARK }) => ({
+    '& .MuiSlider-rail': {
+        background: theme.palette.neutralGrey[75],
+        height: '8px',
+    },
+    '& .MuiSlider-track': {
+        display: 'none',
+    },
+    '& .MuiSlider-thumb': {
+        background: theme.palette.neutralGrey[0],
+        '&:hover': {
+            boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
         },
-        '& .MuiSlider-track': {
-            display: 'none',
+        '&.Mui-focusVisible': {
+            boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
         },
-        '& .MuiSlider-thumb': {
-            background: theme.palette.neutralGrey[0],
-            '&:hover': {
-                boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
-            },
-            '&.Mui-focusVisible': {
-                boxShadow: `0px 0px 0px 8px rgba(255, 0, 0, 0.2)`,
-            },
+    },
+    '& .MuiSlider-mark': {
+        background: theme.palette.neutralGrey[40],
+        height: '6px',
+        width: '6px',
+        borderRadius: '50%',
+    },
+    '& .MuiSlider-markLabel': {
+        fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+        fontSize: '8px',
+        fontStyle: 'normal',
+        fontWeight: '500',
+        lineHeight: '12px',
+    },
+    '& .MuiSlider-valueLabel': {
+        fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
+        fontSize: '12px',
+        fontWeight: '700',
+        lineHeight: '16px',
+        background: 'unset',
+        padding: 0,
+        width: 32,
+        height: 32,
+        borderRadius: '50% 50% 50% 0',
+        backgroundColor: disabled ? theme.palette.neutralGrey[60] : theme.palette.lunitTeal[40],
+        transformOrigin: 'bottom left',
+        transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
+        '&:before': { display: 'none' },
+        '&.MuiSlider-valueLabelOpen': {
+            transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
         },
-        '& .MuiSlider-mark': {
-            background: theme.palette.neutralGrey[40],
-            height: '6px',
-            width: '6px',
-            borderRadius: '50%',
+        '& > *': {
+            transform: 'rotate(45deg)',
         },
-        '& .MuiSlider-markLabel': {
-            fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-            fontSize: '8px',
-            fontStyle: 'normal',
-            fontWeight: '500',
-            lineHeight: '12px',
+        '&.Mui-disabled': {
+            visibility: 'visible',
         },
-        '& .MuiSlider-valueLabel': {
-            fontFamily: 'Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-            fontSize: '12px',
-            fontWeight: '700',
-            lineHeight: '16px',
-            background: 'unset',
-            padding: 0,
-            width: 32,
-            height: 32,
-            borderRadius: '50% 50% 50% 0',
-            backgroundColor: disabled ? theme.palette.neutralGrey[60] : theme.palette.lunitTeal[40],
-            transformOrigin: 'bottom left',
-            transform: 'translate(50%, -100%) rotate(-45deg) scale(0)',
-            '&:before': { display: 'none' },
-            '&.MuiSlider-valueLabelOpen': {
-                transform: 'translate(50%, -100%) rotate(-45deg) scale(1)',
-            },
-            '& > *': {
-                transform: 'rotate(45deg)',
-            },
-            '&.Mui-disabled': {
-                visibility: 'visible',
-            },
+    },
+    ...(labelOnlyMarkIndex > NO_LABEL_ONLY_MARK && {
+        [`& .MuiSlider-mark[data-index="${labelOnlyMarkIndex}"]`]: {
+            display: 'none',
         },
-    };
-});
+    }),
+}));

package/dist/presentations/Threshold/Threshold.utils.js

@@ -1,3 +1,5 @@
+const DEFAULT_MARK_LABEL_PREFIX = 'Default: ';
+export const NO_LABEL_ONLY_MARK = -1;
 export const baseSliderMarks = [
     { value: 0, label: '0' },
     { value: 10 },
@@ -11,24 +13,31 @@ export const baseSliderMarks = [
     { value: 90 },
     { value: 100, label: '100' },
 ];
-export const getPresetValue = (options, selectedItem) => {
-    const presetValue = options.find((option) => option.title === selectedItem && option.isPreset)
-        ?.value;
-    return presetValue;
-};
-export const getSliderMarks = (presetValue) => {
-    const marks = baseSliderMarks.map((mark) => {
-        if (mark.value === presetValue) {
-            return {
-                ...mark,
-                label: `Preset: ${presetValue}`,
-            };
-        }
-        return mark;
+/**
+ * Builds the slider marks with the default threshold labelled.
+ *
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Marks ordered by value, including an extra mark when the default sits between intervals
+ */
+export const getSliderMarks = (defaultThreshold) => {
+    const defaultLabel = `${DEFAULT_MARK_LABEL_PREFIX}${defaultThreshold}`;
+    const marks = baseSliderMarks.map((mark) => mark.value === defaultThreshold ? { ...mark, label: defaultLabel } : mark);
+    if (baseSliderMarks.some((mark) => mark.value === defaultThreshold))
+        return marks;
+    const insertIndex = marks.findIndex((mark) => mark.value > defaultThreshold);
+    marks.splice(insertIndex < 0 ? marks.length : insertIndex, 0, {
+        value: defaultThreshold,
+        label: defaultLabel,
     });
-    if (!baseSliderMarks.find((mark) => mark.value === presetValue)) {
-        const index = Math.floor(presetValue / 10);
-        marks.splice(index + 1, 0, { value: presetValue, label: `Preset: ${presetValue}` });
-    }
     return marks;
 };
+/**
+ * Finds the mark that exists only to label the default threshold.
+ *
+ * @param marks - Marks built by `getSliderMarks`
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Index of the mark whose dot should stay hidden, or `-1` when the default sits on an interval
+ */
+export const getLabelOnlyMarkIndex = (marks, defaultThreshold) => baseSliderMarks.some((mark) => mark.value === defaultThreshold)
+    ? NO_LABEL_ONLY_MARK
+    : marks.findIndex((mark) => mark.value === defaultThreshold);

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/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

@@ -1,3 +1,3 @@
-import { type DataGridProProps } from '@mui/x-data-grid-pro';
-declare function DataTable({ rows, columns, ...otherProps }: DataGridProProps): import("react/jsx-runtime").JSX.Element;
+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

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

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/types/components/EllipsisTypography/EllipsisTypography.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import type { EllipsisTypographyProps } from './EllipsisTypography.types';
-declare function EllipsisTypography({ children, heightThreshold: heightThresholdProp, tooltipPlacement, maxLines, ...otherProps }: EllipsisTypographyProps): import("react/jsx-runtime").JSX.Element;
+declare const EllipsisTypography: React.ForwardRefExoticComponent<Omit<EllipsisTypographyProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default EllipsisTypography;

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/types/components/Tooltip/Tooltip.types.d.ts

@@ -2,10 +2,10 @@ import { ReactNode } from 'react';
 import type { TooltipClasses, TooltipProps as MuiTooltipProps } from '@mui/material';
 export type Position = Pick<TooltipProps, 'placement'>;
 export type TooltipSizes = 'small' | 'large';
-export type TooltipSize = {
+export interface TooltipSize {
     width: number;
     height: number;
-};
+}
 export type TooltipPlacement = TooltipClasses['tooltipPlacementBottom'] | TooltipClasses['tooltipPlacementLeft'] | TooltipClasses['tooltipPlacementRight'] | TooltipClasses['tooltipPlacementTop'];
 export type ArrowSizeBySize = Record<TooltipSizes, TooltipSize>;
 export type TooltipPlacementToSize = Record<TooltipPlacement, ArrowSizeBySize>;

package/dist/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/types/presentations/Threshold/Threshold.d.ts

@@ -1,3 +1,3 @@
 import { ThresholdProps } from './Threshold.types';
-declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, isLoading, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
+declare const Threshold: ({ componentType, title, totalScore, totalCells, statisticItems, options, description, controlStep, showDefaultMark, isLoading, thresholdState, onChangeDropdown, onChangeSlider, onSliderChangeCommitted, onClickUpdateConfiguration, }: ThresholdProps) => import("react/jsx-runtime").JSX.Element;
 export default Threshold;

package/dist/types/presentations/Threshold/Threshold.types.d.ts

@@ -9,18 +9,29 @@ export interface ThresholdOption {
     value: number;
     isPreset?: boolean;
 }
+export interface ThresholdMark {
+    /** Position of the mark on the 0-100 intensity scale */
+    value: number;
+    /** Text rendered under the mark; marks without a label render as a dot only */
+    label?: string;
+}
 export interface ThresholdSpec {
     componentType: 'threshold';
-    totalScore: ScoreProps;
+    /** Overall score summary shown above the cell statistics; omitted when the analysis has no score */
+    totalScore?: ScoreProps;
     totalCells: StatisticProps;
     statisticItems: StatisticProps[];
     title?: string;
     description?: {
-        preset: string;
-        user: string;
+        /** Guidance shown while a preset option is selected */
+        preset?: string;
+        /** Guidance shown while a user-adjustable option is selected */
+        user?: string;
     };
     options: ThresholdOption[];
     controlStep?: number;
+    /** Labels the selected option's threshold on the slider, e.g. `Default: 40`; off by default */
+    showDefaultMark?: boolean;
 }
 export interface ThresholdProps extends ThresholdSpec {
     thresholdState?: {
@@ -35,5 +46,6 @@ export interface ThresholdProps extends ThresholdSpec {
     isLoading?: boolean;
 }
 export interface BaseSliderProps extends SliderProps {
-    defaultThreshold: number;
+    /** Index of the mark that renders its label without a dot; `-1` hides nothing */
+    labelOnlyMarkIndex?: number;
 }

package/dist/types/presentations/Threshold/Threshold.utils.d.ts

@@ -1,16 +1,18 @@
-import { ThresholdOption } from './Threshold.types';
-export declare const baseSliderMarks: ({
-    value: number;
-    label: string;
-} | {
-    value: number;
-    label?: undefined;
-})[];
-export declare const getPresetValue: (options: ThresholdOption[], selectedItem: string) => number;
-export declare const getSliderMarks: (presetValue: number) => ({
-    value: number;
-    label: string;
-} | {
-    value: number;
-    label?: undefined;
-})[];
+import { ThresholdMark } from './Threshold.types';
+export declare const NO_LABEL_ONLY_MARK = -1;
+export declare const baseSliderMarks: ThresholdMark[];
+/**
+ * Builds the slider marks with the default threshold labelled.
+ *
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Marks ordered by value, including an extra mark when the default sits between intervals
+ */
+export declare const getSliderMarks: (defaultThreshold: number) => ThresholdMark[];
+/**
+ * Finds the mark that exists only to label the default threshold.
+ *
+ * @param marks - Marks built by `getSliderMarks`
+ * @param defaultThreshold - Default threshold of the selected option
+ * @returns Index of the mark whose dot should stay hidden, or `-1` when the default sits on an interval
+ */
+export declare const getLabelOnlyMarkIndex: (marks: ThresholdMark[], defaultThreshold: number) => number;

package/docs/COMPONENTS.md

@@ -18,14 +18,14 @@ import { theme } from '@lunit/oui';
 <ThemeProvider theme={theme}>
   <CssBaseline />
   <App />
-</ThemeProvider>
+</ThemeProvider>;
 ```
 
 ## Import paths
 
 ```ts
 import { Button, Dialog, TextField } from '@lunit/oui'; // components
-import { ArrowDoubleDown } from '@lunit/oui/icons';      // icons
+import { ArrowDoubleDown } from '@lunit/oui/icons'; // icons
 import { theme, palette, typography, spacing } from '@lunit/oui'; // theme & tokens
 ```
 
@@ -37,54 +37,58 @@ import { theme, palette, typography, spacing } from '@lunit/oui'; // theme & tok
 
 ### 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 | — |
+| 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'` |
-| **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) | — |
+| 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 | — |
-| **Tooltip** | Tooltip | `size: 'small' \| 'large'`, `placement` |
-| **Progress** | Progress indicator (Circular/Linear) | `CircularProgress`: `size`, `circleColor` |
-| **LoadingIndicator** | Loading spinner | — |
-| **Chip** | Chip/tag | `preset` (ChipsPreset) |
+| 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'` |
+| 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 |
-|---|---|
+| Component          | Purpose                       |
+| ------------------ | ----------------------------- |
 | **ResizeObserver** | Size-change detection wrapper |
 
 ---