@lglab/compose-ui 0.21.0 → 0.22.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';
@@ -1009,6 +1010,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;

package/dist/index.js

@@ -1,30 +1,31 @@
 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 { AlertDialogBackdrop as u, AlertDialogClose as p, AlertDialogDescription as M, AlertDialogPopup as b, AlertDialogPortal as g, AlertDialogRoot as d, 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 D, AvatarImage as R, AvatarRoot as s, 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 { SwitchRoot as V, 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 { AccordionHeader as Co, AccordionItem as co, AccordionPanel as xo, AccordionRoot as Po, AccordionTrigger as To } from "./accordion.js";
+import { MeterIndicator as Ro, MeterLabel as so, MeterRoot as Io, MeterTrack as Ao, MeterValue as wo } from "./meter.js";
+import { MenuArrow as fo, MenuCheckboxItem as vo, MenuCheckboxItemIndicator as ko, MenuCheckboxItemLabel as ho, MenuGroup as Lo, MenuGroupLabel as Go, MenuItem as Bo, MenuPopup as Vo, 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 { CardContent as me, CardDescription as Ce, CardFooter as ce, CardHeader as xe, CardMedia as Pe, CardRoot as Te, CardSection as De, CardTitle as Re } from "./card.js";
+import { ContextMenuArrow as Ie, ContextMenuCheckboxItem as Ae, ContextMenuCheckboxItemIndicator as we, ContextMenuCheckboxItemLabel as Se, ContextMenuGroup as fe, ContextMenuGroupLabel as ve, ContextMenuItem as ke, ContextMenuPopup as he, ContextMenuPortal as Le, ContextMenuPositioner as Ge, ContextMenuRadioGroup as Be, ContextMenuRadioItem as Ve, 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 { SliderControl as Mr, SliderIndicator as br, SliderRoot as gr, SliderThumb as dr, SliderTrack as mr, SliderValue as Cr } from "./slider.js";
+import { TooltipArrow as xr, TooltipPopup as Pr, TooltipPortal as Tr, TooltipPositioner as Dr, TooltipProvider as Rr, TooltipRoot as sr, TooltipTrigger as Ir } from "./tooltip.js";
+import { PreviewCardArrow as wr, PreviewCardBackdrop as Sr, PreviewCardPopup as fr, PreviewCardPortal as vr, PreviewCardPositioner as kr, PreviewCardRoot as hr, PreviewCardTrigger as Lr } from "./preview-card.js";
 export {
-  co as AccordionHeader,
-  xo as AccordionItem,
-  Co as AccordionPanel,
+  Co as AccordionHeader,
+  co as AccordionItem,
+  xo as AccordionPanel,
   Po as AccordionRoot,
   To as AccordionTrigger,
   P as AlertDialog,
@@ -33,38 +34,38 @@ export {
   M as AlertDialogDescription,
   b as AlertDialogPopup,
   g as AlertDialogPortal,
-  m as AlertDialogRoot,
-  c as AlertDialogTitle,
-  d as AlertDialogTrigger,
-  x as AlertDialogViewport,
+  d as AlertDialogRoot,
+  m as AlertDialogTitle,
+  C as AlertDialogTrigger,
+  c as AlertDialogViewport,
   D as AvatarFallback,
-  I as AvatarImage,
-  R as AvatarRoot,
-  s as AvatarStack,
+  R as AvatarImage,
+  s as AvatarRoot,
+  I as AvatarStack,
   r as Button,
-  ce as CardContent,
-  de as CardDescription,
-  xe as CardFooter,
-  Ce as CardHeader,
+  me as CardContent,
+  Ce as CardDescription,
+  ce as CardFooter,
+  xe as CardHeader,
   Pe as CardMedia,
   Te as CardRoot,
   De as CardSection,
-  Ie as CardTitle,
+  Re as CardTitle,
   a as CollapsiblePanel,
   n as CollapsibleRoot,
   i as CollapsibleTrigger,
-  se as ContextMenuArrow,
+  Ie as ContextMenuArrow,
   Ae as ContextMenuCheckboxItem,
-  Se as ContextMenuCheckboxItemIndicator,
-  fe as ContextMenuCheckboxItemLabel,
-  we as ContextMenuGroup,
-  ke as ContextMenuGroupLabel,
-  ve as ContextMenuItem,
+  we as ContextMenuCheckboxItemIndicator,
+  Se as ContextMenuCheckboxItemLabel,
+  fe as ContextMenuGroup,
+  ve as ContextMenuGroupLabel,
+  ke as ContextMenuItem,
   he as ContextMenuPopup,
   Le as ContextMenuPortal,
   Ge as ContextMenuPositioner,
-  Ve as ContextMenuRadioGroup,
-  Be as ContextMenuRadioItem,
+  Be as ContextMenuRadioGroup,
+  Ve as ContextMenuRadioItem,
   Fe as ContextMenuRadioItemIndicator,
   He as ContextMenuRadioItemLabel,
   je as ContextMenuRoot,
@@ -93,14 +94,14 @@ export {
   Mo as DrawerRoot,
   bo as DrawerTitle,
   go as DrawerTrigger,
-  wo as MenuArrow,
-  ko as MenuCheckboxItem,
-  vo as MenuCheckboxItemIndicator,
+  fo as MenuArrow,
+  vo as MenuCheckboxItem,
+  ko as MenuCheckboxItemIndicator,
   ho as MenuCheckboxItemLabel,
   Lo as MenuGroup,
   Go as MenuGroupLabel,
-  Vo as MenuItem,
-  Bo as MenuPopup,
+  Bo as MenuItem,
+  Vo as MenuPopup,
   Fo as MenuPortal,
   Ho as MenuPositioner,
   jo as MenuRadioGroup,
@@ -132,11 +133,11 @@ export {
   ir as MenubarSubmenuRoot,
   lr as MenubarSubmenuTrigger,
   ur as MenubarTrigger,
-  Io as MeterIndicator,
-  Ro as MeterLabel,
-  so as MeterRoot,
+  Ro as MeterIndicator,
+  so as MeterLabel,
+  Io as MeterRoot,
   Ao as MeterTrack,
-  So as MeterValue,
+  wo as MeterValue,
   Uo as PopoverArrow,
   Wo as PopoverBackdrop,
   Xo as PopoverClose,
@@ -148,25 +149,32 @@ export {
   ee as PopoverTitle,
   re as PopoverTrigger,
   te as PopoverViewport,
+  wr as PreviewCardArrow,
+  Sr as PreviewCardBackdrop,
+  fr as PreviewCardPopup,
+  vr as PreviewCardPortal,
+  kr as PreviewCardPositioner,
+  hr as PreviewCardRoot,
+  Lr as PreviewCardTrigger,
   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,
+  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,
-  B as SwitchRoot,
+  dr as SliderThumb,
+  mr as SliderTrack,
+  Cr as SliderValue,
+  V as SwitchRoot,
   F as SwitchThumb,
   y as TabsIndicator,
   z as TabsList,
@@ -176,11 +184,11 @@ export {
   j as Toggle,
   be as ToggleGroupItem,
   ge as ToggleGroupRoot,
-  Cr as TooltipArrow,
+  xr as TooltipArrow,
   Pr as TooltipPopup,
   Tr as TooltipPortal,
   Dr as TooltipPositioner,
-  Ir as TooltipProvider,
-  Rr as TooltipRoot,
-  sr as TooltipTrigger
+  Rr as TooltipProvider,
+  sr as TooltipRoot,
+  Ir 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lglab/compose-ui",
-  "version": "0.21.0",
+  "version": "0.22.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"