@ptengine/design-components 0.3.0

package/src/components/ui/item.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+import { Separator } from './separator';
+
+function ItemGroup({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return <div role="list" className={cn('group/item-group flex flex-col', className)} {...props} />;
+}
+
+function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
+    return <Separator orientation="horizontal" className={cn('my-0', className)} {...props} />;
+}
+
+const itemVariants = cva(
+    'group/item flex flex-wrap items-center rounded-[var(--pt-radius-md)] border text-[14px] leading-[20px] text-foreground outline-none transition-colors',
+    {
+        variants: {
+            variant: {
+                default: 'border-transparent',
+                outline: 'border-border',
+                muted: 'border-transparent bg-muted'
+            },
+            size: {
+                default: 'gap-[16px] p-[16px]',
+                sm: 'gap-[10px] px-[16px] py-[12px]'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+);
+
+function Item({
+    className,
+    variant,
+    size,
+    asChild = false,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+    const Comp = asChild ? Slot : 'div';
+    return <Comp className={cn(itemVariants({ variant, size }), className)} {...props} />;
+}
+
+const itemMediaVariants = cva('flex shrink-0 items-center justify-center gap-[8px] [&_svg]:pointer-events-none', {
+    variants: {
+        variant: {
+            default: 'bg-transparent [&_svg]:size-[20px] [&_svg]:text-muted-foreground',
+            icon: 'size-[32px] rounded-[var(--pt-radius-sm)] border bg-secondary [&_svg]:size-[16px] [&_svg]:text-foreground',
+            image: 'size-[40px] overflow-hidden rounded-[var(--pt-radius-sm)] [&_img]:size-full [&_img]:object-cover'
+        }
+    },
+    defaultVariants: {
+        variant: 'default'
+    }
+});
+
+function ItemMedia({
+    className,
+    variant,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof itemMediaVariants>) {
+    return <div className={cn(itemMediaVariants({ variant }), className)} {...props} />;
+}
+
+function ItemContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return <div className={cn('flex flex-1 flex-col gap-[4px]', className)} {...props} />;
+}
+
+function ItemTitle({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            className={cn('flex w-fit items-center gap-[8px] text-[14px] leading-[20px] font-medium leading-snug', className)}
+            {...props}
+        />
+    );
+}
+
+function ItemDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+    return (
+        <p
+            className={cn('line-clamp-2 text-[14px] leading-[20px] leading-normal text-muted-foreground', className)}
+            {...props}
+        />
+    );
+}
+
+function ItemActions({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return <div className={cn('flex items-center gap-[8px]', className)} {...props} />;
+}
+
+function ItemHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div className={cn('flex basis-full items-center justify-between gap-[8px]', className)} {...props} />
+    );
+}
+
+function ItemFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div className={cn('flex basis-full items-center justify-between gap-[8px]', className)} {...props} />
+    );
+}
+
+export {
+    Item,
+    ItemActions,
+    ItemContent,
+    ItemDescription,
+    ItemFooter,
+    ItemGroup,
+    ItemHeader,
+    ItemMedia,
+    ItemSeparator,
+    ItemTitle
+};

package/src/components/ui/kbd.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { cn } from '../../lib/utils';
+
+function Kbd({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+    return (
+        <kbd
+            className={cn(
+                'pointer-events-none inline-flex h-[20px] w-fit min-w-[20px] select-none items-center justify-center gap-[4px] rounded-[var(--pt-radius-sm)] bg-muted px-[4px] font-sans text-[12px] leading-[16px] font-medium text-muted-foreground [&_svg]:size-[12px]',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function KbdGroup({ className, ...props }: React.HTMLAttributes<HTMLElement>) {
+    return <span className={cn('inline-flex items-center gap-[4px]', className)} {...props} />;
+}
+
+export { Kbd, KbdGroup };

package/src/components/ui/label.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const labelVariants = cva(
+    'text-[14px] leading-[20px] font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50'
+);
+
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };

package/src/components/ui/marker.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const markerVariants = cva(
+    "group/marker relative flex min-h-[16px] w-full items-center gap-[8px] text-left text-[14px] leading-[20px] text-muted-foreground [&_svg:not([class*='size-'])]:size-[16px] [&:is(a)]:underline [&:is(a)]:underline-offset-4 [&:is(a):hover]:text-foreground",
+    {
+        variants: {
+            variant: {
+                default: '',
+                separator:
+                    'before:mr-[4px] before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-[4px] after:h-px after:min-w-0 after:flex-1 after:bg-border',
+                border: 'border-b border-border pb-[8px]'
+            }
+        }
+    }
+);
+
+function Marker({
+    className,
+    variant = 'default',
+    asChild = false,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement> &
+    VariantProps<typeof markerVariants> & {
+        /** Render the child element as the root (e.g. an <a>), keeping Marker styles. */
+        asChild?: boolean;
+    }) {
+    const Comp = asChild ? Slot : 'div';
+
+    return (
+        <Comp
+            data-slot="marker"
+            data-variant={variant}
+            className={cn(markerVariants({ variant, className }))}
+            {...props}
+        />
+    );
+}
+
+function MarkerIcon({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+    return (
+        <span
+            data-slot="marker-icon"
+            aria-hidden="true"
+            className={cn("size-[16px] shrink-0 [&_svg:not([class*='size-'])]:size-[16px]", className)}
+            {...props}
+        />
+    );
+}
+
+function MarkerContent({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+    return (
+        <span
+            data-slot="marker-content"
+            className={cn(
+                'min-w-0 break-words group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:text-foreground',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+export { Marker, MarkerIcon, MarkerContent, markerVariants };

package/src/components/ui/menubar.tsx

@@ -0,0 +1,218 @@
+import * as React from 'react';
+import * as MenubarPrimitive from '@radix-ui/react-menubar';
+import { Check, ChevronRight, Circle } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+
+function MenubarMenu(props: React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Menu>) {
+    return <MenubarPrimitive.Menu {...props} />;
+}
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.Root
+        ref={ref}
+        className={cn('flex h-[32px] items-center gap-[4px] rounded-[var(--pt-radius-md)] border bg-background p-[4px]', className)}
+        {...props}
+    />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.Trigger
+        ref={ref}
+        className={cn(
+            'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[12px] py-[4px] text-[14px] leading-[20px] font-medium text-foreground outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+            className
+        )}
+        {...props}
+    />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+        inset?: boolean;
+    }
+>(({ className, inset, children, ...props }, ref) => (
+    <MenubarPrimitive.SubTrigger
+        ref={ref}
+        className={cn(
+            'flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
+            inset && 'pl-[32px]',
+            className
+        )}
+        {...props}
+    >
+        {children}
+        <ChevronRight className="ml-auto h-[16px] w-[16px]" />
+    </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.SubContent>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.SubContent
+        ref={ref}
+        className={cn(
+            'z-[var(--pt-z-popup,50)] min-w-[8rem] overflow-hidden rounded-[var(--pt-radius-md)] border bg-popover p-[4px] text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+            className
+        )}
+        {...props}
+    />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+    <MenubarPrimitive.Portal>
+        <MenubarPrimitive.Content
+            ref={ref}
+            align={align}
+            alignOffset={alignOffset}
+            sideOffset={sideOffset}
+            className={cn(
+                'z-[var(--pt-z-popup,50)] min-w-[12rem] overflow-hidden rounded-[var(--pt-radius-md)] border bg-popover p-[4px] text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                className
+            )}
+            {...props}
+        />
+    </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+        inset?: boolean;
+    }
+>(({ className, inset, ...props }, ref) => (
+    <MenubarPrimitive.Item
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] px-[8px] py-[6px] text-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            inset && 'pl-[32px]',
+            className
+        )}
+        {...props}
+    />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+    <MenubarPrimitive.CheckboxItem
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            className
+        )}
+        checked={checked}
+        {...props}
+    >
+        <span className="absolute left-[8px] flex h-[14px] w-[14px] items-center justify-center">
+            <MenubarPrimitive.ItemIndicator>
+                <Check className="h-[16px] w-[16px]" />
+            </MenubarPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+    <MenubarPrimitive.RadioItem
+        ref={ref}
+        className={cn(
+            'relative flex cursor-default select-none items-center rounded-[var(--pt-radius-sm)] py-[6px] pl-[32px] pr-[8px] text-[14px] leading-[20px] outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            className
+        )}
+        {...props}
+    >
+        <span className="absolute left-[8px] flex h-[14px] w-[14px] items-center justify-center">
+            <MenubarPrimitive.ItemIndicator>
+                <Circle className="h-[8px] w-[8px] fill-current" />
+            </MenubarPrimitive.ItemIndicator>
+        </span>
+        {children}
+    </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Label>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+        inset?: boolean;
+    }
+>(({ className, inset, ...props }, ref) => (
+    <MenubarPrimitive.Label
+        ref={ref}
+        className={cn('px-[8px] py-[6px] text-[14px] leading-[20px] font-semibold text-foreground', inset && 'pl-[32px]', className)}
+        {...props}
+    />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+    React.ElementRef<typeof MenubarPrimitive.Separator>,
+    React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+    <MenubarPrimitive.Separator
+        ref={ref}
+        className={cn('-mx-[4px] my-[4px] h-px bg-muted', className)}
+        {...props}
+    />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+    return (
+        <span
+            className={cn('ml-auto text-[13px] leading-[20px] tracking-widest text-muted-foreground', className)}
+            {...props}
+        />
+    );
+};
+MenubarShortcut.displayName = 'MenubarShortcut';
+
+export {
+    Menubar,
+    MenubarMenu,
+    MenubarTrigger,
+    MenubarContent,
+    MenubarItem,
+    MenubarSeparator,
+    MenubarLabel,
+    MenubarCheckboxItem,
+    MenubarRadioGroup,
+    MenubarRadioItem,
+    MenubarPortal,
+    MenubarSubContent,
+    MenubarSubTrigger,
+    MenubarGroup,
+    MenubarSub,
+    MenubarShortcut
+};

package/src/components/ui/message-scroller.tsx

@@ -0,0 +1,206 @@
+import * as React from 'react';
+import { ArrowDown } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+
+const EDGE_THRESHOLD = 32;
+
+type MessageScrollerContextValue = {
+    viewportRef: React.RefObject<HTMLDivElement | null>;
+    atStart: boolean;
+    atEnd: boolean;
+    scrollToEdge: (edge: 'start' | 'end', behavior?: ScrollBehavior) => void;
+    measure: () => void;
+    stickToEndRef: React.MutableRefObject<boolean>;
+};
+
+const MessageScrollerContext = React.createContext<MessageScrollerContextValue | null>(null);
+
+function useMessageScroller() {
+    const ctx = React.useContext(MessageScrollerContext);
+    if (!ctx) {
+        throw new Error(
+            'useMessageScroller must be used within <MessageScrollerProvider /> or <MessageScroller />'
+        );
+    }
+    return ctx;
+}
+
+function useMessageScrollerState(): MessageScrollerContextValue {
+    const viewportRef = React.useRef<HTMLDivElement | null>(null);
+    const stickToEndRef = React.useRef(true);
+    const [atStart, setAtStart] = React.useState(true);
+    const [atEnd, setAtEnd] = React.useState(true);
+
+    const measure = React.useCallback(() => {
+        const el = viewportRef.current;
+        if (!el) return;
+        const end = el.scrollHeight - el.scrollTop - el.clientHeight <= EDGE_THRESHOLD;
+        stickToEndRef.current = end;
+        setAtEnd(end);
+        setAtStart(el.scrollTop <= EDGE_THRESHOLD);
+    }, []);
+
+    const scrollToEdge = React.useCallback(
+        (edge: 'start' | 'end', behavior: ScrollBehavior = 'smooth') => {
+            const el = viewportRef.current;
+            if (!el) return;
+            el.scrollTo({ top: edge === 'end' ? el.scrollHeight : 0, behavior });
+        },
+        []
+    );
+
+    return React.useMemo(
+        () => ({ viewportRef, atStart, atEnd, scrollToEdge, measure, stickToEndRef }),
+        [atStart, atEnd, scrollToEdge, measure]
+    );
+}
+
+/** 可选：把滚动状态提升到 MessageScroller 之外（如让按钮/输入框读取 atEnd）。 */
+function MessageScrollerProvider({ children }: { children: React.ReactNode }) {
+    const value = useMessageScrollerState();
+    return (
+        <MessageScrollerContext.Provider value={value}>{children}</MessageScrollerContext.Provider>
+    );
+}
+
+function MessageScroller({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    const outer = React.useContext(MessageScrollerContext);
+    const own = useMessageScrollerState();
+    return (
+        <MessageScrollerContext.Provider value={outer ?? own}>
+            <div
+                data-slot="message-scroller"
+                className={cn(
+                    'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',
+                    className
+                )}
+                {...props}
+            />
+        </MessageScrollerContext.Provider>
+    );
+}
+
+function MessageScrollerViewport({
+    className,
+    onScroll,
+    children,
+    ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+    const { viewportRef, measure, stickToEndRef, scrollToEdge } = useMessageScroller();
+
+    React.useLayoutEffect(() => {
+        scrollToEdge('end', 'auto');
+        measure();
+    }, [scrollToEdge, measure]);
+
+    React.useEffect(() => {
+        const el = viewportRef.current;
+        const content = el?.firstElementChild;
+        if (!el || !content) return;
+        const ro = new ResizeObserver(() => {
+            if (stickToEndRef.current) el.scrollTop = el.scrollHeight;
+            measure();
+        });
+        ro.observe(content);
+        return () => ro.disconnect();
+    }, [viewportRef, stickToEndRef, measure]);
+
+    return (
+        <div
+            ref={viewportRef}
+            data-slot="message-scroller-viewport"
+            className={cn(
+                'size-full min-h-0 min-w-0 overflow-y-auto overscroll-contain [contain:content]',
+                className
+            )}
+            onScroll={e => {
+                measure();
+                onScroll?.(e);
+            }}
+            {...props}
+        >
+            {children}
+        </div>
+    );
+}
+
+function MessageScrollerContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            data-slot="message-scroller-content"
+            className={cn('flex h-max min-h-full flex-col gap-[32px]', className)}
+            {...props}
+        />
+    );
+}
+
+function MessageScrollerItem({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return (
+        <div
+            data-slot="message-scroller-item"
+            className={cn(
+                'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',
+                className
+            )}
+            {...props}
+        />
+    );
+}
+
+function MessageScrollerButton({
+    direction = 'end',
+    className,
+    children,
+    label,
+    variant = 'secondary',
+    size = 'icon',
+    onClick,
+    ...props
+}: React.ComponentProps<typeof Button> & {
+    direction?: 'start' | 'end';
+    /** 读屏文案,库不做 i18n,消费方传译文 */
+    label?: string;
+}) {
+    const { atStart, atEnd, scrollToEdge } = useMessageScroller();
+    const active = direction === 'end' ? !atEnd : !atStart;
+
+    return (
+        <Button
+            data-slot="message-scroller-button"
+            data-direction={direction}
+            data-active={active}
+            variant={variant}
+            size={size}
+            className={cn(
+                'absolute left-1/2 z-10 h-[32px] w-[32px] -translate-x-1/2 rounded-full transition-[opacity,transform] duration-200 data-[direction=end]:bottom-[16px] data-[direction=start]:top-[16px] data-[active=false]:pointer-events-none data-[active=false]:opacity-0 data-[active=true]:opacity-100 data-[direction=start]:[&_svg]:rotate-180',
+                className
+            )}
+            onClick={e => {
+                onClick?.(e);
+                if (!e.defaultPrevented) scrollToEdge(direction);
+            }}
+            {...props}
+        >
+            {children ?? (
+                <>
+                    <ArrowDown />
+                    <span className="sr-only">
+                        {label ?? (direction === 'end' ? 'Scroll to end' : 'Scroll to start')}
+                    </span>
+                </>
+            )}
+        </Button>
+    );
+}
+
+export {
+    MessageScrollerProvider,
+    MessageScroller,
+    MessageScrollerViewport,
+    MessageScrollerContent,
+    MessageScrollerItem,
+    MessageScrollerButton,
+    useMessageScroller
+};