@lglab/compose-ui 0.21.0 → 0.23.0

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import { Menu } from '@base-ui/react/menu';
 import { Menubar } from '@base-ui/react/menubar';
 import { Meter } from '@base-ui/react/meter';
 import { Popover } from '@base-ui/react/popover';
+import { PreviewCard } from '@base-ui/react/preview-card';
 import { Progress } from '@base-ui/react/progress';
 import * as React_2 from 'react';
 import { ScrollArea } from '@base-ui/react/scroll-area';
@@ -18,6 +19,7 @@ import { Separator as Separator_2 } from '@base-ui/react/separator';
 import { Slider } from '@base-ui/react/slider';
 import { Switch } from '@base-ui/react/switch';
 import { Tabs } from '@base-ui/react/tabs';
+import { Toast } from '@base-ui/react/toast';
 import { Toggle as Toggle_2 } from '@base-ui/react/toggle';
 import { ToggleGroup } from '@base-ui/react/toggle-group';
 import { Tooltip } from '@base-ui/react/tooltip';
@@ -1009,6 +1011,55 @@ export declare const PopoverViewport: {
 
 export declare type PopoverViewportProps = React_2.ComponentProps<typeof Popover.Viewport>;
 
+export declare const PreviewCardArrow: {
+    ({ className, ...props }: PreviewCardArrowProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardArrowProps = React_2.ComponentProps<typeof PreviewCard.Arrow>;
+
+export declare const PreviewCardBackdrop: {
+    ({ className, ...props }: PreviewCardBackdropProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardBackdropProps = React_2.ComponentProps<typeof PreviewCard.Backdrop>;
+
+export declare const PreviewCardPopup: {
+    ({ className, ...props }: PreviewCardPopupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardPopupProps = React_2.ComponentProps<typeof PreviewCard.Popup>;
+
+export declare const PreviewCardPortal: {
+    (props: PreviewCardPortalProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardPortalProps = React_2.ComponentProps<typeof PreviewCard.Portal>;
+
+export declare const PreviewCardPositioner: {
+    ({ className, ...props }: PreviewCardPositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardPositionerProps = React_2.ComponentProps<typeof PreviewCard.Positioner>;
+
+export declare const PreviewCardRoot: {
+    (props: PreviewCardRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardRootProps = React_2.ComponentProps<typeof PreviewCard.Root>;
+
+export declare const PreviewCardTrigger: {
+    ({ className, ...props }: PreviewCardTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardTriggerProps = React_2.ComponentProps<typeof PreviewCard.Trigger>;
+
 export declare const ProgressIndicator: {
     ({ className, ...props }: ProgressIndicatorProps): JSX.Element;
     displayName: string;
@@ -1193,6 +1244,78 @@ export declare type TabsTabProps = React_2.ComponentProps<typeof Tabs.Tab> & {
     size?: 'sm' | 'default' | 'lg';
 };
 
+export { Toast }
+
+export declare const ToastAction: {
+    ({ className, variant, size, ...props }: ToastActionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastActionProps = React_2.ComponentProps<typeof Toast.Action> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+
+export declare const ToastClose: {
+    ({ className, ...props }: ToastCloseProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastCloseProps = React_2.ComponentProps<typeof Toast.Close>;
+
+export declare const ToastContent: {
+    ({ className, ...props }: ToastContentProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastContentProps = React_2.ComponentProps<typeof Toast.Content>;
+
+export declare const ToastDescription: {
+    ({ className, ...props }: ToastDescriptionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastDescriptionProps = React_2.ComponentProps<typeof Toast.Description>;
+
+declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export declare const ToastPositioner: {
+    ({ className, ...props }: ToastPositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastPositionerProps = React_2.ComponentProps<typeof Toast.Positioner>;
+
+export declare const ToastProvider: {
+    (props: ToastProviderProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastProviderProps = React_2.ComponentProps<typeof Toast.Provider>;
+
+export declare const ToastRoot: {
+    ({ className, ...props }: ToastRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastRootProps = React_2.ComponentProps<typeof Toast.Root>;
+
+export declare const ToastTitle: {
+    ({ className, ...props }: ToastTitleProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastTitleProps = React_2.ComponentProps<typeof Toast.Title>;
+
+export declare const ToastViewport: {
+    ({ className, position, ...props }: ToastViewportProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastViewportProps = React_2.ComponentProps<typeof Toast.Viewport> & {
+    position?: ToastPosition;
+};
+
 export declare const Toggle: {
     ({ className, variant, size, ...props }: ToggleProps): JSX.Element;
     displayName: string;

package/dist/index.js

@@ -1,171 +1,181 @@
 import { Button as r } from "./button.js";
-import { CollapsiblePanel as a, CollapsibleRoot as n, CollapsibleTrigger as i } from "./collapsible.js";
-import { AlertDialogBackdrop as u, AlertDialogClose as p, AlertDialogDescription as M, AlertDialogPopup as b, AlertDialogPortal as g, AlertDialogRoot as m, AlertDialogTitle as c, AlertDialogTrigger as d, AlertDialogViewport as x } from "./alert-dialog.js";
+import { CollapsiblePanel as a, CollapsibleRoot as i, CollapsibleTrigger as n } from "./collapsible.js";
+import { AlertDialogBackdrop as u, AlertDialogClose as p, AlertDialogDescription as M, AlertDialogPopup as b, AlertDialogPortal as d, AlertDialogRoot as g, AlertDialogTitle as m, AlertDialogTrigger as C, AlertDialogViewport as c } from "./alert-dialog.js";
 import { AlertDialog as P } from "@base-ui/react/alert-dialog";
-import { AvatarFallback as D, AvatarImage as I, AvatarRoot as R, AvatarStack as s } from "./avatar.js";
-import { ScrollAreaContent as S, ScrollAreaCorner as f, ScrollAreaRoot as w, ScrollAreaScrollbar as k, ScrollAreaThumb as v, ScrollAreaViewport as h } from "./scroll-area.js";
+import { AvatarFallback as s, AvatarImage as D, AvatarRoot as R, AvatarStack as I } from "./avatar.js";
+import { ScrollAreaContent as w, ScrollAreaCorner as S, ScrollAreaRoot as f, ScrollAreaScrollbar as v, ScrollAreaThumb as k, ScrollAreaViewport as h } from "./scroll-area.js";
 import { Separator as G } from "./separator.js";
 import { SwitchRoot as B, SwitchThumb as F } from "./switch.js";
 import { Toggle as j } from "./toggle.js";
 import { TabsIndicator as y, TabsList as z, TabsPanel as E, TabsRoot as J, TabsTab as K } from "./tabs.js";
-import { DialogBackdrop as O, DialogClose as Q, DialogDescription as U, DialogFooter as W, DialogHeader as X, DialogPopup as Y, DialogPortal as Z, DialogRoot as _, DialogTitle as $, DialogTrigger as oo } from "./dialog.js";
-import { DrawerBackdrop as ro, DrawerClose as to, DrawerContent as ao, DrawerDescription as no, DrawerFooter as io, DrawerHeader as lo, DrawerPopup as uo, DrawerPortal as po, DrawerRoot as Mo, DrawerTitle as bo, DrawerTrigger as go } from "./drawer.js";
-import { AccordionHeader as co, AccordionItem as xo, AccordionPanel as Co, AccordionRoot as Po, AccordionTrigger as To } from "./accordion.js";
-import { MeterIndicator as Io, MeterLabel as Ro, MeterRoot as so, MeterTrack as Ao, MeterValue as So } from "./meter.js";
-import { MenuArrow as wo, MenuCheckboxItem as ko, MenuCheckboxItemIndicator as vo, MenuCheckboxItemLabel as ho, MenuGroup as Lo, MenuGroupLabel as Go, MenuItem as Vo, MenuPopup as Bo, MenuPortal as Fo, MenuPositioner as Ho, MenuRadioGroup as jo, MenuRadioItem as qo, MenuRadioItemIndicator as yo, MenuRadioItemLabel as zo, MenuRoot as Eo, MenuSeparator as Jo, MenuSubmenuRoot as Ko, MenuSubmenuTrigger as No, MenuTrigger as Oo } from "./menu.js";
-import { PopoverArrow as Uo, PopoverBackdrop as Wo, PopoverClose as Xo, PopoverDescription as Yo, PopoverPopup as Zo, PopoverPortal as _o, PopoverPositioner as $o, PopoverRoot as oe, PopoverTitle as ee, PopoverTrigger as re, PopoverViewport as te } from "./popover.js";
-import { ProgressIndicator as ne, ProgressLabel as ie, ProgressRoot as le, ProgressTrack as ue, ProgressValue as pe } from "./progress.js";
-import { ToggleGroupItem as be, ToggleGroupRoot as ge } from "./toggle-group.js";
-import { CardContent as ce, CardDescription as de, CardFooter as xe, CardHeader as Ce, CardMedia as Pe, CardRoot as Te, CardSection as De, CardTitle as Ie } from "./card.js";
-import { ContextMenuArrow as se, ContextMenuCheckboxItem as Ae, ContextMenuCheckboxItemIndicator as Se, ContextMenuCheckboxItemLabel as fe, ContextMenuGroup as we, ContextMenuGroupLabel as ke, ContextMenuItem as ve, ContextMenuPopup as he, ContextMenuPortal as Le, ContextMenuPositioner as Ge, ContextMenuRadioGroup as Ve, ContextMenuRadioItem as Be, ContextMenuRadioItemIndicator as Fe, ContextMenuRadioItemLabel as He, ContextMenuRoot as je, ContextMenuSeparator as qe, ContextMenuSubmenuRoot as ye, ContextMenuSubmenuTrigger as ze, ContextMenuTrigger as Ee } from "./context-menu.js";
-import { MenubarArrow as Ke, MenubarCheckboxItem as Ne, MenubarCheckboxItemIndicator as Oe, MenubarCheckboxItemLabel as Qe, MenubarGroup as Ue, MenubarGroupLabel as We, MenubarItem as Xe, MenubarMenu as Ye, MenubarPopup as Ze, MenubarPortal as _e, MenubarPositioner as $e, MenubarRadioGroup as or, MenubarRadioItem as er, MenubarRadioItemIndicator as rr, MenubarRadioItemLabel as tr, MenubarRoot as ar, MenubarSeparator as nr, MenubarSubmenuRoot as ir, MenubarSubmenuTrigger as lr, MenubarTrigger as ur } from "./menubar.js";
-import { SliderControl as Mr, SliderIndicator as br, SliderRoot as gr, SliderThumb as mr, SliderTrack as cr, SliderValue as dr } from "./slider.js";
-import { TooltipArrow as Cr, TooltipPopup as Pr, TooltipPortal as Tr, TooltipPositioner as Dr, TooltipProvider as Ir, TooltipRoot as Rr, TooltipTrigger as sr } from "./tooltip.js";
+import { ToastAction as O, ToastClose as Q, ToastContent as U, ToastDescription as W, ToastPositioner as X, ToastProvider as Y, ToastRoot as Z, ToastTitle as _, ToastViewport as $ } from "./toast.js";
+import { DialogBackdrop as eo, DialogClose as ro, DialogDescription as to, DialogFooter as ao, DialogHeader as io, DialogPopup as no, DialogPortal as lo, DialogRoot as uo, DialogTitle as po, DialogTrigger as Mo } from "./dialog.js";
+import { DrawerBackdrop as go, DrawerClose as mo, DrawerContent as Co, DrawerDescription as co, DrawerFooter as xo, DrawerHeader as Po, DrawerPopup as To, DrawerPortal as so, DrawerRoot as Do, DrawerTitle as Ro, DrawerTrigger as Io } from "./drawer.js";
+import { AccordionHeader as wo, AccordionItem as So, AccordionPanel as fo, AccordionRoot as vo, AccordionTrigger as ko } from "./accordion.js";
+import { MeterIndicator as Lo, MeterLabel as Go, MeterRoot as Vo, MeterTrack as Bo, MeterValue as Fo } from "./meter.js";
+import { MenuArrow as jo, MenuCheckboxItem as qo, MenuCheckboxItemIndicator as yo, MenuCheckboxItemLabel as zo, MenuGroup as Eo, MenuGroupLabel as Jo, MenuItem as Ko, MenuPopup as No, MenuPortal as Oo, MenuPositioner as Qo, MenuRadioGroup as Uo, MenuRadioItem as Wo, MenuRadioItemIndicator as Xo, MenuRadioItemLabel as Yo, MenuRoot as Zo, MenuSeparator as _o, MenuSubmenuRoot as $o, MenuSubmenuTrigger as oe, MenuTrigger as ee } from "./menu.js";
+import { PopoverArrow as te, PopoverBackdrop as ae, PopoverClose as ie, PopoverDescription as ne, PopoverPopup as le, PopoverPortal as ue, PopoverPositioner as pe, PopoverRoot as Me, PopoverTitle as be, PopoverTrigger as de, PopoverViewport as ge } from "./popover.js";
+import { ProgressIndicator as Ce, ProgressLabel as ce, ProgressRoot as xe, ProgressTrack as Pe, ProgressValue as Te } from "./progress.js";
+import { ToggleGroupItem as De, ToggleGroupRoot as Re } from "./toggle-group.js";
+import { CardContent as Ae, CardDescription as we, CardFooter as Se, CardHeader as fe, CardMedia as ve, CardRoot as ke, CardSection as he, CardTitle as Le } from "./card.js";
+import { ContextMenuArrow as Ve, ContextMenuCheckboxItem as Be, ContextMenuCheckboxItemIndicator as Fe, ContextMenuCheckboxItemLabel as He, ContextMenuGroup as je, ContextMenuGroupLabel as qe, ContextMenuItem as ye, ContextMenuPopup as ze, ContextMenuPortal as Ee, ContextMenuPositioner as Je, ContextMenuRadioGroup as Ke, ContextMenuRadioItem as Ne, ContextMenuRadioItemIndicator as Oe, ContextMenuRadioItemLabel as Qe, ContextMenuRoot as Ue, ContextMenuSeparator as We, ContextMenuSubmenuRoot as Xe, ContextMenuSubmenuTrigger as Ye, ContextMenuTrigger as Ze } from "./context-menu.js";
+import { MenubarArrow as $e, MenubarCheckboxItem as or, MenubarCheckboxItemIndicator as er, MenubarCheckboxItemLabel as rr, MenubarGroup as tr, MenubarGroupLabel as ar, MenubarItem as ir, MenubarMenu as nr, MenubarPopup as lr, MenubarPortal as ur, MenubarPositioner as pr, MenubarRadioGroup as Mr, MenubarRadioItem as br, MenubarRadioItemIndicator as dr, MenubarRadioItemLabel as gr, MenubarRoot as mr, MenubarSeparator as Cr, MenubarSubmenuRoot as cr, MenubarSubmenuTrigger as xr, MenubarTrigger as Pr } from "./menubar.js";
+import { SliderControl as sr, SliderIndicator as Dr, SliderRoot as Rr, SliderThumb as Ir, SliderTrack as Ar, SliderValue as wr } from "./slider.js";
+import { TooltipArrow as fr, TooltipPopup as vr, TooltipPortal as kr, TooltipPositioner as hr, TooltipProvider as Lr, TooltipRoot as Gr, TooltipTrigger as Vr } from "./tooltip.js";
+import { PreviewCardArrow as Fr, PreviewCardBackdrop as Hr, PreviewCardPopup as jr, PreviewCardPortal as qr, PreviewCardPositioner as yr, PreviewCardRoot as zr, PreviewCardTrigger as Er } from "./preview-card.js";
+import { Toast as Kr } from "@base-ui/react/toast";
 export {
-  co as AccordionHeader,
-  xo as AccordionItem,
-  Co as AccordionPanel,
-  Po as AccordionRoot,
-  To as AccordionTrigger,
+  wo as AccordionHeader,
+  So as AccordionItem,
+  fo as AccordionPanel,
+  vo as AccordionRoot,
+  ko as AccordionTrigger,
   P as AlertDialog,
   u as AlertDialogBackdrop,
   p as AlertDialogClose,
   M as AlertDialogDescription,
   b as AlertDialogPopup,
-  g as AlertDialogPortal,
-  m as AlertDialogRoot,
-  c as AlertDialogTitle,
-  d as AlertDialogTrigger,
-  x as AlertDialogViewport,
-  D as AvatarFallback,
-  I as AvatarImage,
+  d as AlertDialogPortal,
+  g as AlertDialogRoot,
+  m as AlertDialogTitle,
+  C as AlertDialogTrigger,
+  c as AlertDialogViewport,
+  s as AvatarFallback,
+  D as AvatarImage,
   R as AvatarRoot,
-  s as AvatarStack,
+  I as AvatarStack,
   r as Button,
-  ce as CardContent,
-  de as CardDescription,
-  xe as CardFooter,
-  Ce as CardHeader,
-  Pe as CardMedia,
-  Te as CardRoot,
-  De as CardSection,
-  Ie as CardTitle,
+  Ae as CardContent,
+  we as CardDescription,
+  Se as CardFooter,
+  fe as CardHeader,
+  ve as CardMedia,
+  ke as CardRoot,
+  he as CardSection,
+  Le as CardTitle,
   a as CollapsiblePanel,
-  n as CollapsibleRoot,
-  i as CollapsibleTrigger,
-  se as ContextMenuArrow,
-  Ae as ContextMenuCheckboxItem,
-  Se as ContextMenuCheckboxItemIndicator,
-  fe as ContextMenuCheckboxItemLabel,
-  we as ContextMenuGroup,
-  ke as ContextMenuGroupLabel,
-  ve as ContextMenuItem,
-  he as ContextMenuPopup,
-  Le as ContextMenuPortal,
-  Ge as ContextMenuPositioner,
-  Ve as ContextMenuRadioGroup,
-  Be as ContextMenuRadioItem,
-  Fe as ContextMenuRadioItemIndicator,
-  He as ContextMenuRadioItemLabel,
-  je as ContextMenuRoot,
-  qe as ContextMenuSeparator,
-  ye as ContextMenuSubmenuRoot,
-  ze as ContextMenuSubmenuTrigger,
-  Ee as ContextMenuTrigger,
-  O as DialogBackdrop,
-  Q as DialogClose,
-  U as DialogDescription,
-  W as DialogFooter,
-  X as DialogHeader,
-  Y as DialogPopup,
-  Z as DialogPortal,
-  _ as DialogRoot,
-  $ as DialogTitle,
-  oo as DialogTrigger,
-  ro as DrawerBackdrop,
-  to as DrawerClose,
-  ao as DrawerContent,
-  no as DrawerDescription,
-  io as DrawerFooter,
-  lo as DrawerHeader,
-  uo as DrawerPopup,
-  po as DrawerPortal,
-  Mo as DrawerRoot,
-  bo as DrawerTitle,
-  go as DrawerTrigger,
-  wo as MenuArrow,
-  ko as MenuCheckboxItem,
-  vo as MenuCheckboxItemIndicator,
-  ho as MenuCheckboxItemLabel,
-  Lo as MenuGroup,
-  Go as MenuGroupLabel,
-  Vo as MenuItem,
-  Bo as MenuPopup,
-  Fo as MenuPortal,
-  Ho as MenuPositioner,
-  jo as MenuRadioGroup,
-  qo as MenuRadioItem,
-  yo as MenuRadioItemIndicator,
-  zo as MenuRadioItemLabel,
-  Eo as MenuRoot,
-  Jo as MenuSeparator,
-  Ko as MenuSubmenuRoot,
-  No as MenuSubmenuTrigger,
-  Oo as MenuTrigger,
-  Ke as MenubarArrow,
-  Ne as MenubarCheckboxItem,
-  Oe as MenubarCheckboxItemIndicator,
-  Qe as MenubarCheckboxItemLabel,
-  Ue as MenubarGroup,
-  We as MenubarGroupLabel,
-  Xe as MenubarItem,
-  Ye as MenubarMenu,
-  Ze as MenubarPopup,
-  _e as MenubarPortal,
-  $e as MenubarPositioner,
-  or as MenubarRadioGroup,
-  er as MenubarRadioItem,
-  rr as MenubarRadioItemIndicator,
-  tr as MenubarRadioItemLabel,
-  ar as MenubarRoot,
-  nr as MenubarSeparator,
-  ir as MenubarSubmenuRoot,
-  lr as MenubarSubmenuTrigger,
-  ur as MenubarTrigger,
-  Io as MeterIndicator,
-  Ro as MeterLabel,
-  so as MeterRoot,
-  Ao as MeterTrack,
-  So as MeterValue,
-  Uo as PopoverArrow,
-  Wo as PopoverBackdrop,
-  Xo as PopoverClose,
-  Yo as PopoverDescription,
-  Zo as PopoverPopup,
-  _o as PopoverPortal,
-  $o as PopoverPositioner,
-  oe as PopoverRoot,
-  ee as PopoverTitle,
-  re as PopoverTrigger,
-  te as PopoverViewport,
-  ne as ProgressIndicator,
-  ie as ProgressLabel,
-  le as ProgressRoot,
-  ue as ProgressTrack,
-  pe as ProgressValue,
-  S as ScrollAreaContent,
-  f as ScrollAreaCorner,
-  w as ScrollAreaRoot,
-  k as ScrollAreaScrollbar,
-  v as ScrollAreaThumb,
+  i as CollapsibleRoot,
+  n as CollapsibleTrigger,
+  Ve as ContextMenuArrow,
+  Be as ContextMenuCheckboxItem,
+  Fe as ContextMenuCheckboxItemIndicator,
+  He as ContextMenuCheckboxItemLabel,
+  je as ContextMenuGroup,
+  qe as ContextMenuGroupLabel,
+  ye as ContextMenuItem,
+  ze as ContextMenuPopup,
+  Ee as ContextMenuPortal,
+  Je as ContextMenuPositioner,
+  Ke as ContextMenuRadioGroup,
+  Ne as ContextMenuRadioItem,
+  Oe as ContextMenuRadioItemIndicator,
+  Qe as ContextMenuRadioItemLabel,
+  Ue as ContextMenuRoot,
+  We as ContextMenuSeparator,
+  Xe as ContextMenuSubmenuRoot,
+  Ye as ContextMenuSubmenuTrigger,
+  Ze as ContextMenuTrigger,
+  eo as DialogBackdrop,
+  ro as DialogClose,
+  to as DialogDescription,
+  ao as DialogFooter,
+  io as DialogHeader,
+  no as DialogPopup,
+  lo as DialogPortal,
+  uo as DialogRoot,
+  po as DialogTitle,
+  Mo as DialogTrigger,
+  go as DrawerBackdrop,
+  mo as DrawerClose,
+  Co as DrawerContent,
+  co as DrawerDescription,
+  xo as DrawerFooter,
+  Po as DrawerHeader,
+  To as DrawerPopup,
+  so as DrawerPortal,
+  Do as DrawerRoot,
+  Ro as DrawerTitle,
+  Io as DrawerTrigger,
+  jo as MenuArrow,
+  qo as MenuCheckboxItem,
+  yo as MenuCheckboxItemIndicator,
+  zo as MenuCheckboxItemLabel,
+  Eo as MenuGroup,
+  Jo as MenuGroupLabel,
+  Ko as MenuItem,
+  No as MenuPopup,
+  Oo as MenuPortal,
+  Qo as MenuPositioner,
+  Uo as MenuRadioGroup,
+  Wo as MenuRadioItem,
+  Xo as MenuRadioItemIndicator,
+  Yo as MenuRadioItemLabel,
+  Zo as MenuRoot,
+  _o as MenuSeparator,
+  $o as MenuSubmenuRoot,
+  oe as MenuSubmenuTrigger,
+  ee as MenuTrigger,
+  $e as MenubarArrow,
+  or as MenubarCheckboxItem,
+  er as MenubarCheckboxItemIndicator,
+  rr as MenubarCheckboxItemLabel,
+  tr as MenubarGroup,
+  ar as MenubarGroupLabel,
+  ir as MenubarItem,
+  nr as MenubarMenu,
+  lr as MenubarPopup,
+  ur as MenubarPortal,
+  pr as MenubarPositioner,
+  Mr as MenubarRadioGroup,
+  br as MenubarRadioItem,
+  dr as MenubarRadioItemIndicator,
+  gr as MenubarRadioItemLabel,
+  mr as MenubarRoot,
+  Cr as MenubarSeparator,
+  cr as MenubarSubmenuRoot,
+  xr as MenubarSubmenuTrigger,
+  Pr as MenubarTrigger,
+  Lo as MeterIndicator,
+  Go as MeterLabel,
+  Vo as MeterRoot,
+  Bo as MeterTrack,
+  Fo as MeterValue,
+  te as PopoverArrow,
+  ae as PopoverBackdrop,
+  ie as PopoverClose,
+  ne as PopoverDescription,
+  le as PopoverPopup,
+  ue as PopoverPortal,
+  pe as PopoverPositioner,
+  Me as PopoverRoot,
+  be as PopoverTitle,
+  de as PopoverTrigger,
+  ge as PopoverViewport,
+  Fr as PreviewCardArrow,
+  Hr as PreviewCardBackdrop,
+  jr as PreviewCardPopup,
+  qr as PreviewCardPortal,
+  yr as PreviewCardPositioner,
+  zr as PreviewCardRoot,
+  Er as PreviewCardTrigger,
+  Ce as ProgressIndicator,
+  ce as ProgressLabel,
+  xe as ProgressRoot,
+  Pe as ProgressTrack,
+  Te as ProgressValue,
+  w as ScrollAreaContent,
+  S as ScrollAreaCorner,
+  f as ScrollAreaRoot,
+  v as ScrollAreaScrollbar,
+  k as ScrollAreaThumb,
   h as ScrollAreaViewport,
   G as Separator,
-  Mr as SliderControl,
-  br as SliderIndicator,
-  gr as SliderRoot,
-  mr as SliderThumb,
-  cr as SliderTrack,
-  dr as SliderValue,
+  sr as SliderControl,
+  Dr as SliderIndicator,
+  Rr as SliderRoot,
+  Ir as SliderThumb,
+  Ar as SliderTrack,
+  wr as SliderValue,
   B as SwitchRoot,
   F as SwitchThumb,
   y as TabsIndicator,
@@ -173,14 +183,24 @@ export {
   E as TabsPanel,
   J as TabsRoot,
   K as TabsTab,
+  Kr as Toast,
+  O as ToastAction,
+  Q as ToastClose,
+  U as ToastContent,
+  W as ToastDescription,
+  X as ToastPositioner,
+  Y as ToastProvider,
+  Z as ToastRoot,
+  _ as ToastTitle,
+  $ as ToastViewport,
   j as Toggle,
-  be as ToggleGroupItem,
-  ge as ToggleGroupRoot,
-  Cr as TooltipArrow,
-  Pr as TooltipPopup,
-  Tr as TooltipPortal,
-  Dr as TooltipPositioner,
-  Ir as TooltipProvider,
-  Rr as TooltipRoot,
-  sr as TooltipTrigger
+  De as ToggleGroupItem,
+  Re as ToggleGroupRoot,
+  fr as TooltipArrow,
+  vr as TooltipPopup,
+  kr as TooltipPortal,
+  hr as TooltipPositioner,
+  Lr as TooltipProvider,
+  Gr as TooltipRoot,
+  Vr as TooltipTrigger
 };

package/dist/preview-card.d.ts

@@ -0,0 +1,54 @@
+import { JSX } from 'react/jsx-runtime';
+import { PreviewCard } from '@base-ui/react/preview-card';
+import * as React_2 from 'react';
+
+export declare const PreviewCardArrow: {
+    ({ className, ...props }: PreviewCardArrowProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardArrowProps = React_2.ComponentProps<typeof PreviewCard.Arrow>;
+
+export declare const PreviewCardBackdrop: {
+    ({ className, ...props }: PreviewCardBackdropProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardBackdropProps = React_2.ComponentProps<typeof PreviewCard.Backdrop>;
+
+export declare const PreviewCardPopup: {
+    ({ className, ...props }: PreviewCardPopupProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardPopupProps = React_2.ComponentProps<typeof PreviewCard.Popup>;
+
+export declare const PreviewCardPortal: {
+    (props: PreviewCardPortalProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardPortalProps = React_2.ComponentProps<typeof PreviewCard.Portal>;
+
+export declare const PreviewCardPositioner: {
+    ({ className, ...props }: PreviewCardPositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardPositionerProps = React_2.ComponentProps<typeof PreviewCard.Positioner>;
+
+export declare const PreviewCardRoot: {
+    (props: PreviewCardRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardRootProps = React_2.ComponentProps<typeof PreviewCard.Root>;
+
+export declare const PreviewCardTrigger: {
+    ({ className, ...props }: PreviewCardTriggerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type PreviewCardTriggerProps = React_2.ComponentProps<typeof PreviewCard.Trigger>;
+
+export { }

package/dist/preview-card.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { PreviewCard as e } from "@base-ui/react/preview-card";
+import { A as o } from "./arrow-svg-C6zQTvgS.js";
+import { c as i } from "./utils-B6yFEsav.js";
+const d = (r) => /* @__PURE__ */ t(e.Root, { ...r });
+d.displayName = "PreviewCardRoot";
+const s = ({ className: r, ...a }) => /* @__PURE__ */ t(e.Trigger, { className: i("underline", r), ...a });
+s.displayName = "PreviewCardTrigger";
+const n = (r) => /* @__PURE__ */ t(e.Portal, { ...r });
+n.displayName = "PreviewCardPortal";
+const p = ({ className: r, ...a }) => /* @__PURE__ */ t(
+  e.Backdrop,
+  {
+    className: i(
+      "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm",
+      "transition-opacity duration-200",
+      "data-starting-style:opacity-0 data-ending-style:opacity-0",
+      r
+    ),
+    ...a
+  }
+);
+p.displayName = "PreviewCardBackdrop";
+const l = ({ className: r, ...a }) => /* @__PURE__ */ t(
+  e.Positioner,
+  {
+    className: i(
+      "z-50 outline-none",
+      "h-(--positioner-height) w-(--positioner-width)",
+      "max-w-(--available-width)",
+      "transition-[top,left,right,bottom,transform]",
+      "duration-[0.35s]",
+      "ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "data-instant:transition-none",
+      r
+    ),
+    sideOffset: 8,
+    ...a
+  }
+);
+l.displayName = "PreviewCardPositioner";
+const c = ({ className: r, ...a }) => /* @__PURE__ */ t(
+  e.Popup,
+  {
+    className: i(
+      "rounded-md bg-background px-4 py-3 text-foreground shadow-sm border relative",
+      "h-(--popup-height,auto) w-(--popup-width,auto)",
+      "max-w-[320px]",
+      "origin-(--transform-origin)",
+      "border-border",
+      "transition-[transform,scale,opacity]",
+      "data-ending-style:scale-90 data-ending-style:opacity-0",
+      "data-starting-style:scale-90 data-starting-style:opacity-0",
+      "dark:shadow-none",
+      r
+    ),
+    ...a
+  }
+);
+c.displayName = "PreviewCardPopup";
+const m = ({ className: r, ...a }) => /* @__PURE__ */ t(
+  e.Arrow,
+  {
+    className: i(
+      "flex data-[side=bottom]:top-[-9px] data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-11px] data-[side=top]:rotate-180",
+      r
+    ),
+    ...a,
+    children: /* @__PURE__ */ t(o, {})
+  }
+);
+m.displayName = "PreviewCardArrow";
+export {
+  m as PreviewCardArrow,
+  p as PreviewCardBackdrop,
+  c as PreviewCardPopup,
+  n as PreviewCardPortal,
+  l as PreviewCardPositioner,
+  d as PreviewCardRoot,
+  s as PreviewCardTrigger
+};

package/dist/toast.d.ts

@@ -0,0 +1,81 @@
+import { JSX } from 'react/jsx-runtime';
+import * as React_2 from 'react';
+import { Toast } from '@base-ui/react/toast';
+
+declare type ButtonSize = 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg';
+
+declare type ButtonVariant = 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link';
+
+export { Toast }
+
+export declare const ToastAction: {
+    ({ className, variant, size, ...props }: ToastActionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastActionProps = React_2.ComponentProps<typeof Toast.Action> & {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+};
+
+export declare const ToastClose: {
+    ({ className, ...props }: ToastCloseProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastCloseProps = React_2.ComponentProps<typeof Toast.Close>;
+
+export declare const ToastContent: {
+    ({ className, ...props }: ToastContentProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastContentProps = React_2.ComponentProps<typeof Toast.Content>;
+
+export declare const ToastDescription: {
+    ({ className, ...props }: ToastDescriptionProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastDescriptionProps = React_2.ComponentProps<typeof Toast.Description>;
+
+export declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export declare const ToastPositioner: {
+    ({ className, ...props }: ToastPositionerProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastPositionerProps = React_2.ComponentProps<typeof Toast.Positioner>;
+
+export declare const ToastProvider: {
+    (props: ToastProviderProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastProviderProps = React_2.ComponentProps<typeof Toast.Provider>;
+
+export declare const ToastRoot: {
+    ({ className, ...props }: ToastRootProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastRootProps = React_2.ComponentProps<typeof Toast.Root>;
+
+export declare const ToastTitle: {
+    ({ className, ...props }: ToastTitleProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastTitleProps = React_2.ComponentProps<typeof Toast.Title>;
+
+export declare const ToastViewport: {
+    ({ className, position, ...props }: ToastViewportProps): JSX.Element;
+    displayName: string;
+};
+
+export declare type ToastViewportProps = React_2.ComponentProps<typeof Toast.Viewport> & {
+    position?: ToastPosition;
+};
+
+export { }

package/dist/toast.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsx as o } from "react/jsx-runtime";
+import { Toast as e } from "@base-ui/react/toast";
+import { Toast as N } from "@base-ui/react/toast";
+import { b as n } from "./button-variants-CbFMPwc8.js";
+import { c as i } from "./utils-B6yFEsav.js";
+const d = (t) => /* @__PURE__ */ o(e.Provider, { ...t });
+d.displayName = "ToastProvider";
+const p = ({
+  className: t,
+  position: a = "bottom-right",
+  ...s
+}) => /* @__PURE__ */ o(
+  e.Viewport,
+  {
+    "data-position": a,
+    className: i(
+      "fixed z-50 w-[356px] outline-none",
+      // Vertical position
+      "data-[position^=bottom]:bottom-4",
+      "data-[position^=top]:top-4",
+      // Horizontal position
+      "data-[position$=right]:right-4",
+      "data-[position$=left]:left-4",
+      "data-[position$=center]:left-1/2 data-[position$=center]:-translate-x-1/2",
+      t
+    ),
+    ...s
+  }
+);
+p.displayName = "ToastViewport";
+const l = ({ className: t, ...a }) => /* @__PURE__ */ o(
+  e.Root,
+  {
+    className: i(
+      // Base styles
+      "group flex w-full flex-col gap-1 rounded-lg border border-border bg-background p-4 shadow-lg",
+      "transition-[transform,opacity,height] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]",
+      "absolute z-[calc(1000-var(--toast-index))]",
+      "h-(--height) select-none",
+      // CSS custom properties for stacking
+      "[--gap:0.75rem] [--peek:0.75rem]",
+      "[--scale:calc(max(0,1-(var(--toast-index)*0.1)))]",
+      "[--shrink:calc(1-var(--scale))]",
+      "[--height:var(--toast-frontmost-height,var(--toast-height))]",
+      // Expanded state height
+      "data-expanded:h-(--toast-height)",
+      // Ending styles (shared)
+      "data-ending-style:opacity-0",
+      "data-limited:opacity-0",
+      // Gap element for hover interaction
+      'after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[""]',
+      // ===== BOTTOM POSITIONS =====
+      "in-data-[position^=bottom]:bottom-0",
+      "in-data-[position^=bottom]:origin-bottom",
+      "in-data-[position^=bottom]:[--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]",
+      "in-data-[position^=bottom]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))]",
+      "in-data-[position^=bottom]:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+      "in-data-[position^=bottom]:data-starting-style:transform-[translateY(150%)]",
+      "in-data-[position^=bottom]:data-ending-style:transform-[translateY(150%)]",
+      "in-data-[position^=bottom]:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+      "in-data-[position^=bottom]:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+      "in-data-[position^=bottom]:after:top-full",
+      // ===== TOP POSITIONS =====
+      "in-data-[position^=top]:top-0",
+      "in-data-[position^=top]:origin-top",
+      "in-data-[position^=top]:[--offset-y:calc(var(--toast-offset-y)+calc(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))]",
+      "in-data-[position^=top]:transform-[translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))]",
+      "in-data-[position^=top]:data-expanded:transform-[translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+      "in-data-[position^=top]:data-starting-style:transform-[translateY(-150%)]",
+      "in-data-[position^=top]:data-ending-style:transform-[translateY(-150%)]",
+      "in-data-[position^=top]:data-ending-style:data-[swipe-direction=down]:transform-[translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+      "in-data-[position^=top]:data-ending-style:data-[swipe-direction=up]:transform-[translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+      "in-data-[position^=top]:after:bottom-full",
+      // ===== HORIZONTAL POSITIONS =====
+      "in-data-[position$=right]:right-0",
+      "in-data-[position$=left]:left-0",
+      "in-data-[position$=center]:left-0 in-data-[position$=center]:right-0",
+      // Left/right swipe exit animations
+      "data-ending-style:data-[swipe-direction=left]:transform-[translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+      "data-ending-style:data-[swipe-direction=right]:transform-[translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+      t
+    ),
+    ...a
+  }
+);
+l.displayName = "ToastRoot";
+const m = ({ className: t, ...a }) => /* @__PURE__ */ o(
+  e.Content,
+  {
+    className: i(
+      "flex flex-col gap-1 overflow-hidden",
+      "transition-opacity duration-250",
+      "data-behind:pointer-events-none data-behind:opacity-0",
+      "data-expanded:pointer-events-auto data-expanded:opacity-100",
+      t
+    ),
+    ...a
+  }
+);
+m.displayName = "ToastContent";
+const c = ({ className: t, ...a }) => /* @__PURE__ */ o(e.Title, { className: i("font-semibold", t), ...a });
+c.displayName = "ToastTitle";
+const f = ({ className: t, ...a }) => /* @__PURE__ */ o(e.Description, { className: i("text-sm", t), ...a });
+f.displayName = "ToastDescription";
+const v = ({ className: t, variant: a, size: s = "sm", ...r }) => /* @__PURE__ */ o(
+  e.Action,
+  {
+    className: i("w-fit mt-2", n({ variant: a, size: s }), t),
+    ...r
+  }
+);
+v.displayName = "ToastAction";
+const g = ({ className: t, ...a }) => /* @__PURE__ */ o(
+  e.Close,
+  {
+    className: i(
+      n({ variant: "ghost", size: "icon" }),
+      "absolute right-2 top-2 size-6",
+      t
+    ),
+    ...a
+  }
+);
+g.displayName = "ToastClose";
+const y = ({ className: t, ...a }) => /* @__PURE__ */ o(
+  e.Positioner,
+  {
+    className: i(
+      "z-50",
+      "transition-[top,left,right,bottom,transform]",
+      "duration-[0.35s]",
+      "ease-[cubic-bezier(0.22,1,0.36,1)]",
+      t
+    ),
+    ...a
+  }
+);
+y.displayName = "ToastPositioner";
+export {
+  N as Toast,
+  v as ToastAction,
+  g as ToastClose,
+  m as ToastContent,
+  f as ToastDescription,
+  y as ToastPositioner,
+  d as ToastProvider,
+  l as ToastRoot,
+  c as ToastTitle,
+  p as ToastViewport
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "A collection of components built with Base UI & Tailwind CSS",
   "author": "LGLab",
   "license": "MIT",
@@ -78,6 +78,10 @@
       "import": "./dist/popover.js",
       "types": "./dist/popover.d.ts"
     },
+    "./preview-card": {
+      "import": "./dist/preview-card.js",
+      "types": "./dist/preview-card.d.ts"
+    },
     "./progress": {
       "import": "./dist/progress.js",
       "types": "./dist/progress.d.ts"
@@ -102,6 +106,10 @@
       "import": "./dist/tabs.js",
       "types": "./dist/tabs.d.ts"
     },
+    "./toast": {
+      "import": "./dist/toast.js",
+      "types": "./dist/toast.d.ts"
+    },
     "./toggle": {
       "import": "./dist/toggle.js",
       "types": "./dist/toggle.d.ts"