@lunit/oui 3.0.0 → 3.0.1

package/dist/components/Autocomplete/Autocomplete.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Autocomplete as MuiAutocomplete, TextField, useTheme } from '@mui/material';
+import { Chip } from '../Chip';
+import { Button } from '../Button';
+import { CircularProgress } from '../Progress';
+import { CloseSmall } from '../../icons';
+import { autocompleteSx, paperSx } from './Autocomplete.styled';
+const LOADING_SPINNER_SIZE = 20;
+function Autocomplete({ placeholder = '', error, helperText, loading = false, noOptionsText, onDelete, onClearButtonClick, disabled, inputValue, sx, ...otherProps }) {
+    const theme = useTheme();
+    return (_jsx(MuiAutocomplete, { multiple: true, freeSolo: true, disableClearable: true, disabled: disabled, loading: loading, loadingText: noOptionsText, inputValue: inputValue, sx: [autocompleteSx(theme, disabled), ...(Array.isArray(sx) ? sx : [sx])], slotProps: {
+            listbox: { style: { maxHeight: '180px', overflow: 'auto' } },
+            paper: { sx: paperSx(theme) },
+        }, renderValue: (values) => values.map((option) => (_jsx(Chip, { disabled: disabled, label: option, onDelete: onDelete ? () => onDelete(option) : undefined }, option))), renderInput: (params) => (_jsx(TextField, { ...params, variant: "outlined", placeholder: placeholder, error: error, helperText: helperText, slotProps: {
+                ...params.slotProps,
+                input: {
+                    ...params.slotProps?.input,
+                    endAdornment: (_jsxs(_Fragment, { children: [loading ? (_jsx(CircularProgress, { size: LOADING_SPINNER_SIZE, sx: { color: theme.palette.neutralGrey[45] } })) : null, onClearButtonClick ? (_jsx(Button, { icon: _jsx(CloseSmall, { style: { color: theme.palette.neutralGrey[45] } }), size: "small", variant: "ghost", onClick: onClearButtonClick })) : null] })),
+                },
+            } })), ...otherProps }));
+}
+export default Autocomplete;

package/dist/components/Autocomplete/Autocomplete.styled.js

@@ -0,0 +1,36 @@
+const MIN_INPUT_HEIGHT = '44px';
+/** Tokenized styling for the underlying MUI Autocomplete. */
+export const autocompleteSx = (theme, disabled) => ({
+    '.MuiAutocomplete-inputRoot': {
+        padding: `${theme.spacing(1.5, 3.5)} !important`,
+        gap: theme.spacing(1),
+        '& .MuiInputBase-input::placeholder': {
+            opacity: disabled ? 0.42 : 1,
+        },
+        '& .MuiAutocomplete-input': {
+            height: '100%',
+        },
+    },
+    '.MuiOutlinedInput-root': {
+        minHeight: MIN_INPUT_HEIGHT,
+    },
+    '.MuiInputBase-root.Mui-disabled': {
+        border: `1px solid ${theme.palette.neutralGrey[70]}`,
+        color: theme.palette.neutralGrey[45],
+        backgroundColor: theme.palette.neutralGrey[75],
+        pointerEvents: 'none',
+        opacity: 0.8,
+    },
+    '.MuiFormHelperText-root.Mui-error': {
+        ...theme.typography.body5,
+        color: theme.palette.error.main,
+        margin: 0,
+        paddingLeft: theme.spacing(1),
+    },
+});
+/** Tokenized styling for the listbox paper. */
+export const paperSx = (theme) => ({
+    backgroundColor: theme.palette.neutralGrey[70],
+    borderRadius: theme.spacing(2),
+    backgroundImage: 'none',
+});

package/dist/components/Autocomplete/Autocomplete.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Autocomplete/index.js

@@ -0,0 +1,2 @@
+import Autocomplete from './Autocomplete';
+export { Autocomplete };

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Collapse as MuiCollapse } from '@mui/material';
+function Collapse({ children, ...otherProps }) {
+    return _jsx(MuiCollapse, { ...otherProps, children: children });
+}
+export default Collapse;

package/dist/components/Collapse/Collapse.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Collapse/index.js

@@ -0,0 +1,2 @@
+import Collapse from './Collapse';
+export { Collapse };

package/dist/components/DataTable/DataTable.js

@@ -2,10 +2,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { DataGridPro } from '@mui/x-data-grid-pro';
 import DataGridContainer from './DataTable.styled';
 import { Checkbox } from '../Checkbox';
-function DataTable({ rows, columns, ...otherProps }) {
-    return (_jsx(DataGridContainer, { children: _jsx(DataGridPro, { rows: rows, columns: columns, columnHeaderHeight: 40, rowHeight: 40, showColumnVerticalBorder: true, showCellVerticalBorder: true, disableColumnMenu: true, hideFooter: true, slots: {
-                noRowsOverlay: () => _jsx("div", {}),
+const EmptyOverlay = () => _jsx("div", {});
+function DataTable({ rows, columns, slots, ...otherProps }) {
+    return (_jsx(DataGridContainer, { children: _jsx(DataGridPro, { rows: rows, columns: columns, columnHeaderHeight: 40, rowHeight: 40, showColumnVerticalBorder: true, showCellVerticalBorder: true, disableColumnMenu: true, hideFooter: true, ...otherProps, slots: {
+                noRowsOverlay: EmptyOverlay,
                 baseCheckbox: Checkbox,
-            }, ...otherProps }) }));
+                ...slots,
+            } }) }));
 }
 export default DataTable;

package/dist/components/DataTable/DataTable.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import BaseDrawer from './Drawer.styled';
+function Drawer({ children, open = true, wide, variant = 'permanent', ...otherProps }) {
+    return (_jsx(BaseDrawer, { variant: variant, open: open, wide: wide, ...otherProps, children: children }));
+}
+export default Drawer;

package/dist/components/Drawer/Drawer.styled.js

@@ -0,0 +1,29 @@
+import { Drawer as MuiDrawer, paperClasses } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const DEFAULT_CLOSED_WIDTH = '52px';
+const DEFAULT_OPEN_WIDTH = '240px';
+const DEFAULT_WIDE_WIDTH = '280px';
+const WIDTH_TRANSITION = 'width 0.2s';
+const FORWARDED_EXCLUDES = ['wide', 'closedWidth', 'openWidth', 'wideWidth'];
+const BaseDrawer = styled(MuiDrawer, {
+    shouldForwardProp: (prop) => !FORWARDED_EXCLUDES.includes(prop.toString()),
+})(({ theme, open, wide, closedWidth, openWidth, wideWidth }) => {
+    const resolvedClosed = closedWidth ?? DEFAULT_CLOSED_WIDTH;
+    const resolvedOpen = openWidth ?? DEFAULT_OPEN_WIDTH;
+    const resolvedWide = wideWidth ?? DEFAULT_WIDE_WIDTH;
+    const width = !open ? resolvedClosed : wide ? resolvedWide : resolvedOpen;
+    return {
+        width,
+        background: theme.palette.neutralGrey[90],
+        boxSizing: 'border-box',
+        transition: WIDTH_TRANSITION,
+        [`& .${paperClasses.root}`]: {
+            width,
+            background: theme.palette.neutralGrey[90],
+            boxSizing: 'border-box',
+            transition: WIDTH_TRANSITION,
+            overflowY: 'hidden',
+        },
+    };
+});
+export default BaseDrawer;

package/dist/components/Drawer/Drawer.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Drawer/index.js

@@ -0,0 +1,2 @@
+import Drawer from './Drawer';
+export { Drawer };

package/dist/components/EllipsisTypography/EllipsisTypography.js

@@ -1,33 +1,69 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import StyledTypography from './EllipsisTypography.styled';
 import { Tooltip } from '../Tooltip';
 import { ResizeObserverContext } from '../ResizeObserver/ResizeObserverContext';
-function EllipsisTypography({ children, heightThreshold: heightThresholdProp, tooltipPlacement = 'bottom', maxLines = 1, ...otherProps }) {
-    const typographyRef = useRef(null);
+const MAX_RETRY_COUNT = 10;
+const RETRY_DELAY_MS = 50;
+const DEFAULT_HEIGHT_THRESHOLD = 1;
+const EllipsisTypography = forwardRef(({ children, heightThreshold: heightThresholdProp, tooltipPlacement = 'bottom', maxLines = 1, ...otherProps }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const retryCountRef = useRef(0);
+    const timeoutRef = useRef(null);
     const direction = otherProps.direction || 'row';
-    const heightThreshold = heightThresholdProp != null ? heightThresholdProp : 1;
+    const heightThreshold = heightThresholdProp ?? DEFAULT_HEIGHT_THRESHOLD;
     const [showTooltip, setShowTooltip] = useState(false);
     const { addResizeHandler, removeResizeHandler } = useContext(ResizeObserverContext);
+    const heightThresholdRef = useRef(heightThreshold);
+    heightThresholdRef.current = heightThreshold;
+    const checkOverflow = useCallback((target) => {
+        if (!target)
+            return;
+        const { scrollHeight, clientHeight, scrollWidth, clientWidth } = target;
+        // The element may not be laid out yet (all metrics 0); retry until it is.
+        if (scrollHeight === 0 && clientHeight === 0 && scrollWidth === 0 && clientWidth === 0) {
+            if (retryCountRef.current < MAX_RETRY_COUNT) {
+                retryCountRef.current += 1;
+                timeoutRef.current = setTimeout(() => checkOverflow(target), RETRY_DELAY_MS);
+            }
+            return;
+        }
+        retryCountRef.current = 0;
+        const threshold = heightThresholdRef.current;
+        // Single-line ellipsis truncates horizontally (scrollHeight === clientHeight), so width must
+        // also be compared. Multi-line clamp still overflows vertically.
+        const isOverflowing = scrollWidth > clientWidth + threshold || scrollHeight > clientHeight + threshold;
+        setShowTooltip(isOverflowing);
+    }, []);
+    const setRefs = useCallback((node) => {
+        internalRef.current = node;
+        if (typeof forwardedRef === 'function') {
+            forwardedRef(node);
+        }
+        else if (forwardedRef) {
+            forwardedRef.current = node;
+        }
+    }, [forwardedRef]);
     useEffect(() => {
-        if (!typographyRef.current)
+        const target = internalRef.current;
+        if (!target)
             return;
-        const target = typographyRef.current;
-        const checkOverflow = () => {
-            const isOverflowing = target.scrollHeight - target.clientHeight > heightThreshold;
-            setShowTooltip(isOverflowing);
-        };
+        const run = () => checkOverflow(target);
         if (addResizeHandler) {
-            addResizeHandler(target, checkOverflow);
+            addResizeHandler(target, run);
         }
-        checkOverflow();
+        run();
         return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
             if (removeResizeHandler) {
                 removeResizeHandler(target);
             }
         };
-    }, [heightThreshold, addResizeHandler, removeResizeHandler]);
-    const TypographyComponent = (_jsx(StyledTypography, { ...otherProps, ref: typographyRef, direction: direction, maxLines: maxLines, children: children }));
+    }, [children, maxLines, checkOverflow, addResizeHandler, removeResizeHandler]);
+    const TypographyComponent = (_jsx(StyledTypography, { ...otherProps, ref: setRefs, direction: direction, maxLines: maxLines, children: children }));
     return showTooltip ? (_jsx(Tooltip, { title: children, placement: tooltipPlacement, size: "small", children: TypographyComponent })) : (TypographyComponent);
-}
+});
+EllipsisTypography.displayName = 'EllipsisTypography';
 export default EllipsisTypography;

package/dist/components/Popover/Popover.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import StyledPopover from './Popover.styled';
+function Popover({ children, ...otherProps }) {
+    return _jsx(StyledPopover, { ...otherProps, children: children });
+}
+export default Popover;

package/dist/components/Popover/Popover.styled.js

@@ -0,0 +1,10 @@
+import { Popover as MuiPopover } from '@mui/material';
+import { styled } from '@mui/material/styles';
+const StyledPopover = styled(MuiPopover)(({ theme }) => ({
+    '& .MuiPopover-paper': {
+        backgroundColor: theme.palette.neutralGrey[70],
+        borderRadius: theme.spacing(2),
+        backgroundImage: 'none',
+    },
+}));
+export default StyledPopover;

package/dist/components/Popover/Popover.types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Popover/index.js

@@ -0,0 +1,2 @@
+import Popover from './Popover';
+export { Popover };

package/dist/components/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lunit/oui",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "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)"
@@ -225,20 +225,22 @@
   ],
   "exports": {
     ".": {
+      "types": "./dist/types/index.d.ts",
       "import": "./dist/index.js",
       "module": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./*": {
+      "types": "./dist/types/components/*/index.d.ts",
       "import": "./dist/components/*/index.js",
       "module": "./dist/components/*/index.js",
       "default": "./dist/components/*/index.js"
     },
     "./icons": {
+      "types": "./dist/types/icons/index.d.ts",
       "import": "./dist/icons/index.js",
       "module": "./dist/icons/index.js",
-      "default": "./dist/icons/index.js",
-      "types": "./dist/types/icons/index.d.ts"
+      "default": "./dist/icons/index.js"
     }
   },
   "typesVersions": {