panelui-web 0.5.0 → 0.7.0

package/dist/components/switch/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Switch — on or off, for a setting that takes effect the moment it changes.
+ *
+ * ```tsx
+ * <Switch label="Dark mode" defaultChecked />
+ *
+ * <Label>
+ *   <Label.Text>Email me a receipt</Label.Text>
+ *   <Label.Action><Switch /></Label.Action>
+ * </Label>
+ * ```
+ *
+ * ## It moves like a thing with weight
+ *
+ * The colour does not fade in. It sweeps along the track behind the thumb,
+ * so the track fills from the side the thumb left and reads as the thumb's
+ * doing. While it is pressed, the thumb stretches towards where it is going,
+ * so a press that has not yet let go already says which way it will flip.
+ *
+ * ## While a change is saved
+ *
+ * A setting saved to a server is not on until the server says so. `pending`
+ * puts a turning ring in the thumb and stops the switch being pressed again,
+ * so the switch can show the new state at once and still be honest that it
+ * has not landed yet.
+ */
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import type { CSSProperties } from 'react';
+export type SwitchSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SwitchColor = 'primary' | 'success' | 'info' | 'destructive';
+export interface SwitchProps extends Omit<BaseSwitch.Root.Props, 'className' | 'color'> {
+    /** Default `md`. */
+    size?: SwitchSize;
+    /** The colour it fills with when on. `primary` by default; pick another for what it means. */
+    color?: SwitchColor;
+    /**
+     * What a screen reader calls it, when there is no visible label tied to it.
+     * A `Label` wrapped round it, or pointing at its `id`, is better when there is room.
+     */
+    label?: string;
+    /** A change is being saved: a ring turns in the thumb, and it cannot be pressed again until it is done. */
+    pending?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/** A switch. Takes `checked`/`onCheckedChange` or `defaultChecked`, and `name` for a form. */
+declare function Switch({ size, color, label, pending, className, style, readOnly, ...props }: SwitchProps): import("react").JSX.Element;
+declare namespace Switch {
+    var displayName: string;
+}
+export { Switch };

package/dist/components/switch/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Switch — on or off, for a setting that takes effect the moment it changes.
+ *
+ * ```tsx
+ * <Switch label="Dark mode" defaultChecked />
+ *
+ * <Label>
+ *   <Label.Text>Email me a receipt</Label.Text>
+ *   <Label.Action><Switch /></Label.Action>
+ * </Label>
+ * ```
+ *
+ * ## It moves like a thing with weight
+ *
+ * The colour does not fade in. It sweeps along the track behind the thumb,
+ * so the track fills from the side the thumb left and reads as the thumb's
+ * doing. While it is pressed, the thumb stretches towards where it is going,
+ * so a press that has not yet let go already says which way it will flip.
+ *
+ * ## While a change is saved
+ *
+ * A setting saved to a server is not on until the server says so. `pending`
+ * puts a turning ring in the thumb and stops the switch being pressed again,
+ * so the switch can show the new state at once and still be honest that it
+ * has not landed yet.
+ */
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { tv } from 'tailwind-variants';
+/** Height and width of the track. The thumb is the height less 2px of padding on each side. */
+const SIZE = {
+    xs: ['1rem', '1.75rem'],
+    sm: ['1.25rem', '2.125rem'],
+    md: ['1.5rem', '2.625rem'],
+    lg: ['1.75rem', '3.125rem'],
+    xl: ['2rem', '3.625rem'],
+};
+const SPRING = 'ease-[cubic-bezier(0.3,1.35,0.45,1)]';
+const switchVariants = tv({
+    slots: {
+        root: [
+            'group/switch relative inline-flex h-(--switch-h) w-(--switch-w) shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none',
+            'bg-input transition-[background-color,box-shadow] duration-200 dark:bg-input/80',
+            'hover:not-data-disabled:bg-[color-mix(in_oklab,var(--input),var(--foreground)_8%)]',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50 aria-busy:cursor-progress',
+            // The fill: the whole track in the switch's colour, uncovered from the
+            // thumb's starting side as it travels.
+            "before:absolute before:inset-0 before:rounded-[inherit] before:bg-(--switch-color) before:content-['']",
+            'before:[clip-path:inset(0_100%_0_0_round_999px)] before:transition-[clip-path] before:duration-300 before:ease-[cubic-bezier(0.3,1.35,0.45,1)]',
+            'rtl:before:[clip-path:inset(0_0_0_100%_round_999px)]',
+            'data-checked:before:[clip-path:inset(0_0_0_0_round_999px)]',
+            'motion-reduce:before:transition-none',
+        ],
+        thumb: [
+            'relative z-10 flex size-[calc(var(--switch-h)-4px)] items-center justify-center rounded-full bg-white',
+            // On, the thumb takes the colour that reads on the fill: dark on a light primary, white on the rest.
+            'transition-colors data-checked:bg-(--switch-thumb)',
+            'shadow-[0_1px_2px_rgb(0_0_0/0.18),0_2px_6px_-1px_rgb(0_0_0/0.12)]',
+            `transition-[translate,width] duration-300 ${SPRING} motion-reduce:transition-none`,
+            // On: across by the track's width less its height, which is the room left.
+            'data-checked:translate-x-[calc(var(--switch-w)-var(--switch-h))] rtl:data-checked:-translate-x-[calc(var(--switch-w)-var(--switch-h))]',
+            // Pressed: a fifth longer, towards where it is going. When on, it grows back the way it came.
+            'group-active/switch:not-data-disabled:w-[calc((var(--switch-h)-4px)*1.22)]',
+            'group-active/switch:data-checked:not-data-disabled:translate-x-[calc(var(--switch-w)-var(--switch-h)-(var(--switch-h)-4px)*0.22)]',
+            'rtl:group-active/switch:data-checked:not-data-disabled:-translate-x-[calc(var(--switch-w)-var(--switch-h)-(var(--switch-h)-4px)*0.22)]',
+            'group-aria-busy/switch:w-[calc(var(--switch-h)-4px)]',
+        ],
+        spinner: 'size-[62%] animate-spin text-(--switch-color) group-not-data-checked/switch:text-muted-foreground motion-reduce:animate-none',
+    },
+    variants: {
+        color: {
+            primary: { root: '[--switch-color:var(--primary)] [--switch-thumb:var(--primary-foreground)]' },
+            success: { root: '[--switch-color:var(--success)] [--switch-thumb:white]' },
+            info: { root: '[--switch-color:var(--info)] [--switch-thumb:white]' },
+            destructive: { root: '[--switch-color:var(--destructive)] [--switch-thumb:white]' },
+        },
+    },
+    defaultVariants: { color: 'primary' },
+});
+/** A switch. Takes `checked`/`onCheckedChange` or `defaultChecked`, and `name` for a form. */
+function Switch({ size = 'md', color, label, pending = false, className, style, readOnly, ...props }) {
+    const slots = switchVariants({ color });
+    const [height, width] = SIZE[size];
+    return (_jsx(BaseSwitch.Root, { "data-slot": "switch", "data-size": size, "aria-label": label, "aria-busy": pending || undefined, readOnly: pending || readOnly, className: slots.root({ className }), style: { ['--switch-h']: height, ['--switch-w']: width, ...style }, ...props, children: _jsx(BaseSwitch.Thumb, { "data-slot": "switch-thumb", className: slots.thumb(), children: pending ? (_jsxs("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", className: slots.spinner(), fill: "none", children: [_jsx("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 3.5 }), _jsx("path", { d: "M21 12a9 9 0 0 0-9-9", stroke: "currentColor", strokeWidth: 3.5, strokeLinecap: "round" })] })) : null }) }));
+}
+Switch.displayName = 'Switch';
+export { Switch };

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,94 @@
+/**
+ * Tabs — a few views of one thing, one at a time, chosen from a row of tabs.
+ *
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity">
+ *       Activity <Tabs.Badge>12</Tabs.Badge>
+ *     </Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="overview">…</Tabs.Content>
+ *   <Tabs.Content value="activity">…</Tabs.Content>
+ * </Tabs>
+ * ```
+ *
+ * ## Three weights
+ *
+ * `segmented` sets the tabs in a track with the chosen one raised out of it:
+ * a control for switching what a panel shows. `underline` is lighter, a line
+ * under the chosen tab, for the sections of a page. `pills` fills the chosen
+ * tab with the primary colour, for a filter that should be seen from across
+ * the screen.
+ *
+ * ## It moves the way the hand did
+ *
+ * The marker slides to the new tab. The underline stretches as it goes, its
+ * leading end arriving first and the trailing end catching up, so a long jump
+ * reads as one movement and not as a line teleporting. The new panel slides
+ * in from the side the tab was on, so going right looks like going right.
+ *
+ * ## A row that does not fit scrolls
+ *
+ * When the tabs are wider than the space for them, the row scrolls sideways
+ * and fades at the end that has more, rather than wrapping onto a second line
+ * or shrinking the labels.
+ */
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { type ComponentProps } from 'react';
+export type TabsVariant = 'segmented' | 'underline' | 'pills';
+export interface TabsProps extends Omit<BaseTabs.Root.Props, 'className'> {
+    /** How the tabs are drawn. Default `segmented`. */
+    variant?: TabsVariant;
+    className?: string;
+}
+/**
+ * Holds which tab is chosen: `defaultValue`, or `value` with `onValueChange`.
+ * `orientation="vertical"` puts the tabs in a column beside the content.
+ */
+declare function TabsRoot({ variant, className, ...props }: TabsProps): import("react").JSX.Element;
+declare namespace TabsRoot {
+    var displayName: string;
+}
+export interface TabsListProps extends Omit<BaseTabs.List.Props, 'className'> {
+    className?: string;
+}
+/** The row of tabs, with the marker under the chosen one. */
+declare function TabsList({ className, children, ...props }: TabsListProps): import("react").JSX.Element;
+declare namespace TabsList {
+    var displayName: string;
+}
+export interface TabsTriggerProps extends Omit<BaseTabs.Tab.Props, 'className'> {
+    className?: string;
+}
+/**
+ * One tab. Its `value` names the `Tabs.Content` it shows. An icon and a
+ * `Tabs.Badge` can sit beside its label.
+ */
+declare function TabsTrigger({ className, ...props }: TabsTriggerProps): import("react").JSX.Element;
+declare namespace TabsTrigger {
+    var displayName: string;
+}
+export interface TabsBadgeProps extends ComponentProps<'span'> {
+}
+/** A count beside a tab's label: unread, open, waiting. */
+declare function TabsBadge({ className, ...props }: TabsBadgeProps): import("react").JSX.Element;
+declare namespace TabsBadge {
+    var displayName: string;
+}
+export interface TabsContentProps extends Omit<BaseTabs.Panel.Props, 'className'> {
+    className?: string;
+}
+/** What one tab shows. Only the chosen one is in the page unless `keepMounted` is set. */
+declare function TabsContent({ className, ...props }: TabsContentProps): import("react").JSX.Element;
+declare namespace TabsContent {
+    var displayName: string;
+}
+export declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Badge: typeof TabsBadge;
+    Content: typeof TabsContent;
+};
+export { TabsList, TabsTrigger, TabsBadge, TabsContent };

package/dist/components/tabs/index.js

@@ -0,0 +1,196 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Tabs — a few views of one thing, one at a time, chosen from a row of tabs.
+ *
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <Tabs.List>
+ *     <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
+ *     <Tabs.Trigger value="activity">
+ *       Activity <Tabs.Badge>12</Tabs.Badge>
+ *     </Tabs.Trigger>
+ *   </Tabs.List>
+ *   <Tabs.Content value="overview">…</Tabs.Content>
+ *   <Tabs.Content value="activity">…</Tabs.Content>
+ * </Tabs>
+ * ```
+ *
+ * ## Three weights
+ *
+ * `segmented` sets the tabs in a track with the chosen one raised out of it:
+ * a control for switching what a panel shows. `underline` is lighter, a line
+ * under the chosen tab, for the sections of a page. `pills` fills the chosen
+ * tab with the primary colour, for a filter that should be seen from across
+ * the screen.
+ *
+ * ## It moves the way the hand did
+ *
+ * The marker slides to the new tab. The underline stretches as it goes, its
+ * leading end arriving first and the trailing end catching up, so a long jump
+ * reads as one movement and not as a line teleporting. The new panel slides
+ * in from the side the tab was on, so going right looks like going right.
+ *
+ * ## A row that does not fit scrolls
+ *
+ * When the tabs are wider than the space for them, the row scrolls sideways
+ * and fades at the end that has more, rather than wrapping onto a second line
+ * or shrinking the labels.
+ */
+import { Tabs as BaseTabs } from '@base-ui/react/tabs';
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { tv } from 'tailwind-variants';
+/** One curve for the marker and the panel, so they move as one thing. */
+const EASE = 'ease-[cubic-bezier(0.3,0.7,0.1,1)]';
+const tabsVariants = tv({
+    slots: {
+        root: 'group/tabs flex flex-col gap-4 data-[orientation=vertical]:flex-row',
+        list: [
+            'relative z-0 flex shrink-0 items-center',
+            'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+            // Scrolls rather than wraps, with no bar of its own; the fade says there is more.
+            'data-[orientation=horizontal]:max-w-full data-[orientation=horizontal]:overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+            'data-overflow-start:[--fade-start:3rem] data-overflow-end:[--fade-end:3rem]',
+            '[mask-image:linear-gradient(to_right,transparent,#000_var(--fade-start,0px),#000_calc(100%-var(--fade-end,0px)),transparent)]',
+        ],
+        trigger: [
+            'relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 whitespace-nowrap text-sm font-medium outline-none select-none',
+            'text-muted-foreground transition-colors duration-200 hover:text-foreground data-active:text-foreground',
+            'data-disabled:pointer-events-none data-disabled:opacity-50',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+            '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
+            'group-data-[orientation=vertical]/tabs:justify-start',
+        ],
+        indicator: 'absolute -z-10',
+        badge: [
+            'inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-medium tabular-nums',
+            'bg-foreground/[0.07] text-muted-foreground transition-colors duration-200',
+            'in-data-active:bg-foreground/10 in-data-active:text-foreground',
+        ],
+        content: [
+            'min-w-0 flex-1 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            // The new panel arrives from the side its tab was on. The old one goes at once.
+            `transition-[opacity,translate] duration-300 ${EASE} motion-reduce:transition-none`,
+            'data-starting-style:opacity-0',
+            'data-[activation-direction=right]:data-starting-style:translate-x-3 data-[activation-direction=left]:data-starting-style:-translate-x-3',
+            'data-[activation-direction=down]:data-starting-style:translate-y-2 data-[activation-direction=up]:data-starting-style:-translate-y-2',
+            'data-ending-style:hidden',
+        ],
+    },
+    variants: {
+        variant: {
+            segmented: {
+                list: 'w-fit gap-0.5 rounded-xl bg-muted p-1',
+                trigger: 'h-8 rounded-lg px-3',
+                indicator: [
+                    'top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-lg',
+                    'bg-background shadow-sm ring-1 ring-foreground/[0.06] dark:bg-input dark:ring-foreground/10',
+                    `transition-[left,top,width,height] duration-300 ${EASE} motion-reduce:transition-none`,
+                ],
+            },
+            underline: {
+                list: [
+                    'gap-1 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:shadow-[inset_0_-1px_0_var(--border)]',
+                    'data-[orientation=vertical]:shadow-[inset_-1px_0_0_var(--border)]',
+                ],
+                trigger: [
+                    'h-10 px-3',
+                    'group-data-[orientation=vertical]/tabs:h-9 group-data-[orientation=vertical]/tabs:pe-5',
+                    // The hover fill sits inside the row, clear of the line.
+                    "before:absolute before:inset-x-0.5 before:inset-y-1.5 before:-z-10 before:rounded-md before:transition-colors before:content-[''] hover:before:bg-muted/70",
+                ],
+                indicator: [
+                    'bg-foreground',
+                    // The two ends move separately: the one going first is quick and the
+                    // other follows, so the line stretches on the way and settles.
+                    'data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:rounded-t-full',
+                    'data-[orientation=horizontal]:left-(--active-tab-left) data-[orientation=horizontal]:right-(--active-tab-right)',
+                    'data-[orientation=vertical]:right-0 data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:rounded-s-full',
+                    'data-[orientation=vertical]:top-(--active-tab-top) data-[orientation=vertical]:bottom-(--active-tab-bottom)',
+                    `transition-[left,right,top,bottom] ${EASE} motion-reduce:transition-none`,
+                    '[transition-duration:300ms]',
+                    'data-[activation-direction=right]:[transition-duration:420ms,200ms] data-[activation-direction=left]:[transition-duration:200ms,420ms]',
+                    'data-[activation-direction=down]:[transition-duration:0ms,0ms,420ms,200ms] data-[activation-direction=up]:[transition-duration:0ms,0ms,200ms,420ms]',
+                ],
+            },
+            pills: {
+                list: 'w-fit gap-1',
+                trigger: 'h-8 rounded-full px-3.5 hover:bg-muted data-active:text-primary-foreground data-active:hover:bg-transparent',
+                badge: 'in-data-active:bg-primary-foreground/20 in-data-active:text-primary-foreground',
+                indicator: [
+                    'top-(--active-tab-top) left-(--active-tab-left) h-(--active-tab-height) w-(--active-tab-width) rounded-full bg-primary',
+                    `transition-[left,top,width,height] duration-300 ${EASE} motion-reduce:transition-none`,
+                ],
+            },
+        },
+    },
+    compoundVariants: [
+        // A vertical segmented list is a column of full-width rows.
+        { variant: 'segmented', className: { list: 'data-[orientation=vertical]:w-48' } },
+        { variant: 'pills', className: { list: 'data-[orientation=vertical]:w-48' } },
+    ],
+    defaultVariants: { variant: 'segmented' },
+});
+/**
+ * Holds which tab is chosen: `defaultValue`, or `value` with `onValueChange`.
+ * `orientation="vertical"` puts the tabs in a column beside the content.
+ */
+function TabsRoot({ variant = 'segmented', className, ...props }) {
+    return (_jsx(VariantContext.Provider, { value: variant, children: _jsx(BaseTabs.Root, { "data-slot": "tabs", "data-variant": variant, className: tabsVariants({ variant }).root({ className }), ...props }) }));
+}
+TabsRoot.displayName = 'Tabs';
+const VariantContext = createContext('segmented');
+/** The row of tabs, with the marker under the chosen one. */
+function TabsList({ className, children, ...props }) {
+    const ref = useRef(null);
+    const slots = tabsVariants({ variant: useContext(VariantContext) });
+    // Marks the ends that have more to scroll to, for the fade.
+    useEffect(() => {
+        const list = ref.current;
+        if (!list)
+            return;
+        const read = () => {
+            const start = list.scrollLeft > 1;
+            const end = list.scrollLeft + list.clientWidth < list.scrollWidth - 1;
+            list.toggleAttribute('data-overflow-start', start);
+            list.toggleAttribute('data-overflow-end', end);
+        };
+        read();
+        list.addEventListener('scroll', read, { passive: true });
+        const observer = new ResizeObserver(read);
+        observer.observe(list);
+        return () => {
+            list.removeEventListener('scroll', read);
+            observer.disconnect();
+        };
+    }, []);
+    return (_jsxs(BaseTabs.List, { ref: ref, "data-slot": "tabs-list", className: slots.list({ className }), ...props, children: [children, _jsx(BaseTabs.Indicator, { "data-slot": "tabs-indicator", className: slots.indicator(), renderBeforeHydration: true })] }));
+}
+TabsList.displayName = 'Tabs.List';
+/**
+ * One tab. Its `value` names the `Tabs.Content` it shows. An icon and a
+ * `Tabs.Badge` can sit beside its label.
+ */
+function TabsTrigger({ className, ...props }) {
+    const slots = tabsVariants({ variant: useContext(VariantContext) });
+    return _jsx(BaseTabs.Tab, { "data-slot": "tabs-trigger", className: slots.trigger({ className }), ...props });
+}
+TabsTrigger.displayName = 'Tabs.Trigger';
+/** A count beside a tab's label: unread, open, waiting. */
+function TabsBadge({ className, ...props }) {
+    const slots = tabsVariants({ variant: useContext(VariantContext) });
+    return _jsx("span", { "data-slot": "tabs-badge", className: slots.badge({ className }), ...props });
+}
+TabsBadge.displayName = 'Tabs.Badge';
+/** What one tab shows. Only the chosen one is in the page unless `keepMounted` is set. */
+function TabsContent({ className, ...props }) {
+    return _jsx(BaseTabs.Panel, { "data-slot": "tabs-content", className: tabsVariants().content({ className }), ...props });
+}
+TabsContent.displayName = 'Tabs.Content';
+export const Tabs = Object.assign(TabsRoot, {
+    List: TabsList,
+    Trigger: TabsTrigger,
+    Badge: TabsBadge,
+    Content: TabsContent,
+});
+export { TabsList, TabsTrigger, TabsBadge, TabsContent };

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, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, type SheetProps, type SheetSide, type SheetTriggerProps, 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, 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 { 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';
@@ -18,6 +18,12 @@ export { NotFound, NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundAct
 export { Button, buttonVariants, type ButtonProps, type ButtonVariant, type ButtonSize } from './components/button/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 { 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';

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, 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, } 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';
@@ -18,6 +18,12 @@ export { NotFound, NotFoundCode, NotFoundTitle, NotFoundDescription, NotFoundAct
 export { Button, buttonVariants } from './components/button/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';
+export { Label, LabelText, LabelHint, LabelAction, } from './components/label/index.js';
 export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem, SelectGroup, SelectGroupLabel, SelectSeparator, } 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, } from './components/prompt/index.js';
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuCheckboxItem, MenuRadioGroup, MenuRadioItem, MenuSub, MenuSubTrigger, MenuSubContent, MenuGroup, MenuGroupLabel, MenuSeparator, MenuDescription, MenuShortcut, MenuBadge, } from './components/menu/index.js';
+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';

package/package.json

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