panelui-web 0.5.0 → 0.6.0

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,11 @@ 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';

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,11 @@ 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';

package/package.json

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