panelui-web 0.7.0 → 0.9.0

package/dist/components/sheet/index.js

@@ -45,10 +45,20 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * Every sheet follows a drag and leaves on a flick toward its own edge. The
  * grabber on a top or bottom sheet says so before anybody tries.
+ *
+ * ## Slides
+ *
+ * `Sheet.Slides` takes the place of the body with a column of rounded
+ * slides, for photos or a deck. By default it is a deck: each slide fills
+ * the sheet's height, a turn of the wheel or a swipe of the trackpad glides
+ * to the next slide, an arrow key moves one, and a counter under it says
+ * which. Without `snap` it is a numbered column of smaller slides that
+ * scrolls freely, the way a presentation's slide panel does, and pressing
+ * one chooses it.
  */
 import { Drawer } from '@base-ui/react/drawer';
 import { ScrollArea } from '@base-ui/react/scroll-area';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Children, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 /*
  * One curve for every movement: the sheet arriving, the one behind it stepping
@@ -120,6 +130,32 @@ const sheetVariants = tv({
         scrollbar: 'my-3 me-1 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0',
         thumb: 'relative flex-1 rounded-full bg-foreground/20',
         footer: 'flex shrink-0 flex-col gap-2 px-6 pt-3 pb-6',
+        /*
+         * Slides. As a deck the viewport is a size container, so a slide can be
+         * exactly its height less the padding, which is what lets one flick land
+         * on one slide. The minimum height is for a sheet that sizes itself to
+         * its content, where a deck would otherwise have no height to fill.
+         */
+        slides: 'relative flex min-h-0 flex-1 flex-col',
+        // Focus is shown on the current slide, not as a square round the scroller.
+        slidesViewport: 'group/slides min-h-0 flex-1 overscroll-contain outline-none',
+        slidesContent: 'flex flex-col gap-3 px-3',
+        // 20px is the sheet's 32 less the 12px it is set in by: one corner, two curves.
+        slide: [
+            'relative shrink-0 overflow-hidden rounded-[20px] bg-muted',
+            '[&>img]:size-full [&>img]:object-cover [&>video]:size-full [&>video]:object-cover',
+            // A hairline over the picture, so a photo keeps an edge on a sheet of its own colour.
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:ring-1 after:ring-inset after:ring-foreground/[0.08] after:content-['']",
+            'group-focus-visible/slides:data-current:ring-2 group-focus-visible/slides:data-current:ring-ring',
+        ],
+        slideRow: 'grid grid-cols-[1.25rem_minmax(0,1fr)] items-start gap-2.5',
+        slideNumber: 'pt-1 text-end text-xs font-medium tabular-nums text-muted-foreground',
+        slideButton: [
+            'group/slide block w-full cursor-pointer rounded-[14px] text-start outline-none transition-shadow duration-150',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover',
+        ],
+        // No blur behind it: a filter over a scrolling picture repaints on every frame.
+        counter: 'pointer-events-none absolute inset-x-0 bottom-5 mx-auto w-fit rounded-full bg-black/60 px-2.5 py-1 text-xs font-medium tabular-nums text-white',
         /*
          * The page behind steps back by 3%, not more: enough to read as a layer
          * underneath, not so much that the page looks like it shrank. It keeps its
@@ -414,6 +450,217 @@ function SheetClose({ render, icon = false, children, ...props }) {
     return (_jsx(Drawer.Close, { render: render, ...props, children: content }));
 }
 SheetClose.displayName = 'Sheet.Close';
+const SlidesContext = createContext(null);
+/** The rounded frame of a slide: the slide itself in a deck, inside its row in a column. */
+const frameOf = (slide) => slide.querySelector('[data-slide-frame]') ?? slide;
+const SlideIndexContext = createContext(0);
+function reduceMotion() {
+    return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+/**
+ * A column of rounded slides in place of `Sheet.Body`: a deck that moves one
+ * slide at a time, or with `snap={false}`, a numbered column to choose from.
+ */
+function SheetSlides({ snap = true, index, defaultIndex = 0, onIndexChange, counter, aspect = '16 / 9', className, style, children, 'aria-label': label = 'Slides', ...props }) {
+    const slots = sheetVariants();
+    const viewport = useRef(null);
+    const slides = Children.toArray(children);
+    const count = slides.length;
+    const [internal, setInternal] = useState(defaultIndex);
+    const current = Math.min(Math.max(index ?? internal, 0), Math.max(count - 1, 0));
+    const live = useRef({ current, onIndexChange, controlled: index !== undefined });
+    live.current = { current, onIndexChange, controlled: index !== undefined };
+    const slideAt = (at) => viewport.current?.querySelectorAll('[data-slot=sheet-slide]')[at] ?? null;
+    // Scrolls the slides alone. `scrollIntoView` would move every scroller
+    // above them too, the page included when a sheet is drawn inline.
+    const reveal = useCallback((at, smooth) => {
+        const root = viewport.current;
+        const slide = slideAt(at);
+        if (!root || !slide)
+            return;
+        const box = root.getBoundingClientRect();
+        const frame = frameOf(slide).getBoundingClientRect();
+        const above = frame.top - box.top;
+        const below = frame.bottom - box.bottom;
+        const by = snap ? above - (box.height - frame.height) / 2 : above < 0 ? above - 8 : below > 0 ? below + 8 : 0;
+        if (by === 0)
+            return;
+        const behavior = smooth && !reduceMotion() ? 'smooth' : 'auto';
+        if (!snap) {
+            root.scrollBy({ top: by, behavior });
+            return;
+        }
+        // A deck stops at every slide on the way, which is right for a hand
+        // and wrong for Home or End. Snapping is off for the length of a jump.
+        root.style.scrollSnapType = 'none';
+        root.scrollBy({ top: by, behavior });
+        let restored = false;
+        const restore = () => {
+            if (restored)
+                return;
+            restored = true;
+            root.style.scrollSnapType = '';
+        };
+        if (behavior === 'smooth' && 'onscrollend' in window) {
+            root.addEventListener('scrollend', restore, { once: true });
+            window.setTimeout(restore, 1200);
+        }
+        else {
+            requestAnimationFrame(restore);
+        }
+    }, [snap]);
+    // The slide last brought into view. One that became current by being
+    // scrolled to is already in view, and must not be scrolled to again: that
+    // would pull a deck back to it in the middle of a longer scroll.
+    const shown = useRef(null);
+    const settle = useCallback((next) => {
+        shown.current = next;
+        if (next === live.current.current)
+            return;
+        if (!live.current.controlled)
+            setInternal(next);
+        live.current.onIndexChange?.(next);
+    }, []);
+    // A deck's current slide is the one most in view.
+    useEffect(() => {
+        const root = viewport.current;
+        if (!snap || !root || typeof IntersectionObserver === 'undefined')
+            return;
+        const observer = new IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.isIntersecting)
+                    settle(Number(entry.target.dataset.index));
+            }
+        }, { root, threshold: 0.6 });
+        root.querySelectorAll('[data-slot=sheet-slide]').forEach((slide) => observer.observe(slide));
+        return () => observer.disconnect();
+    }, [snap, count, settle]);
+    // Opens on the current slide, and follows `index` when it is set from outside.
+    useEffect(() => {
+        const first = shown.current === null;
+        if (!first && shown.current === current)
+            return;
+        shown.current = current;
+        if (first && current === 0)
+            return;
+        const box = viewport.current?.getBoundingClientRect();
+        const slide = slideAt(current);
+        const frame = slide ? frameOf(slide).getBoundingClientRect() : undefined;
+        const visible = box && frame && frame.top >= box.top - 1 && frame.bottom <= box.bottom + 1;
+        // A deck that scrolled there by itself is already on it.
+        if (!visible || (first && snap))
+            reveal(current, !first);
+    }, [current, reveal, snap]);
+    const go = (next) => {
+        const at = Math.min(Math.max(next, 0), count - 1);
+        if (snap)
+            reveal(at, true);
+        else {
+            settle(at);
+            reveal(at, true);
+            slideAt(at)?.querySelector('button')?.focus();
+        }
+    };
+    const goNow = useRef(go);
+    goNow.current = go;
+    /*
+     * A wheel or a trackpad turns a deck one slide per gesture. Left to the
+     * browser, a slow scroll drifts part of the way, eases off and springs
+     * back, and a fast one runs past several slides. Here a deliberate scroll
+     * glides to the next slide, and the rest of the same gesture, the
+     * trackpad's momentum included, is absorbed rather than fought. A touch
+     * screen keeps the browser's own snapping, which follows the finger.
+     */
+    useEffect(() => {
+        const root = viewport.current;
+        if (!snap || !root)
+            return;
+        let pending = 0;
+        let lastWheel = 0;
+        let lockedUntil = 0;
+        const onWheel = (event) => {
+            // Sideways scrolling and pinch-zoom are not turns.
+            if (event.ctrlKey || Math.abs(event.deltaX) > Math.abs(event.deltaY))
+                return;
+            event.preventDefault();
+            const now = performance.now();
+            const gap = now - lastWheel;
+            lastWheel = now;
+            if (now < lockedUntil) {
+                // Still the same gesture: keep it from turning a second slide.
+                lockedUntil = Math.max(lockedUntil, now + 140);
+                return;
+            }
+            if (gap > 200)
+                pending = 0;
+            pending += event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
+            if (Math.abs(pending) < 24)
+                return;
+            const step = Math.sign(pending);
+            pending = 0;
+            lockedUntil = now + 500;
+            goNow.current(live.current.current + step);
+        };
+        root.addEventListener('wheel', onWheel, { passive: false });
+        return () => root.removeEventListener('wheel', onWheel);
+    }, [snap]);
+    const keys = (event) => {
+        const step = event.key === 'ArrowDown' || event.key === 'PageDown' || (event.key === ' ' && !event.shiftKey)
+            ? 1
+            : event.key === 'ArrowUp' || event.key === 'PageUp' || (event.key === ' ' && event.shiftKey)
+                ? -1
+                : 0;
+        if (step !== 0) {
+            event.preventDefault();
+            go(current + step);
+        }
+        else if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault();
+            go(event.key === 'Home' ? 0 : count - 1);
+        }
+    };
+    const context = useMemo(() => ({ snap, count, current, choose: settle, pressable: !snap && onIndexChange !== undefined }), [snap, count, current, settle, onIndexChange]);
+    return (_jsx(SlidesContext.Provider, { value: context, children: _jsxs(ScrollArea.Root, { "data-slot": "sheet-slides", "data-snap": snap ? '' : undefined, className: slots.slides({ className }), style: { ...style, ['--slide-aspect']: aspect }, ...props, children: [_jsx(ScrollArea.Viewport, { ref: viewport, tabIndex: 0, "aria-roledescription": "carousel", "aria-label": label, onKeyDown: keys, className: slots.slidesViewport({
+                        className: snap
+                            ? 'min-h-[min(60dvh,32rem)] snap-y snap-mandatory [container-type:size]'
+                            : undefined,
+                    }), children: _jsx(ScrollArea.Content, { className: slots.slidesContent({ className: snap ? 'py-1.5' : 'gap-2 pb-3 pt-1' }), children: slides.map((slide, at) => (_jsx(SlideIndexContext.Provider, { value: at, children: slide }, at))) }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) }), (counter ?? snap) && count > 1 ? (_jsxs("div", { "data-slot": "sheet-slides-counter", "aria-hidden": "true", className: slots.counter(), children: [current + 1, " / ", count] })) : null] }) }));
+}
+SheetSlides.displayName = 'Sheet.Slides';
+/** One slide: a rounded frame that fills with an image, a video or anything drawn. */
+function SheetSlide({ label, aspect, className, style, children, ...props }) {
+    const slides = useContext(SlidesContext);
+    if (!slides)
+        throw new Error('Sheet.Slide must be used inside <Sheet.Slides>.');
+    const at = useContext(SlideIndexContext);
+    const slots = sheetVariants();
+    const place = `${at + 1} of ${slides.count}`;
+    const selected = at === slides.current;
+    const name = label ? `${place}, ${label}` : place;
+    const frameClass = slots.slide({
+        className: [
+            slides.snap
+                ? 'h-[calc(100cqh-0.75rem)] snap-center'
+                : // In a column a slide sits on the sheet's own colour, so it takes the
+                    // theme's border as a real edge, and a shadow to stand off the sheet.
+                    'aspect-(--slide-aspect) rounded-[14px] shadow-xs ring-1 ring-border transition-shadow duration-150 after:hidden',
+            !slides.snap && !selected && slides.pressable && 'group-hover/slide:ring-foreground/25',
+            // Chosen in a column: a ring in the info colour, the theme's colour for
+            // something switched on, clear of the slide's edge.
+            !slides.snap && selected && 'shadow-none ring-2 ring-[var(--info)] ring-offset-2 ring-offset-popover',
+            className,
+        ],
+    });
+    const frameStyle = aspect ? { ...style, aspectRatio: aspect } : style;
+    // In a deck the slide is the frame, so the observer that finds the current
+    // one has a box to watch.
+    if (slides.snap) {
+        return (_jsx("div", { "data-slot": "sheet-slide", "data-slide-frame": "", "data-index": at, "data-current": selected ? '' : undefined, role: "group", "aria-roledescription": "slide", "aria-label": name, className: frameClass, style: frameStyle, ...props, children: children }));
+    }
+    const frame = (_jsx("div", { "data-slide-frame": "", "data-current": selected ? '' : undefined, className: frameClass, style: frameStyle, children: children }));
+    return (_jsxs("div", { "data-slot": "sheet-slide", "data-index": at, "data-selected": selected ? '' : undefined, className: slots.slideRow(), ...props, children: [_jsx("span", { "aria-hidden": "true", className: slots.slideNumber({ className: selected ? 'text-[var(--info)]' : undefined }), children: at + 1 }), slides.pressable ? (_jsx("button", { type: "button", "aria-label": label ? name : `Slide ${place}`, "aria-current": selected ? 'true' : undefined, className: slots.slideButton(), onClick: () => slides.choose(at), children: frame })) : (_jsx("div", { role: "group", "aria-roledescription": "slide", "aria-label": name, children: frame }))] }));
+}
+SheetSlide.displayName = 'Sheet.Slide';
 /**
  * Wrap the app — or the part of the page a sheet belongs to — in this, and
  * the page steps back slightly while a sheet is open. Sheets opened anywhere
@@ -435,5 +682,7 @@ export const Sheet = Object.assign(SheetRoot, {
     Footer: SheetFooter,
     Close: SheetClose,
     Stage: SheetStage,
+    Slides: SheetSlides,
+    Slide: SheetSlide,
 });
-export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };
+export { SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetLi
 export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, type FeedbackProps, type FeedbackTriggerProps, type FeedbackContentProps, type FeedbackPanelProps, type FeedbackTitleProps, type FeedbackCloseProps, type FeedbackFieldProps, type FeedbackDescriptionProps, type FeedbackMessageProps, type FeedbackRatingProps, type FeedbackFooterProps, type FeedbackActionProps, type FeedbackSubmitProps, } from './components/feedback/index.js';
 export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardActionProps, type CardContentProps, type CardFooterProps, } from './components/card/index.js';
 export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, type FrameProps, type FrameVariant, type FrameHeaderProps, type FrameTitleProps, type FrameDescriptionProps, type FrameActionProps, type FramePanelProps, type FrameRowProps, type FrameMediaProps, type FrameContentProps, type FrameActionsProps, type FrameSectionProps, type FrameFooterProps, } from './components/frame/index.js';
-export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, type SheetProps, type SheetSide, type SheetTriggerProps, type SheetNextProps, type SheetContentProps, type SheetHeaderProps, type SheetTitleProps, type SheetDescriptionProps, type SheetBodyProps, type SheetFooterProps, type SheetCloseProps, type SheetStageProps, } from './components/sheet/index.js';
+export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, type SheetProps, type SheetSide, type SheetTriggerProps, type SheetNextProps, type SheetContentProps, type SheetHeaderProps, type SheetTitleProps, type SheetDescriptionProps, type SheetBodyProps, type SheetFooterProps, type SheetCloseProps, type SheetStageProps, type SheetSlidesProps, type SheetSlideProps, } from './components/sheet/index.js';
 export { DayGrid, DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription, type DayGridProps, type DayGridLegendProps, type DayGridWeekdaysProps, type DayGridCaptionProps, type DayGridTitleProps, type DayGridDescriptionProps, type DayGridColor, type DayCell, type DayLevel, } from './components/day-grid/index.js';
 export { RangeMeter, RangeMeterLabel, RangeMeterScale, type RangeMeterProps, type RangeMeterLabelProps, type RangeMeterScaleProps, type RangeMeterColor, } from './components/range-meter/index.js';
 export { BarPicker, type BarPickerProps, type BarPickerBar, type BarPickerColor, } from './components/bar-picker/index.js';
@@ -16,14 +16,19 @@ export { Stat, StatContent, StatLabel, StatDescription, StatValue, StatUnit, Sta
 export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, type CommandDockProps, type CommandDockTriggerProps, type CommandDockPanelProps, type CommandDockInputProps, type CommandDockResultsProps, type CommandDockRowProps, type CommandDockRowTitleProps, type CommandDockRowMetaProps, type CommandDockStatusProps, } from './components/command-dock/index.js';
 export { NotFound, NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundActions, type NotFoundProps, type NotFoundCodeProps, type NotFoundTitleProps, type NotFoundDescriptionProps, type NotFoundActionsProps, type NotFoundEffect, type NotFoundColor, } from './components/not-found/index.js';
 export { Button, buttonVariants, type ButtonProps, type ButtonVariant, type ButtonSize } from './components/button/index.js';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, type ButtonGroupProps, type ButtonGroupOrientation, type ButtonGroupSeparatorProps, type ButtonGroupTextProps, type ButtonGroupTextSize, } from './components/button-group/index.js';
 export { Input, InputGroup, InputAddon, type InputProps, type InputGroupProps, type InputAddonProps, type InputSize } from './components/input/index.js';
 export { Textarea, type TextareaProps } from './components/textarea/index.js';
 export { Switch, type SwitchProps, type SwitchSize, type SwitchColor } from './components/switch/index.js';
 export { Label, LabelText, LabelHint, LabelAction, type LabelProps, type LabelTextProps, type LabelHintProps, type LabelActionProps, } from './components/label/index.js';
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator, type SelectProps, type SelectTriggerProps, type SelectValueProps, type SelectContentProps, type SelectItemProps, type SelectGroupProps, type SelectGroupLabelProps, type SelectSeparatorProps, } from './components/select/index.js';
-export { Prompt, PromptBanner, PromptBannerAction, PromptField, PromptAttachments, PromptTextarea, PromptFooter, PromptTools, PromptTool, PromptAttach, PromptMenu, PromptAttachItem, PromptModel, PromptSubmit, PromptStatus, PromptTasks, PromptTask, PromptCommands, PromptRecorder, PromptContext, PromptContextItem, PromptHint, type PromptProps, type PromptState, type PromptMessage, type PromptAttachment, type PromptRejectReason, type PromptBannerProps, type PromptBannerActionProps, type PromptFieldProps, type PromptAttachmentsProps, type PromptTextareaProps, type PromptFooterProps, type PromptToolsProps, type PromptToolProps, type PromptAttachProps, type PromptMenuProps, type PromptAttachItemProps, type PromptModelProps, type PromptModelItem, type PromptSubmitProps, type PromptStatusProps, type PromptTasksProps, type PromptTaskProps, type PromptTaskStatus, type PromptCommandsProps, type PromptCommandItem, type PromptRecorderProps, type PromptContextProps, type PromptContextItemProps, type PromptHintProps, } from './components/prompt/index.js';
+export { Prompt, PromptBanner, PromptBannerAction, PromptField, PromptAttachments, PromptTextarea, PromptFooter, PromptTools, PromptTool, PromptAttach, PromptMenu, PromptAttachItem, PromptModel, PromptSubmit, PromptStatus, PromptTasks, PromptTask, PromptCommands, PromptRecorder, PromptContext, PromptContextItem, PromptHint, type PromptProps, type PromptState, type PromptBandMode, type PromptMessage, type PromptAttachment, type PromptRejectReason, type PromptBannerProps, type PromptBannerActionProps, type PromptFieldProps, type PromptAttachmentsProps, type PromptTextareaProps, type PromptFooterProps, type PromptToolsProps, type PromptToolProps, type PromptAttachProps, type PromptMenuProps, type PromptAttachItemProps, type PromptModelProps, type PromptModelItem, type PromptSubmitProps, type PromptStatusProps, type PromptTasksProps, type PromptTaskProps, type PromptTaskStatus, type PromptCommandsProps, type PromptCommandItem, type PromptRecorderProps, type PromptContextProps, type PromptContextItemProps, type PromptHintProps, } from './components/prompt/index.js';
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, type MenuProps, type MenuTriggerProps, type MenuContentProps, type MenuItemProps, type MenuCheckboxItemProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuSubProps, type MenuSubTriggerProps, type MenuSubContentProps, type MenuGroupProps, type MenuGroupLabelProps, type MenuSeparatorProps, type MenuDescriptionProps, type MenuShortcutProps, type MenuBadgeProps, } from './components/menu/index.js';
 export { Avatar, AvatarBadge, AvatarGroup, type AvatarProps, type AvatarBadgeProps, type AvatarGroupProps, type AvatarSize, type AvatarShape, type AvatarColor, type AvatarStatus, } from './components/avatar/index.js';
 export { Tabs, TabsList, TabsTrigger, TabsBadge, TabsContent, type TabsProps, type TabsVariant, type TabsListProps, type TabsTriggerProps, type TabsBadgeProps, type TabsContentProps, } from './components/tabs/index.js';
 export { Message, MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageBubble, MessageBubbleContent, MessageFooter, MessageActions, MessageAction, MessageBranch, MessageStatus, MessageAttachments, MessageAttachment, type MessageFrom, type MessageProps, type MessageGroupProps, type MessageAvatarProps, type MessageContentProps, type MessageHeaderProps, type MessageBubbleProps, type MessageBubbleContentProps, type MessageFooterProps, type MessageActionsProps, type MessageActionProps, type MessageBranchProps, type MessageStatusProps, type MessageAttachmentsProps, type MessageAttachmentProps, } from './components/message/index.js';
 export { Soundwave, SoundwaveCenter, useAudioLevel, useMicrophone, type SoundwaveProps, type SoundwaveCenterProps, type SoundwaveVariant, type SoundwaveState, type SoundwaveColor, type SoundwaveSource, type AudioLevelOptions, type UseMicrophoneOptions, type MicrophoneControls, type MicrophoneStatus, } from './components/soundwave/index.js';
+export { Alert, AlertIcon, AlertTitle, AlertDescription, AlertActions, AlertClose, AlertDetails, AlertItem, type AlertProps, type AlertTone, type AlertVariant, type AlertIconProps, type AlertTitleProps, type AlertDescriptionProps, type AlertActionsProps, type AlertCloseProps, type AlertDetailsProps, type AlertItemProps, } from './components/alert/index.js';
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogMedia, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, type AlertDialogProps, type AlertDialogTone, type AlertDialogTriggerProps, type AlertDialogContentProps, type AlertDialogMediaProps, type AlertDialogTitleProps, type AlertDialogDescriptionProps, type AlertDialogFooterProps, type AlertDialogCancelProps, type AlertDialogActionProps, } from './components/alert-dialog/index.js';
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, DialogList, DialogListGroup, DialogListItem, type DialogProps, type DialogTriggerProps, type DialogContentProps, type DialogHeaderProps, type DialogTitleProps, type DialogDescriptionProps, type DialogBodyProps, type DialogFooterProps, type DialogCloseProps, type DialogListProps, type DialogListGroupProps, type DialogListItemProps, } from './components/dialog/index.js';
+export { Canvas, CanvasPattern, CanvasSpotlight, CanvasContent, type CanvasProps, type CanvasViewport, type CanvasPatternVariant, type CanvasFade, type CanvasPatternProps, type CanvasSpotlightProps, type CanvasContentProps, } from './components/canvas/index.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, PlanetList, PlanetLi
 export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackDescription, FeedbackMessage, FeedbackRating, FeedbackFooter, FeedbackCancel, FeedbackSubmit, } from './components/feedback/index.js';
 export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, } from './components/card/index.js';
 export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, } from './components/frame/index.js';
-export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, } from './components/sheet/index.js';
+export { Sheet, SheetTrigger, SheetNext, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, SheetSlides, SheetSlide, } from './components/sheet/index.js';
 export { DayGrid, DayGridLegend, DayGridWeekdays, DayGridCaption, DayGridTitle, DayGridDescription, } from './components/day-grid/index.js';
 export { RangeMeter, RangeMeterLabel, RangeMeterScale, } from './components/range-meter/index.js';
 export { BarPicker, } from './components/bar-picker/index.js';
@@ -16,6 +16,7 @@ export { Stat, StatContent, StatLabel, StatDescription, StatValue, StatUnit, Sta
 export { CommandDock, CommandDockTrigger, CommandDockPanel, CommandDockInput, CommandDockResults, CommandDockRow, CommandDockRowTitle, CommandDockRowMeta, CommandDockStatus, } from './components/command-dock/index.js';
 export { NotFound, NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundActions, } from './components/not-found/index.js';
 export { Button, buttonVariants } from './components/button/index.js';
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, } from './components/button-group/index.js';
 export { Input, InputGroup, InputAddon } from './components/input/index.js';
 export { Textarea } from './components/textarea/index.js';
 export { Switch } from './components/switch/index.js';
@@ -27,3 +28,7 @@ export { Avatar, AvatarBadge, AvatarGroup, } from './components/avatar/index.js'
 export { Tabs, TabsList, TabsTrigger, TabsBadge, TabsContent, } from './components/tabs/index.js';
 export { Message, MessageGroup, MessageAvatar, MessageContent, MessageHeader, MessageBubble, MessageBubbleContent, MessageFooter, MessageActions, MessageAction, MessageBranch, MessageStatus, MessageAttachments, MessageAttachment, } from './components/message/index.js';
 export { Soundwave, SoundwaveCenter, useAudioLevel, useMicrophone, } from './components/soundwave/index.js';
+export { Alert, AlertIcon, AlertTitle, AlertDescription, AlertActions, AlertClose, AlertDetails, AlertItem, } from './components/alert/index.js';
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogMedia, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, } from './components/alert-dialog/index.js';
+export { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogClose, DialogList, DialogListGroup, DialogListItem, } from './components/dialog/index.js';
+export { Canvas, CanvasPattern, CanvasSpotlight, CanvasContent, } from './components/canvas/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-web",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "PanelUI for the web: animated, data-rich React components styled with Tailwind CSS on shadcn tokens.",
   "type": "module",
   "sideEffects": false,