lily-lark-ui 0.2.0 → 0.3.0

package/dist/components/tabs.js

@@ -3,8 +3,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from 'react';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { cn } from '../lib/utils.js';
-function LarkTabsRootBase({ defaultValue, value, onValueChange, children, className }, ref) {
-    return (_jsx(TabsPrimitive.Root, { ref: ref, defaultValue: defaultValue, value: value, onValueChange: onValueChange, className: className, children: children }));
+function LarkTabsRootBase({ className, ...props }, ref) {
+    return _jsx(TabsPrimitive.Root, { ref: ref, className: className, ...props });
 }
 const LarkTabsRoot = React.forwardRef(LarkTabsRootBase);
 LarkTabsRoot.displayName = 'LarkTabs';
@@ -13,13 +13,13 @@ function LarkTabsListBase({ children, className, ...props }, ref) {
 }
 const LarkTabsList = React.forwardRef(LarkTabsListBase);
 LarkTabsList.displayName = 'LarkTabs.List';
-function LarkTabBase({ value, disabled, children, className }, ref) {
-    return (_jsx(TabsPrimitive.Trigger, { ref: ref, value: value, disabled: disabled, className: cn('relative flex h-[34px] items-center gap-2 whitespace-nowrap rounded-lg px-3 text-sm font-medium text-lark-n700 focus-visible:focus-ring data-[state=active]:bg-lark-accent-soft data-[state=active]:font-semibold data-[state=active]:text-brand-link after:absolute after:inset-x-2 after:bottom-0 after:h-[3px] after:rounded-full after:bg-brand-secondary data-[state=inactive]:after:hidden disabled:cursor-not-allowed disabled:text-lark-n400', className), children: children }));
+function LarkTabBase({ value, disabled, children, className, ...props }, ref) {
+    return (_jsx(TabsPrimitive.Trigger, { ref: ref, value: value, disabled: disabled, className: cn('relative flex h-[34px] items-center gap-2 whitespace-nowrap rounded-lg px-3 text-sm font-medium text-lark-n700 focus-visible:focus-ring data-[state=active]:bg-lark-accent-soft data-[state=active]:font-semibold data-[state=active]:text-brand-link after:absolute after:inset-x-2 after:bottom-0 after:h-[3px] after:rounded-full after:bg-brand-secondary data-[state=inactive]:after:hidden disabled:cursor-not-allowed disabled:text-lark-n400', className), ...props, children: children }));
 }
 const LarkTab = React.forwardRef(LarkTabBase);
 LarkTab.displayName = 'LarkTabs.Tab';
-function LarkPanelBase({ value, children, className }, ref) {
-    return (_jsx(TabsPrimitive.Content, { ref: ref, value: value, className: cn('mt-3 text-sm text-lark-n900 outline-none', className), children: children }));
+function LarkPanelBase({ value, children, className, ...props }, ref) {
+    return (_jsx(TabsPrimitive.Content, { ref: ref, value: value, className: cn('mt-3 text-sm text-lark-n900 outline-none', className), ...props, children: children }));
 }
 const LarkPanel = React.forwardRef(LarkPanelBase);
 LarkPanel.displayName = 'LarkTabs.Panel';

package/dist/components/toast.d.ts

@@ -8,10 +8,14 @@ export interface LarkToastOptions {
 export declare function useLarkToast(): {
     toast: (opts: LarkToastOptions) => void;
 };
-export interface LarkToastViewportProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport> {
+export interface LarkToastViewportProps extends Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>, 'className'> {
+    className?: string;
 }
 declare const LarkToastViewportInner: React.ForwardRefExoticComponent<LarkToastViewportProps & React.RefAttributes<HTMLOListElement>>;
 export { LarkToastViewportInner as LarkToastViewport };
-export declare const LarkToastProvider: React.FC<{
+export interface LarkToastProviderProps extends Omit<React.ComponentPropsWithoutRef<typeof ToastPrimitive.Provider>, 'children'> {
     children: React.ReactNode;
-}>;
+    toastClassName?: string;
+    viewportClassName?: string;
+}
+export declare const LarkToastProvider: React.FC<LarkToastProviderProps>;

package/dist/components/toast.js

@@ -17,7 +17,7 @@ function LarkToastViewportBase({ className, ...props }, ref) {
 const LarkToastViewportInner = React.forwardRef(LarkToastViewportBase);
 LarkToastViewportInner.displayName = 'LarkToastViewport';
 export { LarkToastViewportInner as LarkToastViewport };
-export const LarkToastProvider = ({ children }) => {
+export const LarkToastProvider = ({ children, toastClassName, viewportClassName, duration = 4000, ...props }) => {
     const [items, setItems] = React.useState([]);
     const idRef = React.useRef(0);
     const toast = React.useCallback((opts) => {
@@ -34,9 +34,9 @@ export const LarkToastProvider = ({ children }) => {
         setItems((prev) => prev.filter((t) => t.id !== id));
     }, []);
     const value = React.useMemo(() => ({ toast }), [toast]);
-    return (_jsx(LarkToastContext.Provider, { value: value, children: _jsxs(ToastPrimitive.Provider, { duration: 4000, swipeDirection: "right", children: [children, items.map((item) => (_jsxs(ToastPrimitive.Root, { onOpenChange: (open) => {
+    return (_jsx(LarkToastContext.Provider, { value: value, children: _jsxs(ToastPrimitive.Provider, { duration: duration, swipeDirection: "right", ...props, children: [children, items.map((item) => (_jsxs(ToastPrimitive.Root, { onOpenChange: (open) => {
                         if (!open)
                             remove(item.id);
-                    }, className: cn('flex items-center gap-2 rounded-lg bg-lark-n900 px-4 py-2.5 text-sm text-white shadow-[var(--shadow-overlay)] data-[state=open]:anim-slide-up max-sm:rounded-full'), children: [item.variant === 'success' && (_jsx(CheckCircle, { className: "size-4 shrink-0 text-lark-success", "aria-hidden": "true" })), item.variant === 'danger' && (_jsx(XCircle, { className: "size-4 shrink-0 text-lark-danger", "aria-hidden": "true" })), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(ToastPrimitive.Title, { className: "truncate font-medium", children: item.title }), item.description && (_jsx(ToastPrimitive.Description, { className: "text-white/80", children: item.description }))] }), _jsx(ToastPrimitive.Close, { "aria-label": "Dong thong bao", className: "ms-auto shrink-0 rounded text-white/70 hover:text-white", children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] }, item.id))), _jsx(LarkToastViewportInner, {})] }) }));
+                    }, className: cn('flex items-center gap-2 rounded-lg bg-lark-n900 px-4 py-2.5 text-sm text-white shadow-[var(--shadow-overlay)] data-[state=open]:anim-slide-up max-sm:rounded-full', toastClassName), children: [item.variant === 'success' && (_jsx(CheckCircle, { className: "size-4 shrink-0 text-lark-success", "aria-hidden": "true" })), item.variant === 'danger' && (_jsx(XCircle, { className: "size-4 shrink-0 text-lark-danger", "aria-hidden": "true" })), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx(ToastPrimitive.Title, { className: "truncate font-medium", children: item.title }), item.description && (_jsx(ToastPrimitive.Description, { className: "text-white/80", children: item.description }))] }), _jsx(ToastPrimitive.Close, { "aria-label": "Dong thong bao", className: "ms-auto shrink-0 rounded text-white/70 hover:text-white", children: _jsx(X, { className: "size-4", "aria-hidden": "true" }) })] }, item.id))), _jsx(LarkToastViewportInner, { className: viewportClassName })] }) }));
 };
 LarkToastProvider.displayName = 'LarkToastProvider';

package/dist/components/tooltip.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-export interface LarkTooltipProps {
-    content: string;
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+export interface LarkTooltipProps extends Omit<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, 'content' | 'children'> {
+    content: React.ReactNode;
     children: React.ReactNode;
     side?: 'top' | 'right' | 'bottom' | 'left';
     delayDuration?: number;
     className?: string;
+    /** Class cho trigger bọc children. */
+    triggerClassName?: string;
 }
-export interface LarkTooltipProviderProps {
-    children: React.ReactNode;
-    delayDuration?: number;
-    skipDelayDuration?: number;
+export interface LarkTooltipProviderProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {
 }
 export declare const LarkTooltipProvider: React.FC<LarkTooltipProviderProps>;
 export declare const LarkTooltip: React.ForwardRefExoticComponent<LarkTooltipProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/tooltip.js

@@ -9,13 +9,13 @@ import { cn } from '../lib/utils.js';
 const LarkTooltipProviderMarker = React.createContext(false);
 // Provider đặt ở root app khi muốn chỉnh delay toàn cục; LarkTooltip nằm trong
 // đó dùng chung Provider, không dựng thêm Provider riêng.
-export const LarkTooltipProvider = ({ children, delayDuration = 300, skipDelayDuration, }) => (_jsx(LarkTooltipProviderMarker.Provider, { value: true, children: _jsx(TooltipPrimitive.Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, children: children }) }));
-export const LarkTooltip = React.forwardRef(function LarkTooltip({ content, children, side = 'top', delayDuration, className }, ref) {
+export const LarkTooltipProvider = ({ children, delayDuration = 300, ...props }) => (_jsx(LarkTooltipProviderMarker.Provider, { value: true, children: _jsx(TooltipPrimitive.Provider, { delayDuration: delayDuration, ...props, children: children }) }));
+export const LarkTooltip = React.forwardRef(function LarkTooltip({ content, children, side = 'top', delayDuration, className, triggerClassName, ...props }, ref) {
     // Radix không có Provider mặc định (Root ngoài Provider sẽ throw), nên khi
     // render độc lập tự bọc một Provider fallback delay 300ms. delayDuration
     // undefined → Radix Root lấy từ Provider context (không đè delay toàn cục).
     const inProvider = React.useContext(LarkTooltipProviderMarker);
-    const root = (_jsxs(TooltipPrimitive.Root, { delayDuration: delayDuration, children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { ref: ref, side: side, sideOffset: 6, className: cn('rounded-xl bg-lark-n900 px-2 py-1 text-xs text-white data-[state=delayed-open]:anim-overlay-in', className), children: [content, _jsx(TooltipPrimitive.Arrow, { className: "fill-lark-n900" })] }) })] }));
+    const root = (_jsxs(TooltipPrimitive.Root, { delayDuration: delayDuration, children: [_jsx(TooltipPrimitive.Trigger, { asChild: true, className: triggerClassName, children: children }), _jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { ref: ref, side: side, sideOffset: 6, className: cn('rounded-xl bg-lark-n900 px-2 py-1 text-xs text-white data-[state=delayed-open]:anim-overlay-in', className), ...props, children: [content, _jsx(TooltipPrimitive.Arrow, { className: "fill-lark-n900" })] }) })] }));
     if (inProvider)
         return root;
     return _jsx(TooltipPrimitive.Provider, { delayDuration: 300, children: root });