lily-lark-ui 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -6,6 +6,35 @@ Mọi thay đổi đáng chú ý của `lily-lark-ui` được ghi ở đây. Đ
 
 ## [Unreleased]
 
+### Added — prop HTML trên toàn bộ component
+
+12 component từng chỉ nhận vài prop (Select, Switch, Checkbox, RadioGroup,
+Pagination, Tabs, Dialog, AlertDialog, DropdownMenu, Tooltip, Spinner,
+EmptyState, Table) nay nhận đủ prop HTML của phần tử gốc: `onBlur`, `onFocus`,
+`onKeyDown`, `name`, `form`, `value`, `data-*`, `aria-*`, `style`, `id`, `ref`.
+
+- Interface kế thừa `ComponentPropsWithoutRef<typeof Primitive>` /
+  `HTMLAttributes<...>` thay vì khai báo tay vài prop.
+- Thêm prop phụ để không phá API cũ: `controlClassName` (Switch, Checkbox,
+  Radio.Item), `containerClassName` (Select), `triggerClassName` (Tooltip),
+  `toastClassName`/`viewportClassName` (ToastProvider).
+- `LarkTable` thêm `onRowClick(row, index)`, `rowClassName(row, index)`,
+  `ref` tới `<table>`; `LarkColumn` thêm `className`/`headerClassName`.
+- `LarkRadioGroup` nhận `children` (dùng `LarkRadioGroup.Item` tự bố trí) song
+  song với `options`.
+- `LarkTooltip.content` nhận `ReactNode` (trước là string).
+
+### Fixed
+
+- `LarkEmptyState` và `LarkSpinner` merge `className` qua `cn` nên class riêng
+  override được class kích thước (trước ghi đè mất `size-4`/`size-6`).
+- `AlertDialog.onEscapeKeyDown` do người dùng truyền không còn bị bỏ qua khi
+  `isPending` (giờ chặn trước rồi gọi handler của người dùng).
+- `tests/prop-passthrough.test.tsx` (15 test) + fixture kiểu
+  `tests/fixtures/types-props.tsx` chạy `tsc` để chặn hồi quy.
+- `vitest.setup.ts` mock `ResizeObserver` cho Radix.
+
+
 ## [0.2.0] — 2026-11-05
 
 ### Changed — đổi tên package sang `lily-lark-ui`

package/dist/components/alert-dialog.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface LarkAlertDialogProps {
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+export interface LarkAlertDialogProps extends Omit<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, 'title' | 'children' | 'className'> {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
     title: string;

package/dist/components/alert-dialog.js

@@ -4,8 +4,13 @@ import * as React from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cn } from '../lib/utils.js';
 import { LarkButton } from './button.js';
-function LarkAlertDialogBase({ open, onOpenChange, title, description, confirmLabel, cancelLabel = 'Hủy', onConfirm, isPending, children, className, }, ref) {
-    return (_jsx(AlertDialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed inset-0 bg-[var(--overlay-mask)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out" }), _jsxs(AlertDialogPrimitive.Content, { ref: ref, ...(description ? {} : { 'aria-describedby': undefined }), onEscapeKeyDown: isPending ? (event) => event.preventDefault() : undefined, className: cn('fixed left-1/2 top-1/2 w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-brand-primary p-5 shadow-[var(--shadow-overlay)] outline-none data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out md:w-full md:max-w-md md:p-6', className), children: [_jsx(AlertDialogPrimitive.Title, { className: "text-base font-medium text-lark-n900 md:text-[17px]", children: title }), description ? (_jsx(AlertDialogPrimitive.Description, { className: "mt-3 text-sm text-lark-n600", children: description })) : null, children ? _jsx("div", { className: "mt-3", children: children }) : null, _jsxs("div", { className: "mt-3 flex justify-end gap-3 border-t border-[color-mix(in_srgb,var(--color-lark-n900)_15%,transparent)] px-5 py-4 md:px-6 -mx-5 -mb-5 md:-mx-6 md:-mb-6", children: [_jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: _jsx(LarkButton, { type: "button", disabled: isPending, children: cancelLabel }) }), _jsx(AlertDialogPrimitive.Action, { asChild: true, children: _jsx(LarkButton, { type: "button", variant: "primary", isPending: isPending, onClick: onConfirm, children: confirmLabel }) })] })] })] }) }));
+function LarkAlertDialogBase({ open, onOpenChange, title, description, confirmLabel, cancelLabel = 'Hủy', onConfirm, isPending, children, className, onEscapeKeyDown, ...props }, ref) {
+    return (_jsx(AlertDialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: _jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Overlay, { className: "fixed inset-0 bg-[var(--overlay-mask)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out" }), _jsxs(AlertDialogPrimitive.Content, { ref: ref, ...(description ? {} : { 'aria-describedby': undefined }), onEscapeKeyDown: isPending
+                        ? (event) => {
+                            event.preventDefault();
+                            onEscapeKeyDown?.(event);
+                        }
+                        : onEscapeKeyDown, className: cn('fixed left-1/2 top-1/2 w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-brand-primary p-5 shadow-[var(--shadow-overlay)] outline-none data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out md:w-full md:max-w-md md:p-6', className), ...props, children: [_jsx(AlertDialogPrimitive.Title, { className: "text-base font-medium text-lark-n900 md:text-[17px]", children: title }), description ? (_jsx(AlertDialogPrimitive.Description, { className: "mt-3 text-sm text-lark-n600", children: description })) : null, children ? _jsx("div", { className: "mt-3", children: children }) : null, _jsxs("div", { className: "mt-3 flex justify-end gap-3 border-t border-[color-mix(in_srgb,var(--color-lark-n900)_15%,transparent)] px-5 py-4 md:px-6 -mx-5 -mb-5 md:-mx-6 md:-mb-6", children: [_jsx(AlertDialogPrimitive.Cancel, { asChild: true, children: _jsx(LarkButton, { type: "button", disabled: isPending, children: cancelLabel }) }), _jsx(AlertDialogPrimitive.Action, { asChild: true, children: _jsx(LarkButton, { type: "button", variant: "primary", isPending: isPending, onClick: onConfirm, children: confirmLabel }) })] })] })] }) }));
 }
 const LarkAlertDialogInner = React.forwardRef(LarkAlertDialogBase);
 LarkAlertDialogInner.displayName = 'LarkAlertDialog';

package/dist/components/checkbox.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-export interface LarkCheckboxProps {
-    label: string;
+import * as Checkbox from '@radix-ui/react-checkbox';
+export interface LarkCheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof Checkbox.Root>, 'checked' | 'onCheckedChange' | 'disabled' | 'className'> {
+    label?: string;
     checked?: boolean | 'indeterminate';
     onCheckedChange?: (checked: boolean | 'indeterminate') => void;
     disabled?: boolean;
     className?: string;
+    controlClassName?: string;
 }
 declare const LarkCheckboxInner: React.ForwardRefExoticComponent<LarkCheckboxProps & React.RefAttributes<HTMLButtonElement>>;
 export { LarkCheckboxInner as LarkCheckbox };

package/dist/components/checkbox.js

@@ -5,10 +5,14 @@ import * as Checkbox from '@radix-ui/react-checkbox';
 import * as Label from '@radix-ui/react-label';
 import { Check, Minus } from 'lucide-react';
 import { cn } from '../lib/utils.js';
-function LarkCheckboxBase({ label, checked, onCheckedChange, disabled, className }, ref) {
+function LarkCheckboxBase({ label, checked, onCheckedChange, disabled, className, controlClassName, id, ...props }, ref) {
     const autoId = React.useId();
+    const checkboxId = id ?? autoId;
     const indeterminate = checked === 'indeterminate';
-    return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [_jsx(Checkbox.Root, { ref: ref, id: autoId, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: "size-4 shrink-0 rounded-[4px] border border-lark-n500 bg-brand-primary focus-visible:focus-ring transition-colors duration-fast ease-base data-[state=checked]:border-brand-secondary data-[state=checked]:bg-brand-secondary data-[state=indeterminate]:border-brand-secondary data-[state=indeterminate]:bg-brand-secondary disabled:cursor-not-allowed disabled:opacity-50", children: _jsx(Checkbox.Indicator, { className: "flex items-center justify-center", children: indeterminate ? (_jsx(Minus, { className: "size-3 text-white", "aria-hidden": "true" })) : (_jsx(Check, { className: "size-3 text-white", "aria-hidden": "true" })) }) }), _jsx(Label.Root, { htmlFor: autoId, className: "text-sm text-lark-n900", children: label })] }));
+    const root = (_jsx(Checkbox.Root, { ref: ref, id: checkboxId, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: cn('size-4 shrink-0 rounded-[4px] border border-lark-n500 bg-brand-primary focus-visible:focus-ring transition-colors duration-fast ease-base data-[state=checked]:border-brand-secondary data-[state=checked]:bg-brand-secondary data-[state=indeterminate]:border-brand-secondary data-[state=indeterminate]:bg-brand-secondary disabled:cursor-not-allowed disabled:opacity-50', controlClassName), ...props, children: _jsx(Checkbox.Indicator, { className: "flex items-center justify-center", children: indeterminate ? (_jsx(Minus, { className: "size-3 text-white", "aria-hidden": "true" })) : (_jsx(Check, { className: "size-3 text-white", "aria-hidden": "true" })) }) }));
+    if (!label)
+        return _jsx("div", { className: className, children: root });
+    return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [root, _jsx(Label.Root, { htmlFor: checkboxId, className: "text-sm text-lark-n900", children: label })] }));
 }
 const LarkCheckboxInner = React.forwardRef(LarkCheckboxBase);
 LarkCheckboxInner.displayName = 'LarkCheckbox';

package/dist/components/dialog.d.ts

@@ -1,23 +1,17 @@
 import * as React from 'react';
-export interface LarkDialogProps {
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
-    children: React.ReactNode;
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export interface LarkDialogProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root> {
 }
-export interface LarkDialogContentProps {
+export interface LarkDialogContentProps extends Omit<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, 'title'> {
     title: string;
     description?: string;
-    className?: string;
-    children?: React.ReactNode;
 }
-export interface LarkDialogFooterProps {
-    children: React.ReactNode;
-    className?: string;
+export interface LarkDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-declare function LarkDialogRoot({ open, onOpenChange, children }: LarkDialogProps): React.JSX.Element;
-declare function LarkDialogFooter({ children, className }: LarkDialogFooterProps): React.JSX.Element;
+declare function LarkDialogRoot({ children, ...props }: LarkDialogProps): React.JSX.Element;
+declare function LarkDialogFooter({ children, className, ...props }: LarkDialogFooterProps): React.JSX.Element;
 export declare const LarkDialog: typeof LarkDialogRoot & {
-    Content: React.FC<LarkDialogContentProps>;
+    Content: React.ForwardRefExoticComponent<LarkDialogContentProps & React.RefAttributes<HTMLDivElement>>;
     Footer: typeof LarkDialogFooter;
 };
 export {};

package/dist/components/dialog.js

@@ -3,16 +3,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cn } from '../lib/utils.js';
-function LarkDialogRoot({ open, onOpenChange, children }) {
-    return (_jsx(DialogPrimitive.Root, { open: open, onOpenChange: onOpenChange, children: children }));
+function LarkDialogRoot({ children, ...props }) {
+    return _jsx(DialogPrimitive.Root, { ...props, children: children });
 }
-function LarkDialogContentBase({ title, description, className, children }, ref) {
-    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 bg-[var(--overlay-mask)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out" }), _jsxs(DialogPrimitive.Content, { ref: ref, ...(description ? {} : { 'aria-describedby': undefined }), className: cn('fixed left-1/2 top-1/2 w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-brand-primary p-5 shadow-[var(--shadow-overlay)] outline-none data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out md:w-full md:max-w-md md:p-6', className), children: [_jsx(DialogPrimitive.Title, { className: "text-base font-medium text-lark-n900 md:text-[17px]", children: title }), description ? (_jsx(DialogPrimitive.Description, { className: "mt-3 text-sm text-lark-n600", children: description })) : null, children] })] }));
+function LarkDialogContentBase({ title, description, className, children, ...props }, ref) {
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { className: "fixed inset-0 bg-[var(--overlay-mask)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out" }), _jsxs(DialogPrimitive.Content, { ref: ref, ...(description ? {} : { 'aria-describedby': undefined }), className: cn('fixed left-1/2 top-1/2 w-[calc(100vw-2.5rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl bg-brand-primary p-5 shadow-[var(--shadow-overlay)] outline-none data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out md:w-full md:max-w-md md:p-6', className), ...props, children: [_jsx(DialogPrimitive.Title, { className: "text-base font-medium text-lark-n900 md:text-[17px]", children: title }), description ? (_jsx(DialogPrimitive.Description, { className: "mt-3 text-sm text-lark-n600", children: description })) : null, children] })] }));
 }
 const LarkDialogContentInner = React.forwardRef(LarkDialogContentBase);
 LarkDialogContentInner.displayName = 'LarkDialog.Content';
-function LarkDialogFooter({ children, className }) {
-    return (_jsx("div", { className: cn('flex justify-end gap-3 border-t border-[color-mix(in_srgb,var(--color-lark-n900)_15%,transparent)] px-5 py-4 md:px-6 -mx-5 -mb-5 md:-mx-6 md:-mb-6', className), children: children }));
+function LarkDialogFooter({ children, className, ...props }) {
+    return (_jsx("div", { className: cn('flex justify-end gap-3 border-t border-[color-mix(in_srgb,var(--color-lark-n900)_15%,transparent)] px-5 py-4 md:px-6 -mx-5 -mb-5 md:-mx-6 md:-mb-6', className), ...props, children: children }));
 }
 export const LarkDialog = Object.assign(LarkDialogRoot, {
     Content: LarkDialogContentInner,

package/dist/components/dropdown-menu.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
-export interface LarkDropdownMenuProps {
+import * as Menu from '@radix-ui/react-menu';
+export interface LarkDropdownMenuProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Content>, 'children' | 'className'> {
     trigger: React.ReactNode;
     align?: 'start' | 'center' | 'end';
     children: React.ReactNode;
     className?: string;
 }
-export interface LarkDropdownMenuItemProps {
+export interface LarkDropdownMenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof Menu.Item>, 'onSelect' | 'disabled' | 'className'> {
     value: string;
     onSelect?: (value: string) => void;
     danger?: boolean;
@@ -13,12 +14,19 @@ export interface LarkDropdownMenuItemProps {
     /** Mục đang chọn: icon check + chữ brand (nền trắng theo Figma). Radix Menu.Item không sinh data-state=checked nên dùng prop thay thế. */
     checked?: boolean;
     children: React.ReactNode;
-}
-export interface LarkDropdownMenuSeparatorProps {
     className?: string;
 }
-export declare const LarkDropdownMenu: React.FC<LarkDropdownMenuProps> & {
-    Item: React.FC<LarkDropdownMenuItemProps>;
-    ItemIndicator: React.FC;
-    Separator: React.FC<LarkDropdownMenuSeparatorProps>;
+declare const LarkDropdownMenuRoot: React.ForwardRefExoticComponent<LarkDropdownMenuProps & React.RefAttributes<HTMLDivElement>>;
+declare function LarkDropdownMenuItem({ value, onSelect, danger, disabled, checked, children, className, ...props }: LarkDropdownMenuItemProps): React.JSX.Element;
+declare const LarkDropdownMenuItemIndicator: React.FC<{
+    children?: React.ReactNode;
+}>;
+export interface LarkDropdownMenuSeparatorProps extends React.ComponentPropsWithoutRef<typeof Menu.Separator> {
+}
+declare const LarkDropdownMenuSeparator: React.ForwardRefExoticComponent<LarkDropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const LarkDropdownMenu: typeof LarkDropdownMenuRoot & {
+    Item: typeof LarkDropdownMenuItem;
+    ItemIndicator: typeof LarkDropdownMenuItemIndicator;
+    Separator: typeof LarkDropdownMenuSeparator;
 };
+export {};

package/dist/components/dropdown-menu.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import * as Menu from '@radix-ui/react-menu';
 import { Check } from 'lucide-react';
 import { cn } from '../lib/utils.js';
-function LarkDropdownMenuRootBase({ trigger, align = 'start', children, className }, ref) {
+function LarkDropdownMenuRootBase({ trigger, align = 'start', children, className, ...props }, ref) {
     // @radix-ui/react-menu (gốc headless) không export Trigger như
     // @radix-ui/react-dropdown-menu; trigger gắn trực tiếp vào children qua
     // Menu.Anchor asChild + controlled open, hành vi tương đương Trigger asChild.
@@ -40,17 +40,17 @@ function LarkDropdownMenuRootBase({ trigger, align = 'start', children, classNam
             },
         })
         : (_jsx("span", { ...triggerProps, children: trigger }));
-    return (_jsxs(Menu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(Menu.Anchor, { asChild: true, children: triggerNode }), _jsx(Menu.Portal, { children: _jsx(Menu.Content, { ref: ref, align: align, className: cn('min-w-[200px] rounded-lg border border-lark-n200 bg-brand-primary p-1 shadow-[var(--shadow-overlay)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out', className), children: children }) })] }));
+    return (_jsxs(Menu.Root, { open: open, onOpenChange: setOpen, modal: false, children: [_jsx(Menu.Anchor, { asChild: true, children: triggerNode }), _jsx(Menu.Portal, { children: _jsx(Menu.Content, { ref: ref, align: align, className: cn('min-w-[200px] rounded-lg border border-lark-n200 bg-brand-primary p-1 shadow-[var(--shadow-overlay)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out', className), ...props, children: children }) })] }));
 }
 const LarkDropdownMenuRoot = React.forwardRef(LarkDropdownMenuRootBase);
 LarkDropdownMenuRoot.displayName = 'LarkDropdownMenu';
-function LarkDropdownMenuItem({ value, onSelect, danger, disabled, checked, children }) {
-    return (_jsxs(Menu.Item, { disabled: disabled, onSelect: () => onSelect?.(value), "data-checked": checked ? 'true' : undefined, className: cn('flex h-8 items-center gap-2 rounded-lg px-3 text-sm outline-none data-[highlighted]:bg-lark-n100', checked && 'font-medium text-brand-link', danger && 'text-lark-danger'), children: [checked ? _jsx(Check, { className: "size-4 shrink-0" }) : _jsx("span", { className: "size-4 shrink-0", "aria-hidden": true }), children] }));
+function LarkDropdownMenuItem({ value, onSelect, danger, disabled, checked, children, className, ...props }) {
+    return (_jsxs(Menu.Item, { disabled: disabled, onSelect: () => onSelect?.(value), "data-checked": checked ? 'true' : undefined, className: cn('flex h-8 items-center gap-2 rounded-lg px-3 text-sm outline-none data-[highlighted]:bg-lark-n100', checked && 'font-medium text-brand-link', danger && 'text-lark-danger', className), ...props, children: [checked ? _jsx(Check, { className: "size-4 shrink-0" }) : _jsx("span", { className: "size-4 shrink-0", "aria-hidden": true }), children] }));
 }
 // Chỉ dùng được bên trong Menu.CheckboxItem/RadioItem (nơi Radix sinh
 // data-state=checked); trong LarkDropdownMenu.Item dùng prop checked thay thế.
 const LarkDropdownMenuItemIndicator = ({ children }) => (_jsx(Menu.ItemIndicator, { children: children }));
-const LarkDropdownMenuSeparatorBase = ({ className }, ref) => (_jsx(Menu.Separator, { ref: ref, className: cn('h-px bg-lark-n200', className) }));
+const LarkDropdownMenuSeparatorBase = ({ className, ...props }, ref) => _jsx(Menu.Separator, { ref: ref, className: cn('h-px bg-lark-n200', className), ...props });
 const LarkDropdownMenuSeparator = React.forwardRef(LarkDropdownMenuSeparatorBase);
 LarkDropdownMenuSeparator.displayName = 'LarkDropdownMenu.Separator';
 export const LarkDropdownMenu = Object.assign(LarkDropdownMenuRoot, {

package/dist/components/empty-state.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
-export interface LarkEmptyStateProps {
+export interface LarkEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
     icon?: React.ReactNode;
     title: string;
     description?: string;
     action?: React.ReactNode;
-    className?: string;
 }
-export declare function LarkEmptyState({ icon, title, description, action, className }: LarkEmptyStateProps): React.JSX.Element;
+export declare function LarkEmptyState({ icon, title, description, action, className, ...props }: LarkEmptyStateProps): React.JSX.Element;

package/dist/components/empty-state.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
-export function LarkEmptyState({ icon, title, description, action, className }) {
-    return (_jsxs("div", { className: cn('flex flex-col items-center gap-2 py-10 text-center text-sm text-lark-n600', className), children: [icon && _jsx("span", { className: "text-lark-n400 [&_svg]:size-6", children: icon }), _jsx("p", { className: "font-medium text-lark-n700", children: title }), description && _jsx("p", { className: "text-lark-n600", children: description }), action && _jsx("div", { className: "mt-2", children: action })] }));
+export function LarkEmptyState({ icon, title, description, action, className, ...props }) {
+    return (_jsxs("div", { className: cn('flex flex-col items-center gap-2 py-10 text-center text-sm text-lark-n600', className), ...props, children: [icon && _jsx("span", { className: "text-lark-n400 [&_svg]:size-6", children: icon }), _jsx("p", { className: "font-medium text-lark-n700", children: title }), description && _jsx("p", { className: "text-lark-n600", children: description }), action && _jsx("div", { className: "mt-2", children: action })] }));
 }

package/dist/components/pagination.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 export declare const DEFAULT_PAGE_SIZES: number[];
 export type PageWindowItem = number | 'ellipsis';
 export declare function pageWindow(page: number, totalPages: number): PageWindowItem[];
-export interface LarkPaginationProps {
+export interface LarkPaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     page: number;
     total: number;
     pageSize: number;

package/dist/components/pagination.js

@@ -20,10 +20,10 @@ export function pageWindow(page, totalPages) {
     return [1, 'ellipsis', page - 1, page, page + 1, 'ellipsis', totalPages];
 }
 const pageButtonClass = 'inline-flex size-7 items-center justify-center rounded-lg text-sm text-brand-link hover:bg-lark-n50';
-function LarkPaginationBase({ page, total, pageSize, onPageChange, pageSizes = DEFAULT_PAGE_SIZES, onPageSizeChange, isLoading, className, }, ref) {
+function LarkPaginationBase({ page, total, pageSize, onPageChange, pageSizes = DEFAULT_PAGE_SIZES, onPageSizeChange, isLoading, className, ...props }, ref) {
     const totalPages = Math.max(1, Math.ceil(total / pageSize));
     const items = pageWindow(page, totalPages);
-    return (_jsxs("div", { ref: ref, className: cn('flex flex-wrap items-center justify-end gap-4', className), children: [isLoading ? _jsx(LarkSpinner, { size: "sm", label: "\u0110ang t\u1EA3i d\u1EEF li\u1EC7u" }) : null, _jsxs("nav", { "aria-label": "Ph\u00E2n trang", className: "flex items-center gap-1", children: [_jsx(LarkButton, { isIconOnly: true, variant: "ghost", size: "sm", "aria-label": "Trang tr\u01B0\u1EDBc", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeft, { className: "size-4", strokeWidth: 2.4 }) }), items.map((item, index) => item === 'ellipsis' ? (_jsx("span", { "aria-hidden": "true", className: "px-1 text-lark-n400", children: "\u2026" }, `gap-${index}`)) : (_jsx("button", { type: "button", "aria-label": `Trang ${item}`, "aria-current": item === page ? 'page' : undefined, onClick: () => onPageChange(item), className: cn(pageButtonClass, item === page && 'bg-brand-secondary font-semibold text-white'), children: item }, item))), _jsx(LarkButton, { isIconOnly: true, variant: "ghost", size: "sm", "aria-label": "Trang sau", disabled: page >= totalPages, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRight, { className: "size-4", strokeWidth: 2.4 }) })] }), _jsx(LarkSelect, { ariaLabel: "S\u1ED1 d\u00F2ng m\u1ED7i trang", options: pageSizes.map((s) => ({ value: String(s), label: String(s) })), value: String(pageSize), onValueChange: (v) => onPageSizeChange?.(Number(v)), className: "w-20" })] }));
+    return (_jsxs("div", { ref: ref, className: cn('flex flex-wrap items-center justify-end gap-4', className), ...props, children: [isLoading ? _jsx(LarkSpinner, { size: "sm", label: "\u0110ang t\u1EA3i d\u1EEF li\u1EC7u" }) : null, _jsxs("nav", { "aria-label": "Ph\u00E2n trang", className: "flex items-center gap-1", children: [_jsx(LarkButton, { isIconOnly: true, variant: "ghost", size: "sm", "aria-label": "Trang tr\u01B0\u1EDBc", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: _jsx(ChevronLeft, { className: "size-4", strokeWidth: 2.4 }) }), items.map((item, index) => item === 'ellipsis' ? (_jsx("span", { "aria-hidden": "true", className: "px-1 text-lark-n400", children: "\u2026" }, `gap-${index}`)) : (_jsx("button", { type: "button", "aria-label": `Trang ${item}`, "aria-current": item === page ? 'page' : undefined, onClick: () => onPageChange(item), className: cn(pageButtonClass, item === page && 'bg-brand-secondary font-semibold text-white'), children: item }, item))), _jsx(LarkButton, { isIconOnly: true, variant: "ghost", size: "sm", "aria-label": "Trang sau", disabled: page >= totalPages, onClick: () => onPageChange(page + 1), children: _jsx(ChevronRight, { className: "size-4", strokeWidth: 2.4 }) })] }), _jsx(LarkSelect, { ariaLabel: "S\u1ED1 d\u00F2ng m\u1ED7i trang", options: pageSizes.map((s) => ({ value: String(s), label: String(s) })), value: String(pageSize), onValueChange: (v) => onPageSizeChange?.(Number(v)), className: "w-20" })] }));
 }
 const LarkPaginationInner = React.forwardRef(LarkPaginationBase);
 LarkPaginationInner.displayName = 'LarkPagination';

package/dist/components/radio-group.d.ts

@@ -1,22 +1,26 @@
 import * as React from 'react';
+import * as RadioGroup from '@radix-ui/react-radio-group';
 export interface LarkRadioOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
-export interface LarkRadioGroupProps {
+export interface LarkRadioGroupProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroup.Root>, 'value' | 'onValueChange' | 'className' | 'children'> {
     label?: string;
-    options: LarkRadioOption[];
+    options?: LarkRadioOption[];
     value?: string;
     onValueChange?: (value: string) => void;
     className?: string;
+    /** Thay cho `options` khi cần tự bố trí item (dùng `LarkRadioGroup.Item`). */
+    children?: React.ReactNode;
 }
-export interface LarkRadioItemProps {
+export interface LarkRadioItemProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroup.Item>, 'value' | 'disabled' | 'className' | 'id'> {
     value: string;
     label: string;
     disabled?: boolean;
     id?: string;
     className?: string;
+    controlClassName?: string;
 }
 declare const LarkRadioItemInner: React.ForwardRefExoticComponent<LarkRadioItemProps & React.RefAttributes<HTMLButtonElement>>;
 declare const LarkRadioGroupRoot: React.ForwardRefExoticComponent<LarkRadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/radio-group.js

@@ -4,17 +4,19 @@ import * as React from 'react';
 import * as Label from '@radix-ui/react-label';
 import * as RadioGroup from '@radix-ui/react-radio-group';
 import { cn } from '../lib/utils.js';
-function LarkRadioItemBase({ value, label, disabled, id, className }, ref) {
+function LarkRadioItemBase({ value, label, disabled, id, className, controlClassName, ...props }, ref) {
     const autoId = React.useId();
     const itemId = id ?? `${autoId}-${value}`;
-    return (_jsxs("span", { className: cn('flex items-center gap-2', className), children: [_jsx(RadioGroup.Item, { ref: ref, id: itemId, value: value, disabled: disabled, className: "size-4 shrink-0 rounded-full border border-lark-n500 bg-brand-primary focus-visible:focus-ring transition-colors duration-fast ease-base data-[state=checked]:border-[5px] data-[state=checked]:border-brand-secondary disabled:cursor-not-allowed disabled:opacity-50" }), _jsx(Label.Root, { htmlFor: itemId, className: "text-sm text-lark-n900", children: label })] }));
+    return (_jsxs("span", { className: cn('flex items-center gap-2', className), children: [_jsx(RadioGroup.Item, { ref: ref, id: itemId, value: value, disabled: disabled, className: cn('size-4 shrink-0 rounded-full border border-lark-n500 bg-brand-primary focus-visible:focus-ring transition-colors duration-fast ease-base data-[state=checked]:border-[5px] data-[state=checked]:border-brand-secondary disabled:cursor-not-allowed disabled:opacity-50', controlClassName), ...props }), _jsx(Label.Root, { htmlFor: itemId, className: "text-sm text-lark-n900", children: label })] }));
 }
 const LarkRadioItemInner = React.forwardRef(LarkRadioItemBase);
 LarkRadioItemInner.displayName = 'LarkRadioGroup.Item';
-function LarkRadioGroupBase({ label, options, value, onValueChange, className }, ref) {
+function LarkRadioGroupBase({ label, options, value, onValueChange, className, id, children, ...props }, ref) {
     const autoId = React.useId();
     const labelId = label ? `${autoId}-label` : undefined;
-    return (_jsxs("div", { className: cn('flex flex-col', className), children: [label ? (_jsx("span", { id: labelId, className: "mb-1 text-sm text-lark-n900", children: label })) : null, _jsx(RadioGroup.Root, { ref: ref, value: value, onValueChange: onValueChange, "aria-labelledby": labelId, className: "flex flex-col gap-2", children: options.map((option) => (_jsx(LarkRadioItemInner, { value: option.value, label: option.label, disabled: option.disabled, id: `${autoId}-${option.value}` }, option.value))) })] }));
+    return (_jsxs("div", { className: cn('flex flex-col', className), children: [label ? (_jsx("span", { id: labelId, className: "mb-1 text-sm text-lark-n900", children: label })) : null, _jsx(RadioGroup.Root, { ref: ref, id: id, value: value, onValueChange: onValueChange, "aria-labelledby": labelId, className: "flex flex-col gap-2", ...props, children: options
+                    ? options.map((option) => (_jsx(LarkRadioItemInner, { value: option.value, label: option.label, disabled: option.disabled, id: `${autoId}-${option.value}` }, option.value)))
+                    : children })] }));
 }
 const LarkRadioGroupRoot = React.forwardRef(LarkRadioGroupBase);
 LarkRadioGroupRoot.displayName = 'LarkRadioGroup';

package/dist/components/select.d.ts

@@ -1,19 +1,23 @@
 import * as React from 'react';
+import * as Select from '@radix-ui/react-select';
 export interface LarkSelectOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
-export interface LarkSelectProps {
+export interface LarkSelectProps extends Omit<React.ComponentPropsWithoutRef<typeof Select.Trigger>, 'value' | 'className' | 'disabled'> {
     label?: string;
     options: LarkSelectOption[];
     value?: string;
     onValueChange?: (v: string) => void;
+    onOpenChange?: (open: boolean) => void;
     placeholder?: string;
     disabled?: boolean;
     isInvalid?: boolean;
     className?: string;
     ariaLabel?: string;
+    /** Class cho wrapper ngoài (label + trigger). */
+    containerClassName?: string;
 }
 declare const LarkSelectInner: React.ForwardRefExoticComponent<LarkSelectProps & React.RefAttributes<HTMLButtonElement>>;
 export { LarkSelectInner as LarkSelect };

package/dist/components/select.js

@@ -4,9 +4,10 @@ import * as React from 'react';
 import * as Select from '@radix-ui/react-select';
 import { Check, ChevronDown } from 'lucide-react';
 import { cn } from '../lib/utils.js';
-function LarkSelectBase({ label, options, value, onValueChange, placeholder, disabled, isInvalid, className, ariaLabel }, ref) {
+function LarkSelectBase({ label, options, value, onValueChange, onOpenChange, placeholder, disabled, isInvalid, className, ariaLabel, containerClassName, id, ...props }, ref) {
     const autoId = React.useId();
-    return (_jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [label ? (_jsx("label", { htmlFor: autoId, className: "text-sm text-lark-n700", children: label })) : null, _jsxs(Select.Root, { value: value, onValueChange: onValueChange, disabled: disabled, children: [_jsxs(Select.Trigger, { ref: ref, id: autoId, "aria-label": ariaLabel, "aria-invalid": isInvalid || undefined, className: cn('flex h-8 min-h-8 w-full items-center justify-between gap-2 rounded-lg border border-lark-n300 bg-brand-primary px-3 text-sm focus-visible:focus-ring transition-colors duration-fast ease-base hover:border-brand-secondary focus-visible:border-[var(--field-border-focus)] disabled:cursor-not-allowed disabled:bg-lark-n50 disabled:text-lark-n400', isInvalid && 'border-lark-danger', className), children: [_jsx(Select.Value, { placeholder: placeholder, className: "data-[placeholder]:text-lark-n600" }), _jsx(Select.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "size-4 text-lark-n500" }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { position: "popper", className: "max-h-[min(20rem,60vh)] min-w-[var(--radix-select-trigger-width)] overflow-y-auto rounded-lg border border-lark-n200 bg-brand-primary p-1 shadow-[var(--shadow-overlay)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out", children: _jsx(Select.Viewport, { children: options.map((opt) => (_jsxs(Select.Item, { value: opt.value, disabled: opt.disabled, className: "flex h-8 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 text-sm focus-visible:focus-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-lark-n100 data-[state=checked]:font-medium data-[state=checked]:text-brand-link", children: [_jsx(Select.ItemText, { children: opt.label }), _jsx(Select.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) })] }, opt.value))) }) }) })] })] }));
+    const selectId = id ?? autoId;
+    return (_jsxs("div", { className: cn('flex w-full flex-col gap-1.5', containerClassName), children: [label ? (_jsx("label", { htmlFor: selectId, className: "text-sm text-lark-n700", children: label })) : null, _jsxs(Select.Root, { value: value, onValueChange: onValueChange, onOpenChange: onOpenChange, disabled: disabled, children: [_jsxs(Select.Trigger, { ref: ref, id: selectId, "aria-label": ariaLabel, "aria-invalid": isInvalid || undefined, className: cn('flex h-8 min-h-8 w-full items-center justify-between gap-2 rounded-lg border border-lark-n300 bg-brand-primary px-3 text-sm focus-visible:focus-ring transition-colors duration-fast ease-base hover:border-brand-secondary focus-visible:border-[var(--field-border-focus)] disabled:cursor-not-allowed disabled:bg-lark-n50 disabled:text-lark-n400', isInvalid && 'border-lark-danger', className), ...props, children: [_jsx(Select.Value, { placeholder: placeholder, className: "data-[placeholder]:text-lark-n600" }), _jsx(Select.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "size-4 text-lark-n500" }) })] }), _jsx(Select.Portal, { children: _jsx(Select.Content, { position: "popper", className: "max-h-[min(20rem,60vh)] min-w-[var(--radix-select-trigger-width)] overflow-y-auto rounded-lg border border-lark-n200 bg-brand-primary p-1 shadow-[var(--shadow-overlay)] data-[state=open]:anim-overlay-in data-[state=closed]:anim-overlay-out", children: _jsx(Select.Viewport, { children: options.map((opt) => (_jsxs(Select.Item, { value: opt.value, disabled: opt.disabled, className: "flex h-8 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 text-sm focus-visible:focus-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[highlighted]:bg-lark-n100 data-[state=checked]:font-medium data-[state=checked]:text-brand-link", children: [_jsx(Select.ItemText, { children: opt.label }), _jsx(Select.ItemIndicator, { children: _jsx(Check, { className: "size-4" }) })] }, opt.value))) }) }) })] })] }));
 }
 const LarkSelectInner = React.forwardRef(LarkSelectBase);
 LarkSelectInner.displayName = 'LarkSelect';

package/dist/components/spinner.d.ts

@@ -1,7 +1,8 @@
 import * as React from 'react';
-export interface LarkSpinnerProps {
+import { Loader2 } from 'lucide-react';
+export interface LarkSpinnerProps extends Omit<React.ComponentPropsWithoutRef<typeof Loader2>, 'className'> {
     size?: 'sm' | 'md';
     label?: string;
     className?: string;
 }
-export declare function LarkSpinner({ size, label, className }: LarkSpinnerProps): React.JSX.Element;
+export declare function LarkSpinner({ size, label, className, ...props }: LarkSpinnerProps): React.JSX.Element;

package/dist/components/spinner.js

@@ -6,9 +6,9 @@ const spinnerSizes = {
     md: 'size-6',
 };
 const IS_DEV = typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production';
-export function LarkSpinner({ size = 'md', label, className }) {
+export function LarkSpinner({ size = 'md', label, className, ...props }) {
     if (IS_DEV && !label) {
         console.warn('LarkSpinner: aria-label ("label" prop) bắt buộc');
     }
-    return (_jsx(Loader2, { role: "status", "aria-label": label, className: cn('animate-spin text-lark-n500', spinnerSizes[size], className) }));
+    return (_jsx(Loader2, { role: "status", "aria-label": label, className: cn('animate-spin text-lark-n500', spinnerSizes[size], className), ...props }));
 }

package/dist/components/switch.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
-export interface LarkSwitchProps {
+import * as Switch from '@radix-ui/react-switch';
+export interface LarkSwitchProps extends Omit<React.ComponentPropsWithoutRef<typeof Switch.Root>, 'checked' | 'onCheckedChange' | 'disabled' | 'className'> {
     label?: string;
     checked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     disabled?: boolean;
     className?: string;
+    controlClassName?: string;
 }
 declare const LarkSwitchInner: React.ForwardRefExoticComponent<LarkSwitchProps & React.RefAttributes<HTMLButtonElement>>;
 export { LarkSwitchInner as LarkSwitch };

package/dist/components/switch.js

@@ -4,12 +4,13 @@ import * as React from 'react';
 import * as Label from '@radix-ui/react-label';
 import * as Switch from '@radix-ui/react-switch';
 import { cn } from '../lib/utils.js';
-function LarkSwitchBase({ label, checked, onCheckedChange, disabled, className }, ref) {
+function LarkSwitchBase({ label, checked, onCheckedChange, disabled, className, controlClassName, id, ...props }, ref) {
     const autoId = React.useId();
-    const trigger = (_jsx(Switch.Root, { ref: ref, id: autoId, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: "h-5 w-9 shrink-0 rounded-full bg-lark-n300 focus-visible:focus-ring transition-colors duration-fast ease-base data-[state=checked]:bg-brand-secondary disabled:cursor-not-allowed disabled:opacity-50", children: _jsx(Switch.Thumb, { className: "block size-4 rounded-full bg-white shadow-sm transition-transform duration-fast ease-base data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5" }) }));
+    const switchId = id ?? autoId;
+    const trigger = (_jsx(Switch.Root, { ref: ref, id: switchId, checked: checked, onCheckedChange: onCheckedChange, disabled: disabled, className: cn('h-5 w-9 shrink-0 rounded-full bg-lark-n300 focus-visible:focus-ring transition-colors duration-fast ease-base data-[state=checked]:bg-brand-secondary disabled:cursor-not-allowed disabled:opacity-50', controlClassName), ...props, children: _jsx(Switch.Thumb, { className: "block size-4 rounded-full bg-white shadow-sm transition-transform duration-fast ease-base data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0.5" }) }));
     if (!label)
         return _jsx("div", { className: className, children: trigger });
-    return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [trigger, _jsx(Label.Root, { htmlFor: autoId, className: "text-sm text-lark-n900", children: label })] }));
+    return (_jsxs("div", { className: cn('flex items-center gap-2', className), children: [trigger, _jsx(Label.Root, { htmlFor: switchId, className: "text-sm text-lark-n900", children: label })] }));
 }
 const LarkSwitchInner = React.forwardRef(LarkSwitchBase);
 LarkSwitchInner.displayName = 'LarkSwitch';

package/dist/components/table.d.ts

@@ -6,31 +6,33 @@ export interface LarkColumn<T> {
     align?: 'left' | 'right' | 'center';
     cell?: (row: T) => React.ReactNode;
     pin?: 'right';
+    /** Class áp cho cả `th` và `td` của cột này. */
+    className?: string;
+    /** Class riêng cho `th` (thắng `className`). */
+    headerClassName?: string;
 }
-export interface LarkTableProps<T> {
+export interface LarkTableProps<T> extends Omit<React.TableHTMLAttributes<HTMLTableElement>, 'children' | 'className' | 'rowKey'> {
     columns: LarkColumn<T>[];
     rows: T[];
     rowKey: (row: T) => string;
     isLoading?: boolean;
     emptyState?: React.ReactNode;
     className?: string;
+    /** React 19: ref là prop thường nên gắn được vào <table>. */
+    ref?: React.Ref<HTMLTableElement>;
+    onRowClick?: (row: T, index: number) => void;
+    rowClassName?: (row: T, index: number) => string | undefined;
 }
-export interface LarkTableWrapperProps {
-    children: React.ReactNode;
-    className?: string;
+export interface LarkTableWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-export declare function LarkTableWrapper({ children, className }: LarkTableWrapperProps): React.JSX.Element;
-export interface LarkTableFooterProps {
-    children: React.ReactNode;
-    className?: string;
+export declare function LarkTableWrapper({ children, className, ...props }: LarkTableWrapperProps): React.JSX.Element;
+export interface LarkTableFooterProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-export declare function LarkTableFooter({ children, className }: LarkTableFooterProps): React.JSX.Element;
-export interface LarkTruncatedCellProps {
-    children: React.ReactNode;
-    className?: string;
+export declare function LarkTableFooter({ children, className, ...props }: LarkTableFooterProps): React.JSX.Element;
+export interface LarkTruncatedCellProps extends React.HTMLAttributes<HTMLDivElement> {
     title?: string;
 }
-export declare function LarkTruncatedCell({ children, className, title }: LarkTruncatedCellProps): React.JSX.Element;
+export declare function LarkTruncatedCell({ children, className, title, ...props }: LarkTruncatedCellProps): React.JSX.Element;
 type LarkTableComponent = (<T>(props: LarkTableProps<T>) => React.JSX.Element) & {
     Wrapper: typeof LarkTableWrapper;
     Footer: typeof LarkTableFooter;

package/dist/components/table.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../lib/utils.js';
-export function LarkTableWrapper({ children, className }) {
-    return _jsx("div", { className: cn('min-h-0 flex-1 overflow-x-auto', className), children: children });
+export function LarkTableWrapper({ children, className, ...props }) {
+    return (_jsx("div", { className: cn('min-h-0 flex-1 overflow-x-auto', className), ...props, children: children }));
 }
-export function LarkTableFooter({ children, className }) {
-    return (_jsx("div", { className: cn('flex w-full flex-wrap items-center justify-between gap-4 border-t border-lark-n200 bg-brand-primary px-3 py-2 text-sm text-lark-n600 sm:justify-end', className), children: children }));
+export function LarkTableFooter({ children, className, ...props }) {
+    return (_jsx("div", { className: cn('flex w-full flex-wrap items-center justify-between gap-4 border-t border-lark-n200 bg-brand-primary px-3 py-2 text-sm text-lark-n600 sm:justify-end', className), ...props, children: children }));
 }
 const alignClass = {
     left: 'text-left',
@@ -17,14 +17,14 @@ function defaultCell(row, key) {
         return null;
     return value;
 }
-function LarkTableInner({ columns, rows, rowKey, isLoading, emptyState, className }) {
+function LarkTableInner({ columns, rows, rowKey, isLoading, emptyState, className, ref, onRowClick, rowClassName, ...props }) {
     const showEmpty = !isLoading && rows.length === 0;
-    return (_jsx("div", { className: "min-h-0 flex-1 overflow-x-auto", children: _jsxs("table", { className: cn('w-full min-w-max border-collapse', className), "aria-busy": isLoading ? 'true' : undefined, children: [isLoading && _jsx("caption", { className: "sr-only", children: "\u0110ang t\u1EA3i" }), _jsx("thead", { children: _jsx("tr", { className: "border-b border-lark-n300", children: columns.map((col) => (_jsx("th", { scope: "col", style: col.width ? { width: col.width } : undefined, className: cn('sticky top-0 z-10 h-12 bg-brand-primary px-3 align-middle text-sm font-medium text-lark-n600', alignClass[col.align ?? 'left'], col.pin === 'right' && 'sticky right-0 z-20 min-w-px whitespace-nowrap border-s border-lark-n200'), children: col.header }, col.key))) }) }), _jsxs("tbody", { children: [isLoading &&
-                            [0, 1, 2].map((index) => (_jsx("tr", { className: "animate-pulse border-b border-lark-n200 bg-lark-n50", children: columns.map((col) => (_jsx("td", { className: cn('h-[47px] px-3 align-middle text-sm text-lark-n900', alignClass[col.align ?? 'left'], col.pin === 'right' && 'sticky right-0 z-10 min-w-px bg-brand-primary whitespace-nowrap border-s border-lark-n200'), children: _jsx("div", { className: "h-3 w-2/3 rounded bg-lark-n200" }) }, col.key))) }, `skeleton-${index}`))), showEmpty && (_jsx("tr", { className: "border-b border-lark-n200", children: _jsx("td", { colSpan: columns.length, className: "px-3 py-8 text-center text-sm text-lark-n600", children: emptyState ?? 'Không có dữ liệu' }) })), !isLoading &&
+    return (_jsx("div", { className: "min-h-0 flex-1 overflow-x-auto", children: _jsxs("table", { ref: ref, className: cn('w-full min-w-max border-collapse', className), "aria-busy": isLoading ? 'true' : undefined, ...props, children: [isLoading && _jsx("caption", { className: "sr-only", children: "\u0110ang t\u1EA3i" }), _jsx("thead", { children: _jsx("tr", { className: "border-b border-lark-n300", children: columns.map((col) => (_jsx("th", { scope: "col", style: col.width ? { width: col.width } : undefined, className: cn('sticky top-0 z-10 h-12 bg-brand-primary px-3 align-middle text-sm font-medium text-lark-n600', alignClass[col.align ?? 'left'], col.pin === 'right' && 'sticky right-0 z-20 min-w-px whitespace-nowrap border-s border-lark-n200', col.className, col.headerClassName), children: col.header }, col.key))) }) }), _jsxs("tbody", { children: [isLoading &&
+                            [0, 1, 2].map((index) => (_jsx("tr", { className: "animate-pulse border-b border-lark-n200 bg-lark-n50", children: columns.map((col) => (_jsx("td", { className: cn('h-[47px] px-3 align-middle text-sm text-lark-n900', alignClass[col.align ?? 'left'], col.pin === 'right' && 'sticky right-0 z-10 min-w-px bg-brand-primary whitespace-nowrap border-s border-lark-n200', col.className), children: _jsx("div", { className: "h-3 w-2/3 rounded bg-lark-n200" }) }, col.key))) }, `skeleton-${index}`))), showEmpty && (_jsx("tr", { className: "border-b border-lark-n200", children: _jsx("td", { colSpan: columns.length, className: "px-3 py-8 text-center text-sm text-lark-n600", children: emptyState ?? 'Không có dữ liệu' }) })), !isLoading &&
                             !showEmpty &&
-                            rows.map((row) => (_jsx("tr", { className: "border-b border-lark-n200", children: columns.map((col) => (_jsx("td", { className: cn('h-[47px] px-3 align-middle text-sm text-lark-n900', alignClass[col.align ?? 'left'], col.pin === 'right' && 'sticky right-0 z-10 min-w-px bg-brand-primary whitespace-nowrap border-s border-lark-n200'), children: col.cell ? col.cell(row) : defaultCell(row, col.key) }, col.key))) }, rowKey(row))))] })] }) }));
+                            rows.map((row, rowIndex) => (_jsx("tr", { className: cn('border-b border-lark-n200', rowClassName?.(row, rowIndex)), onClick: onRowClick ? () => onRowClick(row, rowIndex) : undefined, children: columns.map((col) => (_jsx("td", { className: cn('h-[47px] px-3 align-middle text-sm text-lark-n900', alignClass[col.align ?? 'left'], col.pin === 'right' && 'sticky right-0 z-10 min-w-px bg-brand-primary whitespace-nowrap border-s border-lark-n200', col.className), children: col.cell ? col.cell(row) : defaultCell(row, col.key) }, col.key))) }, rowKey(row))))] })] }) }));
 }
-export function LarkTruncatedCell({ children, className, title }) {
-    return (_jsx("div", { title: title, className: cn('line-clamp-2 max-w-64 cursor-pointer whitespace-normal text-start', className), children: children }));
+export function LarkTruncatedCell({ children, className, title, ...props }) {
+    return (_jsx("div", { title: title, className: cn('line-clamp-2 max-w-64 cursor-pointer whitespace-normal text-start', className), ...props, children: children }));
 }
 export const LarkTable = Object.assign(LarkTableInner, { Wrapper: LarkTableWrapper, Footer: LarkTableFooter });

package/dist/components/tabs.d.ts

@@ -1,29 +1,25 @@
 import * as React from 'react';
-export interface LarkTabsProps {
-    defaultValue?: string;
-    value?: string;
-    onValueChange?: (value: string) => void;
-    children: React.ReactNode;
-    className?: string;
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export interface LarkTabsProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
 }
-export interface LarkTabsListProps {
-    'aria-label'?: string;
-    children: React.ReactNode;
+export interface LarkTabsListProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, 'className'> {
     className?: string;
 }
-export interface LarkTabProps {
+export interface LarkTabProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, 'value' | 'className'> {
     value: string;
-    children: React.ReactNode;
-    disabled?: boolean;
     className?: string;
 }
-export interface LarkPanelProps {
+export interface LarkPanelProps extends Omit<React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, 'value' | 'className'> {
     value: string;
-    children: React.ReactNode;
     className?: string;
 }
-export declare const LarkTabs: React.FC<LarkTabsProps> & {
-    List: React.FC<LarkTabsListProps>;
-    Tab: React.FC<LarkTabProps>;
-    Panel: React.FC<LarkPanelProps>;
+declare const LarkTabsRoot: React.ForwardRefExoticComponent<LarkTabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const LarkTabsList: React.ForwardRefExoticComponent<LarkTabsListProps & React.RefAttributes<HTMLDivElement>>;
+declare const LarkTab: React.ForwardRefExoticComponent<LarkTabProps & React.RefAttributes<HTMLButtonElement>>;
+declare const LarkPanel: React.ForwardRefExoticComponent<LarkPanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const LarkTabs: typeof LarkTabsRoot & {
+    List: typeof LarkTabsList;
+    Tab: typeof LarkTab;
+    Panel: typeof LarkPanel;
 };
+export {};